인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

lzvckaya님의 프로필 이미지
lzvckaya

작성한 질문수

인터랙티브 웹 개발 제대로 시작하기

CSS 3D 1

vh,vw 와 %의 차이가 궁금합니다

작성

·

1.1K

0

80vw 80% 가 다른게 뭔가요?

답변 2

3

1분코딩님의 프로필 이미지
1분코딩
지식공유자

고란끝에 낙이온다님께서 잘 말씀해 주셨네요~
100%는 자신의 부모 요소의 width가 기준이고
100vw는 브라우저 창의 width가 기준입니다.

.mom { width: 500px; }
.son { width: 100%; }

<div class="mom">
    <div class="son"></div>
</div>

이런 경우라면 .son의 width 100%는 500px이 되겠지요~

2

vw,vh는 화면 전체 넓이이고

%는 부모의 범위안에서의 비율정도입니다.

만약 화면 넓이가 1920px이고 부모가 200px이면

100vw는 1920px이고

100%면 200px입니다.

상속받을게 딱히 없으면 body나 html의 100%니까 100vw랑 같아지죠

lzvckaya님의 프로필 이미지
lzvckaya

작성한 질문수

질문하기