테스트 사이트 - 개발 중인 베타 버전입니다

vh, vw 그리고 % 채택완료

MelissaMinJeongKim 7년 전 조회 3,873

다른 분들 코딩한 것 보고 알게 된 단위인데요.

평소에 %로 쓰는데

vh, vw의 사용의 차이점과 %와 비교했을 때 무엇인가요?

그리고 vh, vw, % 그리고 em으로 코딩했을 때의 차이도 무엇인가요?

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
lavy
7년 전

실제 장치 화면 크기를 위해 사용하는 거에요. 100% 퍼센트 단위는 부모 요소의 값을 퍼센트로 표시하는 것으로 알고 있어요. 그래서 body에 div를 만들어서 height: 100%를 입력하면 스크린 크기 만큼 표시되지 않죠. 물론 html, body에 height 값을 주면 되긴 합니다. 하지만 모바일, 태블릿 기기의 주소 탐색바와 도구 모음이 생겼다 사라지면서 실제 크기와 맞지 않는 경우가 생기기도 하고요. vh, vw 윈도우 실제 창 크기를 값으로 주는거에요.

 

http://graykick.tistory.com/8" target="_blank">http://graykick.tistory.com/8 https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573" target="_blank">https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573 자세한 설명은 위링크에..

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

P
7년 전

%는 부모요소의 width, height값에 영향을 받습니다. 하지만 vh와 vw는 뷰포트에 영향을 받기 때문에 브라우져(모바일 디바이스) 전체 크기를 기준으로 적용됩니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인