css 테마 스타일 컬러 변수처럼 사용하기 root style variable color

새프로젝트를 시작하면서 여러명의 프론트엔드 개발자들이 동시에 다른 페이지들을 작업하게됐는데 통일성 있고 효율적인 작업을 위해 루트 스타일root style을 정해놓고 시작하기로 했다.

 

root style은 보통 웹사이트, 앱 프로젝트의 테마컬러를 주로 지정해놓고 사용하는 것 같은데 컬러뿐만아니라 자주 사용하는 스타일을 변수처럼 지정해놓고 사용할 수 있기때문에 잘 익혀두면 협업뿐만아니라 프론트엔드 작업하기에 전반적으로 정말 편할 것 같다. 

 

참고로 구글도 개발자모드로 스타일을 확인해보면 아래와같이 테마컬러를 지정해서 사용하고 있다.

 

전체 페이지에 공통으로 적용해야하니 루트 요소에 적용을 해주는데 위의 구글 코드처럼 html에 적용해도 되고 :root 라는 의사 클래스를 사용해 적용할수도 있다.

 

 

사용법은 간단하다

변수명 : 값; 

으로 설정한뒤 var(변수명)으로 호출해서 사용한다. 

 

See the Pen Untitled by JaeCool (@JaeCool) on CodePen.

 

 

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/:root