CSS 코딩, 규격맞추기를 편하게 :)

이번에 워드프레스 스킨도 제작하고, 그곳에 링크한 사이트도 만들면서 정말 오랜만에 CSS 를 지겹게 만져봤습니다. 물론 워낙에 몸에 배어있는지라 괜찮았지만 이 말도 안되는 노동으로 힘들던 참에 옛날 불여우가 지원하던 확장기능중 하나가 생각나서 설치했습니다.

보통 CSS 제작후 엄청난 노동이 시작됩니다. 규격에 맞추어서 코딩후에 업로드, 그리고 업로드가 다 되면 Reload, 새로고침을 눌러서 확인을 하는 노동을 반복했습니다. 물론 저의 무지때문에.. 그랬겠죠.. 특히나 워드프래스의 스킨작업후 계정에 업로드 한 뒤의 수정작업은 가히 놀랄만한 노동을 부릅니다. 수정. 업로드. 새로고침 의 악순환.... ㅠ.ㅠ

하지만 불여우(Firefox)의 뛰어남으로.. :) 확장기능중에 Web Developer 라는 기능은 이 악순환을 막아줍니다. 업로드 단계가 필요가 없거든요. 물론 새로고침또한 필요가 없습니다. 인터넷 상에서 수정하고 확인이 됩니다.

이번에 CSS Design Korea 라는 CSS, 웹표준의 보급과 발전을 위한포럼에서 설문조사를 해봤더니 editplus 나 다른 특정한 CSS 프로그램들을 쓰시는 분들이 꽤나 되셨습니다. 하지만 불여우의 확장기능을 써 놓으신 분들은 없으시더군요.

이 구세주 같은 편한 확장기능을 혹시 모르셨다면 꼭 써보시기를 권장+ 권장에 협박까지 해드립니다.

1. 설치법은 간단합니다. 여느 타 플러그인처럼 http://www.update.or.kr 확장기는 사이트에 가셔서 Web Developer 를 다운받습니다. "개발도구" 카테고리에 있더군요.

2. 설치후 불여우를 껐다 다시 시작하시면 새롭게 도구바가 생겼을겁니다. 에디트 하고 싶으신 페이지에 가신후 그림처럼 CSS -> Edit CSS 를 클릭합니다. live css

3. 옆에 에디트모드가 뜹니다. 그곳에서 바꾸고 싶은 CSS 값을 바꾸어 주시면 실시간으로 적용된 페이지가 나타납니다.

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

요즘 점점 쌔게 불고 있는 웹표준화의 바람, 정말반갑기 그지없습니다. Go CSS