html 요소들은 display 속성값이 크게 block인 요소와 inline 요소로 나뉩니다. 이 속성값이 어떤 것인지에 따라 스타일링 방식이 크게 차이나기 때문에 어떤 요소가 어떤 속성값을 갖는지 그리고 적절하게 이 속성값을 잘 바꿔가며 적용시키는 것이 중요합니다.

display: block

✅ 영어 단어 block의 뜻인 '막다, 방해하다' 의미에 맞게 기본적으로 이 속성값을 적용한 요소의 우측에는 다른 요소가 위치할 수 없어 줄바꿈이 일어납니다.

✅ width를 명시하지 않으면 부모 요소의 content-box 영역의 100%만큼을 차지합니다.

<div class="parent"> // 600px
	<div class="box box1">Box 1</div>
	<div class="box box2">Box 2</div>
</div>

box1과 box2 요소에 대한 width를 따로 명시하지 않았지만 block 요소의 특성의 영향으로 부모 요소인 .parent 요소의 width를 물려받게 됩니다.

✅ width를 명시하면 해당 요소 우측의 나머지 공간은 다른 요소가 침범하지 못하게 margin으로 자동으로 채워집니다.

반대로 margin-left: auto를 하게 되면 좌측에는 margin으로, 우측에는 요소가 위치하게됩니다.

만약 margin-left: auto, margin-right: auto를 하게되면 요소의 좌﹒우측을 각각 margin으로 채우기 때문에 결국에는 가운데 정렬이 되게 됩니다.

<div class="parent">
	<div style="margin-left: auto; margin-right: auto;">Box</div>
</div>

✅ height를 명시하면 명시된 값만큼을 높이로 갖지만 명시하지 않으면 자식 요소들의 높이의 합 만큼을 갖습니다.

✅ width, height, padding/margin-top/bottom 속성을 적용할 수 있습니다.

display: inline

✅ 기본적으로 옆으로 흐르는 특징을 가지고 있어서 inline 요소끼리는 옆에 위치하게됩니다.

✅ block과 달리 width, height, padding/margin-top/bottom 속성이 적용되지 않습니다. (실제로 top/bottom을 적용시켜보면 잘 적용된거 같이 보여도 다른 요소와 상호작용되지 않기 때문에 적용이 안된 것과 마찬가지여서 잘못된 적용이라고 할 수 있습니다)

display: inline-block

✅ * 기본적으로 옆으로 흐르는 inline의 특징을 가짐과 동시에 width, height, padding/margin-top/bottom 속성이 적용되는 block의 특징 또한 가지고 있습니다.