CntanzModel

Date

20211117

Target

C_005

Title

CSS단위 VH와 VW, VERTICAL HEIGHT, VERTICAL WIDTH / https://webclub.tistory.com/356

Contents

vh & vw (vertical height & vertical width) 반응형 웹디자인 테크닉은 퍼센트 값에 상당히 의존하고 있습니다. 하지만 CSS의 퍼센트 값이 모든 문제를 해결할 좋은 방법은 아닙니다. CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받습니다. 만약 타켓 요소의 너비값과 높이값을 뷰포트의 너비값과 높이값에 맞게 사용할 수 있다면 어떨까요? 바로 vh와 vw 단위가 그런 의도에 맞는 단위이고 vh 요소는 높이값의 100분의 1의 단위입니다. 예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 되지요. 그와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다. 이 규칙에는 무궁무진한 사용방법이 있습니다. 예를 들면, 최대 높이값이나 그의 유사한 높이값의 슬라이드를 제작할때 아주 간단한 CSS만 입력하면 됩니다. CSS .slide { height: 100vh; } 스크린의 너비값에 꽉 차는 헤드라인을 만든다고 가정해 봅니다. vw로 폰트 사이즈를 지정하면 쉽게 달성할 수 있습니다. 해당 사이즈는 브라우저의 너비에 맞춰 변할 것입니다. (브라우저 크기를 늘였다 줄였다 해보세요) 출처: https://webclub.tistory.com/356 [Web Club]