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 |