CSS max() 함수형 표기법

`max()`

max()은 CSS 속성 값을 지정할 때 사용하며, 괄호 안의 하나 이상의 쉼표(,)로 구분된 값들을 비교해서 그중 가장 큰(maximum) 하나의 값만을 나타내는 비교 함수형 표기법입니다.

길이, 각도, 시간, 백분률, 숫자 등을 값으로 사용할 수 있는 속성의 값에서 사용할 수 있습니다.

예를 들어, width: max(50%, 100px)은 50%와 100px 중에서 가장 큰 값을 요소의 너비로 지정합니다.

코드 부연설명
width 속성은 요소의 너비, 즉 가로 크기를 지정합니다.

이처럼 max()는 CSS 속성 값을 지정할 때 괄호 안의 목록 중 가장 큰 값을 나타내는 함수형 표기법입니다.

데모

다음의 CSS 데모로 max()의 사용 방법을 확인해 보세요.

형식 구문

max()은 괄호 안의 하나 이상의 쉼표(,)로 구분된 값이나, 값으로 나타낼 수 있는 표현식을 사용할 수 있습니다.
표현식은 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 및 괄호 등을 사용하여 숫자나 숫자와 단위가 조합된 기본적인 계산식과, CSS에서 값으로 유효하다고 평가할 수 있는 다른 표현식일 수 있습니다.

주의할 점

max()에서는 auto, initial, inherit, unset, none, normal, bold, min-content, max-content, fit-content 등과 같은 CSS 키워드 값을 사용할 수 없습니다.

예제

다양한 예제들을 통해 max()의 사용 방법을 확인해 보세요.

값으로 나타낼 수 있는 표현식 사용

CSS

.my-div {
    width: max(50%, 10 * 2em); /* 값으로 나타낼 수 있는 표현식 사용: 10 * 2em = 20em */
    height: 100px;
    background-color: gold;
}

각도 값에 대해 사용

max()는 각도 값으로 사용할 수 있는 속성의 값으로도 사용할 수 있습니다. 예를 들어, 요소의 회전 각도에 사용할 수 있습니다.

rotate()는 요소를 회전시키는 CSS 속성 값입니다. max() 함수는 두 값인 10deg와 45deg를 비교하여, 가장 큰 값인 45deg로 요소를 회전시킵니다.

상대 길이 값과 절대 길이 값을 비교할 때

max()는 상대 길이 값(예: %, vw, em 등)과 절대 길이 값(예: px)을 비교할 때 그 유용성이 더 많습니다. 어떤 값이 더 큰가 확실하지 않거나 유동적일 때 더 큰 값을 선택해야 하는 경우가 있습니다.

코드 부연설명
vw는 뷰포트(화면) 너비의 1%에 해당하는 길이 단위입니다.

이 예제에서 max()는 10vw와 150px 두 값을 비교하여 더 큰 값을 선택합니다. 화면 크기에 따라 .my-div의 너비는 10vw가 될 수도 있고, 150px로 고정될 수도 있습니다.

CSS 변수 값 적용하기

max()에는 CSS 변수 값도 사용할 수 있습니다. 즉, CSS에서 값으로 유효하다고 평가할 수 있는 모든 값이나 표현식을 사용할 수 있습니다.

CSS

:root {
    --primary-width: 150px;
    --gutter: 300px;
}
.my-div {
    width: max(var(--primary-width), var(--gutter));
    height: 100px;
    background-color: gold;
}

..my-div의 너비는 var(--gutter)의 크기인 300px이 var(--primary-width)의 크기인 150px보다 큰 값이므로, 300px이 적용됩니다.