스킨의 CSS분석을 쉽게 해주는 Web-developer 도구모음

서문

CSS파일의 인클루드는 웹페이지의 기능과 디자인을 분류했다는 점에서 획기적입니다. 아시다시피 티스토리 스킨도 보통 위와 같이 skin.html과 style.css 두 파일을 기초로 만들어집니다. 보통은 div나 span을 이용하여 해당부분을 감싼다음 id나 class로 선언하여 CSS파일안에서 조정하는 방식을 이용합니다.

이 방식은 디자인을 한꺼번에 바꿀때나 class에 종속시킬 때 아주 유용합니다. 하지만 한가지 문제점이 있습니다. CSS파일을 바꿀때 선언문들로만 가득차 있어서 해당부분이 어디에 있는지 찾기가 힘들다는 점입니다. 특히나 다른사람이 작성한 스킨을 수정할 때는 어떠한 이름으로 id나 class를 선언했는지 알 수 없기 때문에 더 힘든 경우가 많습니다. 물론 개발자분들이나 태그를 좀 아시는 분들은 아래와 같은 툴 없이도 간단히 소스보기를 통하여 해당부분을 찾으실 수 있습니다. 하지만 저같이 초보블로거들은 CSS의 해당선언문 찾기가 굉장히 어렵기 때문에 아래의 툴이 매우 유용합니다. 

오늘 소개할 툴은 초보자들이 접근하기 어려운 CSS 수정시 이를 직관적으로 웹페이지상에서 보여주는 툴입니다.  이 툴은 꼭 CSS수정을 위한것이라고는 볼 수 없는 프로그램입니다만 블로그수정을 염두하고 포스팅을 했으므로 우선은 이 기능에 중점을 맞추어 소개하고자 합니다. 설치해보시면 아시겠지만 여러가지 기능을 포함하고 있어 블로그 수정뿐만 아니라 웹페이지 교정이나 분석에도 유용하게 사용할 수 있습니다.

바로 아시는 분들은 다 아는 Web-Developer 도구모음이라는 것인데 Firefox에 부가기능형태로 이루어집니다. 아래의 과정을 따라서 설치하시면 쉽게 적용할 수 있습니다.


1. 설치

위 툴은 Firefox의 부가기능형태로 배포되기 때문에 Firefox가 반드시 필요합니다. Firefox가 없으신분은 Firefox를 설치하시기 바랍니다. 아래 파일은 Firefox 3.5.7 한글버젼입니다.

Firefox Setup 3.5.7_kor.exe

Firefox를 설치하셨으면 도구 - 부가기능으로 들어갑니다.

그럼 아래와 같은 창이 뜨는데 부가기능 검색창에 "Web-developer"라고 검색합니다. 혹시 에러가 뜨시는 분은 아래그림처럼 부가 기능 모음 링크를 따라가 그곳에서 검색하여 설치합니다.

설치가 완료되면 아래와 같은 창이 뜹니다.

2. 적용

보통은 도구모음창이 바로 뜨는데 혹시 안뜨시는 분들은 보기 - 도구 모음 - Web Developer 도구모음을 클릭하여 도구창에 띄워주시기 바랍니다.

아래와 같이 새로운 툴바가 생겼습니다.

3. CSS의 ID와 CLASS보기

CSS를 수정하려면 해당부위가 어떤 id나 class로 정의되어 있는지를 봐야 합니다. 여러가지 기능이 있지만 여기서는 이 기능만 보도록 하겠습니다.

정보 - ID와 Class 정보 표시를 누릅니다.

그러면 아래와 같이 id, class가 정의된 부분의 이름을 보여줍니다.

예를 들어서 블로그 설명부분을 고치려고 생각한다고 해 봅시다.

블로그 설명 위 부분에 보면 .blog_description이라고 정의되어 있습니다. 즉, 이부분을 고치려면 style.css에서 .blog_description로 검색하여 해당부분의 스타일 정의를 고쳐주면 됩니다.
 

위 툴은 CSS유효성 검사 및 링크보기, 앵커보기, 창크기 분석등 다양하게 사용할 수 있습니다. 그러므로 스킨을 수정하려는 생각을 가지신 분이라면 꼭 한번 사용해 보시기 바랍니다.

div, span의 style지정에 대한 내용은 따로 포스팅하여 알아보도록 하겠습니다.