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

Posted by Readiz
2014.03.20 00:13 반응형 티스토리/Tistory

반응형 스킨에서 티에디션도 반응형으로 만들기 - 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편 마치도록 하겠습니다. 이번 글에서 그동안 궁금하셨던 것들이 해결되기를 바랍니다. ^^ 다음편에서는 갤러리형태가 아닌 다른 형태의 반응형 티에디션 요소를 가져와보도록 하겠습니다. 기대해주세요.

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 매번 고생하시네요 ㅎㅎ
    다른형태의 반응형 티에디션을 기대해볼께요 ㅎㅎ
  2. 제가 TA v.2 버전때 부트스트랩 그리드를 이용해서 반응형을 넣어 본적이 있는데, 이게 티에디션의 블루프린트랑 충돌이 생겨서 썩그렇게 만족할만한 결과물은 안나오더군요
    • 그런가요? 감사합니다. 아직까진 다행히 충돌하지 않는듯 합니다.
  3. 초보자도 알기쉽게 잘 설명해 주셨네요. 덕분에 잘 적용 되었습니다. 감사합니다.
    그리고 나중에 시간 나실때 겔러리 형태에서 이미지 대신 iframe 소스로 동영상이나 사운드클라우드 불러올수 있게 하는것도 강좌글 부탁드릴게요. 어제 yongzz님 소스 참고해가며 불러오려고 시도해 봤는데 실패했네요... 저 말고도 그 기능 원하시는 분들 있으실것 같아서 부탁드려 봅니다.
    • 근데 정말로 느릴겁니다. ㅋㅋ 어느 사이트도 메인화면에 아이프레임 테그를 10개씩 꺼내두진 않죠... 제가 추천드리는건 동영상만 있는 포스팅에 썸네일용으로 이미지를 첨부해두고 숨겨놓는 방법입니다. 아무튼 고려는 해보겠습니다.
  4. 이전 버전을 사용한 사람은.. 스크립트는 건드릴 필요없이, html 구성요소만 변경해주면 되는거죠? 변경된 html 을 추가하고 갤러리2,3,4 만 추가해주면 되겠죠? ㅎㅎ 한동안 HTML, CSS 처다보질 않아서인지, 기존에 알던 내용들도 다 까묵까묵 하고 있네요 ㅋㅋ
    • 네 맞습니다. 스크립트는 변하지 않았습니다.
  5. 전 저것도 해봤는데.. 레디즈님처럼 애니메이션은 넣기 힘들더라고요.
    흠.. 부트스트랩이 역시 유명한 이유가 있군요.
  6. Readiz님 ! 위의 방법을 똑같이 따라해보았는데 마지막 사진의 빨간버튼이 생기질 않습니다 ㅠㅠ 그 전 단계는 그대로 따라했는데 왜이럴까요 ㅠ
    • 해당 요소를 클릭해야 +버튼이 보입니다.
    • 아 감사합니다. 해결했습니다 ㅎㅎ 조만간 해당 스킨 적용 후기 올려놓겠습니다 시간 되시면 구경오세요 !
  7. 오 좋은정보감사해요 해보니 잘되네요 ^^ 근대 왜 저는 갤러리형에서 빨간숫자로 안될까요?? 흠..
    다시 함보면되긴하지만..그리고 혹시 가로폭 늘리거나 현재 갤러리가 3개밖에 안되는데 4개5개 로 배열안될까요?
    3x3 이아니라 4x4라든가 5x5 로하는방법있으시면..좀알려주세요 ^^~
    • 빨간숫자: 코멘트수 이구요.. 가끔 왜인지는 모르겠지만 안뜰때가 있더라구요.
      한줄에 여러개 넣는건 본문에 설명되어 있으니 다시 읽어보시기 바랍니다.
    • 2014.04.30 18:51
    비밀댓글입니다
  8. 안녕하세요 혹시 패스트붓이랑 스켈레톤 이외의 반응형 스킨은 구현불가능한지요.... windup이라는 스킨을 사용하는데
    참 탐나네요...
    • 좀 수정하면 가능할겁니다만 요즘 제가 여력이 없어서.. ^^;
    • 어떤식으로 수정해야할지.. ㅠㅠ 그러시군요...
  9. 저 댓글수 뱃지 소스 <span>과 </span> 사이에 <a></a>를 넣어버리니 제대로 표시되지 않네요. 디스커스 댓글 수 출력시키려면 필수적인데 어떻게 할 수 있는 방법 없나요?
    • 2014.11.19 11:13
    비밀댓글입니다
  10. 많은 도움 주셔서 감사합니다. 한가지 질문드릴게 있는데
    현재 마크쿼리의 dobedo스킨 사용해서 적용시켰는데 위아래 자동 배치가 오른쪽 맨 마지막 열에서만 자동으로 붙어지고
    왼쪽 두개 배열에서는 위아래 간격이 맨 오른쪽 열 두번째 이미지 아래로 정렬되서 나타나는데 어디가 잘못된건지 궁금합니다.
    화면 사이즈를 줄여 2줄로 되어도 오른쪽은 붙고 왼쪽은 똑같이 오른쪽 두번째 이미지 아래로 정렬되서 나타납니다....
  11. 너무 쉽게 설명해주셔서 감사합니다! 카테고리 회색 바를 저렇게 넣는 거였군요! 태그 설명을 이렇게 쉽게 풀어주시니 초보자인 저도 따라갈 수가 있어 너무 좋습니다! 정말 감사해요!

티스토리 툴바