CSS Math 함수

calc()

calc() 함수는 속성 값 계산을 수행합니다.

calc(expression)

값	설명
expression	필수. 수학적 표현식. 결과는 값으로 사용됩니다. 사용할 수 있는 연산자는 `+` `-` `*` `/` 입니다.

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

max() 함수는 쉼표로 구분된 값 리스트에서 가장 큰 값을 속성 값으로 사용합니다.

max(value1, value2, ...)

값	설명
value1, value2, …	필수. 쉼표로 구분된 값 목록 - 가장 큰 값이 선택됨

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

min() 함수는 쉼표로 구분된 값 리스트에서 가장 작은 값을 속성 값으로 사용합니다.

min(value1, value2, ...)

값	설명
value1, value2, …	필수. 쉼표로 구분된 값 목록 - 가장 작은 값이 선택됨

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