티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용

지난 12월말..호기심에 백업도 안하고 적용했다가 기존 블로그 스킨을 통째로 날려먹은 사연에 관한 이야기를 했었죠? 그 이후 지금의 웹반응형 스킨을 적용하고 잘 사용중에 있습니다.

 

그래서 웹반응형 스킨 적용기를 조금씩 올려볼까해요^^ 다른 분들 블로그에서 많은 도움을 받았지만 나름대로 제 블로그에 어떻게 적용을 했는지에 대해서도 되도록 알기 쉽게 설명할 예정이에요.

 

 

이번 시간에는 티스토리용 웹반응형 스킨중 하나인 SKELETON을 어디서 다운로드 받고 어떻게 티스토리에 적용을 하는지에 대해서만 간단히 알려드릴까 합니다.

 

혹시 웹반응형 스킨에 관심이 있으시면 이 스킨 정말 추천하고 싶어요~ 적용을 원하신다면 반드시 기존 스킨은 필수적으로 백업을 하신 다음에 테스트로 적용하세요.

 

티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용1

티스토리 블로그를 위한 웹반응형 스킨은 공식적으로 티스토리에서는 제공을 하지 않고 있습니다..(언젠가는 제공이 될꺼라고 믿지만^^)

 

그래서 검색을 통해서 웹반응형 블로그 스킨을 아주 전문적으로 개발하시는 분을 발견했는데 '마크쿼리'라는 분이에요.. 홈페이지 주소는 markquery.com이구요.

 

이 분의 홈페이지에 접속해보면..이 홈페이지 자체도 웹반응형 스킨이 적용되어 있더라구요~ 티스토리 웹반응형 스킨 skeleton을 다운받으려면 오른쪽 상단의 'download'를 클릭합니다.

 

티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용2

다운로드 페이지가 나타나면 왼쪽 사이드바에 skeletons 스킨이라는 메뉴가 보이는데..여기서 wordpress용,docpad용...그리고 tistory용이 따로 개발되었다는 사실을 확인할 수 있어요~

 

우리가 원하는 버젼은 티스토리용 스킨이기 때문에 다른 버젼은 신경쓰지마시고 티스토리용 skeleton 웹반응형 스킨만 다운로드 하면 되겠죠^^ 여기서 'tistory'를 클릭하면...

 

티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용3

이렇게 티스토리용으로 개발된 웹반응형 스킨 skeleton이 두 종류가 나타납니다. 하나는 spider's web이구요 하나는 Doo Be Doo인데..조금씩 다르겠지만 지금 이 블로그 같은 경우 spider's web을 적용했답니다^^

 

티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용

 

 

두 가지의 정확한 차이는 해보지 않아서 저도 잘 모르겠네요~

 

마크쿼리님의 홈페이지를 살펴보면 각각의 스킨 종류를 적용했을때의 예제를 직접 확인할 수도 있으니 본인 취향에 맞는 스킨을 선택하는 것도 좋은 방법이겠죠.

 

티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용4

밑으로 마우스를 드래그 해서 내려보면 위와 같은 다운로드 버튼을 볼 수 있는데요..역시 이 부분도 spider's web과 Doo Be Doo가 따로 나누어져 있습니다.

 

위 캡쳐화면속의 설명처럼 다운로드하면 윈도우의 '다운로드'폴더에 자동으로 저장이 되는데..티스토리에 스킨등록을 할때는 grunt폴더만 제외하고 나머지만 올리면 된다고 합니다.

 

티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용5

윈도우 다운로드 폴더에 저장된 티스토리 웹반응형 스킨 skeleton 'spider's web'의 세부 파일들..

 

여기서 grunt라는 폴더만 빼고 나머지만 티스토리에 업로드하면 되는데 images폴더같은 경우는 폴더를 열어서 내부에 있는 파일을 따로 올려줘야 업로드됩니다. (그냥 폴더통째로 업로드가 안되더라구요 ㅠ)

 

티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용6

웹반응형 스킨의 등록은 티스토리 관리자 모드옆에 있는 꾸미기-스킨 메뉴에서 할 수 있습니다.

 

저기 오른쪽에 '스킨등록' 버튼이 보이죠? 여기서 반드시 유의해야 할 점은 스킨등록 버튼을 누르기전에 반드시 기존 스킨은 '스킨저장'버튼을 눌려서 백업을 시켜둬야 한다는 사실이죠.

 

(예전에 그러지 않고 무턱대고 스킨등록 버튼을 눌렀다가..한방에 기존 스킨을 날려먹었죠ㅠ)

 

티스토리 웹반응형 스킨(SKELETON) 다운로드와 적용7

그리고 티스토리 웹반응형 스킨을 등록했다고 바로 제대로 적용이 되는 건 아니구요...보관함에 들어가서 '적용'버튼을 눌러줘야 정상적인 모습으로 적용이 됩니다~

 

지금 로렌과오뚜막 블로그에 적용되어 있는 스킨이 마음에 드시고 앞으로 웹반응형 스킨으로 변경해보려고 한다면 'skeleton'스킨을 써보세요~

 

아주 깔끔하면서도 심플한 스킨이거든요^^ 지금은 개발자분이 무료로 배포중이지만..언제 유료로 바뀔지는 아무도 모름.

 

✅웹반응형 블로그 스킨 skeleton '카테고리' 오류 해결

 

웹반응형 블로그 스킨 skeleton '카테고리' 오류 해결

마크쿼리님의 블로그를 방문하신 분들은 아실테지만..지난 2월 9일에 웹반응형 스킨 skeleton이 업데이트가 되었습니다.(아직 모르시는 분들도 계신것 같은데 꼭 확인해보세요^^) 이 블로그 같은

gong6587.tistory.com

✅웹반응형 스킨 'skeleton' 상단메뉴 버튼(드롭다운) 만들기

 

웹반응형 스킨 'skeleton' 상단메뉴 버튼(드롭다운) 만들기

이번 시간에는 웹반응형 스킨 'skeleton'의 최상단 부분에 메뉴버튼을 넣는 방법에 대해서 알아보도록 하겠습니다. 그냥 메뉴버튼은 아니구요..'드롭다운'기능이 적용된 형태에요~ 초기의 skeleton

gong6587.tistory.com

✅웹반응형 스킨 'skeleton' 본문상단에 구글번역기 넣는 방법

 

웹반응형 스킨 'skeleton' 본문상단에 구글번역기 넣는 방법

지난 시간에 이어서 티스토리 웹반응형 스킨 'skeleton'을 나름대로 편집한 부분에 대해서 설명하고자 합니다. 사실 아직까지도 웹반응형 스킨은 완벽하지 않고 브라우의 종류에 따라서 호환이

gong6587.tistory.com

✅웹반응형 스킨 skeleton 'footer'정보 수정하기

 

웹반응형 스킨 skeleton 'footer'정보 수정하기

화면크기에 따라서 알아서 척척 크기가 맞춰지는 '웹반응형 스킨' 편집하기..지난 시간에 이어서 이번에는 블로그 최하단부에 나오는 'footer'의 정보를 수정하는 방법에 대해서 알아보겠습니다^^

gong6587.tistory.com

✅skeleton 웹반응형 스킨 사이드바 '최신글 목록' 수정하기

 

skeleton 웹반응형 스킨 사이드바 '최신글 목록' 수정하기

이제는 조금 티스토리 웹반응형 스킨 'skeleton'에 많이 적응이 된 것 같습니다. 벌써 2주쯤(?) 지난거 같은데..아주 괜찮은 스킨같네요~ 아직까지 시도안해보신 분이라면 도전해보세요. 이번 시간

gong6587.tistory.com