웹표준 코딩을 위한 파이어폭스의 다양한 확장기능을 이용해봅시다!
우선 파이어폭스를 다운로드 받습니다.
파이어폭스는 웹디자이너나 코더, 개발자를 위한 실로 다양한 기능을 제공합니다.
파이어폭스를 설치하셨다면 모질라사이트의 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 소스를 보고 있습니다~
파이어폭스의 확장기능은 어마어마하게 많지만, 제가 실무에서 주로 사용하는 기능을 소개해 드렸습니다. 아직 모르고 계셨더라면 도움이 되었으면 합니다~ 웹표준 때문에 잠 못 이루는 모든 디자이너분들께 화이팅을 고하며!
오오. 멋지군요.
마침 스킨을 하나 만들고 있었는데.. 참조하겠습니다
올블로그 추천 한방~
워~ 올블 추천 한 방 감사드려요!
이쁜 스킨 만드시면 꼭 알려주세요~^^
이렇게 공들여서 정리해주시니 감사 감사...
한가지 팁 : Ctrl Shift C 를 눌르면 바로 Inspect 버튼 눌러진상태가 된다는.. ㅡ,.ㅡ;
오 좋은 단축키 감사합니다~ 역시 박군님이셔! +_+)b
와우 굉장한 기능이네요.
근데 이걸 이용해서 남들 웹사이트 카피하는 일들이 더 빈번해지지 않을지;
예전처럼 확 긁어서 확 붙여넣는 스타일이 아니라...
소스 부분부분 다 분석되니까요..(물론 디자인에 있어서)
디자이너 스타일이라던가 좋은 부분은 많이 공유가 되는것 같아요..
카피인가.. 퍽.. +_+)
좋은 플러그인 이군요. 많은 분들이 단순 하드코딩을 주로 하시긴 하지만 이러한 툴 사용도 할만 할꺼 같습니다. 하지만 문제는.. ㅠㅠ 많은 문제들이 IE 에서 일어난다는... IE 에 있는 DEV TOOL 도 약간은 쓸만 합니다.
ps 사파리에서 코멘트 박스가 가려지는 군요 ㅠㅠ
네, 항상 IE가 문제지요.. IE때문에 골치랍니다. .후덜덜...
익스의 Dev tool 도 써볼게요.. 감사합니다..
제 블로그는 그나저나 사파리에서 문제가;; 시간을 내서 스킨을 한 번 손봐야되겠네요~
파이어버그를 오늘 처음 알게되어서,
포스팅을 하려고 햇는데, 여기 훌륭한 포스팅이 벌써 있네요^^/
Web Developer 는 또 ㅊㅓ음보는 거네요-ㅎㅎ
당장 설치해봐야 겠어요~ㅎㅎ
웹디벨로퍼는 위에 기능 말고두... 아웃라인 추적이라던가.. 다양한 기능들이 있으니 직접 설치하셔서 이것저것 만져보시길 적극 권장드립니다.. ^^
Firefox 설치하고나서 구글 검색에서 한글이 깨지는 상황이 발생합니다. 해결책을 아시는지요?
제가 알기로는 파이어폭스 문제는 아니고, 구글의 문제로 알고 있습니다. IE야 워낙 한글처리를 잘해주지만... 파폭은 인코딩을 정확하게 읽어와야 해서 생기는 문제인 것 같은데용;; 구글에서 인코딩 방식을 바꿔주는 수 밖에 없는 듯 합니다.
우선을 꺠지는 검색창에 대고.. 자동이나 한국어로 우측 버튼 셋팅해서 사용하심이
Web Developer 엄청나게 유용한 확장기능이죠...
[사실 저거때문에, FF를 깔아놓고 있는...]
네, 저도 웹디벨로퍼랑 파이어버그 땜에 파폭을 쓴다는;;;; 뭐 크로스브라우징이나 속도 측면도 있지만.. 그 에 비하면 부가기능의 파워가 너무 막강하죠 ㅋ
우와/ㅅ// 멋집니다! 스킨 만드는 게 더 쉬워지겠어요~_~
오~ 멋진 스킨 기대해도 되겠죠?^^
웹표준을 알게 된지 얼마되지않아 이래저래 혼자
끙끙대며 알아보고 있는데
정말 새로움에 연속입니당~
좋은 정보 감사해요^ㅂ^
네, 첨엔 어렵지만 시간이 지날수록 재미있을거에요..^^ 열심히 공부하세용^^
웹디벨로퍼 어떻게 다운받는거예요??
다운로드 페이지에 검색이 안돼서..^^;;
끙끙되고 있네요..다른분들은 다 하신거같은데..
쫌 알려주심..감사하겠습니다.~~
죄송합니다. 답이 늦었네요^^
https://addons.mozilla.org/ko/firefox/search?q=developer&cat=all
파이어폭스로 위 주소로 접속하신뒤에..
오측에 애드온 추가 버튼을 클릭하시면 됩니다^^
좋은 정보 감사합니다!!^^
우어.. 벌써 2011년이네요..ㅠㅠ
새해 복많이 받으시고 항상 감기 조심하십시요^^
방문 감사합니다!
새해 복 많이 받으시고~ 감기 조심하세요^^