[CSS] Custom Property - CSS 변수 정의

CSS 변수를 정의하고 티스토리 스킨에 적용한 과정을 정리합니다.

티스토리 스킨 수정시, 동일한 css(색상,폰트 등..) 변경에 있어 변수로 생성해서 한번에 변경할 수 있도록 만들고자한다.

CSS 변수 정의 & 사용

변수 정의

--variable-name: value; 과 같은 형식으로 변수를 정의한다.

/* 기본 폰트 색상 */
:root {
--main-text-color: #096dd9; 
--highlight-text-color: #4285f4; 
--tag-text-color: #5399e5; 
--hover-bright-color: #6ca8e9; 
--active-bright-color: #4285f4; 
--link-bright-color: #aaa; 
--gtheme-blue-color: #1a73e8;
--h2-seperator-color: #dae7fd38;  
--tag-text-color:  #5c5c5c;
--gtheme-yellow-color: #fde293;
--main-textbright-color:#3b8be1;
--gtheme-yellow-color: #fde293;
--code-text-color: #385a87;
--code-bg-color: #f7faffa1;  
--article-text-color: #292929; 
--strong-bg-color: #fde293
}

변수 사용

.{
color : var(--main-text-color)!important;
color: var(--highlight-text-color)!important;
color: var(--tag-text-color);
color: var(--hover-bright-color);
color: var(--active-bright-color) !important;
color: var(--link-bright-color) !important;
color: var(--gtheme-blue-color) !important;
color: var(--h2-seperator-color) !important;
color: var(--tag-text-color) !important;
color: var(--strong-text-color) !important;
color: var(--main-textbright-color) !important;
color: var(--gtheme-yellow-color) !important;
color: var(--code-bg-color) !important;
}

CSS 변수 설정

.article-content code {
    background-color: var(--code-bg-color) !important;
...
}

변수 설정 결과

---

Reference&Source
(추천) CSS 참고 사이트
(추천) 컬러 참고 사이트