실제로 이렇게 해서 얻어지는 이점을 나중에 얼마나 이용하는지에 대한 회의가 없는 것도 아니지만
데이터와 디자인적인 요소들을 구분하는 것은 여러가지 면에서 최소한 나쁘지 않다고 생각해요.
저도 이와 비슷하게 스킨을 만들고 있습니다.
이미 기본적인 구조가 있기 때문에 매번 처음부터 할 필요는 없지만요. :)
p.s. 위의 이미지는 예전에 digg.com 에서 보고 다운받아놨는데 정확한 출처는 모르겠어요. @.@
실제로 이렇게 해서 얻어지는 이점을 나중에 얼마나 이용하는지에 대한 회의가 없는 것도 아니지만
데이터와 디자인적인 요소들을 구분하는 것은 여러가지 면에서 최소한 나쁘지 않다고 생각해요.
저도 이와 비슷하게 스킨을 만들고 있습니다.
이미 기본적인 구조가 있기 때문에 매번 처음부터 할 필요는 없지만요. :)
p.s. 위의 이미지는 예전에 digg.com 에서 보고 다운받아놨는데 정확한 출처는 모르겠어요. @.@
스킨을 만들면서 태터툴즈의 기본스킨을 보니 스타일시트가 두 개 설정되어 있었다.
media 라는 파라미터와 screen, print 라는 값이 굉장히 낯설었는데, print.css 를 열어놓고 브라우저에서 인쇄 미리보기를 해 보니 한눈에 알 수 있었다. 한마디로 이야기하면, media="print"를 적어주면 해당 스타일은 프린트를 위한 스타일로 지정된다는 것.
스타일시트에서 해당 영역을 display:none; 으로 지정하면 그 안에 내용이 들어있어도 화면에 보이지 않게 만들어주는 역할을 하는데, 이걸 적절히 이용해서 프린트 쪽 스타일시트에 적용하면 프린트를 할 때 꼭 필요없는 요소들 - 각종 사이드바의 내용들, 이미지로 만들어진 제목과 메뉴들, 트랙백 표시 등을 보이지 않게 만들어 줄 수 있는 것이다.
처음 만든 스킨은 이걸 제대로 처리하지 못했는데, 두번째 스킨은 이걸 잘 처리했다. 작지만 참으로 유용한 기술이다. 종이도 아끼고 잉크도 아끼는, 인간을 위한 기술. :)
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
<link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
media 라는 파라미터와 screen, print 라는 값이 굉장히 낯설었는데, print.css 를 열어놓고 브라우저에서 인쇄 미리보기를 해 보니 한눈에 알 수 있었다. 한마디로 이야기하면, media="print"를 적어주면 해당 스타일은 프린트를 위한 스타일로 지정된다는 것.
스타일시트에서 해당 영역을 display:none; 으로 지정하면 그 안에 내용이 들어있어도 화면에 보이지 않게 만들어주는 역할을 하는데, 이걸 적절히 이용해서 프린트 쪽 스타일시트에 적용하면 프린트를 할 때 꼭 필요없는 요소들 - 각종 사이드바의 내용들, 이미지로 만들어진 제목과 메뉴들, 트랙백 표시 등을 보이지 않게 만들어 줄 수 있는 것이다.
사이드바 등 각종 설정이 보이던 화면을,
이처럼 출력해서 읽기에는 불필요한 요소를 빼고 프린트를 할 수 있다.
처음 만든 스킨은 이걸 제대로 처리하지 못했는데, 두번째 스킨은 이걸 잘 처리했다. 작지만 참으로 유용한 기술이다. 종이도 아끼고 잉크도 아끼는, 인간을 위한 기술. :)
