CSS display property

CSS display property

display 프로퍼티는 layout 정의에 사용되는 중요한 요소이며 4가지 value를 가지고 있다.

1. block

2. inline

3. inline-block

4. none

1. block

display 프로퍼티 값이 block 레벨일 경우, 항상 새로운 라인에서 시작된다. 즉, 각 요소는 화면 크기 전체의 가로폭을 차지한다.

width, height, margin, padding 프로퍼티 지정이 가능하다. 

block레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.

2. inline

display 프로퍼티 값이 inline 레벨일 경우, 새로운 라인에서 시작하지 않고 문장의 중간에 삽입이 가능하다. 즉, 줄을 바꾸지 않고 다른 요소와 함게 한 행에 위치한다.

content의 너비만큼의 가로폭을 차지한다.

width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상, 하 여백은 line-height로 지정한다.

inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. 

span은 inline 레벨 요소로 주의해야한다.

3. inline block

block과 inline 레벨 요소의 특성을 모두 갖는다. 

inline 레벨 요소와 같이 한 줄에 표현 되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.

4. none

해당 요소를 화면에 표시하지 않으며 공간조차 사라지게 한다.