웹하드 이용팁
작성일 : 12-01-14 13:26
|
-
특정 사이트의 글꼴을 바꾸거나 줄간격을 넓히는 방법(파이어폭스·크롬·오페라) -
|
|
글쓴이 :
 Amen
조회 : 5,455
|
문서 양식(CSS)를 제어하면 됩니다. CSS를 제어하는 확장기능은 대표적으로 stylish가 있습니다. stylish 확장기능을 설치한 후 해당 CSS를 제어하면 됩니다. 오페라는 브라우저 자체에서 CSS를 제어할 수 있도록 지원합니다. (인터넷 익스플로러도 있는지 해서 찾아보았는데 그런 확장기능이 없네요. 찾으신 분은 알려주시길.)
여기서는 예를들어 구글 리더 글꼴과 줄간격을 변경해 보겠습니다.
파이어폭스·크롬
스타일리시(stylish) 확장기능을 설치합니다.
파이어폭스 https://addons.mozilla.org/ko/firefox/addon/stylish/
크롬 https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe
설치하고 나면 스타일리시 아이콘이 생깁니다. 파이어폭스는 브라우저 왼쪽 아래에 있습니다.
www.google.com/reader로 갑니다. 아이콘을 누르고 새 스타일 작성 > www.google.com 에 적용을 차례로 클릭합니다.
새로 뜬 작은 새창을 보면 기본 코드가 있고 이름과 태그란은 비어있을 겁니다. .
코드를 수정하겠습니다. 원하는 스타일을 제어해야 하는데 그러기 위해서는 원하는 스타일의 id나 class를 알아야 합니다. id나 class는 여기서 설명하기에는 길어서 생략하고 id나 class는 특정 스타일의 이름이라고 생각하면 됩니다.
해당하는 글의 블록설정한 후 선택한 부분의 소스보기를 누릅니다. 글 본문 있는 곳 앞에 div class="item-body" 가 있는 것을 보아 원하는 곳의 class 이름이 item-body임을 유추할 수 있습니다. (물론 이를 바로 아는 확장기능도 있는데 여기서는 원리만 알려드리는 것이므로 생략하겠습니다.) 크롬은 해당하는 곳에서 오른쪽 클릭 > 요소 검사를 클릭하면 새창이 뜨는데 여기서 알 수 있습니다.
id를 나타내는 기호는 #이고 class를 나타내는 기호는 .입니다. 이건 외워두세요.
@-moz-document domain("www.google.com") 안 괄호{} 에 다음 코드를 넣습니다. 여기서는 나눔고딕, 줄간격 170%로 바꾸어 보겠습니다.
.item-body {
font-family : "나눔고딕";
line-height : 170%;
}
미리보기를 누릅니다. 바뀌었나요? 만일 안 바뀌었다면 강제로 바꾸어라는 명령 !important를 붙여야 합니다.
.item-body {
font-family : "나눔고딕" !important;
line-height : 170% !important;
}
이름에 구글 리더 글꼴 줄간격 변경을 넣습니다. 저장을 누릅니다.
오페라
오페라는 메모장을 열고
.item-body {
font-family : "나눔고딕";
line-height : 170%;
}
를 쓴 후 www.google.com.css로 파일 이름을 주고 구글 리더에 가서 오른쪽 클릭 > 사이트 환경 설정 편집 >내 스타일시트에 www.google.com.css 파일을 지정해 주면 됩니다.
오페라에서 id와 class는 오른쪽 클릭 > 요소 보기를 하면 아래에 별도 창이 뜨는데 여기서 알 수 있습니다
|
|
웹하드 이용팁
본 사이트는 웹하드 순위 정보 제공사이트로 저작권 및 자료 관련 문의는 각 업체로 해주세요.
Copyrightⓒ ddaun.com All rights reserved.
문의하기
