친절한효자손 취미생활

구글에서 바로 티에디션을 반응형 코드로 만드는 방법에 대해서 알아봤습니다. 그런데 문제가 생겼습니다. 예전에는 어떤 스킨에서도 알아서 반응형으로 만들어지던 티에디션이 왠일인지 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 상태에서의 티에디션 상태 입니다. 보시는 것 처럼 과거의 반응형 코드를 그대로 사용하면 여기 여백이 없고 콘텐츠가 사이드바에 착 달라붙거나 일부가 밑으로 숨어서 잘린 상태로 출력됩니다. 수정된 코드를 사용하여 이렇게 정상적으로 보여지게 됩니다.




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




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




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




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


공유하기

facebook twitter kakaoTalk kakaostory naver band