철이 없었죠 ... 천지구분도 못하고 width/height에 %를 냅다 박아넣었던게 ...
vh/vw
(v = 뷰포트를 기준으로 하겠쉐이)
Viewport Height / Viewport Width → 뷰포트를 기준으로 한 높이와 너비
그래서 뷰포트가 뭔데?
"보여지는 영역"
즉,
보여지는 영역에서 얼마만큼을 차지할 것인지를 지정하는 단위이다!
1vw = 뷰포트 너비의 1%
800px 너비인 뷰포트의 1vw값은? 8px! 그런데 만약에 사용자가 브라우저를 잡고 늘리거나 줄여서 뷰포트 너비의 길이가 변화가 됐다면 이 똑똑한(그러나 가끔 나를 킹받게하는..)브라우저가 알아서 1vw의 값을 재설정해준다.
그러니까 요 속성 하나만 써도 브라우저가 알아서 크기에 반응해서 바꿔준다.
1vh도 동일! 뷰포트 높이의 1%를 차지한다
vmin / vmax
vw와 vh 중 더 작거나 큰 것을 찾아 적용하는 속성
vmin = 더 작은거 적용
vmax = 더 큰 것 적용
얘네를 잘 활용하면 "언제든 화면에 보이는 요소" & "언제든 화면은 꽉 채우는 요소" 를 만들 수 있다!
For ex)
vh만을 쓸 때 뷰포트의 너비를 좁히면? vw만을 쓸 때 뷰포트의 높이를 좁히면? => 화면이 잘려버리기 때문에 유저 친화적이라고는 볼 수 없다😩
그렇지만 vmin을 사용하면 너비나 높이 중 더 작은 값을 택하기 때문에 어떤게 바뀌어도 상관없이 화면에 띄울 수 있다.
%랑 그래서 뭐가 다른데?
그래서 100%와 100vh의 차이점이 뭔디.
vh는 width에서도 사용이 가능하다는 점!!!
vh/vw는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환!
%는 창을 중심으로 하는게 아니라 %를 쓰고 있는 부모요소의 길이에 맞게 반환!(스크롤 바 미포함한 현재 화면 길이만을 반환)
ref
반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성
프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히
nykim.work
'html, css' 카테고리의 다른 글
| Semantic Web, Semantic Tag (2) | 2021.05.25 |
|---|---|
| 쓸모없는 공백 지우는 법 (0) | 2021.05.25 |