display 속성

 

🟢   display

웹 페이지의 모든 요소가 화면에서 어떻게 보이고, 배치될지 결정하는 핵심 속성.

 

🎯 주요 속성 4가지 🎯

🔹  block: 항상 새로운 줄에서 시작하며, 한 줄 전체 차지 후 다음 요소는 자동으로 아래 줄로 배치되는 요소.

• 예: <div>, <h1>, <p>, <ul>, <section>

 

🔹 inline: 새로운 줄을 차지하지 않고 텍스트처럼 흐르며, 크기 지정 없이 내용만큼만 공간을 사용하는 요소.

• 예: <span>, <a>, <strong>, <em>
• 주의: width/height 적용 불가, 좌우 여백(margin/padding)은 적용 가능.

 

🔹 inline-block: inline처럼 한 줄에 나란히 배치되면서, block처럼 크기(width, height)를 자유롭게 조절할 수 있는 요소.

 

🔹 none: 요소를 화면에서 완전히 제거. 공간도 차지하지 않는다. (자바스크립트로 요소를 숨겼다 나타낼 때 자주 사용)

 

 

💥 모던 레이아웃 속성💥 

강력한 반응형 레이아웃

🔹 flex: 가로 또는 세로 한 방향(line)에서 요소 정렬을 강력하게 제어. (1차원 레이아웃)

.container {
  display: flex;
  justify-content: center; /* 가로 정렬 */
  align-items: center;     /* 세로 정렬 */
  gap: 20px;               /* 요소 사이 간격 */
}

• flex-direction: 요소 배치 방향. (row, column 등)
• justify-content: 주 축(가로) 정렬. (flex-start, center, space-between 등)
• align-items: 교차 축(세로) 정렬. (flex-start, center, stretch 등)
• flex-wrap: 줄 넘김 허용 여부. (wrap, nowrap 등)
• gap: 요소 사이 간격.

 

🔹 grid: 가로 또는 세로 한 방향뿐 아니라, 행(row)과 열(column) 모두 강력하게 제어. (2차원 레이아웃)

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3칸 균등 */
  grid-template-rows: 100px 100px;       /* 2행 고정 높이 */
  gap: 20px;                             /* 행/열 간격 */
}

• grid-template-columns: 열 크기 정의.
• grid-template-rows: 행 크기 정의.
• gap: 행/열 사이 간격.
• grid-column: 특정 요소의 열 범위 지정.
• grid-row: 특정 요소의 행 범위 지정.
• justify-items: 요소 가로 정렬.
• align-items: 요소 세로 정렬.

 

 

📍  POINT 📍

✔️ display: none 은 요소가 아예 사라지고, visibility: hidden 은 요소는 안 보여도 공간은 그대로 남겨둔다.  ✔️

✔️ 리스트(li)로 가로 메뉴를 만들 때 과거에는 inline-block을 썼지만, 현재는 display: flex를 사용하는 것이 표준이다. ✔️

✔️ inline 요소에 padding을 줄 경우 배경색은 칠해지지만 주변 레이아웃을 밀어내지는 못하므로 주의해야한다. ✔️

 

 

📋 display 속성 요약표 📋

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

 

---

 

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

<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>