vw, vh의 크기에 대하여
281
작성한 질문수 11
안녕하세요!!
이전부터 css를 다루면서 사소한 궁금증이 생겼는데요,
100vw와 100vh라고 크기를 적어주면 브라우저 폭과 높이가 되어야 하는 것으로 알고 있습니다.
그런데 실제로 적용해보면 스크롤바가 생기고 실제 브라우저보다 조금씩 크게 되더라고요.
혹시 왜 이런 현상이 발생하는지 알려주실 수 있나요?
강의 정말 재밌게 잘 듣고 있습니다!! 좋은 강의 만들어 주셔서 감사합니다! :)
답변 1
1
브라우저나 운영체제에 따라, v 단위가 스크롤바 또는 주소창, 하단 메뉴 등을 포함하는 경우가 있더라고요.
그래서 브라우저에 따라 조금씩 다르게 처리해주거나, 100vh 대신 100%를 사용하시면 됩니다.
100%를 사용할 경우는, 부모 요소의 크기가 브라우저 크기만큼 차지하고 있는지를 확인해주셔야 하고요~
자식 요소가 position: absolute; 일 때는 부모 요소의 크기를 고려 안해도 되지만, 혹시 부모에 position: relative 등 static 외의 값이 설정된 경우에는 자식 요소가 absolute인 경우에도 부모의 크기를 확인해주셔야 한답니다.
왼쪽/오른쪽 동작시 딜레이 문제
0
109
1
변수 범위 관련 질문
0
119
1
perspective 문의
0
113
1
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
0
165
1
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
0
131
1
animation이벤트 질문이요!
0
79
1
resize handler에서 질문이 있습니다.
0
120
1
카드 뒤집힐 때 F가 보인 이유
0
158
1
3d 뒤집기 추가효과
0
225
1
전진! 3D 스크롤 21 강의 질문
1
176
1
eventlistener 질문
0
157
1
zMove 를 1000으로 설정하는 이유에 대하여.
0
178
1
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
1
203
1
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
0
278
1
rotateY()에서 deg에 따른 차이
0
205
1
코드 작성 순서
0
282
1
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
1
401
1
'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
0
284
2
섹션5 자바스크립트 이벤트 다루기 질문
1
260
1
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
0
432
2
css 는 직접 작성을 해야하는걸까용?
0
331
1
translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?
0
365
2
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
0
312
2
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
0
313
2