Dev log - 31, 네이버 게임 카피캣 실습 #3

박강산·2021년 8월 9일
0

대구AI스쿨 - 개발일지

목록 보기
31/44

학습한 내용

네이버 게임 실습 - 기본 세팅

HTML 문서

<!DOCTYPE html>
<html>
<head>                 
	<meta charset="utf-8">
	<title>네이버</title>

	<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>

CSS 문서

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

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000000;
}

img {
	vertical-align: middle;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}

.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}

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

.game-m-t-20 {
	margin-top: 20px;
}
	
.font-17 {
	font-size: 17px;
}

.font-19 {
	font-size: 19px;
}

.font-400 {
	font-weight: 400;
}

네이버 게임 실습 - 네이버 게임 왼쪽 영역 (2)

  • game-section-2 영역 밑 광고 배너 영역을 추가하였고, margin 값을 따로 변경해주었음

  • span 태그와 같이 inline 속성을 가진 태그들은 inline-block, block 속성으로 변경해야 상하배치 가능

  • game-section-5 영역의 badge open 영역을 badge cbt 로 변경하고, 색상을 변경함

  • game-section-6 영역이 실습 페이지와 달라, 원문과 game-section-2 영역을 참고하여 수정함

HTML 문서

<body>
	<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-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">뜨거운 감자 '블리자드', "디아블로 2: 레저렉션 연기 없다"</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">뜨거운 감자 '블리자드', "디아블로 2: 레저렉션 연기 없다"</h3>
									<span class="source">디스이즈게임</span>
								</div>	
							</div>
						</div>

						<ul>
							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>									
									<span class="source">인벤</span>
								</a>
							</li>

							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">인벤</span>
								</a>
							</li>

							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">인벤</span>
								</a>
							</li>

							<li>
								<a href="#" class="game-flex-between">
									<h3 class="title">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">인벤</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div class="left-banner game-shadow">
					<a href="#">
						<img src="https://via.placeholder.com/900x120">
					</a>
				</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">
								<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">
								<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">
								<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>
					</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/263x148px">										
										<i class="icon-play"></i>
										<span class="time">57:59</span>
									</div>

									<div class="image-txt">
										<h3>T1-GEN 3세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">57,566</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148px">										
										<i class="icon-play"></i>
										<span class="time">57:59</span>
									</div>

									<div class="image-txt">
										<h3>T1-GEN 3세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">57,566</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148px">										
										<i class="icon-play"></i>
										<span class="time">57:59</span>
									</div>

									<div class="image-txt">
										<h3>T1-GEN 3세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">57,566</span>
										</div>
									</div>
								</a>
							</li>

							<li class="game-m-t-20">
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148px">										
										<i class="icon-play"></i>
										<span class="time">57:59</span>
									</div>

									<div class="image-txt">
										<h3>T1-GEN 3세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">57,566</span>
										</div>
									</div>
								</a>
							</li>

							<li class="game-m-t-20">
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148px">										
										<i class="icon-play"></i>
										<span class="time">57:59</span>
									</div>

									<div class="image-txt">
										<h3>T1-GEN 3세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">57,566</span>
										</div>
									</div>
								</a>
							</li>

							<li class="game-m-t-20">
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/263x148px">										
										<i class="icon-play"></i>
										<span class="time">57:59</span>
									</div>

									<div class="image-txt">
										<h3>T1-GEN 3세트</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 e스포츠</span>
											<span class="count">57,566</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">월 08.09.</a></li>
							<li><a href="#">화 08.10.</a></li>
							<li><a href="#">수 08.11.</a></li>
							<li><a href="#">목 08.12.</a></li>
							<li><a href="#">금 08.13.</a></li>
							<li><a href="#">토 08.14.</a></li>
							<li><a href="#">일 08.15.</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">사전예약</span>
									</div>
									
									<div class="txt-wrap">
										<h3>인피니트 라그랑주</h3>
										<p>2021.06.13 ~ 2021.08.17</p>
										<span>Android,iOS,PC</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.06.13 ~ 2021.08.17</p>
										<span>Android,iOS,PC</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.06.13 ~ 2021.08.17</p>
										<span>Android,iOS,PC</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/190x120">
										<span class="badge cbt">CBT모집</span>
									</div>
									
									<div class="txt-wrap">
										<h3>산나비</h3>
										<p>2021.07.30 ~ 2021.08.12</p>
										<span>PC</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>
						<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/60x60">
								<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/60x60">
								<div class="txt">
									<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/60x60">
								<div class="txt">
									<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/60x60">
								<div class="txt">
									<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/60x60">
								<div class="txt">
									<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/60x60">
								<div class="txt">
									<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/60x60">
								<div class="txt">
									<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/60x60">
								<div class="txt">
									<h3 class="title">플레이어언노운스 배틀그라운드</h3>
									<span class="source">배그 서포터즈 뇨룡입니다. 오늘도 다들 치킨먹어봅시닭!</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>
</body>

CSS 문서 1 - style.css

#game-section-2 {
	margin-bottom: 25px;
}

#game-section-2 .section-title-wrap .more {
	font-size: 13px;
	font-weight: 400;
}

#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 ul .title {
	width: 776px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#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 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: 12px;
}

#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.cbt {
	background-color: turquoise;
}

#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-title-wrap .more {
	font-size: 13px;
	font-weight: 400;
}

#game-section-6 .section-body-wrap img {
	width: 60px;
	height: 60px;
	border-radius: 15px;
}

#game-section-6 .section-body-wrap .txt {
	width: 330px;
}

#game-section-6 .section-body-wrap .title {
	display: block;

	font-size: 15px;
	letter-spacing: -0.3px;

	color: #444444;
}

#game-section-6 .section-body-wrap .source {
	font-size: 13px;
	letter-spacing: -0.3px;

	color: #444444;
}

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

  • 없음

해결방법

  • 없음

학습 소감

  • 오늘은 어제에 이어서 네이버 게임 페이지 왼쪽 영역 카피캣 실습을 마무리 하였음. 오늘은 game-section-6 영역이 영역이 실습과 많이 달라서 직접 영역을 수정해보았음.

    기존에 game-section-2 에서 만들었던 '더보기' 영역을 추가하고, 이미지의 크기와 border-radius 값을 수정하였음. 그리고, 기존에 3줄로 구성되었던 것을 2줄로 만드는 것이 필요했는데, game-section-2 에서 2줄로 구성했던 영역이 이미 있어서, 원문과 비교하여 값을 수정하는 것으로 완성할 수 있었음. 내가 만들고자 했던 모습으로 잘 구성되어서, 앞으로도 다른 부분이 나오면 스스로 많이 경험을 해보아야겠음.

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

Dev log - 30, 네이버 게임 카피캣 실습 #2

다음 포스트

Dev log - 32, 네이버 게임 카피캣 실습 #4

0개의 댓글