'파이어폭스'에 해당되는 글 6건
- 2008/10/15 firefox 3.1에서 font-face 구현되다 (3)
- 2008/07/27 firebug에 쓸수 있는 5가지 익스텐션! (1)
- 2008/04/01 파이어폭스 검색엔진 최적화를 도와주는 웹마스터를 위한 플러그인 SeoQuake
- 2008/02/12 파이어폭스(Firefox 2.0.0.12) 에서 파이어버그(firebug 1.05) a 태그를 inspect 하지 못하는 에러 발생.
- 2007/12/20 파이어폭스 웹브라우저의 메가쓰나미 플러그인 세트! (5)
- 2006/07/24 브라우저의 대세가 FF로 기울려면? (1)
firefox 3.1에서 font-face 구현되다
분류없음 2008/10/15 16:19
@font-face 는 사용자의 PC에 설치되어있지 않은 글꼴을 보여주는 디자인적으로 아주 중요한 CSS 속성입니다.
아래와 같이 url에 임베딩하려는 글꼴파일이 위치한 경로를 적으면 해당 글꼴이 사용자의 PC에 다운로드되어져
여러 폰트에 의한 디자인적인 효과를 줄수 있습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>글꼴 테스트</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print">
@font-face {
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt")
}
H1 { font-family: "Robson Celtic", serif }
</STYLE>
</HEAD>
<BODY>
<H1> 이 제목은 Robson Celtic을 사용하여 디스플레이된다.</H1>
</BODY>
</HTML>특히나 한글의 경우 윈도우즈에서는 웹에서 사용할수 있는 폰트가 굴림과 돋음밖에 없고
비스타에 접어들어서야 맑은 고딕이 추가된 상태입니다.
MS계열의 브라우저는 eot 라는 확장자를 사용하는 웹폰트 기술을 사용하여
@font-face 속성을 이미 예전에 구현하였고
다른 브라우저는 @font-face 가 표준규격을 비롯한 여러가지 문제로 구현되지 않았었습니다.
이번에 파이어폭스가 3.1로 업데이트를 하면서 @font-face를 구현하였다고 합니다.
http://developer.mozilla.org/index.php?title=En/CSS/%40font-face
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>사용방법은 기존의 방법과 차이는 없습니다.
다만 MS계열의 브라우저는 eot라는 확장자의 웹폰트 경로를 url에 적어야 하고
파이어폭스는 ttf 의 트루타입폰트를 url에 입력해야합니다.
그래서 사용방법에는 차이가 없지만 그 방식에서 차이가 있기에
IE와 FF 양쪽 브라우저에서 모두 font-face를 동일하게 적용시킬수는 없지만
이번 파이어폭스의 업데이트로 인해서 한결 CSS의 활용이 풍부해질것 같습니다.
Trackback : http://trend21c.tistory.com/trackback/430
-
-
joogunking 2008/10/19 22:06
MS는 왜 TTF를 이용하지 않고 eot를 만든걸까요?
개인적으로 웹페이지 폰트무시를 사용하고 있지만 반가운 소식입니다. 감사합니다.
firebug에 쓸수 있는 5가지 익스텐션!
분류없음 2008/07/27 20:03
원문 : http://www.webmonkey.com/blog/The_Five_Best_Firebug_Extensions
파이어버그(firebug)와 관련된 5가지 익스텐션을 소개해드립니다.
1. YSlow (다운로드)
가장 잘 알려져있는 firebug 익스텐션인 YSlow입니다.
yahoo에서 발표한 웹사이트 최적화 항목들에 대해서
해당 홈페이지가 어떤 등급을 나타내는지 보여줍니다.
이를 통해서 자신의 웹사이트가 어떤 부분에서 성능개선이 요구되는지 확인할 수 있습니다.
2. firecookie (다운로드)
firebug에는 왜 이런기능이 없나 항상 생각했는데 좋은 익스텐션이 있군요.
저는 ncookie 라는 익스텐션을 그간 사용하고 있었는데 firecookie로 갈아타야겠습니다.
이 익스텐션의 기능은 내 컴퓨터에 설치되어있는 모든 쿠키들을 볼수 있습니다.
쿠키 값은 물론 수정가능합니다.
3. firephp (다운로드)
http://www.firephp.org/
php와 연동해서 firebug의 콘솔 탭에서 php버그를 확인할수 있습니다.
이 익스텐션은 워낙에 설명해야할 부분이 많으니 이쯤에서 소개 마치도록 하고
정확한 사용법에 대해서는 홈페이지를 참고하세요.
참고로 php5 이상에서 사용가능합니다.
4. Pixel Perfect (다운로드)
캡쳐 사진을 보면 알수 있듯이
실제 웹페이지와 비교해서 정확한 픽셀을 맞추도록 도와주는 익스텐션입니다.
5. Rainbow (다운로드)
firebug의 자바스크립트에 색상을 입혀줍니다.
그간 너무 심심하게 검정색으로만 나왔는데 좀더 자바스크립트 코드보기가 한결 쉬워지겠군요.
3, 4, 5번 익스텐션은 아직 테스트단계로 모질라에서 다운로드를 시도할 경우
로그인을 필요로 합니다. 참고해두시기 바랍니다.
또한 3, 4, 5 익스텐션은 이왕이면 파이어폭스 및 파이어버그 최신버전에서 사용하시는게
안정성이 있는것 같아보입니다.
파이어버그 만세!
Trackback : http://trend21c.tistory.com/trackback/366
-
Subject 프리버즈의 생각
2008/07/28 10:15
firebug에 쓸수 있는 5가지 익스텐션 우와 5개 다 좋아~~~~~~~~~~~~~~~~~~~~ YSlow빼곤 다 몰랐던거야~~~~~~~~~ >_<
파이어폭스 검색엔진 최적화를 도와주는 웹마스터를 위한 플러그인 SeoQuake
분류없음 2008/04/01 22:53
웹마스터들을 위한 플러그인이라고 할수 있겠네요.
SeoQuake
플러그인을 설치하고 활성화 시키면
다음과 같이 웹서핑시에 상단에 Seo 와 관련된 정보들을 보여줍니다.
이 보여주는 정보에 대해서는 세부 설정을 통해서 얼마든지 변경할수 있습니다.
위의 내용에서 제일 왼쪽부터 보면
구글 페이지랭크, 구글 인덱스갯수, 야후 순위, 야후 인덱스 뭐 이런식으로 쭉 정보가 나타납니다.
http://ff.seoquake.com/
나머지 부가기능에 대해서는 해당 홈페이지 참고해주세요~!
Trackback : http://trend21c.tistory.com/trackback/335
그날이후로 firebug를 사용해서 a태그를 inspect 하려고 하면
HTML탭에서 style탭에 a태그에 적용된 스타일이 보이지 않는 현상이 발생하네요.
버그 눈으로 직접확인하기
http://users.pandora.be/fluppe/Firebug/firefox-linkproblem.html
firefox 2.0.0.12와 firebug 1.05 버전을 쓰고 계신분들은
링크 이동하셔서 firebug를 켜시고 a태그를 inspect 하시면 style 탭에 아무것도 나오지 않음을
확인할수 있습니다.
a뿐만아니라 a 엘리먼트의 자식 엘리먼트 예를 들어 span등도 style에 표시되지 않습니다.
처음에는 설마 firefox가 문제일줄은 모르고 어딘가 CSS파일에 잘못된게 있겠다 싶어서
눈빠지게 찾아봤는데 CSS는 정상이었습니다.
그래서 확인해 보니
버그질라리포팅
구글코드firebug
구글firebug그룹
firefox 2.0.0.12
firebug 1.05
에서 발생하는 에러라는군요. 정확히는 firefox의 PreferenceStyleSheet 관련한 에러라고 하는군요.
버그질라에서는 이미 버그리포팅이 되었고요.
그런데 정확히 언제 수정이 반영되어서 업데이트가 되는지는 언급이 없어서 잘 모르겠군요.
임시방편으로
http://fireclipse.xucia.com 에서
firebug 1.10b 버전을 설치하시면 정상적으로 a 태그 style이 나타납니다.
살다보니 별일도 다있군요.
Trackback : http://trend21c.tistory.com/trackback/330
파이어폭스 웹브라우저의 메가쓰나미 플러그인 세트!
분류없음 2007/12/20 22:56
물론 다른 출중한 기능들도 많이 있지만
뭐니뭐니해도 다양한 플러그인이 파이어폭스를 더욱 살찌우는것 같다.
오늘은 내가 쓰고 있는 아주 유용한 파이어폭스 플러그인에 대해 소개할까 한다.
사실 욕심쟁이 처럼 저만 알고 쓸려고 했는데 오늘 큰맘먹고 공개합니다.
언급된 플러그인 말고도 포스팅 읽고 계시는 분께서 아주 유용하게 쓰는 플러그인 있으면 소개해주고 가세요.
1. 웹개발의 정점 firebug
자바스크립트를 포함한 ajax는 물론 css, html 및 클라이언트측 웹개발에 너무 유용하게 쓰이는 툴입니다.
파이어버그를 설치한뒤 파이어버그를 실행시키면
위의 이미지와 같이 HTML 구조를 한눈에 쉽게 볼수 있고 우측에는 현재 내가 가르킨 엘리먼트에 적용된
CSS는 물론 레이아웃 형태 DOM까지 볼수 있다.
내가 가르킨 엘리먼트에 해당하는 웹페이지의 영역에 다음과 같이 보기 쉽게 표시도 해준다.
파란색은 실제로 콘텐츠의 영역이고 보라색은 padding 그리고 노란색은 margin영역이 표시되어
한눈에 보기 쉽습니다.
또한 하단 우측의 layout영역에는 엘리먼트의 정확한 픽셀 (offset은 물론 width, height, border, padding, margin) 수치가 나타납니다.
DOM에서는 자바스크립트 개발시에 아주 유용하게 쓸수 있는 정보를 제공함은 물론 디버깅도 아주 쉽습니다.
더 많은 기능을 설명하고 싶지만 다른 유용한 플러그인들이 자기차례를 기다리고 있기때문에 넘어갑니다.
다운로드 : https://addons.mozilla.org/ko/firefox/addon/1843
2. FF 의 렌더링을 IE같이~ IE Tab
예전에 홈페이지(물론 지금도 상당수가 그렇지만) 개발은 대부분 IE에 촛점이 맞추어져
IE식으로 개발되어 IE에서는 정상적으로 보이지만 FF에서 볼때 레이아웃이 흐트러진 모습을 보기도 합니다.
이럴때 아주 요긴하게 쓰이는 IE탭 플러그인 입니다.
주소표시창 바로 왼쪽에 보이는 아이콘이 IE탭인데요. 클릭하면 내가 현재 보고 있는 웹페이지를
IE형식으로 렌더링 해서 보여줍니다.
그럼 아이콘이 다음과 같이 변하는데 이때 한번더 클릭해주면 다시 파이어폭스 렌더링으로 되돌아오고요.
이게 좀 번거롭다고요?
그럴땐 아래와 같이 필터를 적용하면
내가 등록한 웹사이트는 항상 IE형식으로 렌더링 하게끔 해준답니다.
다운로드 : https://addons.mozilla.org/ko/firefox/addon/1419
3. 간단한 CSS Viewer
뭐 거추장 한거 없이 CSS만 확인하기에 딱 좋은 플러그인
IE탭 왼쪽에 보이는것이 CSS 뷰어 플러그인 입니다.
클릭하면 다음과 같이 아이콘이 활성화 되는데요.
이렇게 활성화된 상태에서 웹페이지의 특정영역(엘리먼트)를 가리키게 되면
해당 엘리먼트에 적용된 CSS가 아주 적나라하게 드러납니다.
간단히 CSS만 한눈에 확인하고자 할때 이런 플러그인 만한게 없죠.
다운로드 : https://addons.mozilla.org/ko/firefox/addon/2104
4. N cookies 쿠키에디터
이 플러그인은 아주 쉽게 웹사이트의 쿠키를 생성 및 조작해주는 플러그인입니다.
쿠키란 사용자 컴퓨터안에 해당 사용자의 웹사이트와 관련된 특정 정보가 담겨지는 그런것을 말하는데요.
보통 쿠키는 내가 한번 로그인했던 웹사이트에 다시 방문했을때
내 아이디가 미리 찍혀나와있다거나,
이런 용도로 아주 유용하게 사용할수 있습니다.
이러한 쿠키를 조작하는 플러그인입니다.
N cookie를 실행하면 위와 같은 창이 나타나는데요. 상단의 인풋박스에 웹사이트명을 검색하면
해당 웹사이트가 내 컴퓨터에 저장한 쿠키 목록이 나타납니다.
이 웹사이트에 새로운 쿠키를 생성하고자 할때 하단에 add버튼을 클릭하면
몇가지 정보만 간단히 입력하는 방식으로 손쉽게 쿠키를 생성시킬수 있습니다.
또한 쿠키 조작도 가능합니다.
edit 버튼을 클릭하면 해당 쿠키 내용이 나타납니다.
※ n cookie를 활용한 아주 좋은 팁 :
dcinside는 성인인증이 확인된 사용자의 컴퓨터에
adult_check라는 쿠키를 저장합니다.
그런데 쿠키의 유효기간이 짧아서 다음에 방문하게 되면 또한번 성인인증을 해야하고
이러한 불편함이 있죠.
이때 쿠키의 만료시간을 거의 한참뒤의 시간으로 조작하면
다음방문부터 성인인증을 하지 않아도 성인인증이 된것처럼 작동하게 됩니다.(어린이 여러분 악용하지 마세요)
다운로드 : https://addons.mozilla.org/ko/firefox/addon/573
5. MeasureIt 브라우저속의 자
브라우저속의 자.
한마디로 픽셀계산을 해주는 자(ruler)로 보면 되겠습니다.
설치를 하게되면 브라우저하단 상태표시줄에 자 모양의 아이콘이 생성됩니다.
클릭을 하게 되면 다음과 같이 아이콘이 활성화 되는데요.
그리고 웹페이지에서 영역을 드래그하면 아래와 같이 width와 height를 계산해 준답니다.
다운로드 : https://addons.mozilla.org/ko/firefox/addon/539
6. screen grab 캡쳐
캡쳐 플러그인 입니다.
화면속의 내용을 급하게 캡쳐하고 싶을때 아주 손쉽게 해당영역을 캡쳐할수 있습니다.
설치가 완료되면 브라우저 하단 상태표시줄 우측에 모니터모양의 아이콘이 생성됩니다.
이 아이콘을 클릭하면 몇가지의 메뉴가 나오는데요.
뭐 간단한 영어 되겠습니다.
save메뉴를 선택한뒤 selection 을 선택하고 나면
화면의 색상이 반전되면서 영역을 드래그 할수 있게 됩니다.
드래그가 완료되는 파일이 저장된답니다.
저장되는 파일의 형식은 jpg와 png 파일로 선택할수가 있는데요.
gif로 저장이 안된다는점이 살짝 아쉽긴 하네요.
다운로드 : https://addons.mozilla.org/ko/firefox/addon/1146
7. 색을 뽑아낸다 colorpicker
가끔 포토샵처럼 스포이드로 어떤 부분을 클릭하면 그 부분의 색상코드가 나오는 그런거.
부러우셨죠?
이미 그런 툴을 다운 받아서 설치하셔서 쓰고 계시다고요?
이 플러그인은 컬러픽커(마우스로 클릭한 부분의 색상코드를 알려줌) 의 기능을 하는 플러그인입니다.
설치하면 하단의 상태표시줄 좌측에 스포이드포양의 아이콘이 생성됩니다.
클릭하고 컬러를 뽑아내고 싶은 부분을 클릭하면 끝!
설명은 이만 하고 패스~
다운로드 : https://addons.mozilla.org/ko/firefox/addon/271
8. 아직죽지 않았다 web developer
이 툴 역시 개발자에게 아주 유용한 툴입니다.
firebug가 나타나서 위상이 많이 떨어졌지만 그래도 유용한 web developer 입니다.
css를 끄거나 쿠키를 모두 삭제하거나 페이지의 그리드를 본다거나
페이지의 정보를 본다거나, 브라우저의 사이즈 조절, 이미지 모두 끄기
아무튼 잡다한 모든 기능이 다들어있습니다.
참고 : Ctrl + Shift + h 사뿐히 눌러주시면 해당페이지의 validation 을 체크합니다~
Ctrl + Shift + h는 url을 통해서 w3c validator로 페이지의 validation을 체크하는데요.
보안이 요구되어 외부의 w3c validator가 접속할수 없는 페이지의 HTML validation을 체크하려면
Ctrl + Shift + A 를 누르시면 해당 웹페이지의 HTML이 w3c validator로 전송이 되어
validation 체크를 하실수 있습니다.
다운로드 : https://addons.mozilla.org/ko/firefox/addon/60
9. HTML소스를 좀더 보기 쉽게 View Source
Chart
플러그인을 설치하시면 페이지에서 마우스 우측 버튼 클릭시에
소스차트보기 라는 메뉴가 추가됩니다.
이 메뉴를 클릭하면 아래의 사진과 같이
해당 페이지의 소스코드가 엘리먼트 별로 parent와 child가 아주 잘 구분되어서 보여집니다.
다운로드 : https://addons.mozilla.org/ko/firefox/addon/655
이상 제가 사용하고 있는 아주유용한 파이어폭스 플러그인을 소개해드렸습니다.
이 말고도 개인적으로 사용하는 플러그인이 5~6개 정도 더 있는데요.
파이어폭스의 확장기능을 검색해서 보시면
ftp는 물론 다운로드에 관련된것, 비디오, 오디오, 플래시는 물론 각종 유용한 플러그인이 많이 있답니다.
파이어폭스 확장기능 https://addons.mozilla.org/ko/firefox/
Ajax,
Cookie,
CSS,
Developer,
ff,
firebug,
HTML,
JavaScript,
ruler,
ScreenShot,
View Source Chart,
web,
브라우저,
캡쳐,
컬러피커,
컬러픽커,
쿠키,
툴,
파이어버그,
파이어폭스,
플러그인,
확장기능
Trackback : http://trend21c.tistory.com/trackback/270
-
Subject 즐겨쓰는 파이어폭스 확장기능 모음
2008/01/07 17:34
정초부터 RAID0(Stripe)로 묶어놓은 하드디스크 한쪽이 뻑(?)나는 바람에 400여 기가 바이트 분량의 데이터를 유실했습니다. A/S를 맡겨놓은 상태지만 한동안 무용지물이 된 컴퓨터를 바라보고만 있자니 답답하고 하드디스크의 A/S가 성공적으로 처리되어도 데이터를 살리기 어려울 것이라는 판단하에 WD150 랩터 하드디스크를 2개를 추가로 사서 Stripe로 묶어 윈도 비스타(x64)기반으로 처음부터 다시 세팅하고 있습니다. 각설하고 파이어폭스..
-
Subject 내가 뽑은 Firefox 베스트 확장기능
2008/01/15 10:00
지금까지 수많은 확장기능을 써오면서, 정말 요긴하다 싶은 것들만 뽑아봤다. 그중에서도 필수라 여겨지는 것들은 必 마크를 붙였다. 예전에도 이런 목록을 뽑아본 적이 있는데 새해를 맞아 새롭게 정리해봤다. Adblock Plus (관련글) 必 애드센스를 포함한 수많은 광고를 차단해 준다. 미국과 한국의 광고 필터를 등록하면 수백개의 광고 목록을 자동으로 업데이트, 차단할 수 있다. All-in-One Gestures 必 마우스의 움직임으로 브라우저를 조..
-
Subject 유용한 파이어폭스 부가 기능
2008/06/26 23:47
유용한 파이어폭스 부가기능을 하나 소개해드리겠습니다. 중요 정보는 데스크탑으로 RSS 구독을 하기 때문에 파이어폭스 RSS관련 부가기능을 거의 다 사용해 본 것 같습니다. 그 중 현재 가장 마음에 드는 부가기능이 Brief라는 녀석인 것 같습니다. Feed Sidebar를 쭉 사용해 왔는데 개인적으로는 Brief가 더 편한 것 같습니다.아무래도 저는 이걸로 계속 이어갈 것 같아요. 피드관련 파이어폭스 부가기능 어떤 거 사용할지 고민하시는 분 있다면..
-
-
polarnara 2007/12/21 22:55
블로그 스킨 만들 때 firebug 하고 web developer 씁니다. firebug 는 화면을 상하로 분할하니까 와이드모니터에선 (상대적으로) 좁아보여서 힘들어요.
-
리브리스 2008/01/08 23:12
정말 유용한 플러그인 잘 설명해 주셔서 감사합니다.^^
