[CSS] inline-block은 문제가 많다.

[CSS] inline-block은 문제가 많다.

inline-block은 문제가 많다.

inline은 높이, 너비가 없는 요소를 말하고, block은 높이, 너비가 있는 요소를 말한다. 그래서 block을 디폴트값으로 가진 <div>와 같은 태그는 세로로 정렬되고, <span>과 같이 inline을 디폴트값으로 가진 태그는 가로로 쭉 늘어진다.

 

inline-block은 높이, 너비가 없는 inline 요소에 높이와 너비를 주면서 가로로 정렬시킨다.

 

 

근데,

가로로 정렬되는 block간의 원치 않는 가로 공간이 생기고, 화면의 크기에 따라 정렬이 깨질수도 있다. 아니 애초에 맞추기도 힘들다.

 

 

그리고 이렇게 정렬이 깨져서 내려온 block과 위의 block들 간의 위아래 간격은 또 다르게 생긴다. 이러한 문제를 해결하기 위해 나온게 flex 개념이다.

 

 

데스크탑, 태블릿, 스마트폰까지 하나의 화면이 대응해야하는 크기는 다양하다. flex의 개념을 머릿속에 박아두자.