display 속성

display 속성

inline, inline-block, block, none
태그마다 기본값이 다르게 적용되어 있다.

none

• none은 요소를 렌더링 하지 않는다.
• visibility를 hidden과 영역을 차지하지 않는다는 것에서 차이가 있다.

block

• 가로 영역을 전부 차지한다. block의 다음 태그는 줄바꿈이 된다.
• width, height적용 가능하다.
• block 다음 태그가 들어갈 공간이 있어도 줄바꿈이 된다.

div, p, h, li 등

inline

• 줄바꿈이 되지 않는다.
• width, height 지정 할 수 없다.
• 다음 태그가 오른쪽에 위치한다.

span, b, i, a 등

inline-block

• inline과 block을 모두 포함
• 줄 바꿈이 되지 않는다.
• 크기를 지정할 수 있다.
• Internet Explorer 7 이하 사용 X