CSS 함수

1. calc()

• CSS 속성 값으로 +, -, *, / 사칙연산 계산식 지정
• 인자와 연산자 사이에 좌우공백 있어야 인식 가능

2. max-width()

• 최대 길이 지정

예시

• calc(), max-width() 사용해서 크기에 반응형으로 여백 지정

E {
width: 1000px;
max-width: calc(100% - 60px);
margin: auto;
}

• 뷰포트 클 때
  
• 뷰포트 줄일 때
  

• max-width() 최대값을 calc()와 % 사용해 가변값으로 설정
• 뷰포트가 클 때에는 1000px < calc(100% - 60px) : 1000px 적용
• 뷰포트가 작아지면 1000px > calc(100% - 60px) : calc(100% - 60px)값 적용
• 뷰포트가 작아질 경우 margin값 양 쪽에 30px 씩 적용

3. min(a, b), max(a, b)

• 쉼표로 구분된 값 중에 가장 작은/큰 값 사용
• 위 예제 min() 사용해 표현

width: min(var(--max-width), calc(100% - var(--plane-padding) * 2));

4. clamp()

• clamp(최소값, 이상적인 값, 최대값)
• 폰트사이즈 화면 크기에 따라 반응형으로 지정
• 이상적인 값 부드럽게 움직이게 설정하기 위한 공식
  clamp(최소크기[단위], 최대크기[단위X] / 100 * 10vw, 최대크기[단위])

---

CSS 변수

1. 변수 지정

• 유지보수 생각해서 color, border-radius, padding 같은 거 변수처리 해놓으면 좋음

:root {
	--변수명1 : 값;
    --변수명2 : 값;
}

2. 변수 사용

E {
	속성1 : var(--변수명1);
    속성2 : var(--변수명2);
}