HTML <div> 태그, 레이아웃과 컨테이너의 기초
웹 개발에서 HTML의 <div> 태그는 가장 기본적이면서도 중요한 요소입니다. 이 태그는 다양한 콘텐츠를 그룹화하고 레이아웃을 구성하는 데 사용됩니다. 이 글에서는 <div> 태그의 기본 개념부터 실제 활용 예제까지 다루어 보겠습니다.
1. <div> 태그의 기본 개념
<div> 태그는 HTML 문서에서 블록 레벨 요소로 사용되며, 다른 요소들을 묶어서 그룹화하는 역할을 합니다. 레이아웃을 구성하거나 스타일을 적용할 때 유용하게 사용됩니다.
2. <div> 태그의 속성
<div> 태그는 다양한 속성을 가질 수 있습니다. 가장 많이 사용하는 속성은 id와 class입니다. 이 속성들을 사용하여 특정 <div> 요소에 스타일을 적용하거나 JavaScript로 제어할 수 있습니다.
<div id="header">헤더 콘텐츠</div>
<div class="container">메인 콘텐츠</div>
3. 레이아웃 구성
<div> 태그를 사용하여 웹 페이지의 레이아웃을 쉽게 구성할 수 있습니다. 예를 들어, 헤더, 메인 콘텐츠, 푸터를 각각 <div> 태그로 감싸서 구조화할 수 있습니다.
<div id="header">
<h1>사이트 제목</h1>
</div>
<div id="main">
<p>여기는 메인 콘텐츠입니다.</p>
</div>
<div id="footer">
<p>푸터 내용</p>
</div>
4. 실전 예제
<div> 태그를 활용한 실전 예제를 통해 레이아웃을 구성하는 방법을 알아보겠습니다. 다음 예제는 간단한 블로그 페이지 레이아웃을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>블로그</title>
<style>
.container {
width: 80%;
margin: 0 auto;
}
.header, .footer {
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
.main {
background-color: #fff;
padding: 20px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>블로그 제목</h1>
</div>
<div class="main">
<h2>첫 번째 포스트</h2>
<p>여기는 첫 번째 포스트의 내용입니다.</p>
</div>
<div class="footer">
<p>저작권 정보</p>
</div>
</div>
</body>
</html>
5. 결론
<div> 태그는 웹 페이지의 레이아웃과 구조를 잡는 데 필수적인 요소입니다. 이 글을 통해 <div> 태그의 기본 개념부터 실전 예제까지 이해하고, 다양한 웹 페이지 레이아웃을 구성하는 데 활용해 보세요.
'마크업 언어 > HTML' 카테고리의 다른 글
| HTML <a> 태그 사용법, 링크 생성과 속성 활용 (0) | 2024.08.03 |
|---|---|
| HTML <span> 태그, 인라인 요소로 웹 디자인 최적화 (0) | 2024.08.02 |
| HTML <figcaption> 태그, 이미지 설명 추가하기 (0) | 2024.07.31 |
| HTML <figure> 태그 사용법, 시각적 콘텐츠 구성하기 (0) | 2024.07.30 |
| HTML <dl> <dt> <dd> 태그, 정의 목록 만들기 (0) | 2024.07.29 |
