개발일지 37일차

이재경·2021년 7월 15일

팀별 프로젝트 진행 상황 및 업무

팀원별 스토리 보드 1순위 선정 및 스토리 보드 작성 후 2차 IA 제출

오늘 강의를 통해 프로젝트에 적용한 부분

학습내용

  • 유튜브 상단 영역

    youtube.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 {
	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;
	background-color: #212121;
	top: 56px;
	bottom: 0;
	left: 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;
}

결과

어려웠던 점과 해결방법

아쉬웠던 점

profile
이재경
I'm Closer
이전 포스트

개발일지 36일차

다음 포스트

개발일지 38일차

0개의 댓글