CSS 레이아웃 레퍼런스 코드를 보니
min-height: 100vh가 눈에 띄인다.
CSS를 구현할 때 흔히 디스플레이
화면 사이즈에 맞게 구현하는 경우가 많다고 한다.
vw 나 vh를 사용한다.(vh & vw (vertical height & vertical width)
vw는 스크린 너비의 1%
vh는 스크린 높이의 1%를 표시하는 거다.
그래서 min-heigth: 100vh는
현재 스크린의 화면의 100%에 CSS레이아웃을 꽉 채운다는 의미다.
특히 요츰처럼 다양한 사이즈의 기기를 사용하는 경우
반응형 웹으로 웹페이지를 많이 만들기 때문에
자주 사용된다.
예를 들어 브라우저의 높이 값이 900px면
1vh는 9px가 된다.
이외에도 너비나 길이를 나타내는
CSS unit은 아래의 사이트를 참조한다.
https://webclub.tistory.com/356
CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch
CSS Unit (CSS 7가지 단위) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단할 수 있지만 새로운 문제에 봉착하게 되면 해결하기 어려울 수 있습니다. 웹은 항상 성장,변화하고 있고 새로운
webclub.tistory.com
추가로 모바일에서 100vh를 사용했지만
header의 url 부분과 bottom의 네비게이션 영역까지
포함되어서 모바일로 보았을 때 스크롤이 생겨버린 문제를
해결하는 것도 체크!!
02. 모바일 100vh 스크롤 문제 해결하기
문제발견 모바일 화면에서 전체화면을 만들기 위해 100vw, 100vh로 설정을 했다. 브라우저에서 확인 하면 이상이 없지만, 실제 모바일 브라우저에서는 스크롤이 생기는 현상이 발견되었다...! vw와 v
blog.leehov.in
'CSS' 카테고리의 다른 글
| (CSS) 레이아웃 종류(Float, Flexbox, Grid) (0) | 2021.09.02 |
|---|---|
| (CSS) font-size: 62.5%, 왜 기본 페이지의 글꼴을 이렇게 정의할까? (0) | 2021.09.02 |
| (CSS) @media (엣 미디어) (0) | 2021.09.02 |
| (CSS) background 와 background-color의 차이 (0) | 2021.08.09 |
| CSS - <div> ,<span> 태그 (0) | 2021.07.19 |
