CSS 변수 사용하기 (사용자 지정 CSS 속성)

CSS 변수 (CSS Variable)

순수하게 프로그래밍 언어의 구조 관점에서 보면

HTML은 그래도 Markup Language니까

이해할 수 있어도 CSS는 좀 문제 의식을

느낄 수도 있습니다.

 

뭐랄까... 좀 적나라하게 표현하면

누더기 문법(syntax)같이 느껴지는데

이것을 조금 더 생각해보면

태생적인 한계가 있습니다.

 

워낙 복잡하고 빠르게 변화한 웹의 역사를

늘어놓는 것은 이해가 어려우니까

어바우퉁쳐서 소스코드와 기계어의

관계 처럼 인간의 언어와 컴퓨터의 언어의

차이때문에 발생하는 필연이 유독

CSS에 두드러지게 발생하는게 아닌가 -

그런 생각도 해볼 수 있습니다.

 

CSS는 프로그래밍 언어의 구조화라던가

이런 것을 고려한 언어는 아닙니다.

 

언어라면 구조가 탄탄해야 하고

작성하는 시점에 이미 런타임에 어떤

상황이 펼쳐질지 예측이 가능해야 합니다.

예측이 안되는 부분을 Exception 처리를

해줘야 하는 것이고, 그런데 CSS는

그냥 사람이 작성하기 편하게 되있습니다.

작성하기는 편하지만 가독성은 좋지 않은데

그래서 많은 부분들을 브라우저가 임의로

처리합니다. 대충 작성해도 C언어 처럼

오류로 중단되는 일은 거의 없습니다.

CSS가 프로그래밍 언어라고 주장하는 사람도 있고

아니라고 하는 사람도 있는데 CSS도 일단은

자바스크립트와 함께 돌아가기 때문에

언어는 아니라도 언어의 요소는 될 수 있습니다.

 

 

그런 모호한 부분들을 다 이해하는 것은

힘들지만 코딩을 하다보면 그런 생각도 듭니다.

예를 들어 CSS에도 분기문이 있었으면 좋겠다.

for 루프가 있었으며 좋겠다 - 물론 CSS에서

프로그래밍 로직을 사용할 수 있는 방법은

찾아보면 있습니다만 순수한 CSS에는 없습니다.

그런 것들을 모두 프로그래밍이라고 부르기엔

좀 순정도가 떨어직 때문에 CSS는

쓸만하게 구조화가 안되어 있습니다.

 

그나마 사용할 수 있는 것이 사용자 지정

CSS속성, 혹은 CSS 변수입니다.

순수 프로그래밍을 하는 사람들은 이것을

진지하게 인정하긴 어렵겠지만

일단 CSS의 가능성의 하나로 봐야겠지요.

나중에 CSS가 극적인 변화를 겪고

좀 더 쓸만한 언어가 될지도 모르니까요.

자바스크립트를 이렇게 사용하고 있을지

넷스케이프 초창기에는 생각하지 않았습니다.

그래서 난해한 언어가 되버렸는데

하지만 그것을 대체할 만한 것은 아직은 없습니다.

(dart 나 go 등이 도전은 많이 하고 있다)

 

해서 변수라도 써보면 좋겠는데

그건 가능은 합니다.

 

:root 선택자에 선언할 수 있습니다.

 

CSS 변수

전혀 어려운 건 아니니까 간단히 알아봅니다.

 

-- 는 CSS의 변수입니다. :root 는 모든 선택자의

조상(Object)정도 됩니다. 여기에는 많은 default 값이

들어가 있습니다. rem 이라 부르는 상대 비율도

root 에 대한 em(상대 비율) 입니다.

CSS에 쓰지 않아도 원래 있는 객체입니다.

 

여기에 변수를 선언하면 일반 프로그래밍에서

global과 같습니다. CSS는 구조화가 허술해서

scope 변수를 만드는 것은 좀 위험하고(찾기 힘듬)

:root에만 놓고 사용하는게 관리상 좋습니다.

 

:root {
    --primary-clr: #384CFF;
    --primary-bg-clr: #BFD2FF;
    --secondary-clr: #2CB03E;
    --secondary-bg-clr: #ADFFCD;
}

 

과거에는 사용을 안했는데

최근 들어와서 웹이 복잡해지면서

사용을 하는 경우가 있습니다.

결국 CSS파일도 복잡해지면 어떤 식으로든

구조화가 필요해지는데 지금 시대는

웹프레임워크가 많으니까 각자 알아서

해결하고 있습니다. 그러다보니 프론트엔드가

엄청나게 복잡해지고 있는데요, 언젠가인지

모르겠지만 전국 통일을 한 번 할거라 믿습니다.

사람들이 각기 다른 프레임워크를 배우느라

시간을 너무 허비하지 않는게 좋겠지요.

 

root에서 정의한 변수는 아래와 같이 사용합니다.

var( ) 안에 변수의 이름을 넣습니다.

색상같은 것은 반복되기 때문에 root에서

일괄적으로 변경하는 것이

테마 색상을 입히기가 좋습니다.

header {
    padding: 10px;
    color: var(--primary-clr);
}

그 외 여러 값들도 쓸 수 있는데

한가지 주의할 점은 과거 IE 의 호환성을

생각하면 쓰지 않는게 좋다고 합니다. (IE6 그 이전)

 

과거 브라우저를 120% 지원하는 웹을

만드는 것은 이것 뿐 아니라 여러가지 문제가

있습니다. 어디까지 호환성을 유지할지는

프로젝트의 성격에 달려있습니다.

 

개별 선택자에서 변수를 정의하는 것도

가능한데 구조화된 언어가 아니기 때문에

관리하는게 쉽지가 않을 겁니다. 

 

너무 CSS로 프로그래밍을 하려고 할

필요까지는 없습니다. 자바 스크립트가 있으니까

 

tutorials/html_css/css_variable at main · neokayken/tutorials

GitHub - neokayken/tutorials: programming tutorial for beginner