티에디션을 반응형으로 만들기 (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의 아무곳에나 붙여두시면 됩니다. 저 같은 경우는 위에 붙였습니다.