html 기본 레이아웃(20150908)

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2015년 9월 8일</title>
	<style>
		body {
			/*background-color: black;*/
			/*background-color: #000000;*/
			/*background-color: #000;*/
			background-color: rgb(0,0,0);
			margin: 0;
		}
		.wrap {
			margin: 0 auto;
			width: 800px;
			min-height: 600px;
			background-color: rgb(255,255,255);
			border-radius: 20px 20px 0 0;
		}
		header {
			width: 100%;
			height: 300px;
			background-image: url(http://lorempixel.com/800/300);
			border-radius: 20px 20px 0 0;
		}
		nav {
			width: 100%;
			height: 50px;
			background-color: #186cb2;
		}
		nav a {
			color: white;
			width: auto;
			height: 50px;
			font-size: 1.5em;
			line-height: 50px;
			padding: 0 10px;
			display: inline-block;
		}
		nav a:hover {
			background-color: rgb(255,0,255);
			color: #000;
		}
		main {
			width: 100%;
			height: 300px;
		}
		main > div {
			float: left;
			width: 400px;
			height: 300px;
		}
		footer {
			clear: both;
			width: 100%;
			height: 50px;
			background-color: #186cb2;
			color: #fff;
			text-align: center;
			line-height: 50px;
		}
		.vlist {
			width: 100%;
			height: 100px;
			background-color: green;
			display: block;
			line-height: 100px;
			color: white;
			text-align: center;
		}
		.vlist:hover {
			background-color: pink;
			color: black;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<header id="hdr"></header>
		<nav>
			<a href="#" onmouseover="bg('food')">HOME</a>
			<a href="#" onmouseover="bg('sports')">HTML</a>
			<a href="#" onmouseover="bg('transport')">CSS</a>
			<a href="#" onmouseover="bg('city')">JavaScript</a>
		</nav>
		<main>
			<div><iframe width="400" height="300" src="https://www.youtube.com/embed/63s8RxqA4GQ" frameborder="0" allowfullscreen></iframe></div>
			<div><iframe width="400" height="300" src="https://www.youtube.com/embed/YhjMkjOHloM" frameborder="0" allowfullscreen></iframe></div>
			<div>
				<a href="javascript:vd('j6wmKhbspAk');" class="vlist">동영상1</a>
				<a href="javascript:vd('mmzTO2PXzY8');" class="vlist">동영상2</a>
				<a href="javascript:vd('TN_10DKCuZk');" class="vlist">동영상3</a>
			</div>
			<div><iframe id="myvideo" width="400" height="300" src="https://www.youtube.com/embed/EqRy77_OOGY" frameborder="0" allowfullscreen></iframe></div>
		</main>
		<footer>
			&copy; 2015 유승열 All Rights Reserved.
		</footer>
	</div>
	<script>
		function bg(c){
			var src = "http://lorempixel.com/800/300/" + c ;
			var h = document.getElementById("hdr");
			h.style.backgroundImage = "url(" + src + ")";
		}
		function vd(v){
			var url="https://www.youtube.com/embed/" + v + "?autoplay=1";
			var i = document.getElementById("myvideo");
			i.src = url;
		}
	</script>
</body>
</html>