이미 중요한 HTML 요소들을 배웠고, 멋진 기능을 가진 페이지를 만들 수 있게 되었어요. 이제 문서와 요소에 구조를 추가할 때입니다. 이를 위해 몇 가지 새로운 HTML5 요소를 배워보죠.
현재까지 만든 문서를 보면 모든 요소들이 연달아 나타나고, 서로 구별되지 않으며 논리적으로 그룹화되지 않았어요. 이제 컨테이너 요소를 생성해서 이를 개선해보겠습니다.
1. 네비게이션(nav) 요소
먼저, 페이지 상단에 있는 링크들을 그룹화해볼게요. 이러한 링크들은 페이지 탐색을 위한 것이므로, nav 요소를 사용하여 그룹화할 수 있습니다.
<nav>
<a href="#">홈</a>
<a href="#">소개</a>
<a href="#">블로그</a>
<a href="#">연락처</a>
</nav>nav는 navigation(내비게이션)의 약자로, 페이지 내의 탐색 링크들을 그룹화하는 역할을 합니다.- 이 요소를 사용하면 브라우저와 개발자 모두 해당 링크들이 페이지 탐색을 위한 것임을 쉽게 이해할 수 있어요.
2. 헤더(header) 요소
페이지의 상단 부분을 나타내기 위해 header 요소를 사용할 수 있어요. 이는 페이지 전체의 헤더나, 특정 섹션의 헤더를 의미할 수 있습니다.
<header>
<nav>
<!-- 내비게이션 링크들 -->
</nav>
<h1>멋진 웹사이트</h1>
</header>header요소는 문서나 섹션의 머리글을 나타냅니다.- 이 요소를 사용하면 문서의 상단 구조를 명확하게 정의할 수 있어요.
3. 아티클(article) 요소
이제 블로그 포스트와 같은 독립적인 콘텐츠를 나타내기 위해 article 요소를 사용해볼게요.
<article>
<header>
<h2>첫 번째 블로그 포스트</h2>
<p>작성자: 홍길동</p>
<img src="image.jpg" alt="블로그 이미지">
</header>
<p>이곳에 블로그 포스트의 내용이 들어갑니다.</p>
</article>article요소는 독립적으로 구분되는 콘텐츠를 나타냅니다.- 내부에 또 다른
header를 사용하여 해당 기사나 섹션의 머리글을 정의할 수 있어요.
4. 푸터(footer) 요소
페이지나 섹션의 하단에 위치하는 콘텐츠는 footer 요소로 감쌀 수 있어요. 일반적으로 저작권 정보나 추가 링크 등이 포함됩니다.
<footer>
<p>© 2023 멋진 웹사이트. 모든 권리 보유.</p>
</footer>footer요소는 문서나 섹션의 바닥글을 나타냅니다.- 여기서
©는 HTML 엔터티로, 저작권 기호(©)를 나타냅니다.
5. 전체 코드 예제
위에서 설명한 내용을 모두 합쳐서, 작동 가능한 전체 실습 코드를 제공해드릴게요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>멋진 웹사이트</title>
</head>
<body>
<header>
<nav>
<a href="#">홈</a>
<a href="#">소개</a>
<a href="#">블로그</a>
<a href="#">연락처</a>
</nav>
<h1>멋진 웹사이트에 오신 것을 환영합니다</h1>
</header>
<article>
<header>
<h2>첫 번째 블로그 포스트</h2>
<p>작성자: 홍길동</p>
<img src="image.jpg" alt="블로그 이미지">
</header>
<p>이곳에 블로그 포스트의 내용이 들어갑니다. HTML5의 새로운 요소들을 사용하여 구조화된 문서를 만들 수 있습니다.</p>
</article>
<footer>
<p>© 2023 멋진 웹사이트. 모든 권리 보유.</p>
</footer>
</body>
</html>요약
nav요소: 페이지 내의 탐색 링크들을 그룹화합니다.header요소: 문서나 섹션의 머리글을 나타냅니다.article요소: 독립적인 콘텐츠를 나타냅니다.footer요소: 문서나 섹션의 바닥글을 나타냅니다.- HTML 엔터티: 특별한 기호를 나타내기 위해 사용되며, 예를 들어
©는 ©를 나타냅니다.
이렇게 구조화된 요소들을 사용하면 브라우저와 개발자가 문서의 구조를 더 잘 이해할 수 있으며, 이후 CSS를 사용하여 스타일링할 때도 큰 도움이 됩니다. 시각적으로는 큰 변화가 없을 수 있지만, 시맨틱한 HTML 작성은 웹 접근성과 유지 보수 측면에서 매우 중요합니다.
다음에는 이러한 구조를 기반으로 CSS를 사용하여 레이아웃과 스타일을 적용하는 방법을 배워보겠습니다. 의미 중심의 HTML 작성이 왜 중요한지, 그리고 어떻게 활용되는지에 대해 더 깊이 알아볼 예정이니 기대해 주세요!
