HTML을 작성하고 CSS로 배치할때, 반드시 사용하게 되는 속성이 바로 display 속성이다. display는 해당 문서가 어떻게 작성 되는지 알려준다.
앞선 TIL에서 대표적으로 <div>는 블럭요소, <span>은 인라인 요소라는것을 알게 되었고, 대략적으로 어떤것인지 작성했으나, 오늘은 그 이외의 요소중 Inline-block에 대해 알아보려 한다.
우선 가볍게 복습하자면,
Block Level Element(블럭요소)는 하나의 블럭요소가 존재하면, 옆에 다른 블럭을 위치 시킬 수 없다. 블럭요소는 너비와 높이를 가질 수 있으며, margin과 padding을 상하좌우로 조정 할 수 있다.
Inline Level Element(인라인요소)는 블럭요소와 다르게 바로 옆에 다른 요소들을 위치 시킬 수 있다. 또한, 블럭과는 다르게 상하의 margin과 padding은 적용 되지 않으며, 좌우의 margin과 padding만 적용 된다.
이 두가지의 속성을 합한 Inline-block이라는 속성이 있다.
그렇다면 이 속성은 Block과 Inline의 속성을 다 가지고 있으니 옆에 다른 속성을 위치 시킬 수 있고, margin과 padding을 상하좌우로 배치시킬 수 있다. 이 속성은 유용한 속성일까?
아쉽지만 그렇지 않다.
위 사진과 같이, inline-block은 옆에 다른 요소를 둘수 있지만, 사이사이에 의문의 여백이 존재한다.
이 여백은 margin도 padding도 아니며 조정 할 수 있는것도 없다.
또한, 이는 사용하는 기기의 해상도 혹은 화면크기에 따라서도 달라지기 때문에, 화면이 작아지면 나열 되있던 컨텐츠가 아래로 밀려서 내려온다. 즉 반응형 디자인을 지원하지 않는다는 결점이 존재한다.
그렇다면 어떤 속성을 써야 margin과 padding을 모두 적용 시키면서, 요소 옆에 다른 요소를 위치 시킬 수 있을까?
다음의 flex box 옵션에서 알아보도록 하자.
