CSS에서 'display' 속성의 주요 값들(block, inline, inline-block, none)에 대해 설명하고, 각각의 특징을 비교해주세요.

면접관님, CSS의 display 속성은 요소가 화면에 어떻게 보여지고 공간을 차지할지를 결정하는 중요한 속성입니다. 주요 값들을 설명드리겠습니다.

block은 요소가 가로 전체를 차지하며 새로운 줄에서 시작합니다. width와 height 속성을 지정할 수 있고, margin과 padding도 모든 방향으로 적용됩니다. 대표적으로 <div>, <p>, <h1> 태그 등이 있습니다.

inline은 요소가 콘텐츠의 크기만큼만 공간을 차지하며, 줄바꿈 없이 다른 요소들과 같은 줄에 배치됩니다. width와 height 속성을 지정할 수 없고, margin과 padding은 좌우로만 적용됩니다. <a>, <span>, <img> 태그 등이 있습니다.

inline-block은 inline처럼 한 줄에 배치되지만, block처럼 width와 height 속성을 지정할 수 있고, margin과 padding도 모든 방향으로 적용됩니다.

마지막으로 none은 요소를 화면에서 완전히 숨깁니다. 공간조차 차지하지 않으며, 마치 해당 요소가 존재하지 않는 것처럼 동작합니다.

각 값들은 요소의 배치 방식과 박스 모델 속성 적용에 차이를 보이며, 레이아웃 구성에 중요한 역할을 합니다.