웹표준 코딩을 위한 파이어폭스의 다양한 확장기능을 이용해봅시다!
우선 파이어폭스를 다운로드 받습니다.
파이어폭스는 웹디자이너나 코더, 개발자를 위한 실로 다양한 기능을 제공합니다.
파이어폭스를 설치하셨다면 모질라사이트의 Addon 다운로드 페이지로 이동합니다.
저는 파이어폭스로 올블로그에 접속을 해보았습니다~
HTML 데이터와 / CSS 디자인 파일의 분리!!!
http://www.csszengarden.com
아까 설치했던 파이어폭스의 웹디벨롭퍼의 기능을 이용해서 CSS 파일을 꺼 보겠습니다
놀라지 마십시오! 정말 완벽한 구조의 문서원문이 출력됩니다.
웹2.0 시대에서 ajax, ucc, 블로그 등 많은 부분의 이슈가 있지만, 그래도 역시 가장기본적이고 중요한 것은 웹표준 코딩입니다.
웹표준 코딩의 기본은 HTML 과 CSS 의 분리입니다
구조화가 잘 된 HTML 파일하나면 있으면 CSS 파일만 여러개를 만들어가면서 손쉽게 디자인 리뉴얼을 할 수 있는 최대장점이 있습니다.
아직까지 대부분의 한국 사이트는 웹표준 규격을 준수하지 못하고 있습니다. 지금 수 많은 디자이너가 활동하고 있지만 웹표준을 공부하지 않는다면 정말 혼쭐이 나거나, 디자이너 숫자가 줄어들거나, 웹표준을 하고 못하고에 따라서 신분상의 위치마저 달라질지도 모릅니다. 너무 겁을 줬나요.. ㅎㅎ
여튼 파이어폭스의 이 부가기능을 잘 활용해가면서 작업하시면 많은 도움이 되리라 생각됩니다.
파이어폭스의 확장기능은 어마어마하게 많지만, 제가 실무에서 주로 사용하는 기능을 소개해 드렸습니다. 아직 모르고 계셨더라면 도움이 되었으면 합니다~ 웹표준 때문에 잠 못 이루는 모든 디자이너분들께 화이팅을 고하며!
Trackback Address >> http://monoeyes.com/trackback/84
-
Subject: Firefox 2 설치한 후 구글 검색 왜 이럴까
Tracked from 소프트웨어로 행복한 삶을 꿈꾸다 2007/02/25 14:05 deleteFirefox 2.0.0.2를 설치하고 이제부터 본격적으로 사용보려고 시동을 걸었다. 반가운 뉴스로, 미들스브로에 입단한 이동국이 드디어 프리미어 리그 경기에 출전했다고 한다. 그의 첫 출전에 대한
-
Subject: CSS 디자인 :: 어스프바 디자인
Tracked from For A While 2007/02/26 17:07 delete두번째로 CSS를 이용해서 디자인을 한 사이트.이 사이트를 제작함으로써 CSS에 대한 활용을 좀 더 자유롭게 할 수 있게 되었다.또한 이 사이트를 제작하면서 파이어폭스. 그리고 최근에 나온 MS In
-
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 라는 프로그램
-
Subject: css tip. FireBug 사용하기.
Tracked from DesignMyself 2007/11/06 09:59 deletexhtml 코딩 작업물의 구조를 알아보기 쉽게 도와주는 파이어폭스의 확장기능인 파이어버그에 대해서 알아보겠습니다. 파이어버그를 쓰면 블로그 본문의 글자를 바꾸고 싶은데 어디를 바꿔야하는지, 제목의 색은 어디서 바꿔야할지, 본문의 넓이는 어디를 수정해야하는지 쉽게 알수있습니다. 일일이 구조를 확인하고 css파일을 뒤질 필요가 없이 간단하게 수정할 위치를 파악할수 있습니다. 일단은 파이어폭스의 최신 버전과 파이어버그를 다운로드 받아 설치하도록 합시다...
-
Subject: 파이어버그 설치후 실행하니... 폰트가 일그러지는 원인 아시는분??
Tracked from 큐팅 권대리 2008/03/17 11:53 delete현재 브라우저를 파이어폭스를 사용하고 있는데, 웹표준화 작업을 함에 있어서 유용한 툴인듯 싶어서, 파이어버그라는 툴을 설치했습니다. 기존에는 잘사용했었는데... 이번에 컴터를 새로 포맷한후 다시 설치후, 실행시켰더니...스크린샷 이미지처럼 텍스트가 약간 일그러진것 처럼 표시가 되는데... 해결방법을 모르겠네요~~ 혹시 해결방법 아시는분 계시는가요? 도움의 손길 기다립니다. ^^;
댓글을 달아 주세요
오오. 멋지군요.
마침 스킨을 하나 만들고 있었는데.. 참조하겠습니다
올블로그 추천 한방~
워~ 올블 추천 한 방 감사드려요!
이쁜 스킨 만드시면 꼭 알려주세요~^^
이렇게 공들여서 정리해주시니 감사 감사...
한가지 팁 : 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
파이어폭스로 위 주소로 접속하신뒤에..
오측에 애드온 추가 버튼을 클릭하시면 됩니다^^