오페라 브라우저의 활용 팁(IV) CSS로 읽기도구를 구현하다

오페라(Opera) 브라우저를 써서 사파리5의 읽기도구를 구현해 봅니다.

읽기도구 사용법

보기 메뉴 --> 스타일--> 글읽기

오페라 브라우저나 파이어폭스(FireFox, FF)를 사용하여 이 페이지에 방문하신 분이라면 를 선택해 보십시요.나름대로 사파리 브라우저 5의 읽기도구처럼 보일 것입니다.(요술같지요?)

DOM

<link title="Default" rel="stylesheet" media="all" type="text/css" href="style.css" />
<link title="글읽기" rel="alternate stylesheet" media="all" type="text/css" href="print.css" />

CSS

"print.css"를 사용

"대체 스타일"이란 무엇인가?

오페라 브라우저(Opera browser)를 사용해 본 적이 없는 사용자라면 스타일시트를 적용하는 부분에 관하여 대개는 정보가없거나 무시하고 있었을 가능성이 높습니다. 현재 최신 브라우저를 비교해 볼때 스타일시트를 가장 광범위하게 지원하고 있는 웹브라우저는 단연 오페라 브라우저(Opera browser)라고 할 수 있는데 워낙 오래전부터 지원된 기능인지라 오페라의버전업 사항에는 들어가지 않습니다. 그래서 웹페이지를 다룸에 있어서 지금부터 상술하고자 하는 "대체 스타일시트"에 관해서도 금시초문일 가능성이 많다고 할 수 있습니다. 사실, 저도 "CSS 완전가이드" 책을 읽고서 비로소 알게된 것이기도 합니다.
CSS 라는 것이 오페라 브라우저사에서 처음으로 창시된 기능인가 봅니다.
관련 글링크: http://www.pageoff.net/1025

얼마전 블로그글에 인쇄용 레이아웃에 대해서는 지금까지 방문했던 대개의 블로그가 대처해 놓지 않은 것을 보고 글을 올렸습니다. 저같은 경우는 블로그 글이든 인터넷 상에서 입수한 자료를 일부 프린트해 두는 습관이 있습니다. (왜냐구요? 취향이기도 하고저작권 보호를 위해 공개했더라도 글 복사방지를 해둔 사이트라도 문장, 또는 소스코드부분을 읽기위해서는 필요한 페이지를 인쇄하면되거든요. 물론 스스로 쓴 글이라도 회의에서 쓰려고 인쇄하는 경우도 있죠.) 안타까운 것은 꽤나 레이아웃에 신경을 쓴 페이지라도인쇄용 프린트 레이아웃에 관한 부분은 대책이 없는 경우가 많습니다.

기왕에 인쇄용 스타일시트를 만들었는데 이번에는 이것(print.css)를 대체 스타일시트(Alternate stylesheet, CSS)로 추가해 보았습니다. 

HTML페이지를 보여줄 기본 스타일시트는 rel="stylesheet"로 지정하면 되고 한가지만일 경우는 굳이 'title'을정의하지 않아도 됩니다. 그리고 두번째 이후의 스타일시트를 추가할 경우에는 rel="alternate stylesheet"를 지정하면 브라우저의 메뉴에 title 항목이 등장하여 보여지게 됩니다.

(무궁화: 장마 기간 중에 굴하지 않고 피는 무궁화를 보면 순수함과 아름다움 그 자체다.)

오페라에서도 읽기도구처럼 보이죠?

애플사의 사파리5가 읽기도구를 어떻게 구현했는지는 매우 궁금한 기술인데요, 여기서는 대체 스타일시트를 써서 유사한 효과를 구현해 본것입니다. 대체 스타일시트를 어떻게 더 활용할 수 있을까요? 이점에 관하여는 좀더 두고 보면서 사례를 연구할 생각입니다. 적어도하나의 블로그가 여러가지 분위기를 낼 수 있다는 점에서 개성적입니다. 그리고 군더더기를 다 빼고 기사 위주의 가독성을 높인레이아웃을 제공할 수 있다는 점에서 마음에 듭니다.

대체 스타일시트가 지원되는 브라우저 비교

브라우저	대체 스타일시트
Opera 7.5 --- 10	OK
FireFox 최근	OK 최신 버전만 확인
Safari 5	NG
Chrome계열	(미확인) 사파리가 안되는데 크롬이 될까요?
Internet Explorer 7	NG 설마 바라고 계신가요?

다음 기회에는 자바스크립트를 써서 화면상에서 스타일을 바꾸는 방법을 연구하기로 합니다.

관련된 내 블로그:

[일상을 논함] - 블로그 인쇄용 스타일시트(CSS)에 관하여
[일상을 논함] - 웹브라우저에는 아직도 혁신이 무궁무진하구나
[일상을 논함] - 내가 사파리(Safari) 웹브라우저를 쓰는 이유
[일상을 논함] - 광고 없는 인터넷에 서핑하고 싶다
[일상을 논함] - 오페라 브라우저의 활용 팁(III) 노트장 기능으로 상용구를 쓸수 있다
[간단 메모] - [메모] 가벼운 페이지를 지향하며
[간단 메모] - [메모] 블로그 스킨다운 스킨을 만들게 되었다