<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>모바일!!</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<style>
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
body {
font-family: Helvetica, Verdana, NanumBarunGothic, NanumGothic, Dotum, sans-serif;
}
#main_header {
height: 39px;
border-bottom: 3px solid #e30613;
position:relative;
}
#main_header > #logo {
width: 221px;
height: 39px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url('images/result.png');
background-position: 0px 0px;
}
#main_header > label {
width: 40px;
height: 39px;
display: block;
position: absolute;
top: 0;
right: 0;
background: url('images/result.png');
background-position: 0px -39px;
}
#main_img_wrap {
position: relative;
overflow: hidden;
}
#main_img_wrap > img {
visibility: hidden;
width:100%;
display:block;
}
#main_img_wrap > #main_img {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:red;
background: url('images/index.png');
background-size: 300%;
transition-duration: 0.5s;
/*
-webkit-animation:wow;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
*/
}
#main_img_wrap > #img_button {
position: absolute;
width: 60px;
height: 20px;
bottom: 10px;
right: 10px;
}
#main_img_wrap > #img_button > label {
display: block;
float: left;
width: 18px;
height: 18px;
margin:1px;
border-radius: 9px;
background: white;
}
#main_img_wrap > input {
display: none;
}
#img1:checked ~ #main_img {
/*
background: url('images/index_06.png');
background-size:100%;
*/
background-position:0 0;
}
#img2:checked ~ #main_img {
/*
background: url('images/index2_06.png');
background-size:100%;
*/
background-position:50% 0;
}
#img3:checked ~ #main_img {
/*
background: url('images/index3_06.png');
background-size:100%;
*/
background-position:100% 0;
}
#img1:checked ~ #img_button > label:nth-child(1) {
background: #e30613;
}
#img2:checked ~ #img_button > label:nth-child(2) {
background: #e30613;
}
#img3:checked ~ #img_button > label:nth-child(3) {
background: #e30613;
}
#main_nav > ul {
overflow: hidden;
}
#main_nav > ul > li {
float:left;
width:25%;
}
#main_nav > ul > li > a {
display: block;
width: 100px;
height: 122px;
margin: 0 auto;
background: url('images/result.png');
}
#main_nav > ul > li:nth-child(1) > a {
background-position: 0px -78px;
}
#main_nav > ul > li:nth-child(2) > a {
background-position: 0px -200px;
}
#main_nav > ul > li:nth-child(3) > a {
background-position: 0px -322px;
}
#main_nav > ul > li:nth-child(4) > a {
background-position: 0px -444px;
}
#wrap {
position: relative;
}
#drop_menu {
position: absolute;
width: 100%;
background: #a90f18;
top:39px;
z-index:3;
height:0;
transition-duration:0.5s;
overflow:hidden;
}
#toggle:checked ~ #wrap > #drop_menu {
height:155px;
}
#drop_menu li {
padding: 7px;
color:#ffc1c5;
font-size:14px;
}
#drop_menu li::before {
content: '▶';
font-size:5px;
margin-right:8px;
vertical-align:central;
color:white;
}
body > input {
display: none;
}
#drop_menu li:hover {
background:#63070d;
}
@-webkit-keyframes wow {
from {
background-image: url('images/index_06.png');
}
50% {
background-image: url('images/index2_06.png');
}
to {
background-image: url('images/index3_06.png');
}
}
#main_content {
position: relative;
overflow: hidden;
}
#main_content > img {
visibility: hidden;
width:100%;
display:block;
}
#main_content > #content1 > img{
position:absolute;
top:0;
left:0;
width:30%;
height:30%;
float:left;
}
#main_content > #content2 > img {
position:absolute;
top:0px;
right:0px;
width:70%;
height:30%;
float:right;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle" />
<div id="wrap">
<header id="main_header">
<a href="#" id="logo"></a>
<label for="toggle"></label>
</header>
<nav id="drop_menu">
<ul>
<li>meun1</li>
<li>meun2</li>
<li>meun3</li>
<li>meun4</li>
<li>meun5</li>
</ul>
</nav>
<div id="main_img_wrap">
<img src="images/index_06.png" />
<input type="radio" id="img1" name="img" checked />
<input type="radio" id="img2" name="img"/>
<input type="radio" id="img3" name="img"/>
<div id="main_img"></div>
<div id="img_button">
<label for="img1"></label>
<label for="img2"></label>
<label for="img3"></label>
</div>
</div>
<nav id="main_nav">
<ul>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
</nav>
<div id="main_content">
<img src="images/event_01.gif" />
<div id="content1">
<img src="images/event_01.gif" />
</div>
<div id="content2">
<img src="images/event_02.gif" />
</div>
</div>
<footer id="main_footer"></footer>
</div>
</body>
</html>
조회 : 39,268
