개발일지 23일차

학습 내용

• 네이버 게임 상단 / 왼쪽

  game.html

<header id="game-header">
		
		<div class="game-container">
			
			<nav class="game-flex-between">
				<div class="left game-flex-start">
					<h1>
						<a href="#">GAME</a>
					</h1>
					<ul class="game-flex-start">
						<li><a href="#">GAME</a></li>
						<li><a href="#">e스포츠</a></li>
						<li><a href="#">PC게임</a></li>
					</ul>
				</div>

				<div class="right game-flex-end">
					<div class="search-wrap game-flex-start">
						<input type="text" placeholder="라운지, 게시물 검색">
						<button type="button" class="btn-search"></button>
					</div>

					<div class="ticket-wrap">
						<a href="#" class="btn-ticket"></a>
						<p class="bubble-msg">응모티켓 받고 꿀템 도전!</p>
					</div>

					<a href="#" class="btn-login">로그인</a>	
				</div>
			</nav>
		

			<div class="game-events-wrap game-flex-between">
				<div class="event-wrap one">
					<div class="event-title-wrap">
						<span>HOT</span>
						<h2>
							디아블로 이모탈<br>
							알파 테스트 참가 이벤트
						</h2>
					</div>
				</div>

				<div class="event-wrap two">
					<div class="event-title-wrap">
						<span>HOT</span>
						<h2>
							디아블로 이모탈<br>
							알파 테스트 참가 이벤트
						</h2>
					</div>
				</div>

				<div class="event-wrap three">
					<div class="event-title-wrap">
						<span>HOT</span>
						<h2>
							디아블로 이모탈<br>
							알파 테스트 참가 이벤트
						</h2>
					</div>
				</div>
			</div>
		</div>
	</header>


	<main role="main" id="game-main">
		
		<div class="game-container game-flex-between">
			
			<div class="left">
				
				<div class="left-banner game-shadow">
					<a href="#">
						<img src="https://via.placeholder.com/900x120">
					</a>
				</div>


				<div id="game-section-1" class="game-section">
					
					<div class="section-title-wrap">
						<h2 class="font-19">게임 라운지 인기글</h2>

						<div class="section-btn-wrap">
							<a href="#" class="active">전체</a>
							<a href="#">Joined</a>
						</div>
					</div>


					<nav class="section-middle-nav">
						<ul>
							<li><a href="#" class="active">공략</a></li>
							<li><a href="#">커뮤니티</a></li>
						</ul>
					</nav>


					<ol>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>롤 패치</h3>
									<div class="source-wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이재경</span>
										<span class="level">LV8</span>
										<span class="rank">3</span>
									</div>
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>롤 패치</h3>
									<div class="source-wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이재경</span>
										<span class="level">LV8</span>
										<span class="rank">3</span>
									</div>
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>롤 패치</h3>
									<div class="source-wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이재경</span>
										<span class="level">LV8</span>
										<span class="rank">3</span>
									</div>
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>롤 패치</h3>
									<div class="source-wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이재경</span>
										<span class="level">LV8</span>
										<span class="rank">3</span>
									</div>
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>롤 패치</h3>
									<div class="source-wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이재경</span>
										<span class="level">LV8</span>
										<span class="rank">3</span>
									</div>
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>롤 패치</h3>
									<div class="source-wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이재경</span>
										<span class="level">LV8</span>
										<span class="rank">3</span>
									</div>
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>롤 패치</h3>
									<div class="source-wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이재경</span>
										<span class="level">LV8</span>
										<span class="rank">3</span>
									</div>
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>롤 패치</h3>
									<div class="source-wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이재경</span>
										<span class="level">LV8</span>
										<span class="rank">3</span>
									</div>
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>롤 패치</h3>
									<div class="source-wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이재경</span>
										<span class="level">LV8</span>
										<span class="rank">3</span>
									</div>
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
						<li>
							<a href="#" class="game-flex-start">
								<img src="https://via.placeholder.com/38" class="game-thumbnail">
								<div class="txt-info">
									<h3>롤 패치</h3>
									<div class="source-wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이재경</span>
										<span class="level">LV8</span>
										<span class="rank">3</span>
									</div>
								</div>
								<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
							</a>
						</li>
					</ol>


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

			</div>

		</div>

	</main>

style.css

/* 네이버 게임 페이지 */
/* default */
.game-container {
	width: 1280px;
	margin: 0 auto;
}
.game-flex-between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.game-flex-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.game-flex-end {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}
.game-flex-center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.game-shadow {
	box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
}
.game-p-30 {
	padding: 30px;
}
.font-17 {
	font-size: 17px;
}
.font-19 {
	font-size: 19px;
}
.font-400 {
	font-weight: 400;
}
#game-body {
	background-color: #f8f9fd;
}
/* game-header 영역 */
#game-header {
	width: 100%;
	background-color: #4e41db;
}
#game-header nav {
	height: 60px;
}
#game-header nav .left {
}
#game-header nav .left h1 {
	font-size: 20px;
}
#game-header nav .left h1 a {
	color: #ffffff;
}
#game-header nav .left ul {
}
#game-header nav .left ul li {
}
#game-header nav .left ul li a {
	color: #9da5b6;
	font-size: 18px;
}
#game-header nav .left ul li a:before {
	display: inline-block;
	content: '';
	width: 1px;
	height: 14px;
	border-radius: .5px;
	background-color: #9da5b6;
	margin: 0 12px;
}
#game-header nav .right {
}
#game-header nav .right .search-wrap {
	overflow: hidden;
	width: 300px;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, .28);
}
#game-header nav .right .search-wrap input {
	width: calc(100% - 38px);
	height: 38px;
	background-color: transparent;
	padding: 10px 12px 9px 14px;
	border: none;
	color: #ffffff;
	font-size: 15px;
}
#game-header nav .right .search-wrap input:focus {
	outline: none;
}
#game-header nav .right .search-wrap .btn-search {
	width: 38px;
	height: 38px;
	background-color: transparent;
	border: none;
}
#game-header nav .right .ticket-wrap {
	position: relative;
	width: 40px;
	height: 40px;
	margin-left: 10px;
}
#game-header nav .right .ticket-wrap .btn-ticket {
	display: block;
	width: 40px;
	height: 40px;
	border: solid 1px #ffffff;
}
#game-header nav .right .ticket-wrap .bubble-msg {
	position: absolute;
	width: 185px;
	background-color: #697183;
	border-radius: 8px;
	padding: 10px 12px;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
	color: #ffffff;
	font-weight: 600;
	z-index: 100;
}
#game-header nav .right .btn-login {
	width: 60px;
	border: solid 1px hsla(0, 0%, 80%, .3);
	border-radius: 8px;
	padding: 7px 0 6px;
	margin-left: 10px;
	font-size: 12px;
	color: #ffffff;
	text-align: center;
}
#game-header .game-events-wrap {
	padding: 80px 0;
}
#game-header .game-events-wrap .event-wrap {
	position: relative;
	width: 407px;
	height: 264px;
	border-radius: 40px;
	top: 0;
	transition: top linear 0.3s;
}
#game-header .game-events-wrap .event-wrap:hover {
	top: -20px;
}
#game-header .game-events-wrap .event-wrap.one {
	background-color: rgb(112, 104, 236);
}
#game-header .game-events-wrap .event-wrap.two {
	background-color: rgb(69, 39, 39);
}
#game-header .game-events-wrap .event-wrap.three {
	background-color: rgb(122, 177, 181);
}
#game-header .game-events-wrap .event-wrap .event-title-wrap {
	position: absolute;
	left: 30px;
	bottom: 30px;
	color: #ffffff;
}
#game-header .game-events-wrap .event-wrap .event-title-wrap span {
	display: inline-block;
	border: solid 1px #ffffff;
	border-radius: 10px;
	padding: 4px 8px 2px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 15px;
}
#game-header .game-events-wrap .event-wrap .event-title-wrap h2 {
	font-size: 20px;
}
#game-main .game-container {
	align-items: stretch;
}
#game-main .left {
	width: 900px;
	height: 2000px;
	background-color: yellow;
}
/* 이 영역을 벗어나는 모든 오브젝트들은 hidden처리해야 radius가 적용가능 */
#game-main .left .left-banner {
	overflow: hidden;
	width: 900px;
	height: 120px;
	border-radius: 12px;
	margin-bottom: 24px;
}
#game-main .left .left-banner a {
	display: block;
	width: 100%;
	height: 100%;
}
#game-main .left .left-banner img {
	width: 100%;
	height: 100%;
}
.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;
}
.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-wrap: wrap;
	align-items: center;
	border-bottom: solid 1px rgba(0, 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 .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-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, 0.03);
}
#game-section-1 ol li a {
}
#game-section-1 ol li .game-thumbnail {
	margin-right: 10px;
	border-radius: 8px;
}
#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;
}

결과

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

구조를 만들기에 앞서 반복되는 구조들은 default값으로 class를 생성하여 불필요한 코드분량을 줄이는데 이 방법이 아직 익숙치 않다.
#game-main .left .left-banner 부분에서 radius가 적용되지 않았는데 이 부분을 해결하는 것이 어려웠다.
클래스 game-section와 id game-section-1로 구분하여 다른 css 작업을하여 커스텀화한 부분의 이해가 부족하여 학습하기 어려웠다.

해결한 방법

default값 생성은 익숙해질 때까지 적응의 시간이 필요할 것 같다.
#game-main .left .left-banner 부분에서 radius가 적용되지 않는 부분에 대해서는 overflow:hidden값을 적용하여 범위를 벗어나는 오브젝트들을 숨겨 radius가 적용되도록 하였다.
클래스 game-section와 id game-section-1로 구분하여 다른 css 작업을하여 커스텀화한 부분의 강의 부분을 복습하였다.

학습 소감

기존의 네이버 구조를 반복학습하여 다소 지루했는데 네이버게임 사이트의 구조는 조금 달라서 재밌었다.