참고 : (1) 티스토리 반응형 스킨을 왜 만들어야 하는가?

(2) 이번 반응형 스킨에 쓰인 기법들

(3) 기본 블로그 레이아웃 짜기

(4) 반응형 블로그 레이아웃 짜기

(5) 블로그 레이아웃 추가사항

(6) 티스토리 스킨 제작 팁

(7) 티스토리의 이미지 가변적으로 변하게하기




이번에는 티에디션을 어떻게 반응형 스킨에 맞출지를 이야기하겠습니다.


스킨이 공개되어 있기 때문에 기본적인 것은 nQuark 스킨을 다운로드 해서 소스코드를 보시면 알 수 있습니다. 이번에는 제 스킨과 같은 방식으로 작업하는 팁을 알려드리도록 하겠습니다.




1. 가능한 한 CSS만을 수정해서 티에디션을 반응형으로 만들어야 합니다.


일단 이 사실을 기억하시기 바랍니다. 티스토리 스킨 제작 작업으로 티에디션의 html구조를 변경하는것은 어렵습니다. 그렇기 때문에 기존의 티에디션 구조에 CSS만을 입혀서 티에디션을 반응형으로 만들어야 합니다.


물론 티에디션의 html 구조를 바꾸는 것이 영 불가능하지는 않습니다. 하지만 이 경우 사용자에게 또다른 번거로운 과정을 거치도록 해야 합니다.


( 캡쳐 - 티에디션의 html 구조 )


그렇기 때문에 기본적으로 스킨작업을 할 때 css만을 사용하여 반응형으로 만드는 것이 가장 이상적이라고 생각하시면 됩니다.




2. 모든 티에디션 구조를 반응형을 만드는 것은 불가능합니다.


직접 티에디션을 적용하면서 여러가지 티에디션 모양의 구조를 살펴보면 알겠지만, 클래스나 ID가 중복되는 코드가 있는 반면, 중복되지 않는 코드도 있습니다. 따라서 모든 티에디션 구조를 반응형으로 만드는 것은 불가능하다고 보시는게 맞습니다. 물론 티에디션은 워낙 종류가 많기 때문에 현실적으로 모든 티에디션을 다 맞춰주는 것도 어렵습니다.




3. 그럼 어떻게 하냐?


티에디션은 기본적으로 핵심적인 틀의 width값이 pixel로 정해져 있습니다.






따라서 여러분은 이러한 부분들을 직접 찾은 다음, 해당 부분을 %값으로 바꾸어야 합니다.


주의할 것은 티에디션은 구조상 여백이 있는 것이 보기 좋은데, 여백을 pixel로 주고 전체 크기를 %로 줄 경우, css3의 calc 속성을 써야 합니다. 하지만 이 속성은 익스플로러 구버전과 호환되지 않기 때문에, 익스플로러 구버전과 호환되게 만들기 위해서는 추가적인 코딩을 해야 함을 염두해 두셔야 합니다.



calc 속성으로 익스플로러 구버전에 대응하려면 다음과 같이 css를 작성합니다.

(다음 예제는 티에디션 종류 중 2단 구성이기 때문에 50%를 준 것입니다. 사용하는 티에디션 모양에 따라서 값을 다르게 주셔야 합니다.)


id/class명 { width:315px; width:calc(50% - 5px); }


왼쪽에 익스플로러 구버전을 위한 픽셀값을 적고 오른쪽에 calc 값을 적어주면, 일반적인 브라우저에서는 calc속성을 따르고 익스플로러 구버전에서는 pixel값이 적용됩니다. (익스플로러 구버전은 PC에서만 작동하므로 굳이 익스플로러 구버전에서 반응형으로 만들 필요는 없기 때문에, pixel로 값을 고정시켜도 무방합니다.)


티에디션은 기본적으로 id와 class의 조합이기 때문에 css 우선순위가 꽤 높은 편입니다. 그래서 어지간해서는 내가 css값을 추가해서 사용할 때 !important 값을 활용하셔야 내가 정의한 값이 적용됩니다.


따라서 위의 코드는 다음과 같이 바뀌겠죠.


id/class명 { width:315px !important; width:calc(50% - 5px) !important; }




4. 주의할 점


일단 티에디션을 내가 적용할 코드에 맞는 걸로 설정해야 하며, 스킨을 적용한 다음 티에디션을 수정하면 내 스킨의 css코드가 티에디션에 제대로 적용되지 않을 겁니다. 따라서 이런 경우 티에디션을 바꾼 다음 다시 티스토리 관리의 html/css 편집에 들어가서 저장을 눌러야 합니다.


저도 이 부분을 스킨을 적용하는 모든 분들께 알려드려야 할 것 같습니다. 곧 스킨 적용 방법을 작성하여 티스토리에 초보자 가이드라인을 공개하겠습니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 피아랑 2015.03.29 12:19 신고  댓글주소  수정/삭제  댓글쓰기

    저도.. 티스토리 스킨 반응형으로 바꾸고 싶네요..^^ 잘 봤습니다.

  2. 천추 2015.03.29 22:02 신고  댓글주소  수정/삭제  댓글쓰기

    티스토리 블로그 운영에 참 필요한 정보를 포스팅하셨네요
    잘봤습니다^^

    • 책덕후 화영 2015.03.29 22:17 신고  댓글주소  수정/삭제

      티스토리 스킨을 직접 제작하거나 수정하는게 아닌, 그냥 다른사람 스킨 가져다 쓰는 거면 이런 내용은 필요하지 않습니다. 이런 내용은 스킨을 직접 수정할 때에나 필요한 것이지요. ^^;

  3. 모로코씨 2015.03.30 01:15 신고  댓글주소  수정/삭제  댓글쓰기

    티스토리 초짜인데 이런 기능도 잇군요!! 자기가 만든 스킨을 쓸 수 잇다니 개성이 잇어 좋을 거 같아요 네이버블로그할땐 직접 만들어보기도햇는데 티스토리는 처음이라 아직 어벙벙해요 좋은 정보네요^^

    • 책덕후 화영 2015.03.30 02:01 신고  댓글주소  수정/삭제

      티스토리는 스킨 디자인을 말 그대로 사용자 마음대로 만들 수 있는 대신 만드는 과정의 난이도가 좀 높은 편입니다. 저야 직업적으로 홈페이지 만드는 사람이니 이 부분이 어렵게 느껴져서는 안되겠습니다만 대부분의 블로거에게는 꽤나 어려운 작업이 될 것입니다. 사실 대부분의 평범한 블로거들은 티스토리를 사용하더라도 다른사람이 잘 만든 스킨을 가져다 쓰는 정도랍니다. 사실 블로그 운영시 진짜 중요한 것은 스킨 디자인이 아니라 컨텐츠가 얼마나 좋으냐이죠 ^^; 좋은 답변 되었는지요 ^^

  4. 달빛천사7 2015.03.30 08:35 신고  댓글주소  수정/삭제  댓글쓰기

    이젠 직업이니가 유료스킨도 만들어서 판매해바염 .

  5. Cornwolf 2015.04.02 00:57 신고  댓글주소  수정/삭제  댓글쓰기

    반응형! 정말 해보고 싶은데, 엄두가 안 나네요, 하지만 정리를 잘 해주셔서 어렵지만 언젠가 꼭 따라해 보고 싶군요! ^^ 잘 보고 갑니다.

  6. 막둥씨 2015.04.15 17:08 신고  댓글주소  수정/삭제  댓글쓰기

    티에디션도 반응형으로 바꿀 수 있군요!
    언제 도전해볼지는 미지수지만.. 새로운 정보 알아 갑니다.

    • 책덕후 화영 2015.04.15 17:14 신고  댓글주소  수정/삭제

      네 가능하지만 쉽지는 않습니다. 독자적으로 자신이 원하는 모양으로 반응형 티에디션을 만드려면 css3를 상당한 수준 이상으로 하셔야 될 것입니다. 댓글 감사합니다^^

  7. LAZEEN 2016.02.29 18:20 신고  댓글주소  수정/삭제  댓글쓰기

    저 코드를 넣는 위치가 어디인건가요? css인건가요?

    • 책덕후 화영 2016.02.29 19:20 신고  댓글주소  수정/삭제

      css 맞아요. 근데 제가 배포하는 스킨에는 이미 저 코드가 들어가 있어서 따로 만지실 필요 없습니다. 다른 스킨에 적용하고 싶을 때만 넣으시면 되셔요. 아참, 그리고 최근에 티에디션이 업데이트가 되어서 저 코드는 동작하지 않을 수도 있습니다.

    • LAZEEN 2016.02.29 20:28 신고  댓글주소  수정/삭제

      감사합니다^^

    • 책덕후 화영 2016.02.29 22:04 신고  댓글주소  수정/삭제

      참고로 최근에 스킨을 업데이트 했습니다. 스킨을 업데이트 하면서 티에디션 부분이 좀 바뀌어서 제 스킨에도 그 변경된 부분이 반영되어 있습니다. 따라서 제가 만든 스킨을 가지고 티에디션을 사용하시려면 신버전을 다운로드 받으셔야 할 것 같습니다.

티스토리 툴바