HTML 문서에 섹션(구역)을 추가하려면 <div> 태그를 사용합니다. HTML의 <div> 태그는 문서 내에서 하나의 구역을 정의하는 역할을 하며, 여러 개의 HTML 요소를 하나로 묶어 CSS로 일괄적으로 스타일을 지정할 수 있게 해줍니다.
div 태그란 무엇인가?
<div>는 'division'의 약자로, 블록 레벨(block-level) 요소입니다. 자체적인 의미를 갖지 않는 대신 콘텐츠를 논리적으로 그룹화하는 컨테이너 역할을 하며, id나 class 속성과 함께 사용하면 특정 영역만 선택하여 레이아웃과 디자인을 자유롭게 제어할 수 있습니다.
예제 코드
다음 코드를 실행하면 div 태그로 섹션을 만들고 CSS로 꾸미는 과정을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML div Tag</title> <link rel = "stylesheet" href = "style2.css"> </head> <body> <div id = "contentinfo"> <p>Welcome to our website. We provide tutorials on various subjects.</p> </div> </body> </html>
위 예제에서 사용된 CSS 파일 style2.css의 내용은 다음과 같습니다.
#contentinfo p {
line-height: 20px;
margin: 30px;
padding-bottom: 20px;
text-align: justify;
width: 140px;
color: red;
}정리
<div> 태그는 HTML 문서에서 섹션을 나누고 요소들을 그룹화하는 가장 기본적인 도구입니다. 위 예제처럼 id 속성으로 영역을 지정한 뒤 CSS에서 해당 영역의 줄 간격, 여백, 텍스트 정렬, 색상 등을 설정하면 원하는 형태의 섹션을 손쉽게 구성할 수 있습니다.