[CSS] inline, block

모든 요소는 '상자(Box)'다

웹 페이지의 모든 요소는 사실 하나의 '상자(Box)' 입니다. 이 상자가 화면에 어떻게 배치될지를 결정하는 가장 중요한 규칙이 바로 display 속성입니다. 오늘은 가장 기본이 되는 Block, Inline, 그리고 이 둘의 장점을 합친 Inline-Block에 대해 자세히 알아보겠습니다.

1. Block (벽돌형)

• 한 줄을 독차지: 옆에 공간이 남아도 무조건 다음 줄로 넘어갑니다.
• 대표적인 태그: <div>, <h1>~<h6>, <p>, <ul>, <li> 등

• 크기 조절 가능: 가로(width)와 세로(height)를 마음대로 지정할 수 있습니다.

• 자유로운 여백: 상하좌우 모든 방향의 마진(margin)과 패딩(padding)이 주변 요소를 확실하게 밀어냅니다.

2. Inline (글자형)

• 필요한 만큼만 차지: 딱 내용물만큼만 자리를 차지하고 옆으로 나란히 붙습니다.

• 크기 조절 불가: width와 height를 지정해도 브라우저가 무시합니다. (글자 한 자의 가로 길이를 강제로 늘릴 수 없는 것과 같습니다.)

• 상하 마진의 한계: 좌우 마진은 잘 작동하지만, 위아래 마진(margin-top/bottom)은 주변 요소를 밀어내지 못하고 겹쳐버립니다.

• 대표적인 태그: <span>, <a>, <strong>, <img> 등

Inline-Block (하이브리드)

• 배치는 Inline: 옆으로 나란히 줄을 서서 다른 텍스트나 요소와 어우러집니다.

• 능력은 Block: width, height, 상하좌우 margin을 모두 가질 수 있습니다.

---

.challenge-item-details-icon {
  display: inline-block;
  font-size: 0.85rem;
  margin-left: 0.25rem;
  transition: transform 0.3s ease-out;
}

아이콘은 버튼 글자 바로 옆에 나란히 있어야 하므로 inline 성질이 필요합니다.

하지만 아이콘을 부드럽게 회전(transform: rotate)시키거나 정확한 여백을 주려면 브라우저가 이걸 '형체가 있는 상자'로 인식해야 합니다.

기본 inline 상태의 은 브라우저가 "넌 그냥 텍스트의 일부일 뿐이야"라고 간주해서 회전 명령을 제대로 수행하지 못할 때가 많습니다.

이때 display: inline-block을 주면 "옆에 서 있는 예의는 지키되, 내 크기와 회전 명령은 블록처럼 잘 들어라!"라고 선언하는 것입니다.