태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
 

 
페이지 구독





과거 기사

Locations of visitors to this page

티스토리 모바일에 스타일을 적용하여 꾸며보자

IT네트워크/블로그 | 2013.01.08 15:40 | Posted by Namu(南無)

티스토리는 모바일 스킨을 따로 고칠 수 없습니다. 다음에서 제공하는 기본 스킨에 로고 이미지를 덧붙일 수 있을 정도입니다. 그렇기에 원하는 형태의 화면 구성을 할 수 없습니다. 다음에서는 모바일 장치의 호환성을 위해서라곤 하지만, 현재 모바일 장치는 매우 복잡한 구성의 HTML이 아니라면 문제 없이 동작하는데 말입니다. 적어도 CSS만이라도 일부 고칠 수 있도록 하면 좋을 텐데 그런 생각이 듭니다. 그래서 그 방법을 알려 드리고자 합니다.

모바일 티스토리에 들어가면 무너지는 블로그

블로그의 경우에는 단락으로 쓰이는 <p> 태그 앞 뒤에 빈 공간을 둡니다. 그래서 따로 <br /> 태그를 쓰지 않고 단락으로 모든 걸 해결하는데, 모바일 티스토리에서는 그런 간격도 맞추어지지 않고 딱딱 붙어서 읽기 힘듭니다. 그뿐 아니라 다른 분들은 발생하지 않습니다만, 제 경우에는 이미지의 좌우 너비는 정상적으로 나오는데 아래위 높이가 자동으로 적용되지 않아 아래 위로 길쭉하게 늘어납니다. 무너지는 레이아웃을 볼 때마다 가슴이 아파서 결국 고쳤습니다.

중간의 문단 제목으로 쓰이는 <h3> 태그의 글씨 크기도 바꾸고 단락과 단락 사이에 빈칸을 주고, 거기에 더불어 이미지의 높이도 정상적으로 나옵니다. 어떻게 하냐고요? 자바스크립트를 본문에 추가하여 해결하였습니다.

본문에 자바스크립트를 삽입하여 CSS 적용

코드를 보면서 설명 드리겠습니다.

(function() { var currentM; currentM = location.href.split(&quot;/&quot;)[3]; if(currentM=='m'){ document.writeln('<style>'); document.writeln('[적용할 스타일]'); ... ... ... document.writeln('</style>'); } })();

이 코드는 모바일로 티스토리가 표시될 때에만 스타일이 적용되도록 하는 코드입니다. PC 모드에서는 적용되지 않는 구조입니다.

첨부 파일을 마우스 오른쪽 버튼을 클릭하여 메뉴를 불러낸 다음 다른 이름으로 저장한 다음[적용할 스타일]이라 들어있는 부분에 적용할 스타일을 써넣으면 됩니다. 간단하죠? 샘플 자바 스크립트 파일을 첨부합니다. 단, 대부분의 스타일은 이미 기본 스타일에 적용되어 있기 때문에 필요에 따라 !important 속성을 붙여서 적용하여야 할 것입니다.

자바스크립트 파일을 업로드하고 불러들이기

그렇게 적용할 스타일을 써넣은 자바스크립트 파일을 업로드할 차례입니다. 관리>HTML/CSS 편집>파일 업로드로 들어가서 방금 만든 MobileCSS.js 파일을 업로드합니다.

추가 버튼을 눌러 파일을 업로드하면 해당 자바스크립트 파일을 찾을 수 있습니다.

해당 파일을 찾아 마우스 오른쪽 버튼을 클릭하여 새 탭에서 링크를 열어줍니다. 그러면 그 파일의 주소를 확인할 수 있습니다. 이것은 각 블로그마다 주소가 다르니 직접 확인하여야 합니다.

여기서 확인한 주소가 중요합니다. 이제 본문을 쓸 때 각 본문에 다음 코드를 추가하여 줍니다.

<script type="text/javascript" src="[확인한 주소]/MobileCSS.js"></script>

이것은 별 수 없습니다. 자동으로 할 수 있으면 좋겠습니다만 그것이 불가능합니다. 블로그 API를 이용하면 모든 글을 읽고 수정할 수 있겠습니다만, 그것은 제 능력 밖일 듯 합니다.

주의할 것은 테스트 포스트를 따로 만들어서 보시고, 과도한 CSS 수정을 시도하지 않으시길 바랍니다. 레이아웃이 쉽게 무너질 수 있습니다.

저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요!!

  1. Favicon of http://danbis.net 단비스 2013.01.09 23:04 신고  댓글주소  수정/삭제  댓글쓰기

    정말 필요한 내용이였는데, 감사드립니다~
    항상 좋은 글 잘보고 있고, 덕분에 많은 도움되고 있습니다!

    • Favicon of http://studioxga.net Namu(南無) 2013.01.10 04:24 신고  댓글주소  수정/삭제

      애드센스용 스크립트와 함께 적용하실 거면 이 CSS를 먼저 적용되도록 코드를 만드셔야 합니다. 두 개를 같은 파일로 만들어도 되는데, 제 블로그 소스 코드를 보시면 답이 있을 겁니다.

  2. Favicon of http://min-blog.tistory.com 백전백승 2013.02.03 10:34 신고  댓글주소  수정/삭제  댓글쓰기

    모바일에 CSS를 적용하는 법을 알아 그냥 넘어갔는데, 확장 개념으로 PC에서는 안되고 모바일에만 적용되는 CSS였군요. 제가 예전에 모바일 페이지에 CSS를 적용했는데 PC 페이지와 충돌하여 고생한 적이 있어 이것이 정말 필요했거든요.

  3. Favicon of http://tumco.tistory.com KUWRITER 2014.01.02 18:30 신고  댓글주소  수정/삭제  댓글쓰기

    굉장합니다. 하루 종일 구글링 끝에 답을 찾았네요.