변수 선언
:root나 컴포넌트 범위에 색, 간격, 크기 값을 이름으로 저장한다.
CSS Variables
CSS 변수와 calc는 고정값과 유동값을 함께 계산한다
커스텀 속성은 재사용 값을 보관하고, calc는 vw, px, rem 같은 단위를 섞어 레이아웃 수식을 만든다.
계산 흐름
responsive value스코프
하위 요소는 가까운 변수 값을 상속받아 테마나 섹션별 값 변경이 쉽다.
calc()
100% - 2rem처럼 서로 다른 단위를 브라우저가 계산하게 한다.
변수 선언상속 범위calc()렌더 값
CSS 변수와 calc를 함께 쓰면 화면 크기에 맞춰 바뀌는 값도 매직 넘버가 아니라 읽을 수 있는 수식으로 남는다.