display 속성) block, inline, inline-block

display 속성은 요소를 어떻게 보여줄 지 결정하는 속성이다.

요소의 성격과 역할이 정해지기 때문에 매우 중요한 속성이고, 깊은 이해가 필요하다.

1. block

display: block은 다른 요소와 어울리지 않고 나만의 고유한 영역을 가질 때 사용한다.

좀 더 쉽게 말해 같은 줄에 다른 요소가 오지 못하도록 부모의 width값을 그대로 상속받는다.

따라서 그 줄에 해당요소만 있어야 하거나 레이아웃을 짤 때 많이 사용된다.

(요즘에는 display: flex를 이용하여 레이아웃을 짜기도 하지만 아직 크로스브라우징 문제가 있으므로 여기서는 논외로 한다.)

1-1) width

default value : auto

마음대로 조절 가능하며 명시적으로 width를 지정하지 않는다면 부모의 width값만큼 상속받는다.

1-2) height:

default value : auto

마음대로 조절 가능하며 명시적으로 height을 지정하지 않는다면 자식의 height값만큼 상속받는다.

1-3) padding, margin

상, 하, 좌, 우 전부 적용 가능하다.

주의) width: 100%는 width: auto와 다르다. %단위로 명시적으로 값을 준 경우에는 고정값을 갖게 된다는 의미다.

즉, width가 auto일 때는 padding이나 margin이 주어져도 부모영역 안에서 처리되지만

width: 100%일 때는 부모의 width값에 padding이나 margin값이 추가로 더해져서 부모영역보다 커지게 된다.

height도 마찬가지로 적용된다.

2. inline

inline은 글씨와 같이 콘텐츠 자체라고 보면 된다.

2-1) width

길이의 개념은 있지만 width의 개념은 없다. 따라서 적용되지 않는다.

2-2) height

글씨와 같은 콘텐츠들이기 때문에 글씨의 줄라인(line-height)은 있지만 height의 개념은 없다.

2-3) padding, margin

좌, 우만 정상적으로 적용되며 padding은 상, 하에 시각적으로만 적용되고 실질적인 공간을 차지하지 않는 허상이다.

쉽게 생각하면 좌, 우만 적용된다고 생각하면 된다.

3. inline-block

다른 요소와 어우러질 수 있는 inline의 속성과 공간을 차지할 수 있는 block요소의 속성을 섞어놓은 속성값이다.

3-1) width

default value : auto

콘텐츠의 길이만큼 자동으로 width값이 계산된다.

3-2) height

명시적으로 지정하면 적용된다.

3-3) padding, margin

명시적으로 지정하면 적용된다.