[CSS] CSS 에서 변수 사용하기

<본 내용은 개인작업을 통해 새롭게 알게된내용, 경험에 대한 메모장과 같은 글입니다>

 

현재 진행중인 프로젝트에 사용되는 대표색

 

기술 사용의 필요성

현재 개발중인 프로젝트는 일관된 브랜드 경험과 유지보수의 편의성을 위해 브랜드의 전용 컬러를 정의하고 사용하도록 기획했다. 실제 현업에서는 더 많은 컬러들을 정의해서 사용하고, 본 프로젝트 또한 다양한 컬러를 정의해놨다 (alert컬러, 경고색, 하이라이트 색 등)

 

기존 방식의 문제

퍼블리싱 과정을 수료했지만 CSS에 대해 완벽히 이해하고 있다고는 생각하지 않는다. 국비지원 퍼블리싱 과정을 통해 기존에 존재하는 웹사이트를 똑같이 만들어내거나 (클론코딩), 새롭게 디자인 한 웹사이트를 구현해내는 데에 문제는 없었지만 내가 작업한 기존에 작업물들이 현업에서 사용하는 효율적인 방식과는 거리가 있다고 생각했다.

 

그 중 대표적인것이 디자인 시스템, 컨포넌트를 통한 재사용과 유지보수였다.

 

기존의 방식

<div>
	<h1> 안녕하세요 </h1>
    <h2 class="main_color"> 메인컬러입니다 </h2>
<div>

.main_color{
color : #FFE7C9;
}

기존의 작업방식에서는 해당 class에 color값을 직접 16진수의 HEX code로 정의해서 사용했다. 한두가지의 컬러가 사용되거나  작업의 규모가 작다면 이렇게 작업해서 해도 크게 문제가없다. 하지만 프로젝트가 커지고, 만약의 메인컬러가 변경되었다면? 코드 전체에있는 해당 컬러를 검색해서 모두 바꿔줘야한다.

개발을 한다는 사람이 이렇게 비효율적으로 문제를 해결하는것은 참을 수 없는 것이다.

해결방안

:root{
  --main-deep-brown: #a68762;
  --main-brown:#F2D0A6;
  --main-light-brown:#FFE7C9;
  --sub-deep-blue : #518AA6;
  --sub-light-blue : #A7DAF2;
  --font-black: #333333;
  --font-gray: #737373;
  --font-light-gray : #a5a5a5;
  --background-brown : #FFF9F2;
  --background-gray : #f8f8f8;
  --background-white : #FFFFFF;
  --alert-red: #F62215;
  --line-gray: #f2f2f2;
}

가장 메인이 되는 전역 CSS에 컬러값들을 변수의 형태로 선언을 해서 사용하는 것이다. 이렇게 되면 해당 컬러를 사용하는 모든 엘리먼트들의 컬러를 한 곳에서 관리를 할 수 있게된다.

 

사용법

.fontgray, 
::placeholder {
  color: var(--font-gray)
}

선언해 놓은 CSS컬러를 var(--컬러의 이름) 의 형태로 호출해서 사용할 수 있다. 이렇게 사용하게되면 처음에는 어색하고 불편할 수 있어도, 규모가 커졌을 때 색상의 관리가 한결 편해진다.