display

    [CSS] display 속성 (block, inline, inline-block)

    display 속성은 요소가 차지하는 영역에 관한 정보를 나타냅니다. 각 속성에 따라 서로 다른 요소들이 배치되는 모습이 달라집니다. 이 글을 통해 각 속성의 특징과 대표적인 태그 예시들을 알아봅니다. 또한 inline-block이 inline과 block의 어떤 특징을 갖고 있는지도 알아봅니다. 이를 토대로 요소들을 원하는 모습으로 배치할 수 있는 것을 목표로 합니다. 1. block 특징 항상 줄바꿈이 발생합니다. 가로폭(width)은 화면 전체를 차지합니다. → width: 100% width, height, margin, padding 속성을 지정할 수 있습니다. block 요소 안에는 inline 요소를 포함할 수 있습니다. 대표적인 block 요소 → , , , 2. inline 특징 줄바꿈 ..