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

박강산·2021년 8월 10일

대구AI스쿨 - 개발일지

목록 보기

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

네이버 게임 실습 - 네이버 게임 오른쪽 영역

공간을 만드는 태그(div 태그 등)에는 글자를 넣지 않고, 글자 태그(h 태그 등)에 글을 넣음
flex-wrap: wrap 속성 설정 시, 부모 태그 영역 안에서 자식 태그 영역 끼리 줄 바꿈 속성을 적용시킴. 이 속성이 없으면, 두 영역이 같은 줄에서 나타남 (부모 태그보다 가로 크기가 클 경우에만)
rank-section 영역의 txt-wrap 영역의 여백 값을 원문과 비슷하게 수정함 (자식 태그 margin 값에서 부모 태그 margin 값으로 설정)
rank-section 영역의 count-wrap 영역을 원문과 비슷하게 수정함 (text-align: left, font-style: italic, left 값 제거 적용)
overflow: hidden 속성을 적용하면 자식 태그 까지 적용이 되기 때문에, 정확한 해당 영역에 속성을 설정해줘야함
news-section 영역의 li 영역의 말줄임 표시와 굵기 설정을 위해, span 태그를 자식 태그로 만들어서 속성을 설정하였음
right-banner 속성을 따로 만들어, 배너를 삽입하였음
game-footer-section 영역의 속성을 따로 설정하기 위해, 별도의 class 를 설정하여 'ⓒ NAVER Corp.' 영역을 추가하였음

HTML 문서

<body>
	<main role="main" id="game-main">		
		<div class="game-container game-flex-between">		
			<div class="right">
				<div id="visitor-section" class="right-section">
					<div class="title-wrap game-flex-between">
						<h2>최근 방문</h2>
						<a href="#">MY라운지 이동</a>
					</div>

					<div class="right-section-body">					
						<div class="text-wrap">
							<p>관심있는 게임을 검색해보세요.</p>

							<div class="input-wrap game-flex-start">
								<input type="" placeholder="라운지 검색">
								<button type="button"></button>
							</div>
						</div>
					</div>
				</div>

				<div id="popular-section-1" class="right-section rank-section">
					<div class="title-wrap game-flex-between">
						<h2>인기 게임 라운지 TOP5</h2>
						<a href="#">더보기</a>
					</div>

					<div class="right-section-body">						
						<ol>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">1</span>

									<div class="up-and-down-wrap">
										<div class="equal"></div>
									</div>
								</div>

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>리그 오브 레전드</h3>
									<span class="genre">MOBA</span>
								</div>
							</li>

							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">2</span>

									<div class="up-and-down-wrap">
										<span class="up">1</span>
									</div>
								</div>

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>로스트아크</h3>
									<span class="genre">핵앤슬래시 MMORPG</span>
								</div>
							</li>

							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">3</span>

									<div class="up-and-down-wrap">
										<span class="down">1</span>
									</div>
								</div>

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>FIFA 온라인 4</h3>
									<span class="genre">스포츠</span>
								</div>
							</li>

							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">4</span>

									<div class="up-and-down-wrap">
										<div class="equal"></div>
									</div>
								</div>

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>배틀그라운드</h3>
									<span class="genre">서바이벌 슈팅</span>
								</div>
							</li>

							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">5</span>

									<div class="up-and-down-wrap">
										<div class="equal"></div>
									</div>
								</div>

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>던전앤파이터</h3>
									<span class="genre">벨트 스크롤 액션</span>
								</div>
							</li>													
						</ol>

						<p class="time">2021.08.10 업데이트</p>
					</div>
				</div>

				<div id="popular-section-2" class="right-section rank-section">
					<div class="title-wrap game-flex-between">
						<h2>급상승 게임 라운지 TOP5</h2>
						<a href="#">더보기</a>
					</div>

					<div class="right-section-body">						
						<ol>
							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">1</span>
								</div>

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>이터널 리턴</h3>
									<span class="genre">전략 기반 서바이벌</span>
								</div>
							</li>

							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">2</span>
								</div>

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>드래곤라자EX</h3>
									<span class="genre">RPG</span>
								</div>
							</li>

							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">3</span>
								</div>

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>마비노기</h3>
									<span class="genre">MMORPG</span>
								</div>
							</li>

							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">4</span>
								</div>

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>패스 오브 엑자일</h3>
									<span class="genre">액션 RPG</span>
								</div>
							</li>

							<li class="game-flex-start">
								<div class="count-wrap">
									<span class="count">5</span>
								</div>

								<div class="image-wrap">
									<img src="https://via.placeholder.com/55">
									<i class="chk"></i>
								</div>

								<div class="txt-wrap">
									<h3>좀비고등학교</h3>
									<span class="genre">호러 슈팅</span>
								</div>
							</li>													
						</ol>

						<p class="time">2021.08.10 16:00 업데이트</p>
					</div>
				</div>

				<div id="news-section" class="right-section">
					<div class="title-wrap game-flex-between">
						<h2>e스포츠 주요 뉴스</h2>
						<a href="#">더보기</a>
					</div>

					<div class="right-section-body">
						<ul>
							<li><a href="#"><span>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</span></a></li>
							<li><a href="#"><span>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</span></a></li>
							<li><a href="#"><span>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</span></a></li>
							<li><a href="#"><span>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</span></a></li>
							<li><a href="#"><span>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</span></a></li>
							<li><a href="#"><span>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</span></a></li>
							<li><a href="#"><span>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</span></a></li>
							<li><a href="#"><span>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</span></a></li>
							<li><a href="#"><span>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</span></a></li>
							<li><a href="#"><span>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</span></a></li>
						</ul>
					</div>				
				</div>

				<div id="week-section" class="right-section">
					<div class="title-wrap game-flex-between">
						<h2>이번 주 신생 라운지</h2>
					</div>

					<div class="right-section-body">
						<ul>
							<li>
								<a href="#" class="game-flex-start">
									<img src="https://via.placeholder.com/128x72">
									<div class="txt-wrap">
										<h3>하데스 리테일 에디션</h3>
										<span>액션,콘솔</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#" class="game-flex-start">
									<img src="https://via.placeholder.com/128x72">
									<div class="txt-wrap">
										<h3>하데스 리테일 에디션</h3>
										<span>액션,콘솔</span>
									</div>
								</a>
							</li>							
						</ul>
					</div>				
				</div>

				<div class="right-banner game-shadow">
					<a href="#">
						<img src="https://via.placeholder.com/357x200">
					</a>
				</div>

				<div id="game-footer-section">
					<a href="#" class="footer-after">네이버 이용약관</a>
					<a href="#" class="footer-after">네이버 게임 운영정책</a>
					<a href="#" class="footer-after">개인정보처리 방침</a>
					<a href="#" class="footer-after">네이버 게임 고객센터</a>
					<a href="#" class="footer-after">서비스 소개 및 제휴 안내</a>
					<a href="#" class="footer-last">ⓒ NAVER Corp.</a>
				</div>
			</div>
		</div>
	</main>
</body>

CSS 문서 1 - style.css

#game-main .right {
	width: 358px;
}

.right-section {
	background-color: #ffffff;
	box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
	border-radius: 12px;

	padding: 30px;
	margin-bottom: 24px;
}

.right-section .title-wrap h2 {
	font-size: 17px;
	font-weight: 400;
}

.right-section .title-wrap a {
	font-size: 13px;
	font-weight: 400;
	color: #444;
}

.right-section .right-section-body {
	margin-top: 20px;
}

#visitor-section .text-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#visitor-section .text-wrap p {
	font-size: 13px;
	color: #9da5b6;
	text-align: center;

	margin-top: 20px;
}

#visitor-section .text-wrap .input-wrap {
	overflow: hidden;
	position: relative;
	width: 250px;
	height: 44px;
	background-color: #f5f6fa;
	border-radius: 12px;

	margin-top: 18px;
}

#visitor-section .text-wrap .input-wrap input {
	width: calc(100% - 44px);
	height: 100%;
	background-color: transparent;

	padding: 10px 16px;
	border: none;

	font-size: 15px;
}	

#visitor-section .text-wrap .input-wrap input:focus {
	outline: none;
}

#visitor-section .text-wrap .input-wrap button {
	width: 44px;
	height: 100%;
	background-color: grey;
}

.rank-section .right-section-body li {
	margin-bottom: 16px;
}

.rank-section .right-section-body li:after {
	content: '';
	width: 14px;
	height: 14px;
	background-color: grey;
}

.rank-section .right-section-body li:last-child {
	margin-bottom: 0;
}

.rank-section .right-section-body li .count-wrap{
	position: relative;
	width: 25px;
	text-align: left;
	margin-right: 5px;
}

.rank-section .right-section-body .count-wrap .count{
	font-size: 17px;
	font-weight: 700;
	font-style: italic;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap {
	position: absolute;
    bottom: -13px;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap .equal{
	display: inline-block;
	width: 5px;
	height: 3px;
	background-color: grey;
	margin-left: 3px;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap .up {
	color: red;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap .up:before {
	background-color: red;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap .down{
	color: blue;	
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap .down:before {
	background-color: blue;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap span {
	font-size: 10px;
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap span:before {
	content: '';
	display: inline-block;
	position: relative;
	width: 7px;
	height: 3px;
	top: -2px;
	margin-right: 1px;
}

.rank-section .right-section-body .image-wrap {
	position: relative;
	width: 55px;
	height: 55px;
}

.rank-section .right-section-body .image-wrap img {
	position: absolute;
	width: 100%;	
	height: 100%;
	border-radius: 12px;
}

.rank-section .right-section-body .image-wrap .chk{
	position: absolute;
	width: 21px;
	height: 21px;
	background-color: grey;
	border-radius: 50%;

	top: -2px;
	right: -2px;
}

.rank-section .right-section-body .txt-wrap {
	margin-left: 14px;
	margin-right: 10px;
}

.rank-section .right-section-body .txt-wrap h3 {
	width: 175px;
	font-size: 15px;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rank-section .right-section-body .txt-wrap .genre {
	font-size: 13px;
	color: #999;
}

.rank-section .right-section-body .time {
	margin-top: 12px;
	font-size: 13px;
	color: #999;
}

#news-section .right-section-body ul {
	padding-right: 10px;
}

#news-section .right-section-body ul li {
	margin-bottom: 5px;
}

#news-section .right-section-body ul li:nth-child(1){
	font-weight: bold;
}

#news-section .right-section-body ul li:nth-child(2){
	font-weight: bold;
}

#news-section .right-section-body ul li:last-child {
	margin-bottom: 0;
}

#news-section .right-section-body ul span {
	display: block;

	width: 98%;
	font-size: 15px;
	line-height: 25px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#news-section .right-section-body ul span:before {
	content: '';
	position: relative;
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #9da5b6;

	top: -5px;
    margin-right: 5px;
}

#week-section li {
	margin-bottom: 16px;
}

#week-section li:last-child {
	margin-bottom: 0;
}

#week-section img {
	width: 128px;
	height: 72px;
	border-radius: 8px;

	margin-right: 10px;
}

#week-section .txt-wrap h3 {
	font-size: 15px;
}

#week-section .txt-wrap span {
	font-size: 13px;
	color: #999999;
}

#game-main .right .right-banner {
	overflow: hidden;
	width: 357px;
	height: 200px;
	border-radius: 12px;

	margin-bottom: 24px;
}

#game-main .right .right-banner a {
	display: block;
	width: 100%;
	height: 100%;
}

#game-main .right .right-banner img {
	width: 100%;
	height: 100%;
}

#game-footer-section a {
	display: inline-block;
	font-size: 12px;
	color: #666;
	letter-spacing: -1px;
}

#game-footer-section .footer-after:after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 1px 10px 0;
	background-color: #ddd;
	vertical-align: top;
}

#game-footer-section .footer-last {
	font-weight: bold;
}

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

오늘 진행한 실습 과정에서, li 태그 말줄임 속성이 적용되지 않음

해결방법

li 태그에 ellipsis 속성을 적용하니, 말줄임 표시가ㅅ 아니라 hidden 속성만 적용이 되었음, 여러가지로 적용해보아도 적용이 되지 않아 span 태그를 따로 넣어서 적용하니 말줄임 표시가 적용이 되었음.

학습 소감

오늘은 어제에 이어서 네이버 게임 사이트 카피캣 실습을 마무리 하였음. 실습 과정 중에 li 태그에 말줄임 속성을 적용하고자 하였는데, 적용이 되지 않아 span 태그를 이용하여 속성을 설정하여 마무리 하였음. 분명, li 태그에도 말줄임 속성이 적용이 될건데 되지 않아 의문이었음. 어떻게 또다른 태그를 넣어서 적용은 했지만, 혹시나 내가 놓친 부분이 있는지 좀 더 확인해봐야 할 것 같음

박강산

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

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

대구AI스쿨 - 개발일지

학습한 내용

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

네이버 게임 실습 - 네이버 게임 오른쪽 영역

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

해결방법

학습 소감

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

Dev log - 33, 네이버 이스포츠 카피캣 실습 #1

0개의 댓글