💻 학습 내용
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 role="main" id="youtube_main">
</main>
</div>
</body>
</html>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 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;
width: 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;
top: 56px;
bottom: 0;
left: 0;
background-color: #212121;
}
/*왼쪽 사이드 메뉴*/
#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;
}📝 마무리
💛 유튜브 카피캣을 오늘 시작하였다. 메인 페이지를 카피캣 하는데 오늘은 대충 큰 틀만 작성하는 부분이었다.
큰 틀만 대충 작성하는 부분이라서 크게 어려운 부분은 없었다.
position을 이용하여 공간의 크기를 설정했다.
