inline, inline-block, block 에 대해서

inline, inline-block, block를 알아보기 전에 display를 먼저 설명해보자

display

display는 웹페이지에서 요소를 보여줄지 결정해주는데 이때 사용 되는게 이제 알아볼 inline, inline-block, block이다. 물론 이보다 더 많이 있지만 대표적인 3가지가 위와 같다.

block

블럭 속성은 높이와 너비를 가지는 박스라고 생각하면 이해하기 편할거 같다. 우리가 사탕을 포장할 때 이쁜 박스를 사용하여 포장할 수 있는데 이 박스의 크기를 내가 원하는 크기로 구매해서 사용할 수 있듯이 block 속성은 높이와 너비를 설정하여 사용할 수 있다.

다만 높이와 너비를 따로 설정하지 않는다면 높이는 요소의 높이를 따라가고 너비는 부모요소의 100%를 사용한다

다른 특징으로는 블럭 요소들은 상자를 위로 쌓듯이 세로로 쌓인다는 것이다. 그렇기에 요소를 가로로 나열하고 싶다면 다른 속성을 사용해야 한다.

inline

인라인 속성은 블럭 요소와 많은 부분에서 다르게 적용된다.
우선 높이와 너비를 지정할 수 없으며, 가로로 나열되어 화면에 보여진다.
그렇다면 높이와 너비가 없으니 화면에 보여지지 않는건가 하면 그것은 아니고 내부 요소의 높이와 너비를 그대로 가져간다.
음식을 보관할 때 랩으로 꽁꽁 싸매듯이 찰싹 달라붙어 있다고 생각하면 된다.

inline-block

인라인 블럭 속성은 인라인 속성의 특징과 블럭 요소의 특징을 동시에 가지는 속성이다.
블럭 속성처럼 높이와 너비를 가지지만, 인라인 요소와 같이 가로로 나열되어 보여진다.