HTML 쉽게 배우기 | 디브 <div> 사용법

HTML에서 <div>는 뭐고 어떻게 사용하는가?

 

안녕하세요

 

오늘은 HTML 시리즈의 마지막으로 <div>에 대해서 알아볼게요

HTML문서에 따르면 '<div>는 여러 요소들을 하나의 섹션으로 그룹하는 컨테이너' 라고 소개합니다

쉽게 말해서 그냥 빈 박스에요

 

<div>자체에는 스타일이나, 넓이, 높이, 등 아무것도 없습니다

 

그럼 <div>를 왜 쓰냐?

정리와 컨트롤 입니다

 

<div>를 사용하면 여러 요소들을 그룹지을수 있고, HTML 코드를 좀더 깔끔하게 정리할수 있습니다

이렇게 정리된 요소들은 주로 CSS를 사용해서 예쁘게 꾸미는데, CSS는 선택자(selector)를 사용해서 스타일할 요소를 고를수 있습니다

요소들이 <div>로 정리되 있으면 CSS 선택자를 사용해서 콕집어 스타일링하기 쉬워집니다

 

 

아직 잘 이해가 안가시나요?

 

비슷한 예로 누구나 한번쯤은 해본 서랍정리로 비교해 볼게요

 

여러분한테 정리해야될 물건이 100개 있다고 가정할게요

서랍없이 이 100개의 물건들을 어떻게 정리해야 할까요?

제일 좋은 방법은 바닥에 나열하는거겠죠

그런데 이렇게하면 많은 자리를 차지하고, 만약에 물건의 수가 늘어나면 더 둘 공간이 없죠

 

바닥에 전부 나열된 물건들

 

그럼, 서랍을 사용하면 어떨까요?

물건의 종류 또는 사용 용도에 따라 분리하면 서랍 2-3칸이면 해결되죠

이렇게하면 자리도 많이 차지 않하고, 혹 물건의 수가 늘어나도 서랍장 하나만 더 사면 해결되고

 

서랍에 정리된 물건들

 

 

이렇게 <div>를 서랍이라고 생각하면 될꺼같습니다

 

그러면 <div>를 어떻게 사용해야되는지 궁금하시죠?

<div>의 사용은 다음 시리즈인 CSS에서 보실수 있습니다

 

 

 

이걸로 HTML 시리즈는 끝이났네요

쉽게 설명한다고 했는데, 잘 전달됐는지 모르겠네요

다음 CSS에서는 좀 다른 방식으로 여러분들과 공유해보려고 해요

 

블로그를 처음해봐서 많이 부족한데도 찾아와주고 읽어주신분들 감사합니다

CSS에서는 좀더 개발자다운 방식으로 찾아뵙겠습니다

 

 

오늘도 수고하셨습니다

 

 

끝!