CSS 스타일링, 규격 맞추기를 돕는 툴

최근 워드프레스 스킨을 손보며, 추가적으로 링크된 사이트도 제작하다 보니 오랜만에 CSS 를 지겹게 만져봤습니다. 일반적으로 포토샵 시안이 결정되면 노동이 시작됩니다. 규격과 사이즈에 맞추어 코딩, 저장, reload 새로고침, 확인 후 수정을 반복하는 번거로움이 대부분 필자의 무지함에서 비롯되는 것이겠지만 이 반복 노동을 획기적으로 개선해주는 도구가 있습니다.

불여우(Firefox) 브라우저의 확장기능인 Web Developer 는 업로드 전 실시간으로 수정되는 결과물을 브라우저에서 직접 보여주는 툴입니다. 웹상에서 수정과 결과물 새로고침 없이 확인하게 해주기 때문에 작업시간이 단축 될 뿐 아니라 오타로 인한 에러를 찾아낼 수 있습니다.

최근 웹표준의 보급과 발전을 위한 포럼 CSS Design Korea 에서 실시한 설문조사에 따르면 editplus 나 기타 CSS 프로그램들을 쓰는 분들에 반해 이 Web Developer 를 활용하시는 분은 없는듯 했습니다. 추천드립니다.

설치방법

1. 설치법은 간단합니다. 여느 타 플러그인처럼 http://www.update.or.kr 확장기는 사이트에 가셔서 Web Developer 를 다운받습니다. “개발도구” 카테고리.
2. 설치후 불여우를 껐다 다시 시작하시면 새롭게 도구바가 생겼을겁니다. 에디트 하고 싶으신 페이지에 가신후 그림처럼 CSS -> Edit CSS 를 클릭합니다.  
3. 옆에 에디트모드가 뜹니다. 그곳에서 바꾸고 싶은 CSS 값을 바꾸어 주시면 실시간으로 적용된 페이지가 나타납니다.

CSS 적용을 확인하는 용도로도 좋지만 다른 웹페이지의 CSS 스타일링을 공부하는데도 꽤나 많은 도움이 되겠네요.