CSS의 뷰포트 단위

지난 몇 년 동안 반응형 디자인은 웹 디자인 커뮤니티에서 상당히 뜨거운 주제가 되었습니다. 반응형 디자인을 더 빠르게 구축하는 데 도움이 되는 다양한 프레임워크가 있습니다. 그 방법 중 하나는 반응형 디자인의 일부 측면을 자동화하는 데 도움이 되는 CSS3 속성인 Viewport percentage units 또는 줄여서 "Viewport Units"를 사용하는 것입니다.

뷰포트 단위를 사용하면 특정 요소의 크기가 브라우저의 다양한 크기에 맞게 조정될 수 있습니다.

픽셀, 전각 또는 백분율 값 대신 다음 설정을 사용할 수 있습니다.

vw: 브라우저 너비의 백분율

vh: 브라우저 높이의 백분율

vmin: 브라우저 높이 또는 너비의 최소 비율, 둘 중 가장 작은 값

vmax: 브라우저 높이 또는 너비의 최대 백분율, 둘 중 가장 작은 값

너비, 높이, 여백, 글꼴 크기 등과 같은 px 값을 허용하는 모든 CSS 속성에서 이러한 단위를 사용할 수 있습니다. 이 단위는 창 크기 조정 또는 장치 회전 시 브라우저에 의해 다시 계산됩니다.

장점에 대한 개요를 살펴보겠습니다.

페이지의 전체 높이

전통적으로 컨테이너의 전체 높이를 화면에 맞추기 위해 height:100%를 사용했습니다. vh를 사용하여 더 적은 코드로 동일한 결과를 얻을 수 있습니다. 이렇게 하면 이미지를 사용자 화면 높이에 맞게 조정할 수 있습니다. View demo in codepen . 차이점을 확인하려면 Codepen 데모에서 100vh를 100%로 바꾸십시오.

.image-container {
  height: 100vh;
  width: auto;
}

요소를 화면보다 짧게 유지

이 기술은 뷰포트 크기를 기준으로 요소의 높이를 명시적으로 제어하여 항상 뷰에 남아 있게 하려는 경우에 유용할 수 있습니다. View demo in codepen

텍스트 크기 조정(반응형 텍스트)

이 기술을 사용하면 개발자에게 글꼴 크기를 조정할 때 뛰어난 유연성을 제공하고 뷰포트 크기에 따라 동적으로 크기를 조정할 수 있습니다. 쉬운 연습을 위해 루트 요소에 기본 글꼴 크기를 배치한 다음 루트 요소의 글꼴 크기에 뷰포트 단위를 사용하고 이에 따라 크기를 조정합니다.

Media queries은 vw units와 잘 결합되어 다양한 화면 크기에서 가독성을 보장합니다. View demo in codepen . 기본 글꼴 크기(html) 값을 변경해 보십시오.

html {
  font-size: 20px;
}

h1 {
  font-size: calc(100% + 5vw); 
}

컨테이너에서 깨기

뷰포트 단위를 사용하면 포함하는 요소 외부에서 중단할 수 있습니다. CMS가 HTML 템플릿에서 마크업을 변경하기 어렵거나 불가능하게 만드는 시나리오에서 뷰포트 단위를 사용하면 마크업에 관계없이 원하는 결과를 얻을 수 있습니다. 이 기술은 모든 시나리오에서 작동하지 않지만 경우에 따라 유용한 트릭입니다.
View demo in codepen

.container {
  max-width: 1024px;
  margin: 0 auto;
}

.breakout { 
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw; 
}

보시다시피 모든 주요 웹 브라우저에서 뷰포트 단위에 대한 견고한 지원이 있습니다. 하지만 몇 가지 버그가 발생할 수 있습니다. 디자인에 최신 기술을 구현하기 전에 항상 확인하는 것이 좋습니다caniuse.

결론

여기까지 오셔서 이미 Viewport Units를 사랑하셨기를 바랍니다. 그리고 개인적으로 뷰포트 단위는 다양한 장치에 가장 적합하다고 말할 수 있습니다. 나는 당신이 당신의 프로젝트에서 그것을 시도하고, 탐험하고, 즐길 것을 제안합니다!

이 블로그가 매우 도움이 되었기를 바랍니다. 자유롭게 생각과 의견을 공유하고 문제나 질문이 있으면 의견을 남겨주세요.

계속 해킹하세요!! 건배