미디어쿼리를 이용한 블로그 최적화 작업
블로그 페이지를 PC에서 읽을 때는 화면의 크기가 넉넉하기 때문에 폰트의 크기가 크거나, 줄간격이 넓은 것이 정독과 속독에 상당히 유리합니다. 반면에 모바일화면에서 포스팅에 적힌 글을 읽을 때는 화면비율에 적당한 글씨크기와 줄간격을 가졌을 때 페이지 감상이 훨씬 수월합니다. 그리고 모바일 터치 스크롤하는 횟수도 훨씬 줄어듭니다.
요즘 대세인 반응형 웹 스킨에서 이런 기능을 주로 사용하고 있습니다. 하나의 웹 페이지를 다양한 기기의 환경에 맞추어 최적화된다는 것인데, 이런 기능이 구현되는 핵심은 바로 '미디어쿼리(Media Query)' 에서 나옵니다. 하지만 미디어쿼리는 모든 웹 브라우저에서 가동되는 것은 아닙니다. 인터넷 익스플로러 IE9 이상의 버젼과 구글크롬, 사파리, 파이어폭스, 오페라에서 구현되는 기능입니다. 어떤 반응형스킨이 IE8 에서 성공적으로 구현되려면, 미디어쿼리를 사용하지 않는 새로운 CSS 스타일을 구축해야 합니다.
그래서 웹 HTML에 위와 같은 <!--[if lt IE 9]> 와 같은 구문을 사용합니다.
※ 위 사진에는 서브라임 텍스트에서 색을 넣으려고 느낌표(!)를 물음표(?)로 교체했습니다.
여기서 [if lt IE 9] 이 의미하는 것은, 만약 IE 9 이하의 버젼에서 사용하면 링크된 images 폴더에 있는 ie.fix.css 파일의 룰을 따르겠다는 뜻 입니다. 그리고 [if IE 7] 은, 만약 IE 7 에서 웹페이지를 방문한다면 ie7.css 파일의 스타일을 출력한다는 명령어 입니다. CSS(cascading style sheets)는 웹 문서의 전체적인 스타일을 미리 저장해 두었다가 특정조건에서 출력되는 스타일시트입니다. 티스토리 관리자 모드에 보면 skin.HTML 과 style.CSS 가 있는데, 이곳외에도 '파일업로드' 공간을 활용하여 추가 CSS 파일을 서버에 보관해 둘 수 있습니다. 잘 짜여진 HTML 의 구성에 맞춰 필요한 구동환경에서 적용되는 것이 '반응형 웹'의 시작입니다.
[IT 잡지식] - [반응형스킨 수정] IE7 최적화 작업
예전에 반응형스킨을 수정하고 IE7에서 화면이 깨지는 것에 대한 내용을 포스팅했는데요, 만약 특정 브라우저에서 웹이 깨진다면 해당 browser 에 연결된 css 파일만 수정하면 될 듯합니다.
그리고 처음에 말했던 미디어쿼리를 이용한 줄간격 조절은 아래 내용을 추가하여 원하는 스타일로 바꿀 수 있습니다.
미디어쿼리(media query)를 이용한 폰트, 줄간격 최적화
style.css 항목에 @media (max-width : 160) { body {line-height : 200%;} } 을 추가하면, 기기의 화면해상도가 최대 160px 까지는 body 영역에 있는 줄간격을 200% 로 조정하겠다는 의미입니다. 그리고 그 아래 적힌 @media (max-width : 700) { body {line-height : 220%;} } 이 나타내는 것은 화면크기 700px 까지는 220%의 줄 간격을 하겠다는 뜻이 됩니다.
아이폰 4와 5의 경우 평상시 화면(Landscape)의 width가 320px 이고, 아이패드의 Landscape는 768px, Portrait는 1024px 입니다. 따라서 아이폰에서 줄간격을 많이 줄이고, 아이패드에서는 조금만 줄이고 싶다면, css 가장 마지막에 아래 내용을 추가하시면 됩니다.
@media (max-width : 321) { body {line-height : 200%;} }
@media (max-width : 769) { body {line-height : 220%;} }
반응형광고에서 사용된 미디어쿼리(media query)
이런 미디어쿼리는 구글 애드센스의 광고의 한 종류인 '반응형 광고'에서도 사용되는 코드입니다. 저는 반응형광고의 코드를 위와 같이 수정하여 사용하고 있습니다.
애드센스에서 기본 설정된 미디어쿼리 명령어는 두개 입니다. 여기에 한 줄을 추가하여, 100px 이상의 크기에서는 300*200 광고가 구현되고, 360px 이상에는 300*250 광고가, 430px 이상에서는 336*280 광고를 출력시키고 있습니다. 그리고 위 사진의 24번째 줄에 적힌 것 처럼, 기본크기는 336*280 으로 설정했습니다. 예전에 포스팅했듯이 미디어쿼리가 적용되지 않는 IE7과 같은 오래된 브라우저에서 출력되는 광고 크기는 반응형광고의 기본사이즈로 보여집니다.
미디어쿼리와 반응형 웹 스킨, 반응형 광고에 대한 유용한 내용을 다음에 이어서 올리겠습니다.
<함께 보면 도움되는 글>
