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

Posted by Readiz
2014.03.05 19:06 반응형 티스토리/Tistory


반응형 스킨에서 티에디션도 반응형으로 만들기 - 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를 적용해도 아무런 감흥이 없을 것이니.. 제가 위에 찍어놓은 예제처럼 요소를




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


이 댓글을 비밀 댓글로
    • 그룬라이프
    • 2014.03.05 20:57 신고
    궁금한게 하나 있는데 저 코드접고 펴기에 있는 코드들은 어디에다가 넣으라는 말씀이신가요? 저걸 적용해야지 이미지가 움직이는 모션이 보이는거겠죠?
    • 네 저게 Masonry입니다. 티에디션 요소추가 (하늘색 +버튼) 을 하신다음에 아무 요소(목록형이든 어디서든 아무거나 추가하시면 됩니다) 추가하신 후에 다 없애고 저 스크립트를 넣으면 됩니다.
  1. 이렇게 반응형으로 하는군요. 이것을 Masonry로 하는 것을 보고 멋있어서 이것을 어떻게 반응형으로 할 줄 몰라 궁금했거든요.
  2. readiz님 감사합니다!!!
    readiz님께서 올려주신 방법덕에 그동안 고민이었던 티에디션에 대한 해결책을 얻었습니다!!
    • 러비님 블로그 티에디션이 멋있네요 ^^
      고생하셨습니다.
  3. 적용했는데 너무 좋네요 ^^
  4. 안녕하세요. 궁금한게 2가지가 있어요.
    1.소스를 적용했는데 모바일에서 세로->가로로 하면 반응형이 안되요. 다른 분들은 다 되는 거 같은데요
    2.글제목60, 글요약200으로 해도 안되요.
    주의사항해서 소스를 적용해야하는 것들이 뭔지 궁금해요.
    • 우선 2번은 작동과 상관없는 부분이고요.
      소스 두가지 다 적용했는지 확인바랍니다. 조금만 주의깊게 읽어보시구요.. ㅎㅎ 다른 분들도 되었다면 anadigi St님께서 무언가 놓치고 있는 부분이 있지 않을까요?
      특히 Masonry소스를 뒷부분에 요소추가해서 넣으셨는지 확인바랍니다.
  5. Readiz님 안녕하세요.
    확인해본 결과 1.2 모두 반응형으로 되더군요.
    감사해요^^
  6. 궁금한게 하나 더 있어요^^
    Readiz님 지금 블로그에 보면 티에디션을 반응형으로 만들었어요.
    제목이 위에 있고 옆에 댓글 수가 붙어 있고 맨아래에 요약글이 있어요.
    설정을 어떻게 하신 건지 궁금해요~
    • 보시다니 예리하시군요~
      어제 수정한 부분인데 아직 강좌에 반영은 안되어 있습니다.
      나중에 4편에서 좀 더 구조에 관한 포스팅을 하도록 하겠습니다. 조금 많이 바꿔야 해서.. 코멘트로 알려드리기는 좀 그렇네요. 한번 제 소스를 확인해보시면 따가실 수는 있을 겁니다. ^^
  7. 리드이지님 따라하다 가랑이 찢어져요 ㅎ ㅎ ㅎ
    최근에 반응형티에디션을 보게되서 실력은 안되는데
    자꾸 따라하고 싶네요.
  8. 안녕하세요^^ 반응형 아이템개수를 정하는 것은 무엇인가요? 화면에 보여주는 부분이 3개인 것도 있고 2인 것도 있어서요.
    • Grid System입니다. 한 줄이 12개로 구성되어 있구요.
      col-md-4는 12개를 4개씩 쓰는 것이니 한줄에 3개가 보이겠죠?
      이걸 col-md-6으로 하시면 6개씩 쓰는 것이니 한줄에 2개씩 보이겠죠.
      col-md-3으로 하시면 한줄에 4개씩 보이시겠구요.
  9. readiz님 스킨 정말 훌륭합니다. 한가지 궁금해서 글을 남깁니다. 마손리 쿼리 스크립트가 모든 스킨에서 적용이 가능한가 해서요.. 제 블로그에 적용해 봤는데 신버전 스킨이 아니여서 그런지 먹통이더라구요.. html을 적용하면 큰사이즈의 썸네일로 나오고 그리고 적용후에도 구동이 안되거든요.. 아직 html등등 초보 수준이라 혼자 해결이 안되어 질문 드립니다. 님의 훌륭한 스킨을 사용하는 건 아니지만 나름 혼자 연구하고 적용하면서 공부하고 있는데 정말 어렵네요.. 답변 부탁드립니다.^^;;
    • 우선 스킨 버전하고는 상관없는 현상입니다. 위 방법은 마크쿼리 스킨에도 사용가능합니다.

      실수를 하셨을 만한 부분을 짚어드리면,
      1. $$를 ##로 바꾸셨는지 확인해보세요.
      2. 코드 두가지를 티에디션 요소 두개를 삽입하여 넣으셔야 합니다.
      i) 첫번째 부분은 실제로 출력되는 부분이고,
      ii) 두번째 부분은 임의의 요소를 넣은 뒤 HTML을 다 지운 다음에 스크립트만 넣는 부분입니다.

      확인해보시고도 안되면 조만간 4편에서 좀 더 자세히 다룰 예정이니 조금만 기다려주세요~
  10. 답변 감사합니다. 말씀하셨던 부분은 실수가 없었구요.. 4편을 기다려야 겠네요..^^;
    • 네 조금만 기다리세요~ ㅋㅋ
      지금 포스팅할 주제가 쌓여있는데 가급적 빨리 올려보겠습니다.
  11. 궁금한것이 있습니다. ㅠ
    티에디션을 처음에 적용하고 화면의 중앙에 정렬시키고 싶으면 일일이 네비보정으로 위치를 조정하는건가요 ?
    아니면 따로 적용방법이있는건가요?
    • ?
      자동 중앙 정렬 됩니다만...
      위 코드나 4편의 코드대로 하신거 맞으세요?
  12. 안녕하세요 이번에 관심이 있어서 반응형 스킨 페스트부트 1.61버전을 설치 하였는데요
    현제 카테고리에 있는 겔러리형으로 티에디션에 윗내용을 적용하려는데
    티에디션을 누루면 요소를 선택하라고 하는데 선택요소가 잡히는게 없습니다
    카테고리타고 들어가보면 에디션 에디트는 안뜨고 홈에서만 에디션이 뜨는데 도통 요소가 안잡혀요 ㅜㅡ
    해답좀 주세요~
  13. 부트스트랩안쓰는 사용자는 어떻게 해야되나요?
  14. 와 덕분에 반응형 스킨에도 티에디션을 적용할 수 있었습니다.ㅎㅎ
    항상 readiz님 덕분에 많은 것을 배워가네요. 늘 감사합니다.
    • 2015.08.02 22:28
    비밀댓글입니다
  15. 감사합니다 재능기부 잘 받았어요^^

티스토리 툴바