[CSS] 사용자 지정 CSS 속성 (변수)

✔️ CSS에서의 변수

• CSS 저작자가 정의하는 개체로 문서 전반적으로 재사용할 임의의 값을 담습니다.
• 전용 표기법을 사용해 정의하고 var() 함수를 사용해 접근할 수 있습니다.
• 변수는 종속 대상이며 부모로부터 상속합니다.
• 변수의 이름은 대소문자를 구분합니다.

 

📌 변수 선언

/* 전역 변수 */
:root {
  --font-small: 8px;
  --font-normal: 16px;
  --font-large: 24px;
  --font-x-large: 32px;
  --font-xx-large: 40px;
  --font-xxx-large: 48px;
}

/* 특정 요소에서만 사용할 수 있는 변수 */
span {
  --var1: wavy underline orange;
  --var2: wavy underline red;
}

 

📌 변수 사용하기

@import url(./common.css);

/* 특정 요소에만 사용 */
span.not-good {
  text-decoration: var(var1);
}
span.wrong {
  text-decoration: var(var2);
}

/* 스코프에 지정된 변수가 없을 경우 대안 값을 넣을 수도 있습니다. */
u {
  background-color: var(--var1, lightblue);
}

/* 전역 변수 사용 */
p {
  font-size: var(--font-large);
}

 

See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.

 

📄 참고

https://www.yalco.kr/

https://developer.mozilla.org/ko/