특정 사이트의 글꼴을 바꾸거나 줄간격을 넓히는 방법(파이어폭스·크롬·오페라) IT/정보

“Google 리더로 RSS를 모아서 보고있는데, 줄간격이 너무 좁아서 보기에 불편합니다. 혹시 줄간격을 늘려줄 수 있는 방법이 있나요?”란 질문에 답변을 달다 보니 팁으로 공유해도 좋겠다 싶어 씁니다.

결론부터 말하면 문서 양식(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는 오른쪽 클릭 > 요소 보기를 하면 아래에 별도 창이 뜨는데 여기서 알 수 있습니다.

덧글

  • Playing 2015/09/04 14:44 # 삭제

    고맙습니다.
    알려주신 것을 쫓아하니 잘 되네요

    참고로 사용중인 브라우저는
    파이어폭스 40.0.3 와 오페라 31.0.1889.174 입니다
    모두 부가기능으로 userscript 를 제어하니 되는군요. 기본 기능으로는 제 능력밖이구요!
※ 로그인 사용자만 덧글을 남길 수 있습니다.


애드센스_200px 정사각형