display속성

none

요소가 렌더링되지 않는다

block

.block1{ width: 300px; border: 3px solid #333 }

div 태그, p 태그, h 태그#, li 태그 등
기본적으로 가로영역을 모두 채우며 block요소 다음에 등장ㅇ하느 태그는 줄바꿈이 된 것처럼 보인다.
width,height등을 지정할 수 있다.

inline

.inline2{ width: 200px; /* 이 값은 무시됩니다 */ border: 3px solid #999; }

pan 태그, b 태그, i 태그, a 태그 등
block과 달리 줄 바꿈이 되지 않고 width,height등 지정할 수 없다. 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위.inline요소뒤에 나오는 태그는 줄바꿈이 되지 않고 오른쪽에 표시된다.

inLine-block

줄바꿈이 되지 않지만 크기를 지정할 수 있다.
.inline-block1{ display: inline-block; background: #09c; height: 45px; /* 원래 inline 요소의 높이는 글자(폰트)의 높이를 바탕으로 설정되지만, inline-block을 이용하면 임의로 높이 또한 설정을 할 수 있습니다. */ }