Chapter 3-11. 요소의 유형 <display>(CSS)

 

📌 CSS Display 속성 이해하기

CSS에서 display 속성은 웹 요소의 표시 방식을 설정하는 데 사용됩니다. 이를 통해 요소의 유형을 변경하거나 블록 또는 인라인 요소로 처리할 수 있습니다.

---

📋 블록 레벨 요소와 인라인 요소

🔹 블록 레벨 요소 (Block-level elements)

• 블록 레벨 요소는 자신이 속한 영역의 너비를 모두 차지하며, 다른 블록 요소와 수직으로 쌓입니다.
• 대표적인 블록 요소: <div>, <p>, <h1> 등

🔹 인라인 요소 (Inline elements)

• 인라인 요소는 자기에게 필요한 만큼의 공간만 차지하며, 다른 요소와 같은 줄에 나란히 표시됩니다.
• 대표적인 인라인 요소: <span>, <a> 등

---

📌 display 속성 활용하기

display 속성은 HTML 요소가 블록 요소인지 인라인 요소인지 결정합니다. 이 속성을 사용하면 요소의 표시 방식을 바꿀 수 있습니다.

🔹 display: none

• 요소를 화면에 표시하지 않음.
• 요소는 화면에 보이지 않지만, 공간을 차지하지 않게 됩니다.

✅ 예시

.element {
  display: none;
}

🔹 display: block

• 요소를 블록 레벨 요소로 만듭니다.
• 새로운 줄에서 시작하고 전체 너비를 차지합니다.

✅ 예시

.element {
  display: block;
}

🔹 display: inline

• 요소를 인라인 요소로 만듭니다.
• 같은 줄에 나란히 표시됩니다.

✅ 예시

.element {
  display: inline;
}

🔹 display: inline-block

• 인라인 요소처럼 같은 줄에 표시되지만, 블록 요소처럼 크기와 여백을 설정할 수 있습니다.

✅ 예시

.element {
  display: inline-block;
}

 

 

---

🚩 결론

• display 속성은 웹 요소의 표시 방식을 조정하는 중요한 속성입니다.
• **display: none**을 사용하여 요소를 화면에서 완전히 숨길 수 있고, display: block, display: inline, **display: inline-block**으로 요소의 성격을 변경할 수 있습니다.

이 속성은 레이아웃 조정 및 웹 디자인에서 필수적인 역할을 하므로 잘 활용할 수 있어야 합니다.