개발일지 32일차

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

기관이 요청한 내용을 바탕으로 IA 작성 역할분담

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

학습내용

• 트위치 nav

  twitch.html

<nav>
		<div class="nav-wrap">
			<div class="nav-left">
				<h1 class="logo">
					<a href="#">
						<img src="https://via.placeholder.com/24x28">
					</a>
				</h1>
				<ul>
					<li><a href="#">탐색</a></li>
					<li><a href="#">e스포츠</a></li>
					<li><a href="#">음악</a></li>
				</ul>
				<div class="more">
					<a href="#">더보기</a>
				</div>
			</div>

			<div class="nav-center">
				<div class="search-wrap">
					<input type="text" placeholder="검색" style="color: #ffffff;">
					<button class="btn-search"></button>
				</div>
			</div>

			<div class="nav-right">
				<div class="mark-wrap">
					<i class="icon-mark"></i>
					<span class="alarm">44</span>
				</div>
				<a href="#" class="btn-login">로그인</a>
				<a href="#" class="btn-purple">회원가입</a>
				<button class="btn-profile"></button>
			</div>
		</div>
	</nav>

style.css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
	width: 100%;
	height: 100%;
}
body {
	background-color: #0e0e10;
}
ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
}
img	{
	vertical-align: top;
}
input {
	outline: none;
	border: none;
}
button {
	outline: none;
	border: none;
	background: transparent;
}
h1, h2, h3, h4, h5, h6, p, span, input, button, a {
	color: #ffffff;
}
.btn-purple {
	background-color: #9147ff;
	color: #ffffff;
}
.font-purple {
	color: #9147ff;
}
/* 상단 nav 영역 */
/* fixed같은 3차원에서는 width값을 넣어줘야 레이어가 틀어지지 않는다 */
nav {
	position: fixed;
	width: 100%;
	height: 50px;
	background-color: #0e0e10;
	padding: 0 15px;
}
nav .nav-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
nav .nav-wrap .nav-left {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
nav .nav-wrap .nav-left .logo {
}
nav .nav-wrap .nav-left .logo a {
}
nav .nav-wrap .nav-left .logo a img {
	width: 24px;
	height: 28px;
}
nav .nav-wrap .nav-left ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
nav .nav-wrap .nav-left ul li {
	height: 50px;
	font-size: 20px;
	padding: 0 20px;
}
nav .nav-wrap .nav-left ul li a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 50px;
}
nav .nav-wrap .nav-left ul li:first-child {
	padding-right: 0;
}
nav .nav-wrap .nav-left ul li:first-child a:after {
	position: relative;
	display: inline-block;
	content: '';
	width: 1px;
	height: 30px;
	background-color: grey;
	margin-left: 20px;
	top: 8px;
}
nav .nav-wrap .nav-left .more a {
	display: block;
	height: 50px;
	font-size: 20px;
	line-height: 50px;
	padding-left: 20px;
}
/* nav의 정중앙에 위치하도록 정렬 */
nav .nav-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
nav .nav-center .search-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 380px;
	height: 36px;
	background-color: yellow;
	overflow: hidden;
	border-radius: 5px;
}
nav .nav-center .search-wrap input {
	width: calc(100% - 34px);
	height: 100%;
	background-color: grey;
}
nav .nav-center .search-wrap .btn-search {
	width: 34px;
	height: 100%;
	background-color: darkgrey;
}
nav .nav-right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}
nav .nav-right .mark-wrap {
	position: relative;
}
nav .nav-right .mark-wrap .icon-mark {
	display: block;
	width: 20px;
	height: 20px;
	background-color: yellow;
	cursor: pointer;
}
nav .nav-right .mark-wrap .alarm {
	position: absolute;
	border-radius: 15px;
	background-color: red;
	color: #ffffff;
	font-size: 14px;
	padding: 4px 8px 2px;
	top: -12px;
	right: -20px;
}
nav .nav-right .btn-login {
	width: 53px;
	height: 30px;
	background-color: grey;
	border-radius: 5px;
	margin-left: 25px;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
}
nav .nav-right .btn-purple {
	width: 53px;
	height: 30px;
	border-radius: 5px;
	margin-left: 10px;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
}
nav .nav-right .btn-profile {
	cursor: pointer;
	width: 20px;
	height: 20px;
	background-color: #ffffff;
	margin-left: 10px;
}

결과

어려웠던 점과 해결방법

nav 영역이 fixed같은 3차원에서는 width값을 넣어줘야지만 레이어가 틀어지지 않기 때문에 이 부분을 알아둬야했다.
flex의 space-between을 적용한 경우 임의로 flex가 적용된 요소의 위치를 정렬할 수 없다. 이러한 경우 위치를 이동할 요소에 position:absolute를 적용하여 top,left,bottom,right로 위치를 이동할 수 있다.

아쉬웠던 점

해외 사이트여서 그런지 최신 기술을 사용하여 카피캣하는데 어려움이 많아서 눈대중으로 맞춰 작업을 진행한 것이 아쉬웠다.