FANDOM


CSS Codes 
@charset "utf-8";

/* CSS Document */

body,html{
	height:100%
}

div#header_wrap{
	width:	100%;  height:114px; background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/header_bg.gif) repeat-x;
}
header{
	width:980px; height:114px; margin:0px auto; position:relative;	left:0px; top:0px;
}
span#logo{
	 position:absolute; left:0px; top:45px;
}
ul#topmenu_list li{
	float:left; margin-right:10px;
}


ul#topmenu_list{
	width:150px; height:20px; position:absolute; right:0px; top:5px;
}/*section이나 div로 감싸지 않았으니까 크기 지정해줘야함 안그러면 뻗어나감*/

ul#menu_list li{
	width:25%; height:16px; float:left; text-indent:-9999px; background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/navi_text.png) no-repeat 0px 0px;
}/*메뉴가 4개라서 25%*/

ul#menu_list{
	width:70%; height:16px; position:absolute; left:50%; margin-left:-38%; top:70px;
}
ul#menu_list li:nth-child(1){
	background-position:0px 0px;
}
ul#menu_list li:nth-child(2){
	background-position:0px -36px;
}
ul#menu_list li:nth-child(3){
	background-position:0px -70px;
}
ul#menu_list li:nth-child(4){
	background-position:0px -105px;
}

span#best_btn{
	position:absolute; right:0px; top:70px;
}
span#menu_icon{
	position:absolute; left:0px; top:2px;display:none;
}

div#visual_wrap{
	width:100%;  background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_bg.jpg) repeat-x;
}
section#visual{
	width:980px;  margin:0px auto; overflow:hidden;
}/*overflow:hidden: 높이값도 넣어줘야 함*/
ul#visual_list{
	width:100%; 
}
ul#visual_list li{
	width:100%; float:left;
}
ul#visual_list li img{
	width:100%;
}




/*div#visual_wrap{
	background:100%; height:469px; 	background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_bg.jpg) repeat-x;
}/*조금 잘려도 백그라운드일때는 높이값 고정인게 좋음(멋스럽지 않을 뿐 의미상 문제는없음).아래 나올 요소들도 높이를 다 %로 지정해줘야하니까*//*
section#visual{
	width:980px; height:100%; margin:0px auto; overflow:hidden;
}
ul#visual_list li{
	width:100%; height:100%; float:left;
}
ul#visual_list{
	width:100%; height:100%;
}
ul#visual_list li:nth-child(1){
	background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_img_01.jpg) no-repeat center 0px; background-size:cover;
}

ul#visual_list li:nth-child(2){
	background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_img_02.jpg) no-repeat center 0px; background-size:cover;
}

ul#visual_list li:nth-child(3){
	background:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_img_03.jpg) no-repeat center 0px; background-size:cover;
}
이미지를 백그라운드로*/

div#contents_wrap{
	width:100%; height:270px; background:#ececec;
}/*이미지로 했을 때 비주얼 덮인거 같으면 visual에 height주기*/
section#contents{
	width:980px; height:270px; margin:0px auto;
}
ul#contents_list li{
	width:20%; height:120px; float:left; margin-right:6.66%;
}/*margin-right를 세개만 주면 되니까 남은 20%를 3으로 나눔*/
ul#contents_list li:last-child{
	margin-right:0px;
}
ul#contents_list{
	width:100%; height:120px;margin-top:50px; float:left;
}

p.sum_title{
	text-align:center; margin-bottom:10px;
}
p.sum_img{
	width:100%; text-align:center; margin-bottom:10px;
}
p.sum_img img{
	width:100%;
}
p.sum_text{
	text-align:center;
}





@media screen and (max-width:980px){
		
	header,section#visual,section#contents{
		width:95%;
	}
	ul#menu_list{
		width:60%; margin-left:-35%;
	}
	span#menu_icon{
		display:none;
	}
	section#visual{
		width:95%;
	}
}
@media screen and (max-width:800px){
	
	ul#menu_list{
		display:none;
	}
	span#menu_icon{
		display:block;
	}
	span#logo{
		left:50%; margin-left:-63px;
	}
	ul#visual_list li{
		background-image:url(file:///N|/04_Responsive_Web/03_RWD_project_01/images/visual_img_02.jpg);
	}/*html은 이미지로 썼는데 여기선 background로 이미지 처리해서*/
	ul#contents_list li{
		width:45%; margin-right:10%; margin-bottom:50px;
	}
	ul#contents_list li:nth-child(2n){
		margin-right:0px;	
	}
	div#contents_wrap{
		height:400px;
	}
	section#contents{
		height:400px;
	}
} /*span#logo는 포지션 absolute고  가로 길이 정해져 있으니까 %할 필요 없음*/

@media screen and (max-width:480px){
	span#best_btn{
		display:none;
	}
	ul#contents_list li{
		width:100%; margin-right:0px;
	}
	ul#contents_list li:nth-child(3), ul#contents_list li:nth-child(4){
		display:none;
	}
}





Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.