section element - by. UXKM

2025-05-16

요약 설명
<section> 요소는 HTML에서 문서의 특정 주제나 내용을 그룹화하는 시맨틱 태그로, 독립적인 구획을 나타냅니다.
일반적으로 제목(<h1> ~ <h6>)과 함께 사용되며, 문서의 논리적 구조를 구성하고 주제별 내용을 명확히 정의하는 데 도움을 줍니다. 또한, 콘텐츠를 논리적으로 묶어 접근성을 높이고 문서의 의미를 보다 체계적으로 전달하는 역할을 합니다.

의미 없이 단순한 구획을 나눌 때는 <div>를 사용하는 것이 더 적절합니다.

주요 역할 및 특징

문서 구조화
- <section>은 관련된 콘텐츠를 하나의 섹션으로 그룹화하여 문서의 구조를 명확히 나타냅니다.
- 각 <section>은 보통 제목(<h1~h6>)을 포함하며, 문서 내에서 독립적인 단위로 간주됩니다.
시맨틱 의미 제공
검색 엔진과 보조 기술은 <section>을 통해 문서의 주제나 내용을 더 잘 이해할 수 있습니다.
중첩 가능
필요에 따라 <section> 안에 다른 <section>을 중첩하여 사용할 수 있습니다.
사용 시 주의점
- 논리적인 그룹화가 필요하지 않은 경우, <div>를 대신 사용할 수 있습니다.
- 단순한 스타일링 목적으로는 사용하지 않는 것이 좋습니다.

CSS 기본 값

<section> 요소는 기본적으로 블록 레벨 요소입니다.

							section {
								display: block;
							}

기본 문법

							<section>
								<!-- 섹션 콘텐츠 -->
							</section>

속성

<section> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

							<section id="about-us" class="section-highlight" role="region">
								<!-- 섹션 콘텐츠 -->
							</section>

예제

기사에서 주제별 섹션

								<section>
									<h2>회사 소개</h2>
									<p>우리는 고객 중심의 혁신적인 기술을 제공합니다.</p>
								</section>

블로그 포스트에서 섹션 나누기

								<section>
									<h2>서론</h2>
									<p>이 글에서는 HTML 섹션 요소에 대해 설명합니다.</p>
								</section>
								<section>
									<h2>본론</h2>
									<p>섹션 요소는 문서의 구조를 논리적으로 나눕니다.</p>
								</section>
								<section>
									<h2>결론</h2>
									<p>섹션 요소를 사용하면 SEO와 접근성이 개선됩니다.</p>
								</section>

FAQ 섹션

								<section>
									<h2>자주 묻는 질문</h2>
									<p><strong>Q:</strong> 섹션 요소는 어디에 사용하나요?</p>
									<p><strong>A:</strong> 문서의 주제를 그룹화할 때 사용합니다.</p>
								</section>

중첩된 섹션 구조

								<section>
									<h2>회사 소개</h2>
									<p>우리 회사는 혁신적인 기술을 제공합니다.</p>
									<section>
										<h3>우리의 사명</h3>
										<p>지속 가능한 기술로 더 나은 미래를 만듭니다.</p>
									</section>
								</section>

접근성을 고려한 섹션 사용

								<section id="main-content" aria-labelledby="main-title">
									<h1 id="main-title">주요 콘텐츠</h1>
									<p>이 섹션은 페이지의 주요 콘텐츠를 포함합니다.</p>
								</section>