반응형

지금 사용하고 있는 거는 색깔도 나름 변경한 스킨이다.
아래는 지금 사용하고 있는 스킨의 style.css에서 발췌 한 코드이다.
/* 블로그의 레이아웃 */
.container{ width:1000px;}
.header{ width:780px; padding:10px;}
.header h1{ float:left;}
.header .rss{ text-align:right;}
.Body{ margin-right:6px;}
.Body .layoutMiddle{ background:url(./images/bodyMiddle.gif) repeat-y;}
.Body .layoutTop{ background:url(./images/bodyTop.gif) no-repeat top;}
.Body .layoutBottom{ background:url(./images/bodyBottom.gif) no-repeat bottom;}
.mainBody{ float:left; width:800px; background-color:#fff; padding:0; margin:0;}
.mainBody .layoutMiddle{ background:url(./images/mainBodyMiddle.gif) repeat-y;}
.mainBody .layoutTop{background:url(./images/mainBodyTop.gif) no-repeat top;}
.mainBody .layoutBottom{background:url(./images/mainBodyBottom.gif) no-repeat bottom; padding:10px;}
.blogmenu{ background-color:#6495ed; border-bottom:2px solid #4169e1; padding:5px 5px 2px 10px;}
.blogmenu .menu{ float:left; padding-top:5px;}
.blogmenu .search { margin-left:550px; text-align:right;}
.contentBody{ width:780px; border-top:5px solid #ededed;}
.contentBody .layoutMiddle{ padding:0; margin:0; background:url(./images/contentBodyMiddle.gif) repeat-y;}
.contentBody .layoutTop{ padding:0; margin:0; background:url(./images/contentBodyTop.gif) no-repeat top;}
.contentBody .layoutBottom{ padding:0; margin:0; background:url(./images/contentBodyTop.gif) no-repeat bottom;}
.content { float:right; width:585px; margin:5px 0 5px 5px; padding:0;}
.content .layoutMiddle{ padding:0; margin:0; background:url(./images/contentBodyMiddle.gif) repeat-y;}
.content .layoutTop{ padding:0; margin:0; background:url(./images/contentBodyTop.gif) no-repeat top;}
.content .layoutBottom{ padding:0; margin:0; background:url(./images/contentBodyBottom.gif) no-repeat bottom;}
.sideinfo{ float:left; border:5px solid #ededed; border-top:0; padding:5px; width:170px; overflow:hidden;}
.sideinfoEtc{ float:left; margin:40px 0 0 6px; width:154px; padding:10px; background-color:#f5f5f5; overflow:hidden;}
.footer{ width:740px; padding:20px; text-align:center; clear:both;}
=> 여기는 말 그대로 레이아웃..container{ width:1000px;}
.header{ width:780px; padding:10px;}
.header h1{ float:left;}
.header .rss{ text-align:right;}
.Body{ margin-right:6px;}
.Body .layoutMiddle{ background:url(./images/bodyMiddle.gif) repeat-y;}
.Body .layoutTop{ background:url(./images/bodyTop.gif) no-repeat top;}
.Body .layoutBottom{ background:url(./images/bodyBottom.gif) no-repeat bottom;}
.mainBody{ float:left; width:800px; background-color:#fff; padding:0; margin:0;}
.mainBody .layoutMiddle{ background:url(./images/mainBodyMiddle.gif) repeat-y;}
.mainBody .layoutTop{background:url(./images/mainBodyTop.gif) no-repeat top;}
.mainBody .layoutBottom{background:url(./images/mainBodyBottom.gif) no-repeat bottom; padding:10px;}
.blogmenu{ background-color:#6495ed; border-bottom:2px solid #4169e1; padding:5px 5px 2px 10px;}
.blogmenu .menu{ float:left; padding-top:5px;}
.blogmenu .search { margin-left:550px; text-align:right;}
.contentBody{ width:780px; border-top:5px solid #ededed;}
.contentBody .layoutMiddle{ padding:0; margin:0; background:url(./images/contentBodyMiddle.gif) repeat-y;}
.contentBody .layoutTop{ padding:0; margin:0; background:url(./images/contentBodyTop.gif) no-repeat top;}
.contentBody .layoutBottom{ padding:0; margin:0; background:url(./images/contentBodyTop.gif) no-repeat bottom;}
.content { float:right; width:585px; margin:5px 0 5px 5px; padding:0;}
.content .layoutMiddle{ padding:0; margin:0; background:url(./images/contentBodyMiddle.gif) repeat-y;}
.content .layoutTop{ padding:0; margin:0; background:url(./images/contentBodyTop.gif) no-repeat top;}
.content .layoutBottom{ padding:0; margin:0; background:url(./images/contentBodyBottom.gif) no-repeat bottom;}
.sideinfo{ float:left; border:5px solid #ededed; border-top:0; padding:5px; width:170px; overflow:hidden;}
.sideinfoEtc{ float:left; margin:40px 0 0 6px; width:154px; padding:10px; background-color:#f5f5f5; overflow:hidden;}
.footer{ width:740px; padding:20px; text-align:center; clear:both;}
/* content > entryNotice, entryProtected, entry 본문 */
.content .article{ margin:10px; width:560px; overflow:hidden; letter-spacing:0;}
=> 이 부분은 본문글이 출력되는 부분이다..content .article{ margin:10px; width:560px; overflow:hidden; letter-spacing:0;}
=========================================================================================
저 두분에서 width를 조정하면 스킨의 넓이를 조정할 수 있다.
본문 부분이 좁아서 사용하기에 불편했다. 그래서 스타일시트 뒤적 거려서 30px(오 방금전에
발견. 습관대로 볼드체는 ctrl+B 하니까 적용된다. 해제도 되고 내만 몰랐던거여?) 늘렸다.
더 넓혀 보려 했으나(원래는 200px 넓힐려고 했음) 1024를 넘어가기에, 1024해상도를 쓸수 있는 사람도 있으니 30px만 확장했다.
업무페이지는 맨날 1024로만 하는데, 사람들은 자기 컴 해상도를 어느정도로 쓰고 있을까?
p.s
지금 사용하고 있는 스킨 이미지 가져올라고, 스킨 페이지 가니까, 스킨 수정 할 수 있는
기능(스킨위자드)이 추가가 되었더라. 언제 생겼지.
오늘도 삽질을 하지.
반응형