<div> 태그를 사용하면 HTML 문서에서 특정 영역을 손쉽게 정의할 수 있습니다. 여러 개의 HTML 요소를 하나의 그룹으로 묶어 일괄적으로 스타일을 적용할 수 있어 웹 페이지 레이아웃 작업이 훨씬 간편해집니다. <div> 태그는 블록 레벨(block-level) 요소와 함께 사용됩니다.
div 태그로 스타일 지정하기
아래 예제 코드를 실행하면 <div> 태그를 사용해 HTML 요소에 스타일을 적용하는 방법을 직접 확인할 수 있습니다. 이 예제에서는 id="container" 속성을 가진 요소에 스타일 규칙이 적용됩니다. 여기서 id는 CSS 선택자(selector) 역할을 합니다.
HTML 코드 예제
<!DOCTYPE html> <html> <head> <title>HTML div Tag</title> <link rel = "stylesheet" href = "style.css"> </head> <body> <div id = "container"> <p>Welcome to our website. We provide tutorials on various subjects.</p> </div> </body> </html>
CSS 파일(style.css)
위 HTML 문서에 연결된 CSS 파일은 다음과 같습니다. #container 선택자를 통해 div 내부의 문단 요소에 스타일이 적용됩니다.
#container p {
line-height: 15px;
margin: 20px;
padding-bottom: 15px;
text-align: justify;
width: 130px;
color: blue;
}정리
<div> 태그는 특별한 의미를 갖지 않는 범용 컨테이너로, CSS와 함께 사용하면 문서의 특정 영역을 자유롭게 꾸밀 수 있습니다. id나 class 선택자를 활용하면 여러 요소를 한 번에 관리할 수 있어 코드의 재사용성과 유지보수성이 크게 향상됩니다.