반응형
display 속성은 요소가 차지하는 영역에 관한 정보를 나타냅니다.
각 속성에 따라 서로 다른 요소들이 배치되는 모습이 달라집니다.
이 글을 통해 각 속성의 특징과 대표적인 태그 예시들을 알아봅니다.
또한 inline-block이 inline과 block의 어떤 특징을 갖고 있는지도 알아봅니다.
이를 토대로 요소들을 원하는 모습으로 배치할 수 있는 것을 목표로 합니다.
1. block
특징
- 항상 줄바꿈이 발생합니다.
- 가로폭(width)은 화면 전체를 차지합니다. →
width: 100% - width, height, margin, padding 속성을 지정할 수 있습니다.
- block 요소 안에는 inline 요소를 포함할 수 있습니다.
- 대표적인 block 요소 →
<div>,<h1>,<p>,<li>
2. inline
특징
- 줄바꿈 없이 다른 요소들과 한 줄에 배치될 수 있습니다.
- width, height를 지정할 수 없습니다.
- inline 요소는 content의 너비만큼 가로폭을 차지합니다.
- margin, padding은 좌우만 지정이 가능하고 상하는 지정할 수 없습니다.
- inline 요소 안에는 block 요소를 포함할 수 없습니다.
- 대표적인 inline 요소 →
<span>,<a>,<img>,<input>,<button>
3. inline-block
특징
inline-block 요소는 다음과 같은 inline과 block의 특징이 결합되어 있습니다.
- (inline) 줄바꿈 없이 다른 요소들과 한 줄에 배치될 수 있습니다.
- (inline) content의 너비만큼 가로폭을 차지합니다.
- (block) width, height, margin, padding 속성을 지정할 수 있습니다.
반응형