본문으로 바로가기

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

category 개인적인 잡담 2018.12.10 15:15

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

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일 기준으로 그냥 다시 이전 스킨으로 원상복구 시킴. 




댓글을 달아 주세요

  1. BlogIcon 그냥사이다 2018.12.11 08:04 신고

    ㅎㅎ 역시 호기심이 많고 도전 정신이 뛰어납니다 ㅎ 저는 맨 처음 아무것도 모르고 설정한 스킨 그냥 그대로 씁니다 ㅎ 뭘 바꾸는게 귀찮고 배우는게 좀 거부감이 들어서요 ㅎ 책으로는 새로운걸 접하는게 싫지 않은데, 왠지 언어 쪽은 무섭더라구요 ㅎ
    잘 보고 갑니다 ㅎ 취업 축하드려요 ㅎ

    • BlogIcon 떠도는 winnie.yun 2018.12.11 14:53 신고

      저도 처음에는 티스토리 기본 스킨을 쓰고 있었는데,
      제가 블로그를 시작하게 동기 부여를 준 블로그가 이 스킨을 사용하고 있어서.. ㅎㅎ
      이래저래 찾아보고 적용해놓고 계속 쓰고 있네요.
      감사합니다.. ^^

  2. 공수래공수거 2018.12.11 10:32 신고

    저에겐 어려운 일입니다. ㅎ

  3. BlogIcon Deborah 2018.12.11 18:21 신고

    그래픽전공할때 홈페이지 하는 방법도 배웠는데 활용을 안하다 보니 잊혀지네요.

    • BlogIcon 떠도는 winnie.yun 2018.12.11 19:42 신고

      ㅎㅎㅎㅎ 저도 완~~전 어렸을 때, 초등학교 때 학교에서 HTML 막 배웠던 기억은 나는데 대학교 마지막 학기 들으면서 재밌게 배웠네요 ㅋㅋ

  4. BlogIcon SONYLOVE 2018.12.11 20:17 신고

    CCZ-CROSS 에서도 커버기능이 잘 되네요. ㅎㅎ
    저도 블로그의 내용이 중요하다고 생각은 하지만 ..
    티스토리를 하다보면 블로그의 재미는 스킨 만지는거라는..

  5. BlogIcon 버블프라이스 2018.12.13 07:08 신고

    저도 언제 시간이 되면 제대로 공부를 해서 스킨을 좀 변형해야할 것 같습니다. 잘보고 갑니다

    • BlogIcon 떠도는 winnie.yun 2018.12.14 02:01 신고

      버블프라이스님 블로그는 지금도 깔끔해서 좋은 걸요 ㅎㅎ
      제가 항상 구경갈 때 마다 새로운 글들이 크게크게 되어있고 썸네일도 직접 만드셔서 그런지 잘 보이는거 같아요.

  6. BlogIcon 슬_ 2018.12.14 01:51 신고

    흐헿... 저도 프라치노 스킨 이번 업데이트가 제일 마음에 들어요.
    일단 적용이 엄청 쉬워졌거든요ㅋㅋㅋ 버튼만 누르면 돼요!
    이전에는 업데이트 시킬 때마다 설정을 HTML/CSS에서 수정해줘야되는데 까막눈이라 넘 힘들었던...
    저도 매번 HTML/CSS 공부해야한다고 생각하면서 방치하고 있습니다. 잘하시는 분들 보면 넘 부럽습니당ㅜㅜ

    • BlogIcon 떠도는 winnie.yun 2018.12.14 03:44 신고

      하.. 슬님 블로그 보고 프라치노 뽐뿌 엄청 오네요.
      비슷하게 바꿔보려고 했는데 ㅋㅋ 스킨 만드시는 분들은 코드에 대한 이해도도 높음과 동시에 디자인적인 감각도 있어야 될 것 같아요.. ㅎㅎ
      공부는 그냥 구글링해서 따라하기만 해도 될 것 같아요 ㅜ 그 이상은 힘든..

  7. BlogIcon 버블프라이스 2018.12.14 02:19 신고

    넵, 좋게봐주셔서 감사합니다^^

  8. BlogIcon 히티틀러 2018.12.23 13:49 신고

    콘텐츠 제작 및 실습이라는 수업, 저도 들어보고 싶네요.
    못 따라갈 거 같긴 한데, 그래도 뭐라도 주워들으면 블로그할 때 유용할 거 같아요.
    저도 스킨을 한 번 바꿀까? 하는 생각은 드는데, 엄두가 안 나네요.
    이전에 스킨 한 번 바꾸려다가 블로그 홀라당 날려버릴 뻔한 이후로 무서워요ㅠㅠ

    • BlogIcon 떠도는 winnie.yun 2018.12.23 18:38 신고

      이 수업 굉장히 괜찮았어요 ㅎㅎㅎ
      컴공과에서 유명한 교수님이 강의 하시기도 했고요.
      약간 입문자들 눈높이에 맞게 잘 알려주시더라고요.
      스킨은 그냥 이거로 쭉 갈거 같아요.
      저도 스킨 설정 해놨다가.. HTML 좀 수정해놓고 잘못 눌러서 다시 날리고 ㅜ 백업 시키고 했던 기억이 나네요.