개발일지 24일차

학습 내용

• 네이버 게임 왼쪽 파트

  game.html

<div id="game-section-2" class="game-section">
					
					<div class="section-title-wrap">
						<h2 class="font-19">게임 라운지 인기글</h2>
				
						<a href="#" class="more">더보기</a>	
					</div>

					<div class="section-body-wrap">
						<div class="image-txt-wrap">
							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>
							</div>
						</div>

						<ul>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">라이엇게임즈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">라이엇게임즈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">라이엇게임즈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">라이엇게임즈</h3>
									<span class="source">인벤</span>
								</a>
							</li>
						</ul>
					</div>
				</div>


				<div id="game-section-3" class="game-section">
					
					<div class="section-title-wrap">
						<h2 class="font-19">오리지널 시리즈</h2>
					</div>

					<div class="section-body-wrap">
						<div class="image-txt-wrap">
							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">인벤</span>
								</div>
							</div>
						</div>					
					</div>

					<a href="#" class="btn-circle icon-plus"></a>
				</div>


				<div id="game-section-4" class="game-section">
					
					<div class="section-title-wrap">
						<h2 class="font-19">인기게임 영상</h2>
					</div>

					<div class="section-body-wrap">
						<ol>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon-play"></i>
										<span class="time">01:06:26</span>
									</div>
									<div class="image-txt">
										<h3>담원기아 vs rng 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그오브레전드 네이버 스포츠</span>
											<span class="count">17,131</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon-play"></i>
										<span class="time">01:06:26</span>
									</div>
									<div class="image-txt">
										<h3>담원기아 vs rng 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그오브레전드 네이버 스포츠</span>
											<span class="count">17,131</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon-play"></i>
										<span class="time">01:06:26</span>
									</div>
									<div class="image-txt">
										<h3>담원기아 vs rng 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그오브레전드 네이버 스포츠</span>
											<span class="count">17,131</span>
										</div>
									</div>
								</a>
							</li>

							<li class="game-m-t-20">
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon-play"></i>
										<span class="time">01:06:26</span>
									</div>
									<div class="image-txt">
										<h3>담원기아 vs rng 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그오브레전드 네이버 스포츠</span>
											<span class="count">17,131</span>
										</div>
									</div>
								</a>
							</li>

							<li class="game-m-t-20">
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon-play"></i>
										<span class="time">01:06:26</span>
									</div>
									<div class="image-txt">
										<h3>담원기아 vs rng 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그오브레전드 네이버 스포츠</span>
											<span class="count">17,131</span>
										</div>
									</div>
								</a>
							</li>

							<li class="game-m-t-20">
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon-play"></i>
										<span class="time">01:06:26</span>
									</div>
									<div class="image-txt">
										<h3>담원기아 vs rng 1세트</h3>
										<div class="game-flex-between">
											<span class="source">리그오브레전드 네이버 스포츠</span>
											<span class="count">17,131</span>
										</div>
									</div>
								</a>
							</li>


						</ol>			
					</div>
				</div>


				<div id="game-section-5" class="game-section">
					
					<div class="section-title-wrap">
						<h2 class="font-19">이번 달 출시 게임</h2>

						<a href="#" class="info">일정은 게임사 사정으로 변경될 수 있습니다.</a>
					</div>


					<nav class="section-middle-nav">
						<ul>
							<li><a href="#" class="active">금 05.28</a></li>
							<li><a href="#">토 05.29</a></li>
							<li><a href="#">일 05.30</a></li>
							<li><a href="#">월 05.31</a></li>
							<li><a href="#">화 06.01</a></li>
							<li><a href="#">수 06.02</a></li>
							<li><a href="#">목 06.03</a></li>
						</ul>
					</nav>

					<div class="section-body-wrap">
						
						<ol class="game-flex-between">
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/190x120">
										<span class="badge open">오픈</span>
									</div>
									<div class="txt-wrap">
										<h3>타이틀</h3>
										<p>2021.05.28</p>
										<span>닌텐도 스위치</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/190x120">
										<span class="badge">사전예약</span>
									</div>
									<div class="txt-wrap">
										<h3>타이틀</h3>
										<p>2021.05.28</p>
										<span>닌텐도 스위치</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/190x120">
										<span class="badge">사전예약</span>
									</div>
									<div class="txt-wrap">
										<h3>타이틀</h3>
										<p>2021.05.28</p>
										<span>닌텐도 스위치</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/190x120">
										<span class="badge">사전예약</span>
									</div>
									<div class="txt-wrap">
										<h3>타이틀</h3>
										<p>2021.05.28</p>
										<span>닌텐도 스위치</span>
									</div>
								</a>
							</li>
						</ol>

					</div>
					


					<a href="#" class="btn-circle icon-plus"></a>
				</div>


				<div id="game-section-6" class="game-section">
					
					<div class="section-title-wrap">
						<h2 class="font-19">급상승 공식게임 카페</h2>
					</div>

					<div class="section-body-wrap">
						<div class="image-txt-wrap">
							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">멤버 412,600</span>
								</div>
							</div>

							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">멤버 412,600</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">멤버 412,600</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">멤버 412,600</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">멤버 412,600</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">멤버 412,600</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">멤버 412,600</span>
								</div>
							</div>

							<div class="image-txt game-flex-start game-m-t-20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼빼든 엔비디아 보상지급</h3>
									<span class="source">멤버 412,600</span>
								</div>
							</div>
						</div>					
					</div>

					<a href="#" class="btn-circle icon-plus"></a>
				</div>

style.css

.game-section {
	position: relative;
	background-color: #ffffff;
	box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
	border-radius: 12px;
	padding: 27px 30px 40px;
	margin-bottom: 40px;
}
.game-section .section-title-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.game-section .section-title-wrap h2 {
	font-size: 19px;
	font-weight: 400;
}
.game-section .section-middle-nav {
}
.game-section .section-middle-nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.game-section .section-middle-nav li {
}
.game-section .section-middle-nav a {
	display: block;
	padding: 14px;
	border-bottom: solid 3px transparent;
	color: #777;
}
.game-section .section-middle-nav a.active {
	border-bottom: solid 3px #7776ff;
	font-weight: 700;
	color: #7776ff;
}
.game-section .section-body-wrap {
	margin-top: 18px;
}
.game-section .section-body-wrap .image-txt-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.game-section .section-body-wrap .image-txt {
	width: 407.5px;
}
.game-section .section-body-wrap img {
	width: 180px;
	height: 100px;
	border-radius: 8px;
	border: solid 1px rgba(0, 0, 0, .06);
	margin-right: 15px;
}
.game-section .section-body-wrap .txt {
	width: 212px;
}
.game-section .section-body-wrap .title {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	margin-bottom: 3px;
}
.game-section .section-body-wrap .source {
	font-size: 13px;
	color: #999;
}
.game-section .btn-circle {
	position: absolute;
	width: 55px;
	height: 55px;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
	bottom: -27.5px;
	left: 50%;
	transform: translateX(-50%);
}
.game-section .btn-circle.icon-arrow {
	background-color: grey;
}
.game-section .btn-circle.icon-plus {
	background-color: blue;
}
#game-section-1 {
}
#game-section-1 .section-btn-wrap {
}
#game-section-1 .section-btn-wrap a {
	font-size: 14px;
	color: #9da5b6;
	font-weight: 700;
}
#game-section-1 .section-btn-wrap a.active {
	color: #7776ff;
}
#game-section-1 .section-btn-wrap a:last-child {
	margin-left: 14px;
}
#game-section-1 ol {
}
#game-section-1 ol li  {
	padding: 10px 0;
	border-bottom: solid 1px rgba(0, 0, 0, .03);
}
#game-section-1 ol li a {
}
#game-section-1 ol li .game-thumbnail {
	border-radius: 8px;
	margin-right: 10px;
}
#game-section-1 ol li .txt-info {
	width: 690px;
	margin-right: 10px;
}
#game-section-1 ol li .txt-info h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 3px;
}
#game-section-1 ol li .txt-info .source-wrap {
}
#game-section-1 ol li .txt-info .source-wrap .game {
	font-size: 13px;
	color: #858894;
	margin-right: 5px;
}
#game-section-1 ol li .txt-info .source-wrap .author {
	font-size: 13px;	
	color: #858894;
	margin-right: 5px;
}
#game-section-1 ol li .txt-info .source-wrap .level {
	font-size: 13px;
	color: #858894;
	margin-right: 5px;
}
#game-section-1 ol li .txt-info .source-wrap .rank {
	font-size: 13px;
	color: #858894;
}
#game-section-1 ol li .blog-thumbnail {
	border-radius: 8px;
}
#game-section-2 {
}
#game-section-2 .section-title-wrap .more {
	font-size: 13px;
	font-weight: 400;
}
#game-section-2 .section-body-wrap {
}
#game-section-2 .section-body-wrap ul {
	margin-top: 25px;
}
#game-section-2 .section-body-wrap li {
	margin-bottom: 11px;
}
#game-section-2 .section-body-wrap li:last-child {
	margin-bottom: 0;
}
#game-section-2 .section-body-wrap a {
}
#game-section-2 .section-body-wrap ul .title {
	width: 776px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#game-section-2 .section-body-wrap ul .source {	
}
#game-section-3 .section-body-wrap .image-txt .category {
	display: block;
	font-size: 13px;
	color: #7776ff;
	margin-bottom: 3px;
}
#game-section-4 ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
} 
#game-section-4 li {
}
#game-section-4 a {
	display: block;
}
#game-section-4 .image-wrap {
	position: relative;
	overflow: hidden;
	width: 263px;
	height: 148px;
	border-radius: 8px;
}
#game-section-4 .image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}
#game-section-4 .image-wrap .icon-play {
	position: absolute;
	width: 25px;
	height: 25px;
	background-color: grey;
	left: 10px;
	bottom: 10px;
}
#game-section-4 .image-wrap .time {
	position: absolute;
	background-color: rgba(0, 0, 0, .5);
	border-radius: 6px;
	padding: 2px 6px;
	color: #ffffff;
	font-size: 14px;
	right: 10px;
	bottom: 10px;
}
#game-section-4 .section-body-wrap .image-txt {
	width: 100%;
	margin-top: 10px;
}
#game-section-4 .image-txt h3 {
	font-size: 15px;
}
#game-section-4 .image-txt .source,
#game-section-4 .image-txt .count {
	font-size: 13px;
	color: #999;
}
#game-section-5 .section-title-wrap .info {
	font-size: 13px;
	color: #999999;
}
#game-section-5 .section-body-wrap .image-wrap {
	position: relative;
	width: 190px;
	height: 120px;
}
#game-section-5 .section-body-wrap .image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
	border: none;
	margin-right: 0;
}
#game-section-5 .section-body-wrap .image-wrap .badge {
	position: absolute;
	display: inline-block;
	color: #ffffff;
	background-color: #4e41db;
	font-size: 15px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 8px;
	top: -5px;
	left: -5px;
}
#game-section-5 .section-body-wrap .image-wrap .badge.open {
	background-color: red;
}
#game-section-5 .section-body-wrap .txt-wrap {
	margin-top: 12px;
}
#game-section-5 .section-body-wrap .txt-wrap h3 {
	font-size: 15px;
	font-weight: 600;
}
#game-section-5 .section-body-wrap .txt-wrap p {
	font-size: 13px;
	font-weight: 500;
}
#game-section-5 .section-body-wrap .txt-wrap span {
	font-size: 13px;
	color: grey;
}
#game-section-6 .section-body-wrap img {
	width: 80px;
	height: 80px;
	border-radius: 30px;
}
#game-section-6 .section-body-wrap .txt {
	width: 300px;
}
#game-section-6 .section-body-wrap .category {
	font-size: 15px;
}
#game-section-6 .section-body-wrap .title {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: #666;
}

결과

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

중복되는 코드값을 디폴트값으로 적용하여 하는 것이 어려웠다.

해결한 방법

반복 학습을 통한 이해

학습 소감

중복되는 구간을 파악하고 이를 디폴트로 적용하여 가독성을 높이는 작업이 아직은 어색하지만 확실히 코드가 간결해지고 가독성을 높이는데 도움이 되는 것 같다.