웹표준 코딩을 위한 파이어폭스의 다양한 확장기능을 이용해봅시다!

우선 파이어폭스를 다운로드 받습니다.

파이어폭스는 웹디자이너나 코더, 개발자를 위한 실로 다양한 기능을 제공합니다.
파이어폭스를 설치하셨다면 모질라사이트의 Addon 다운로드 페이지로 이동합니다.

사용자 삽입 이미지

파이어버그를 다운로드 받습니다


사용자 삽입 이미지

웹디벨롭퍼를 다운로드 합니다. 위의 두 프로그램을 다운로드 하실때는 파이어폭스에서 하면 편리하게 자동으로 애드온이 설치됩니다. 우선 파이어버그와 웹디벨로퍼를 설치하셨다면 파이어폭스를 실행하시고, 나름 잘 만들었다고 생각하시는 사이트에 접속을 해봅니다... 아니~ 꼭 잘 만든 사이트가 아니어도 되요~

저는 파이어폭스로 올블로그에 접속을 해보았습니다~


사용자 삽입 이미지
파이어폭스 우측하단에 있는 녹색 버튼을 클릭하면 파이어버그 창이 뜹니다. 이 기능이 정말 막강한데요, 제가 실무에서 자주 쓰는 유용한 기능을 중심으로 설명을 드릴게요^^ 나머지 기능을 알아가는 것은 여러분의 몫~ ^_~

사용자 삽입 이미지
하단 소스창에서 하위 레벨 태그로 접근을 하면, 웹사이트의 레이아웃을 분석해 볼 수 있습니다. div, table, tr, td 는 물론이고 이미지맵, 링크 등 세밀한 레이아웃을 알 수 있습니다. 화면은 올블로그의 실시간 인기글 내 반복되는 박스 div 에 마우스를 올렸을때 해당 소스가 나타내주는 레이아웃을 보여주는 화면입니다. 우측에는 사용된 CSS 코드까지 자동으로 매칭이 됩니다. 정말 환상적이죠? +_+)=b 굿!


사용자 삽입 이미지

이와는 반대로 홈페이지의 원하는 부분을 찍어서 해당부분의 소스코드를 바로 찾아주는 기능이 있는데, Inspect 를 이용하시면 됩니다. Inspect 버튼을 눌러서 활성화 시킨 상태에서 홈페이지에 마우스 포인터를 가져가보면, 레이어, 테이블, 링크, 이미지, 셀 등의 단위로 소스코드를 바로 찾아줍니다. 역시 우측하단에 CSS 스타일 시트까지 같이 찾아주는 모습입니다~^^

사용자 삽입 이미지

인스펙트로 레이아웃 수정을 원하는 부분을 선택후, CSS 스타일 시트를 껐다 켰다 하는 모습입니다. 해당 스타일을 적용했을때 안 했을때 모습을 볼 수 있으며, 또한 값의 수정도 가능합니다. 정말 편리한 기능입니다~

사용자 삽입 이미지
Layout 탭도 요긴한 기능이니 활용해보세요~ 패딩, 보더, 마진값등을 임의로 입력해보고 페이지의 레이아웃이 어떻게 변경되는지 한눈에 알아볼 수 있는 기능입니다~

자~ 그럼 여기서~ 웹표준코딩의 하이라이트!!
HTML 데이터와 / CSS 디자인 파일의 분리!!!

사용자 삽입 이미지
정말 완벽한 웹2.0 시대의 시맨틱한 웹표준 코딩을 자랑하고 있는 CSS 젠 가든의 홈페이지입니다.
http://www.csszengarden.com

아까 설치했던 파이어폭스의 웹디벨롭퍼의 기능을 이용해서 CSS 파일을 꺼 보겠습니다
사용자 삽입 이미지

놀라지 마십시오! 정말 완벽한 구조의 문서원문이 출력됩니다.

사용자 삽입 이미지
아까 접속한 CSS 젠 가든의 CSS를 적용시키지 않은 모습입니다.
웹2.0 시대에서 ajax, ucc, 블로그 등 많은 부분의 이슈가 있지만, 그래도 역시 가장기본적이고 중요한 것은 웹표준 코딩입니다.

웹표준 코딩의 기본은 HTML 과 CSS 의 분리입니다

구조화가 잘 된 HTML 파일하나면 있으면 CSS 파일만 여러개를 만들어가면서 손쉽게 디자인 리뉴얼을 할 수 있는 최대장점이 있습니다.
아직까지 대부분의 한국 사이트는 웹표준 규격을 준수하지 못하고 있습니다. 지금 수 많은 디자이너가 활동하고 있지만 웹표준을 공부하지 않는다면 정말 혼쭐이 나거나, 디자이너 숫자가 줄어들거나, 웹표준을 하고 못하고에 따라서 신분상의 위치마저 달라질지도 모릅니다. 너무 겁을 줬나요.. ㅎㅎ
여튼 파이어폭스의 이 부가기능을 잘 활용해가면서 작업하시면 많은 도움이 되리라 생각됩니다.

사용자 삽입 이미지
파이어폭스의 CSS 메뉴에서 View CSS 메뉴를 클릭하면 손쉽게 해당 사이트의 CSS소스를 볼 수 있습니다.

사용자 삽입 이미지
CSS 젠가든의 CSS 소스를 보고 있습니다~

파이어폭스의 확장기능은 어마어마하게 많지만, 제가 실무에서 주로 사용하는 기능을 소개해 드렸습니다. 아직 모르고 계셨더라면 도움이 되었으면 합니다~ 웹표준 때문에 잠 못 이루는 모든 디자이너분들께 화이팅을 고하며!

Trackback Address >> http://monoeyes.com/trackback/84

  1. Subject: Firefox 2 설치한 후 구글 검색 왜 이럴까

    Tracked from 소프트웨어로 행복한 삶을 꿈꾸다 2007/02/25 14:05  delete

    Firefox 2.0.0.2를 설치하고 이제부터 본격적으로 사용보려고 시동을 걸었다. 반가운 뉴스로, 미들스브로에 입단한 이동국이 드디어 프리미어 리그 경기에 출전했다고 한다. 그의 첫 출전에 대한

  2. Subject: CSS 디자인 :: 어스프바 디자인

    Tracked from For A While 2007/02/26 17:07  delete

    두번째로 CSS를 이용해서 디자인을 한 사이트.이 사이트를 제작함으로써 CSS에 대한 활용을 좀 더 자유롭게 할 수 있게 되었다.또한 이 사이트를 제작하면서 파이어폭스. 그리고 최근에 나온 MS In

  3. Subject: 파이어폭스 2.0과 IE 즐겨찾기 싱크 프로그램, Bookmarks Bridge

    Tracked from Pell's seer Blog 2007/04/01 20:47  delete

    불여우 2.0 이전버전에서는 FavoriteSync 0.3.1 애드온 프로그램을 사용하고 있었는데 2.0버전은 지원하지 않아서 이리저리 찾아보았습니다. 애드온 프로그램은 아니지만 Bookmarks Bridge 라는 프로그램

  4. Subject: css tip. FireBug 사용하기.

    Tracked from DesignMyself 2007/11/06 09:59  delete

    xhtml 코딩 작업물의 구조를 알아보기 쉽게 도와주는 파이어폭스의 확장기능인 파이어버그에 대해서 알아보겠습니다. 파이어버그를 쓰면 블로그 본문의 글자를 바꾸고 싶은데 어디를 바꿔야하는지, 제목의 색은 어디서 바꿔야할지, 본문의 넓이는 어디를 수정해야하는지 쉽게 알수있습니다. 일일이 구조를 확인하고 css파일을 뒤질 필요가 없이 간단하게 수정할 위치를 파악할수 있습니다. 일단은 파이어폭스의 최신 버전과 파이어버그를 다운로드 받아 설치하도록 합시다...

  5. Subject: 파이어버그 설치후 실행하니... 폰트가 일그러지는 원인 아시는분??

    Tracked from 큐팅 권대리 2008/03/17 11:53  delete

    현재 브라우저를 파이어폭스를 사용하고 있는데, 웹표준화 작업을 함에 있어서 유용한 툴인듯 싶어서, 파이어버그라는 툴을 설치했습니다. 기존에는 잘사용했었는데... 이번에 컴터를 새로 포맷한후 다시 설치후, 실행시켰더니...스크린샷 이미지처럼 텍스트가 약간 일그러진것 처럼 표시가 되는데... 해결방법을 모르겠네요~~ 혹시 해결방법 아시는분 계시는가요? 도움의 손길 기다립니다. ^^;

댓글을 달아 주세요

  1. BlogIcon Nyangkun 2007/02/24 11:22  address  modify / delete  reply

    오오. 멋지군요.
    마침 스킨을 하나 만들고 있었는데.. 참조하겠습니다 :)
    올블로그 추천 한방~

  2. BlogIcon 박군 2007/02/24 11:28  address  modify / delete  reply

    이렇게 공들여서 정리해주시니 감사 감사...
    한가지 팁 : Ctrl Shift C 를 눌르면 바로 Inspect 버튼 눌러진상태가 된다는.. ㅡ,.ㅡ;

  3. BlogIcon 와니 2007/02/24 15:36  address  modify / delete  reply

    와우 굉장한 기능이네요.
    근데 이걸 이용해서 남들 웹사이트 카피하는 일들이 더 빈번해지지 않을지;

    • BlogIcon 쏭군 2007/02/25 18:02  address  modify / delete

      예전처럼 확 긁어서 확 붙여넣는 스타일이 아니라...
      소스 부분부분 다 분석되니까요..(물론 디자인에 있어서)
      디자이너 스타일이라던가 좋은 부분은 많이 공유가 되는것 같아요..
      카피인가.. 퍽.. +_+)

  4. BlogIcon 일모리 2007/02/25 01:03  address  modify / delete  reply

    좋은 플러그인 이군요. 많은 분들이 단순 하드코딩을 주로 하시긴 하지만 이러한 툴 사용도 할만 할꺼 같습니다. 하지만 문제는.. ㅠㅠ 많은 문제들이 IE 에서 일어난다는... IE 에 있는 DEV TOOL 도 약간은 쓸만 합니다.

    ps 사파리에서 코멘트 박스가 가려지는 군요 ㅠㅠ

    • BlogIcon 쏭군 2007/02/25 18:02  address  modify / delete

      네, 항상 IE가 문제지요.. IE때문에 골치랍니다. .후덜덜...
      익스의 Dev tool 도 써볼게요.. 감사합니다..
      제 블로그는 그나저나 사파리에서 문제가;; 시간을 내서 스킨을 한 번 손봐야되겠네요~ ;)

  5. BlogIcon minq 2007/02/25 05:06  address  modify / delete  reply

    파이어버그를 오늘 처음 알게되어서,
    포스팅을 하려고 햇는데, 여기 훌륭한 포스팅이 벌써 있네요^^/
    Web Developer 는 또 ㅊㅓ음보는 거네요-ㅎㅎ
    당장 설치해봐야 겠어요~ㅎㅎ

    • BlogIcon 쏭군 2007/02/25 18:03  address  modify / delete

      웹디벨로퍼는 위에 기능 말고두... 아웃라인 추적이라던가.. 다양한 기능들이 있으니 직접 설치하셔서 이것저것 만져보시길 적극 권장드립니다.. ^^

  6. BlogIcon hwsj 2007/02/25 14:04  address  modify / delete  reply

    Firefox 설치하고나서 구글 검색에서 한글이 깨지는 상황이 발생합니다. 해결책을 아시는지요?

    • BlogIcon 쏭군 2007/02/25 18:04  address  modify / delete

      제가 알기로는 파이어폭스 문제는 아니고, 구글의 문제로 알고 있습니다. IE야 워낙 한글처리를 잘해주지만... 파폭은 인코딩을 정확하게 읽어와야 해서 생기는 문제인 것 같은데용;; 구글에서 인코딩 방식을 바꿔주는 수 밖에 없는 듯 합니다.
      우선을 꺠지는 검색창에 대고.. 자동이나 한국어로 우측 버튼 셋팅해서 사용하심이

  7. BlogIcon pei 2007/02/25 17:08  address  modify / delete  reply

    Web Developer 엄청나게 유용한 확장기능이죠...
    [사실 저거때문에, FF를 깔아놓고 있는...]

    • BlogIcon 쏭군 2007/02/25 18:05  address  modify / delete

      네, 저도 웹디벨로퍼랑 파이어버그 땜에 파폭을 쓴다는;;;; 뭐 크로스브라우징이나 속도 측면도 있지만.. 그 에 비하면 부가기능의 파워가 너무 막강하죠 ㅋ

  8. BlogIcon ZF. 2007/02/25 17:45  address  modify / delete  reply

    우와/ㅅ// 멋집니다! 스킨 만드는 게 더 쉬워지겠어요~_~

  9. 하나 2008/02/11 11:39  address  modify / delete  reply

    웹표준을 알게 된지 얼마되지않아 이래저래 혼자
    끙끙대며 알아보고 있는데
    정말 새로움에 연속입니당~
    좋은 정보 감사해요^ㅂ^

  10. 2008/06/20 15:08  address  modify / delete  reply

    웹디벨로퍼 어떻게 다운받는거예요??
    다운로드 페이지에 검색이 안돼서..^^;;
    끙끙되고 있네요..다른분들은 다 하신거같은데..
    쫌 알려주심..감사하겠습니다.~~

    • BlogIcon 쏭군 2008/06/26 00:30  address  modify / delete

      죄송합니다. 답이 늦었네요^^
      https://addons.mozilla.org/ko/firefox/search?q=developer&cat=all

      파이어폭스로 위 주소로 접속하신뒤에..
      오측에 애드온 추가 버튼을 클릭하시면 됩니다^^