[CSS] Display: inline-block, float

1. 인라인 블록 (inline-block)

inline처럼 배치되지만, block처럼 크기를 가지는 요소입니다.

 

1️⃣ 특징

• 줄 안에서 글자처럼 배치
• width, height 지정 가능
• margin, padding 정상 적용

버튼, 카드, 배지처럼
“가로로 나열 + 크기 제어”가 필요할 때 사용

 

 

2. float 속성

float는 요소를 왼쪽 또는 오른쪽으로 띄워 배치하는 속성입니다.

 

1️⃣  특징

• 요소를 삽화처럼 띄움
• 주변에 인라인 요소들이 흐르듯 배치
• 주로 left, right 사용

이미지 옆에 텍스트를 감싸는
신문·기사 스타일 레이아웃에 사용

※ 최근에는 flex, grid로 대체되는 경우가 많음

 

 

정리하면

 

block은 줄 단위 구조,
inline은 텍스트 흐름,
inline-block은 둘의 장점만 결합,
float는 띄워서 감싸는 배치