CSS 수학 함수는 수학식을 성질 값으로 사용할 수 있게 해준다. 여기서는 calc(), max(), min() 함수에 대해 설명하겠다.
CSS calc() 함수
calc() 함수는 속성 값으로 사용할 계산을 수행한다.
CSS 구문
| calc(expression) |
| 값 | 설명 |
| expression | 필수입니다. 수학식입니다. 결과값이 사용됩니다. 다음 연산자를 사용할 수 있습니다. + - * / |
| <!DOCTYPE html> <html> <head> <style> #div1 { position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; padding: 5px; } </style> </head> <body> <h1>The calc() 함수</h1> <p>창의 양쪽과 창의 가장자리 사이에 50px 간격으로 창을 가로질러 뻗어 있는 디브를 만듭니다:</p> <div id="div1">텍스트...</div> </body> </html> |
위의 예제에서 calc(100%-100px)를 계산하면 100%-100px로 width가 지정되며 아래 그림과 같이 결과를 표시한다.
CSS Max() 함수
max() 함수는 쉼표로 구분된 값 목록에서 가장 큰 값을 속성 값으로 사용합니다.
CSS 구문
| max(value1, value2, ...) |
| 값 | 설명 |
| value1, value2,... | 필수. 쉼표로 구분된 값 목록 - 가장 큰 값을 선택합니다 |
| <!DOCTYPE html> <html> <head> <style> #div1 { background-color: yellow; height: 100px; width: max(50%, 300px); } </style> </head> <body> <h1>The max() 함수</h1> <p>max()를 사용하여 #div1의 폭을 가장 큰 값, 50% 또는 300px 중 하나로 설정합니다:</p> <div id="div1">텍스트...</div> <p>브라우저 창을 조정하려면 브라우저 창을 조정합니다..</p> </body> </html> |
브라우저의 너비 크기에 따라 max(50%, 300px) 중의 큰 값이 선택될 것이다. 위의 코드를 실행한 결과는 아래 그림과 같다.
CSS min() 함수
min() 함수는 쉼표로 구분된 값 목록에서 가장 작은 값을 속성 값으로 사용한다.
CSS 구문
| min(value1, value2, ...) |
| 값 | 설명 |
| value1, value2,... | 필수. 쉼표로 구분된 값 목록 - 가장 작은 값을 선택합니다 |
| <!DOCTYPE html> <html> <head> <style> #div1 { background-color: yellow; height: 100px; width: min(50%, 300px); } </style> </head> <body> <h1>The min() 함수</h1> <p>min()을 사용하여 #div1의 폭을 가장 작은 값, 50% 또는 300px 중 하나로 설정합니다:</p> <div id="div1">텍스트...</div> <p>브라우저 창 크기를 조정하여 효과 확인.</p> </body> </html> |
width 속성값은 min(50%, 300px) 둘 중에 하나를 선택하도록 되어 있다. 창 너비가 넓으면 300px 적으면 너비의 50%로 지정이 되며 아래 그림과 같다.
창 너비를 줄이면 아래 그림과 같다. 브라우저 창 너비를 줄이면 너비의 50%로 최소값이 설정이 되며 아래 그림과 같다.
CSS Math 함수
| 함수 | 설명 |
| calc() | 계산을 수행하여 CSS 속성 값을 결정할 수 있습니다 |
| max() | 쉼표로 구분된 값 목록에서 가장 큰 값을 속성 값으로 사용합니다 |
| min() | 쉼표로 구분된 값 목록에서 가장 작은 값을 속성 값으로 사용합니다 |
지금까지 CSS math 함수(수학함수)에 관련하여 살펴보았다. 함수로는 calc(), max(), min()함수의 개념과 활용 예제를 살펴보았다.
꼭 손으로 눈으로 머리로 실습하기를 바란다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS !Important rule(중요도 규칙) (0) | 2023.09.13 |
|---|---|
| CSS Specificity (0) | 2023.09.12 |
| CSS Units (0) | 2023.09.11 |
| CSS Counter (0) | 2023.09.10 |
| CSS Website Layout (0) | 2023.09.09 |
댓글