CSS 변수와 계산식

CSS 변수는 반복되는 디자인 값을 이름으로 묶고, calc()는 고정값과 유동값을 같은 표현식 안에서 계산하게 합니다.

1

값을 선언하고 계산되는 지점 추적

CSS 변수는 --name 값으로 여러 선택자에서 재사용됩니다.

2

CSS 계산식 (calc()) 이해하기

calc() 함수는 CSS 속성 값 안에서 고정 단위와 비율 단위를 함께 계산합니다.

3

변수 선언 및 사용 방법

변수 값을 한 번 바꾸면 연결된 스타일이 함께 갱신됩니다.

4

변수의 스코프 (Scope)

변수는 --로 선언하고 var(--이름)으로 꺼내 씁니다. 선언 위치가 적용 범위와 상속을 결정합니다.

5

토큰화와 계산식 적용 판단

CSS 변수는 반복되는 색상, 간격, 크기 값을 한 곳에서 관리하게 해 유지보수를 쉽게 만듭니다.

핵심CSS 변수와 계산식은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.