티스토리 블로그 레이아웃 수정, Footer 레이아웃 변경시 트러블슈팅

Footer 영역의 설정 변경시 주의해야할 점  

Photo by RCADE, from Flickr

이번 시간에는 제 블로그 레이아웃을 수정하는 과정에서 생겼던 문제점 한가지에 대한 트러블슈팅 하나를 적어보려고 합니다.

일단, 기본이 되는 토픽은 아래의 포스트를 참조하시면 됩니다.

☞ [레이아웃] 2단, 3단 스킨을 만들어보자 by 용의자님

☞ Step.05, Life in Mono 스킨, 푸터, copyright 부분 변경 by 티비님

용의자님이 레이아웃의 기본개념을 잘 정리해주셨구요. 티비님께서 초보자들도 쉽게 이것을 적용할 수 있도록 노하우를 적어주셨습니다.

위의 그림과 같이 포스트 영역 바로 아래에 푸터가 위치하게 되면, 길이가 짧은 포스트나 카테고리 목록의 경우에는 레이아웃이 별로 보기가 좋지 않았기에 위 두분의 포스트를 참고로 수정을 했습니다. 두 분의 포스트가 말하는 포인트는 포스트 영역과 사이드바 영역의 정렬이 'float:left', 'float:right'와 같이 float 속성을 사용하기 때문에 이것에 영향을 받지 않도록 푸터 영역은 'clear' 속성을 사용하여 레이아웃을 수정한다는 것이었는데요. 그 방법 그대로 레이아웃을 수정했음에도 불구하고 전혀 변화가 없는 사태가 발생하더군요.
 

 뭔가 잘못한 것이 아닐까 싶어 한참을 다시 검토해봐도 도저히 틀린 부분이 없어 미궁 속으로 빠지던 찰나, skin.html을 잘 들여다보고 그 이유를 짐작할 수 있었습니다.

일반적으로 레이아웃은 위의 그림과 같은 형태를 갖게 됩니다. 용의자님의 포스트를 보시면 쉽게 이해가 되시겠지만, 컨텐트와 사이드바는 위 그림의 경우 각각 'float:left'와 'float:right'라는 속성이 CSS를 통하여 부여되는데요. 따라서 푸터를 아래의 독립된 영역으로 위치시키게 하기 위해서는 'clear:both'라는 속성을 부여하게 됩니다. 하지만 제 블로그의 skin.html은 다음과 같이 레이아웃이 지정되어 있었던 겁니다.

보시는 것처럼 푸터가 컨텐트 안에 들어가버리는 바람에 위의 두분의 팁처럼 푸터에 'clear:both' 속성을 주더라도 푸터가 블로그 최하위 영역으로 위치하지 않고 여전히 컨텐트 바로 밑에, 실제로는 계속 컨텐트 영역의 안에 존재했던 것입니다. 따라서 이를 해결하는 방법은 푸터 영역을 컨텐트와 별도로 분리시켜 주는 것입니다. skin.html로 돌아가 '<div id="footer">~ </div>' 영역을 찾아서 잘라내기를 합니다. (이 때, 실수로 html이 망가질 우려를 막기 위해 원본 html을 별도의 메모장이나 워드프로세서에 복사해 두는 것이 좋습니다.) 관리자 메뉴의 스킨 항목에서 'HTML/CSS 편집'을 선택하면 skin.html을 수정할 수 있습니다.

푸터 영역을 잘라낸 다음, skin.html을 잘 살펴보면, '<div id="content">~</div>'로 묶여진 태그와 '<div id="sidebar">~ </div>'로 묶여진 영역을 찾을 수 있습니다. Life in Mono 스킨의 경우에는 컨텐트 다음 사이드바 영역이 존재하는데요. 이 두 영역을 피해 그 아래에 아까 복사한 푸터 영역을 붙여넣기 해주면 됩니다. skin.html의 편집방식이 티스토리의 HTML/CSS 편집메뉴와 맞지 않아 들쭉날쭉하게 표시가 되어 불여넣기가 의외로 어려울 수 있습니다. Life in Mono 스킨의 경우에는 사이드바 태그가 끝나는 '~</s_sidebar></div>'를 찾아 그 다음에 바로 붙여넣기를 해주면 됩니다.

      (중략)
      </s_sidebar>
    </div>

    <!-- 불여넣기 할 자신의 푸터 영역 태그 -->
    <div id="footer">
    <!-- 푸터메뉴 -->
      <span id="footMenu">
        <!-- 블로그 사용 환경 (설치형/티스토리)에 맞게 아래 주석으로 처리된 메뉴를 활성화 시키시기 바랍니다. -->
        <!-- <a href="https://elros.tistory.com/tag" title="태그">태그</a> : -->
        <!-- <a href="https://elros.tistory.com/media" title="미디어로그">미디어로그</a> : -->
        <!-- <a href="https://elros.tistory.com/location" title="지역로그">지역로그</a> : -->
        <!-- <a href="https://elros.tistory.com/keylog" class="key" title="키로그">키로그</a> : -->
        <!-- <a href="https://elros.tistory.com/guestbook" title="방명록">방명록</a> : -->
        <!-- <a href="https://elros.tistory.com/manage" title="관리자">관리자</a> : -->
        <!-- <a href="https://elros.tistory.com/manage/entry/post" title="글쓰기">글쓰기</a> -->
      </span>

      <!-- 카피라이트 -->
      <span id="copyright">
        <strong>별바다의 서고</strong> is powered by <a href="http://daum.net" onclick="window.open(this.href); return false" title="Daum 바로가기">Daum</a> / Designed by <a href="http://www.tistory.com" title="Tistory 바로가기">Tistory</a>
      </span>
    </div>

  </div> → 'Life in Mono 스킨의 경우는 body 영역의 끝.'
</s_t3>
</body>
</html> →  skin.html의 끝.

이후 다시금 티비님의 포스트대로 푸터 영역을 수정하면 다음과 같이 제대로 영역이 수정되었음을 확인할 수 있습니다.

자신의 블로그가 원하는대로 레이아웃이 수정이 안될 경우에는 skin.html을 잘 살펴보시기 바랍니다. 제 스킨처럼 푸터 영역이 컨텐트 안에 들어가 있을지도 모르니까요.