HTML기초 : DIV 와 display

div태그와 css display를 다뤄보고자 한다.

 

div태그는 쉽게 무언가를 담을 수 있는 상자라고 보면 좋을것 같다.

구분하기 쉽게 background-color:#eee; (회색)으로 배경색상을 채웠다.

<div style="background-color:#eee;">내용</div>
<div style="background-color:#f0f8ff;">내용</div>
<div style="background-color:#ffcdd2;">내용</div>
<div style="background-color:#fff9c4;">내용</div>
<div style="background-color:#d1c4e9;">내용</div>

DIV 결과

내용

내용

내용

내용

내용

 

DIV는 display값이 기본적으로는 block이다.

 

display:block은 꽉 채운다.

조금 자세히 말하자면 부모의 크기를 꽉 채운다.

그래도 width:100%와는 조금 다르다.

 

• display:block;
• display:inline-block;
• display:inline;

 

만약 inline-block을 사용한다면?

<div style="background-color:#eee;display:inline-block;width:200px;">내용</div>
<div style="background-color:#f0f8ff;display:inline-block;width:200px;">내용</div>
<div style="background-color:#ffcdd2;display:inline-block;width:200px;">내용</div>
<div style="background-color:#fff9c4;display:inline-block;width:200px;">내용</div>
<div style="background-color:#d1c4e9;display:inline-block;width:200px;">내용</div>

DIV 결과

내용

내용

내용

내용

내용

 

inline-block은 이렇게 순서대로 나오고 부모의 크기를 벗어나면 다음으로 넘어가서 표시된다.

많이 보는 카드형 리스트들을 이렇게 표현가능하다.

 

background-color와 width는 구분을 확실히 보여주기 위해 추가된 옵션입니다.

background-color로 각 DIV상자를 구분하고

width를 줘서 다음줄로 넘어가는것을 보여줄수 있었다.