seokju-na/slide.html

## slide.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Slide</title>
	<style>
		body{
			margin: 0px;
			font-size:16pt;
			font-weight: bold;
		}
		#nav{
			position: fixed;
			width: 200px;
			height:100%;
			left:0px;

			color:white;
			background-color: #111;
		}
		#main{
			position: fixed;
			width:100%;
			height:100%;
			left:200px;
		}
		#icon-close{
			border-bottom: 1px solid #666;
		}
		.icon{
			padding-top:10px;
			padding-left:10px;
			width: 30px;
			height: 30px;
            cursor: pointer;
		}
		ul{
			padding-left: 0px;
			margin:0px;
		}
		li{
			list-style: none;
			padding-left: 10px;
			height: 45px;
			line-height: 45px;
			vertical-align: middle;

			border-bottom: 1px solid #666;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="nav">
			<div id="icon-close">
				<img id="closeBtn" class="icon" src="close.png">
			</div>
			<ul>
				<li>HTML</li>
				<li>CSS</li>
				<li>JavaScript</li>
			</ul>
		</div>
		<div id="main">
			<div id="icon-menu">
				<img id="openBtn" class="icon" src="menu.png" alt="">
				채호경의 쓰리쿠션
			</div>
			<div id="con">
				<img src="kwebfighting.png" alt="">
			</div>
		</div>
	</div>

	<script>
        var $menu = document.getElementById('nav');
        var $main = document.getElementById('main');

        var $closeMenuBtn = document.getElementById('closeBtn');
        var $openMenuBtn = document.getElementById('openBtn');

        function closeMenu() {
            $menu.style.display = 'none';
            $main.style.left = '0';
        }

        function openMenu() {
            $menu.style.display = 'block';
            $main.style.left = '200px';
        }

        $closeMenuBtn.addEventListener('click', closeMenu);
        $openMenuBtn.addEventListener('click', openMenu);
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Slide</title>
	<style>
	body{
	margin: 0px;
	font-size:16pt;
	font-weight: bold;
	}
	#nav{
	position: fixed;
	width: 200px;
	height:100%;
	left:0px;

	color:white;
	background-color: #111;
	}
	#main{
	position: fixed;
	width:100%;
	height:100%;
	left:200px;
	}
	#icon-close{
	border-bottom: 1px solid #666;
	}
	.icon{
	padding-top:10px;
	padding-left:10px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	}
	ul{
	padding-left: 0px;
	margin:0px;
	}
	li{
	list-style: none;
	padding-left: 10px;
	height: 45px;
	line-height: 45px;
	vertical-align: middle;

	border-bottom: 1px solid #666;
	}
	</style>
	</head>
	<body>
	<div id="wrapper">
	<div id="nav">
	<div id="icon-close">
	<img id="closeBtn" class="icon" src="close.png">
	</div>
	<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	</ul>
	</div>
	<div id="main">
	<div id="icon-menu">
	<img id="openBtn" class="icon" src="menu.png" alt="">
	채호경의 쓰리쿠션
	</div>
	<div id="con">
	<img src="kwebfighting.png" alt="">
	</div>
	</div>
	</div>

	<script>
	var $menu = document.getElementById('nav');
	var $main = document.getElementById('main');

	var $closeMenuBtn = document.getElementById('closeBtn');
	var $openMenuBtn = document.getElementById('openBtn');

	function closeMenu() {
	$menu.style.display = 'none';
	$main.style.left = '0';
	}

	function openMenu() {
	$menu.style.display = 'block';
	$main.style.left = '200px';
	}

	$closeMenuBtn.addEventListener('click', closeMenu);
	$openMenuBtn.addEventListener('click', openMenu);
	</script>
	</body>
	</html>