- display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티이다.
- 모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있다.
- 대부분의 엘리먼트에 대한 default값은 보통 block이나 inline으로 지정되어 있다.
1. display: block;
- div는 표준 블록 레벨 엘리먼트이다.
- 블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어난다.
- 자주 볼 수 있는 다른 블록 레벨 엘리먼트로 p와 form이 있으며,
- HTML5에서 새로 추가된 엘리먼트로 header와 footer, section 등이 있다.
- width와 height 지정 가능
2. display: block;
- span은 표준 인라인 엘리먼트이다.
- 인라인 엘리먼트는 단락 안에서 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있다.
3. display: 💫inline-block;
- inline의 특징과 block의 특징 모두 가지고 있다.
- 줄바꿈이 이루어지지 않는다.
- block처럼 width와 height이외 margin, padding 지정할 수 있다.
- 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.
- display: inline-block;로 지정하면 원래 block이었던 div박스를 inline으로 바꿀 수 있으며, 크기를 지정할 수 있다!
vertical-align에 대해 더 공부해보기
