본문 바로가기

반응형 티스토리/Tistory

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

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



  비교적 오랜만에 돌아온 시리즈물입니다. ^^ 이번 시간에는 이번에 배포한 FastBoot v1.4처럼 우측 상단에 빨간색 배찌로 코멘트수를 보여주는 형태의 티에디션으로 하는 것을 설명해드리려고 합니다. 저번에 반응형으로 하기 2편에서 사실 제가 자세한 설명은 해드리지 않았었는데, 이번에는 코드에 대한 설명을 조금 하면서 새로 바뀐 버전을 어떻게 적용하는지 설명해드리겠습니다. 본 반응형 티에디션 적용은 FastBoot 스킨이나 마크쿼리님의 스켈레톤 스킨을 쓰시는 분들 모두 적용 가능하십니다. Bootstrap을 사용하고 있는 스킨이라면 문제없이 적용됩니다.



  일단, 저 맨 위쪽에 Responsive Tistory라고 쓰여진 회색바를 궁금해하시는 분들이 많이 계시던데, 이것을 추가하는 방법부터 알아보도록 하겠습니다. 일단 저 회색바의 코드는 다음과 같습니다.


	
<h3 class="title"><i class="fa fa-file-o"></i> Responsive Tistory</h3>



  다만 이 회색바의 경우에는 FastBoot을 쓰시는 분들에게만 적용이 됩니다. 다른 스킨을 쓰고 계신 분들은 h3에 title이라는 요소가 CSS에 없어요. 그래도 해보고 싶으신 분들을 위해 h3.title의 CSS를 제가 보여드리겠습니다.


	
h3.title {
  color: #fff;
  line-height:32px;
  font-size: 20px;
  font-weight: bold;
  border-radius:3px;
  padding-top: 3px;
  padding-bottom: 1.5px;
  padding-left: 10px;
  margin-bottom: 2px;
  margin-top: 5px;
  background: #aeb1b1;
} 
	


  다른 스킨을 쓰고 계시더라도 위 코드를 style.css에 넣으시면 저 회색바를 넣으실 수 있습니다.


  그런데 티에디션에서 최초에 보여드린 HTML 코드를 어디에 넣어야 하는지 모르시는 분들도 계시더군요. 그래서 좀 더 과정을 설명을 드리면.. 티에디션 설정에 들어가셔서,



  

  티에디션에 보시면 하늘색 +단추가 있습니다. 이것을 눌러서 요소 추가를 하신 다음에,



  그림에서는 헤드라인형의 첫번째 요소를 추가하는 것으로 하고 있지만, 사실 요소는 의미가 없습니다. 어차피 HTML들어가서 싹 다 날릴 거니까요. 무언가 눌러서 들어가게 한다는 의미입니다. 정말 말그대로 아무거나 넣으셔도 상관없어요.



  디자인에 가시면 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;">
                <div style="margin:10px; border-radius: 5px; background-color: #fafafa;">
                    <span class="cnt badge badge-danger pull-right" style="position: relative; left:8px; top:-5px; min-width: 10px; padding: 2px 6px; font-size: 12px; font-weight: bold;">[$$_article_rep_comment_cnt_$$]</span>
                    <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-file-o"></i> [$$_article_rep_title_excerpt_$$]</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:5px; font-size:0.8em;"><a style="color:#000;" href="[$$_article_rep_link_$$]">
                        [$$_article_rep_desc_excerpt_$$]</a></div>
                    <div style="padding:5px; background-color:#efefef; border-radius: 0 0 5px 5px;">
                        <span class="pull-right" style="color:#000; font-weight:bold; font-size:0.8em;"><i class="fa fa-clock-o"></i> [$$_article_rep_date_$$]</span>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </s_article_rep>
    </s_tabloid>
</div> 
	

 이번에도 저번과 마찬가지로 주의하셔야할 점은 $$를 ##로 치환하시라는 겁니다. 지금 $$로 되어있는 이유는 ##로 제가 포스팅을 하면 이게 티스토리 치환자라서 여러분께 저 부분이 보이지 않기 때문에 $$로 사용한 것입니다. 메모장등에서 찾아바꾸기를 하셔서 $$를 ##로 일괄바꾸기 해주세요. 위 코드는 사실 엄밀히 얘기하면 CSS와 HTML이 분리되지 않았기 때문에 웹표준은 아닙니다. 하지만 티에디션에서만 사용할 스타일들인데 CSS에 위 스타일들을 넣게 되면 모든 페이지를 로딩할 때마다 스타일을 읽어오기 때문에 그것이 더 낭비라 생각했고, 적용하시는 분들이 CSS를 한번 더 수정해야된다는 불편함이 생기죠. 그래서 합쳐놓은 것입니다.


  위 코드를 하나하나 살펴봅시다. 먼저, 

	
 <div class="col-md-4 col-sm-6 msnry_item" style="margin:0; margin-bottom:15px;">
	

  이 부분이 한 줄에 들어가는 요소의 개수를 지정합니다. Bootstrap은 Grid System이기 때문에 한 줄을 12개의 Column으로 봅니다. 그런데 지금 class에 보면 col-md-4라고 되어있죠? 4개의 Column을 사용하는 요소를 만들겠다는 뜻입니다. 그렇다면? 12/4 = 3개의 요소가 한줄에 보이게 되겠네요. 그런데 col-sm-6이라고 또 있죠? 이것은 일정 수준 이상 화면이 작아지면 한 줄에 12/6 = 2개의 요소가 보이게 하겠다는 의미입니다. 실제로 창 크기를 줄여보시면,



 이렇게 어느 순간부터 한 줄에 2개씩 보이게 되지요. 모바일에서는 당연히 1줄에 1개씩만 보이게 됩니다. 이것은 따로 설정하지 않아도 Bootstrap이 알아서 해주는 일입니다.


<a style="color:#fff; font-weight:bold; font-size:1em;" href="[$$_article_rep_link_$$]"><i class="fa fa-file-o"></i> [$$_article_rep_title_excerpt_$$]</a>

  여기가 제목부분의 레이아웃입니다. 제목 앞에 <i class="fa fa-file-o"></i>라는 것은 지금 화면에 보이는 문서모양의 아이콘을 집어넣기 위해 삽입된 코드입니다. 이 부분을 제거하시면 아이콘 없이 제목만 나오게 할 수 있습니다.


  이제 나머지 부분은 대충 이해가 되실 듯 한데, 한가지만 더 설명드리면


<div style="padding:5px; font-size:0.8em;"><a style="color:#000;" href="[$$_article_rep_link_$$]">[$$_article_rep_desc_excerpt_$$]</a></div> <div style="padding:5px; background-color:#efefef; border-radius: 0 0 5px 5px;"><span class="pull-right" style="color:#000; font-weight:bold; font-size:0.8em;"> <i class="fa fa-clock-o"></i> [$$_article_rep_date_$$]</span> <div class="clearfix"></div> </div>

  이 부분이 이제 본문내용의 일부와 글쓴 시각이 표시되는 부분입니다. 마찬가지로 <i class="fa fa-clock-o"></i>는 시계모양의 아이콘을 의미합니다. style부분이 HTML에 포함되어 있으니 제목바의 색상 같은 경우 원하시는 색상으로 변경하실 수도 있겠죠. 이 부분은 직접 해보시기 바랍니다.


  그러면 이제 티에디션에 마찬가지로 저 요소를 넣어봅시다. 이번에는 아무요소나 추가하는 것이 아니라, '목록형' 에 있는 요소로 추가하여야 합니다. 제가 작업할 때 사용한 요소는 아래 요소입니다.



 다른 목록형의 요소를 이용하셔도 상관없지만, 혹시 모를 문제를 방지하기 위해서 저 요소를 사용하실것을 권장합니다. 그리고, 만약에 여러번 적용(이런 형식으로 요소를 추가한 다음에 또 추가하는) 하신다면, id설정에 주의하셔야합니다. 무슨말이냐면, 


<div id="tedition_gallery" class="tt-wrap-item js-masonry" data-masonry-options='{ "itemSelector": ".msnry_item" }'>

 처음에 등장하는 div에 보시면 id="tediton_gallery"라고 있습니다. id는 기본적으로 유일하게 하는게 원칙입니다. 만약 지금 글에서 설명하는 요소를 여러번 넣으신다면 이 id를 바꿔주셔야합니다. 가령 두번째 요소에는 tedtition_gallery2라는 식으로 말이죠. 그다음 이제 설명할 스크립트를 추가하셔야하는데, 이 역시도 여러 요소를 가지게 하시려고 한다면 약간의 수정이 필요합니다. 이에 관해서는 3편에서 설명했으니 참고하세요. 만약 갤러리형 요소를 여러개 넣으시고 스크립트 수정을 하지 않으시면 두번째 갤러리부터는 이미지가 붙어나오는 현상이 발생합니다.





  이제 마지막 작업만 남았습니다. 스크립트 삽입인데, 이건 2편에서 변하지는 않았습니다만 다시 첨부합니다.



  이 코드는 Masonry 플러그인이고, 이 플러그인에 관해서 더 자세한 정보를 원하신다면



를 참고하세요.



  위 스크립트를 어디에 넣냐고요? 간단합니다. 맨 처음에 설명드렸던 것처럼 요소를 아무거나 추가하신 후 같은 요령으로 넣으시면 되는데, 스크립트는 무조건 티에디션 요소중에 제일 아래로 내려온다고 생각하시면 편합니다. ^^ 제일 아래의 +버튼을 이용해서 추가하신 다음에 위 코드를 넣어주세요.




  그리고 마무리 작업으로, 티에디션 목록형은 기본적으로 item이 3개만 출력되므로 9개 등으로 적당하게 늘려줍시다.



  사진의 빨간 버튼이죠.


  


  이상 4편 마치도록 하겠습니다. 이번 글에서 그동안 궁금하셨던 것들이 해결되기를 바랍니다. ^^ 다음편에서는 갤러리형태가 아닌 다른 형태의 반응형 티에디션 요소를 가져와보도록 하겠습니다. 기대해주세요.