반응형

포스트 영역을 늘리거나 줄였을 경우, 댓글과 방명록은?



전에 포스트 영역과 사이드 바 영역을 자신의 스타일에 맞게 늘리거나 줄이는 방법에 대해 포스팅을 한 적이 있었습니다.

티스토리 블로그의 포스트 폭과 사이드 바 폭 조정하기

당시에는 지식이 일천하다보니(물론, 지금도 그렇습니다만) 단순히 포스트 영역과 사이드바 영역의 조정에 관한 이야기만 하고 말았습니다만, 이렇게 영역이 조정되다보면 블로그의 여러가지 곳에서 사소한 문제들이 발생하게 됩니다. 특히, 댓글 영역과 방명록 영역의 경우에는 포스트 영역의 조정에 따라 그에 맞춰 폭을 다시 수정해주어야만 할 필요가 있지요. 죄송합니다. 댓글이나 방명록이 한산하다보니 그만 제껴버리고 말았습니다, 흑.

먼저, 댓글 영역과 방명록 영역을 조정하기에 앞서 다시 한 번 전반적인 블로그의 레이아웃을 살펴보도록 하겠습니다.

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

위의 포스트에서도 잠깐 언급한 바와 같이 블로그의 기본적인 영역 구성은 다음과 같이 이루어져 있습니다.


이 기본적인 영역에 포스트 영역과 댓글 영역이 다음처럼 위치하게 되구요.

이런 구성이기 때문에 만약, 컨텐트 영역을 줄이거나 늘이게 되면 그에 맞춰 포스트 영역과 댓글 영역도 같이 늘이거나 줄여줘야 합니다. 저번 포스트의 경우에는 포스트 영역을 조정하는 부분만 다뤄졌던 것이구요. 역시 이 부분을 조정해주기 위해서는 style.css를 조정해줘야 합니다. 자, 갑시다. 원본 백업도 꼭 해줍니다.

/* 댓글 */
.comment h3 {display:none; }
.commentList {font-size:0px; }
.commentList {width:/*@post-width=*/580px/*@*/; }
.commentList ol {border-bottom:1px solid #fff; }
.commentList ol li {padding-top:13px; padding-left:15px; padding-right:15px; }
.commentList ol li .wrapper {width:/*@post-width:-140=*/440px/*@*/; padding-bottom:11px; overflow:hidden; }
.commentList ul {border-top:1px solid #fff; }
.commentList ul li {padding:13px 0px 11px 0; border-bottom:1px solid #fff; }
.commentList ul li .wrapper {width:/*@post-width:-173=*/407px/*@*/; padding-bottom:0px; overflow:hidden; }

.commentWrite {width:/*@post-width:-30=*/550px/*@*/; padding:13px 15px 15px 15px; overflow:hidden; }
.commentWrite .name input {width:/*@post-width:-448=*/132px/*@*/; }
.commentWrite .password input {width:/*@post-width:-435=*/145px/*@*/; }
.commentWrite .homepage input {width:/*@post-width:-93=*/487px/*@*/; padding-left:5px; }
.commentWrite textarea {width:/*@post-width:-42=*/538px/*@*/; }
.commentWrite p.button {width:/*@post-width:-30=*/550px/*@*/; }


style.css에서 위의 부분이 댓글 영역의 폭을 조정할 수 있는 부분입니다. 하늘색으로 표시된 글자가 실제 값을 입력하는 부분인데요. 잠깐, 여기서 제가 이제까지 발견하지 못했던 어떤 규칙이 보이는군요. 

파란색으로 표시된 부분은 실제 주석부분으로 이제까지 크게 주의를 기울이지 않은 부분이었습니다. 항상 '@post-width...'로 표기되어 있는 것이 이상하여 다시금 살펴보았더니 아뿔싸, 이것이야말로 블로그의 폭을 수정하면서 가장 크게 고려해야할 중요한 주석이었던 것입니다.

'post-width'는 말그대로 포스트 영역의 폭을 의미합니다. 그리고, 이 포스트 영역의 폭을 기준으로 블로그의 다른 영역의 폭이 조정되고 있었던 것이죠. 예를 들면,

post-width=        : 포스트 영역과 같은 값으로 설정.
post-width:100=   : 포스트 영역 + 100px 값으로 설정.
post-width:-100= : 포스트 영역 - 100px 값으로 설정.


을 의미하는 것이었습니다.

자, 이제 이 의미를 알았으니 모든 것이 명확해졌군요. 브라우저에서 Ctrl+F를 눌러 post-width로 검색을 시작합니다. 그리고 이 주석에 명시된 설정과 실제 값이 틀린 부분을 찾아 고쳐주면 되는 것이죠. 이것은 방명록 설정의 수정에도 동일하게 적용되며, 후에 블로그의 영역을 재조정할 때도 이 부분을 이용하면 됩니다. 기준은 포스트 영역의 폭이 되겠네요.

post-width에 명시된 주석의 값을 기준으로 하여 오류 없는 블로그 레이아웃을 조정하시길 바랍니다.



반응형
반응형

자신만의 메뉴바를 만들어보기



'로그의 검색창을 사이드바로 옮기기'를 통하여 상단의 검색 바에 위치하던 검색창이 옮겨지고 나면 검색바의 좌측에 공백이 발생하게 됩니다. 당연히 허전합니다. 검색창의 빈자리가 크기만 하군요, 흑. (응?)

저번 포스트에서 검색 창을 사이드바로 이전한 이유는 이 빈 공간에 블로그 메뉴를 구성하기 위해서입니다. 'Life in Mono'와 같이 상단의 검색 바에 검색창과 카운터가 위치한 스킨의 경우에는 블로그 메뉴가 다른 공간에 위치하게 됩니다. 하지만, 자주 쓰는 메뉴의 경우는 상단의 메뉴바에 있는 것이 일반적이죠. 이것은 블로그 뿐만 아니라 홈페이지나 어플리케이션에도 대게 기본적으로 보여지는 구성입니다.

각설하고 이 빈공간을 메뉴바로 채워보겠습니다. 메뉴바를 만들기 위한 방법은 크게 두가지로 나눌 수 있습니다.

1) 이미지 버튼을 만들어 메뉴바를 구성하는 방법.
2) 텍스트로 메뉴바를 구성하는 방법.

이미지를 만들어 메뉴바를 구성하는 방법은 다음 포스트를 참고로 하시면 됩니다.

Step.02 티스토리 스킨 Life in Mono, 검색창과 메뉴변경 by 티비, 티비의 세상구경

텍스트로 메뉴바를 구성하는 방법은 다음 포스트를 참고하시면 되겠구요.

☞ [CSS 예제] 마우스오버 효과 메뉴 만들기(가로) by 용의자, BLOG*SUSPECT

두가지 방법 모두 기본은 같습니다. 일단, skin.html에서 기존의 메뉴바를 삭제하고 새로운 메뉴바를 구성한 다음, 메뉴바의 스타일을 style.css에서 지정해주는 것이죠. 먼저 skin.html을 편집하러 가시죠. 물론, 이번에도 skin.html 백업을 받아두시는 것이 좋습니다.

  <div id="header">
    <div class="head-container">
      <!-- 블로그제목 -->
      <h1><a href="https://elros.tistory.com/" title="별바다의 서고">별바다의 서고</a></h1>
      <!-- 블로그메뉴 -->
      <div id="blogMenu">
        <ul>
          <!-- 블로그 사용 환경 (설치형/티스토리)에 맞게 아래 주석으로 처리된 메뉴를 활성화 시키시기 바랍니다. -->
          <li class="tab_home"><a href="https://elros.tistory.com/" title="Home">Home</a></li>
          <li class="tab_tag"><a href="https://elros.tistory.com/tag" title="Tag">Tag</a></li>
          <li class="tab_media"><a href="https://elros.tistory.com/media" title="MediaLog">MediaLog</a></li>
          <!-- <li class="tab_location"><a href="https://elros.tistory.com/location" title="LocationLog">LocationLog</a></li> -->
          <!-- <li class="tab_key"><a href="https://elros.tistory.com/keylog" title="KeyLog">KeyLog</a></li> -->
          <li class="tab_guestbook"><a href="https://elros.tistory.com/guestbook" title="Guestbook">Guestbook</a></li>
          <li class="tab_admin"><a href="https://elros.tistory.com/manage" title="Admin">Admin</a></li>
          <li class="tab_write"><a href="https://elros.tistory.com/manage/entry/post" title="Write">Write</a></li>

        </ul>
      </div>
      <div id="searchbar">
        <div class="searchbar-left"></div>
        <div class="searchbar-container">
          <!-- 검색바에서 블로그 메뉴가 위치할 부분 -->

          <!-- 카운터 모듈 -->
          ...(중략)

진한 청색으로 표시된 부분이 현재 메뉴바를 정의한 부분입니다. 새롭게 검색바에 메뉴바를 넣게 되면 이 부분은 필요하지 않게 되겠죠. '<!--'과 '-->'를 사용하여 한 라인씩 주석처리를 해줍니다.(지워도 무방하지만 후일 필요할지도 모르니 일단 주석처리) 검색창을 사이드바로 옮기고 상단 좌측의 메뉴바 탭을 주석처리하면 다음과 같이 됩니다.


searchbar div 태그가 검색바에 해당하는 곳입니다. 이곳에 새로운 메뉴바를 구성하면 됩니다. 얼마전 '블로그의 검색창을 사이드바로 옮기기'에서 설명했던 검색창이 위치했던 곳이죠. 메뉴바를 다음과 같이 구성합니다.

<!-- 블로그 메뉴 -->
<div id="menuBar">
  <a href="https://elros.tistory.com/" title="메인 페이지로 이동">HOME</a>
  <a href="https://elros.tistory.com/tag" title="태그 페이지로 이동">TAG</a>
  <a href="https://elros.tistory.com/media" title="미디어 로그로 이동">MEDIA LOG</a>
  <a href="https://elros.tistory.com/guestbook" title="방명록으로 이동">GUEST BOOK</a>
  <a href="https://elros.tistory.com/manage" title="관리자 페이지로 이동">ADMIN</a>
  <a href="https://elros.tistory.com/manage/entry/post" title="포스팅 하기">WRITE</a>
</div>

일단은 각각의 메뉴를 이동하기 위해서 <a href...></a> 태그를 사용했습니다. 일단은 기본 텍스트로 메뉴를 구성했는데요. 메뉴에 맞는 이미지를 만들어 각각의 메뉴로 구성하기 위해서는 <img src="이미지 경로"> 태그를 사용하시면 되겠습니다. 만들어진 이미지는 자신의 블로그에 비공개 포스트 등으로 저장하신 다음, 마우스 우클릭으로 이미지 경로를 복사해주시면 되구요.

좀 더 발전된 메뉴를 만들기 위해서는 위에서 말씀 드린 티비님의 포스트를 참조하시도록 하구요. 제 경우에는 용의자님의 마우스 오버효과를 주는 텍스트 메뉴로 구성을 해보았습니다. 자세한 내용은 위에 링크한 용의자님의 포스트를 참조하시면 되겠습니다. skin.html의 구성은 위의 내용과 동일합니다. 스타일을 지정해주는 style.css의 경우에는 다음과 같습니다.

/* 메뉴바 */
#menuBar a{
                display:block;
                margin: 5px 0px 0px 0px;
                padding:5px 10px 5px 10px;
                margin-right:0px;
                background-color:#515151;
                color:#BBB;
                font:10px Verdana;
                text-transform:uppercase;
                float:left;
}

#menuBar a:hover{
                 padding-bottom:5px;
                 border-bottom:2px solid #FF9900;
                 color:#FFF;
}

skin.html에서 메뉴바 태그의 id인 menuBar에 대한 특성값을 이 style.css에서 지정해줍니다. #menuBar a {...}의 margin이 외부 여백을 지정해주는 부분이고, padding이 내부여백, 즉 메뉴의 크기를 지정해주게 됩니다. margin 값은 좌측부터 차례대로 상단, 우측, 하단, 좌측 순입니다. Life in Mono 스킨의 경우에는 상단에 5px 정도의 여백을 주면 좋은 듯 하군요. padding 역시 좌측부터 상단, 우측, 하단, 좌측의 값을 의미합니다. 

메뉴를 구성하면서 생기는 문제는 바로 배경색입니다. 기존의 Life in Mono 스킨의 검색 바의 배경색을 알아내지 못한다면 일일이 수동으로 입력하면서 값을 맞춰줘야 합니다. #505050~#515151 정도의 값이 검색 바의 색과 가장 비슷한 값인 것 같네요. 단, 이 값은 브라우저의 종류에 따라 차이가 있습니다. 익스플로어에서는 괜찮지만 크롬 브라우저에서는 좀 짙게 나오더군요. 이러한 문제를 해결하기 위해서는 검색 바 역시 조정이 필요할 것 같네요. 이 설정을 적용한 메뉴는 아래와 같습니다.


검색바의 모양이나 색이 마음에 들지 않으신다면, 자신의 스타일에 맞게 변경하는 것도 좋은 방법입니다. 검색바는 좌측과 우측 그리고 중앙에 해당하는 세 이미지로 구성되어 있으며, skin.html을 통해 각각 searchbar-left, searchbar-container, searchbar-right로 구별이 되어 있는데요. 텍스트바로 메뉴를 구성했으니 이 검색바도 이미지가 아닌 HTML 태그만으로 한 번 만들어보도록 하겠습니다.

기존의 skin.html을 건드리지 않고 style.css만을 바꾸어보도록 하겠습니다. searchbar를 찾습니다.

#searchbar {clear:both; }
#searchbar .searchbar-left, #searchbar .searchbar-right {float:left; height:41px; background-repeat:no-repeat; }
#searchbar .searchbar-left {width:9px; background-image:url(images/searchbar_left.png); }
* html #searchbar .searchbar-left {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/blog/skin/tis_LifeInMono_Light/images/searchbar_left.png', sizingMethod='crop');
}

#searchbar .searchbar-right {width:9px; background-image:url(images/searchbar_right.png); }
* html #searchbar .searchbar-right {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/blog/skin/tis_LifeInMono_Light/images/searchbar_right.png', sizingMethod='crop');
}
#searchbar .searchbar-container {float:left; width:/*@post-width:249=*/929px/*@*/; height:41px; background:url(images/searchbar_mid.png) repeat-x; } /* 검색바 폭 = 포스트 폭 + 249 */
* html #searchbar .searchbar-container {
width:/*@post-width:249=*/929px/*@*/;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/blog/skin/tis_LifeInMono_Light/images/searchbar_mid.png', sizingMethod='scale');
}

대강 네 부분으로 설정이 나뉩니다. 전체 검색바(searchbar) 설정과 검색바 왼쪽/오른쪽 공통설정, 검색바 왼쪽 부분 설정, 검바 오른쪽 부분 설정, 마지막으로 검색바 중앙부분 설정. 여기서 전체 검색바 설정을 제외하고 나머지 부분을 주석처리 해줍니다. style.css에서는 주석처리할 앞부분에 '/*'를 입력하고 '*/'를 주석처리가 끝나는 부분에 입력하면 해당부분이 주석처리되어 설정에 영향을 미치지 않습니다. 그리고 새로운 검색바 설정을 다음과 같이 입력합니다.

#searchbar {clear:both; }

#searchbar .searchbar-left {float:left; width:9px; height:42px; background:#000000;}
#searchbar .searchbar-right {float:left; width:9px; height:42px; background:#000000;}
#searchbar .searchbar-container {float:left; width:929px; height:42px; background:#000000;}

/* 이전 설정을 주석처리
#searchbar .searchbar-left, #searchbar .searchbar-right {float:left; height:41px; background-repeat:no-repeat; }
...(중략)
(src='http://cfs.tistory.com/blog/skin/tis_LifeInMono_Light/images/searchbar_mid.png', sizingMethod='scale');
}*/

검색바의 높이는 자신의 스타일에 맞게 늘이거나 줄이시기 바랍니다. 물론, 앞서 설정한 메뉴항목에 맞춰 지정해주는 것이 좋겠죠. 폭 역시 기존의 설정을 그대로 사용합니다. 바뀌는 것은 기존의 설정이 이미지를 쓰는 것이 아닌 배경색을 지정해주는 것으로, 제 경우에는 검은색으로 지정해줬습니다. 당연히 앞서 설정한 메뉴항목의 배경색도 검은색으로 해줘야 겠네요. 내부여백이나 외부여백도 조정해줄 필요가 있겠습니다. 설정을 적용하면 다음과 같이 바뀝니다.


말씀드린 방법을 사용하여 자신만의 메뉴를 구성해보시기 바랍니다. 텍스트 메뉴바는 화려하지는 않지만 깔끔한 레이아웃이 가능하기 때문에 메뉴바 외에도 블로그의 여러 부분에 응용이 가능할 것 같습니다. 물론 좀 더 멋진 디자인으로 꾸미시고 싶으신 분들은 이미지를 사용하시는게 좋겠지요.


반응형
반응형

검색바의 검색창을 사이드 바로 옮기고 싶다면...



스토리 블로그의 스킨 중 Life in Mono를 포함한 많은 스킨들은 상단의 검색 바에 검색창이 위치하고 있습니다. 이러한 구성은 검색창을 우선적으로 블로거들이나 방문자들에게 노출시키는 점에서는 유용하지만, Life in Mono 스킨처럼 우측에 방문자 카운트가 위치하고 블로그 메뉴가 별도로 나와 있는 경우, 블로그 메뉴를 검색 바에 포함시켜 메뉴바처럼 사용하고 싶은 블로거들에게는 제약사항이 될 수도 있습니다.

이번 시간에는 이 검색창의 위치를 변경시키는 방법 중, 많은 블로그 레이아웃에 적용된 사이드바에 검색창을 옮기는 방법에 대해서 이야기해볼까 합니다.

포탈 사이트의 검색창처럼 상단의 타이틀 바에 검색창을 옮기고 싶은 분들은 티비님의 포스트를 참조하세요.

Step.02 티스토리 스킨 Life in Mono, 검색창과 메뉴변경 by 티비, 티비의 세상구경

검색바에 삽입되어 있는 검색창은 skin.html에서 찾을 수 있습니다. skin.html에서 다음 부분을 찾아보세요.

<s_t3>
  <div id="header">
    <div class="head-container">
      <!-- 블로그제목 -->
      <h1><a href="https://elros.tistory.com/" title="별바다의 서고">별바다의 서고</a></h1>
      <!-- 블로그메뉴 -->
      <div id="blogMenu">
      ...(중략)
      </div>
      <div id="searchbar">
        <div class="searchbar-left"></div>
        <div class="searchbar-container">
          <!-- 검색 모듈 -->
          <div id="searchBox">
            <s_search>
              <label for="search">search</label>
              <input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
              <input value="검색" type="button" onclick="" class="submit"/>
            </s_search>
          </div>

          <!-- 카운터 모듈 -->
          <div id="counter">

블로그 제목과 블로그 메뉴에 대한 태그가 끝난 후에 검색바 태그가 시작됩니다. 검색 창은 '<!-- 검색 모듈 -->' 주석부터 시작되는 searchBox id를 가진 <div> 태그 안에 위치하게 됩니다. 바로 이 부분을 원하는 사이드 바 위치에 옮기면 되는 것이죠. 이 영역을 잘라내어 아래와 같이 사이드바 영역에 옮기도록 하겠습니다. 물론, 이 작업을 위해서 skin.html을 별도의 메모장 등에 백업해두는 것이 좋습니다.

        <s_sidebar_element>
          <!-- 블로그 설명 모듈 -->
          ...(중략)
        </s_sidebar_element>
        <s_sidebar_element>
          <!-- 검색 모듈 -->
          <div id="searchBox">
            <s_search>
              <label for="search">search</label>
              <input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
              <input value="검색" type="button" onclick="" class="submit"/>
            </s_search>
          </div>

        </s_sidebar_element>
        <s_sidebar_element>
          <!-- 카테고리 모듈 -->

사이드바 영역은 skin.html에서 <s_sidebar_element> 태그로 설정되어 있습니다. 오려내기한 검색창 역시 이 태그에 넣어주면 될 것 같군요. 사이드바 구성요소 사이에 아무 위치에나 일단 <s_sidebar_element> 태그를 만들고 오려낸 검색창 태그를붙여넣기 해줍니다. 여기까지하면 일단 사이드바에 검색창이 생기는 것까지는 성공하게 됩니다.

지만, 아직 몇가지 문제가 남아 있습니다. 일단, 이렇게 사이드바에 검색창을 추가하게 되면 블로그의 사이드바  설정은 기존과는 다르게 변하게 됩니다. 위젯이나 광고 스크립트와 같이 유저가 직접 추가한 모듈이나 외부에서 가져온 위젯들은 그대로 있지만, 사이드바 기본 모듈의 경우에는 자신이 설정했던 위치와는 달리 초기화되는 상황이 발생합니다. 이것은 새로운 검색창이 사이드바 모듈에 추가되면서 생긴 현상인데요. 당황하지 마시고 먼저 skin.html의 변경된 설정을 저장한 다음 관리자 메뉴→스킨→사이드바 설정으로 가서 다시 위치 조정을 하시면 되겠습니다. 여기서 새로 추가한 검색창 모듈을 확인할 수 있습니다.


사이드바 설정까지 조정을 마치면 이제 검색창은 사이드바에 어느 정도 성공적으로 옮겨지게 됩니다. 다음이 옮겨진 검색창의 모습입니다.


여기까지 하면 1차적으로 검색창을 사이드바로 옮기는 것은 마무리됐습니다. 이제 검색창의 모양을 자신의 스타일에 맞게 변경을 시켜주기 위해 style.css를 수정합니다. searchBox id를 찾습니다.

/* 검색 */
#searchBox {float:left; margin-top:9px; padding-left:64px; background:url(images/txt_search.gif) no-repeat 7px 3px; }
#searchBox label {display:none; }
#searchBox input {
 width:160px;
 height:14px;
 border:1px solid #9A9A9A;
 background-color:#515151; 
 color:#000000;
 vertical-align:middle; /* 검색창과 버튼 정렬이 안맞을 때 필수 */
 position:relative;
 cursor:pointer;
}
#searchBox .submit {
 width:22px; 
 height:16px;
 border:0px;
 background:url(images/btn_search.gif) no-repeat;
 text-indent:-5000px;
 overflow:hidden;
 vertical-align:middle; /* 검색창과 버튼 정렬이 안맞을 때 필수 */
 position:relative;
 cursor:pointer;
}

searchBox의 설정은 위와 같이 구성되어 있습니다. 먼저 정렬방식은 float:left로 되어 있군요. 상단의 외부여백은 9px의 왼쪽의 내부여백이 64px로 설정이 되어 있습니다. 백그라운드를 image/txt_search.gif로 설정하고 있네요. 검색창의 왼쪽에 위치한 아이콘과 search 텍스트가 이 txt_search.gif에 해당되겠습니다.

검색창의 입력창은 폭이 160px, 높이가 14px로 설정되어 있습니다. 원래 검색 바에 맞추기 위한 값이었지만, 이제 사이드바로 옮겨온 이상 너무 작은 크기일지도 모르겠네요. 취향에 맞춰 폭과 높이를 조절해주면 되겠습니다. 외곽선(border)과 검색창의 배경색(background-color)도 조정할 수가 있네요. 아래의 #searcBox .submit {...}에는 우측의 검색버튼에 대한 설정이 지정되어 있습니다. 

이러한 설정들을 제 블로그에 맞게 1차적으로 수정한 설정은 아래와 같습니다.

/* 검색 */
#searchBox {float:left; margin-top:5px; margin-bottom:5px; padding-left:5px; no-repeat 7px 3px; }
#searchBox label {display:none; }
#searchBox input {
 width:240px;
 height:20px;
 border:1px solid #9A9A9A;
 background-color:#FFFFFF
 color:#000000;
 vertical-align:middle; /* 검색창과 버튼 정렬이 안맞을 때 필수 */
 position:relative;
 cursor:pointer;
}

먼저 좌측에 표시되던 배경이미지를 삭제하면서 좌측의 여백(padding-left)을 줄이고 아래의 위젯과의 여백을 주기 위해 margin-bottom 값을 주가로 지정해주었습니다. 그에 맞춰 입력창의 폭과 높이도 조절하고 색도 흰색(#FFFFFF)로 지정해주었구요. 이렇게 수정을 거쳐 만들어진 검색창은 다음과 같이 보여집니다.


이제 어느 정도 검색창의 설정의 마무리가 된 것 같군요. 물론, 여기서 좀 더 수정을 할 수도 있습니다. 우측의 검색 버튼의 경우 크기가 조정된 검색창과 잘 어울리지 않는 모양입니다. 웹 상에서 무료로 제공하는 적절한 버튼 이미지를 구하거나 자신이 이미지를 만들어 'background:url(images/btn_confirm2.gif)' 와 대체시켜주면 됩니다. 관리자 메뉴→스킨→HTML/CSS 편집 페이지에서 'HTML/CSS 편집' 탭버튼 우측에 있는 '파일 업로드' 탭버튼을 누르시면, images/btn_confirm2.gif를 찾으실 수 있습니다. 이 이미지 대신 자신이 만든 버튼이미지를 업로드 하고 다시 style.css에서 버튼 이미지 경로를 자신이 업로드한 이미지로 바꿔주시면 됩니다. 간단하게 말하면,

background:url(images/btn_confirm2.gif)를 background:url(images/자기가 업로드한 버튼 이미지 파일명)으로 바꿔주시면 되겠습니다. 물론, 올린 버튼 이미지의 가로 세로 폭에 맞춰 style.css에 있는 #searchBox .submit {...} 설정의 버튼 폭과 높이를 바꿔주는 것을 잊지 마시구요. 이렇게까지 하면 다음과 같이 검색창이 완성됩니다.


이렇게 해서 간단...(한가요?)하게 검색창을 사이드바로 옮기는 방법을 알아보았습니다. 이제 검색바의 왼쪽에 여유공간이 생기게 되었군요. 여기에 메뉴바의 버튼들을 위치시키면 되겠습니다. 이 부분은 다음 포스트에서 다루도록 하겠습니다.


반응형
반응형

늘어난 프로필 영역에 맞춰 레이아웃 수정하기


Photo by EvenWu, from Flickr


전에 '티스토리 블로그 폭과 사이드 바 폭 조정하기' 포스트를 통하여 포스트 영역의 폭과 사이드 바 영역의 폭을 조정하는 방법에 대해서 설명한 적이 있습니다. 이 방법은 'Life in Mono' 2단 스킨을 기준으로 하여 설명한 것 인데요. 이 방법으로 포스트 영역을 조정하면서 그에 맞춰 사이드 바 영역 역시 조정이 가능합니다만, 한가지 문제점이 발생할 수 있습니다. (사실 두 가지라고 할 수 있는데 이번 포스팅에서는 하나만 먼저 다루도록 하겠습니다.) 아래 그림을 보실까요.


그림과 같이 사이드바의 폭이 늘어났지만 프로필 영역의 이미지가 그 크기 그대로 위치하게 됩니다. 닉네임과 프로필 설명 영역이 프로필 이미지 아래에 위치하면서 프로필 이미지의 우측에 여백이 생기게 되는데요. 물론, 블로깅에는 전혀 지장이 없지만, 애써서 수정한 스킨에 뭔가 티끌이 하나 묻은 것 마냥 찜찜하기만 합니다. 우측 여백에 닉네임과 블로그 설명을 위치시키면 좀더 컴팩트하지 않을까요.

이것을 위해 skin.html을 먼저 살펴보도록 하겠습니다. 관리자 페이지의 스킨 메뉴→HTML/CSS 편집 항목으로 가서 skin.html에서 다음 영역을 찾습니다.

<s_sidebar_element>
<!-- 블로그 설명 모듈 -->
  <div class="boxTopR">
    <div class="boxTop-left"></div>
    <div class="boxTop-mid"></div>
    <div class="boxTop-right"></div>
  </div>
  <div class="boxMidR">
    <div id="blogImage"><img src="https://t1.daumcdn.net/cfile/tistory/2136BC37537258EB2F" alt="블로그 이미지" /></div>
    <div id="userID">엘로스</div>
    <div id="blogDesc">Long time vacation...</div>
  </div>
  <div class="boxBtmR">
    <div class="boxBtm-left"></div>
    <div class="boxBtm-mid"></div>
    <div class="boxBtm-right"></div>
  </div>
</s_sidebar_element>

아마, 실제 skin.html은 이렇게 정렬되어 있지 않고 들여쓰기 여백이 너무 큰 관계로 줄이 어긋나 있을 겁니다. 위의 태그 중에서 'blogImage'가 프로필 이미지에 대한 설정을, 'userID'가 닉네임 설정을, 'blogDesc'가 프로필의 설명에 대한 설정을 담당하게 됩니다. 'Life in Mono'는 이 세 영역이 모두 div 태그로 묶여져 있구요. 다른 스킨의 경우에는 프로필 태그의 구성이 다르고, id 명칭도 다를 수 있으니, 찾아보실 때 주의하시길 바랍니다.

각각의 설정은 style.css에서 지정해주고 있습니다. 이번엔 style.css에서 해당 설정을 찾아보도록 하겠습니다.

/* 블로거 */
#blogImage, #userID, #blogDesc {width:178px; margin-left:10px; overflow:hidden; word-break:break-all; word-wrap:break-word; }
#blogImage {padding-top:7px; padding-bottom:8px; text-align:center; }
#blogImage img {width:174px; }
#userID {color:#5C5C5C; font:bold 11px/16px dotum; }
#blogDesc {color:#8A8A8A; font:11px/16px dotum; }

맨 첫줄에는 blogImage와 userID, blogDesc에 대한 공통설정입니다. 여기서 영역의 폭을 178px로 고정시켜주고 있군요. 아무래도 이부분이 수정이 되면 블로그 이미지의 폭도 178px에 고정되지 않을 것 같습니다. 왼쪽의 외부 여백(margin)은 10px로 주고 있군요. 이 부분은 그냥 유지해도 무방할 듯 합니다.

☞ 마진(margin)과 패딩(padding)에 대한 개념 알아보기: [style.css] margin, padding by 용의자, BLOG*SUSPECT

두번째 줄에는 blogImage에 대한 설정이 있습니다. 하단과 상단의 내부 여백(padding)이 각각 7px와 8px로 되어있고 정렬 방식이 'text-align:center'이군요.(얼레, 그런데 실제로 블로그 이미지가 중앙정렬이 되지 않고 있네요.) 닉네임과 프로필 설명이 우측에 위치하기 위해서는 이 정렬방식을 바꿔줘야 할 것 같습니다. 'float:left' 속성을 사용해보도록 하겠습니다.

☞ float:left 속성에 대한 개념 알아보기: [레이아웃] 2단, 3단 스킨을 만들어보자 by 용의자, BLOG*SUSPECT

'float:left' 속성이 사용되면 왼쪽으로 이미지가 정렬되면서 우측에 비어있는 여백으로 닉네임과 프로필 설명 영역이 자동으로 위치하게 됩니다. 단, 닉 네임 영역 역시 프로필 이미지와 동일하게 상단의 내부 여백을 지정해줄 필요가 있겠죠. 프로필 설명 영역 역시 우측에 여백을 지정해 주어 프로필 영역의 외곽선과 일정한 간격을 두도록 만들어줘야 할 것 같습니다. 이 모든 설정을 적용해보면 다음과 같습니다.

/* 블로거 */
#blogImage, #userID, #blogDesc { margin-left:10px; overflow:hidden; word-break:break-all; word-wrap:break-word; }
#blogImage { padding-top:7px; padding-bottom:1px; float:left; }
#blogImage img {width:150px; }
#userID { padding-top:7px; padding-bottom:7px; padding-left:5px; color:#5C5C5C; font:bold 12px/16px Malgun Gothic; }
#blogDesc { padding-top:7px; padding-left:5px; padding-right:5px; color:#8A8A8A; font:12px/16px Malgun Gothic; }

프로필 이미지의 폭은 150px로 줄였습니다. 제 블로그의 경우에는 사이드 바 폭이 300px로 조정되었기 때문에 우측 영역에 닉네임과 프로필 설명이 적당하게 위치하기 위해서 같이 조정해보았습니다. 늘어난 자신의 사이드 바 영역에 맞춰서 프로필 이미지 영역을 조정하면 되겠습니다.

위와 같이 늘어난 사이드 바 영역에 맞춰 프로필 영역을 고쳐 보았습니다. 물론, 이 설정은 'Life in Mono' 스킨에 해당하는 팁이기 때문에 다른 스킨에서는 조금 다를 수가 있습니다. 다만, skin.html에서 프로필 영역을 찾아낸 다음, 프로필 영역의 id를 style.css에서 찾아내어 그에 맞춰 수정해주는 기본을 기억하시면 될 듯 합니다.


반응형
반응형

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을 잘 살펴보시기 바랍니다. 제 스킨처럼 푸터 영역이 컨텐트 안에 들어가 있을지도 모르니까요. 


반응형
반응형

번 시간에는 티스토리 블로그 스킨 중 'Life in Mono'의 포스트 폭과 사이드 바 폭을 조정하여 좀 더 유연하게 블로그 레이아웃을 다룰 수 있는 방법에 대해 알아보도록 하겠습니다.

블로그를 오래 사용하다보면 아무래도 자신이 원하는 포스트 영역의 넓이가 제공하는 스킨의 것과 차이가 있어서 불편한 경우가 종종 생기게 됩니다. 폰트나 스킨 등은 마음에 드는데 포스트 폭이 너무 좁다든지, 사이드 바의 폭을 더 키우고 싶은데 방법을 잘 모르겠다든지...

이런 불만을 해소하기 위해서는 직접 블로그 레이아웃의 설정을 변경해주어야 하는데요. 일반적으로 설치형 블로그의 환경설정은 skin.html과 style.css에서 이루어지게 됩니다. 관리자메뉴의 스킨 메뉴에서 HTML/CSS 편집으로 들어갑니다.

포스트의 폭 조정은 style.css에서 할 수 있습니다. 여기서 조금 번거로운 작업이 필요한데, 우선 수정해야할 부분이 한 곳이 아니라는 점과 늘어나는 만큼 줄어드는 부분을 감안해야 하는 등, 살짝 머리를 써줘야 하는 일이 생기게 됩니다. 머리 운동 하는 셈치고 조금만 신경쓰시면 됩니다.

일단, 수정해야할 부분은 크게 네 가지로 나뉘어지게 됩니다.

1) 블로그 레이아웃
2) 박스 레이아웃
3) 헤더 레이아웃
4) 포스트 레이아웃


1)에서는 전체 블로그 레이아웃의 폭과 그에 비례하여 컨텐트 부분의 레이아웃, 그리고 사이드 바의 레이아웃 폭을 조정할 수 있습니다.
2)에서는 컨텐트와 사이드 바의 코너 부분을 조정하게 됩니다. 여기를 건드리지 않으면 포스트 박스나 사이드 박스의 코너가 어긋나거나 잘려서 출력됩니다.
3)에서는 헤더, 즉 메뉴 바의 폭을 조정하게 됩니다. 이곳이 같이 수정되지 않을 경우, 포스트 폭을 늘리면 타이틀 바가 그보다 좁게 표시되며, 폭을 줄일 경우에는 메뉴 바 영역이 깨지게 됩니다.
4)에서는 포스트의 안쪽 영역을 조정하게 됩니다. 이곳을 같이 수정하지 않을 경우, 여백과 정렬이 맞지 않아 보기가 좋지 않습니다.

먼저, 예제로 사용할 블로그의 레이아웃은 일단 다음과 같습니다.



1) 블로그 레이아웃 조정하기

style.css에서 다음 부분을 찾습니다.

/* 블로그 레이아웃 */
#header .head-container {width:/*@post-width:267=*/947px/*@*/; margin:0px auto; } /* 타이틀 바 레이아웃 폭 */
#body { clear: both; width:/*@post-width:257=*/937px/*@*/; margin:0px auto; } /* 바디 레이아웃 폭 */
#content {
 float:left;
 width:/*@post-width:35=*/722px/*@*/; /* 컨텐트 레이아웃 폭 */
 overflow:hidden;
 word-break:break-all;
}
#sidebar {
 float:right;
 width:200px; /* 사이드바 레이아웃 폭 */
 overflow:hidden;
}

녹색 글씨로 표현된 부분이 수정해야할 부분입니다(위의 레이아웃 값은 제 블로그의 고유의 값입니다.). 먼저 가장 위의 두 부분은 블로그의 전체 영역을 지정하는 부분이라 하겠습니다. (CSS를 완벽하게 이해하고 있는 것은 아니지만) header의 post-width는 타이틀 바와 메뉴 바 등을 포함 블로그 상단 레이아웃의 폭을 지정하는 듯 하고, body 부분의 post-width는 컨텐트와 사이드 바를 포함하는 레이아웃의 폭을 지정하는 영역인 듯 하군요. 실제 이 두 부분은 꽤 밀접한 관계를 갖고 있는 것 같은데요. 어느 한 부분만을 수정할 경우에는 그 수정 사항이 레이아웃에 반영되지 않습니다. 두 부분을 같이 수정해줘야 합니다.

content의 post-width는 컨텐트 레이아웃의 폭입니다. 주로 이 부분이 수정대상이 되겠군요. 이 부분을 늘리기 전에는 먼저 header부와 body부의 레이아웃(이하 전체 레이아웃)을 그에 맞춰 늘려줘야 합니다. 전체 레이아웃을 수정하지 않고 늘리길 원할 경우에는 사이드 바 레이아웃 폭을 줄여줘야 합니다. 단, 사이드바는 너무 폭이 좁아지면 보기 안좋기 때문에 이것을 감안하여 세 부분의 레이아웃을 유기적으로 조정해 줍니다. 컨텐트 레이아웃과 사이드 바 레이아웃의 합이 전체 레이아웃을 넘어가면 안됩니다. 또한, 여백을 감안하여 그 합은 전체 레이아웃보다 더 작은 값이어야 합니다.

Life in Mono 스킨의 전체 레이아웃 상관 관계는 아래와 같습니다.

937px(body 레이아웃) = 947px(헤더 레이아웃) - 10px
                                = 722px(컨텐트 레이아웃 폭) + 200px(사이드바 레이아웃 폭) 
                                  + 15px(사이 여백)



2) 박스 레이아웃 조정하기

기본적인 레이아웃을 종료한 후에는 실제 컨텐트를 구성하는 박스와 사이드 바를 구성하는 박스 레이아웃을 조정해줘야 합니다. style.css에서 다음 부분을 찾아갑니다.

/* BOX */
.boxTop, .boxMid, .boxBtm, .boxTopR, .boxMidR, .boxBtmR {clear:both; }
.boxTop-left, .boxTop-right, .boxBtm-left, .boxBtm-right {float:left; width:4px; height:4px; background-color:#transperant; }
.boxTopR, .boxBtmR { height: 4px; }
.boxBtmR { padding-bottom: 9px; }
.boxTop-mid, .boxBtm-mid, .boxTopR-mid, .boxBtmR-mid {float:left; height:4px; }
.boxTop .boxTop-mid, .boxBtm .boxBtm-mid {width:/*@post-width:34=*/714px/*@*/; } /* 컨텐트 박스 상·하부분 폭 */
.boxTopR .boxTop-mid, .boxBtmR .boxBtm-mid {width:192px; } /* 사이드바 박스 상·하부분 폭 */

...(중략)

.boxMid, .boxMidR {border-left:1px solid #D0D0D0; border-right:1px solid #D0D0D0; background-color:#fff; }
.boxMid {width:/*@post-width:40=*/720px/*@*/; overflow:hidden; } /* 컨텐트 박스 좌우 폭 */
.boxMidR {width:198px; overflow:hidden; } /* 사이드 박스 좌우 폭 */

수정해야할 부분은 녹색 글씨로 표현된 부분입니다. 이 부분은 먼저 설명된 컨텐트, 사이드바 레이아웃과 밀접한 관계를 갖는데요. boxTop, boxTop-mid boxBtm, boxBtm-mid 부분은 컨텐트 박스의 상단 부분과 하단 부분을 의미합니다. 이 부분이 수정되지 않으면 컨텐트 박스의 상단과 하단이 깨져버리게 되지요. boxTopR, boxTop-mid boxBtmR, boxBtm-mid은 사이드바 박스의 상하단 부분입니다.

아래로 내려가 boxMid 부분은 컨텐트 박스에서 외곽선을 제외한 컨텐트 박스에 대한 내용입니다. boxMidR은 사이드 바에 대한 내용이구요. 각각의 상관관계는 아래와 같습니다.

714px(컨텐트 박스 상하단 부분의 폭) = 722px(컨텐트 레이아웃 폭) - 8px
192px(사이드바 박스 상하단 부분의 폭) = 200px(사이드바 레이아웃 폭) - 8px

720px(컨텐트 박스 폭) = 722px(컨텐트 레이아웃 폭) - 2px(박스의 좌, 우 외곽선 폭의 합)
198px(사이드바 박스 폭) = 200px(사이드바 레이아웃 폭) - 2px(박스의 좌, 우 외곽선 폭의 합)

포스트, 사이드바 코너 레이아웃 조정이 잘못된 경우



3) 헤더 레이아웃 조정하기

자, 이제 전체적인 레이아웃, 그리고 컨텐트의 폭을 조정하고 필요에 따라 사이드 바의 폭까지 조정해 주었습니다. 이제는 넓어지거나(혹은 좁아진) 블로그 전체 레이아웃에 맞추어 메뉴바의 폭도 조정해주어야 겠죠. style.css에서 다음 부분으로 이동합니다.

/* 헤더 */
#header {
 padding-top:53px;
 background-color:/*@title-background-color=*/transparent/*@*/;
 background-image:/*@title-background-image=*/url("
http://cfs.tistory.com/blog/style/template/image/title/6.jpg%22)/*@*/
 background-repeat:/*@title-background-image-repeat=*/repeat-x/*@*/;
 background-position:/*@title-background-image-position=*/center
top/*@*/;
}
#header .head-container {width:/*@post-width:267=*/947px/*@*/; height:/*@title-height=*/150px/*@*/; margin:0px auto; } /* 타이틀바 폭 = 타이틀바 영역 폭 */

...(중략)

#searchbar .searchbar-container {float:left; width:/*@post-width:249=*/929px/*@*/; height:41px; background:url(images/searchbar_mid.png) repeat-x; } /* 메뉴바 폭 */
* html #searchbar .searchbar-container {
 width:/*@post-width:249=*/929px/*@*/; /* 메뉴바 폭  */
 background:none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/blog/skin/tis_LifeInMono_Light/images/searchbar_mid.png', sizingMethod='scale');
}

수정해줄 부분은 녹색의 글씨 부분입니다. 먼저, header의 레이아웃은 앞선 1)의 header 레이아웃과 동일하기 때문에 1)에서 수정해주었다면 같은 값으로 조정해주어야 합니다.

좀 더 밑으로 이동하여 searchbar 부분이 메뉴바의 폭을 조정할 수 있는 부분이니다. 전체 레이아웃이 늘어났을 경우 그에 맞추어 이 메뉴바도 늘려주는 것이 보기가 좋습니다. 특히, 레이아웃이 전체적으로 좁아졌는데 이 부분을 수정하지 않는다면, 메뉴바의 앞 뒤가 잘려져서 깨진 형태로 표시됩니다. 메뉴바의 폭을 조정하는 부분은 두 부분입니다. 상관관계는 다음과 같습니다.

929px(메뉴바 폭) = 947px(헤더 레이아웃) - 18px

메뉴바 레이아웃 조정이 잘못된 경우



4) 포스트 레이아웃 조정하기

마지막으로 포스트의 레이아웃을 조정해줄 차례입니다. 3)까지의 과정을 마치면 외곽 레이아웃의 조정은 모두 완료됩니다. 하지만 포스트 본문의 경우는 레이아웃의 변화에 따라 이전에 작성했던 포스트의 오른쪽 여백이 없어지고 그림이 잘려서 표시되거나, 오른쪽 여백이 너무 많이 남는 상황이 발생하게 됩니다. 따라서, 다음과 같이 포스트 본문 영역 또한 바뀌어진 레이아웃에 맞춰줘야 합니다. style.css에서 다음을 찾습니다.

/* 포스트 */
.infor {width:/*@post-width:42=*/722px/*@*/; height:22px; padding-top:8px; } /* 포스트 레이아웃 폭  */

... (중략)

.article {
 width:/*@post-width=*/680px/*@*/; /* 포스트의 본문 영역 폭  */
 color:/*@post-body-color=*/#000000/*@*/;
 font-size:/*@post-body-font-size=*/13px/*@*/; 
 font-family:/*@post-body-font-family=*/Malgun
Gothic/*@*/
 word-break:break-all;
 word-wrap:break-word;
 overflow:hidden;
                line-height:/*@post-body-line-height*/20px/*@*/; 
                text-align:justify;
}

722px라는 값은 컨텐트 레이아웃의 폭으로 1)에서 정했던 컨텐트 레이아웃 폭과 동일한 값으로 설정합니다. 그리고 하단에 위치한 것이 바로 본문의 실제 영역이 되겠는데요. 여기서는 42px 정도의 차이를 두고 설정하고 있습니다. 이 말은 결국, 우리들이 설정하는 컨텐트 영역 폭에서 42px만큼 감소된 값이 진짜 본문 영역 폭이라는 소리입니다. 사진이나 그림 등을 주로 싣는 블로그를 만들 경우에는 때 이 점을 참고해서 포스트 영역을 조정해야 할 듯 합니다.

680px(포스트 본문 폭) = 722px(컨텐트 레이아웃 폭) - 42px

포스트 레이아웃에서 내부 여백을 감안하지 않았을 경우


위의 방법을 토대로 포스트 영역을 100px 줄이고, 사이드를 100px 늘린 블로그의 레이아웃입니다. 물론, 이와 반대로 포스트 영역을 더 늘리고 사이드 바를 줄일 수도 있으며, 포스트 영역을 늘리면서, 사이드 바 영역을 그대로 유지하는 것도 모두 가능합니다. 위의 방법을 사용하면 말이죠.

내부여백을 지정해준 포스트 레이아웃


이후에 수정해줘야할 부분에 대해서는 아래의 포스트를 참조해주세요.
 
늘어난 사이드바 프로필 영역 조정하기

☞ 댓글 영역과 방명록 부분의 포스트 폭 조정하기


반응형

+ Recent posts