in CSS, 워드프레스

워드프레스에서 다이나믹 CSS 임포트

디지털 웹 잡지 CSS 구조화에 대한 좋은 글이 올라왔다. CSS 구조화의 중요성은 사이트의 구조화 만큼 중요한 작업이다. 제작자마다 각각 CSS 구조화에 대한 다양한 벙법이 사용하고 있는데, 그 방법들의 개념과 장/단점을 쉽게 설명해주고 있다.

워드프레스는 잘 구조화된 블로그 툴이다. 백문이 불여일견이라고, 직접 사용해보면 그 아름다움에 빠질 것이다. 특히 워드프레스의 템플릿 태그와 템플릿 파일들을 사용하다보면, 자신도 모르게 사이트와 (x)Html, CSS의 구조화의 왕도를 걷게 될 것이다.

워드프레스에서 CSS를 효율적으로 사용하는 방법에는 여러가지가 있다. 웹그래픽스.com에서도 이와 관련된 내용을 소개했었는데, 현재 내 사이트는 웹그래픽스와는 다른 방법으로 body에 ID를 줘서, 각 템플릿 파일의 스타일을 조정하고 있다. (어느 방법이 좋은지는 사용하기 나름?)

현재 Hooney.net V3에서 사용중인 Body 코드 :

">

현재 Hooney.net V3에서 사용중인 CSS 코드 일부 :

/* =layout
--------------------------------------------------*/
#wrap {width:790px;padding:0 20px;}
#header {margin:0 -20px 20px;}
#subcon {float:left;display:inline; /*ie hack */}
#col1 {float:left;width:180px;}
#col2 {float:right;width:250px;text-align:left;}
#footer {clear:both;margin:0 -20px;padding-top:70px;}

/* =layout =custom
--------------------------------------------------*/
#home #subcon {width:450px;}
#home #contents {margin:0 0 0 470px;}
#blog #contents {float:left;width:570px;}
#blog #subcon {	float:right;width:200px;margin-left:20px;}

소스를 보면 알겠지만, Body에 할당된 ID에 따라서 레이아웃을 바꾸고 있다. 이 방법은 많은 CSS 개발자들이 사용하는 방법으로, (x)Html 마크업의 수정없이 CSS만으로도 효과적인 레이아웃 및 기타 스타일 조정에 유용하다.

이 방법을 좀 더 응용하면, 더욱 구조적인 CSS 파일을 만들 수 있다. 아무래도 디지털 웹 잡지에서 소개한 글의 내용이 힌트를 줬다. 이방법은 CSS 임포트(@import)를 활용하여 CSS를 분리하는 것이다. 즉 wp의 템플릿 태그를 활용하여, CSS를 임포트하는 것이다.

header 템플릿 파일에서 CSS를 임포트하는 부분을 아래처럼 코딩한다.

@import "default.css";
@import ""layout.css;"
@import "color.css";

이렇게 하면, 각 템플릿마다 다른 CSS 파일을 임포트 시킬 수 있다. 그러므로써, 웹문서에 포함되는 CSS 파일의 크기를 줄일 수 있으며, 결과적으로 더욱 효율적인 사이트제작과 유지/보수가 가능해진다.

이 방법을 왜 미리 생각하지 못했는지.. 내 자신이 한심할 뿐이다. 지금 당장 내 CSS 파일부터 조각내서 효율적인 CSS 관리를 해야 겠다. ^^;

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. 저도 css 를 나누어 페이지마다 적용하는 부분은 보고 있었지만 서버사이드 쪽에서 해주는쪽은 특별히 생각치는 않고 있던 부분이었네요. 이번것(?)에 도움이 좀 되겠군요 🙂

  2. 저도 조만간 CSS를 구조화시켜야 할 것 같습니다. 많이 하다보면 실력이 늘겠죠? ^^

    그나저나, 이넘의 Geshi 구문강조 플러그인은 몇몇 부분에서 항상 말썽을 피우네요. 조만간 플러그인을 바꾸던지 해야겠습니다. -_-;;

  3. Quickplay님/ 아직 제 사이트도 css를 구분하지 못했답니다. 생각해보니, 제가 만든 WP 템플릿 파일들도 10줄 미만의 코드로 만들어질 때가 있는데, CSS 파일 크기가 너무 큰 것 같네요.

    CSS 구조화에 대해 좀더 깊게 생각해봐야 겠습니다. ^^;