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