티스토리 블러그에 반응형웹 스킨을 적용하자.

Tip!/티스토리

이전 포스트에서 티스토리 반응형웹 skeleton 스킨 소개 및 활용 을 주제로 Markquery 님의 skeleton 티스토리를 소개 하였습니다. 오늘은 내용을 이어서 자신의 블러그에 skeleton 스킨을 설치하는 과정에 대해서 작성 하도록 하겠습니다. 티스토리 블러그를 처음 접하시는 분들을 기준으로 해서 최대한 자세히 작성 하겠습니다.


NOTE
skeleton 스킨과 반응형웹에 대해서는 티스토리 반응형웹 skeleton 스킨 소개 및 활용 포스트를 참고 하세요.



skeleton 스킨 다운로드는 어떻게?


skeleton skin download


그림과 같이 스킨 다운로드 GitHub: https://github.com/markquery 에 접속하셔서 자신이 원하는 skeleton 두가지 중 한가지를 Download ZIP 을 선택 하셔서 다운로드 받습니다.



NOTE
적용화면 보기를 클릭하시면 티스토리 블러그에 적용된 화면을 보실 수 있습니다.



다운로드 받은 스킨이름.zip 파일은 다운로드 폴더에 저장 됩니다. 해당 폴더로 가셔서 압축을 풉니다.



skeleton 스킨을 자신의 블러그에 적용하자


티스토리 관리자 페이지 스킨 등록


먼저 자신의 관리자 페이지로 접속을 해서 위의 그림과 같이 스킨 항목으로 이동후 우측 상단의 스킨 등록을 선택 합니다. 이후 스킨 저장명이 자신이 원하는 이름을 입력하고, 화면 하단의 추가 를 선택해서 다운로드 받은 스킨 파일이 있는 폴더로 이동후 스킨 파일들을 모두 추가 합니다. image 폴더안의 파일들도 모두 추가 하셔야 합니다. 모두 추가 하셨다면 화면 하단이 저장 을 선택하여 스킨을 저장 합니다.


NOTE
less 폴더안의 파일들은 추가하지 않아도 됩니다.


티스토리 스킨 보관함


관리자 페이지의 스킨 - 보관함으로 이동 하시면, skeleton 스킨이 새롭게 추가된 것을 확인 하실수 있습니다. 적용하기에 앞서 자신이 사용하던 스킨은 꼭 스킨 저장 을 선택하셔서 보관함에 저장 하시기 바랍니다. 새로운 스킨을 그냥 적용하시면 기존에 사용하던 스킨의 내용이 모두 없어 집니다.


스킨 저장 을 완료 하셨다면 새롭게 추가된 skeleton 스킨을 적용 합니다.


skeleton 스킨이 적용된 자신의 블러그를 확인하기 위해 블러그로 를 선택하여 자신의 블러그 홈으로 이동 합니다. 자~ 어떻게 적용이 잘 되셨나요? 자신이 사용하는 웹브라우저의 가로폭을 마우스로 줄이고 늘림에 따라서 블러그의 UI 가 자동적으로 변경되는 것을 확인해보세요. 잘 되시나요? ^^



티스토리 모바일웹 스킨 해제하기


티스토리 모바일웹 스킨 해제하기


skeleton 스킨을 적용하면 가장 좋은점은 기기의 해상도에 맞추어 자동적으로 UI 가 변하는 반응형웹이라서 자신의 블러그에 접속하는 다양한 해상도의 기기에 모두 통일된 느낌과 최적화된 화면을 제공할 수 있다는 겁니다. 이제 티스토리에서 제공하는 모바일웹 스킨은 필요가 없으니 위의 그림과 같이 OFF 시켜도 됩니다. 아~ 물론 필요하다고 생각되시는 분들께서는 그냥 사용하셔도 괜찮습니다.


NOTE
이번에 티스토리에서 모바일웹 스킨의 ON/OFF 기능을 넣은 것도 반응형웹을 활성화 시키기 위한 의도일거라는 생각도 듭니다. ^^


자~ 이제부터 시작 입니다. 헐~ ㅡㅡ; 다음 포스트에서는 skeleton 스킨 상단의 메뉴바를 구성하는 방법에 대해서 작성 하도록 하겠습니다. 그리고, 기본적으로 티스토리에서 제공하는 스킨 이외에 다른 개발자 또는 유저들이 배포하는 스킨을 적용하는 방법은 모두 동일 합니다. 매우 간단한 기초적인 부분이기는 하지만 앞으로 작성할 전반적인 포스트 주제와 연관되기에 작성 하였습니다.



글쓴이의 다른 포스트 보기