in 워드프레스, 웹 디자인

CSS 구조화의 王道?

오늘 새벽 0시쯤, 문득 워드프레스 테마를 제작하는 것보다 CSS만 수정하는 것이 쉽고, 재밌을 것 같은 생각이 들었다.

기왕이면 기본 테마인 큐브릭의 CSS를 수정하고 싶었지만, 페이지 리스트가 헤드 템플릿에 포함되고 php 함수도 자체적으로 포함되어 xhtml 구조가 좀 더 매력적인 브릭스 테마를 수정하기로 결정했다.

몇일 전부터 만들고 있던 (가칭) Beauty of Korea 테마의 CSS 소스를 브릭스 테마의 CSS에 덮어 씌우는 작업을 3시간 정도 진행했다. 브릭스 테마의 구조를 대충만 확인하고 id와 class 이름이 다른 것들을 수정하다보니 생각보다 시간을 많이 뺏겼다.

어제 새벽만 해도 수정한 CSS가 예상과 달리 맘에 들지 않았었는데, 아침에 포스트의 헤딩과 사이드바 부분을 CSS로 장식하니 그나마 좀 괜찮다. 특히 가로 800을 기준으로 제작된 브릭스 테마의 넓이값을 %로 수정했더니 집에서 1280×1024 해상도로 블로그를 봐도 여백이 그리 크게 느껴지지 않은 점이 가장 맘에 든다. (물론, 800×600에서도 잘 보인다. ^^)

파이어폭스에서 테스트하다보니 IE에서 깨지는 부분이 많다. 이제 겨우 CSS 30% 정도만 수정한 것 같은데, 언제쯤 완성할 수 있을지 갑갑하다. ㅜ.ㅜ

또한 넓이값을 %로 잡다보니 사이드에 배경을 넣는 부분이 문제가 생긴다. 여러 CSS 레이아웃 관련 사이트들을 뒤져보니 정답은 display:table-cell; 방법밖에 없는 듯 싶다. 이 방법은 한번도 사용해본 적이 없기에 많이 망설여진다.

내가 만들지 않은 CSS를 수정하는 것이 생각보다 쉽지 않다. 머랄까.. Xhtml는 공개된 원론적인 부분에 따라 구조화되어 가는 것에 비해서 CSS는 개발자의 개성을 많이 따르는 것 같다.

나의 경우에는 Xhtml 코딩 순서에 따라서 CSS를 제작해가지만, 브릭스 테마의 경우에는 레이아웃, 폰트, 색상등을 모두 구조화시켜서 id와 class의 속성을 각각 설정하다보니 ctrl + F로 찾는데 조금 복잡하다. 하지만, 덕분에 CSS도 Xhtml 이상으로 구조화할 수 있다는 것을 알게 됐다.

구조화의 길은 아마.. 끝이 없는 것 같다. CSS의 왕도를 찾는 것보다 개척해야 할 것 같다. ㅜ.ㅜ

정말 오랫만에 블로그에 포스트한다. 지난 몇일동안 블로깅에 대한 쓸데없는 부담감을 갖지 않았나 싶다. 좀 더 자연스럽게~ 즐겁게 블로깅을 즐겨야 겠다.