사용자 정의 속성과 현대 CSS

브랜드 파란색을 선택해서 40개의 다른 규칙에 입력하고 사이트를 배포합니다. 한 달 후 마케팅에서 조금 다른 파란색을 원합니다. 이제 모든 스타일시트를 찾아다니면서 40개를 모두 놓치지 않았는지, 그리고 대문자로 표기된 2개를 빠뜨리지 않았는지 확인해야 합니다. 사용자 정의 속성은 이를 해결합니다. 색상에 한 번 이름을 지정하고 모든 곳에서 그 이름을 사용한 다음 한 곳에서 변경합니다. 이 단 하나의 습관이 테마 지정, 디자인 토큰, 그리고 재설계를 견뎌내는 스타일시트의 시작입니다.

변수 선언 및 사용

**사용자 정의 속성**은 재사용할 수 있도록 이름을 붙인 값입니다. 앞에 두 개의 대시로 이름을 작성하고 값을 설정한 다음 나중에 var()로 다시 읽습니다:

css

:root {
  --color-brand: #2563eb;   /* 한 번만 선언하고 이름 아래에 저장 */
}

.button {
  background: var(--color-brand);   /* 여기서 다시 읽기 */
}

.link {
  color: var(--color-brand);        /* 그리고 여기, 같은 값 */
}

--color-brand는 이름이고 (두 개의 대시는 필수), var(--color-brand)는 사용하는 방식입니다. :root(페이지 최상단인 <html> 요소)에 선언하면 이름이 모든 곳에서 사용 가능합니다. :root의 한 줄을 변경하면 그것을 읽는 모든 규칙이 업데이트됩니다.

Juno변수 선언 및 사용 사용자 정의 속성은 이름이 있는 값입니다. --color-brand처럼 두 개의 대시로 작성한 다음 var(--color-brand)로 읽습니다. :root에 놓으면 전체 페이지에서 사용할 수 있습니다. 한 줄을 변경하면 그 이름을 읽는 모든 규칙이 함께 업데이트됩니다.

계단식과 상속

다른 언어에서 변수를 사용했다면, 다음 부분이 놀라운 점입니다. 사용자 정의 속성은 고정되지 않습니다. 다른 CSS 속성과 같은 규칙을 따릅니다. 즉, 자식 요소로 **상속**되며, 나머지를 건드리지 않고 한 곳에서 다른 값을 줄 수 있습니다.

css

:root {
  --color-text: #1f2937;   /* 전체 페이지의 기본값 */
}

.callout {
  --color-text: #92400e;   /* .callout 내부에서만 다른 값 */
  color: var(--color-text);
}

p {
  color: var(--color-text);   /* 대부분 진회색, 콜아웃 내부에서는 황갈색 */
}

같은 var(--color-text)가 대부분의 단락에서는 진회색을 제공하지만 콜아웃 내부에서는 황갈색을 제공합니다. 왜냐하면 콜아웃이 자체 값을 설정했기 때문입니다. 이것이 테마 지정을 가능하게 하며, CSS의 작동 방식에서 그 뒤의 계단식을 보았습니다.

Juno계단식과 상속 사용자 정의 속성은 고정되지 않습니다. 자식 요소로 상속되며, 나머지를 변경하지 않고 한 곳에서 다른 값을 설정할 수 있습니다. 그래서 같은 var(--color-text)가 대부분의 단락에서는 회색이고 콜아웃 내부에서는 황갈색일 수 있습니다. 컨테이너의 이름을 재정의하면 그 안의 모든 것이 새 값을 선택합니다.

폴백과 calc()

var()는 두 번째 값을 가질 수 있으며, 사용자 정의 속성이 절대 설정되지 않은 경우에만 사용됩니다. 이것이 **폴백**이며, 토큰이 누락되어도 규칙이 작동하도록 유지합니다:

css

.card {
  gap: var(--gap, 1rem);   /* --gap이 존재하면 사용, 아니면 1rem */
}

calc()를 사용하여 사용자 정의 속성으로 수학을 할 수도 있습니다. 기본 간격 값이 있으면, 두 번째 숫자를 하드코딩하는 대신 그것으로부터 더 큰 값을 만들 수 있습니다:

css

:root {
  --space-md: 16px;
}

.section {
  padding: calc(var(--space-md) * 2);   /* 32px, 기본에서 파생 */
}

이런 식으로 값을 파생시키는 것은 --space-md에 대한 하나의 변경이 그 위에 구축된 모든 것을 통해 전파된다는 의미입니다.

Juno폴백과 calc()var(--gap, 1rem)은 토큰이 존재하면 사용하고 존재하지 않으면 1rem으로 폴백합니다. 따라서 값이 누락되어도 규칙이 계속 작동합니다. 그리고 calc()는 토큰에서 값을 만들 수 있게 합니다. calc(var(--space-md) * 2)처럼 기본 간격의 두 배를 만들 수 있습니다. 기본을 변경하면 그 위에 구축된 모든 것이 따라갑니다.

테마 지정

사용자 정의 속성이 트리 아래로 재정의될 수 있으므로, 클래스 아래에서 토큰을 변경하여 다크 테마를 만들 수 있으며, 모든 컴포넌트 규칙을 그대로 둡니다:

css

:root {
  --color-bg: #ffffff;
  --color-text: #1f2937;
}

.theme-dark {
  --color-bg: #0f172a;      /* 같은 이름, 새로운 값 */
  --color-text: #e2e8f0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

페이지에 class="theme-dark"를 추가하면 --color-bg 또는 --color-text를 읽는 모든 규칙이 다크 값으로 전환됩니다. 테마를 전환하기 위해 body 규칙이나 컴포넌트를 편집하지 않았습니다. 이것이 16진수 코드를 직접 작성하는 대신 색상을 토큰으로 이름 짓는 보상입니다.

Juno테마 지정 테마는 .theme-dark와 같은 클래스 아래에서 다른 값을 가진 같은 토큰 이름입니다. class="theme-dark"를 설정하면 그 토큰을 읽는 모든 규칙이 전환되며, 단일 컴포넌트를 편집하지 않습니다. 이것이 16진수 코드를 각 규칙에 직접 입력하는 대신 색상을 토큰으로 이름 짓는 이유입니다.

사용자 정의 속성과 현대 CSS ​

변수 선언 및 사용 ​

계단식과 상속 ​

폴백과 calc() ​

테마 지정 ​

사용자 정의 속성과 현대 CSS

변수 선언 및 사용

계단식과 상속

폴백과 calc()

테마 지정