CSS3 :root 변수를 이용한 HTML 스타일 적용 방법
브라켓은 대표적인 웹에디터 프로그램 중 하나입니다. 제가 자주 사용하는 기능 중 하나가 바로 "일괄변경" 입니다. 예를 들자면, #555 어두운 회색 계열인 16진수 색상코드가 적용된 모든곳을 다른 색으로 일괄 변경하고자 할 때, 해당 색상 부분을 드래그해서 선택 후, Ctrl + H 를 누르면 원하는 색상코드를 넣어 모두 변경이 가능합니다. 만약 브라켓에 오류가 발생한다거나 하필 급하게 메모장으로 수정을 해야 하는 경우라면 어떻게 해야 할까요? 한두개 적용이 된 상태라면 하나하나 수동으로 수정할 수 있지만, 생각보다 많은곳을 동시 수정해야 한다면 시간이 상당히 소요가 될 것입니다. 또한 빼먹고 미처 수정을 못하는 부분도 생길 수 있습니다.
그래서 :root 를 사용하게 됩니다. 이것은 변수를 만들어서 해당 부분의 스타일을 일괄 관리하는 가상요소 중 하나입니다. 말로는 설명하는데 한계가 있으므로 아래의 예제를 미리 살펴보시고, CSS 부분도 어떻게 마크업 되어 있는지 확인해 주시기 바랍니다.
See the Pen CSS3 :root by rgy0409 (@rgy0409) on CodePen.
보시면 var 라는 부분이 보입니다. 그리고 스타일로 정의된 부분 중 :root 가 있습니다. 이들의 연결관계는 변수로 약속되어 있어서 :root의 스타일 요소들을 변경해서 일괄적인 관리가 가능합니다. 예제 중 한 부분으로 다시한번 설명을 드리겠습니다.
:root {
--div-main-color: #555;
}
div {
color: var(--div-main-color);
}
다음 두개의 부분을 찾으셨습니까? var 라는것은 보편적으로 프로그램 언어에서 "변수"라고 부릅니다. 변수의 뜻은 말 그대로 변할 수 있는 값이라는 뜻이죠. 예시에서는 색상 부분으로 지정했습니다. 색상은 얼마든지 변경될 수 있는 부분이니까요. 클라이언트가 이 색상이 너무 밝으니, 좀 더 어둡게 해달라고 요청할 수도 있잖아요? 이렇게 얘기해놓고보니 모든게 다 변수가 될 수 있겠군요. (울음) 아무튼 CSS에서 변수를 선언하는 방법은 위의 예제와 같습니다.
:root 부분에서는 -- 이렇게 시작을 하며, 뒤에 나오는 부분은 변수명을 입력하시면 되는데, 변수명의 규칙은 CSS에서 클래스명이나 아이디명을 짓는 것과 같습니다. 예시에서는 div-main-color 라고 했지만 그냥 divMainColor 라고 하셔도 됩니다. 자신이 쉽게 알아볼 수 있도록 이름을 지어주시면 됩니다.
그리고 적용시켜야 할 선택자의 스타일에는 var로 변수를 선언해 주며, 소괄호를 넣어주고, 해당 소괄호 안쪽에 root 부분과 마찬가지로 --를 먼저 넣고 뒤에 동일한 변수명을 입력하시면 됩니다. 마무리는 세미콜론을 꼭 잊지 마시기 바랍니다.
스타일은 모든것을 사용할 수 있습니다. 예시에서는 가로 크기, 세로 크기, 색상, 마진값 등등 몇가지 없지만 변경 가능한 모든 CSS 스타일에 대해서 변수를 만들고 root에서 관리하도록 만드시면 됩니다. 저도 이 방법을 알고나니 앞으로 스킨을 만들 때 좀 더 사용자가 자신의 입맛에 맞는 스타일을 손쉽게 적용할 수 있도록 :root 를 꼭 넣어놔야 할 것 같습니다. 끝.
"친절한효자손 취미생활" 을 검색!
