사이트 내에 일관성 있는 색상 구현하기 위해 유용한 방법

아마 많이 아시겠지만 그래도 도움이 되는 분들도 있을 듯하여 저의 경험을 공유합니다.

1. 사이트 내에 2가지(혹은 그 이상) 색상을 사용하여 css 작업을 할 때 일일이 색상코드를 다는 것이 번거롭고, 또한 경우에 따라서 색상을 변경할 경우 또 다시 번거로운 작업을 해야 할 때, :root로 색상값을 변수로 저장하여 사용합니다.

2. color_set.css(파일명을 달라도 됨)을 만들고 내용에 다음과 같이 색상값을 변수로 저장합니다.

그리고 이 파일을 common/css 폴더에 저장합니다.

-----------------------------

:root{
    --main_light: #c9f0a4;
    --main: #a4cf5a;
    --main_dark: #85af4b;
 

    --sub_light: #a6cef0;
    --sub: #60a3d9;
    --sub_dark: #5f77ba;
}

-------------------------------

3. 레이아웃 편집에서 다음과 같은 코딩을 추가합니다.

layout.html 편집에서
<!--// CSS --> 첫번째(!!) 줄에 다음 내용을 추가
<load target="../../common/css/color_set.css" />

4. 이후 layout.css 등 사용하는 css 파일에서 색상을 지정할 때

background-color:var(--main);

color:var(--main_dark);

등과 같이 변수를 사용합니다.

5. 이후 작업 과정에서 색상을 변경해야 하면

color_set.css 만 수정하면 한꺼번에 색상을 조정할 수가 있습니다.