CSS 함수 - min(), max()

많은 프로그래밍 언어에서 주어진 여러 값 중에서 최소값 또는 최대값을 반환하는 기능을 제공합니다. 예를 들어 파이썬(Python)은 min(), max() 내장 함수를 제공하고, 자바(Java)는 Math 클래스에서 min(), max() 정적 메서드를 제공합니다. 자바스크립트(JavaScript)에서도 마찬가지로 Math.min(), Math.max() 함수를 통해 같은 기능을 사용할 수 있습니다.

흥미롭게도 CSS에서도 동일한 기능을 하는 min()과 max() 함수가 존재하는데요. 이번 포스팅에서는 반응형 웹디자인을 할 때 유용하게 쓰이는 이 두 개의 CSS 함수에 대해서 알아보겠습니다.

min() 함수

min() CSS 함수는 2개 이상의 대소비교가 가능한 값이 주어졌을 때, 그 중에서 작은 값을 반환합니다. 예를 들어, min(100px, 200px)은 100px이 되고,min(50%, 30%)는 30%가 됩니다. 그런데 이렇게 동일한 단위의 값을 비교할 때는 어떤 값이 더 작은지는 뻔하기 떄문에 굳이 min() 함수를 쓸 이유는 없을 것입니다.

하지만 다른 단위의 값을 비교할 때, 특히 상대 단위와 절대 단위의 값을 비교할 때는 어떤 값이 작은지가 유동적인 경우가 생깁니다.

예를 들어, min(100px, 60%)를 생각해봅시다. 만약 부모 엘리먼트의 크기가 100px이라면 해당 엘리먼트의 크기는 부모의 60%인 60px이 되기 때문에, 60%가 더 작은 값으로 선택이 될 것입니다. 반면, 부모 엘리먼트의 크기가 그 두배인 200px이라면 자식 엘리먼트의 크기도 그 두배인 120px이 되기 때문에, 100px이 더 작은 값으로 선택이 될 것입니다.

따라서, min() 함수는 반응형 웹다지인에서 어떤 속성의 최대값을 설정하기 위해서 유용하게 사용할 수 있습니다. 즉, min() 함수를 사용하면 절대 값의 상한선을 두고 어떤 엘리먼트의 크기를 상대적으로 가져갈 수 있습니다.

max-width 대체

실전에서 min() 함수가 많이 사용되는 사례를 살펴보겠습니다.

웹페이지 레이아웃을 잡을 때 특정 영역을 너비를 상한선을 제한하기 위해서 max-width 속성을 많이 사용합니다.

width: 70%;
max-width: 1000px;

위와 같이 스타일을 하면, 해당 엘리먼트 너비는 기본적으로 부모 엘리먼트의 70%를 차지하되, 1000px가 넘을 경우, 더 이상 부모 엘리먼트에 비례하여 넓어지지 않고 1000px로 너비가 고정됩니다. 이 스타일 기법은 와이드나 고해상도 모니터에서 웹페이지가 좌우로 지나치게 넓어지는 것을 방지하기 위해서 많이 사용됩니다.

min() 함수를 사용하면 동일한 스타일을 단 한 줄로 작성할 수 있습니다.

width: min(70%, 1000px);

예제 코드

부모 엘리먼트의 50%의 너비를 차지하되, 최대로 500px 까지만 넓어지게 만드는 스타일을 article 엘리먼트에 적용해보았습니다.

max() 함수

max() 함수는 min() 함수와 정반대의 효과를 내기위해서 사용합니다. 즉, max() 함수를 사용하면 절대 값의 하한선을 두고 어떤 엘리먼트의 크기를 상대적으로 가져갈 수 있습니다.

개인적으로 max() 함수를 min() 함수처럼 자주 사용하는 것 같지는 않습니다. 반응형 웹디자인을 할 때 일반적으로 작은 화면을 우선해서 스타일하기 때문에 어떤 속성의 최소값을 설정할 일이 드물기 때문입니다.

마치면서

이상으로 CSS의 min(), max() 함수가 어떻게 동작하고 간단하게 사용 방법에 대해서 살펴보았습니다. 두 개의 CSS 함수에 대한 좀 더 자세한 내용은 아래 MDN 공식 문서를 참고바랍니다.

• MDN min()
• MDN max()