본문 바로가기
나의 이야기

스타일좀 바궜을 뿐인데...

by LillyLt 2007. 6. 8.

@charset "utf-8";
/* CSS Document */
/* 반드시 들어가야 하는 스타일 시작 */
/* 1. 본문 전체  */
body{ font: small/1.5 '돋움', 'Dotum', verdana; background:#3d3d3d url(./images/bg.gif) no-repeat; padding:50px 20px; margin:0; color:#c3c3c3; letter-spacing:-1px; text-align:center}
/* 2. 기본 링크 */
a{ text-decoration:none;}
a:link { color:#f0f0f0;}
a:visited { color :#f0f0f0;}
a:hover { text-decoration:underline; color:#ffffff;}
a:active { color:#f0f0f0;}
/* 3. 이미지 */
img{ border:0;}
/* 4. 이미지 버튼 */
 .ib { cursor: pointer;}
/* 5. 입력 텍스트 */
 .text { border:1px solid #999;}
/* 6. 트리 테이블 */
 .branch2 { }
/* 7. 트리 셀 */
 .branch3 { cursor:pointer; height:10px;}
/* 8. 달력 월 표시 */
 .cal_month { height:18px; text-align:center; color:#e1cdbd;}
/* 9. 달력 요일 표시 */
 .cal_week1 { height:18px; text-align:center;}
/* 10. 달력 일요일 표시 */
 .cal_week2 { color: #cfe01e; text-align:center;}
/* 11. 달력 지난 달 날짜 표시 */
 .cal_day1 { color:#000; text-align:center;}
/* 12. 달력 다음 달 날짜 표시 */
 .cal_day2 { color: #000; text-align:center;}
/* 13. 달력 이번 달 날짜 표시 */
 .cal_day3 {  text-align:center;}
/* 14. 달력 오늘 날짜 표시 */
 .cal_day4 { background-color:#000000; text-align:center; color:#cfe01e;}
/* 15. 달력 글쓴 날 링크 스타일 */
 a.cal_click{ font-weight:bold; color:#fff;}
 a.cal_click:link { color:#fff; text-align:center;}
 a.cal_click:visited { color:#fff;  text-align:center;}
 a.cal_click:hover { color : #fff;  text-align:center;}
/* 16. 이미지 아래 캡션 스타일 */
 .cap1 { color: #876; text-align: center; }
/* 16. 키워드 스타일 */
 .key1 { }
/* 16. 카테고리 옆 개수 스타일 */
 .c_cnt { font:0.75em Tahoma; color:#cfe01e; letter-spacing:0;}
/* 17. 최신글 옆 개수 스타일 */
 .ps_cnt { font:0.75em Tahoma; color:#cfe01e; letter-spacing:0;}

/* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */
/* 기본 스타일 */
h1, h2, h3, h4{ font-size:100%; margin:0; padding:0;}
hr{display:none;}
/* 블로그의 레이아웃 */
.container{ width:1140px; text-align:left; margin:0 auto;}
 .header{ clear:both; background:red; }
  .header h1{ float:left;}
  .header .rss{ text-align:right;}
 .Body{ margin-right:6px;}
 .Body .layoutMiddle{}
 .Body .layoutTop{}
 .Body .layoutBottom{}
  .mainBody{ float:left; width:950px; padding:0; margin:0; }
  /*
  .mainBody .layoutMiddle{ background:url(./images/layoutMiddle.gif) repeat-y;}
  .mainBody .layoutTop{background:url(./images/layoutTop.gif) no-repeat top;}
  .mainBody .layoutBottom{background:url(./images/layoutBottom.gif) no-repeat bottom; padding:10px;}
  */
  .mainBody .layoutBottom{margin-top:20px;}

   .blogmenu{ clear:both; background:url(./images/menu_bar.gif) no-repeat ; height:35px; padding:5px 5px 0 10px;}
   .contentBody{ width:960px; }
   .contentBody .layoutMiddle{ padding:0; margin:0; background:none;}
   .contentBody .layoutTop{ padding:0; margin:0; background:none;}
   .contentBody .layoutBottom{ padding:0; margin:0; background:none;}    
    .content { float:right; width:750px; margin:0 15px 5px 0; padding:0; display:inline; }
    .content .layoutMiddle{background:none; padding:0; margin:0;}
    .content .layoutTop{background:none; padding:0; margin:0;}
    .content .layoutBottom{background:none; padding:0; margin:0;}  
    .sideinfo{ float:left; width:180px; overflow:hidden;}
  .sideinfoEtc{ float:left; margin:0 0 0 0; width:180px; background:none;}
 .footer{ width:1140px; padding:20px 0; text-align:center; clear:both;}

/* header : 블로그 제목 + 구독하기 버튼 */
.header h1 { font-size:45pt; font-family:Arial; font-weight:normal; }
.header h1 a:link { color:#fff;}
.header h1 a:visited { color:#fff;}
.header h1 a:hover { color:#fff; text-decoration:none;}
/* mainbody > blogmenu : 블로그 메뉴 + 검색 */
.blogmenu .menu{ float:left; font-size:90%; color:#a2a2a2; margin:5px 0 0 0; }
.blogmenu .menu a{ color:#a2a2a2; padding:0 3px;}
.blogmenu .menu a:hover{ color:#fff; text-decoration:none;}
.blogmenu .menu .adminmenu a{ color:#a2a2a2;}
.blogmenu .menu .adminmenu a:hover{ color:#fff;}
.blogmenu .search { float:right; }
.blogmenu .search input{ border:0; margin:0; padding:0;}
.blogmenu .search .input{ width:130px; height:20px; padding:0 4px 0 4px; background-color:#6f6f6f; color:#ffffff; }
.blogmenu .search .btn{ background:url(./images/btn_search.gif) no-repeat; width:40px; height:20px; text-indent: -100em; overflow:hidden;  }
.blogmenu .rss{ float:right; font-size:85%; letter-spacing:-1px; margin:5px 10px 0 0;}
.blogmenu .rss a{ color:#a2a2a2;  background:url(./images/iconRss.gif) no-repeat right; padding:3px 15px 0 10px;}

/* mainBody > contentBody > sideinfo  기본스타일*/
.sideinfo {font:90% dotum, Verdana; }
.sideinfo .name{ color:#999;}
.sideinfo .date{ font:90% Tahoma; color:#999; letter-spacing:0;}
.sideinfo .cnt{ font:80% Tahoma; color:#cfe01e; letter-spacing:0;}
.sideinfo ul{ margin:0; padding:0; list-style:none;}
.sideinfo li{ background:url(./images/bull.gif) no-repeat 0 7px; padding:5px 0 0 8px;}
.sideinfo h3{ margin-top:20px; font:100% dotum; color:#618cbf; text-decoration:underline; margin-bottom:10px; font-weight:bold;}

/* mainbody > contentBody > sideinfo > 블로그 이미지 */
.sideinfo .blogimageTop {background:url(./images/photoframe_top.gif) no-repeat; width:180px; height:6px; line-height:0; font-size:0;}
.sideinfo .blogimage{ width:180px; overflow:hidden; text-align:center; background-color:#323232;}
.sideinfo .blogimageBottom {background:url(./images/photoframe_bottom.gif) no-repeat; width:180px; height:6px; line-height:0; font-size:0;}
/* mainbody > contentBody > sideinfo > 블로그 설명 */
.sideinfo .blogdesc{ color:#a2a2a2; margin-top:5px;}
/* mainbody > contentBody > sideinfo > 공지사항 */
.sideinfo .notice { margin:5px 0; }
.sideinfo .notice h3, .sideinfoEtc .notice h3{background:url(images/t_notice.gif) no-repeat; width:180px; height:22px;
 display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
}
.sideinfo .notice li{ background:url(images/iconNotice.gif) no-repeat; padding:2px 0 2px 30px;}
/* mainbody > contentBody > sideinfo > 카테고리 리스트 스타일 */

.sideinfo .category h3, .sideinfoEtc .category h3{background:url(images/t_category.gif) no-repeat; width:180px; height:22px;
 display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
}
.sideinfo .category li{ background-image:none; padding-bottom:1px;}
.sideinfo .category li ul li ul li{ margin-left:5px; padding-left:7px; border-left:1px dotted #bbb;}

/* 최근에 올라온 글 */
.sideinfo .recentPost h3, .sideinfoEtc .recentPost h3{background:url(images/t_post.gif) no-repeat; width:180px; height:22px;
 display:block; text-indent: -100em; overflow:hidden; text-decoration: none; margin-bottom:10px;
}
.sideinfo .recentPost .cnt, .sideinfoEtc .recentPost .cnt{font:80% tahoma; color:#cfe01e;}

/* 최근에 달린 댓글 */
.sideinfo .recentComment h3, .sideinfoEtc .recentComment h3{background:url(images/t_comment.gif) no-repeat; width:180px; height:22px;
 display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
}
.sideinfo .recentComment, .sideinfoEtc .recentComment{ width:180px; overflow:hidden; line-height:1.3; }

/* mainbody > contentBody > sideinfo > 카운터 */
.sideinfo .counter{ font:90% Tahoma; letter-spacing:0; text-align:left; padding:10px; margin-top:10px;}
/* mainbody > contentBody > sideinfo > 태터툴즈 로고 */
.sideinfo .poweredBy{ text-align:center; padding:5px;}
/* mainbody > contentBody > sideinfo > rss 구독 아이콘 */
.sideinfo .rss{ text-align:center; padding:5px;}

/* sideinfoEtc 기본스타일*/
.sideinfoEtc {font:90% dotum, Verdana; }
.sideinfoEtc h3{ font:small dotum; font-weight:bold; text-decoration:underline; margin-bottom:10px; margin-top:20px;}
.sideinfoEtc ul{ margin:0; padding:0; list-style:none;}
.sideinfoEtc li{ background:url(./images/bull.gif) no-repeat 0 3px; padding:0 0 5px 8px;}

/* sideinfoEtc > 태그 */
.sideinfoEtc .tag, .sideinfo .tag { background:none; display:inline; padding:0; text-align:justify;}
.sideinfoEtc .tag .cloud1, .sideinfo .tag .cloud1{ font-weight:bold; font-size:140%; color:#e8e635 }
.sideinfoEtc .tag .cloud2, .sideinfo .tag .cloud2 { font-weight:bold; font-size:130%;color:#eeeeee}
.sideinfoEtc .tag .cloud3, .sideinfo .tag .cloud3 { font-weight:bold; font-size:120%;color:#a2a2a2}
.sideinfoEtc .tag .cloud4, .sideinfo .tag .cloud4 { font-size:110%;color:#a2a2a2}
.sideinfoEtc .tag .cloud5, .sideinfo .tag .cloud5 { font-size:100%;color:#a2a2a2}
.sideinfoEtc .tag a:hover, .sideinfo .tag a:hover{ color:#fff;}
.sideinfoEtc .tag h3, .sideinfo .tag h3 { background:url(images/t_tags.gif) no-repeat; width:180px; height:22px;
 display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
}

/* mainbody > sideinfo > 최근에 받은 트랙백 */
.sideinfoEtc .recentTrackback, .sideinfo .recentTrackback{ font-family: Verdana; letter-spacing:0;}
.sideinfoEtc .recentTrackback .cnt, .sideinfo .recentTrackback .cnt{ font:70% Verdana;}
.sideinfoEtc .recentTrackback h3, .sideinfo .recentTrackback h3 {background:url(images/t_track.gif) no-repeat; width:180px; height:22px;
 display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
}

/* mainbody > sideinfo > 글보관함 */
.sideinfoEtc .archive, .sideinfo .archive{ font-size:90%; font-family: Verdana; letter-spacing:0;}
.sideinfoEtc .archive .cnt, .sideinfo .archive .cnt{color:#becd2f; font:80% Tahoma;}
.sideinfoEtc .archive h3, .sideinfo .archive h3 {background:url(images/t_archive.gif) no-repeat; width:180px; height:22px;
 display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
}
/* mainbody > sideinfo > 달력 */
.sideinfoEtc .calender table.tt-calendar th, .sideinfo .calender table.tt-calendar th { font:100%; }
.sideinfoEtc .calender table.tt-calendar td.cal_day, .sideinfo .calender table.tt-calendar td.cal_day { font:80% Verdana; }
.sideinfoEtc .calender h3, .sideinfo .calender h3 {background:url(images/t_calendar.gif) no-repeat; width:180px; height:22px;
 display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
}
.sideinfoEtc .calender a, .sideinfo .calender a{ color:#fff;}
/* mainbody > sideinfo > 링크 */
.sideinfoEtc .link h3, .sideinfo .link h3 {background:url(images/t_link.gif) no-repeat; width:180px; height:22px;
 display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
}

/* content 기본스타일*/
.content {font:90%/1.5 dotum, Verdana;}
.content h2{ font-size:100%;}
.content h3{ font-size:100%; color:#fff; margin:0 5px; padding:0 0;}
.content input{ border:1px solid #6e6e6e; color:#666666;}
.content textarea{ border:1px solid #6e6e6e; color:#666666; overflow:visible; height:50px;}
.content .name{font-size:95%;}
.content .date{font:80% Tahoma;  color:#999; letter-spacing:0;}
.content .cnt {font:75% Tahoma; letter-spacing:0; color:#cfe01e;}
/* content 검색 리스트 */
.content .searchList{ margin-bottom:30px;}
.content .searchList .date{padding-right:7px;}
.content .searchList ol{ list-style:none; margin:0; padding:0;}
.content .searchList li{ margin:0; border-bottom:1px solid #6e6e6e; padding:2px 0;}
/* content 검색 댓글 리스트 */
.content .searchReplyList{ margin-bottom:30px;}
.content .searchReplyList .date{padding-right:7px;}
.content .searchReplyList .name {color:#999;}
.content .searchReplyList ol{ list-style:none; margin:0; padding:0;}
.content .searchReplyList li{ margin:0 ; border-bottom:1px solid #6e6e6e; padding:2px 0;}
/* content 위치로그 */
.content .local .spot { padding:5px 0 2px 20px; background:url("./images/iconDepth.gif") no-repeat 10px 5px; border-bottom:1px solid #6e6e6e; margin:0 10px;}
.content .local .info { padding:5px 0 2px 10px; background:url("./images/bullTri.gif") no-repeat 0 50%; border-bottom:1px solid #6e6e6e;}
.content .local a{ color:#a2a2a2;}
/* content 태그 */
.content .tag a{ color:#e8e635; padding:0 2px; text-decoration:none; font-family:dotum;}
.content .tag ul{ margin:10px; padding:0;}
.content .tag li{ display:inline; padding:0; text-align:justify;}
.content .tag li .cloud1 { font-weight:bold; font-size:155%; }
.content .tag li .cloud2 { font-weight:bold; font-size:145%; color:#eeeeee;}
.content .tag li .cloud3 { font-weight:bold; font-size:135%; color:#a2a2a2;}
.content .tag li .cloud4 { font-size:125%; color:#a2a2a2;}
.content .tag li .cloud5 { font-size:115%; color:#a2a2a2;}
.content .tag li a:hover{ color:#ffffff;}

/* content 방명록 기본 스타일 */
.content .guestbook p{padding:2px; margin:0;}

/* content > entry  댓글+트랙백 공통 스타일 */
.content .entry .list .name{ float:left;}
.content .entry .list .date{ float:left; padding:5px 2px 0 2px;}
.content .entry .list .control{ float:right; padding-right:5px;}
.content .entry .listBody {clear:both;}


/* content 방명록 글쓰기 */
.content .guestbook .write {color:#a2a2a2; margin:0 5px; text-align:left}
.content .guestbook .write input{ width:30%; padding:4px 4px 0 4px; color:#666; font-size:95%;}
.content .guestbook .write .homepage{ width:70%;}
.content .guestbook .write textarea{ width:100%; margin-bottom:5px;}
.content .guestbook .write .btn{ width:100%; background:#4f4f4f; padding-top:3px; margin:0 0 0 1px; color:#fff }

/* content 방명록 리스트 */
.content .guestbook .list { color:#888; margin:10px 10px;}
.content .guestbook .list ul{ margin:0; padding:0; list-style:none;}
.content .guestbook .list ol{ margin:0; padding:0; list-style:none;}
.content .guestbook .list li{ padding:10px 10px 10px 14px; background:url(./images/iconFoot.gif) no-repeat 0 6px; border-bottom:1px solid #6e6e6e;}
.content .guestbook .list li ul li{ padding-left:24px; background:url(./images/iconDepth.gif) no-repeat 4px 12px; margin-bottom:4px; padding:10px 0 10px 14px; border:0;}
.content .guestbook .list .name{ font-size:100%; letter-spacing:0; float:left; padding-right:3px;}
.content .guestbook .list .date{ float:left; padding:3px 2px 0 2px;}
.content .guestbook .list .control{ margin-left:400px; text-align:right; padding-right:5px; }
.content .guestbook .listBody {clear:both; overflow:hidden; width:500px;}
.content .guestbook .listBody2 {clear:both; overflow:hidden; width:490px;}
.content .guestbook .name a{ color:#ededed;}
.content .guestbook .date{ font:80% Tahoma; color:#999; letter-spacing:0;}

/* content > entryNotice, entryProtected, entry 기본 스타일 */
.content .entryNotice, .content .entryProtected {margin-bottom:30px;}
.content .entry { margin-bottom:20px; }
/* content > entryNotice, entryProtected, entry 제목 + 정보 */
.content .titleinfo{ border:0px; border-bottom:1px solid #6e6e6e; padding:0 0 8px 0; margin-bottom:10px;}
.content .titleinfo h2{ color:#ffffff;}
.content .titleinfo h2 a{ display:inline; float:left; color:#ffffff;}
.content .titleinfo .name { float:left;}
.content .titleinfo .name a{ padding:2px 0 0 0; color:#d1d1d1;}
.content .titleinfo .date{ text-align:right; padding-top:2px; color:#7d7d7d;}
.content .admin{ font-size:95%; padding-right:5px; text-align:right;}

/* content > entryNotice, entryProtected, entry 본문 */
.content .article{ margin:10px; width:730px; overflow:hidden; letter-spacing:0;}
.content .article ul{ margin-left:20px; padding:0;}
.content .article ol{ margin-left:20px; padding:0;}
.content .article a{ color:#618cbf;}
.content .article blockquote{ margin:10px 0 10px 30px; border-left:4px double #ded2c6; padding-left:10px;}

/* 작성자 */
.author                  { text-align:right; color:#888; padding:20px 20px;}
.author .text            { font:90% Verdana, Arial, Helvetica, sans-serif;}


/* content > entry >  태그 */
.content .entry .tag{ clear:both; text-align:left; padding-right:10px; margin-bottom:10px;}
.content .entry .tag a:hover{ color:#fff; text-decoration:underline;}

/* content >entry >  트랙백+댓글 버튼 */
.content .entry .btnTrackbackComment {clear:both; border-top:1px solid #6e6e6e; padding:8px 5px; margin:0;}
/* content > entry > 트랙백받을 주소*/
.content .entry .trackback {margin:0 0 0 0;}
.content .entry .trackback h3{ padding:0 5px; color:#cfe01e; font-weight:normal; }
.content .entry .trackback .address{letter-spacing:0; font-family:Verdana; font-size:90%; color:#a2a2a2;}
/* content > entry > 트랙백 리스트 */
.content .entry .trackback h4{ font-size:100%; font-weight:normal; display:inline; margin:0;}
.content .entry .trackback h4 a{color:#ededed; padding:0 2px;}
.content .entry .trackback .list ol{margin:0; padding:0; list-style:none;}
.content .entry .trackback .list li{ background:url(./images/bullTri.gif) no-repeat 5px 12px; padding:3px 0 0 12px; width:520px; overflow:hidden;}
.content .entry .trackback .list .date{ color:#999;}
.content .entry .trackback .list .listBody { color:#999; padding:2px 0;}
/* content > entry > 댓글 타이틀*/
.content .entry .comment{width:740px; overflow:hidden;}
.content .entry .comment p{margin:0;}
.content .entry .comment { margin:0;}
.content .entry .comment h3{ padding:0 5px; color:#cfe01e; font-weight:normal; }
.content .entry .comment .address{letter-spacing:0; font-family:dotum; color:#a2a2a2;}
/* content > entry > 댓글 리스트 */
.content .entry .comment .list ol{margin:0; padding:0; list-style:none;}
.content .entry .comment .list ul{list-style:none;}
.content .entry .comment .list li{ padding:3px 0 0 20px; margin-bottom:4px;}
.content .entry .comment .list li ul li{ background:url(images/iconReComment.gif) no-repeat 5px 5px; padding:3px 0 0 30px; margin:0 2px;}
.content .entry .comment .name a{ font-size:110%; color:#ededed;}

/* content > entry  댓글+트랙백 공통 스타일 */
.content .entry .list .name{ float:left;}
.content .entry .list .date{ float:left; padding:5px 2px 0 2px;}
.content .entry .list .control{ float:right; padding-right:5px;}
.content .entry .listBody {clear:both;}

/* content > entry 댓글 쓰기 */
.content .entry .comment .write {color:#a2a2a2; margin:0 5px;}
.content .entry .comment .write input{  width:30%; padding:4px 4px 0 4px; color:#666; font-size:95%;}
.content .entry .comment .write .homepage{ width:50%; display:inline;}
.content .entry .comment .write textarea{ width:100%; margin-bottom:5px;}
.content .entry .comment .write .checkbox{ border:0; width:20px;}
.content .entry .comment .write .btn{ width:100%; background:#4f4f4f; padding-top:3px; margin:0 0 0 1px; color:#fff}

.content .paging{ clear:both; text-align:center; margin:50px 0; font:80% Verdana;}

/* footer */
.footer{ font:80% Verdana; letter-spacing:0; color:#999999;}
.footer a:link{color:#999999;}
.footer a:visited{color:#999999;}
.footer a:hover{color:#fff;}
.footer .menu{ font:120% dotum; letter-spacing:-1px;}


위와같이 스타일 변경...

사실상 그다지 크게 변경된게 안보이고 자잘한것만...

메뉴바 이미지는 내가 직접 수정해서 재업로드.....

근데 나 초급치고 잘한거 맞지? [칭찬 기대?]

기본 스타일은 basic_gray