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

Posted by Readiz
2014.03.13 01:20 반응형 티스토리/Tistory


왜 내 티에디션이 꼬이는걸까!?


  티스토리 블로그 티에디션을 반응형으로 만드는 세번째 시간입니다. 이번 시간에는 저번 시간에 포스팅한 내용을 조금 더 심도있게, 흔히들 적용과정에서 실수하시는 부분에 대해 알려드리려고 합니다. 이 포스팅을 하게 된 이유는 아래 사진을 보시면 알 수 있는데요, 제 강의를 보시고 직접 티에디션을 적용하신 분입니다.




  Masonry 플러그인을 사용하면 가끔 이렇게 겹쳐나오는 모습을 볼 수 있는데, 물론 기본적으로 저번시간에 포스팅했던 요소를 한번만 쓰면 문제가 없습니다. 이 티에디션을 적용하신 분께서는 이 요소를 여러번 반복해서 사용하셨습니다. 여러번 사용하게 되면 각 요소에 대해 Masonry는 '초기화'를 시켜주어야 합니다. 기본적으로 맨 첫번째 요소는 제가 초기화가 되도록 코드를 넣어두었는데, 여러 요소를 쓰면 그렇지 못하죠. 이미지가 미처 로딩되기 전에 Masonry플러그인이 로드되어버리면, Masonry가 높이 계산을 잘못해서 저렇게 글이 겹치게 되는 것이죠. 


  이하는 수정 방법입니다.

  저번시간에 알려드린 코드 하단부를 보시기 바랍니다.




	
document.onreadystatechange = function () {
     if (document.readyState == "complete") {
        var container = document.querySelector('#tedition_gallery');
        var msnry = new Masonry( container );
        msnry.reloadItems()
   }
} 
	

위와 같은 부분이 있을 겁니다. 이 부분은 쉽게 얘기해서, #tedition_gallery요소에 대해 masonry를 초기화시키라는 의미입니다. #tedition_gallery는 다름아닌,


<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>

  저번 시간에 알려드렸던 코드의 둘째줄에 보시면 id="tedition_gallery"라는 부분이 있습니다. 여기에 매칭되는 것이죠. 그렇다면 이 Masonry요소를 두개 쓴다면, 어떻게 해야할까요? 당연히 ID를 두개를 만들어야겠죠? 즉,


  tedition_gallery와 tedition_gallery2로 각각 다른 ID를 지정해야 한다는 말입니다. 그렇다면 JS도 수정이 되어야겠죠? 다음과 같이요.

	
document.onreadystatechange = function () {
     if (document.readyState == "complete") {
        var container = document.querySelector('#tedition_gallery');
        var msnry = new Masonry( container );
        msnry.reloadItems()
        var container2 = document.querySelector('#tedition_gallery2');
        var msnry2 = new Masonry( container2 );
        msnry2.reloadItems()
   }
}  
	

  요소가 3개라면, 3이라는 숫자를 넣어 또 만들면 됩니다. 위 JS는 document의 상태가 "complete"일때, 즉 이미지가 다 로드되었을 때 Masonry보고 다시 티에디션을 정렬시키라는 의미가 되겠습니다. 티에디션에 여러 요소를 추가하셨다면 위에 말씀 드린 것처럼 수정하시면 겹쳐나오는 현상이 없을 것입니다.


  이렇게까지 적용을 마치시면 아래 이미지(제 블로그 티에디션입니다)처럼 두가지 요소에 대해서 Mansory가 꼬임없이 적용되는 것을 볼 수 있습니다.(Responsive Tistory와 SmartPhone 두 요소가 있지요.. ^^)





이 댓글을 비밀 댓글로
  1. 안그래도 질문 드리려고 하던 참이였는데,
    아예 글까지 써 주셨네요.. ^^;
    저런 현상이 처음들어가면 생기고,
    새로고침하면 정상으로 나와서 원래 그런가보다..했더니
    역시나 잘못 적용한 사례가 되었네요.. ㅜㅡ

    해당 글을 보면서 따라 하다보면,
    Masonry플러그인 추가하는 부분이
    저같은 초보들에게는 조금 헷갈리는 것 같습니다..

    이유를 알았으니,
    다시 수정 해야겠습니다..
    감사합니다..
    • 아 그리고 이미지 없는글.. 애초에 티에디션이 회색이미지를 보내버리더군요. 어쩔수없는듯 합니다. 이미지를 다 넣거나 있는글만 티에디션에 노출시켜야할듯..
  2. readiz님..본문과는 관련은 없지만 궁금한점이 있는데요^^ 보통 블로그 로딩속도를 높이고자할때 하는 방법중에 html과 css를 압축시키는 방법이 있길래 해봤더니 확실히 개선이 되긴 하는데..딱 한가지 오류(사이드바 최근목록 앞 이미지와 검색리스트 결과에 나오는 이미지가 다깨짐)가 발생하더군요..혹시 시간되시면 html,css 압축 테스트해보시고 조언좀 해주세요~~
    • 압축은 기본이죠~ ㅋㅋ 압축해서 효과볼 부분은 이미 압축이 다 되어있답니다~
      skin.html과 style.css는 안하는 걸 추천드려요. 티스토리측에서 치환하는 부분이기 때문에 꼬일 수가 있습니다. 아마 기분탓이실꺼고 그다지 수치상으로 빨라지진 않을겁니다. 큰 부분은 아니라서..
  3. 아하^^ 그렇군요..감사합니다..fastboot가 괜히 이름이 fastboot가 아닌듯~~ 아무래도 제 포스팅에 포함된 이미지들때문에 로딩이 가끔 느려지는 것 같네요 ㅎㅎ 이미지를 올릴때 최대한 줄여봐야겠습니다.
  4. Masonry소스는 리드이지님처럼 Responsive Tistory와 SmartPhone 2개요소를 적용. 처음 몇개의 요소를 할지를 미리 정하여야 하나요? 수정은 안되는 거 같아서요.
    그리고 Masonry적용 후에 티에디션에서 타이틀을 적용하면 화면 밑으로 겹치네요.
    위의 Responsive Tistory와 SmartPhone 2개의 타이틀을 어떻게 하신건지 궁금해요~
    • 티에디션에 이미 코드를 넣으신거죠? 수정을 하실 때 아주 잘 클릭하면 클릭이 되긴 됩니다. 정 안되면 소스를 위해 넣었던 요소를 지웠다가 다시 넣으면 되지요.
      타이틀 역시 요소를 추가한 것입니다. 티에디션에서 제공하는 타이틀이 아니라요. <h3 class="title"></h3>로 감싸시면 됩니다.
  5. 이제 좀 이해가 되는 듯하네요. 요소를 지웠다가 다시 넣는다? 어떻게? 궁금했거든요.
    Masonry소스는 티에디션에서만 수정하는게 맞죠? 그리고 요소를 꼭 2,3,4면 반드시 수정을 해줘야 하나요?
    그리고 fastboot v1.4는 언제 적용가능하나요? 갤러리형,리스트형,타이틀형 괜찮은 방법인거같아요.
    • Masonry 요소가 여러개가 있다면 여러개 적용을 위해 코드 수정을 해줘야 한답니다~
      v1.4는 ie7기능만 보완되면 바로 배포될 겁니다. 아마 다음주 정도가 되지 않을까 싶군요.
  6. 네. 답변 감사드립니다. 응원합니다.
  7. 아무리 이방법 저방법 다 써봐도 결국엔 꼬이네요ㅜㅜ첨엔 안꼬이다 시간이 흐르면 다시 뭉쳐버리네요.. ㅜㅜ
    • 제 블로그를 보세요~~
      제대로 적용하면 안꼬입니다. 4편 연재때 여러개를 넣는걸 중점으로 포스팅 해야겠네요.
  8. 무슨말인지 접수했습니다.
    빠른 피드백에 감사합니다 ㅎㅎ
    • 새벽에 보통 피드백이 빠릅니다.
  9. 덕분에 홈페이지에서 Masonry 적용시키다 오류나는부분 해결했습니다 감사합니다!
  10. Locater의 Home 버튼을 누르면 박스들이 양 옆으로 붙어버리네요 ㅜㅜ 위의 이미지처럼 위아래로 엉키는 것은 아닌데 은근히 신경이 쓰이네요.. 자세 설명이 힘들어 제 블로그에 이미지를 첨부했습니다!

    http://ondongne.org/13
    • 어떤 이유에서인지 모르게 해결이 되었습니다!
      ... 다음 게시글에서 빨간색 댓글 수 표시 다는 과정에서 문제가 해결되었네요;

티스토리 툴바