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

티스토리는 모바일 스킨을 따로 고칠 수 없습니다. 다음에서 제공하는 기본 스킨에 로고 이미지를 덧붙일 수 있을 정도입니다. 그렇기에 원하는 형태의 화면 구성을 할 수 없습니다. 다음에서는 모바일 장치의 호환성을 위해서라곤 하지만, 현재 모바일 장치는 매우 복잡한 구성의 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 모드에서는 적용되지 않는 구조입니다.

invalid-file

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

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

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

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

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

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

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

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

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