1. 상수 정의

/* [기본 브라우저] */
:root {
	/* Font size */
  --font-large: 48px;
  --font-medium: 28px;
  --font-regular: 18px;
  --font-small: 16px;
  --font-micro: 14px;

  /* Font weight */
  --weight-bold: 700;
  --weight-semi-bold: 600;
  --weight-regular: 400;
}

.box__title {
  font-size: var(--font-medium);
}

/*---------------------------------------*/

/* [반응형 브라우저] */
@media screen and (max-width: 768px) {
    :root{
			/* Font size */
		  --font-large: 38px;
		  --font-medium: 22px;
		  --font-regular: 14px;
		  --font-small: 12px;
		  --font-micro: 10px;
    }
}

/* screen 외 all, print, speech */
/* and 외 not, only, ,(comma) */

• 자주 사용되거나 반복되어 사용되는 속성 값이나 하드 코딩으로 작성된 값을 최소화하기 위해 CSS에서 변수를 선언하여 사용한다.
• 반응형에 따라 변수값만 바꿔주면 많은 속성들을 하나하나 바꿀필요 없이 @media 안에 :root() 를 재선언 하여 변수만 바꿔주면 편리하게 브라우저 크기에 맞춰서 변하게 된다.

2. 유용한 속성

1. calc()

• CSS에서 수학적 계산이 가능하게 끔 만들어 주는 속성이다.
• margin-left: calc( var(--base-space) * 2 ); 처럼 해당 변수에 *2를 곱하여 계산된 값을 CSS에 적용할 수 있다.

width: calc(100% - 80px);

• 0으로 나누면 HTML 구문분석기에서 오류가 발생합니다.
• + 와 - 연산자는 좌우에 공백이 있어야 합니다. calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석합니다. 마찬가지로, calc(8px + -50%)는 길이와 음의 백분율간의 덧셈으로 처리합니다.
• * 와 / 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋습니다.
• 표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면 auto 키워드를 사용한 것과 동일하게 처리합니다.
• calc() 함수를 중첩해서 사용하면 내부의 calc()는 단순한 괄호로 간주합니다.