CSS 함수
1. CSS 함수
CSS 함수는 CSS 속성 값으로 계산식을 지정할 수 있는 도구입니다. 주로 calc(), min(), max(), clamp() 함수가 사용됩니다.
1.1 calc()
CSS 속성 값을 계산할 때 사용합니다. +, -, *, / 사칙연산이 가능하며, 서로 다른 단위끼리 계산할 수 있습니다.
연산자의 좌우 공백을 꼭 요구합니다!
calc(50% -80px)는 유효하지 않습니다.
calc(8px + -50%)는 길이와 음의 백분율 간의 덧셈으로 처리됩니다.
*, / 연산자는 좌우 공백을 요구하지 않지만, 일관성을 위해 넣는 것이 좋습니다.
예시: 요소를 화면에 여백과 함께 배치하기
예시: 레이아웃 단 구성하기
1.2 min(), max()
min()과 max() 함수는 여러 값 중 최소값 또는 최대값을 선택합니다.
1.3 clamp() 함수
clamp() 함수는 값을 지정된 범위 내로 고정합니다.
clamp(최소값, 선호값, 최대값)clamp(최소값, 선호값, 최대값)작동 방식은 아래와 같습니다.
- 선호값이 최소값과 최대값 사이에 있으면 선호값을 사용합니다.
- 선호값이 최소값보다 작으면 최소값을 사용합니다.
- 선호값이 최대값보다 크면 최대값을 사용합니다.