vh, vw 그리고 %
본문
다른 분들 코딩한 것 보고 알게 된 단위인데요.
평소에 %로 쓰는데
vh, vw의 사용의 차이점과 %와 비교했을 때 무엇인가요?
그리고 vh, vw, % 그리고 em으로 코딩했을 때의 차이도 무엇인가요?
답변 2
실제 장치 화면 크기를 위해 사용하는 거에요.
100% 퍼센트 단위는 부모 요소의 값을 퍼센트로 표시하는 것으로 알고 있어요.
그래서 body에 div를 만들어서 height: 100%를 입력하면 스크린 크기 만큼 표시되지 않죠.
물론 html, body에 height 값을 주면 되긴 합니다. 하지만 모바일, 태블릿 기기의 주소 탐색바와 도구 모음이 생겼다 사라지면서 실제 크기와 맞지 않는 경우가 생기기도 하고요.
vh, vw 윈도우 실제 창 크기를 값으로 주는거에요.
http://graykick.tistory.com/8
https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573
자세한 설명은 위링크에..
%는 부모요소의 width, height값에 영향을 받습니다. 하지만 vh와 vw는 뷰포트에 영향을 받기 때문에 브라우져(모바일 디바이스) 전체 크기를 기준으로 적용됩니다.
답변을 작성하시기 전에 로그인 해주세요.
