Sectioning Elements 개념 및 사용법

학습하게된 이유

이번 주 내내, 깔끔한 웹 문서 설계를 어떻게 할 수 있을지를 고민했다.

지난 주에 진행한 프로젝트의 HTML 문서를 보았을 때 매우 지저분하다는 느낌을 받았기 때문이다.

또한, 프로젝트를 진행할 때 중복된 클래스 선언으로 인해 시간을 낭비하여서 많은 고민을 하게 되었다.

 

깔끔한 웹 문서 설계를 위해, Sectioning elements을 공부해보았다.

 

Sectioning Elements

웹 문서를 의미 있는 부분으로 구분하고 웹 페이지의 구조를 명확하게 만들어 웹 접근성을 향상시킨다.

Sectioning Elements 4가지 

section article nav aside

 

section	웹 페이지의 논리적인 섹션을 정의하며 관련 콘텐츠를 묶어 구조화하는 데 사용된다.
article	독립적으로 사용하거나 재사용 가능한 콘텐츠 블록을 정의하는 데 사용된다.
nav	네비게이션 링크 또는 메뉴 항목을 그룹화하는 데 사용되며, 주로 웹 페이지의 탐색 구성 요소를 나타낸다.
aside	주요 콘텐츠와는 관련이 적은 콘텐츠를 표시하기 위해 사용되며, 주로 사이드바, 광고, 색션과는 별도로 읽을 수 있는 부가 정보를 나타낸다.

 

문서작업을 의미있게 도와주는 3가지 

 

header main footer

header	웹 페이지나 웹 애플리케이션의 머리말 부분을 정의하며, 일반적으로 로고, 제목, 메뉴, 검색 폼 등의 주요 내용을 포함하는 상단 부분을 나타낸다.
main	웹 페이지의 주요 콘텐츠 영역을 정의하며, 페이지 내에서 한 번만 사용해야 한다. 주로 웹 페이지의 핵심 내용이 표시되는 부분으로 사용된다.
footer	웹 페이지나 섹션의 하단 부분을 정의하며, 일반적으로 저작권 정보, 연락처 정보, 웹 페이지의 작성자 정보 등을 포함하는 부분으로 사용된다

 

올바른 Setioning Elements 사용법

Sectioning element 내에는 반드시 heading 태그를 작성해야 한다.

 

---

React Sectioning Components