HTML
Section과 관련된 태그 정리
hyejeong3283
2023. 2. 22. 10:56
728x90
반응형
Section 태그
일반적으로 부문, 구역, 영역을 나타내는 기능을 합니다.
문단이라던지 1장,2장,1절,2절 등과 같이 이루어지는 글 등을 하나의 그룹 혹은 묶음으로 다루어주는 역할을 합니다.
<section> 요소는 보통 제목 요소 (h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다.
section 관련 태그 | 설명 |
header | 주로 페이지의 제목영역에 사용합니다. 사이트 메인의 이름, 로고가 될 수 있고 article 내의 제목이 될 수도 있습니다. |
nav | 내비게이션 역할을 하는 태그입니다. 페이지의 메뉴, 목차를 만들 때 사용하고, 사이트 내에서 다른 페이지로 링크되어 있는 경우입니다. 일반적으로 내부에 <ul>과 <li>를 많이 사용합니다. |
section | 논리적으로 관계있는 문서 혹은 요소를 분리할 때 사용합니다. article을 포함한 페이지 내에 제목이 있는 또 다른 영역입니다. 단순히 어떤 콘텐츠들을 묶어놓는 기능만 합니다. |
article | 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용합니다. 기사 같은 내용을 담습니다 |
aside | 페이지에 다른 콘텐츠들과 연관성이 좀 낮은 내용들로 구성된 영역입니다. 페이지의 왼쪽이나 오른쪽에 광고가 있거나 부가적인 내용의 영역에 사용합니다. |
footer | 페이지의 하단을 만들 때 사용합니다. 보통 사이트 맨 아래를 보면 얻을 수 있는 정보들로 구성됩니다. |
article 태그는 section과 마찬가지로 특정한 영역을 그룹화할 때 사용합니다.
하지만 section태그와는 다르게 article태그는 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐수 있는 영역을 그룹화 합니다.
article과 section 모두 div와 같은 블록 속성을 가진 태그입니다. 따라서 article과 section 모두 div태그로 대체할 수 있습니다.
div 태그는 요소간 논리적 관계와는 상관없이 요소를 나눠야 할 필요가 있을 경우 사용합니다.
즉, section은 영역을 감싸거나 구분할 때,
article은 영역을 나누지만 언제든 그 영역이 다른 페이지나 영역에 가져다 쓸 때 사용합니다.
