Flexbox 레이아웃을 사용하여 요소를 가운데 정렬하는 방법

Flexbox Froggy

https://flexboxfroggy.com/#ko

 

 

 

1 .Flexbox 레이아웃을 사용하여 요소를 가운데 정렬하는 방법

CSS

display: flex;
justify-content: center;
align-items: center;

이 CSS 코드는 Flexbox 레이아웃을 사용하여 요소를 가운데 정렬하는 데 사용됩니다. 각 속성의 역할은 다음과 같습니다:

1. display: flex;

• 이 속성은 요소를 Flex 컨테이너로 설정합니다. Flex 컨테이너는 자식 요소들의 레이아웃을 유연하게 조절할 수 있는 특별한 컨테이너입니다.

2. justify-content: center;

• 이 속성은 Flex 컨테이너 내의 자식 요소들을 메인 축(주축)을 따라 가운데 정렬합니다. 메인 축은 기본적으로 행(가로) 방향입니다.

3. align-items: center;

• 이 속성은 Flex 컨테이너 내의 자식 요소들을 크로스 축(횡축-세로)을 따라 가운데 정렬합니다. 크로스 축은 메인 축과 직교하는 방향입니다.

결과적으로: 이 세 가지 속성을 함께 사용하면, Flex 컨테이너 내의 모든 자식 요소들이 컨테이너의 가운데에 위치하게 됩니다.

예시:

HTML

<div class="container">
  <div class="item">Centered Item</div>
</div>

코드를 사용할 때는 주의가 필요합니다.

 

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 300px;
  border: 1px solid black;
}

.item {
  background-color: lightblue;
  padding: 20px;
}

코드를 사용할 때는 주의가 필요합니다.

 

이 예시에서는 .container 클래스를 가진 div 요소가 Flex 컨테이너로 설정되어 있고, 그 안의 .item 클래스를 가진 div 요소가 가운데 정렬됩니다.

2.  line-height: 100vh; 

line-height: 100vh; 속성은 CSS에서 한 줄의 높이를 설정하는 데 사용됩니다.

• 100vh: 이 값은 viewport height의 약자로, 현재 브라우저 창의 높이를 의미합니다. 즉, line-height를 100vh로 설정하면 해당 요소의 한 줄 높이가 브라우저 창의 높이와 동일해집니다.

간단히 말해서,

• 한 줄의 높이를 브라우저 창의 높이만큼 늘려버리는 효과를 내게 됩니다.

사용 예시 및 주의사항

• 풀스크린 텍스트 효과: 한 줄의 텍스트를 브라우저 창 전체에 펼쳐 보여주는 효과를 내고 싶을 때 사용합니다.
• 수직 가운데 정렬: 다른 속성들과 함께 사용하여 요소를 수직으로 가운데 정렬하는 데 활용할 수 있습니다.
• 실험적인 타이포그래피: 독특하고 실험적인 레이아웃을 만들 때 사용하기도 합니다.

주의사항:

• 반응형 디자인: 브라우저 창 크기가 변할 때마다 텍스트의 크기가 함께 변하기 때문에, 반응형 디자인을 고려해야 합니다.
• 컨텐츠 오버플로: 텍스트 내용이 너무 길어서 브라우저 창을 넘어갈 경우, 스크롤이나 클리핑 등의 문제가 발생할 수 있습니다.
• 브라우저 호환성: 모든 브라우저에서 동일하게 작동하지 않을 수 있으므로, 호환성을 고려해야 합니다.

코드 예시

CSS

.full-height-text {
  line-height: 100vh;
  font-size: 5rem; /* 글자 크기 조절 */
  text-align: center; /* 가운데 정렬 */
}

코드를 사용할 때는 주의가 필요합니다.

 

위 코드는 .full-height-text 클래스를 가진 요소의 한 줄 높이를 브라우저 창의 높이만큼 설정하고, 글자 크기를 5rem으로, 그리고 텍스트를 가운데 정렬하는 예시입니다.

요약

line-height: 100vh; 속성은 매우 강력한 기능이지만, 잘못 사용하면 예상치 못한 결과를 초래할 수 있습니다. 특정한 디자인 목표를 달성하기 위해 신중하게 사용해야 합니다.

3. display: flex; justify-content: center; align-items: center;를 사용했는데도 세로 정렬이 안 될 때 line-height: 100vh;를 사용하면 되는 이유

 

문제의 원인과 해결 방안

display: flex; justify-content: center; align-items: center;는 일반적으로 요소를 가운데 정렬하는 데 효과적인 방법입니다. 하지만 이 방법만으로는 세로 정렬이 되지 않는 경우가 있습니다. 이는 다음과 같은 이유 때문일 수 있습니다.

• 요소의 높이가 정해지지 않았을 때: height 속성을 명시하지 않으면, 요소의 높이는 내용에 따라 자동으로 결정되기 때문에 align-items: center; 속성이 제대로 작동하지 않을 수 있습니다.
• 부모 요소의 높이가 정해지지 않았을 때: 부모 요소의 높이가 정해지지 않으면 자식 요소를 기준으로 높이가 결정되기 때문에 align-items 속성이 제대로 작동하지 않을 수 있습니다.
• 다른 CSS 속성과의 충돌: 다른 CSS 속성이 align-items 속성의 효과를 상쇄시킬 수 있습니다.

 

line-height: 100vh;를 사용하는 이유

line-height: 100vh;는 요소의 한 줄 높이를 브라우저 창의 높이와 동일하게 만듭니다. 이를 통해 다음과 같은 효과를 얻을 수 있습니다.

• 요소의 높이를 강제적으로 설정: 요소의 높이를 명확하게 설정하여 align-items 속성이 제대로 작동하도록 합니다.
• 세로 가운데 정렬: align-items: center;와 함께 사용하면 요소를 세로 방향으로 가운데 정렬할 수 있습니다.

왜 line-height: 100vh;를 사용하면 세로 정렬이 되는 걸까요?

1. 요소의 높이 확보: line-height: 100vh;를 설정하면 요소의 높이가 브라우저 창의 높이와 같아집니다. 이렇게 되면 align-items: center; 속성은 요소를 수직 중앙에 위치시킬 충분한 공간을 확보하게 됩니다.
2. 간단한 해결책: height 속성을 직접 설정하는 것보다 line-height 속성 하나만으로 간단하게 세로 정렬을 구현할 수 있습니다.

주의사항

• 브라우저 창 크기 변화: 브라우저 창 크기가 변할 때마다 요소의 높이도 함께 변하기 때문에 반응형 디자인을 고려해야 합니다.
• 컨텐츠 오버플로: 텍스트 내용이 너무 길어서 브라우저 창을 넘어갈 경우, 스크롤이나 클리핑 등의 문제가 발생할 수 있습니다.

결론

line-height: 100vh;는 display: flex;와 함께 사용하여 요소를 세로 가운데 정렬하는 간단하고 효과적인 방법입니다. 하지만 모든 상황에 적용할 수 있는 만능 해결책은 아니므로, 상황에 맞게 적절한 방법을 선택해야 합니다.

더 자세한 설명이 필요하시면 언제든지 질문해주세요.

예시 코드:

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 부모 요소의 높이를 100vh로 설정 */
}

.item {
  line-height: 100vh; /* 자식 요소의 line-height를 100vh로 설정 */
  text-align: center;
}

코드를 사용할 때는 주의가 필요합니다.

 

위 코드는 .container 클래스를 가진 요소와 .item 클래스를 가진 요소를 브라우저 창의 중앙에 배치하는 예시입니다.