inline 과 inline-block 의 차이점은 무엇인가요?

inline과 inline-block은 CSS의 박스 타입 중 두 가지입니다. 이 두 값은 요소가 인라인 흐름에 속하는 방식을 제어하고, 해당 요소가 수평으로 배치되는 방식을 결정합니다. 그러나 inline과 inline-block 사이에는 중요한 차이점이 있습니다.

1. inline: inline은 인라인 요소로, 텍스트와 같이 한 줄에 배치되며, 줄 바꿈이 없이 나란히 흐릅니다. inline 요소는 width, height, margin-top, margin-bottom 등의 박스 모델 속성을 가질 수 없으며, 수평으로 최소한의 공간만 차지합니다.

2. inline-block: inline-block은 인라인 박스와 블록 박스를 혼합한 특성을 가지고 있습니다. 요소는 인라인 요소처럼 한 줄에 배치되지만, width, height, margin, padding 등의 박스 모델 속성을 가질 수 있습니다. inline-block 요소는 여러 줄에 걸쳐 수평으로 배치될 수 있습니다.

따라서 inline과 inline-block 사이의 주요 차이점은 박스 모델 속성을 사용할 수 있는지 여부입니다. inline은 크기와 여백을 지정할 수 없고, inline-block은 지정할 수 있습니다.

일반적으로 inline 요소는 텍스트나 인라인 요소들을 배치하기 위해 사용되고, inline-block 요소는 텍스트와 함께 크기를 지정하고 레이아웃을 구성하기 위해 사용됩니다.

inline 속성이 가질 수 있는 속성과 가질 수 없는 속성

inline 속성을 가진 요소는 다음과 같은 속성을 가질 수 있습니다:

• padding-left, padding-right
• margin-left, margin-right
• border-left, border-right
• background-color
• color
• font-size, font-family, font-weight, 등의 글꼴 관련 속성
• text-decoration, text-transform, text-align 등의 텍스트 관련 속성
• line-height
• vertical-align
• white-space
• display 속성을 제외한 대부분의 속성

반면에 inline 속성을 가진 요소는 다음과 같은 속성을 가질 수 없습니다:

• width, height
• margin-top, margin-bottom
• padding-top, padding-bottom
• border-top, border-bottom
• display: block, display: inline-block
• float
• position과 관련된 속성들 (position: absolute, position: fixed, 등)
• overflow

이러한 속성들은 inline 요소의 특성상 수평으로 흐르는 인라인 요소이기 때문에 적용되지 않습니다. 따라서 inline 요소에 위 속성들을 적용하려면, 해당 요소를 display: block 또는 display: inline-block으로 변경해야 합니다.