[css] display 속성

display 속성

모 기업 면접을 볼 때 display속성에 대해 너무 당당하게 헛소리를 해서 그 날의 창피함을 잊지 않기 위해 기록해둡니다…

display속성은 css로 레이아웃을 제어할 때 가장 중요한 property이다.
모든 엘리먼트에는 엘리먼트 유형에 따라 기본 표시값(주로 inline, block)이 존재한다.

1. block 속성

block속성은 요소의 가로 길이가 100%가 된다.
width값을 직접 설정해도 보이지 않는 margin이 남은 여백을 메워 자동으로 줄바꿈이 가능하게 해준다. width, height, margin값을 모두 설정 가능하다.

https://drive.google.com/uc?id=0B3Or0Wv2t1xwZFFMVDBUYi1iN2s

2. inline 속성

inline속성은 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향을 가지고 있다. 그래서 inline속성은 문장 안에서 사용하는 태그에 주로 기본값으로 설정되어 있다.
요소에서 box model에서의 contents box부분만을 감싸고 있다. 이러한 이유로 inline속성의 요소에는(span, a 등) width와 height값을 설정할 수 없다.
또한 margin-top, margin-bottom이 적용되지 않는다. inline 요소의 상-하 여백은 margin이 아닌 line-height 속성에 의해 발생한다.

https://drive.google.com/uc?id=0B3Or0Wv2t1xwODctbTA4UG5VLWs

width, height, margin-top 속성이 반영되지 않았음을 알 수 있다.

3. inline-block 속성

inline-block 속성은 inline속성 처럼 한 줄에 표현이 가능하면서도, margin/width/height 속성을 사용할 수 있다.

4. none 속성

해당 속성이 적용된 요소는 보이지 않고 그 만큼의 자리도 차지하지 않는다. visibility:hidden 속성과 유사하지만 hidden값은 요소는 투명해지되 자리는 차지한다.