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);
}
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.
반응형
'Front End > CSS' 카테고리의 다른 글
[CSS] 포토샵 드롭섀도(Drop shadows) CSS로 변환 하기 (0) | 2022.12.26 |
---|---|
[CSS] 웹 글꼴(web font)의 형식 (0) | 2022.12.05 |
[CSS] console.log Style&Img (콘솔창 스타일&이미지 적용하기) (0) | 2022.01.24 |
[CSS] 모바일 폰트 크기 조절(text-size-adjust) (0) | 2022.01.18 |
[CSS] 페이지 내 특정 영역만 print(프린트) 하기 (0) | 2021.12.27 |