CSS 뷰포트 단위 vmin 및 vmax를 사용하여 화면 크기에 따라 행 높이를 조정하는 팁

CSS 뷰포트 단위인 vmin과 vmax를 사용하여 화면 크기에 따라 줄 높이를 조정하는 기술을 구현합니다.

요즘 모바일 기기의 보급률이 점점 높아지고 있어 사용자 경험을 향상시키기 위해 웹 디자인을 합니다. 반응성이 좋은 레이아웃이 필요합니다. 반응형 디자인을 할 때 흔히 접하게 되는 문제는 화면 크기에 따라 행 높이를 어떻게 조정하느냐 하는 것입니다. 다행스럽게도 CSS 뷰포트 단위 vmin 및 vmax가 이 목표를 달성하는 데 도움이 될 수 있습니다.

vmin 및 vmax 단위는 각각 뷰포트 너비 또는 높이를 기준으로 계산된 길이 단위 집합을 지정합니다. vmin은 뷰포트 너비와 높이 중 더 작은 길이 값을 지정합니다. vmax는 뷰포트 너비와 높이 중 더 큰 것을 참조하는 길이 값을 지정합니다.

여러 줄의 텍스트가 포함된 페이지가 있다고 가정해 보겠습니다. 뷰포트 너비나 높이가 변경되면 텍스트 줄 높이가 자동으로 조정됩니다. 다음은 구현 단계와 해당 코드 예제입니다.

먼저 기본 값을 설정해야 합니다. 뷰포트의 너비 또는 높이가 100vmin이면 행 높이가 1vmin으로 설정됩니다. 이러한 방식으로 뷰포트의 너비 또는 높이가 100vmin보다 작거나 같을 때 행 높이가 뷰포트의 너비 또는 높이를 초과하지 않도록 할 수 있습니다.

html, body {
height: 100%;
margin: 0;
padding: 0;
}

.container {
height: 100vh / 컨테이너 높이를 뷰포트 높이로 설정/
}

.text {
글꼴 크기: 1.5rem;
line-height: 1vmin; / 줄 높이를 1vmin으로 설정 /
}

다음으로 컨테이너에 여러 줄의 텍스트를 포함하고 높이를 설정할 수 있습니다. 컨테이너 텍스트가 컨테이너를 완전히 채울 수 있도록 뷰포트 높이를 설정합니다. 동시에 텍스트의 가독성을 보장하기 위해 텍스트의 글꼴 크기를 1.5rem으로 설정했습니다.