[HTML/CSS] #1 display 속성 정리 (태그 줄바꿈, 블록, 인라인, 인라인블록)

이번에는 css에서 자주 헷갈리는 display 속성을 한눈에 알아볼 수 있도록 정리해보겠습니다.

 

---

인라인 태그와 블록 태그의 특징을 살펴보고 css에서 display를 변경했을 때 어떻게 나타나는지 알아보겠습니다.

블록 태그와 인라인 태그에 대한 것과 어떤 것이 있는지는 아래 링크를 참조하시면 됩니다!

https://nack1400.tistory.com/17

[HTML] #9 Block 태그, Inline 태그 비교 정리(블록vs인라인 태그 정리)

 

 

 

1. inline, block, inline-block 특징 정리

	display : inline	display : block	display : inline-block
태그에 설정된 높이나 너비	무시	설정된 높이와 너비를 따름	설정된 높이와 너비를 따름
공간 차지	작성된 내용만큼	박스 크기만큼	박스 크기만큼
줄 바꿈	줄 바꿈 X	줄 바꿈 O	줄 바꿈 X

 

 

 

 

2. 예시

*참고*

각자의 태그들은 기본적으로 display에 inline이나 block의 속성을 가지고 있습니다. 예를 들어 span태그는 inline, div태그는 block 태그입니다. 

 

See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.

 

---

3. 정리

• inline : 그냥 내용, 박스가 아님, 내용만큼 공간 차지함
• block : 박스, 한 줄에 하나만 있음
• inline-block : 박스, 한 줄에 여러개 올 수 있음

 

 

---

여기까지 종종 헷갈릴 수 있는 인라인과 블록에 대해서 정리해보았습니다!