[CSS] Display 속성에 대해 간단히

{display:block;}

먼저 Block은 DIV 엘리먼트와 같은 속성이다.

일단 가장 큰 특징으로는 엘리먼트와 엘리먼트사이 자동으로 줄바꿈이 되게 한다.

간단히 말하면 혼자서 한 줄을 차지하게 되는 것이다.

{display:inline;}

이 Inline은 SPAN 엘리먼트와 같은 속성이다.

특징으로는 상/하 margin, padding 속성이 적용 불가능하다.

또한 width, height 속성도 적용이 불가능하다.

{display:inline-block;}

Inline-Block 은 Block 엘리먼트가 Block 엘리먼트 속으로 inline으로 들어갔을때, Block으로 바꿔주는 속성이다.

IE에서만 작동한다.

라고.. 써있었으나. 필자는 잘 이해가 안간다..


그냥 img 태그 같은 성질을 지니고 있는듯 하다.

{display:table;}

Table 엘리먼트와 같은 성질을 지니게 된다.

{display:table-cell;}

Table 엘리먼트의 셀(Cell)과 같은 성질을 지니게 된다.

{display:none;}

공간도 차지하지 않게, 화면상에서 보이지 않게 없애버린다.

You may also like...