display
display는 css에서 layout을 위한 중요한 속성(properity)이다.
보통 태그는 display 에서 block, inline 기본 값을 가진다.
block요소
블록요소는 좌우로 최대한 늘어나려고 한다. 상하로는 블록요소안의 컨테츠 크기만큼을 최대로 만들려 최대한 줄어들려고 한다.
- div
- p
- form
- header
- footer
- section
- etc
inline요소
인라인요소는 상하좌우 모두 최대한 줄어들려는 특징이 있다.
인라인요소 안에 글자가 있다면, 인라인요소는 글자의 크기만큼만 크기를 차지할 것이다.
- span
- a
inline-block
display속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline요소 처럼 줄바꿈 없이 한줄에 나란히 배치된다.
하지만 block요소처럼 width와 height속성 및, margin과 padding속성을 사용해서 크기 및 기타 작업이 가능하다.
내부적으로는 block요소를, 외부적으로는 inline요소의 규칙을 따른다.
- button
- input
- select
