Display: block
- 블럭은 자신이 속한 영역 전체를 차지합니다. 즉, 블럭은 기본적으로 width 값이 100%입니다.
- 블럭은 라인이 새롭게 추가 됩니다.
- 블럭은 height값과 width 값, margin값 그리고 padding 값을 지정할 수 있습니다.
Display: Inline
- 인라인은 주로 텍스트를 기입할 때 사용합니다. 즉, 자신의 컨텐츠 영역이 자신의 width 값입니다.
- 인라인은 라인이 새롭게 추가되지 않습니다.
- 인라인은 width값과 height 값을 지정할 수 없습니다.
- 인라인은 margin과 padding이 위와 아래에는 지정되지 않습니다.
Display: Inline-block
- 인라인 블럭은 줄바꿈이 되지 않습니다.
- 인라인 블럭은 width값과 height 값을 지정 할 수 있습니다.
- 인라인 블럭에 widht 값과 height 값을 지정하지 않으면 inline과 같이 컨텐츠 만큼 영역이 잡힙니다.
'웹사이트 만들기 > CSS' 카테고리의 다른 글
| Float으로 인한 영역 깨짐(height: 0)을 방지하는 방법 (클리어픽스) (0) | 2019.12.17 |
|---|---|
| IR 기법(Image Replacement)의 의미와 종류 그리고 사용 방법 (0) | 2019.12.16 |
| HTML 과 CSS로 이미지를 표현하는 방법(Img/Background/이미지 스프라이트 기법) (0) | 2019.12.15 |
| 마진(Margin)과 패딩(Padding)의 차이와 입력 방법 (0) | 2019.12.13 |
| 웹폰트 사용하는 방법 (0) | 2019.12.12 |
