HTML에서 <div>는 여러 요소를 하나로 묶어 CSS로 스타일을 일괄 적용할 수 있게 해주는 범용 컨테이너입니다. div 요소 자체는 기본적으로 아무 내용이 없기 때문에, 실제로 동작하려면 반드시 다른 HTML 요소들로 채워 넣어야 합니다.
<div> 태그는 여는 태그와 닫는 태그가 한 쌍으로 이루어져 있으며, 다음과 같은 형태로 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
.first {
width: 500px;
border: 1px solid black;
padding: 20px
}
.square {
width: 100%;
height: 250px;
color: white;
border: none;
}
.blue {
background-color: royalblue;
border: none;
}
.purple {
background-color: purple;
border: none;
}
</style>
</head>
<body>
<div class="first">
<h4>저는 두 개의 작은 div를 감싸고 있는 div입니다.</h4>
<div class="square blue">1</div>
<div class="square purple">2</div>
</div>
</body>
</html>
div 태그의 특징
<div> 태그에서 가장 중요하게 기억해야 할 점은 시맨틱(semantic) HTML 요소가 아니라는 것입니다. 즉, 태그 이름만 보고는 그 역할을 알 수 없습니다. <caption>, <address>, <section> 같은 시맨틱 태그와 달리 말이죠.
이 때문에 <div>를 남용하면 스크린 리더 사용자에게 접근성 문제를 일으킬 수 있습니다. 따라서 더 적합한 시맨틱 HTML 요소가 없을 때 최후의 수단으로 <div>를 사용하는 것이 좋습니다.
블록 레벨 요소
<div> 컨테이너는 블록 레벨(block-level) 요소입니다. 개발자가 CSS나 인라인 스타일로 명시적으로 제어하지 않는 한 뷰포트 전체 너비를 차지합니다. 또한 display 속성을 inline 계열 값이나 flex 등으로 변경하지 않는 한, 요소 앞뒤에 자동으로 줄바꿈이 발생합니다.
레이아웃 구성 시 주의사항
레이아웃 측면에서 div는 상당히 유연합니다. 서로 중첩(nesting)해서 사용할 수도 있습니다. 다만 몇 가지 주의할 점이 있습니다.
<div>는 문단을 강제로 분리하므로,<p>태그 안에<div>를 중첩하면 안 됩니다.- 제목 태그(
<h1>,<h2>등) 안에<div>를 넣으면 예상치 못한 이상 현상이 발생할 수 있습니다. 제목 태그가 우선 적용되어<div>가 무시되는 것처럼 동작하기 때문입니다.
div 태그의 속성(Attributes)
HTML <div> 요소는 HTML의 이벤트 속성과 전역 속성을 모두 사용할 수 있습니다.
- 이벤트 속성: 사용자가 웹 페이지와 상호작용할 때 실행되는 속성입니다. 예를 들어 이미지를 클릭했을 때 동작하는
onclick, 마우스를 요소 위에 올렸을 때 동작하는onmouseover등이 있습니다. - 전역 속성: 모든 HTML 요소에 공통으로 사용할 수 있는 속성입니다.
전체 HTML 속성 목록은 Mozilla Developer Network(MDN) 웹사이트에서 확인할 수 있습니다.
div 스타일링 방법
<div>의 스타일링은 비교적 간단하며 여러 가지 방식으로 할 수 있습니다. 먼저 인라인 스타일링은 <div>에 style 속성을 추가하고, 스타일 속성과 값을 문자열 형태로 작성하는 방식입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Styling</title>
</head>
<body>
<div style="width:500px;border: 3px solid black; padding: 20px;">
<h4>저는 두 개의 작은 div를 감싸고 있는 div입니다.</h4>
<div style="background-color: royalblue; border: none;">1</div>
<div style="background-color: purple; border: none;">2</div>
</div>
</body>
</html>
인라인 방식 외에도 HTML 문서 <head> 안의 <style> 태그에 작성하거나, 별도의 외부 스타일시트 파일에 정의할 수 있습니다. 이때 <div>의 class 또는 id 속성이 활용됩니다.
class와 id의 차이
class는 같은 스타일을 적용하고 싶은 여러 요소에 동시에 사용할 수 있습니다. 반면 id는 하나의 HTML 문서에서 단 한 번만 사용할 수 있습니다.
비유하자면, 같은 학년에 같은 나이, 같은 담임 선생님, 같은 과목을 공유하는 학생들이 한 그룹(class)에 묶여 있지만, 각 학생마다 자신만의 고유한 신분증(id)을 가지고 있는 것과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
.first {
width: 500px;
border: 3px solid black;
padding: 20px
}
.square {
width: 100%;
height: 250px;
color: white;
border: none;
}
#blue {
background-color: royalblue;
border: none;
}
#purple {
background-color: purple;
border: none;
}
</style>
</head>
<body>
<div class="first">
<h4>저는 두 개의 작은 div를 감싸고 있는 div입니다.</h4>
<div id="blue" class="square">1</div>
<div id="purple" class="square">2</div>
</div>
</body>
</html>
class 속성과 id 속성은 하나의 <div>에 동시에 사용할 수도 있습니다. 이때 id가 class보다 구체성(specificity)이 높게 처리되므로, 특정 <div>에만 적용할 고유한 스타일은 id로 지정하면 class 스타일보다 우선 적용됩니다.
마무리
이번 글에서는 <div>가 무엇인지, 어떤 속성을 가지는지, 그리고 스타일을 어떻게 적용하는지 살펴보았습니다. display 속성이 <div> 컨테이너에 미치는 영향을 더 깊이 이해하고 싶다면 박스 모델(box model)과 플렉스박스(flexbox) 관련 자료를 함께 참고해 보세요.