기억하기 위한 기록

<HTML> 기초 (드림코드 엘리 내용 정리) 1-4 본문

Front-end/html

<HTML> 기초 (드림코드 엘리 내용 정리) 1-4

곽구 2020. 11. 3. 21:02

<HTML 기초 1>

 

1. HTML이란?

- 웹브라우저 상에서 보여지도록 디자인된 문서로서 표준화된 마크업 언어를 쓰고 있다.

- 웹을 이루는 가장 기본적인  빌딩 블럭으로 웹 콘텐츠의 구조와 의미를 결정한다.

 

1.1) 마크업 언어란?

- 일반적인 텍스트와 문법적으로 구분하기 위해서 문서에 명기하는 언어를 말한다.

 

2. HTML의 구조

- html 태그 안은 <head><body>로 나뉘어져 있다.

 

2.1) head 파트

- 사용자에게 보여지는 UI적인 요소가 전혀 없으며, 타이틀이나 부가설명,  북마크 시 나오는 제목이나 아이콘 등이 정리되어 있다. (메타  데이타만 있다.)

- CSS파일 연결시에 head 에서 연결한다 . <link rel=" "  href=" " > 

<meta name="viewport" content="width=device-width"> --> 디바이스의 넓이를 다 사용한다라고 정의.

 

 

2.2) body 파트

- 작성하는 내용들이 html의 서식에 맞게 가공되어 유저에게 보여진다.

<h1>Heading1></h1> --> 첫번째로 큰 헤딩

<h2>Heading2</h2> --> 두번째로 큰 헤딩

<button>Click me!</button> --> 클릭할 수있는 버튼

# 위와 같이 적으면 브라우저 상에서 가공되어 표기됨

 

2.3) 지원 가능한 태그 확인 방법

- MDN 사이트 활용

  developer.mozilla.org/ko/docs/Web/HTML/Element

 

HTML 요소 참고서

이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.

developer.mozilla.org

 

2.4) 만약 잘못된 태그로 기입하였을 경우

- 브라우저는  에러가 발생하면 에러를 대충 짐작해서 스스로 회복, 

- 사용자가 HTML파일을 보는데 문제가 없도록 도와준다.

 

3. 문서구조 가이드( Document and website structure)

- 무조건 body안에 모든 태그를 넣는것이 아닌

  header, navigation bar, main container, side bar, footer로 구분하여 작성하는것이 좋다.

- 가이드 참고 주소

developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

 

Document and website structure

At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.

developer.mozilla.org

 

4. 웹사이트를 쉽게 분석하는 방법.

- 웹사이트를 봤을  때 박스를 그려보아라. 웹사이트는  작은 박스들로 구성되어 있다.

- 박스로 웹사이트를 분석 혹은 작성하는 이유

# 라벨링이 쉬워진다. 

   > 이사를 위해 책장을 정리한다고 할 때, 스터디룸의 왼쪽 책장의 첫번째 줄처럼 이사 및 보수 공사에 수월해 진다.

# 홈페이지의  개발자도구로 어떻게 작성되었는지도 확인 가능

 

 

 

<HTML 기초 2>

 

1. 태그형태

 

 

2. 태그의 구분

- 박스(box)와 아이템(item)으로 나눠진다.

 

<body>

      <!-- Box vs Item -->

      <!-- Box  -->

            <header></header>

            <footer></footer>

            <section></section>

            <div></div>

            <span></span>

 

      <!-- Item -->

            <h1> HI </h1>

                 <!-- 자동으로 스타일링 되기 때문에 엄밀히 말하면 Item -->

            <button></button>     

            <a href="https://google.com" target=_blank>click</a>

                 <!-- href : Hypertext reference --> 

                 <!-- target : 어떻게 열것인지? -->

           <p>This is a <b>PEN</b></p>

                 <!-- PEN 만 <b>태그로 감싸주었기 때문에, Bold처리 -->

</body>

 

 

2.1) 박스 (BOX)

- 박스는 섹셔닝이 나누어지는 태그들을의미한다. 

  ex) header, section, footer, article, nav, div, aside, span, main, form

- 작성시 모든 것을 div로 작성하기 보다는 아래와 같이 작성하는것이 작성/관리 측면에서 좋다.

 

 

- section 안에 article은 여러가지 아이템을 그룹화해서 재사용 가능한 자료들이 모아져 있는것.

에시) 내용 + Like 버튼

 

- div의 경우, 묶어서 스타일링을 할 필요가 있을 때, 텍스트랑 버튼을 묶어서 border를 주거나 배경색을 줄 떄 같이 다양한 용도로 사용이 가능하다.

 

 

2.2) 아이템(ITEM)

- 사용자들에게 보여지는, 사용되어지는 태그

ex) a, video, button, audio, input, map, label, canvas, img, table 

 

- Item은 두가지로 나누어서 생각해볼 수 있다.

Block : block level의 element는 한줄에 하나.

Inline : 공간이 허용하면 다른 태그 옆에 배치가 가능.

 

예시) Block 과 Inline 구분

 

 

 

<HTML 기초 3>

* ol vs ul , input & label

 

1. ol vs ul

ol : ordered list (1,2,3,4... 이렇게 나열됨)

ul : undered list (동일한 모양의 특수문자로 리스트업)

 

<body>

      <!-- ol ,  ul ,  li -->

      <!-- ol : orderlist Item -->

      <!-- ' ol>li*3 ' 라고 기입후 tab (이클립스는 ctrl+e) 를 누르면 자동으로 리스트 생성 -->

      <ol type="i'>

            <!-- roman number attributes 적용 -->

            <li>1</li>

            <li>2</li>

            <li>3</li>

      </ol>

       <ol type="i'  reversed>

            <!-- 위처럼 두개의 attributes도 적용가능 -->

            <li>1</li>

            <li>2</li>

            <li>3</li>

      </ol>

 

      <!-- ul : unorderlist Item -->

      <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

      </ul>

</body>

 

 

2. input 과 label

input에 라벨링을 하는 이유는 페이지에 수많은 input이 있을것인데, 그것을 파악하고 활용하기 위함이다.

 

<body>

      <!-- input -->

            <label for="input_name"> Name : </label>

            <linput id="input_name" type="text" />

            <!-- label과 같이 사용하여 사용자에게 정확히 어떤 입력을 요구하는지 명시 -->

            <!-- label과 input이 한줄에 표현됐으므로 inline element임 -->

            <!-- input 으로 파일, 체크박스 등등  다양한 요소를 받을 수 있다. -->

</body>

 

<HTML 기초 4>

* emmet (에밋)

 

1. Emmet ? 

- 에밋은 HTML, XML, XSL 문서 등을 편집 할 때 빠른 코딩을 위해 사용하는 플러그인

 

2. 사용법

- div 안에 unordered list를 만들고 그 안에 list를 추가.

사용법 : div>ul>li

 

- div 안에 unordered list 와 order list를 추가.

사용법 : div>ul+ol

 

- unordered list 안에 list 다섯개를 추가.

사용법 : ul>li*5

 

- 그룹화 작성

div - header - ul - li 2개 - 각각 a태그 소유 - footer - p

사용법 : div>(header>ul>li*2>a)+footer>p

 

- 자동 숫자 할당(class1~5까지 생성하고 안에 텍스트는 item 1~5를 넣을 경우)

사용법 : p.class${item $}*5

 

- 더미 텍스트 생성

사용법 ; p>lore단어수(예시. p>lorem4)

 

---------------------------------------------------------------------------------------------------------------------------------

// <html>기초 1-4 공부 참조 블로그

hhh270.tistory.com/48?category=880718

 

기초4. emmet(에밋)

1. Emmet? - 에밋은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인 2. 사용법  - div안에 unordered list를 만들고 그 안에 list를 추가.  사용법 : div>ul>li  - div안에 unoder li..

hhh270.tistory.com

//빠른 마크업을 위한 에밋 참고 블로그

Emmet - 빠른 HTML 마크업 & CSS 스타일링
출처:  webclub.tistory.com/161

'Front-end > html' 카테고리의 다른 글

[잘난웹디] 한국소비자원 웹사이트 제작 3강 section_main 부분  (0) 2021.01.19
[잘난웹디] 한국소비자원 웹사이트 2강_메인페이지의 헤더영역  (0) 2021.01.19
[잘난웹디] 웹퍼블리싱 기초강좌 / 레이아웃1강  (0) 2021.01.12
<a>태그와 #  (0) 2020.11.30
Meta 태그란 무엇인가?  (0) 2020.11.23
'Front-end/html' Related Articles more