CSS의 min() 함수를 활용하면 미디어 쿼리 없이도 웹 페이지에 반응형 로고를 손쉽게 구현할 수 있습니다. min() 함수는 여러 값 중 가장 작은 값을 선택하여 CSS 속성에 적용해 주는 함수로, 이를 통해 화면 크기에 따라 자동으로 조절되는 유연한 스타일을 만들 수 있습니다.
기본 문법
CSS min() 함수의 기본 문법은 다음과 같습니다.
Selector {
attribute: min(/*값1*/, /*값2*/);
}min() 함수 안에 두 개 이상의 값을 쉼표로 구분하여 넣으면, 브라우저가 계산된 값 중 가장 작은 값을 자동으로 선택해 적용합니다. 예를 들어 뷰포트 단위(vw)와 고정 픽셀(px) 값을 함께 사용하면, 화면이 작을 때는 상대적으로 줄어들고 화면이 아무리 커져도 최대 크기를 넘지 않게 됩니다.
예제 1: 세로 크기 조절 반응형 로고
다음 예제는 min() 함수를 사용해 이미지 로고의 높이를 반응형으로 지정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
height: min(40vw, 384px);
margin: 3%;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1610672777263-9bab3d7947f0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=384&ixlib=rb-1.2.1&q=80&w=384" alt="bride-logo" />
<h3>Responsive LOGO!</h3>
<p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est, sit amet aliquam justo metus eu est. Praesent eleifend sodales orci, vel ornare sapien porta id. Pellentesque ipsum sem, aliquam vitae venenatis quis, lobortis vitae est. Proin a semper lectus. Nam rhoncus ipsum quis nisl porta pretium. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
<p>
Vivamus quis velit diam. Curabitur tempus diam nec enim tincidunt posuere. Nulla nec nunc in dui aliquam congue. Nulla commodo tincidunt iaculis. Nulla egestas odio et arcu elementum euismod.
</p>
</div>
</body>
</html>위 코드에서 height: min(40vw, 384px)는 뷰포트 너비의 40%와 384px 중 더 작은 값을 이미지 높이로 적용합니다. 따라서 화면이 좁아지면 로고도 함께 작아지고, 화면이 커져도 384px를 초과하지 않습니다.
이 코드는 다음과 같은 결과를 출력합니다.
예제 2: 가로 크기 조절 반응형 로고
이번에는 width 속성에 min() 함수를 적용하여 로고의 너비를 반응형으로 만드는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
float: left;
box-shadow: inset 0 0 22px green;
}
img {
width: min(45vw, 512px);
margin: 3%;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1611589694870-377ee3903be0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=512&ixlib=rb-1.2.1&q=80&w=512" alt="home" />
</div>
<h3>Another Responsive LOGO!</h3>
<p>Donec consectetur, magna nec rhoncus sodales, erat dui suscipit est, sit amet aliquam justo metus eu est. Fusce pharetra sem in tortor aliquet fermentum. Ut facilisis luctus ipsum eu mattis.</p>
</body>
</html>여기서 width: min(45vw, 512px)는 뷰포트 너비의 45%와 512px 중 작은 값을 선택합니다. 덕분에 별도의 미디어 쿼리를 작성하지 않고도 모바일부터 데스크톱까지 자연스럽게 대응하는 반응형 로고를 완성할 수 있습니다.
이 코드는 다음과 같은 결과를 출력합니다.
정리
min() 함수는 미디어 쿼리를 복잡하게 작성하지 않고도 한 줄의 CSS만으로 반응형 디자인을 구현할 수 있는 강력한 도구입니다. 특히 로고나 배너처럼 일정 크기를 넘지 않아야 하는 요소에 vw 같은 상대 단위와 px 같은 절대 단위를 함께 지정하면, 어떤 화면 크기에서도 적절한 비율을 유지하는 반응형 레이아웃을 간단히 만들 수 있습니다.