CSS vmin 단위란 무엇인가?
vmin은 CSS에서 제공하는 뷰포트 상대 단위 중 하나입니다. vmin은 뷰포트(브라우저 화면)의 너비와 높이 중 더 작은 값을 기준으로 하며, 1vmin은 그 작은 값의 1%에 해당합니다.
예를 들어, 브라우저 창의 너비가 800px이고 높이가 600px이라면, 1vmin은 6px(600px의 1%)가 됩니다. 이러한 특성 덕분에 vmin을 사용하면 화면 크기에 관계없이 요소가 항상 적절한 비율로 표시되어 반응형 웹 디자인에 매우 유용합니다.
vmin으로 글꼴 크기 설정하기
다음 예제 코드는 font-size 속성에 vmin 단위를 적용하여 글꼴 크기를 설정하는 방법을 보여줍니다.
<html>
<head>
</head>
<body>
<div style="position:relative; left:90px; top:3px; background-color:yellow; font-size:4vmin;">
This div has relative positioning.
</div>
</body>
</html>
코드 설명
- font-size: 4vmin — 뷰포트의 짧은 쪽 길이의 4%를 글꼴 크기로 지정합니다. 화면이 줄어들거나 늘어나면 글자 크기도 자동으로 조절됩니다.
- position:relative — 요소를 상대 위치로 배치하여 원래 위치를 기준으로 이동시킵니다.
- left:90px; top:3px — 원래 위치에서 오른쪽으로 90px, 아래로 3px만큼 요소를 이동합니다.
- background-color:yellow — div 영역을 노란색 배경으로 채워 시각적으로 구분하기 쉽게 합니다.
vmin 사용의 장점
vmin을 활용하면 모바일 기기처럼 세로로 긴 화면이나 데스크톱처럼 가로로 넓은 화면 모두에서 텍스트가 균형 있게 표시됩니다. 미디어 쿼리 없이도 자연스러운 반응형 타이포그래피를 구현할 수 있다는 점이 가장 큰 장점입니다.