CSS display
속성은 브라우저에서 요소들이 어떻게 보여지고 배치되는지 결정한다.
그 속성 중 block
, inline
, inline-block
등이 있다.
display
가block
으로 설정된 요소는 새로운 줄로 위치하면서,width
의 크기가 부모 요소의100%
를 차지한다.
width
와height
의 크기를 지정할 수 있으며, 부모요소보다 작게 설정할 수는 있지만 나머지 공간이margin
으로 채워지면서 자동으로 줄바꿈을 한다.
🔸 block
속성을 기본 값으로 가지는 요소 : div
, p
, ul
, h1
, h2
, ....
display
가inline
으로 설정된 요소는 다른 요소들과 같은 라인에서 표시되며, 내용의 길이만큼 즉 내용을 감싸는width
와height
값을 가진다.
width
와height
값을 임의로 지정 할 수 없으며, 오로지 내용의 길이만큼의 크기를 가진다.
🔸 inline
속성을 기본 값으로 가지는 요소 : span
, a
, img
, input
, textarea
, ....
inline-block
은block
속성과inline
속성을 섞어 놓은 것과 같다.
width
와height
의 크기를 설정 할 수 있으면서 줄바꿈이 되지 않고, 다른요소와 같은 라인에 배치되는 장점을 가지고 있다.
🔸 inline-block
속성을 기본으로 갖고 있는 요소는 없고 선언 해주어야 한다.
🔹 display
속성으로 인한 요소 변경은 특별한 경우가 아니면 바꾸지 않고 요소의 특성에 따라 사용하는 것을 권장한다.