[CSS] 20. 실습: nexon


실습: nexon



/*------------- nexon_pc.css --------------*/


*{box-sizing:border-box;}
body{background: #eef1f2;}
.gnb-bg{position:relative; background: #fff; height: 100px; 
	border-bottom: 3px solid #000;}
.gnb-bg h1{position:absolute; width:250px; height: 46px; 
	background: url(logo.gif) no-repeat; top:20px}
.gnb{position:absolute; left: 50%; top:20px;}
.hidden{display:block; text-indent:-9999px;}
.f-l{float:left;}
.f-r{float:right;}
.gnb{width:900px; margin:auto;}
.gnb li{background-image: url(bg_gnb.gif);
	height: 60px; float:left;}
.gnb li a{display:block;}
	/* 위치가 움직이는 것이 아니라 이미지를 움직여야한다 */
.gnb li:nth-child(1){width: 82px; background-position: 0 0; }
.gnb li:nth-child(2){width: 103px; background-position: -93px 0;}
.gnb li:nth-child(3){width: 70px; background-position: -200px 0;}
.gnb li:nth-child(4){width: 77px; background-position: -275px 0;}


.gnb li:nth-child(1):hover{background-position: 0 bottom; }
.gnb li:nth-child(2):hover{background-position: -93px bottom; }
.gnb li:nth-child(3):hover{background-position: -200px bottom; }
.gnb li:nth-child(4):hover{background-position: -275px bottom;}

.wrap{width:1370px; margin: auto; overflow:hidden; padding: 42px}
.content{width:712px;}
.side{width:475px;}
article{width:226px; height:206px; float:left; transition:all .8s;}
article:nth-child(5), article:nth-child(9){width:469px;}
.m1{margin-right:17px; margin-bottom:17px;}
.m2{margin-bottom:17px;}
.m3{padding: 70px 30px 30px 30px; margin-bottom:17px;
	background: #fff;}
.m3 a{text-decoration:none; display:block; font-size:18px;}

/* 내용 넣기 */
.content article:nth-child(1){background-image: url(bg_goods_info.gif); 
	background-position:0 0;}
.content article:nth-child(1):hover{ background-position:0 bottom;}

.content article:nth-child(2){background-image: url(bg_pay_list.gif); 
	background-position:0 0;}
.content article:nth-child(2):hover{ background-position:0 bottom;}

.content article:nth-child(3){background-image: url(bg_game_play.gif); 
	background-position:0 0;}
.content article:nth-child(3):hover{ background-position:0 bottom;}

.content article:nth-child(4){background-image: url(bg_event_apply.gif); 
	background-position:0 0;}
.content article:nth-child(4):hover{ background-position:0 bottom;}



.content article:nth-child(6){background-image: url(bg_ip_manage.gif); 
	background-position:0 0;}
.content article:nth-child(6):hover{ background-position:0 bottom;}

.content article:nth-child(7){background-image: url(bg_refund_apply.gif); 
	background-position:0 0;}
.content article:nth-child(7):hover{ background-position:0 bottom;}

.content article:nth-child(8){background-image: url(bg_taxInvoice.gif); 
	background-position:0 0;}
.content article:nth-child(8):hover{ background-position:0 bottom;}

.content article:nth-child(9){background-image: url(bg_customer_center.gif); 
	background-position:0 0;}
.content article:nth-child(9):hover{ background-position:0 bottom;}

.content article:nth-child(10){background-image: url(bg_remote_supply.gif); 
	background-position:0 0;}
.content article:nth-child(10):hover{ background-position:0 bottom;}


.welcome{width: 470px; height:40px;}
.util ul{overflow:hidden; margin: 14px 0 24px;}
.util ul li{float:left;}
.ip-address{background: #dcdcdc; padding: 10px 0 12px 50px;
	margin-bottom:18px;}
.aside{position:relative; width:470px; height:652px;}
.button{width:134px; position:absolute; top:0; right:0}
.button a:nth-child(1){width:66px; height:66px; display:block; 
	background-image: url(btn_rolling_arrow.gif); float:left}
.button a:nth-child(2){width:66px; height:66px; display:block; 
	background-image: url(btn_rolling_arrow.gif); 
	background-position:-66px 0; float:left;}	
.description{width:470px; height:80px; position:absolute; bottom:0px;
	padding:19px 30px; font-size:14px; color:#fff; background: #000;}




<!------------- nexon_pc.html -------------->


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nexon PC</title>
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="nexon_pc.css">
</head>
<body>
	<div class="gnb-bg">
		<h1 class="hidden f-l">넥슨 PC방 메인페이지</h1>
		<ul class="gnb f-r">
			<li><a href="" class="hidden">my pc방</a></li>
			<li><a href="" class="hidden">상품과 결제</a></li>
			<li><a href="" class="hidden">이벤트</a></li>
			<li><a href="" class="hidden">고객센터</a></li>
		</ul>
	</div>		
	<div class="wrap">
		<section class="content f-l">
			<article class="m1"><a href="" class="hidden">상품안내</a></article>
			<article class="m1"><a href="" class="hidden">결재내역조회</a></article>
			<article class="m2"><a href="" class="hidden">게임이용조회</a></article>
			<article class="m1"><a href="" class="hidden">이벤트신청</a></article>
			<article class="m3"><a href="" >공지사항</a></article>
			<article class="m1"><a href="" class="hidden">IP관리</a></article>
			<article class="m1"><a href="" class="hidden">환불,이전 신청</a></article>
			<article class="m2"><a href="" class="hidden">세금계산서 조회</a></article>
			<article class="m1"><a href="" class="hidden">고객센터</a></article>
			<article class="m2"><a href="" class="hidden">원격지원</a></article>
		</section>
		<section class="side f-r">
			<div class="util">
				<p class="welcome">
					넥슨PC방에 오신 것을 환영합니다.원활한 이용을 위해 로그인이 필요합니다.
				</p>
				<a href=""><img src="btn_login01.gif" alt=""></a>
				<ul>
					<li><a href="">회원가입/</a></li>
					<li><a href="">아이디찾기/</a></li>
					<li><a href="">비밀번호찾기</a></li>
				</ul>
			</div>
			<div class="ip-address">
				<p>접속 IP</p>
			</div>
			<div class="aside">
				<div class="button">
					<a href="" class="hidden">before</a>
					<a href="" class="hidden">after</a>
				</div>
				<img src="sa_mainBn.jpg" alt="">
				<div class="description">
					<p>던전앤파이터 전자쿠폰 <br>
						2018년 01월 01일(월) ~ 2018년 12월 31일(월)</p>
				</div>
			</div>
		</section>
	</div>
</body>
</html>




실행결과