[CSS] Display

display 속성이란?

display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성입니다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하시는게 조금 더 감이 잘 잡히는 것 같습니다!

 

display 속성값의 종류

1. none

: 화면에서 사라집니다. 크기 자체도 차지하지 않습니다!

 

    2. block

: 일반적으로 설정하지 않아도 div가 갖게되는 기본값입니다. (태그에 따라 기본값이 다를 수 있습니다.)

기본적으로 width 가 자신의 컨테이너의 100% 가 되게끔 합니다. 쉽게 말하자면, 가로 한 줄을 다 차지하게 됩니다.

 

    3. inline

: 컨텐츠를 딱 감쌀정도의 크기만 갖게됩니다. block태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸게 되고, 크기를 변화시킬 수 없습니다. 

 

   4. inline-block

 

: inline과block의특성을합쳐놓은속성입니다.기본적으로는inline의속성을지니고있지만,임의로크기를바꿔줄수있습니다.참고로Explorer 7 이하에서는사용할수없습니다!