본문 바로가기

Study Output for Myself/CSS

[CSS]너비와 높이지정단위 vmin / vmax

v는 viewport의 약자로 눈에 보이는 컨텐츠가 담긴 화면의 크기를 말한다.

✅vw (viewport width)

화면의 가로(너비)를 100vw라고 하고 90vw라고하면 화면의 너비의 90%만 차지하는 크기가 된다. 

css의 %(percentage)와 다른 점은 percentage는 부모요소에 대한 상대크기를 나타낸다면 vw는 화면크기에 대한 상대크기를 나타낸다.

✅vh (viewport height)

화면의 세로(높이)를 100vh라고 하면 45vh는 화면의 높이의 45%를 차지하는 크기가 된다. 

✅vmax (viewport max)

화면의 너비가 100px이고 높이가 200px이라고 하자. vmax는 더 큰 수를 따라간다. 그래서 100vmax는 200이 되고 10vamx는 20이 된다. 

✅vmin (viewport min)

vmax와 반대로 너비와 높이 중 작은 수에 의해 결정된다. 너비가 100px이고 높이고 200px이라면 100vmin은 100이 되고 50vmin은 50이 된다. 

'Study Output for Myself > CSS' 카테고리의 다른 글

[CSS]flexbox  (0) 2022.07.19
[CSS]Pseudo-classes(가상선택자) Pseudo-element(가상요소)  (0) 2022.06.28
[CSS] rem VS em VS pix  (0) 2022.06.01