@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,blockquote,th,td,input,select,textarea,button,fieldset,img,dl,ul,ol,menu,li {
margin:0; <== 검색창 부터 아래로 이동
padding:0;
border:0;
line-height:1.3;
font-family:굴림, Dotum, AppleGothic, sans-serif;} <== 전체 폰트
body {
background-color:/*@background-color=*/#373c4e/*@*/; <===본문 전체 배경색 (1)
background-image:/*@background-image=*/none/*@*/;
background-repeat:/*@background-image-repeat=*/no-repeat/*@*/;
background-position:/*@background-image-position=*/left top/*@*/; <===배경 이미지
font-size:12px; <===프로필, 카테고리
border-top:40px solid #ff0; <=== 탑메뉴 라인 배경색 / 폭(2)
}
a {text-decoration:none; }
a:hover {text-decoration:underline; }
hr {display:none; }
input.text, select, textarea {
border:1px solid #FFEF00;
background-color:#7E92D7;
color:#191919;
}
input {vertical-align: middle; }
textarea {padding:5px; font-size:12px; }
1. 사이드바 설정
테두리, 배경색 변경
#sidebar {
border :1px solid gray; <=== 테두리 추가
background-color:#808080; <=== 배경색 추가(변경)
float:right;
width:200px;
overflow:hidden;
}
/* 사이드바 타이틀 */
#sidebar h3 {color:#ACACAC; font:bold 12px dotum; }
#sidebar h3.stitle {height:20px; border-bottom:1px solid #6B6B6B; background-repeat:no-repeat; background-position:10px 7px; text-indent:-5000px; background-color:#767B86; overflow:hidden; } <========사이드바 메뉴 타이틀 배경
#sidebar #notice h3.stitle {background-image:url(images/stitle_notice.gif); }
#sidebar #category h3.stitle {background-image:url(images/stitle_category.gif); }
#sidebar #tagbox h3.stitle {background-image:url(images/stitle_tag.gif); }
#sidebar #recentPost h3.stitle {background-image:url(images/stitle_recentpost.gif); }
#sidebar #recentComment h3.stitle {background-image:url(images/stitle_recentcomment.gif); }
#sidebar #recentTrackback h3.stitle {background-image:url(images/stitle_recenttrackback.gif); }
#sidebar #archive h3.stitle {background-image:url(images/stitle_archive.gif); }
#sidebar #link h3.stitle {background-image:url(images/stitle_mylink.gif); }
#sidebar #calendar h3 {display:none; }
/* 본문 */
#sidebar ul {margin:7px 10px 0px 10px;
}
.boxMidR {padding-bottom:7px;
background-color:#CCCCCC; <====사이드바 메뉴 배경
}
#sidebar ul li, #sidebar ul li a, #sidebar ul li a span {color:#767B86; font:11px/16px dotum; } <====사이드바 매뉴 내용글자 색
#sidebar ul li {padding:1px 0px; }
#sidebar #tagbox ul li, #sidebar #tagbox ul li a {line-height:18px; }
2. 본문 테두리 설정하기
찾기 기능(Ctrl + f)을 이용하여
#content 부분을 찾아주면 아래와 같은 부분이 있습니다.
컨텐츠 부분에 대한 스타일 설정소스인데요,
이곳에다가 선을 지정하는 소스 한줄을 넣어주면 됩니다.
3. 사이드바 메뉴 자동펼침 설정
<!-- 카테고리 모듈 -->
<div class="boxTopR"><div class="boxTop-left"></div><div class="boxTop-mid"></div><div class="boxTop-right"></div></div>
<div class="boxMidR">
<div id="category">
<h3 class="stitle">카테고리</h3>
</div>
</div>
<div class="boxBtmR"><div class="boxBtm-left"></div><div class="boxBtm-mid"></div><div class="boxBtm-right"></div></div>
<!-- 카테고리 메뉴자동펼침 -->
<script language="javaScript">try{expandTree();}catch(e){}</script>
<!-- 자동펼침 여기까지-->
</s_sidebar_element>
<s_sidebar_element>
'Blog History' 카테고리의 다른 글
| Design No.1 skin.html (0) | 2013.04.13 |
|---|---|
| Design 1. style.css (0) | 2013.04.13 |