대표적인 블록 요소 - div - by. UXKM

2024-07-30

요약 설명
<div> 요소는 Division(분할, 분배)의 줄임말로, HTML 문서에서 구획을 나누거나 묶을 때 사용되는 일반적인 블록 수준의 컨테이너 요소입니다.
<div>는 별도의 의미나 스타일이 없고, 단순히 구획을 나누는 역할을 합니다. 다른 HTML 요소들을 포함할 수 있으며, 스타일을 적용하거나 JavaScript를 이용하여 동적으로 요소를 조작할 때 사용됩니다.
또한 다른 의미 있는 요소를 묶어서 그룹화하거나 스타일을 적용하기 위해 부모 요소로서 활용될 수 있습니다.

기본적으로 <div> 요소는 블록 레벨 요소이며, 한 줄을 차지하고 다음 요소는 그 아래에 배치됩니다.

div와 Layout

<div> 요소는 HTML 문서에서 레이아웃을 만드는 데 핵심적인 역할을 합니다.
웹 페이지의 레이아웃은 다양한 구획을 조합하여 페이지의 전반적인 디자인과 배치를 결정하는 것을 의미하며, 페이지의 구조를 정의하고 사용자에게 콘텐츠를 효과적으로 전달하는 데 중요합니다.

<div> 요소는 다음과 같은 방법으로 레이아웃을 구성하는 데 사용될 수 있습니다.
(아래 예제는 시멘틱 요소를 사용하지 않고, 오직 <div> 요소만을 사용하여 구성한 일반적인 예제입니다.)

구획 분할

<div> 요소를 사용하여 웹 페이지를 여러 구획으로 분할할 수 있습니다.
예를 들어, 페이지의 헤더, 내용, 사이드바, 푸터 등의 영역을 <div>로 묶어 각각의 구획을 정의할 수 있습니다.

								<!-- 구획 분할 -->
								<div class="header">헤더 영역</div>
								<div class="container">
									<div class="content">본문 영역</div>
									<div class="sidebar">사이드바 영역</div>
								</div>
								<div class="footer">푸터 영역</div>

스타일링

<div> 요소를 사용하여 스타일을 적용할 수 있습니다.
CSS를 사용하여 각 구획의 디자인을 지정하고 레이아웃을 조정하며, 헤더, 내용, 사이드바, 푸터 등의 영역을 스타일링하고 배치할 수 있습니다.

레이아웃 관리

<div> 요소를 사용하여 레이아웃을 관리할 수 있습니다.
각 구획을 유연하게 배치하여 사용자 경험을 향상시킬 수 있습니다. 예를 들어, 반응형 디자인을 구현하여 다양한 디바이스 및 화면 크기에 대응할 수 있습니다.

div 활용 예제

<div> 요소를 활용하여 구성할 수 있는 예제입니다.

이미지 갤러리

								<!-- 이미지 갤러리 -->
								<div class="gallery">
									<div class="image"><img src="image1.jpg" alt="이미지 1"></div>
									<div class="image"><img src="image2.jpg" alt="이미지 2"></div>
									<div class="image"><img src="image3.jpg" alt="이미지 3"></div>
								</div>

카드 레이아웃

								<!-- 카드 레이아웃 -->
								<div class="card">
									<img src="image.jpg" alt="카드 이미지">
									<div class="card-content">
										<strong>카드 제목</strong>
										<p>카드 내용...</p>
										<a href="#">자세히 보기</a>
									</div>
								</div>

탭 메뉴

								<!-- 탭 메뉴 -->
								<div class="tab-menu">
									<div class="tab">탭 1</div>
									<div class="tab">탭 2</div>
									<div class="tab">탭 3</div>
								</div>
								<div class="tab-content">
									<div class="content">탭 1 내용</div>
									<div class="content">탭 2 내용</div>
									<div class="content">탭 3 내용</div>
								</div>

이벤트 일정

								<!-- 이벤트 일정 -->
								<div class="event">
									<div class="event-date">3월 15일</div>
									<div class="event-details">
										<strong>이벤트 제목</strong>
										<p>이벤트 내용...</p>
										<a href="#">자세히 보기</a>
									</div>
								</div>

팝업 창

								<!-- 팝업 창 -->
								<div class="popup">
									<div class="popup-content">
										<strong>팝업 제목</strong>
										<button class="close">×</button>
										<p>팝업 내용...</p>
									</div>
								</div>

<div> 요소는 거의 모든 경우에 사용할 수 있는 다목적 컨테이너입니다.

이 밖에 무한한 상황에서 <div> 요소를 활용하여 웹 페이지의 레이아웃을 구성하거나 요소를 그룹화하고 스타일을 적용하는 데 사용할 수 있습니다.