Dev log - 41, 유튜브 카피캣 실습 #1

박강산·2021년 8월 26일
0

대구AI스쿨 - 개발일지

목록 보기
41/44

학습한 내용

유튜브 실습 - 기본 세팅

  • body 태그 안의 내용들이 브라우저 축소로 인해 망가지지 않도록 wrapper 라는 자식 태그를 만들어서 min-width: 1320px 적용

HTML 문서

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>유튜브 튜토리얼</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

CSS 문서

/* Default CSS */
* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	background-color: #212121;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
}

img {
	vertical-align: middle;
}

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;
}

.flex-align-between {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

.flex-align-start {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
}

.flex-align-end {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: stretch;
}

유튜브 실습 - 유튜브 상단 영역

  • 트위치 페이지와 비슷한 레이아웃 형식 (상단바와 왼쪽 영역 fixed, 왼쪽 영역과 오른쪽 영역은 각각의 스크롤바, 차이점은 트위치 페이지와 다르게 오른쪽 영역 스크롤바가 상단바 포함)

  • 큰 영역부터 만드는데, 왼쪽 영역에 스크롤바를 추가할 때 내용들이 망가지기 때문에, 스크롤 영역과 내용 영역을 나눔 (실습에서는 부모인 nav 태그에 스크롤을, 자식인 div 태그에 내용을 넣음)

    왼쪽 영역의 너비 값인 width: 240px 속성에서, 스크롤바 크기를 뺀 값인 width: 225px 속성을 자식인 div 태그에 설정

    scroll 속성은 스크롤을 항상 유지, auto 속성은 내용이 영역을 넘어갈 때 스크롤 생성

HTML 문서

<body>			
	<div id="wrapper">
		<nav id="youtube-top-nav">
			<div class="youtube-top-wrap flex-align-between">
				<div class="nav-left flex-align-start">
					<button type="button" class="btn-menu"></button>
					<h1>
						<a href="#">
							<img src="https://via.placeholder.com/90x20">
						</a>
					</h1>
				</div>

				<div class="nav-center flex-align-start">
					<div class="search-wrap flex-align-start">
						<input type="text" placeholder="검색">
						<button type="button" class="btn-search"></button>
					</div>

					<button class="btn-voice"></button>
				</div>

				<div class="nav-right flex-align-end">
					<button type="button" class="btn-menu btn-menu-1"></button>
					<button type="button" class="btn-menu btn-menu-2"></button>
					<a href="#" class="btn-login">로그인</a>
				</div>
			</div>			
		</nav>
        
		<nav id="youtube-left-nav">
			<div id="youtube-left-content">

    		</div>
		</nav>

		<main id="youtube-main" role="main">
        
		</main>        
	</div>
</body>

CSS 문서 1 - style.css

#youtube-top-nav {
	position: fixed;

	width: 100%;
	height: 56px;
	background-color: #212121;

	padding: 0 16px;
}

#youtube-top-nav .nav-left {
	height: 56px;
}

#youtube-top-nav .nav-left .btn-menu {
	width: 24px;
	height: 24px;
	background-color: yellow;
}

#youtube-top-nav .nav-left h1 {
	margin-left: 16px;
}

#youtube-top-nav .nav-left h1 img {
	width: 90px;
	height: 20px;
}

#youtube-top-nav .nav-right {
	height: 56px;
}

#youtube-top-nav .nav-right .btn-menu {
	width: 40px;
	height: 40px;
	margin-right: 16px;
}

#youtube-top-nav .nav-right .btn-menu.btn-menu-1 {
	background-color: grey;
}

#youtube-top-nav .nav-right .btn-menu.btn-menu-2 {
	background-color: yellow;
}

#youtube-top-nav .nav-right .btn-login {
	display: inline-block;
	border: solid 1px #3ea6ff;
	padding: 10px 12px 8px;
	font-size: 14px;

	color: #3ea6ff;
}

#youtube-top-nav .nav-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

#youtube-top-nav .nav-center .search-wrap {
	width: 640px;
	height: 30px;
}

#youtube-top-nav .nav-center .search-wrap input {
	width: calc(100% - 65px);
	height: 30px;
	border: solid 1px grey;
	background-color: #212121;

	color: #ffffff;
	padding: 2px 6px;

	font-size: 14px;
}

#youtube-top-nav .nav-center .search-wrap .btn-search {
	width: 65px;
	height: 30px;
	border: solid 1px grey;
	background-color: grey;
}

#youtube-top-nav .nav-center .btn-voice {
	width: 24px;
	height: 24px;
	background-color: blue;

	margin-left: 16px;
}

/* 왼쪽 영역  */
#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: gray;
}

/* 오른쪽 영역  */
#youtube-main {
	position: absolute;
	left: 240px;
	top: 56px;
	right: 0;
	bottom: 0;
	background-color: gray;
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들

  • 없음

해결방법

  • 없음

학습 소감

  • 오늘은 트위치 페이지 카피캣 실습을 마무리 하고, 유튜브 페이지 카피캣 실습을 진행하였음. 레이아웃 형식은 트위치 페이지와 비슷하나, 상단부 영역이 오른쪽 영역 스크롤바에 영향을 받는점이 달랐음.

    그리고, 오늘은 왼쪽 영역을 미리 작업하였는데, 저번 트위치 페이지에서 스크롤바 속성을 적용했다가 내용물이 뒤틀렸었음. 때문에, 오늘은 미리 스크롤과 내용 영역을 따로 구분지어 width 값을 설정하는 것으로 작성하였음. 오른쪽 영역은 따로 작성하지 않았는데 혹시나 내용물이 뒤틀린다면 오른쪽 영역도 비슷하게 작성하면 해결될 것 같음.

    다음 영역부터는 지정된 학습이 아닌 자습 학습이기 때문에, 종종 학습을 하는 형태로 계속 진행할 예정임.

profile
박강산
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.
이전 포스트

Dev log - 40, Reset, Normalize CSS, CSS 변수 #1

다음 포스트

Dev log - 42, 유튜브 카피캣 실습 #2

0개의 댓글