20151013 코딩3(공주대)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>코딩2</title>
<style>
body {
margin:0;
}
#wrap {
margin:0 auto;
width:940px;
}
header {
border-radius:20px 20px 0 0;
width:100%;
height:300px;
background-color:yellow;
background-image:url(http://lorempixel.com/940/300);
}
nav {
width:100%;
height:50px;
background-color:rgb(0,0,0);
}
nav > a {
font-size:25px;
color:white;
text-decoration:none;
height: 50px;
line-height:50px;
padding:0 10px;
display:inline-block;
}
nav > a:hover { background-color:red;}
section, aside { min-height:400px; float:left; }
section { width:640px;}
aside { width:300px; background-color:green;}
.hello { width:620px; padding:10px; }
.hello > h1 { font-size: 28px; margin-bottom:0;}
.hello > p { font-size: 18px; line-height: 150%;}
.hello > p > img { border-radius:10px; margin: 5px 5px 0 0;}
.video { clear:both; }
.video > div { width:320px;height:240px;float:left;}

.slide { clear:both; }

.slide > div {
    margin: 20px 0;
    width: 640px;
    height: 300px;
    position: relative;
    overflow: hidden;
}
.slide > div > img {
    width: 640px;
    height: 300px;
    position: absolute;
    left: 0;
    top: 0;
}
</style>
</head>
<body>
<div id="wrap">
<header id="h"></header>
<nav>
<a href="#rest" onmouseover="change('food')">HOME</a>
<a href="#rest" onmouseover="change('cats')">HTML</a>
<a href="#rest" onmouseover="change('sports')">STYLE</a>
<a href="#rest" onmouseover="change('people')">JAVASCRIPT</a>
<a href="#rest" onmouseover="change('city')">공주대학교</a>
</nav>
<section>
<article class="hello">
<h1>환영합니다.</h1>
<p><img align="left" src="http://lorempixel.com/100/100/technics">웹을 활용한 코딩 배우기 시간에 오신것을 환영합니다. 이 강의는 국립공주대학교 학생들을 위해 개설되었으며 웹 개발 언어를 통해 컴퓨터 코딩을 이해하고 이를 통해 디지털 세계로의 접근을 보다 깊이 하기 위해 개설되었습니다.</p>
</article>
<article class="video">
<div><iframe width="320" height="240" src="https://www.youtube.com/embed/av_QX3uSTR0" frameborder="0" allowfullscreen></iframe></div>
<div><iframe width="320" height="240" src="https://www.youtube.com/embed/Rxn9_LwZ_6A" frameborder="0" allowfullscreen></iframe></div>
</article>
<article class="slide">
    <div>
        <img src="http://lorempixel.com/640/300/nightlife">
        <img src="http://lorempixel.com/640/300/business">
        <img src="http://lorempixel.com/640/300/technics">
    </div>
</article>
</section>
<aside>
</aside>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function change(c){
var src = "http://lorempixel.com/940/300/" + c;
$("#h").css("background-image","url(" + src + ")");
}

//슬라이드
$(".slide > div > img").click( function(){
    $(this).animate({"left":"640px"},2000);
} );
</script>
</body>
</html>