이 블로그 스킨을 반응형으로 변경했으므로 모바일 페이지가 안 보이며 스크립트도 안 된다는 것을 알았으면 합니다. 이 글은 스킨 변경 전에 적었습니다.
저는 예전에 모바일 페이지에 jquery를 사용하기 위해서는 모바일 jquery를 사용해야 하는 것으로 알았는데 그것이 아니라는 것을 알았습니다. 그리고 또 모바일 페이지에서는 PC 페이지와 다르게 skin.html과 style.css이 적용이 안 된다는 것도 알았습니다. 모바일 페이지에 스크립트와 CSS 적용에 대해 설명합니다. jquery1
오해하지 말았으면 하는 것이 여기에 얘기는 티스토리에 관한 것이니 네이버 블로그나 다음 블로그 등으로 생각하지 말았으면 합니다.
모바일 페이지에서 적용되느 스크립트와 CSS는 skin.html과 style.css가 아님
PC 페이지처럼 모바일 페이지에서는 스킨의 skin.html과 style.css이 적용되는 것이 아닙니다. 이 말은 관리의 HTML/CSS에 나온 skin.html과 style.css와 무관하다는 말이기도 합니다. 티스토리 모바일 페이지의 소스를 보면 다음에서 지정하는 스크립트와 CSS가 적용된다는 것을 알 수 있습니다. 이것은 네이버 블로그에서 스크립트와 CSS를 네이버 블로그 운영자가 알아서 하는 것과 비슷하다고 생각됐습니다. 네이버 블로그에서는 스킨의 HTML/CSS는 만질 수 없고 단지 이미지만 만질 수 있어 답답하거든요. 다음 블로그도 마찬가지 입니다.
왜 티스토리가 아니고 다음이냐면 티스토리의 모든 운영권이 2007년에 다음(daum)에 넘어갔거든요.
글쓸 때 삽입
모바일 페이지에서는 스크립트와 CSS를 다음(daum)에서 지정한 것만 따라야 한다면 스크립트와 CSS를 지정할 수 없는가. 아닙니다. 글쓸 때 자바스크립트와 CSS를 삽입하는 것입니다. 아래 그림과 같이 글을 쓸 때 자바스크립트와 CSS를 삽입하면 됩니다. 그러면 모바일 페이지에서 jquery 라이트박스 등 원하는 효과를 볼 수 있습니다.
모바일 페이지에 렉시새봄 웹폰트 나오게
위그림에서 모바일 CSS 설정은 다음이 아닌 제가 정의한 CSS 정의를 따르도록 한 것입니다. 그래서 모바일 페이지에서 폰트를 맑은 고딕이 아닌 현재 블로그에서 사용하는 렉시새롬 웹폰트를 사용하게 했습니다. 만약 CSS를 삽입하지 않았다면 PC에서는 맑은 고딕으로 보이고 스마트폰에서는 스마트폰의 기본글꼴로 보입니다. 기본설정은 맑은 고딕이고 네이버 블로그의 CSS를 봤더니 나눔고딕이었습니다. 알아둘 것이 폰트가 아닌 웹폰트는 여러분의 컴퓨터에 폰트가 있느냐에 상관없이 설정자의 폰트를 따릅니다. 렉시새봄 웹폰트 사용, 적용 브라우저 : 현재 폰트에서 렉시새봄 웹폰트를 안드로이드,아이폰,아이패드 등을 지원하는 웹폰트라고 했습니다.
위에서 말한 CSS는 제가 만든 CSS이니 기본으로 제공하는 것이 아닙니다. 그리고 웹폰트라고 무조건 안드로이드폰과 아이폰 등에서 되는 것이 아닙니다.
모바일 페이지에서 라이트박스되게
라이트박스와 관련된 스크립트와 CSS가 관리의 HTML/CSS에 있어서 그냥 이미지만 나열하면 PC페이지에서는 되나 모바일 페이지에는 적용되지 않습니다. PC 페이지가 아닌 모바일 페이지에 jquery 라이트박스를 적용하기 위해 라이트박스와 관련된 자바스크립트와 CSS를 윗 그림처럼 글쓸 때 삽입했습니다. 참고로 아래 썸즈네일을 클릭하여 라이트박스라는 것이 어떤 것인지 알 수 있고 아래같은 효과가 PC 페이지만 아니라 모바일 페이지에서도 된다는 것입니다. 이 페이지의 모바일 페이지인 http://min-blog.tistory.com/m/1112에서 확인해 보세요.
여담으로 아래 사진은 모두 플리커에서 가져왔는데 가로를 500으로 하면 저의 스마트폰(옵티머스빅)이 4.3인치 세로가 아닌 가로로 보면 옆으로 스크롤바를 이동할 필요없는 것을 알았다. 아래 사진은 가로가 500이하이다. 근데 저의 스마트폰으로 보면 이미지가 두 개로 나오는지 알 수가 없습니다.
다른 예
위에서는 jquery 라이트박스(lightbox)가 PC와 모바일 페이지에 모두 효과가 나타나게 하는 것이고,다른 예로 이미지가 효과가 아닌 텍스트효과인 Accordion(아코디언)에 대한 것을 소개하겠습니다. 위에서 이미지 효과를 저의 스마트폰에 두 개로 보였기 때문에 텍스트효과를 소개합니다.jquery 아코디언(Accordian)은 http://min-blog.tistory.com/1074을 보고 모바일 페이지는 http://min-blog.tistory.com/m/1074을 보세요. 참고로 모바일 페이지는 PC로도 접속이 가능합니다.
혹시 PC 페이지나 모바일 페이지가 헛갈릴 것 같아 적는데 PC 페이지는 PC에 최적화된 페이지이고 모바일 페이지는 스마트폰에 최적화된 페이지입니다. 여기에서 말하고자 하는 것은 두 가지인데 하나는 모바일 페이지에 스크립트 효과가 나타나게 하고 싶다면 글에 스크립트와 CSS를 삽입해야 한다는 것입니다. 두번째는 모바일 페이지에서는 스킨의 skin.html과 style.css가 적용안된다는 것입니다. 쓰고 보니 조잡하게 적었네요.
'블로그 > 티스토리' 카테고리의 다른 글
| SNS 때문에 기업블로그가 티스토리에 많은 것 같다 (6) | 2012.12.29 |
|---|---|
| 태그 위치 변경으로 본 티스토리 자유성 (8) | 2012.12.16 |
| 소셜댓글 라이브리 설치, 플러그인으로가 아닌 방법으로 (7) | 2012.12.13 |
| 댓글알림 메시지와 배경설정 , 네이버 블로그가 아닌 티스토리 (2) | 2012.12.06 |
| 티스토리가 아닌 블로그를 해야 한다면 (31) | 2012.10.22 |
| 티스토리 스킨,핀터레스트 레이아웃 (17) | 2012.10.19 |
| 익스플로러8에서 파비콘 나오게 하기, 블로그는 티스토리 (12) | 2012.10.03 |
| 이 블로그는 티스토리 블로그라는 증거 (18) | 2012.10.01 |
