CCZ-CROSS 스킨에 티스토리 커버 기능을 입히다

학교에서 마지막 학기를 들으면서 '콘텐츠제작 및 실습'이란 수업을 들었는데, 

HTML과 CSS에 대한 기본적인 지식을 배웠고 기말 프로젝트에는 각자가 콘텐츠를 만들어보고 홈페이지도 간단하게 제작하는 과제가 있었다. 

나는 티스토리 블로그 플랫폼을 이용해서 계속 콘텐츠를 만드는 사람이었고,

CCZ-CROSS 스킨을 사용하면서 메인 화면을 어떻게 바꿀까 하다가 썸네일을 중심으로 한 메인화면을 만들어보았다.

원래는 HTML과 CSS 소스를 어떻게 짜서 해보려고 했는데 내 실력으로는 한계인걸 깨닫고

이번에 티스토리에 추가 된 커버 기능을 한번 써보기로 했다.

근데 CCZ-CROSS는 반응형 스킨이지만 커버 기능은 작동하지 않는다.

일단 본인이 쓰고 있는 스킨이 커버기능을 사용하지 못한다면 일단 추가를 해야한다.

커버 기능 추가하기는 SONYLOVE님의 블로그 포스팅을 보고 따라했다.

[기존 티스토리 스킨에 커버 기능 사용하기 - SONYLOVE]

나는 POSTER 스킨의 커버 HTML 과 CSS를 가져왔는데, CCZ-CROSS의 HTML에 넣을 때 알맞은 위치에 넣어야 작동한다.

1. 정확한 위치가 맞는지 모르겠다만 Category, Tag, Search Result 시작하는 다음에 넣었다.

 - 기존 스킨에서 <s_cover_group> ~ </s_cover_group> 부분을 긁어오면 된다.

그리고 가져오면 이렇게 오는데, CSS 속성이 다르기 때문에 위에 사진 처럼 이름 부분이나 여백이 잘 안 맞는 부분이 있다.

이건 가져온 커버 CSS 부분에서 수정해줘야한다. 

나는 커버 기능 중에 갤러리를 사용했기에, .cover-gallery h2 { 로 되어있는 부분에서

밑에 사진과의 여백 margin-bottom이나 font-size를 수정해주고, 가운데 정렬을 하기 위해 text-align: center;를 추가해줬다.

font-size는 1em이라 되어있는데 이게 인터넷 기본 폰트 크기고 16px 정도다. 지금은 2em으로 바꿔줬다.

사진 위 아래 여백 조정을 위해 Padding 부분 30px을 주는거나,

.cover-gallery ul {

display: inline-block;

margin-left: -40px;

margin-right: 13px;

부분에서 왼쪽과 오른쪽 여백을 맞추기 위해서 이 부분 속성도 새로고침 하면서 대충 맞을 때 까지 조정해봤다.

그래서 지금은 CCZ-CROSS의 사이드바와 Content 부분에 티스토리의 커버기능을 넣는거로 스킨을 조정해봤지만,

가장 큰 문제점은 주먹구구식으로 대충 해본거라 문제점이 많아도 너무 많다!

제일 거슬리는건 모바일 사이즈에서의 스킨이 완전 엉망이 되어서 지금은 티스토리 기본 스킨으로 넘겨놓은 상태다.

일단 과제를 한다고 이렇게 조정해봤는데 언제 다시 백업시킬진 모르겠다.

오늘 과제 발표 하면서 그런 얘기를 했다.

"이 수업을 들으면서 HTML이나 CSS를 배웠다는 느낌은 아니었다. 나는 내 블로그를 집 처럼 생각하기 때문에 집을 인테리어 하는 방법을 배웠다고 생각했다." 라고..

뭐, 블로그 콘텐츠 내용이 중요하지 스킨이 뭐가 중요하냐.. 라고 얘기하는 사람도 있겠지만.

그냥 내가 즐거워서 하는거니까.. ㅎㅎ

자주 구경가는 블로그 중에 슬_님이 사용하시는 프라치노 스킨이 자꾸 눈에 들어온다. 유료스킨인데 살까 고민 중..

--

12월 11일 기준으로 그냥 다시 이전 스킨으로 원상복구 시킴.