UL
: Unordered List, 순서와 관계 없는 목록. (메뉴) 5/5
OL
: Ordered List, 순서와 관계가 있는 목록. (목차) 2/5
LI
: List Item, 목록의 항목, UL과 OL둘다 사용.
<html>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
</html>
- ul과 ol의 차이점
목적에 맞게 태그를 사용해야 한다.
컨테이너 태그
: 레이아웃이나 목적에 따라 서로 관련있는 태그를 모아두기 위해 존재한다. 주로 부모-자식 관계 구축을 목적으로 함. 다만 역할에 따라 구분하여 사용한다.
- 태그만 사용해서는 페이지에 아무런 영향을 주지 않는다.
- 무언가를 포함하는 것! = container
DIV 태그
: Divider, 아무 의미 없는 컨테이너. ( 한 줄 )
SPAN 태그
: 아무 의미 없는 컨테이너. ( 자기 자리만 )
div VS span
<div>A</div> <div>B</div> <span>A</span> <span>B</span>
div 는 br 없이도 줄이 바뀐다. = 한 줄을 차지한다.
span은 자기 자리만 차지하기 때문에 바로 옆에 붙는다.
HEADER 태그
: 페이지 상단부 (로고, 메뉴 등등)
- 보통 이 정도를 차지한다고 생각하면 된다.
- 이 내용을 차지하는 태그들이 모두 header안에 들어가야한다.
FOOTER 태그
: 페이지 하단부 (저작권, 사이트맵 등등)
ASIDE 태그
: 페이지와 직접적으로 관계가 없거나 간접적일 때.
NAV 태그
: Navigator, 메뉴, 링크, 기능 등의 집합을 내용으로 가짐.
MAIN 태그
: 페이지의 주된 내용
SECTION 태그
: 구획을 나누는 목적. 페이지에서 분리될 경우 무의미해지는 내용.
- 정말 쓸 일이 없다.
ARTICLE 태그
: 구획을 나누는 목적. 페이지에서 분리될 경우에도 유의미한 내용
- section과 article을 크게 나누진 않는다.
- 컨테이너 태그는 setion, article을 제외하고는 적적히 목적에 맞게 나누어서 다 사용하는 것이 좋은 방법이다. (의미 부여를 위해서)
H 태그
: Heading, 문서나 구획의 제목. H1~H6.
H1이 가장 큰 의미 ( 문서에 한 개만, 문서의 제목), H6가 가장 작은 의미<h1>큰 제목</h1> <h2>덜 큰 제목</h2> <h3>보통 제목</h3> <h4>좀 작은 제목</h4> <h5>좀 더 작은 제목</h5> <h6>작은 제목</h6>
P 태그
: Paragraph 태그, 하나의 문단
- br 을 쓰지 않아도 자동으로 줄 바꿈해준다. (문단 문단으로)
MDN page ( 공식 문서 )
https://developer.mozilla.org/ko/docs/Web/HTML/Element
참고 : 표준 문서
Software Developer : -)