이번 포스팅에서는 시맨틱 웹과 시맨틱 요소에 대해 알아보고, 이를 활용한 구조적인 웹 페이지 작성법을 학습합니다. 이론부터 실습까지, 정보의 의미를 명확하게 전달하는 웹 페이지를 어떻게 만드는지 알아봅시다.
자동목차
이론
시맨틱 웹은 정보의 의미를 명확하게 표현하고, 그 정보가 컴퓨터에 의해 이해되고 처리될 수 있도록 하는 웹의 한 형태입니다. HTML5에서는 이를 위해 시맨틱 요소(semantic elements)가 도입되었습니다. 이들 요소는 <header>, <footer>, <section>, <article> 등의 태그를 포함하며, 웹 페이지의 구조를 명확하게 표현하는 데 사용됩니다.
실습
아래의 코드는 시맨틱 요소를 활용한 간단한 웹 페이지의 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>시맨틱 웹 예제</title>
</head>
<body>
<header>
<h1>웹 페이지 제목</h1>
<nav>
<a href="#">메뉴1</a> |
<a href="#">메뉴2</a> |
<a href="#">메뉴3</a>
</nav>
</header>
<section>
<article>
<h2>기사 제목</h2>
<p>기사 내용...</p>
</article>
</section>
<footer>
<p>저작권 정보...</p>
</footer>
</body>
</html>
코드 설명
- <header>: 웹 페이지의 헤더를 나타내는 태그입니다. 일반적으로 로고, 제목, 내비게이션 등을 포함합니다.
- <nav>: 내비게이션 링크를 그룹화하는 태그입니다. 주요 메뉴 항목을 포함하는 데 주로 사용됩니다.
- <section>: 웹 페이지의 독립적인 구역을 나타내는 태그입니다. 각 구역은 주제나 목적에 따라 분리됩니다.
- <article>: 독립적으로 구성할 수 있는 콘텐츠를 나타내는 태그입니다. 블로그 게시글, 뉴스 기사 등이 이에 해당합니다.
- <footer>: 웹 페이지의 푸터를 나타내는 태그입니다. 저작권 정보, 연락처 정보 등을 포함하는 데 사용됩니다.
마무리
시맨틱 웹은 정보의 의미를 명확하게 전달하고, 정보를 구조적으로 표현하는 데 중요한 역할을 합니다. 이번 포스팅을 통해 시맨틱 웹과 시맨틱 요소에 대해 알아보았습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다.