Front End/CSS

[CSS] root(전역요소)이용한 변수 선언하기

TTOWA 2024. 1. 3. 19:28

1. 사용방

  • 변수의 이름을 지정할 때에는 변수 맨앞에 -- 을 붙여주워야 합니다.
  • --primary-color, --secondary-color, --font-size와 같은 CSS 변수를 정의하고, 해당 변수들을 사용하여 태그 요소에 스타일을 적용할수 있습니다.

2. 장점

  • 변수를 사용하면 전역적으로 일관된 디자인을 유지하면서 유지보수가 용이해집니다.
/*:root를 사용한 간단한 코드 예제 */

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
}

h1 {
  color: var(--primary-color);
}

p {
  color: var(--secondary-color);
}


이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.

큰 도움이 됩니다.

 

반응형