101 lines
2.8 KiB
Markdown
101 lines
2.8 KiB
Markdown
# 섹션
|
|
|
|
콘텐츠 섹션 요소를 사용하면 문서 콘텐츠를 논리적 조각으로 구성할 수 있습니다. 섹션 요소를 사용하여 머리글 및 바닥글 탐색, 콘텐츠 섹션을 식별하는 머리글 요소를 포함하여 페이지 콘텐츠에 대한 광범위한 개요를 만듭니다.
|
|
이 태그들은 HTML5에서 주로 사용되며, 시맨틱 마크업(semantic markup)을 통해 문서 구조를 명확히 정의하는 데 유용합니다.
|
|
|
|
> 대부분의 시맨틱 태그는 고유한 속성을 가지지 않고, 전역 속성(`id`, `class`, `style`, `lang` 등)을 주로 사용합니다.
|
|
|
|
이 태그들은 주로 구조적 의미를 제공하며, CSS로 스타일을, JavaScript로 동작을 추가하는 것이 일반적입니다. 시맨틱 태그는 스크린 리더와 검색 엔진이 문서 구조를 더 잘 이해하도록 돕습니다.
|
|
`article` 안에 `header`, `footer`, `section` 등을 중첩하여 사용할 수 있습니다.
|
|
|
|
## h1 ~ h6
|
|
```html
|
|
<h1>가장 중요한 제목</h1>
|
|
<h2>부제목</h2>
|
|
<h3>소제목</h3>
|
|
<h4>더 작은 제목</h4>
|
|
<h5>아주 작은 제목</h5>
|
|
<h6>가장 작은 제목</h6>
|
|
```
|
|
- 설명: 계층적 제목 구조를 보여줌.
|
|
|
|
## header
|
|
```html
|
|
<header>
|
|
<h1>My Website</h1>
|
|
<nav>
|
|
<a href="#home">Home</a> | <a href="#about">About</a>
|
|
</nav>
|
|
</header>
|
|
```
|
|
- 설명: 페이지 상단에 로고와 내비게이션 포함.
|
|
|
|
## footer
|
|
```html
|
|
<footer>
|
|
<p>© 2025 My Website. All rights reserved.</p>
|
|
</footer>
|
|
```
|
|
- 설명: 페이지 하단에 저작권 정보 표시.
|
|
|
|
## main
|
|
```html
|
|
<main>
|
|
<h1>메인 콘텐츠</h1>
|
|
<p>이곳은 문서의 주요 내용을 담고 있습니다.</p>
|
|
</main>
|
|
```
|
|
- 설명: 문서의 핵심 콘텐츠를 정의.
|
|
|
|
## article
|
|
```html
|
|
<article>
|
|
<h2>최신 기술 트렌드</h2>
|
|
<p>AI와 머신러닝이 2025년을 지배할 것입니다.</p>
|
|
</article>
|
|
```
|
|
- 설명: 독립적인 블로그 포스트나 기사 콘텐츠 정의.
|
|
|
|
## nav
|
|
```html
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#home">홈</a></li>
|
|
<li><a href="#services">서비스</a></li>
|
|
<li><a href="#contact">연락처</a></li>
|
|
</ul>
|
|
</nav>
|
|
```
|
|
- 설명: 내비게이션 메뉴를 구조화.
|
|
|
|
## aside
|
|
```html
|
|
<aside>
|
|
<h3>관련 링크</h3>
|
|
<ul>
|
|
<li><a href="#">AI 소개</a></li>
|
|
<li><a href="#">머신러닝 가이드</a></li>
|
|
</ul>
|
|
</aside>
|
|
```
|
|
- 설명: 주요 콘텐츠 옆에 표시될 사이드바 콘텐츠.
|
|
|
|
## address
|
|
```html
|
|
<address>
|
|
작성자: <a href="mailto:example@email.com">example@email.com</a><br>
|
|
주소: 서울특별시 강남구<br>
|
|
전화: 123-456-7890
|
|
</address>
|
|
```
|
|
- 설명: 연락처 정보를 구조화하여 표시.
|
|
|
|
## section
|
|
```html
|
|
<section>
|
|
<h2>제품 소개</h2>
|
|
<p>우리의 제품은 혁신적이고 사용자 친화적입니다.</p>
|
|
</section>
|
|
```
|
|
- 설명: 문서 내 특정 주제의 섹션 정의.
|