html 기본 태그정리

● 제목태그 :  <h1>~<h6> 까지 있으며 h1은 페이지에 하나만 존재한다.

● div : division의 약자로 레이아웃(웹사이트 틀)을 만들때 주로 사용한다. 웹페이지에서 논리적 구분을 정의하는 태그이며 블록을 알맞게 배치하고 width값, height값을 정해줄 수 있다.

● p(paragraph) : block요소며 긴 글을 단락에 따라 나눌때 사용한다.

● span : inline속성으로 div와 달리 width값, height값을 정해줄수 없다. 보통 중요단어에 사용하나

필요에 따라 사용 할 수 있다.

● pre : 공백을 살려주는 태그 (줄바꿈 적용됨)

​

​

● 항목태그

· ul : (unordered List) > li: 순서가 없다.

· ol : (ordered List) > li: 순서가있다.

· dl : (Definition List) > dt+dd: 용어정의목록

· dt(definition Terms) - 용어를 정의

· dd(Definition Description) - 용어설명

​

● 블록요소 / 박스요소

· 너비가 100%

· 인라인요소를 포함가능

· 너비와 높이를 줄 수 있다.

· 여백을 포함

→ 위아래로 쌓임

​

● block element

· blockquote(인용문구) : 소설, 블로그, 포럼 등과같은 기사를 발췌해서 보여주는 태그 (site속성)

· q(quotation) : 쌍따옴표 태그-->웹접근성

· address(주소태그) : 웹사이트사업장 소재지 / 담당자 연락처 / 이메일주소 등의 정보를 표현하는 태그

· div(division) : 박스/ 감쌀때/공간분할태그(의미는 없다./그룹화태그)

· br → line-break : 개행/줄바꿈

· p(paragraph)

​

● 인라인요소

· width값, height값을 정해줄수 없다.

· 너비가 콘텐츠의 너비와 동일하다.

· 여백도 위아래로는 없다.

​

● inline element

· span(문장내에서 그룹화태그)

· strong/ b : 굵게 bold

· em / i : 기울임체(끊어읽어줌)

· ins : 삽입

· del : 삭제태그(text-decoration : line-throw)

​

● html5 추가태그

· header - gnb / 로고 / 웹사이트의 헤더영역 구성

· nav - gnb(메인네비) / tnb(로그인이라던가 메인상단에 들어오는 애들) / snb(side_nav) / fnb(footer_nav) : 페이지내에서 용이하게 이동이 쉬운 메뉴들에 사용

· section : 영역/구역

· article : 주제에 따른 영역

→기획에 따라 배치

· aside : 콘텐츠와 연관이 있으면서 독립 된 영역 서브네비,광고 블로그카테고리 같은것 없어도되는 것

· footer : 푸터영역

· main : 한 페이지내에서 한번만 사용(가장 중요한 콘텐츠)