CSS 수학 함수
CSS 수학 함수를 사용하면 수학 표현식을 속성 값으로 사용할 수 있습니다. calc()
여기에서는 ,
max()
및 min()
기능 에 대해 설명합니다 .
calc() 함수
이 calc()
함수는 속성 값으로 사용할 계산을 수행합니다.
CSS 구문
calc(expression)
Value | Description |
---|---|
expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
예를 살펴보겠습니다.
예시
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, ...)
Value | Description |
---|---|
value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
예를 살펴보겠습니다.
예시
max()를 사용하여 #div1의 너비를 50% 또는 300px 중 가장 큰 값으로 설정합니다.
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
min() 함수
이 min()
함수는 쉼표로 구분된 값 목록에서 가장 작은 값을 속성 값으로 사용합니다.
CSS 구문
min(value1, value2, ...)
Value | Description |
---|---|
value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
예를 살펴보겠습니다.
예시
min()을 사용하여 #div1의 너비를 50% 또는 300px 중 가장 작은 값으로 설정합니다.
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
모든 CSS 수학 함수
Function | Description |
---|---|
calc() | Allows you to perform calculations to determine CSS property values |
max() | Uses the largest value, from a comma-separated list of values, as the property value |
min() | Uses the smallest value, from a comma-separated list of values, as the property value |