본문 바로가기

반응형 티스토리/Tistory

반응형 스킨에서 티에디션도 반응형으로 만들기 - 2


반응형 스킨에서 티에디션도 반응형으로 만들기 - 2





전편 참고


  두번째 시간입니다. 티스토리 블로그에는 티에디션이라는 기능이 있는데 이 페이지를 반응형으로 바꿔볼 것입니다. 저번 시간에 배운것보다 더 멋진 방법으로 말이죠.

  이번에는 좀 더 난이도가 어려운 수정이지만 보기에는 첫 시간에 했던 것보다 훨씬 좋은 Masonry라는 JS 플러그인을 활용할 겁니다. 반응형이 어떻게 동작하는지 동작영상을 이번에는 한번 찍어보았습니다.



영상으로 찍으니 렉이 좀 있는데 실제로는 조금 더 부드럽다고 보시면 됩니다. 실제 확인은



에서 하실 수 있습니다.


이걸 만들기 위해서는 티에디션을 말 그대로 완전히 뜯어고쳐야합니다. 어떻게 해야하는지 가이드는 해 드릴 수 있지만 세세한 부분까지는 설명이 힘든 점 양해 부탁드립니다. 그래도 질문하시면 최대한 답변 해드리겠습니다.


0. 부트스트랩, Fontawesome 적용하기

  col-속성 때문에 부트스트랩을 베이스로 하는 스킨에서만 작동됩니다. 제가 제작한 FastBoot스킨이나, 스켈레톤 스킨도 아마 부트스트랩이 적용되어 있는 것으로 알고 있습니다. 그리고 Fontawesome이 있으면 더 멋있긴 한데 없으시다면 <i> 태그를 다 삭제하면 되니 문제는 없습니다. 반응형 티에디션을 하시고 싶으시면 반응형 스킨부터 까세요!



1. 티에디션 기본 셋팅하기


  위 사진처럼 목록형에 있는 것으로 셋팅을 합니다.



2. 제목, 내용 글자수 조정


  이 부분은 미리 설정하지 않으면 돌이킬 수 없습니다. 후에 수정이 불가능하니 미리미리 수정하세요. 저는 60자로 조정을 하였습니다. 본문 글자수는 마음 가시는대로 조정하시면 될 듯 합니다.



3. HTML 삽입

  위에 보시면 오른쪽 상단에 HTML이라는 것이 보이시죠? 여기에 들어가신 다음 기존 코드를 다 날려버리시고,

<h2 class="tt-item-title"><span class="tt-item-title-bg"><span class="tt-item-title-inner">[$$_item_title_$$]</span></span></h2> <div id="tedition_gallery" class="tt-wrap-item js-masonry" data-masonry-options='{ "itemSelector": ".msnry_item" }'> <s_tabloid> <s_article_rep> <div class="col-md-4 col-sm-6 msnry_item" style="margin:0; margin-bottom:15px; padding:10px;"> <div style="border-radius: 5px; background-color: #e3f7ff;"> <div style="padding:5px; background-color:#5ac8fa; border-radius: 5px 5px 0 0;"> <a style="color:#fff; font-weight:bold; font-size:1em;" href="[$$_article_rep_link_$$]"><i class="fa fa-folder"></i> [$$_article_rep_category_$$]</a> </div> <a href="[$$_article_rep_link_$$]" title="[$$_article_rep_title_$$]"> <img style="width:100%;" src="http://[$$_article_rep_thumb_host_$$]/T650x650/[$$_article_rep_thumb_hash_$$]" alt="[$$_article_rep_title_$$]"/> </a> <div style="padding:0 5px;"><a style="color:#000; font-weight:bold;" href="[$$_article_rep_link_$$]"><i class="fa fa-file-o"></i> [$$_article_rep_title_excerpt_$$]</a></div> <div style="padding:5px; font-size:0.8em;"><a style="color:#000;" href="[$$_article_rep_link_$$]"> [$$_article_rep_desc_excerpt_$$]</a></div> <div style="font-size:0.8em;"> <span style="padding: 2px; border-radius:0;" class="label label-info pull-right"><i class="fa fa-clock-o"></i> [$$_article_rep_date_$$]</span> <span style="padding: 2px; border-radius:0;" class="label label-danger pull-right"><i class="fa fa-comments"></i> [$$_article_rep_comment_cnt_$$]</span> </div> <div class="clearfix"></div> </div> </div> </s_article_rep> </s_tabloid> </div>

  위 코드를 삽입해줍시다. $$는 ##로 치환해주시기 바랍니다. 티스토리에서 치환자로 쓰는 녀석이라 삽입이 되지 않네요. 그런데 해야할 일이 하나 더 있습니다.



4. 티에디션 요소 하나 더 추가

  티에디션 요소를 아무거나 하단에! (위에 만든 것보다 더 하단에요) 추가하신 후 HTML을 마찬가지 요령으로 다 날려줍니다. 이 부분은 화면에 출력되지는 않을 것입니다. Javascript때문에 넣는 거에요.



  좀 긴데 대부분의 부분이 Masonry라이브러리이고 밑에 부분만 제가 추가한 겁니다. 이 라이브러리에 관심있으신 분은 아래 사이트를 들러보세요.



이니 참고해보세요.


  이제 위 셋팅까지 마치면 Masonry가 티에디션에서 동작하는 것을 확인하실 수 있습니다.

  초기 아이템 개수는 3개여서 Masonry를 적용해도 아무런 감흥이 없을 것이니.. 제가 위에 찍어놓은 예제처럼 요소를




  저 +버튼을 이용해서 늘려줍시다. 너무 늘리면 모바일에서 자비심없는 종스크롤을 유발하므로 적당히 하셔야겠죠. 그리고는 감상해줍시다.