[CSS]CSS 사용자 지정 변수란, 사용법, 사용이유, 기본값 설정 방법(root, var)

css의 사용자 지정 변수의 개념과 사용 이유, 사용 방법을 알아보려고 합니다. 해당 기능을 사용하면 상황에 맞게 css의 값을 변경할 수 있습니다. 백엔드 개발자지만 지금 쇼핑몰 서비스 메인화면 지원 업무를 하고 있기 때문에 오랜만에 css를 많이 건드리게 되어서 오늘 배운 것을 정리합니다.

 

---

 

1. 사용자 지정 변수란

 

CSS에서 사용자 지정 변수란 한 번 값을 설정하고 여러 군데서 값을 재사용할 수 있게 해주는 기능입니다. 주로 색상이나 크기 같은 스타일 요소들을 변수로 세팅한 후에 유연하게 사용할 수 있습니다.

2. 사용자 지정 변수 사용 이유

 

java같은 백엔드 개발에서도 재사용성은 중요한 요소인데요. css에서도 유연하게 재사용을 할 수 있다는 것을 알게 되었습니다. 여러 값을 한 번에 변경해야 한다면 꽤 유용하게 쓰일 것 같습니다. 

 

저의 경우 현재 쇼핑몰 서비스의 메인화면 지원업무를 하고 있는데요. 서브도메인별로 화면의 색상이 다릅니다. 화면과 css를 다른 폴더 및 파일로 관리하고 있는데 이번에 메인화면 통합작업을 진행하면서 분산된 css들을 하나의 common.css로 만들어서 사용할 필요성을 느꼈습니다.

 

그래서 기존에 색상이 들어있는 css요소들을 common.css에 몰아서 관리하도록 한 후에 변수처리하였습니다. 각각 서브도메인별로 css 폴더와 css파일이 있는데, 해당 css파일에서는 각 서브도메인에 맞는 컬러값만 관리하도록 하여 common.css에서 재사용할 수 있게 변경하였습니다.

 

3. 사용법

 

common.css에서는 우선 var(사용자지정변수)를 선언해서 재사용할 값을 넣어줍니다. 서브도메인별로 color.css파일이 있다고 한다면 color.css에서는 :root를 이용해 사용자 지정 변수를 선언해줍니다. 참고로 사용자 지정 변수는 --로 선언해줍니다.

 

아래 client라는 폴더 아래에 a서브도메인의 color.css와 b서브도메인의 color.css 예시코드입니다.

 

/* client/a/color.css */
:root { 
	--main-bg-color: #ffffff; /* 블로그 배경 색 */ 
    --main-text-color: #000000; /* 블로그 텍스트 색 */ 
}

/* client/b/color.css */
:root { 
	--main-bg-color: #f5f5f5; /* 쇼핑몰 배경 색 */ 
    --main-text-color: #444444; /* 쇼핑몰 텍스트 색 */ 
}

 

 

그리고 공통 css파일인 common.css에는 var(사용자지정변수)로 선언하여 재사용할 수 있게 처리해줍니다. 물론 실제 메인화면에서는 color.css와 같이 로드가 되어야 됩니다.

 

/* common.css */ 
:root { 
	--main-bg-color: #f0f0f0; 
	--main-text-color: #333; 
} 

body { 
	background-color: var(--main-bg-color); 
	color: var(--main-text-color); 
	font-family: Arial, sans-serif;
}

 

4.사용자 지정 변수 디폴트값 사용법

 

참고로 디폴트값을 설정할 수 있는데 사용자 지정 변수가 없으면 디폴트값으로 세팅되도록 할 수 있습니다. 간단하니 아래 코드를 참고해주세요.

 

/* common.css */

:root {
  --main-bg-color: #f0f0f0;  /* 기본 배경색 */
  --main-text-color: #333;   /* 기본 텍스트 색상 */
}

body {
  background-color: var(--main-bg-color, #ffffff);  /* 변수 없으면 흰색 배경 */
  color: var(--main-text-color, #000000);           /* 변수 없으면 검은색 텍스트 */
}