display 속성

HTML 파트에서 블록 요소와 인라인 요소를 배웠다. CSS의 display 속성은 그 기본 동작 방식을 바꿀 수 있다. <span>을 블록처럼 쓰거나, <div>를 인라인처럼 배치하는 것도 가능하다.

---

display: block

span {
  display: block;
}

• 가로 전체를 차지하고, 다음 요소는 새 줄로 밀린다
• width, height, 상하 margin 모두 적용된다
• 기본적으로 블록인 태그: div, p, h1~h6, ul, section 등

---

display: inline

div {
  display: inline;
}

• 콘텐츠 너비만큼만 차지하고, 옆으로 나란히 배치된다
• width, height 지정이 무시된다
• 상하 margin이 적용되지 않는다
• 기본적으로 인라인인 태그: span, a, strong, em 등

---

display: inline-block

inline과 block의 특성을 합쳐놓은 값이다.

.button {
  display: inline-block;
  width: 120px;
  height: 40px;
  padding: 8px 16px;
}

• 옆으로 나란히 배치된다 (inline처럼)
• width, height, margin 상하까지 모두 적용된다 (block처럼)

---

display: none

요소를 화면에서 완전히 제거한다. 공간도 차지하지 않는다.

.hidden {
  display: none;
}

visibility: hidden은 공간은 유지하되 보이지 않게 한다. 차이를 알아두면 좋다.

속성	화면 표시	공간 차지
display: none	X	X
visibility: hidden	X	O

---

display: flex

Flexbox 레이아웃을 활성화한다. 자식 요소들을 가로 또는 세로로 유연하게 배치할 수 있다. 다음 챕터에서 자세히 다룬다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

---

display: grid

Grid 레이아웃을 활성화한다. 행과 열을 정의해서 2차원 배치를 만들 수 있다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

---

정리

값	너비	height/width	상하 margin
block	전체	적용 O	적용 O
inline	콘텐츠	적용 X	적용 X
inline-block	콘텐츠	적용 O	적용 O
none	—	—	—

---

display는 CSS 레이아웃의 핵심 속성이다. 요소가 의도와 다르게 배치될 때 가장 먼저 확인해야 할 것이 display 값이다. 블록인지 인라인인지 파악하는 것이 레이아웃 문제 해결의 첫 단계다.