2-1) CSS display: inline, block, inline-block

사진_unsplash

display: 속성이란?

display: 요소에 따른 영역의 정의를 설정하는 속성입니다.

대표적인 요소의 기본값으로는 block 과 inline 그리고 inline-block 이 있습니다.

기본 display 값의 종류와 특징

display: block

기본 width값이 부모요소의 100% 차지하고 width 값을 줄여도 블록 요소의 라인(가로행)에 다른 요소가 나열될 수 없습니다.

기본값이 block인 요소
semantic : <section>, <article>,<p>,<h1>
non-semantic : <div>

display: inline

요소의 콘텐츠만큼 사이즈값을 가질 수 있습니다. 따로 사이즈값을 주어도 적용이 않습니다.

• 패딩 및 마진은 Left 와 Right 만 실행된다

기본값이 inline인 요소
semantic :<a>,<img>,<i>
non-semantic : <span>

display: inline-block

사이즈값을 가질 수 있으며 다른 인라인 요소가 옆으로 올 수 있다.

기본값이 inline-block인 요소
semantic :<button>, <input>, <select>