display: inline-block

 

display: inline-block에 대한 궁금증, 속시원하게 풀어드릴게요!

display: inline-block 속성은 블록 레벨 요소와 인라인 레벨 요소의 장점을 모두 가지도록 만들어주는 CSS 속성입니다.

간단히 말해서,

• 블록 레벨 요소처럼: 너비와 높이를 지정할 수 있고, 마진과 패딩을 위아래로 모두 줄 수 있습니다.
• 인라인 레벨 요소처럼: 다른 요소들과 같은 줄에 배치될 수 있습니다.

좀 더 자세히 설명하면,

• 블록 레벨 요소: <div>, <p>, <h1> 등처럼 새로운 줄을 차지하고 독립적인 공간을 가지는 요소입니다.
• 인라인 레벨 요소: <span>, <a>, <strong> 등처럼 주변 텍스트와 같은 줄에 배치되는 요소입니다.
• display: inline-block: 블록 레벨 요소에 이 속성을 적용하면 인라인처럼 다른 요소들과 같은 줄에 배치되면서도, 블록 레벨 요소처럼 너비, 높이 등을 조절할 수 있게 됩니다.

언제 사용해야 할까요?

• 가로 메뉴: 메뉴 항목들을 한 줄에 나란히 배치하고 싶을 때
• 갤러리: 이미지들을 일정한 간격으로 배치하고 싶을 때
• 버튼 그룹: 여러 개의 버튼을 가로로 나열하고 싶을 때

결론적으로, display: inline-block;은 웹 페이지의 레이아웃을 디자인할 때 매우 유용한 속성입니다. 하지만 모든 상황에 적용할 수 있는 만능 해결책은 아니므로, 각 상황에 맞게 적절하게 사용해야 합니다.

 

왜 display: inline-block을 사용할까요?

• 가변적인 레이아웃: 요소의 크기를 동적으로 조절하면서도 다른 요소들과 함께 배치해야 할 때 유용합니다.
• 플렉스박스나 그리드 레이아웃과 함께: 이러한 레이아웃 시스템에서 요소들을 정렬하고 배치할 때 자주 사용됩니다.
• 버튼이나 이미지를 가로로 나열: 버튼이나 이미지를 가로로 일렬로 배치하면서 각 요소의 크기를 조절하고 싶을 때 사용합니다.

예시 코드:

HTML

<div style="display: inline-block; background-color: lightblue; padding: 10px;">
  첫 번째 박스
</div>
<div style="display: inline-block; background-color: pink; padding: 10px;">
  두 번째 박스
</div>

 

 

위 코드는 두 개의 <div> 요소를 나란히 배치하는 예시입니다. 각 <div> 요소는 display: inline-block 속성을 사용하여 인라인처럼 배치되면서도 배경색과 패딩을 지정하여 스타일을 적용할 수 있습니다.

정리:

• display: inline-block은 블록 레벨 요소와 인라인 레벨 요소의 장점을 모두 결합한 속성입니다.
• 너비와 높이를 지정하면서도 다른 요소들과 같은 줄에 배치할 수 있습니다.
• 가변적인 레이아웃을 구현하거나 플렉스박스, 그리드 레이아웃과 함께 사용하기 좋습니다.