디블리셔에서 프론트엔드가 되어가는 불쌍한 IT땔감

width vw, height vh는 함부로 쓰지 않는게 좋겠다. 본문

IT/HTML5, CSS3

width vw, height vh는 함부로 쓰지 않는게 좋겠다.

lilnagi 2020. 11. 20. 14:20

퍼블리싱중인 모바일 웹의 구조

 

현재 어느 모바일 웹 퍼블리싱을 작업중에 있는데, 한가지 새로이 알게 된 이슈가 있어 기록.

 

전체 wrap을 주고 그 안에서 <header>와 <footer>, 그리고 컨텐츠 내용이 들어갈 <section>을 구성했다.

<header>와 <footer>는 position: fixed로 고정 포지션을 주었다.

즉, wrap의 width를 100vw, height를 100vh로 설정하면 간단하게 디바이스의 가로 세로로 꽉 차는

모바일 페이지를 만들 수 있는 것이다.

 

그런데, 크롬에서는 괜찮았는데 iOS의 사파리에서 확인해 보니,

<section> 영역에서 생각지도 못하게 세로 스크롤이 생기는 것이다. 

<section>에 height를 주지도 않았는데도...

 

이걸로 한 1시간을 헤멘 것 같은데, 답을 찾고 나니 의외로 간단했다.

<html>과 <body>에서 width: 100%와 height: 100%를 주고 자식요소인 <wrap>에도 동일하게 width: 100%, height: 100%를 주니 해결.

 

react native 할때는 vw와 vh를 상당히 많이 썼던 것 같은데... (그 앱 괜찮은걸까 'ㅅ';;... 나중에 확인해보자.)

앞으론 vw와 vh를 너무 남발하지 않기로 결정.

 

 

※ 깨알Tip

vw : viewport (뷰포트) 가로 100분의 1

vh : viewport (뷰포트) 세로 100분의 1

(비슷한 걸로 최소값 최대값을 지정할 수 있는 vmin, vmax도 있다.)

 

이것들이 %와 다른 점은, vw나 vh는 무조건 브라우져 창의 가로 세로값을 가져오는 반면, %는 부모의 속성에 영향을 받는다는 것이다. 예를 들어, <section>의 height를 50vh로 설정했다고 가정한 뒤, <section> 내에 임의의 <div>를 만들고

<div>의 height를 100vh를 준다고 하면, 실제로 <div>의 height는 50vh가 될까? 100vh가 될까?

100vh가 된다. 부모 그런거 없음.

Comments