16. 원 페이지, 사이드바 모드에서 가로 폭 설정하기

이미지를 활용해 다양한 기능을 제공하는 반응형 스킨

탕비수다 이마고 스킨은 2016년에 제작되었어요. 그동안 많은 변화를 거쳤고 이 글을 쓰는 시기에는 티스토리에서 지원하는 스킨 옵션을 활용해 다양한 기능을 제공하고 있습니다. 블로그의 전체적인 가로 폭을 변경하는 방법은 이미 '블로그 가로 폭 변경하기'에서 소개한 바 있습니다. 해당 글은 스킨 옵션을 지원하는 버전에서도 활용 가능합니다. 다만 세부적인 본문 글 너비나 사이드바 너비를 설정하려면 조금 더 자세한 설명이 필요할 것 같습니다.

탕비수다 이마고 스킨은 크게 원 페이지 모드와 사이드바 모드를 제공하고 있습니다. 원 페이지는 말 그대로 본문 글에 집중된 모드입니다. 위와 아래에 각각 메뉴와 푸터가 존재하고 그 중간에 본문 글이 노출되는 모드입니다. 사이드바 모드는 거기에 다른 정보를 노출할 수 있는 공간이 본문 옆에 마련되는 방식이라 할 수 있습니다.

대부분의 티스토리 스킨에서 가로 폭을 변경하기는 어렵지 않습니다. 크롬 브라우저에서 제공하는 검사 기능을 통해 변경하고자 하는 영역을 찾고 해당하는 CSS 정의를 찾아 수정하면 됩니다. 탕비수다 이마고 스킨을 사용하는 많은 분이 자주 질문하는 내용 가운데 사실, 이런 내용이 많습니다. 즉, 어떻게 하면 원하는 영역을 찾아 수정할 수 있을지 말입니다. 어떻게 보면 쉬울 수 있겠고 그렇지 않을 수 있습니다.

답 보다는 방법을 찾을 수 있게 안내하는 것이 옳은 방법이라 생각합니다. 수많은 정보가 산재하는 인터넷 세상에서 답을 찾기는 쉽습니다. 물론 틀린 정보를 가려내는 지식도 필요합니다. 그런데도 답을 쉽게 찾을 수 있는 것은 그 정보를 찾고 있는 사람들이 경험을 통해 알게 된 잘못된 혹은 변경된 정보를 판단하고 수정해주기 때문입니다.

이 글을 읽고 이해하기 위해서는 생활코딩에서 소개한 '크롬 개발자도구' 관련 글을 살펴보면 많은 도움을 받을 수 있을 것 같습니다. 시간이 되시는 분은 꼭 한 번 읽어 보세요. 더불어 HTML, CSS 관련 글도 소개하고 있어 앞으로 티스토리 스킨을 입맛에 맞게 변경하고자 한다면 꼭 읽고 이해하면 좋겠습니다.

1. 원 페이지 모드

이제 본론을 얘기해볼까요? 탕비수다 이마고 스킨에서 원 페이지 모드와 사이드바 모드에서 가로 폭을 설정하려면 어떻게 해야 할까요? 기본적으로 탕비수다 이마고 스킨은 원 페이지 모드를 제공하고 있습니다. 설명서 카테고리에서 글과 사이드바1 관련 게시물을 살펴보면 마지막 부분에 정의된 곳이라는 안내가 있습니다. 해당 부분이 가로 폭을 변경하기 위한 시작점입니다.

1.1 원 페이지 모드가 정의된 곳

100
101
102
103
104
105
106
107
108
<s_not_var_first-sidebar-use>
<style>
  /* 원 페이지 모드 너비 */
  .pagetitle-wrapper .maxlimit { max-width: 837px; margin-left: auto; margin-right: auto }
  #tt-body-page .holder, #tt-body-guestbook .holder { max-width: 837px }
  .article-desc { max-width: 837px; margin-left: auto; margin-right: auto }
  .comport { max-width: 837px }
</style>
</s_not_var_first-sidebar-use>
cs

스킨 옵션으로 가로 폭을 변경할 수 있게 옵션을 제공할 수 있습니다. 정의된 곳은 '블로그관리 > 꾸미기 > 스킨 편집 > html 편집 > HTML'에서 확인할 수 있습니다. 예전 탕비수다 이마고 스킨은 해당 기능을 지원했습니다. 다만 해당 기능을 지원할 경우 얻는 것도 있지만 잃는 것도 분명 있었습니다. jQuery를 이용한 지원이라 사용자가 좀 더 다양한 기능을 구현하기 쉽지 않았죠. 즉, 사용자 정의가 쉽지 않았습니다.

1.2 원 페이지 모드에서 글 가로 폭을 700px로 변경하기

100
101
102
103
104
105
106
107
108
<s_not_var_first-sidebar-use>
<style>
  /* 원 페이지 모드 너비 */
  .pagetitle-wrapper .maxlimit { max-width: 700px; margin-left: auto; margin-right: auto }
  #tt-body-page .holder, #tt-body-guestbook .holder { max-width: 700px }
  .article-desc { max-width: 700px; margin-left: auto; margin-right: auto }
  .comport { max-width: 700px }
</style>
</s_not_var_first-sidebar-use>
cs

가로 폭이 정의된 곳에서 원하는 가로 폭 700px로 변경하기 위해서는 기존 837px로 정의된 부분 모두를 700px로 변경하면 됩니다. 물론 100%로 지정할 수 있습니다. 이렇게 하면 블로그 전체 가로 폭만큼 원 페이지 모드 가로 폭이 설정됩니다. 블로그 전체 가로 폭은 얼마일까요? '블로그 가로 폭 변경하기' 글을 살펴보면 잘 알 수 있을 것 같군요. 원 페이지 모드 가로 폭 설정하기는 비교적 쉽죠?

2. 사이드바 모드

사이드바 모드에서 가로 폭 변경은 원 페이지 모드와 달리 조금 복잡합니다. 말 그대로 원 페이지 모드에 사이드바 영역이 하나 붙은 형식이지만 여러모로 신경 쓸 곳이 많습니다. 게다가 숨겨진 여백도 같이 합산해 처리해야 하므로 잘 이해해야 수정이 수월하겠죠.

2.1 사이드바 모드가 정의된 곳

109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<s_if_var_first-sidebar-use>
<style>
  /* 사이드바 모드 너비 */
  .row { max-width: 1252px }
  .pagetitle-wrapper .maxlimit { max-width: 1152px; margin-left: auto; margin-right: auto }
  #tt-body-page #main, #tt-body-guestbook #main { max-width: 1252px; margin-left: auto; margin-right: auto }
  #tt-body-page .holder, #tt-body-guestbook .holder { max-width: 837px; float: left; margin-left: auto; margin-right: auto; padding-right: 15px; border-right: 2px dotted #ededed }
  .article-desc { max-width: 837px; margin-left: auto; margin-right: auto }
  .comport { max-width: 837px }
  #tt-body-page .sidebar-first-wrapper, #tt-body-guestbook .sidebar-first-wrapper { max-width: 315px; float: right; display: block; padding-left: 15px }
  @media only screen and (max-width: 1251px) {
    #tt-body-page #pagetitle { max-width: 837px; margin-left: auto; margin-right: auto }
    .holder { float: none !important; padding-right: 0 !important; border-right-width: 0 !important }
    .sidebar-first-wrapper { display: none !important }
  }
</style>
</s_if_var_first-sidebar-use>
cs

2.2 사이드바 모드에서 글 가로 폭을 700px로 변경하기

정의가 조금 다르지만 원 페이지 모드에서 글 가로 폭을 변경하는 원리는 동일합니다. 다만 사이드바 모드에서는 글 영역 오른쪽에 사이드바 영역과 구분하기 위해 사용된 2px의 선과 15px의 여백이 있습니다. 따라서 700px로 변경하기 위해서는 두 값을 모두 더해 최종값을 얻어야 합니다. 그럼 얼마가 될까요? 네, 맞습니다. 717px이 되겠네요. 이제 837px로 정의된 부분 모두를 717px로 변경하면 됩니다. 모든 내용을 다시 적으면 혼동할 수 있으니 변경된 정의만 다시 적어보면 아래와 같습니다.

109
110
111
112
113
114
115
116
<s_if_var_first-sidebar-use>
<style>
  /* 사이드바 모드 너비 */
  #tt-body-page .holder, #tt-body-guestbook .holder { max-width: 717px; float: left; margin-left: auto; margin-right: auto; padding-right: 15px; border-right: 2px dotted #ededed }
  .article-desc { max-width: 717px; margin-left: auto; margin-right: auto }
  .comport { max-width: 717px}
</style>
</s_if_var_first-sidebar-use>
cs

2.3 사이드바 모드에서 사이드바 가로 폭을 200px로 변경하기

이제 사이드바의 가로 폭을 기존 315px에서 200px로 변경해보겠습니다. 눈치가 빠른 분은 뭔가 유사한 점을 발견하셨을 겁니다. 네, 그렇습니다. 글 영역과 구분하기 위해 사이드바 영역에서도 15px의 여백을 사용하고 있습니다. 그래서 기본적으로 제공하는 사이드바 영역의 실제 가로 폭은 300px이지만 전체 사이드바 가로 폭은 315px로 설정하게 됩니다. 그럼 사이드바 가로 폭과 관련된 변경 부분을 다시 적어볼까요?

109
110
111
112
113
114
<s_if_var_first-sidebar-use>
<style>
  /* 사이드바 모드 너비 */
  #tt-body-page .sidebar-first-wrapper, #tt-body-guestbook .sidebar-first-wrapper { max-width: 215px; float: right; display: block; padding-left: 15px }
</style>
</s_if_var_first-sidebar-use>
cs

여기까지가 사이드바 모드에서 글 가로 폭과 사이드바 가로 폭에 변경에 대한 일반적인 변경 방법입니다. 이제 마지막으로 남은 부분은 전체 가로 폭에 대한 정의, 제목과 두 영역 그러니까 글과 사이드바 영역에 대한 가로 폭 정의에 대한 설명입니다. 참, 한 가지 더 있군요. 일정 화면보다 작으면 사이드바가 사라지게 하는 처리도 남았네요.

2.4 사이드바 모드에서 전체 가로 폭 및 숨김 처리하기

100
101
102
103
104
105
106
107
108
109
110
111
112
<s_if_var_first-sidebar-use>
<style>
  /* 사이드바 모드 너비 */
  .row { max-width: 1132px }
  .pagetitle-wrapper .maxlimit { max-width: 1032px; margin-left: auto; margin-right: auto }
  #tt-body-page #main, #tt-body-guestbook #main { max-width: 1132px; margin-left: auto; margin-right: auto }
  @media only screen and (max-width: 1131px) {
    #tt-body-page #pagetitle { max-width: 717px; margin-left: auto; margin-right: auto }
    .holder { float: none !important; padding-right: 0 !important; border-right-width: 0 !important }
    .sidebar-first-wrapper { display: none !important }
  }
</style>
</s_if_var_first-sidebar-use>
cs

전체 가로 폭은 기본적으로 글 가로 폭과 사이드바 가로 폭을 더하고 둘 사이의 간격과 구분선 값을 합산합니다. 즉, 717(700 + 15 + 2)px + 315(300 + 15)px의 합과 같습니다. 결국 1032px입니다. 다만, 전체 가로 폭은 양쪽으로 50px의 공간이 더해지기 때문에 여기에 100px이 추가됩니다. 최종값이 1132px이 되는 이유입니다. 동일하게 메인 가로 폭도 설정합니다. 제목 관련 설정은 양쪽으로 어떤 공간이 더해지지 않아 1032px이 최종값이 됩니다.

이제 마지막으로 특정 가로 폭에서 사이드바가 숨겨지는 기능을 활성화하기 위해 미디어 쿼리에 적용할 가로 폭을 변경하면 됩니다. 해당 값의 의미는 어떤 가로 폭에서는 사이드바를 숨기냐는 것인데. 메인 가로 폭이 기준이 되겠죠. 메인 가로 폭보다 적을 경우에는 사이드바를 숨긴다고 설정하면 됩니다. 그래서 1131px을 지정합니다.

많이 어렵죠? 앞서 설명을 드렸지만 예전에는 이런 부분을 탕비수다 이마고 스킨에서 내부적으로 처리하고 있었습니다. 가능하면 과거 기능을 다시 구현할 예정입니다. 가능하면 좋겠네요.

[알림] 탕비수다 이마고 스킨의 본문은 한 페이지로 작동합니다. 현재 보여지는 두 페이지 모드는 사용자 지정을 통해 일시적으로 변경한 상태입니다. 실제 스킨을 설치하면 한 페이지 모드로 기본 설정됩니다.

이미지 맵

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    '설명서' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 15개 입니다.

      • 탕비수다님 블로그를 보면 제 블로그와 같은 화면인데, 사이드바1이 나타나지 않네요. 어디를 조절해야하는지요?
        위에 숫자로 줄여보았는데 아무변화가 없더군요..ㅜ.ㅜ

      • 그렇게 말씀하시면 난감한데요. 뭘 수정하셨는지요? 아니면 원래부터 나타나지 않았는지요? 원인이라고 생각하는 것이 있는지요? 혹 사이드바1은 스킨 옵션을 통해 사용 상태로 변경하셨는지요?

      • 건들지 않고 있는 상태로 사용 중입니다.
        큰모니터에서는 나타나는데요.
        처음부터 노트북에서는 나타나지 않아 위의 방법대로 수치를 조정해봤는데, 그래도 안나타나서 문의드린겁니다.
        같은 모니터인데 탕비수다님의 블로그는 나티나다군요.ㅜㅜ

      • 탕비수다 이마고 스킨은 기본적으로 원 페이지 모드에요. 스킨 옵션에서 사이드바1 사용 여부를 설정하셨나요?

        해당 글은 가로 폭 변경에 대한 글이나 사이드바 사용 여부랑은 관계가 없습니다. 스킨 옵션 설정에서 사이드바1 관련 글을 살펴보세요.

      • 사이드바 1이 사용중으로 되어 있구요.
        일정 화면 비율에서 숨김이 되는데요.
        같은 화면 비율인데, 제 블로그는 숨김이 되고, 탕비수다님의 블로그는 나타납니다.ㅜㅜ

      • 노트북 해상도가 낮나보군요. 그리고 사이드바1 관련 글은 아직 다 작성된 것이 아닙니다. 더불어 탕비수다 이마고 블로그는 가로 폭을 재조정한 상태입니다. 노트북 해상도에 따라 다르게 나올 수 있습니다.

      • 혹시 가로폭을 얼마로 하셨는지 알수 있을까요?
        저는 몇번이고 수정을 했는데, 안되서요.
        죄송합니다. 이런 소소한거 까지 물어봐서요.ㅜ.ㅜ

      • 728px로 변경해 봤어요. 소스보기를 해서 해당 부분을 찾으면 쉬울 것 같아요.

      • 옙^^,감사합니다.
        즐거운 하루 되세요^^

      • 안녕하세요. 혹시 댓글 url 을 사용하려면 어떻게 해야 할까요?

        https://avada.tistory.com/652

        위 글을 참고하여 하려고 했는데 잘되질 않습니다. 도움 좀 받을 수 있을지요?

      • 안녕하세요.

        관련 글을 살펴보았습니다.

        티스토리 댓글 내용 가운데 링크를 감지해
        활성화하는 방법이더군요.

        아쉽게도 탕비수다 스킨에서 지원하지 않는
        기능은 도움을 드릴 수 없어요.
        워낙 다행한 케이스가 많아서요.

        뿐만 아니라 잠시 내용을 살펴봤는데요.
        처음 진입시에 관련 기능을 임시 활성할 수 있지만
        새로 글이 달리거나 답변을 입력하면
        그걸 감지할 수 없을 것 같더군요.

        저도 관련 기능은 고민을 하다가
        구현하지는 않았습니다.

        고맙습니다.

      • 아 이 스킨에서는 안되는군요. 여러 방법으로 해봤는데 잘 안되더라구요.
        다른 부분은 마음에 드는데 좀 개선해보고 싶었는데.. 아쉽네요. 빠른 확인 감사합니다.^^

        많이 늦었지만 새해 복 많이 받으세요!

      • 넵 고맙습니다.

        새해복많이받으세요^^

      • 모바일 환경에서 가장 큰 문제점이 탕비수다 스킨의 모바일버전에서 메뉴를 클릭하면 글의 가장 윗부분으로 페이지가 강제로 이동된다는 점입니다.

        이 점이 정말 큰 문제인거 같네요.

      • 음 그렇게 되지 않는 다른 티스토리 스킨이 있나요?

        비동기식이라고 해서 유연하게 메뉴 목록을 불러오는 방식이면 화면 움직임 없이 가능한데요.

        티스토리 스킨은 네이버나 다음과 같이 직접 프로그램으로 제어하는 것이 아닌 api를 통해 제어하기 때문에 관련 기능은 어려울 수 있어요.

    *

    *