HTML에서 중요한 레이아웃 구성 태그인 div, span, header, footer의 사용법을 예제와 함께 배워봅니다.
HTML 레이아웃 구성에 필수적인 태그들
HTML을 이용해 웹 페이지를 구성할 때, 구조와 내용을 명확히 나누는 태그는 매우 중요합니다. 이번 글에서는 div, span, header, footer 태그의 역할과 사용법을 쉽게 설명하겠습니다.
1. div 태그: 블록 레벨 컨테이너
div란?
div는 블록 레벨 요소로, 콘텐츠를 그룹화할 때 사용합니다. 웹 페이지의 섹션을 나누고 레이아웃을 구성하는 데 핵심적인 태그입니다.
특징:
- 항상 새로운 줄에서 시작.
- 다른 요소를 포함할 수 있음.
- 스타일(CSS)과 스크립트(JavaScript)를 적용하기 쉬움.
예제:
<div class="content">
<h1>HTML 강의</h1>
<p>이 강의는 HTML 기초부터 심화까지 다룹니다.</p>
</div>설명:div로 콘텐츠를 묶어 스타일과 레이아웃을 쉽게 적용할 수 있습니다.
2. span 태그: 인라인 컨테이너
span이란? (H3)
span은 인라인 요소로, 텍스트의 일부분을 묶어서 스타일이나 스크립트를 적용할 때 사용됩니다.
특징:
- 텍스트 내부에서 특정 부분만 강조 가능.
- 다른 인라인 요소와 함께 사용할 수 있음.
예제:
<p>HTML에서 <span style="color: red;">중요한 부분</span>을 강조할 수 있습니다.</p>설명:span으로 "중요한 부분"만 빨간색으로 강조했습니다.
3. header 태그: 페이지의 머리글
header란?
header는 페이지나 섹션의 머리글에 해당하는 콘텐츠를 담는 태그입니다. 보통 로고, 네비게이션 메뉴, 제목 등을 포함합니다.
특징:
- SEO 친화적.
- 문서 구조를 명확히 하고, 검색엔진이 페이지를 더 잘 이해하도록 도움.
예제:
<header>
<h1>HTML 강좌</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>설명:header 태그로 페이지의 머리글을 구성하고, 네비게이션 메뉴를 포함했습니다.
4. footer 태그: 페이지의 바닥글
footer란?
footer는 페이지나 섹션의 바닥글에 해당하는 콘텐츠를 담는 태그입니다. 보통 저작권 정보, 링크, 연락처 등을 포함합니다.
특징:
- 문서 구조를 명확히 표현.
- SEO에 긍정적인 영향.
예제:
<footer>
<p>© 2024 HTML 강의. All rights reserved.</p>
<a href="mailto:contact@htmllecture.com">Contact Us</a>
</footer>설명:footer 태그를 사용해 저작권 정보와 연락처 링크를 추가했습니다.
언제 어떤 태그를 사용해야 할까?
div: 섹션을 그룹화하고 레이아웃을 구성할 때.span: 텍스트의 일부분만 스타일을 적용할 때.header: 페이지나 섹션의 머리글을 구성할 때.footer: 페이지나 섹션의 바닥글을 구성할 때.
결론
HTML에서 div, span, header, footer는 웹 페이지를 구조화하고 레이아웃을 만드는 데 필수적인 태그입니다. 각 태그의 특징과 사용법을 이해하면 더욱 효율적이고 명확한 웹 페이지를 설계할 수 있습니다.