20190610 대진디자인고등학교

<!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; }
	.wrap { width:1000px; margin:0 auto; }
	.header {
		height: 100px;
		display: flex;
		justify-content:space-between; 
		align-items: center;
	}
	.gnb { display: flex; }
	.gnb a { display: block; text-decoration: none; }
	.gnb > li { position: relative; /* relative는 좌표계 */}
	.gnb > li > ul { height: 0; transition: 0.5s; overflow: hidden;
					 position: absolute; /* absolute는 좌표 */
					 left: 0;
					 width: 100%;}
	.gnb > li > a { padding: 10px 40px; color:`#09F; font-size: 19px; }
	.gnb > li:hover > ul { height: 100px; }
	.gnb > li:hover > a { background: #09F; color: #fff; }
	.gnb > li > ul > li > a { padding:10px 0; background:#eee;
							  text-align:center; }
	.gnb > li > ul > li > a:hover { background:#666; color:#ddd; }
	.slide ul { width: 3000px; height: 400px; display: flex;}
	.slide li { width: 1000px; height: 400px; }
	.slide li:nth-child(1) {
		background: url(https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/4arX/image/F0ZUoxTjj3xUp0UayJ-GMvWZ__4.jpg) no-repeat center / cover; }
	.slide li:nth-child(2) {
		background: url(https://i.ytimg.com/vi/1NNVuQ-ERdc/maxresdefault.jpg) no-repeat center / cover; }
	.slide li:nth-child(3) {
		background: url(https://i.ytimg.com/vi/umMe1hhPBko/maxresdefault.jpg) no-repeat center / cover; }
	@keyframes slide {
		0% { margin-left: 0; }
		10% { margin-left: 0; }
		33% { margin-left: -1000px; }
		43% { margin-left: -1000px; }
		66% { margin-left: -2000px; }
		76% { margin-left: -2000px; }
		100% { margin-left: 0; }
	}
	.slide ul{animation:slide 6s infinite;}
	.slide { overflow:hidden;}
	.content { display: flex; justify-content: space-between; }
	.content > div { padding:20px; height:160px; width:280px; margin-top:20px;}
	.content .title { margin-bottom:20px;}
	.notice { background: #ffd;}
	.notice a { color:#000; line-height:200%; display: block; text-decoration:none;}
	.gallery { background: #fdd;}
	.gallery ul { display: flex; justify-content: space-between;}
	.gallery li { width:85px; height:85px;}
	.gallery img { max-width: 100%; height: 100%;}
	.banner { background: #fdf }
	.banner img { width:180px; margin:0 auto; display: block;}
</style>
</head>
<body>
	<div class="wrap">
    	<div class="header">
        	<a href="#" class="logo">
            	<img src="http://mblogthumb1.phinf.naver.net/20160127_184/webjjoo_1453870976848Mpo9B_JPEG/01224008.JPG?type=w800" alt="로고" width="100" />
            </a>
            <ul class="gnb">
            	<li>
                	<a href="#">월요일 싫어</a>
                	<ul>
                    	<li><a href="#">학교가 이상해</a></li>
                    	<li><a href="#">김비서가 왜그럴까</a></li>
                    </ul>
                </li>
            	<li><a href="#">토요일 내놔</a></li>
            </ul>
        </div>
        <div class="slide">
        	<ul>
            	<li></li>
            	<li></li>
            	<li></li>
            </ul>
        </div>
        <div class="content">
        	<div class="notice">
            	<h3 class="title">공지사항</h3>
                <p><a href="#">첫번째 게시물</a></p>
                <p><a href="#">두번째 게시물</a></p>
                <p><a href="#">세번째 게시물</a></p>
            </div>
        	<div class="gallery">
            	<h3 class="title">갤러리</h3>
                <ul>
                	<li><a href="#"><img src="https://img.insight.co.kr/static/2018/09/15/700/747cl3tq51cz06846r5u.jpg" alt="이미지1" /></a></li>
                	<li><a href="#"><img src="https://img.insight.co.kr/static/2018/09/15/700/747cl3tq51cz06846r5u.jpg" alt="이미지2" /></a></li>
                	<li><a href="#"><img src="https://img.insight.co.kr/static/2018/09/15/700/747cl3tq51cz06846r5u.jpg" alt="이미지3" /></a></li>
                </ul>
            </div>
        	<div class="banner">
            	<h3 class="title">배너</h3>
                <img src="https://img.insight.co.kr/static/2018/09/15/700/747cl3tq51cz06846r5u.jpg" alt="배너" />
            </div>
        </div>
    </div>
</body>
</html>