HTML <div> 태그, 웹 페이지를 구조화하고 스타일을 입히다

DIV태그란?

html에서 <div>태그는 정말 많이 쓰이는 중요한 요소입니다. 웹페이지를 구조화하고 레이아웃을 정돈하기도 하고 CSS를 통해 스타일을 입힐 수도 있기 때문입니다.

 

사용법

<div>
  <h1>인사</h1>
</div>
<div>
   <p>안녕하세요!</p>
</div>

 

위의 예시에서 <h1>과 <p>만 써도 컨텐츠를 출력하는데는 아무런 문제가 없습니다. 하지만 <div>를 통해서 2개의 구역으로 나누었지요. 이 부분이 바로 웹페이지 구조화입니다.

 

그럼 스타일을 입히는 예시를 살펴볼께요

 

예시 코드

See the Pen div by 40's Programmer (@40sProgrammer) on CodePen.

 

위의 예시는 <div>를 통해 header와 content를 클래스로 나누었어요. header는 메뉴 네비게이션 영역, content는 실제 내용 영역으로 구분된게 보이죠?

 

각 div에는 다른 이름의 class를 정의했고, CSS를 통해서 class에 스타일을 입혔습니다. 간단하게 배경색과 텍스트 정렬만 적용해봤어요. 이렇게 <div> 요소에 스타일을 적용하면 웹 페이지의 레이아웃을 조정하고 디자인 요소를 효과적으로 배치할 수 있습니다.