[CSS] display inline, block, inline-block

 

display inline, block, inline-block

 

display 속성에서 자주 쓰이는 inline, block, inline-block에 대해 알아보자.
왜 자주 쓰이냐면 시맨틱 웹을 구현하면서 의미 있는 태그를 사용하려고 할 때 inline 요소와 block 요소들의 특징으로 인해 레이아웃 배치에 영향이 있기 때문이다.

inline 태그를 썼지만 block 특징을 가져야 하는 경우가 있고 그 반대의 경우(잘 안쓰이긴 함)도 있기에 display 속성으로 이 값들을 부여하면 태그를 더 자유롭게 사용할 수 있고 배치도 쉽다.

---

 

inline

• 줄바꿈 없이 다른 요소들과 함께 한줄로 나란히 콘텐츠가 정렬된다.
• inline요소는 width, height가 무시된다.
• 해당 컨텐츠가 차지하고 있는 크기만큼만 공간을 차지한다.

💡 margin, padding을 통한 좌우 간격은 적용되지만 상하 간격은 반영되지 않는다.

 

 

block

• 전 후 줄바꿈이 일어나 위 아래의 컨텐츠를 모두 밀어내 혼자 한 줄 안에 위치하게 된다.

💡 margin, padding 등의 간격 뿐만 아니라 width, height 모두 반영이 가능하다.

 

 

inline-block

inline의 단점과 block의 단점을 보완하기 위해 쓸 수 있다.

• inline처럼 줄바꿈이 일어나지 않고 다른 요소들과 함께 위치할 수 있다.
• block 요소처럼 width, height, margin, padding 반영이 가능하다.
• 여러 개의 요소를 한줄에 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 용이하다.