티에디션을 반응형으로 만들기 (2018.10.티스토리 업데이트 이후 내용)

구글에서 바로 티에디션을 반응형 코드로 만드는 방법에 대해서 알아봤습니다. 그런데 문제가 생겼습니다. 예전에는 어떤 스킨에서도 알아서 반응형으로 만들어지던 티에디션이 왠일인지 PC 모드에서는 괜찮은데, 모바일 버전에서 개선이 되지 않았던 것 입니다.


처음에는 스킨 문제라고 생각했습니다만, 유료스킨이든 무료스킨이든 모두 다 적용이 되지 않는 문제가 발생했습니다. 반응형 스킨이 대세인데다가 최근 티스토리팀에서는 새로운 스킨을 선보임에 있어서 구형의 방식인 티에디션에 대해서 더 이상 업데이트를 하지 않을 생각인 듯 합니다. 하긴 조금 지나면 더 멋진 커버 기능이 도입되니까 그걸 사용하면 멋진 스킨을 꾸밀 수 있을 것 입니다.


그러나 개인적으로 티에디션을 아주 알차게 사용해오던터라... 이 녀석을 어떻게든 반응형으로 만들고 싶은 나머지, 구글링을 통해서 어렵지않게 CSS 코드를 알 수 있었습니다. 그러나 문제는 이 코드를 사용하면 티에디션 에디터에서 제 아무리 폭 조절을 해도 먹히지 않는다는 치명적인 단점이 발생하게 됩니다. 그래서 코드를 조금 수정했습니다.


/* 티에디션 반응형 ------------------------------------------------ */
.tistorytoolbar { display: none !important; }
.entry-content img { display: block; max-width: 100%; height: auto; } div.article iframe { max-width: 100% !important; }
.imageblock { max-width:100%; }
.tt-span-1, .tt-span-2, .tt-span-3, .tt-span-4, .tt-span-5, .tt-span-6, .tt-span-7, .tt-span-8, .tt-span-9, .tt-span-10, .tt-span-11, .tt-span-12 { max-width: 100% !important; }
.tt-span-1 { width: 6% !important; }
.tt-span-2 { width: 14% !important; }
.tt-span-3 { width: 22% !important; }
.tt-span-4 { width: 31% !important; }
.tt-span-5 { width: 39% !important; }
.tt-span-6 { width: 48% !important; }
.tt-span-7 { width: 53% !important; }
.tt-span-8 { width: 59% !important; }
.tt-span-9 { width: 72% !important; }
.tt-span-10 { width: 80% !important; }
.tt-span-11 { width: 88% !important; }
.tt-span-12 { width: 100% !important; }
@media screen and (max-width: 767px)
{ .tt-span-1, .tt-span-2, .tt-span-3, .tt-span-4, .tt-span-5, .tt-span-6, .tt-span-7, .tt-span-8, .tt-span-9, .tt-span-10, .tt-span-11, .tt-span-12 { width:100% !important; } }
@media screen and (max-width: 400px) {
                #ttCanvas, .tt-span-12 { width: 95% !important; }
            }
@media screen and (min-width: 401px) and (max-width: 580px) {
                #ttCanvas, .tt-span-12 { width: 96% !important; }
            }
@media screen and (min-width: 581px) and (max-width: 768px) {
                #ttCanvas, .tt-span-12 { width: 97% !important; }
            }
@media screen and (min-width: 768px) {
                #ttCanvas, .tt-span-12 { width: 98% !important; }
            }

티에디션 반응형.txt


마지막 마크업 태그요소들 중 기존에 사용하던 #ttCanvas, .tt-span-12 {width: 100% !important;} 라고 하는 부분을 @media 요소를 활용해서 총 4가지 해상도의 크기에서 각각 최대 가로크기를 변경해 주었습니다. 가로 크기를 100%로 하면 티에디션의 우측 라인이 완전히 우측으로 붙어버립니다. 문제가 이건데 만약 우측에 사이드바가 있는 경우라면 스킨에 따라 사이드바 뒤로 숨어버리게 됩니다.


#ttCanvas 를 또 하나의 div로 감싸서 진행하면 되지만, 그러려면 자바스크립트를 또 사용해야하니 그냥 여기에서는 간편하게 가로크기를 아예 조금 줄여버리는 방법을 사용했습니다. 결과적으로는 크게 문제없이 출력됩니다. 나머지 부분은 기존과 동일합니다. 해당 코드는 위의 첨부파일에 있으니 다운받으셔서 티스토리 CSS의 아무곳에나 붙여두시면 됩니다. 저 같은 경우는 위에 붙였습니다.




이렇게 붙여두시고 저장을 눌러주세요. 그리고 티에디션의 브라우저 창 크기를 줄여가면서 오른쪽 여백의 변화를 살펴보시기 바랍니다.




이것이 FHD 상태에서의 티에디션 상태 입니다. 보시는 것 처럼 과거의 반응형 코드를 그대로 사용하면 여기 여백이 없고 콘텐츠가 사이드바에 착 달라붙거나 일부가 밑으로 숨어서 잘린 상태로 출력됩니다. 수정된 코드를 사용하여 이렇게 정상적으로 보여지게 됩니다.




조금씩 줄여보세요. 이 여백이 약간의 오차는 있을 수 있겠지만 계속해서 이렇게 콘텐츠를 가리지 않고 발생하게 됩니다. 스크롤바랑 겹쳐지지 않습니다.




조금 더 줄여도 마찬가지로 이렇게 콘텐츠를 가리지 않게 됩니다.




완전히 줄여봤습니다. 역시 티에디션이 일부가 잘려보이지 않고 정상적으로 보여지고 있습니다. 티스토리에서 티에디션을 과연 수정해줄지는 모르겠지만, 당분간은 이렇게 사용하고 있어야 할 것 같아요. 점점 업그레이드가 되어가는 티스토리! 파이팅 입니다. 끝.




"친절한효자손 취미생활" 을 검색!


이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유하기

댓글(7)

  • 2018.11.12 01:11

    비밀댓글입니다

    • 2018.11.14 17:55 신고

      안녕하세요, 197페이지에 이어서 설명이 되어 있습니다. 참고하시면 될 것 같습니다. 그리고 현재 저는 티에디션을 사용하고 있지 않고 이 스킨은 유료 스킨이에요. 기본 디자인이 이렇습니다.

  • 2018.12.08 10:21 신고

    안녕하세요
    지금 제 티스토리 사이트 모바일로 메인화면을 보면 화면이 짤려서 나오고 있어요
    티에디션에서 이것저것 만져봐도 제대로 안나와서 그런데 시간이 된다면 한번 봐줄수 있나요?
    https://carpediemmjy.tistory.com/

    • 2018.12.08 17:35 신고

      안녕하세요. 여기에 나온 본문 내용을 적용하시길 바랍니다.

    • 2018.12.08 18:18 신고

      본문대로 했는데 안되면 방법이 없나요?

    • 2018.12.08 20:08 신고

      그... 보기모드를 다른것으로 해보시겠어요? 이게 적용되는게 있고 안 되는게 있는듯 합니다

    • 2018.12.08 22:01 신고

      위의 문제는 해결했는데
      한가지 더 질문할게 있어요
      지금 블로그가 네이버에 노출이 안되서 그러는데 제가 기존에 사용하던 네이버 블로그에 티스토리 포스팅한 링크를 사용해서 네이버 블로그에 글을 포스팅 할려고 하는데

      혹시 이것도 유사문서라던지 문제가 될까요?

Designed by JB FACTORY