display: block, inline, inline-block, none

display가 inline인지 block인지 확인할 수 있는 간단한 방법이 있습니다.

확인해보고 싶은 영역에 background-color를 설정해주면 확인할 수 있습니다.

inline은 자신의 영역만 차지합니다. 또한 옆으로 쌓이게 됩니다.

block은 가로 영역 전부를 차지합니다. 또한 위아래로 쌓이게 됩니다.

위의 이미지에서 확인할 수 있는 block은 <section>, <div>, <p>, <h1> 이 있고

<a>, <span>은 display속성이 Inline 입니다.

display: block

display: block은 가로영역 전부를 차지하게 됩니다.

또한 위아래로 스택처럼 쌓이게 되어 줄바꿈이 된것처럼 나타나게 됩니다.

width, height을 설정할 수 있습니다.

display: inline은 자신의 영역만 가지게 됩니다.

width, height은 속성을 주어도 적용되지 않습니다.

height은 글자의 크기에 의해 정의 되어집니다.

margin도 좌우로만 동작하게 됩니다. 상하로는 속성을 설정해 주어도 동작하지 않습니다.

padding은 상하좌우 동작하게 됩니다.

display: inline-block은 inline과 block의 짬뽕 느낌 입니다.

inline에서 width, height이 동작하게 할수 있다라고 이해 하면 이해가 쉬울것 같습니다.

아래 예시와 함께 보시죠

test1과 test2는 같은 속성들을 동일하게 부여하였습니다.

display: inline속성을 가진 span 태그로 구성되었지만 display: inline-block을 통해 width, height, margin 상하 값 까지 가질수 있게 되었습니다.

하지만 inline처럼 옆으로 쌓이는 것을 볼 수 있습니다.

display: none은 해당영역을 그리지도 않습니다.

visibility: hidden은 요소를 그리고 나서 나타내지 않지만 display: none은 그리지 조차도 않습니다.

아래의 이미지를 보면 visibility: hidden은 영역을 차지하고 있고

display: none은 영역을 차지하지 않고 있는 것을 확인할 수 있습니다.

display: none은 DOM(Document Object Model)에는 포함되어 있습니다!!!