CSS 수학 함수

CSS 수학 함수는 수학 표현식을 속성 값으로 사용할 수 있게 합니다. 이 장에서는 다음을 설명합니다: calc()、max() 및 min() 함수.

calc() 함수

calc() 함수가 계산을 수행하고 결과를 속성 값으로 사용합니다。

CSS 문법

calc(expression)
값 설명
expression 필수입니다. 수학 표현식입니다. 결과는 값으로 사용됩니다. 다음 연산자를 사용할 수 있습니다: +, -, *, /

예를 들어 보겠습니다:

예제

사용 calc() <div> 요소의 너비를 계산합니다：

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

직접 시도해 보세요

max() 함수

max() 함수는 쉼표로 구분된 값 목록 중 가장 큰 값을 속성 값으로 사용합니다。

CSS 문법

max(value1, value2, ...)
값 설명
value1, value2, ... 필수입니다. 쉼표로 구분된 값 목록 - 가장 큰 값을 선택합니다。

예를 들어 보겠습니다:

예제

사용 max() div1의 너비를 50% 또는 300px 중 큰 값으로 설정합니다：

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

직접 시도해 보세요

min() 함수

min() 함수는 쉼표로 구분된 값 목록의 가장 작은 값을 속성 값으로 사용합니다.

CSS 문법

min(value1, value2, ...)
값 설명
value1, value2, ... 필수. 쉼표로 구분된 값 목록 - 가장 작은 값을 선택

예를 들어 보겠습니다:

예제

사용 min() #div1의 너비를 50% 또는 300px 중에서 더 작은 값으로 설정하십시오:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

직접 시도해 보세요

CSS 함수 참조

모든 CSS 함수의 완전한 목록을 확인하려면 우리의 CSS 함수 참조 가이드。