20180913 / 대진디자인고등학교 / 웹 디자인 기능사

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 디자인 기능사 연습</title>
<style>
    * { margin:0; padding:0; }
    ul, li { list-style:none; }
    a { text-decoration:none; color:inherit;}
    .wrap{ width:1200px; margin:0 auto;}
    .header{ border-bottom: 1px solid #ddd; height:100px;
            position:relative; z-index:10;}
    .header > div { height:100px; display:flex;
                    justify-content:space-between; align-items:center;}
     /* menu */
    .gnb { display:flex; }
    .gnb a { display:block; transition:0.3s;}
    .gnb>li { position:relative;}
    .gnb>li>a { padding:15px 40px; font-size:17px;}
    .gnb>li>ul { position:absolute; display:none; left:0; right:0;}
    .gnb>li:hover>a { background:#09F; color:#FFF;}
    .gnb>li:hover>ul { display:block;}
    .gnb>li>ul a { line-height:40px; text-align:center;}
    .gnb>li>ul a:hover { background:#666; color:#FFF;}
    
    /* slide */
    .slide { height:400px; position:relative; overflow:hidden;}
    .slide ul { width:3600px; height:100%; display:flex;
                animation:slide 6s infinite; }
    .slide li { width:1200px; height:100%;}
    .slide li:nth-child(1) { background:#ffa;}
    .slide li:nth-child(2) { background:#faf;}
    .slide li:nth-child(3) { background:#aff;}
    @keyframes slide {
        0% { margin-left:0;}
        10% { margin-left:0;}
        33% { margin-left:-100%;}
        43% { margin-left:-100%;}
        66% { margin-left:-200%;}
        76% { margin-left:-200%;}
        100% { margin-left:0;}
    }
</style>
</head>
<body>
    <div class="header">
        <div class="wrap">
            <h3 class="logo"><a href="#">WebDesign</a></h3>
            <ul class="gnb">
                <li>
                    <a href="#">메인메뉴</a>
                    <ul>
                        <li><a href="#">서브메뉴</a></li>
                        <li><a href="#">서브메뉴</a></li>
                        <li><a href="#">서브메뉴</a></li>
                    </ul>
                </li>
                <li><a href="#">메인메뉴</a></li>
                <li><a href="#">메인메뉴</a></li>
            </ul>
        </div>
    </div>
    <div class="wrap">
        <div class="slide">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <p class="slogan">
                <strong>가을이다</strong>
                벌써 9월이다
            </p>
        </div>
        <div class="content">
            <div class="notice">
                <h3 class="title">공지사항</h3>
                <ul>
                    <li><a href="#">ㅇr 집ㄱr고싶ㄷr</a></li>
                    <li><a href="#">민지를 따라했다.</a></li>
                    <li><a href="#">쌤 헷갈려요. 미안해요</a></li>
                    <li><a href="#">이것은 그냥 마지막 줄</a></li>
                </ul>
            </div>
            <div class="gallery">
                <h3 class="title">갤러리</h3>
                <ul>
                    <li><img src="http://catory.kr/files/attach/images/138/009/007/1aa6aaff9f7e241f17a09f077d631206.jpg" alt="이미지1"></li>
                    <li><img src="http://image.hankookilbo.com/i.aspx?Guid=c5ceaed972d9498ab6f370155652d250&Month=201604&size=640" alt="이미지2"></li>
                    <li><img src="http://mblogthumb2.phinf.naver.net/20160123_241/34ye5rtjf56_14535291399749YghY_JPEG/20160123_145821.jpg?type=w800" alt="이미지3"></li>
                </ul>
            </div>
            <div class="banner">
                <h3 class="title">배너</h3>
                <input type="checkbox" id="chk">
                <label for="chk">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFN5pE1crTuPB804HWQxs6vkaaOVKsUUS-J5hzAtZqlFqJHLFTjQ" alt="필참은 학교에 좋아요">
                </label>
                <div class="layer">
                    <div>
                        <label for="chk">X</label>
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFN5pE1crTuPB804HWQxs6vkaaOVKsUUS-J5hzAtZqlFqJHLFTjQ" alt="안녕">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        Copyright (C) 2018 <strong>ㅇr배고프ㄷr</strong> All Right Reserved
    </div>
</body>
</html>