반응형

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


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에서 찾아내어 그에 맞춰 수정해주는 기본을 기억하시면 될 듯 합니다.


반응형

+ Recent posts