1. 시멘틱 태그
시멘틱 태그(Semantic Tag)는 HTML5에서 도입된 태그로, 웹 페이지의 구조와 의미를 명확하게 표현하는 태그를 말합니다. 예를 들어, <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 등이 있으며, 이 태그들을 사용하면 브라우저나 검색 엔진, 스크린 리더 등이 페이지의 각 영역이 어떤 역할을 하는지 쉽게 이해할 수 있습니다. 이는 웹 접근성과 검색 엔진 최적화(SEO)를 향상시키는 데에도 도움을 주며, 코드의 가독성과 유지 보수성 또한 높아집니다. 기존의 의미 없는 <div> 대신 시멘틱 태그를 사용하면, 웹 페이지 구조가 더 의미 있고 명확하게 표현됩니다.
2. 시멘틱 태그의 종류와 기능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>시멘틱 태그 응용 레이아웃</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header,
nav,
main,
section,
article,
aside,
footer {
padding: 20px;
}
header {
background-color: #333;
color: white;
text-align: center;
}
nav {
background-color: #555;
color: white;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
gap: 30px;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
main {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 20px;
padding: 20px;
background-color: #f4f4f4;
}
section {
background-color: white;
padding: 20px;
border-radius: 6px;
}
article {
margin-bottom: 20px;
}
article h2 {
margin-bottom: 10px;
}
aside {
background-color: #fefbd8;
padding: 20px;
border-radius: 6px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
<p>시멘틱 태그를 활용한 구조 예제</p>
</header>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">문의</a></li>
</ul>
</nav>
<main>
<section>
<article>
<h2>첫 번째 기사</h2>
<p>이것은 첫 번째 article입니다. 독립적인 콘텐츠를 나타냅니다.</p>
</article>
<article>
<h2>두 번째 기사</h2>
<p>
이것은 두 번째 article입니다. 블로그 포스트나 뉴스에 적합합니다.
</p>
</article>
</section>
<aside>
<h3>사이드바</h3>
<p>광고, 관련 링크, 최근 글 등을 표시할 수 있습니다.</p>
</aside>
</main>
<footer>
<p>Copyright © 2025 My Website</p>
</footer>
</body>
</html>
box-sizing
box-sizing은 CSS에서 요소의 크기를 계산하는 방식을 지정하는 속성으로, 특히 width와 height에 padding과 border가 포함되는지 여부를 결정합니다. 기본값인 content-box는 지정한 width와 height가 콘텐츠 영역만을 의미하며, 여기에 padding과 border가 더해져서 실제 요소의 크기가 커집니다. 반면, border-box는 지정한 width와 height 안에 padding과 border가 포함되므로, 박스의 전체 크기가 일정하게 유지되어 레이아웃 관리가 훨씬 수월해집니다. 실무에서는 대부분 box-sizing: border-box;를 기본으로 설정하여, 예측 가능한 크기 조절과 안정적인 디자인을 구현합니다.
line-height
line-height는 CSS에서 줄 간의 높이(행간)를 설정하는 속성으로, 텍스트가 여러 줄로 배치될 때 각 줄 사이의 간격을 조절합니다. 이 값은 숫자, 퍼센트(%), 단위(px, em 등)로 지정할 수 있으며, 숫자만 입력하면 폰트 크기에 비례한 배수값으로 해석됩니다. 예를 들어 line-height: 1.5는 폰트 크기의 1.5배만큼의 줄 간격을 의미합니다. line-height는 텍스트의 가독성을 높이고, 시각적으로 깔끔한 레이아웃을 만들기 위해 매우 중요한 속성이며, 전체 웹사이트의 분위기와 사용자 경험에 큰 영향을 줍니다.