7장: HTML5 추가 요소
7.1 `<article>`
`<article>` 태그는 독립적인 콘텐츠 블록을 정의합니다. 블로그 게시물, 뉴스 기사, 사용자 리뷰 등 독립적으로 배포되거나 재사용될 수 있는 콘텐츠에 사용됩니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>article 태그 예제</title>
</head>
<body>
<article>
<h2>HTML5 소개</h2>
<p>HTML5는 최신 웹 표준으로, 다양한 새로운 기능과 태그를 제공합니다.</p>
</article>
</body>
</html>
7.2 `<section>`
`<section>` 태그는 문서의 일반적인 구획을 정의합니다. 각 섹션은 주제별로 그룹화된 콘텐츠를 포함하며, 보통 제목을 가집니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>section 태그 예제</title>
</head>
<body>
<section>
<h2>소개</h2>
<p>이 섹션은 HTML5 소개 내용을 포함합니다.</p>
</section>
<section>
<h2>기능</h2>
<p>이 섹션은 HTML5의 새로운 기능에 대해 설명합니다.</p>
</section>
</body>
</html>
7.3 `<nav>`
`<nav>` 태그는 네비게이션 링크를 정의합니다. 주로 사이트의 주요 메뉴나 탐색 링크를 포함합니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nav 태그 예제</title>
</head>
<body>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</body>
</html>
7.4 `<aside>`
`<aside>` 태그는 문서의 주요 내용과 간접적으로 관련된 콘텐츠를 나타냅니다. 사이드바, 광고, 관련 링크 등을 포함할 수 있습니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aside 태그 예제</title>
</head>
<body>
<article>
<h2>HTML5 소개</h2>
<p>HTML5는 최신 웹 표준으로, 다양한 새로운 기능과 태그를 제공합니다.</p>
<aside>
<h3>추가 정보</h3>
<p>HTML5의 자세한 정보는 W3C 웹사이트에서 확인할 수 있습니다.</p>
</aside>
</article>
</body>
</html>
7.5 `<footer>`
`<footer>` 태그는 문서나 섹션의 바닥글을 정의합니다. 저작권 정보, 연락처, 사이트맵 등을 포함할 수 있습니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>footer 태그 예제</title>
</head>
<body>
<footer>
<p>© 2024 내 웹사이트. 모든 권리 보유.</p>
</footer>
</body>
</html>
### 연습 문제
1. `<article>` 태그를 사용하여 독립적인 콘텐츠 블록을 작성해 보세요.
2. `<section>` 태그를 사용하여 주제별로 콘텐츠를 그룹화해 보세요.
3. `<nav>` 태그를 사용하여 네비게이션 메뉴를 만들어 보세요.
4. `<aside>` 태그를 사용하여 주요 내용과 관련된 추가 정보를 제공해 보세요.
5. `<footer>` 태그를 사용하여 바닥글을 작성해 보세요.
댓글
댓글 쓰기