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

2025-05-16

요약 설명
<div> 요소는 Division(분할, 구획)의 줄임말로, HTML에서 콘텐츠를 구분하거나 그룹화하기 위한 비시맨틱한 블록 요소입니다.
별도의 의미를 가지지는 않지만, 레이아웃 구성, 스타일 적용, 스크립트 제어를 위한 컨테이너 역할로 널리 사용됩니다. 다른 블록 요소나 인라인 요소를 자유롭게 포함할 수 있으며, class나 id 속성과 함께 사용하여 CSS 스타일링이나 JavaScript 동작의 기준 영역으로 활용됩니다.
의미보다는 구조적 묶음과 기능적 목적에 초점을 둔 기본적인 레이아웃 도구입니다.

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

주요 역할 및 특징

구조적인 레이아웃 그룹화
여러 요소를 하나의 그룹으로 묶을 때 사용되며, 페이지의 구획을 나누고 레이아웃을 구성하는 데 유용합니다.
의미 없는 컨테이너
<div> 자체는 의미적 정보를 제공하지 않으며, 단지 스타일이나 구조적 그룹화를 위한 컨테이너 역할만 합니다.
class, id, style 속성 등을 활용한 스타일링 및 동작 추가
특정한 스타일이나 기능을 적용하기 위해 CSS 또는 JavaScript와 함께 자주 사용됩니다.
블록 레벨 요소
<div>는 블록 레벨 요소로, 기본적으로 100% 너비를 차지하고 다음 요소와 줄 바꿈이 발생합니다.
시맨틱 요소와 구분해 사용해야 함
의미가 명확한 상황에서는 <section>, <article>, <nav> 등 시맨틱 요소를 우선적으로 사용하는 것이 권장됩니다.

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 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> 요소를 활용하여 웹 페이지의 레이아웃을 구성하거나 요소를 그룹화하고 스타일을 적용하는 데 사용할 수 있습니다.