[CSS/PHP] CSS 에서 변수를 사용하는 2가지 방법을 알아보자

🕓2017.07.25 📈18

스타일시트(CSS) 파일을 사용하면서 불편한 점이 있습니다. 바로 변수를 사용할 수 없다는 것. 여러가지 요소의 가로 크기를 동일하게 맞추거나, 색상을 동일하게 맞추고 싶은데 이 경우 계속 해서 같은 크기를 적어주거나, 같은 색상 코드를 넣어 주어야 합니다.

더 큰 문제는 바로 여러 요소의 특정 속성 값을 똑같이 지정 해주었는데, 이 값들을 다시 일괄적으로 수정 해주어야 할 때입니다. 해당 하는 값들을 열심히 찾아서 다시 바꾸어 주어야 한다는 것입니다. 얼마나 불편한 작업입니까.

유지보수에 도움이 되는 CSS 에서의 변수 사용

조금더 간단하게 문제점을 인식 해봅시다. #site-icon 을 포함한 3개 요소의 넓이를 32px 로 맞추고 싶은 경우를 예로 들어 보죠.

/* CSS 변수 사용 전 */
#site-icon     { width: 32px; }
#site-footer-icon  { width: 32px; }
#comment-avatar    { width: 32px; }

원래 CSS 로 작성하는 방식입니다. 각 요소의 width 값을 모두 32px 로 맞춰 주는 것입니다. 만약 이 경우 32px 값을 40px 로 수정하고 싶다면 3개의 라인을 모두 수정해줘야겠죠.

/* CSS 변수를 사용할 경우 */
[icon-width] = '32px';
#site-icon     { width: [icon-width]; }
#site-footer-icon  { width: [icon-width]; }
#comment-avatar    { width: [icon-width]; }

(이해를 돕기 위한 예제입니다. 실제로는 이렇게 사용 할 수 없어요.)

icon-width 라는 변수를 선언하고 32px 라는 값을 넣어 주었다고 해봅시다. 이러한 상태에서 각 요소의 width에 icon-width 라는 값을 넣어 주는 것입니다. 이 경우 32px 라는 값을 40px 로 수정 하고 싶다면, icon-width 선언 부분만 수정 하면 되겠죠.

아마 이러한 변수의 사용은 CSS 파일이 복잡할수록 유지보수에 큰 도움이 될 것입니다. 이제부터 위와 같은 방식으로 CSS 에서 변수를 사용하는 방법을 알아봅시다.

CSS 자체 변수 사용

CSS 에서 아직 실험적이긴 하지만 변수를 지원하고 있습니다. 사용 예제는 아래와 같습니다.

:root   {
    --icon-width: 32px;
}

#site-icon     { width: var(--icon-width); }
#site-footer-icon  { width: var(--icon-width); }
#comment-avatar    { width: var(--icon-width); }

CSS 자체적으로 지원하는 변수를 사용하려면 :root¹ 에서 변수명과 값을 선언 해주고, var()² 을 이용해 해당 변수의 값을 불러옵니다.

하지만 위에서 언급한대로 이 기능은 정식 기능이 아닌 실험적인 기능이고, Internet Explorer 나 다른 브라우저의 구버전 같은 경우 지원하지 않을 가능성³이 있기 때문에 아직은 사용하기에 조금 이른감이 있어 보입니다.

이 방식의 더욱 자세한 사항은 아래 모질라 웹페이지를 참고 하세요.

Using CSS variables – Mozilla Developer Network

PHP 를 이용한 CSS 변수 사용

위 방법이 모든 경우에 통하면 좋겠지만, 그렇지 않기 때문에 조금 다른 꼼수를 써보도록 합시다. 바로 PHP 를 이용해 웹페이지 소스에 스타일시트를 출력 해버리는 방법입니다. 워드프레스에서 사용 하는 형태로 예를 들어 보겠습니다.

스타일시트를 출력할 php 파일 세팅

<?php
    //Set Variables
    $width_icon     = '32px';
    $color_a    = '#d33';
?>
<style type="text/css">
    a           { color: <?php echo $color_a; ?>; }
    #site-icon      { width: <?php echo $width_icon; ?>; }
    #site-footer-icon   { width: <?php echo $width_icon; ?>; }
    #comment-avatar     { width: <?php echo $width_icon; ?>; }
</style>

위와 같은 형식으로 style.php 파일을 만들어 루트/css 디렉토리에 저장해봅시다. 조금 복잡해 보이지만 위와 같은 형식으로 PHP 파일을 작성해 웹페이지에 출력하면 마치 CSS 파일을 불러온 것과 같은 효과를 냅니다. 추후에 width_icon 을 수정 할 때는 변수 선언 부분만 수정 해주면 됩니다. 마찬가지로 링크의 컬러를 수정 하고 싶다면 color_a 라는 변수의 값만 수정 해주면 됩니다.

head 태그에서 PHP 파일 불러오기

이제 위에서 작성한 PHP 파일을 불러와 사용자에게 표시되는 페이지에 출력 해보도록 합시다. 당연히 스타일시트 정의는 head 태그 안에 있어야 겠죠?

<head>
    ...

    <?php get_template_part( 'css/style' ); ?>

    ...
</head>

get_template_part 함수를 이용해 루트/css 디렉토리에 저장된 style.php 를 불러와 출력합니다. 실제로 이를 적용한 웹페이지의 소스를 보면 위 내용이 그대로 페이지 소스에 출력 되어 있습니다.

응용하기: 워드프레스 테마 사용자 정의하기 값 불러와 사용하기

조금더 응용해 볼까요? 워드프레스 테마 설정인 사용자 정의하기(Customize) 에서 설정된 값을 불러와 사용해 봅시다.

<?php
    //Set Variables
    $width_icon     = '32px';
    $color_a    = get_theme_mod('color_link');
?>
<style type="text/css">
    a   { color: <?php echo $color_a; ?>; }
    #site-icon      { width: <?php echo $width_icon; ?>; }
    #site-footer-icon   { width: <?php echo $width_icon; ?>; }
    #comment-avatar     { width: <?php echo $width_icon; ?>; }
</style>

테마의 사용자 정의하기에서 color_link 라는 이름으로 링크 컬러를 선택 할 수 있도록 설정 해두었다면, style.php 파일에서 이를 불러와 color_a 변수에 이 값을 담고 이를 스타일시트에 적용 시킬 수 있는 것입니다.

물론 CSS 자체적으로 지원 하는 변수를 사용하면 가장 좋겠지만, 호환성 문제가 해결 되기 전까지는 PHP 를 이용해 우회하는 꼼수를 부려 보는 것도 나쁘지 않을 것 같습니다. 확실한 것은 변수를 사용해야지만, 유지보수가 쉬워진다는 점입니다.

:root 에 변수를 지정하는 것은 웹페이지 전역에서 해당 변수를 사용하겠다는 의미임 ↩
CSS 에서 선언된 변수를 호출하기 위한 함수로, 괄호 안에 변수명을 적으면 됨 ↩
CSS Variables Browser compatibility – Mozilla Developer Network ↩