본문 바로가기

개발자 메론빵

검색하기
개발자 메론빵
프로필사진 ddiae

웹/앱 개발 및 수업합니다! 문의는 visveryver2@gmail.com


  • 분류 전체보기 (18)
    • FrontEnd (2)
    • React (5)
    • JavaScript (0)
    • TypeScript (2)
    • WebRTC (4)
    • CSS (1)
    • Dev (2)
    • 수업 (2)
Guestbook
Recent Posts
Tags
  • svh
  • MSW
  • queryoptions
  • dvh
  • readonly
  • vh
  • type-challenges-easy
  • Typescript
  • react-hook
  • tanstack-router
  • type-challenges
  • useTransition
  • websocket
  • webrtc
  • queryfactory
  • Viewport
  • startTransition
  • LVH
  • mutationoptions
  • SDP
  • tanstack-query
  • HTTP
  • Vite
  • msw2.0
  • webrtc #ice #stun #turn
  • React
  • fsd-architecture
  • mock-service-worker
  • fsd
  • Mapped type
more
Archives
Today
Total
관리 메뉴
  • 글쓰기
  • 방명록
  • RSS
  • 관리

목록Viewport (1)

개발자 메론빵

뷰포트 단위 알아보기 (vh, dvh, svh, lvh)

💬 반응형 웹을 개발하면서 height를 100vh로 설정하는 경우 일부 화면이 모바일 브라우저 내 상단바 혹은 하단바에 의해 가려지는 문제가 있었다. vh(viewport)는 상하단바를 제외한 영역을 기준으로 한다. 따라서 다음과 같은 viewport 단위를 적절하게 사용해주어야 한다.📌vh (Viewport Height)vh는 스크린의 height를 기준으로 하여 백분위로 높이를 나타낸다. 예를들어 스크린 height가 800px인 경우 1vh는 8px이 되는 것이다. 모바일에서는 상하단바 유무와 상관없이 일정한 크기로 동작하는 정적 viewport 단위이다.📌dvh (Dynamic Viewport Height)dvh는 동적 viewport height를 기준으로 하여 백분위로 높이를 나타낸다...

CSS 2024. 10. 30. 11:35
이전 Prev 1 Next 다음

Blog is powered by AXZ / Designed by Tistory

티스토리툴바