HTML <section> 사용 방법 알아보기 요소.
HTML <section> 요소는 문서의 개별 콘텐츠 섹션을 나타내는 컨테이너 요소로 사용됩니다.
회사에 대한 다양한 정보를 표시하는 여러 섹션이 있는 웹 페이지가 있을 수 있습니다. 예:
- 영웅 섹션
- 서비스 섹션
- 팀 섹션
- 스폰서 섹션
- 문의하기 섹션
각 섹션은 다음과 같이 자체 포함된 섹션으로 캡슐화될 수 있습니다.
<section>
<h2>A section 1</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>A section 2</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>A section 3</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>의 또 다른 사용 사례 요소는 <article> 안에 있습니다. 요소.
여러 주제를 논의하는 긴 형식의 기사가 있다고 가정해 보겠습니다. 이를 위해 <section>를 사용할 수 있습니다. 기사를 다른 주제 섹션으로 나누는 요소:
<article>
<h1>Main post title</h1>
<section>
<h2>Topic 1</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>Topic 2</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>Topic 3</h2>
<p>...</p>
<img src="" alt="" />
</section>
</article>
<article>을(를) 넣을 수도 있습니다. <section> 내부 요소 요소.
개별 게시물에 대한 링크가 포함된 기사 카드 목록을 표시하는 첫 페이지 섹션이 있다고 가정해 보겠습니다.
<section>
<h2>Check out our latest blog posts</h2>
<article>
<a href="/path-to-blog-post-1">
<h3>Blog post 1</h3>
</a>
</article>
<article>
<a href="/path-to-blog-post-2">
<h3>Blog post 2</h3>
</a>
</article>
<article>
<a href="/path-to-blog-post-3">
<h3>Blog post 3</h3>
</a>
</article>
</section>
<section> 태그는 컨테이너 요소를 정의하는 데 사용되는 많은 HTML 태그 중 하나입니다. 가장 일반적으로 사용되는 HTML 컨테이너 요소는 다음과 같습니다.
<article> , <main> , <header> , <footer> ,<form> 및 <div> , (다른 태그가 적용되지 않는 경우 사용하는 일반 태그임).