[CSS] height과 min-height 똑같아 보이는데 무슨 차이지?

요소를 가운데 정렬하기 위해서는 flex를 쓰고 align-items와 justfy-content는 가운데 정렬이 되게 한다는걸 알고 있다. 

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

 

 

그런데 min-height : 100vh;를 적용했더니 화면을 기준으로 정가운데 정렬이 되었다.🤔

여기서 헷갈리는 점은 height : 100vh;와 min-height : 100vh;의 결과가 같아 보인다는 점이다. 

 

이유는 min-height은 말 그대로 "최소 높이"라는 뜻인데
만약 값으로 min-height 100vh를 준다면 뷰포트 높이 100%가 최소값이 된다. 즉 요소의 최소높이는 뷰포트의 전체높이로 고정이 된다는것이다.

 

쉽게 이해하자면 vh는 퍼센트 같은 개념이라고 생각하면된다.

 

+)  만약 50vh는 어떻게 정렬될까?

 

height : 기본 요소가 가지는 높이 값으로 단위에 따라 화면에서 보여지는 높이가 달라질 수 있다.

• 가변 단위 : vh, vw, % 이 세 개는 퍼센트 개념, 뷰포트가 변하면 값도 변한다. 
• 고정 단위 : px 은 뷰포트가 변해도 값이 변하지 않는다. 

 

만약 height가 고정값(px)이면 height 값이 "자동으로 줄어들지 않는" min-height 개념이 된다. 
height가 가변값(%, vh)일 경우 뷰포트가 줄어들 때 min-height가 적용된 요소의 최소로 줄어들 수 있는 높이값이 된다. (단, 둘다 가변값일 경우 적용 되지 않는다.)

 

알게 된 것

1. min-height를 사용하려면 height값이 고정값이 아니어야 한다. 

만약 height값이 고정값이라면 min-height이 되어도 이미 정해진 height의 고정값이 그대로 유지된다. 

2. 둘 다 고정값일 때 min-height와 height가 동시에 적용될 경우 둘 중 큰 값이 우선 적용된다. 

 

가변 단위를 왜 써야하는지 min-height의 의미를 잘 몰랐었는데 둘의 차이와 사용방법이 정리 됐다.