20151013 코딩2

<!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;}
</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>
        </section>
        <aside>
        </aside>
    </div>
    <script>
        function change(c){
            var src = "http://lorempixel.com/940/300/" + c;
            var hdr = document.getElementById("h");
            hdr.style.backgroundImage = "url(" + src + ")";
        }
    </script>
</body>
</html>