모바일 환경에서의 vh

문제인식 프로젝트 진행 중 전체화면을 만들기 위해 100vh를 사용했다. PC환경에서 테스트 할 때에는 문제가 없었지만, 실제 모바일 기기에서 브라우저로 접속 후 확인했더니 세로 스크롤이 생기는 버그가 있었다. vh는 viewport height에 해당하는 단위로, 해당 브라우저의 높이에 따라 상대적으로 적용되는 단위다. 예를 들어, 화면의 높이가 100px이라면 1vh는 1px이 된다. 원인 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간(이 영역은 스크롤 방향에 따라 가변적)을 포함하기 때문이었다. 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간을 포함한다. URL바는 상황에 따라 보여지거나 없어지는 경우가 있는데, 100vh는 그에 따라 다시 측정되지 않는다. 해결 모바일 ..

2022.11.17

단위 em, rem, vw, vh, vmin, vmax

CSS3 에서 새롭게 추가 된 단위 vw, vh 등을 이용하여 좀 더 쉽게 반응형 사이트를 만들 수 있다. 단위 설명 em 부모의 font-size를 상속받음 rem html의 font-size를 상속받음 vw 브라우저 너비의 %, 1vw = 1% vh 브라우저 높이의 %, 1vh = 1% vmin 브라우저 너비와 높이 중 작은쪽의 % vmax 브라우저 너비와 높이 중 큰쪽의 %

2022.01.12