CSS display Property

이아웃 시스템의 뼈대를 이루는 CSS display 속성에 대해 알아보겠습니다.

display 속성은 웹 페이지의 모든 요소가 화면에서 어떻게 보이고, 주변 요소들과 어떻게 배치될지를 결정하는 가장 기초적이면서도 중요한 속성입니다.

---

1. 주요 속성값 (기본 레이아웃)

가장 빈번하게 사용되는 네 가지 기본값입니다.

• block: 항상 새로운 줄에서 시작하며, 가능한 전체 너비를 차지합니다.
  • 예: <div>, <h1>, <p>, <ul>
• inline: 새로운 줄에서 시작하지 않고 콘텐츠만큼의 너비만 차지합니다.
  • 주의: width, height, 상하 margin 설정이 적용되지 않습니다.
  • 예: <span>, <a>, <img>
• inline-block: inline처럼 한 줄에 나란히 배치되지만, block처럼 width, height 및 모든 margin 설정을 가질 수 있습니다.
• none: 요소를 화면에서 완전히 제거합니다. 공간조차 차지하지 않습니다. (자바스크립트로 요소를 숨겼다 나타낼 때 자주 사용)

---

2. 모던 레이아웃 속성 (강력한 배치)

현대 웹 디자인의 핵심인 복잡한 배치를 위한 속성입니다.

• flex: 요소를 플렉스 컨테이너로 만듭니다. 1차원(행 또는 열) 정렬에 최적화되어 있습니다.
• grid: 요소를 그리드 컨테이너로 만듭니다. 2차원(행과 열 모두) 격자 형태의 레이아웃을 짜기에 완벽합니다.

---

🖥️ 실전 예제 코드: "성격 변화시키기"

HTML 태그 고유의 성격을 CSS display 속성으로 바꿀 수 있습니다.

HTML

 

<style>
  /* 원래 block인 li를 한 줄로 나란히 배치 */
  nav li {
    display: inline-block;
    margin-right: 20px;
    background-color: #f0f0f0;
    padding: 10px;
  }

  /* 원래 inline인 span에 크기 부여하기 */
  .box-span {
    display: block; /* block으로 바꾸면 너비와 높이가 적용됨 */
    width: 100px;
    height: 50px;
    background-color: orange;
  }

  /* 요소를 아예 숨기기 */
  .hidden {
    display: none;
  }
</style>

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

<span class="box-span">Box</span>
<div class="hidden">이 글자는 보이지 않습니다.</div>

---

📋 display 속성 요약표

값	줄 바꿈 여부	크기 설정(width/height)	비고
block	있음	가능	가로 전체를 차지함
inline	없음	불가능	텍스트 흐름 속에 위치함
inline-block	없음	가능	inline과 block의 장점 결합
flex	설정에 따름	가능	유연한 박스 모델 (1차원)
grid	설정에 따름	가능	격자 시스템 (2차원)
none	-	-	렌더링 자체를 하지 않음

---

학습 정리

• **display: none**은 요소가 아예 사라지지만, **visibility: hidden**은 요소는 안 보여도 그 공간은 그대로 남겨둡니다.
• 리스트(li)로 가로 메뉴를 만들 때 과거에는 inline-block을 썼지만, 현재는 **display: flex**를 사용하는 것이 표준입니다.
• inline 요소에 padding을 줄 경우 배경색은 칠해지지만 주변 레이아웃을 밀어내지는 못하므로 주의해야 합니다.

---

요소의 존재 방식과 배치를 결정하는 display 속성을 정복하셨습니다!