IENDEV님의 IS Base 0.33 스킨의 레이아웃을 바꿔보자.
invalid-file따라서 얕은 지식으로 하였기에 필요없는 부분(소스)도 삽입 또는 입력되어 있을지도 모르나,
행여 다른 사람들이 필요로 하지 않을까 하여 무모하게 적어본다.
먼저 위와 같은 레이아웃의 구성을 위해 스킨 변경 메뉴에 있는 style.css 부분을 고쳐보자.
상단부분에 아래와 같이 스킨제작자분이 주석처리를 하여 친절히 변경방법을 알려주는 것을 볼 수 있다.
/* 본문 글 넓이를 변경 하려면 아래에서 container와 content의 width를 변경하시기 바랍니다. */
/* 이때 index.xml에서 본문 넓이(contentWidth) 변경후 스킨 리셋
(다른 스킨으로 변경후 다시 현재 스킨 선택) 하시기를 권장합니다. */
#tool { //Admin Entry 버튼에 해당되는 부분
width:100%
min-height:5px;
clear:both;
}
#container {
width:990px; //전체적인 레이아웃의 너비
border:0px ;
margin:0px auto;
margin-left:7px;
padding:0px;
}
#header {
margin-bottom:10px;
min-height:10px;
clear:both;
overflow:hidden;
}
#content {
float:left;
width:616px; //본문의 레이아웃 너비
margin-left:2px;
overflow:hidden;
}
#sidebar {
float:left;
margin-left:7px;
width:175px;
}
#sidebar1 {
float:left;
margin-left:7px; //왼쪽 여백을 7픽셀 주었다.
width:180px; //사이드바의 너비
}
/*사이드바를 추가하기 위해 기존의 사이드바에서 이름을 달리한 sidebar1을 위와 같이 추가하였다.*/
기존의 소스(style.css)를 살펴보면 그 아래부터는 각 부분에 대해 상세한 코드로 표현되어 있다.
물론 기존의 사이드바 역시 /* ***** sidebar ***** */와 같이 표현되어 있고,
그 아래에는 사이드바에 해당되는 카테고리나, 글목록, 댓글 등의 코드로 이루어져 있다.
따라서 sidebar1 추가를 위해 /* ***** sidebar1 ***** */와 같이 표현하여 나타내야 한다.
/* ***** sidebar1 ***** */
#sidebar1 { }
#sidebar1 .side_item {
padding:10px 10px 10px 10px; padding-left:8px;
border-left:1px solid #999999;
border-right:1px solid #999999; background-color:#f9f9f9;
}
#sidebar1 a:link { color:#333; text-decoration:none;}
#sidebar1 a:visited { color:#333; text-decoration:none;}
#sidebar1 a:hover { color:#C45050; text-decoration:none;}
#sidebar1 a:active { color:#333; text-decoration:none;}
#sidebar1 ul { list-style:none;}
#sidebar1 li { padding-left:0px;}
#sidebar1 h3 {
cursor:pointer; font-family:tahoma,dotum;
font-size:11px; font-weight:bold; color:#C45050;
background:url(images/line_dot_gray.gif) 0px 22px repeat-x;
margin-bottom:10px;
}
#sidebar1 .item_title { font-family:tahoma,dotum; font-size:11px;
font-weight:bold; color:#C45050; margin-bottom:35px;}
#sidebar1 .cnt { font:0.85em Tahoma, Helvetica, Arial, Gulim, sans-serif; color:#f60;}
#sidebar1 .date { font:10px Tahoma; color:#888;}
#sidebar1 .name { font:0.9em Dotum, Arial, sans-serif; color:#888;}
.
.
.사이드바에 추가할 내용이 들어갈 자리
.
.
.
#sidebar1 .btn { margin-top:10px;}
#sidebar1 .image { margin-top:10px;}
사이드바를 추가할 때 위의 내용은 기본으로 추가하도록 하자.
아래는 본인 스킨의 sidebar1을 구성하는 블로그이미지, 공지사항, 달력, 카운터에 해당하는 내용이며,
위의 소스 중간의 명시한 부분에 들어간다.
#sidebar1 .blogDesc { margin-top:10px; color:#888; line-height:16px; }
#sidebar1 .notice { margin-top:10px; padding:0; font-size:11px; font-family:맑은 고딕, tahoma;}
#sidebar1 .notice li { margin:0px; padding:0px; padding-bottom:1px; background:none;}
#sidebar1 .notice a:link,
#sidebar1 .notice a:visited { background:url(images/iconNotice.gif) 0 0 no-repeat; padding:2px 0 5px 19px;}
#sidebar1 .notice a:hover { background:url(images/iconNotice_on.gif) 0 0 no-repeat; padding:2px 0 5px 19px;}
#sidebar1 .calendar { margin-top:10px;}
#sidebar1 #calendar_box { }
#sidebar1 .calendar_box_d { font:11px verdana; padding:0px 5px 0px 0px;}
/* 달력 월 표시 */
.cal_month { font-size:100%; height:20px; font-family:tahoma; text-align:center; color:#e1cdbd; }
/* 달력 요일 표시 */
.cal_week1 {font-size:100%; font-weight:normal; font-family:dotum; height:15px; text-align:center;}
/* 달력 일요일 표시 */
.cal_week2 {font-size:100%; font-weight:normal; font-family:dotum; color: #ff845e; text-align:center;}
/* 달력 지난 달 날짜 표시 */
.cal_day1 { font-size:100%; font-family:tahoma; color:#000; text-align:center;}
/* 달력 다음 달 날짜 표시 */
.cal_day2 {font-size:100%; font-family:tahoma; color: #000; text-align:center;}
/* 달력 이번 달 날짜 표시 */
.cal_day3 { font-size:100%; font-family:tahoma; text-align:center;}
/* 달력 오늘 날짜 표시 */
.cal_day4 { font-size:100%; font-family:tahoma; text-decoration:underline; text-align:center; }
/* 달력 글쓴 날 링크 스타일 */
a.cal_click{ font-weight:bold; color:#B80D0D;}
a.cal_click:link { color:#B80D0D; text-align:center;}
a.cal_click:visited { color:#B80D0D; text-align:center;}
a.cal_click:hover { color : #fff; text-align:center;}
#sidebar1 .link { margin-top:10px; font-size:11px; font-family:맑은 고딕, tahoma;}
#sidebar1 .link li { }
#sidebar1 .yag { margin-top:10px;}
#sidebar1 .counter { margin-top:10px; font-size:11px; font-family:tahoma; }
#sidebar1 .detail { font-size:10px; line-height:20px; margin-top:10px;}
#sidebar1 .counter .detail .total { font-size:18px; font-weight:bold; color:#E27F7F; }
#sidebar1 .counter .detail .tynum { color:#C45050 }
style.css 에 대한 sidebar1의 추가 내용은 여기까지이다.
이제 skin.html 에 대해 사이드바에 추가한 내용에 대해 또 한번의 소스 입력이 필요하다.
style이 말 그대로 디자인의 표현이라면 skin은 상세한 기술의 표현이라 정의할 수 있다.
skin.html에서도 ctrl+F 단축키를 통해 <div id="sidebar">부분을 쉽게 찾을 수 있는데,
이 부분은 기존 사이드바의 부분이므로 앞서 style.css 와 같이 sidebar1 영역을 따로 구분하여 준다.
<div id="sidebar1">
<b class="ntop"><b class="r1"></b>
<b class="r2"></b><b class="r3"></b><b class="r4"></b>
</b>
<div class="side_item" id="side_item">
기존 사이드바가 끝나는 밑 부분에 위의 내용을 기본으로 적어주면 되며, 이어 추가 부분을 아래와 같이 적어주면 된다.
<div id="sidebar1">
<b class="ntop"><b class="r1"></b><b class="r2"></b><b class="r3"></b>
<b class="r4"></b></b>
<div class="side_item" id="side_item">
<s_sidebar1_element> //추가부분 (달력을 예시로 듦)
<!-- 달력 모듈 -->
<div class="calendar" >
<h3 onclick="javascript:show_hide_div('calendar_box');">CALENDAR</h3>
<div id="calendar_box" >
<div class="calendar_box_d" >
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
</div>
</div>
</div>
</s_sidebar1_element>
.
.
. //원하는 모듈 넣기
.
.
.
</div><!-- container close -->
달력 모듈이 아닌 다른 모듈도 원하는 순서에 맞게 적어주면 된다.
그러면 내 블로그에서와 같은 레이아웃을 구성할 수 있을 것이다.
