1. 인라인 블록 (inline-block)
inline처럼 배치되지만, block처럼 크기를 가지는 요소입니다.
1️⃣ 특징
- 줄 안에서 글자처럼 배치
- width, height 지정 가능
- margin, padding 정상 적용
버튼, 카드, 배지처럼
“가로로 나열 + 크기 제어”가 필요할 때 사용

2. float 속성
float는 요소를 왼쪽 또는 오른쪽으로 띄워 배치하는 속성입니다.
1️⃣ 특징
- 요소를 삽화처럼 띄움
- 주변에 인라인 요소들이 흐르듯 배치
- 주로 left, right 사용
이미지 옆에 텍스트를 감싸는
신문·기사 스타일 레이아웃에 사용
※ 최근에는 flex, grid로 대체되는 경우가 많음

정리하면
block은 줄 단위 구조,
inline은 텍스트 흐름,
inline-block은 둘의 장점만 결합,
float는 띄워서 감싸는 배치
'웹 개발 기본 & 디자인' 카테고리의 다른 글
| [CSS] 선택자 붙여쓰기 정리 (복합 선택자 이해하기) (0) | 2025.12.25 |
|---|---|
| [CSS] 선택자 목록(Selector List) (0) | 2025.12.15 |
| [CSS] Display: block과 inline의 차이 (0) | 2025.12.15 |
| [CSS] 마진 상쇄 (0) | 2025.12.14 |
| [CSS] overflow 속성 이해하기 (0) | 2025.12.14 |