[2016¹öÀü]    
 
ÀÛ¼ºÀÏ : 14-03-06 18:50
index.html
 ±Û¾´ÀÌ : °ü¸®ÀÚ1
Á¶È¸ : 75,169  

<!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>


 
 

Total 5
¹øÈ£ Á¦   ¸ñ ±Û¾´ÀÌ ³¯Â¥ Á¶È¸
5 index.html °ü¸®ÀÚ1 03-06 75170
4 main aside °ü¸®ÀÚ1 03-03 30792
3 header °ü¸®ÀÚ1 02-28 5985
2 ¿­±â´Ý±â °ü¸®ÀÚ1 02-24 9151
1 °úÁ¤ ¼±Åà °ü¸®ÀÚ1 09-15 4