index.htmlโ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>์ ํ๋ธ ํํ ๋ฆฌ์ผ</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<nav id="youtube-top-nav">
</nav>
<nav id="youtube-left-nav">
<div id="youtube-left-content">
</div>
</nav>
<main id="youtube-main" role="main">
</main>
</div>
</body>
</html>
style.cssโ
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
widows: 100%;
height: 100%;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: top;
}
button {
background-color: transparent;
border: none;
}
input {
outline: none;
border: none;
}
input:focus {
outline: none;
}
#wrapper {
position: relative;
widows: 100%;
height: 100%;
min-width: 1320px;
}
/* ์๋จ ๋ฉ๋ด */
#youtube-top-nav {
position: fixed;
width: 100%;
height: 56px;
background-color: #212121;
}
#youtube-left-nav {
overflow-y: auto;
overflow-x: hidden;
position: fixed;
width: 240px;
background-color: #212121;
top: 56px;
left: 0;
bottom: 0;
}
/* ์ผ์ชฝ ์ฌ์ด๋ ๋ฉ๋ด */
#youtube-left-content {
position: absolute;
width: 225px;
height: 100%;
background-color: grey;
}
/* ์ ํ๋ธ ๋ฉ์ธ */
#youtube-main {
position: absolute;
left: 240px;
top: 56px;
right: 0;
bottom: 0;
background-color: grey;
}
๊ฒฐ๊ณผ๋ฌผ ๐
