div 높이 설정 방법 - Flexbox

css에서 div가 내용없이도 높이값이 적용되게 하려면

 

CSS에서 div 요소가 내용이 없더라도 높이(height)가 적용되게 하려면 다음 방법을 사용할 수 있습니다.

1. 고정 높이 지정하기

내용이 없어도 div의 높이가 유지됩니다.

.empty-div {
  width: 100px;
  height: 200px; /* 고정된 높이 */
  background-color: lightgray;
}

2. 최소 높이 (min-height) 지정하기

내용이 없어도 최소한의 높이를 가지며, 내용이 많아지면 높이가 증가할 수 있습니다.

.empty-div {
  width: 100px;
  min-height: 200px; /* 최소 높이 */
  background-color: lightgray;
}

3. 부모 요소의 높이를 상속받기

부모 요소의 높이가 정해져 있다면 height: 100%를 사용하여 상속할 수 있습니다.

.parent {
  height: 300px;
}

.empty-div {
  width: 100px;
  height: 100%; /* 부모 요소의 높이를 상속 */
  background-color: lightgray;
}

4. 공백 요소를 방지하기 위해 display 속성 사용

일부 브라우저에서는 div 내부가 비어 있으면 높이가 사라질 수도 있습니다. 이 경우 display: block을 명시적으로 설정하면 안정적입니다.

.empty-div {
  display: block;
  width: 100px;
  height: 200px;
  background-color: lightgray;
}

5. 내용이 없어도 공간을 유지하는 방법 (::after 가상 요소 활용)

내용이 없는 경우라도 ::after 가상 요소를 추가하여 공간을 확보할 수 있습니다.

.empty-div::after {
  content: "";
  display: block;
  height: 100%;
}

이 방법들 중 상황에 맞는 것을 선택하여 적용하면 됩니다. 😊

 

수직 중앙 정렬은 어떻게 해?

 

CSS에서 div 안의 요소를 수직 중앙 정렬하는 방법은 여러 가지가 있습니다. 사용하는 요소의 구조와 CSS 설정에 따라 적절한 방법을 선택하면 됩니다.

---

1. Flexbox를 사용한 수직 중앙 정렬 ✅ 가장 많이 사용하는 방법

부모 요소에 display: flex와 align-items: center를 적용하면 내부 요소가 수직 중앙으로 정렬됩니다.

.parent {
  display: flex;
  justify-content: center; /* 가로 중앙 정렬 (선택 사항) */
  align-items: center; /* 세로 중앙 정렬 */
  height: 200px; /* 부모 요소의 높이 */
  background-color: lightgray;
}
.child {
  width: 100px;
  height: 50px;
  background-color: cornflowerblue;
}

<div class="parent">
  <div class="child">중앙 정렬</div>
</div>

✅ 장점: 내용이 변경되어도 중앙 정렬 유지 가능

---

2. Grid를 사용한 수직 중앙 정렬

Grid를 사용하면 place-items: center 한 줄로 정렬할 수도 있습니다.

.parent {
  display: grid;
  place-items: center; /* 가로 + 세로 중앙 정렬 */
  height: 200px;
  background-color: lightgray;
}

✅ 장점: place-items: center 한 줄로 가로/세로 중앙 정렬 가능

---

3. Position + Transform을 사용한 정렬

절대 위치를 이용한 방법입니다.

.parent {
  position: relative;
  height: 200px;
  background-color: lightgray;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  background-color: cornflowerblue;
}

✅ 장점: position: absolute를 사용할 때 유용

---

4. Table을 활용한 정렬 (옛날 방식)

과거에는 display: table을 사용하여 정렬했지만, 요즘은 Flexbox나 Grid를 사용하는 것이 더 좋습니다.

.parent {
  display: table;
  width: 100%;
  height: 200px;
  background-color: lightgray;
}
.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 가로 중앙 정렬 */
}

---

💡 어떤 방법을 선택해야 할까?

• 가장 추천하는 방법: ✅ Flexbox (display: flex)
• 여러 개의 요소를 정렬할 때: Grid (display: grid)
• 절대 위치(absolute)가 필요할 때: position + transform
• 옛날 방식(비추천): table-cell

💙 Flexbox 방식이 가장 쉽고 많이 사용되므로, 기본적으로 display: flex; align-items: center;를 사용하면 됩니다! 🚀