display 속성 ( block , inline요소 등등)

display 속성은 요소를 어떻게 보여줄지를 결정합니다.

주로 4가지 속성값이 쓰이는데, 태그마다 기본 값이 다릅니다.

- none : 보이지 않음

- block : 블록박스

- inline : 인라인 박스

- inline-block ; block과 inline의 중간 형태

 

 

 

 

1. none : 요소를 렌더링 하지 않도록 설정합니다. visibility 속성을 hidden으로 설정한것과 달리, 영역도 차지하지않습니다. 

 

 

2. block : 기본적으로 가로 영역을 모두 채우며, block요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에  나타나는 요소는 항상 다음줄에 표시되던 것과 비슷한 맥락입니다. 

width , height속성을 지정할 수 있으며, block요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링됩니다.

> div태그 , p태그, h태그, li태그 등이 이에 해당 됩니다.

 

3. inline :  block과는 달리 줄바꿈이 되지 않고, width 와 height를 지정할 수 없습니다. word같은 문서에서 볼트, 이탤리,  색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다.  문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈  되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.

> span태그 , b태그 , i태그 , a태그 등이 이에 해당됩니다.

 

 

4. inline-block : block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만, 크기를 지정할 수 있습니다.

IE 7 이하에서는 사용할 수 없습니다.

 

.inline-block1{ display: inline-block; background: #09c; height: 45px;

/* 원래 inline 요소의 높이는 글자(폰트)의 높이를 바탕으로 설정되지만, inline-block을 이용하면 임의로 높이 또한 설정을 할 수 있습니다. */ }

.inline-block2{ display: inline-block; width: 200px; border: 3px solid #999; }