vw, vh

vw와 vh는 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다.

vw (viewport width) : 뷰포트의 폭에 근거하여 1vw는 width 의 1% 와 같다.

vh (viewportheight) : 뷰포트의 높이에 근거하여 1vh는 Height 1% 와 같다.

% 와 차이점은 ?

!https://pf-emoji-service--cdn.us-east-1.prod.public.atl-paas.net/standard/caa27a19-fc09-4452-b2b4-a301552fd69c/64x64/1f9d0.png

첫번째로는, vh 는 width 에서도 사용이 가능합니다.

width: 100% 와 width: 100vh 는 엄연히 다른 뜻이다.

마찬가지로 vw 도 height에서 사용이 가능합니다.

두번째로는

vh 와 vw 는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환합니다.

반면에 % 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환합니다.

또한, 그냥 전체 화면의 %를 쓴다 하더라도 스크롤 바를 포함하지 않은 현재 화면 길이만을 반환하죠.

---

반응형 브레이크 포인트 잡는방법

@media screen and (max-width: 480px) {
/** 모바일 세로 */
}

@media screen and (max-width: 768px) {
/** 모바일 가로, 타블렛 세로 */
}

@media screen and (max-width: 1024px) {
/** 타블렛 가로, 노트북 */
}

@media screen and (max-width: 1280px) {
/** 타블렛 가로, 노트북 */
}

@media screen and (min-width: 1281px) {
/** 데스크탑 */
}

Statcounter /웹과 관련된 각종 통계를 내주는 사이트

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share