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

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

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

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

  이하는 수정 방법입니다.

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

2014/03/05 - [연재/Tistory] - 반응형 스킨에서 티에디션도 반응형으로 만들기 - 2

	
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 두 요소가 있지요.. ^^)