묻고답하기
레이아웃 배경색 수정
2014.07.14 20:43
===================================================================
레이아웃 - Express999
질문 - 레이아웃 전체 배경색상 변경하고 싶습니다. 어디를 수정하면 될까요?
===================================================================
@charset "utf-8";
/* Express999 2.1 / 디자인 / 퍼블리싱 : 케미 */
/* 나눔 고딕 설정 */
@font-face {
font-family: ng;
font-style: normal;
font-weight: 700;
src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.eot);
src: local(※), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.woff2) format('x-woff2'),
url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.woff) format('woff'),
url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.ttf) format('truetype');
}
/* 전체 폰트설정 */
body, input, button, textarea, table {
font-family: 나눔고딕, NanumGothic, ng, 'Helvetica Neue', Helvetica, 'Open Sans', 'Myriad Pro', Verdana, 돋움, dotum, sans-serif;
}
.ex999-font { font-family: 나눔고딕, NanumGothic, ng, 'Helvetica Neue', Helvetica, 'Open Sans', 'Myriad Pro', Verdana, 돋움, dotum, sans-serif; }
#site-columns .boardInformation .infoSum { display:none }
/* 공통 class */
html, body { }
.grid-site { width:950px; margin:0 auto; }
.grid-content { padding:10px 20px 15px 20px;}
#site-columns { min-height: 719px;}
.cfix { zoom:1 }
.cfix:after { content: '.'; display:block; clear:both; visibility:hidden; line-height:0; height:0; overflow: hidden; }
.left { float:left }
.right { float:right }
.corner-top {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-o-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.corner-bottom {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-o-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.corner-all {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.bullet-item:before {
content: "•";
left: -14px;
top: 1px;
font-family: sans-serif;
font-size: 12px;
}
/* 레이아웃 최상단 헤더 */
#site-container { min-width:1050px; }
#header { width:100%; z-index:99; position: fixed; top:0; left:0; right:0; background:url(../img/sprite.png) 0 -12px repeat-x; }
#header .header-content { height:52px; position:relative; }
#header .siteLogo { float:left; position:relative; padding:8px 5px 0 0; display:block; }
/* GNB 1 */
.gnb { float:left; position:relative; padding:0; *z-index:100;/*ie7*/ }
.gnb-item { height:49px; float:left; position:relative; display:block; }
.gnb-item .gnb-link {
height:49px; position:relative; display:block;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.gnb-item .gnb-link span {
padding:16px 15px 14px 15px; display:block;
font-size:14px; color: #303030; white-space: nowrap; font-weight:bold; line-height:14px;
}
.gnb-item:hover .gnb-link.ex-list {
border-left: 1px solid #cfcdcd;
border-right: 1px solid #cfcdcd;
background-color: #FFF;
text-decoration: none;
}
.gnb-item:hover .gnb-link span {
color: #38f;
text-decoration: none;
}
/* GNB 2 */
.sub-wrap {
position: absolute; top: 49px; min-width:188px; z-index:1001;
overflow: hidden; padding:0 0 0 0;
}
.sub-wrap ul { padding: 10px 0;
background-color: #FFF;
border-left: 1px solid #cfcdcd;
border-right: 1px solid #cfcdcd;
border-bottom: 1px solid #cfcdcd;}
.sub-item { position:relative; }
.sub-item a {
position:relative; font-size:13px; font-weight:bold; color:#929293; padding: 4px 15px; display:block;
color:#303030; height:20px; line-height:20px; line-height:17px\9;
}
.gnb-item:hover .sub-wrap { left:0;}
.sub-item a:hover {
color: #fff;
background-color: #4495ff;
background-image: linear-gradient(top bottom,rgba(255,255,255,0.12) 0,rgba(255,255,255,0) 43%,rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.12)),color-stop(43%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,0)));
background-image: -o-linear-gradient(top,rgba(255,255,255,0.12) 0,rgba(255,255,255,0) 43%,rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(top,rgba(255,255,255,0.12) 0,rgba(255,255,255,0) 43%,rgba(255,255,255,0) 100%);
background-image: -moz-linear-gradient(top,rgba(255,255,255,0.12) 0,rgba(255,255,255,0) 43%,rgba(255,255,255,0) 100%);
background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.12) 0,rgba(255,255,255,0) 43%,rgba(255,255,255,0) 100%);
}
.sub-item:hover::before,
.sub-item:hover::after {
display: block;
width: 1px; height:28px;
background: #4495ff;
position: absolute;
top: 0; left:-1px;
content: ""; z-index:2002;
}
.sub-item:hover::after { left:auto; right:-1px}
.gnb .yuki1, .gnb .yuki2, .gnb .yuki3, .gnb .yuki4, .gnb .yuki5, .gnb .yuki6, .gnb .yuki7, .account .sub-wrap,
.gnb .yuki8, .gnb .yuki9, .gnb .yuki10, .gnb .yuki11, .gnb .yuki12, .gnb .yuki13, .gnb .yuki14 {
left:-999em;
}
/* Search Bar */
#header .search { float:right; margin:9px 0 0 0; padding:0 0 0 0; }
#header .iText {
zoom: 1; background:url(../img/sprite.png) -2px -99px;
width:105px; height:31px; padding: 0 1px 0 29px;
line-height:17px; line-height: 31px\9; outline: none; font-weight:normal;
color: #919191; font-size:14px; font-family:'Open Sans',Arial, '맑은 고딕', Malgun Gothic, Helvetica, 나눔고딕, NanumGothic, ng, 돋움, dotum, sans-serif;
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
#header .iText:focus { background:url(../img/sprite.png) -2px -130px; }
/* 계정정보 */
.account { float:right; position:relative; margin-right:10px;}
.account .sub-wrap.varus { min-width:134px; }
.account .gnb-item .gnb-link span { padding:0; }
.account .gnb-item a { }
.account .ex-divider {
border-right: 1px solid #eee;
border-left: 1px solid #eee;
}
.account .gnb-item:hover .ex-divider {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
.account .profile { position:relative; padding:9px 10px 0 10px}
.account .signup { position:relative; padding:16px 0 0 0; font-size:12px; font-weight:normal;}
.account .gnb-item:hover .sub-wrap.varus { left:0;}
#site-columns { margin:62px auto 30px auto; padding:0; position:relative; }
#infi-footer {
width: 100%; height: 29px;
position: fixed; bottom: 0; left: 0;
z-index: 9;
background:url(../img/sprite.png) 0 -22px repeat-x;
border-top:1px solid #bfbfbf;
}
#infi-footer .infi-list { }
#infi-footer .infi-item {
font-family: 'Helvetica Neue', Helvetica, 나눔고딕, NanumGothic, ng, 'Open Sans', 'Myriad Pro', Verdana, 돋움, dotum, sans-serif;
position:relative; float:left; display:inline-block;
padding-top: 14px;
margin-top: -14px;
}
#infi-footer .infi-item-link {
position: relative;
padding:0 14px;
height: 29px; line-height: 29px;
font-size: 11px;
font-weight: bold;
color: #444;
display:block;
}
/* HTML Reset */
a { color: #1769FF; text-decoration: underline; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
code, form, fieldset, legend, input, textarea, p, a, blockquote, th, td {
margin:0; padding:0; border: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
ol,ul { list-style:none; }
fieldset,img { border:0; }
address, caption, cite, code, dfn, em, th, var {
font-style:normal;
/* font-weight:normal; */
}
caption, th, td {
text-align: left;
/* font-weight:normal; */
}
h1,h2,h3,h4,h5,h6 { font-size:100%;}
abbr, acronym { border:0; font-variant:normal; }
sup { vertical-align:text-top;}
sub { vertical-align:text-bottom;}
input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; }
legend { color:#000; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a, a:visited { text-decoration: none; }
a:hover,
a:active,
a:focus { text-decoration:none; }
a { cursor: pointer;}
#header { width:100%; z-index:99; position: fixed; top:0; left:0; right:0; background:url(../img/sprite.png) 0 -12px repeat-x; }
이거 말고는 전체에 영향줄 부분은 안보이는데...
그런데 이것도 header 쪽에만 영향을 주는지라...
위 css에서 전체 배경색은 잘 안보이는거 같은데요...