출처: http://casnella.egloos.com/3057797
------------ 영역별 크기 ------------
.wrap {width:1110px;}
.header {width:1060px;}
.container {width:1110px; }
.left_wrap {width:880px;}
.content_wrap {width:650px;}
.content {width:600px;}
.post_content {width:580px; color:#282828;}
# 포스트 내의 글이 잘려 폭(width)을 600px에서 580px로 고침
# 포스트의 글자 색깔을 바꾸고 싶은데 어찌해야 될 지 모르겠어서 여기에 color 추가
.widemenu {width:600px;}
.column {width:230px;}
.column .widget {width:180px;}
.column .widget .widget_content {width:180px;}
#section_sidebar1,
#section_sidebar2 {width:600px;}
#section_sidebar1 .widget,
#section_sidebar2 .widget {width:600px;}
#section_sidebar1 .widget .widget_content,
#section_sidebar2 .widget .widget_content {width:600px;}
.footer {width:1110px;}
------------ 영역별 배경색 & 배경이미지 ------------
# 배경 그림이 전체에 완전히 보일 수 있도록 body옆에 있는 background:[#css_body_bg#];를 비롯한 모든 background를 지워줌. 지우지 않는 부분은 박스로 그림이 가려짐.
.body {
background-attachment:scroll;background-position : bottom;}
# 배경 그림은 따로 주소를 넣지 않더라도 스킨 수정할 때 [전문가용 편집>배경이미지 전경>전체배경]에서 이미지를 추가가 가능
# background-attachment: 배경 그림도 스크롤이 되도록 원하면 scroll을, 화면에 고정되는 걸 원한다면 fixed을 줌
# background-position: 배경 그림의 위치 top(위), center(중간), bottom(아래), 그 외 left, center, right등이 있음
.wrap
.header {
border-bottom:2.5px solid #ff7c94;
# 헤더(맨 위의 이미지) 아래에 있는 선 설정. 2.5px은 선의 두께, solid는 실선(dotted는 점선), #ff7c94는 선의 색상(색상표 위에 첨부. 또는 포토샵을 이용)
}
.footer {
border-top:2px dotted #efefef;
# 맨 아래의 선 두께와 종류, 색상(위 방법과 같음)
}
------------ 영역별 글자크기/글자색/링크색 & 세부설정 ------------
.body {
font:normal 12px/1.6em 'verdana',sans-serif;
color:#666;
margin:0 auto;
padding:0;
text-align:center;
margin: 0 0 -20px 0; }
.body a:link,.body a:visited {color:#999; text-decoration:none;}
.body a:hover,.body a:active {color:#ccc;text-decoration:none;}
.wrap {margin:0 auto;text-align:center;}
----- 헤더 영역 -----
.header {
color:#ccc;
margin:0 auto 30px auto;
padding:300px 25px 5px 25px;
text-align:left;
}
.header a:link,.header a:visited {color:#787878;text-decoration:none;}
# 헤더 부분의 링크(주소나 메뉴릿)의 색깔 변경
.header a:hover,.header a:active {color:#ffd4df;text-decoration:underline;}
# 헤더 링크 부분에 마우스 오버 됐을 때의 색깔 변경과 효과(underline은 밑줄)
.header h1 {
font-size:20px;
margin:0;
padding:1px 0;
}
.header .url {
font:normal .8em verdana,sans-serif;
letter-spacing:5px;
margin:0 0 -10px 0;
padding-left:5px;
}
.header .topmenu {text-align:right;}
.header .topmenu a {padding-left:10px;}
----- 콘텐츠 영역 -----
.container {margin:0 auto;text-align:center;}
.left_wrap {margin:0;float:left;display:inline;}
.content_wrap {margin:0;float:right;display:inline;}
.content {margin:0 auto;text-align:left;overflow:hidden;_word-break:break-all; background:#fff6dc;filter: Alpha(Opacity=70); }
# 콘텐트 박스를 표시하고 싶어서 backgroun 컬러와 filter로 반투명효과를 줌(그 결과 포스트의 노란 반투명 박스)
.content a:link {color:#148bff;text-decoration:none;}
# 콘텐트 내 포스트, 답변, 트랙백등의 모든 링크의 색 변경
.content a:visited {color:#148bff;text-decoration:none;}
# 방문했던 위 링크들에 대한 색 변경(저는 변경을 원치 않아서 바꾸지 않음)
.content a:hover,
.content a:active {color:#7dc7e8;text-decoration:underline;}
# 링크 위에 마우스 오버 했을 때의 색 변경과 효과
.post_view,.post_oneview {margin-top:15px; margin-bottom:60px; margin-left:10px;margin-right:10px;}
.post_summary,.post_magazine,.post_tagcloud {margin-bottom:20px;}
.post_view .post_title h2 {
font: bold 20px, 'verdana';sans-serif;
font color: #282828;
letter-spacing:-1px;
border-bottom:2px solid #505050;
}
# 포스트 제목 변경 사항
# 폰트는 굵고(bold) 사이즈는 20px, 글자체는 'verdana', 색깔 변경
# letter-spacing 은 글자 간격. -로 갈수록 좁아짐
# border-bottom 은 제목 아래 선에 대한 설정.
.post_view .post_title h2 a:link,
.post_view .post_title h2 a:visited {color:#282828;text-decoration:none;}
# 방문한 포스트 제목의 색깔 변경
.post_view .post_title h2 a:hover,
.post_view .post_title h2 a:active {color:#ffcfda;text-decoration:none;}
# 마우스 오버한 제목의 색깔 변경
.post_view .post_title span {color:#999;}
# 포스트 제목 옆의 작은 글씨 색깔
.post_view .post_title span a:link,
.post_view .post_title span a:visited {color:#999;}
.post_view .post_title span a:hover,
.post_view .post_title span a:active {color:#ffcfda;text-decoration:underline;}
# 마우스 오버한 작은 글씨의 색깔 변경
.post_content {overflow:hidden;_word-break:break-all;}
.post_titlelist h2,.post_summary h2,.post_simplelist h2,.post_tagcloud h2 {
font:bold 12px 'verdana',sans-serif;
border-bottom:1px dotted #323232;
color:#5a5a5a;
}
# 포스트 제목 리스트 큰 제목의 폰트와 글씨체, 제목 아래의 선에 대한 변경(이는 미리 보기를 통해 확인할 수 없으며, 직접 적용을 시킨 뒤 메뉴를 눌러 확인 가능)
.post_summary h2 {border-bottom:0;}
.post_titlelist h2 a:link,.post_summary h2 a:link,.post_simplelist h2 a:link,.post_tagcloud h2 a:link,
.post_titlelist h2 a:visited,.post_summary h2 a:visited,.post_simplelist h2 a:visited,.post_tagcloud h2 a:visited {color:#787878;text-decoration:none;}
# 타이틀 리스트 링크된 제목 글씨 색 변경
.post_titlelist h2 a:hover,.post_summary h2 a:hover,.post_simplelist h2 a:hover,.post_tagcloud h2 a:hover,
.post_titlelist h2 a:active,.post_summary h2 a:active,.post_simplelist h2 a:active,.post_tagcloud h2 a:active {color:#ffcfda;text-decoration:none;}
# 위 링크에 마우스 오버 됐을 때 글씨 색 변경
.post_info {font-weight:bold; color: #ff5675;}
# 포스트에 대한 정보(작성자등)의 글씨 굵기와 색깔 변경
.post_meta_area ul.post_meta_content em.date {color:#282828;}
# 포스트의 '이카테고리의 최근글''퍼블리싱정보'의 날짜 색 변경
.post_footer_area {font-size:.9em;}
# 포스트의 맨 아래에 있는 수정, 삭제등의 글자 크기
.widemenu {margin:0 auto;text-align:left;}
.widemenu .wide_blank {display:none;}
.widemenu h3 {font-size:12px;color:#333;}
----- 덧글/트랙백 영역 -----
# 덧글 쓰는 란에 이미지 첨부 가능(방법은 배경 그림 첨부 방법과 같음)
.post_link {color:#282828;}
# 덧글, 트랙백 내용 글씨 색깔 변경
.post_link h3 {
font-size:13px;
color:#ff5675;
letter-spacing:-1px;
border-bottom:1px solid #969696;
# 덧글, 트랙백등의 제목 글씨 크기와 색, 자간 평수와 글씨 아래 선에 대한 변경
}
.post_trackback .trackback_help {
border-bottom:1px solid #969696;
# 도움말 아래의 선에 대한 설정
}
.post_link h4 {font-size:1em;}
----- 하단 메뉴 영역 -----
#section_sidebar1,#section_sidebar2 {margin:0 auto;}
#section_sidebar3 {margin:0;float:left;display:inline;text-align:center;}
#section_sidebar4 {margin:0;float:right;display:inline;text-align:center;}
.column {color:#87cefa;}
# 사이드 메뉴에 있는 내용 글씨 색 변경
.column .widget {margin:1px auto;padding:15px 0;text-align:left;}
.column .widget h3 {
letter-spacing:-1px;
font:bold 13px verdana;
color:#ff7c94;
border-bottom:1px solid #efefef;
# 사이드 메뉴 제목 글씨 간격, 굵기, 글씨체, 색상 변경. 아래 선 변경
}
.column .widget .widget_content {padding-top:10px;overflow:hidden;
font: 11px verdana;
# 카테고리들과 위젯 콘텐트에 대한 글씨 변경
}
----- 푸터 영역 -----
.footer {
font:normal .8em verdana,sans-serif;
color:#ff7a85;
# 맨 아래 '~is powered by~' 부분 글씨 색 변경
margin:0 auto;
padding:10px 0 20px 0;
}
.footer a:link,.footer a:visited {color:#828282;text-decoration:none;}
# 맨 아래 링크 색 변경
.footer a:hover,.footer a:active {color:#ccc;text-decoration:none;}
# 맨 아래 링크 마우스 오버 됐을 때 색상 변경
.body {background-image:url('http://pds16.egloos.com/pds/201002/25/07/Untitled-1.gif');}
.body {background-position:center top;}.body {background-repeat:no-repeat;}
.body {background-image:url('http://pds16.egloos.com/pds/201002/25/07/Untitled-1.gif');}
.body {background-position:center top;}.body {background-repeat:no-repeat;}
.body {background-image:url('http://pds17.egloos.com/pds/201002/25/07/Untitled-1.gif');}
.body {background-position:right top;}.body {background-repeat:no-repeat;}
.body {background-image:url('http://pds17.egloos.com/pds/201002/25/07/Untitled-1.gif');}
.body {background-position:right top;}.body {background-repeat:no-repeat;}
.body {background-image:url('');}
.body {background-position:right top;}.body {background-repeat:no-repeat;}
------------ 영역별 크기 ------------
.wrap {width:1110px;}
.header {width:1060px;}
.container {width:1110px; }
.left_wrap {width:880px;}
.content_wrap {width:650px;}
.content {width:600px;}
.post_content {width:580px; color:#282828;}
# 포스트 내의 글이 잘려 폭(width)을 600px에서 580px로 고침
# 포스트의 글자 색깔을 바꾸고 싶은데 어찌해야 될 지 모르겠어서 여기에 color 추가
.widemenu {width:600px;}
.column {width:230px;}
.column .widget {width:180px;}
.column .widget .widget_content {width:180px;}
#section_sidebar1,
#section_sidebar2 {width:600px;}
#section_sidebar1 .widget,
#section_sidebar2 .widget {width:600px;}
#section_sidebar1 .widget .widget_content,
#section_sidebar2 .widget .widget_content {width:600px;}
.footer {width:1110px;}
------------ 영역별 배경색 & 배경이미지 ------------
# 배경 그림이 전체에 완전히 보일 수 있도록 body옆에 있는 background:[#css_body_bg#];를 비롯한 모든 background를 지워줌. 지우지 않는 부분은 박스로 그림이 가려짐.
.body {
background-attachment:scroll;background-position : bottom;}
# 배경 그림은 따로 주소를 넣지 않더라도 스킨 수정할 때 [전문가용 편집>배경이미지 전경>전체배경]에서 이미지를 추가가 가능
# background-attachment: 배경 그림도 스크롤이 되도록 원하면 scroll을, 화면에 고정되는 걸 원한다면 fixed을 줌
# background-position: 배경 그림의 위치 top(위), center(중간), bottom(아래), 그 외 left, center, right등이 있음
.wrap
.header {
border-bottom:2.5px solid #ff7c94;
# 헤더(맨 위의 이미지) 아래에 있는 선 설정. 2.5px은 선의 두께, solid는 실선(dotted는 점선), #ff7c94는 선의 색상(색상표 위에 첨부. 또는 포토샵을 이용)
}
.footer {
border-top:2px dotted #efefef;
# 맨 아래의 선 두께와 종류, 색상(위 방법과 같음)
}
------------ 영역별 글자크기/글자색/링크색 & 세부설정 ------------
.body {
font:normal 12px/1.6em 'verdana',sans-serif;
color:#666;
margin:0 auto;
padding:0;
text-align:center;
margin: 0 0 -20px 0; }
.body a:link,.body a:visited {color:#999; text-decoration:none;}
.body a:hover,.body a:active {color:#ccc;text-decoration:none;}
.wrap {margin:0 auto;text-align:center;}
----- 헤더 영역 -----
.header {
color:#ccc;
margin:0 auto 30px auto;
padding:300px 25px 5px 25px;
text-align:left;
}
.header a:link,.header a:visited {color:#787878;text-decoration:none;}
# 헤더 부분의 링크(주소나 메뉴릿)의 색깔 변경
.header a:hover,.header a:active {color:#ffd4df;text-decoration:underline;}
# 헤더 링크 부분에 마우스 오버 됐을 때의 색깔 변경과 효과(underline은 밑줄)
.header h1 {
font-size:20px;
margin:0;
padding:1px 0;
}
.header .url {
font:normal .8em verdana,sans-serif;
letter-spacing:5px;
margin:0 0 -10px 0;
padding-left:5px;
}
.header .topmenu {text-align:right;}
.header .topmenu a {padding-left:10px;}
----- 콘텐츠 영역 -----
.container {margin:0 auto;text-align:center;}
.left_wrap {margin:0;float:left;display:inline;}
.content_wrap {margin:0;float:right;display:inline;}
.content {margin:0 auto;text-align:left;overflow:hidden;_word-break:break-all; background:#fff6dc;filter: Alpha(Opacity=70); }
# 콘텐트 박스를 표시하고 싶어서 backgroun 컬러와 filter로 반투명효과를 줌(그 결과 포스트의 노란 반투명 박스)
.content a:link {color:#148bff;text-decoration:none;}
# 콘텐트 내 포스트, 답변, 트랙백등의 모든 링크의 색 변경
.content a:visited {color:#148bff;text-decoration:none;}
# 방문했던 위 링크들에 대한 색 변경(저는 변경을 원치 않아서 바꾸지 않음)
.content a:hover,
.content a:active {color:#7dc7e8;text-decoration:underline;}
# 링크 위에 마우스 오버 했을 때의 색 변경과 효과
.post_view,.post_oneview {margin-top:15px; margin-bottom:60px; margin-left:10px;margin-right:10px;}
.post_summary,.post_magazine,.post_tagcloud {margin-bottom:20px;}
.post_view .post_title h2 {
font: bold 20px, 'verdana';sans-serif;
font color: #282828;
letter-spacing:-1px;
border-bottom:2px solid #505050;
}
# 포스트 제목 변경 사항
# 폰트는 굵고(bold) 사이즈는 20px, 글자체는 'verdana', 색깔 변경
# letter-spacing 은 글자 간격. -로 갈수록 좁아짐
# border-bottom 은 제목 아래 선에 대한 설정.
.post_view .post_title h2 a:link,
.post_view .post_title h2 a:visited {color:#282828;text-decoration:none;}
# 방문한 포스트 제목의 색깔 변경
.post_view .post_title h2 a:hover,
.post_view .post_title h2 a:active {color:#ffcfda;text-decoration:none;}
# 마우스 오버한 제목의 색깔 변경
.post_view .post_title span {color:#999;}
# 포스트 제목 옆의 작은 글씨 색깔
.post_view .post_title span a:link,
.post_view .post_title span a:visited {color:#999;}
.post_view .post_title span a:hover,
.post_view .post_title span a:active {color:#ffcfda;text-decoration:underline;}
# 마우스 오버한 작은 글씨의 색깔 변경
.post_content {overflow:hidden;_word-break:break-all;}
.post_titlelist h2,.post_summary h2,.post_simplelist h2,.post_tagcloud h2 {
font:bold 12px 'verdana',sans-serif;
border-bottom:1px dotted #323232;
color:#5a5a5a;
}
# 포스트 제목 리스트 큰 제목의 폰트와 글씨체, 제목 아래의 선에 대한 변경(이는 미리 보기를 통해 확인할 수 없으며, 직접 적용을 시킨 뒤 메뉴를 눌러 확인 가능)
.post_summary h2 {border-bottom:0;}
.post_titlelist h2 a:link,.post_summary h2 a:link,.post_simplelist h2 a:link,.post_tagcloud h2 a:link,
.post_titlelist h2 a:visited,.post_summary h2 a:visited,.post_simplelist h2 a:visited,.post_tagcloud h2 a:visited {color:#787878;text-decoration:none;}
# 타이틀 리스트 링크된 제목 글씨 색 변경
.post_titlelist h2 a:hover,.post_summary h2 a:hover,.post_simplelist h2 a:hover,.post_tagcloud h2 a:hover,
.post_titlelist h2 a:active,.post_summary h2 a:active,.post_simplelist h2 a:active,.post_tagcloud h2 a:active {color:#ffcfda;text-decoration:none;}
# 위 링크에 마우스 오버 됐을 때 글씨 색 변경
.post_info {font-weight:bold; color: #ff5675;}
# 포스트에 대한 정보(작성자등)의 글씨 굵기와 색깔 변경
.post_meta_area ul.post_meta_content em.date {color:#282828;}
# 포스트의 '이카테고리의 최근글''퍼블리싱정보'의 날짜 색 변경
.post_footer_area {font-size:.9em;}
# 포스트의 맨 아래에 있는 수정, 삭제등의 글자 크기
.widemenu {margin:0 auto;text-align:left;}
.widemenu .wide_blank {display:none;}
.widemenu h3 {font-size:12px;color:#333;}
----- 덧글/트랙백 영역 -----
# 덧글 쓰는 란에 이미지 첨부 가능(방법은 배경 그림 첨부 방법과 같음)
.post_link {color:#282828;}
# 덧글, 트랙백 내용 글씨 색깔 변경
.post_link h3 {
font-size:13px;
color:#ff5675;
letter-spacing:-1px;
border-bottom:1px solid #969696;
# 덧글, 트랙백등의 제목 글씨 크기와 색, 자간 평수와 글씨 아래 선에 대한 변경
}
.post_trackback .trackback_help {
border-bottom:1px solid #969696;
# 도움말 아래의 선에 대한 설정
}
.post_link h4 {font-size:1em;}
----- 하단 메뉴 영역 -----
#section_sidebar1,#section_sidebar2 {margin:0 auto;}
#section_sidebar3 {margin:0;float:left;display:inline;text-align:center;}
#section_sidebar4 {margin:0;float:right;display:inline;text-align:center;}
.column {color:#87cefa;}
# 사이드 메뉴에 있는 내용 글씨 색 변경
.column .widget {margin:1px auto;padding:15px 0;text-align:left;}
.column .widget h3 {
letter-spacing:-1px;
font:bold 13px verdana;
color:#ff7c94;
border-bottom:1px solid #efefef;
# 사이드 메뉴 제목 글씨 간격, 굵기, 글씨체, 색상 변경. 아래 선 변경
}
.column .widget .widget_content {padding-top:10px;overflow:hidden;
font: 11px verdana;
# 카테고리들과 위젯 콘텐트에 대한 글씨 변경
}
----- 푸터 영역 -----
.footer {
font:normal .8em verdana,sans-serif;
color:#ff7a85;
# 맨 아래 '~is powered by~' 부분 글씨 색 변경
margin:0 auto;
padding:10px 0 20px 0;
}
.footer a:link,.footer a:visited {color:#828282;text-decoration:none;}
# 맨 아래 링크 색 변경
.footer a:hover,.footer a:active {color:#ccc;text-decoration:none;}
# 맨 아래 링크 마우스 오버 됐을 때 색상 변경
.body {background-image:url('http://pds16.egloos.com/pds/201002/25/07/Untitled-1.gif');}
.body {background-position:center top;}.body {background-repeat:no-repeat;}
.body {background-image:url('http://pds16.egloos.com/pds/201002/25/07/Untitled-1.gif');}
.body {background-position:center top;}.body {background-repeat:no-repeat;}
.body {background-image:url('http://pds17.egloos.com/pds/201002/25/07/Untitled-1.gif');}
.body {background-position:right top;}.body {background-repeat:no-repeat;}
.body {background-image:url('http://pds17.egloos.com/pds/201002/25/07/Untitled-1.gif');}
.body {background-position:right top;}.body {background-repeat:no-repeat;}
.body {background-image:url('');}
.body {background-position:right top;}.body {background-repeat:no-repeat;}
덧글