[CSS] vw, vh, vmax, vmin, rem, em, max-width, min-width 차이

 

vw, vh, vmax, vmin, rem, em, max-width, min-width 차이

쓸때마다 그냥 어렴풋이 알고 있는 지식으로 감 아닌 감으로 사용해서 아예 제대로 정리해볼 시간을 가졌다.

 

---

 

vw & vh

 

vw

브라우저 너비 값이 100px일때 1vw는 1px이다. (100분의 1)
퍼센트(%)로 계산할때 이해가 더 쉽다.
ex) viewport의 너비가 1000px이고 컨텐츠 요소가 80vw라면 1000px의 viewport에서 80%를 차지한다는 뜻이고 즉 요소의 너비는 800px이다.

 

vh

브라우저 높이 값이 100px일때 1vh는 1px이다. (100분의 1)
vw와 동일하게,
ex) viewport의 높이가 1000px이고 컨텐츠 요소가 80vh라면 1000px의 viewport에서 80%를 차지한다는 뜻이고 즉 요소의 높이는 800px이다.

width에 vh를, height에 vw를 쓸 수 있다.
퍼센트(%)는 부모 기준으로 사이즈가 변동되는 것과 달리, vw & vh는 브라우저 화면 전체를 기준으로 사이즈가 변동된다.
스크롤바를 포함한 화면의 전체 길이를 반환한다.

 

---

 

vmax & vmin

viewport의 최대 너비, 최소 너비
vw, vh와 비슷한듯 하지만 은근히(?) 다르다.
viewport가 어떻든 화면을 꽉 차게 해준다. (해당 요소의 스크린 사이즈가 어떻든 간에 화면에 꼭 보이도록)

 

vmax

브라우저의 너비와 높이를 비교 후 더 큰 값 선택
ex) width: 50vmax => 브라우저의 너비와 높이 사이즈에서 가장 작은 사이즈의 50% 차지

 

vmin

브라우저의 너비와 높이를 비교 후 더 작은 값 선택
ex) width: 50vmin => 브라우저의 너비와 높이 사이즈에서 가장 큰 사이즈의 50% 차지

 

ex)

See the Pen Untitled by Kang HeeWon (@kh2wone) on CodePen.

 

위의 코드를 참고해서 계속 적용해보면서 익혀보아도 좋다.

추가로 예를 들면 1000px * 500px의 viewport가 있다고 하자.
vmin은 둘 중에 작은 것(500px => 500/100 = 5px), vmax는 둘 중에 큰 것(1000px => 1000/100 = 10px)을 선택할 것이다.
그럼 1vmin = 5px, 1vmax = 10px이다.

viewport 사이즈의 너비와 높이에 따라 사이즈를 비교해서 둘 중에 가장 큰 값 혹은 가장 작은 값을 통해 알아서 적용한다는 것을 알아두자.

 

---

 

rem

r은 root라는 뜻으로 최상위 요소의 사이즈에 영향을 받는다.

예를 들어서 최상위 요소의 font-size가 16px이라면 특정 요소의 1rem은 16px이다.

 

em

em은 부모 요소의 사이즈에 영향을 받는다.

예를 들어서 부모 요소의 font-size가 14px이라면 특정 요소의 1em은 14px이 된다.

 

---

 

➕max-width & min-width 차이를 알고 싶다면?

TIL 211115 :: CSS max-width&min-width 차이, 뉴모피즘 CSS 사이트

 

---

 

참고하면 좋은 사이트

• https://nykim.work/85