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

박강산·2021년 8월 6일
0

대구AI스쿨 - 개발일지

목록 보기
30/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;
}

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

  • img 태그를 가지고 있는 부모 태그는 border-radius 속성이 적용되지 않음, 저번 실습과 마찬가지로 overflow: hidden 속성을 적용하면 됨

  • 도면 작업을 할 때, 하나하나 속성을 설정하는 영역은 id 태그로, 공통으로 속성을 설정하는 영역은 class 로 지정. 우선 순위가 id > class 이기 때문에, 후에 id 경로를 지정해주면 적용됨

  • source-wrap 영역에 before 가상 선택자를 사용하여, 글자 중간 마다 있는 점을 표시함, margin 속성을 사용하여 여백을 조절하였음

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-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>[업데이트] PC 13.1 업데이트 패치노트</h3>

									<div class="source-wrap">
										<span class="game">플레이어언노운스 배틀그라운드</span>
										<span class="author">토비</span>
										<span class="level">LV30</span>
										<span class="author-detail">네이버 게임 봇</span>
										<span class="rank">12</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>[업데이트] PC 13.1 업데이트 패치노트</h3>

									<div class="source-wrap">
										<span class="game">플레이어언노운스 배틀그라운드</span>
										<span class="author">토비</span>
										<span class="level">LV30</span>
										<span class="author-detail">네이버 게임 봇</span>
										<span class="rank">12</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>[업데이트] PC 13.1 업데이트 패치노트</h3>

									<div class="source-wrap">
										<span class="game">플레이어언노운스 배틀그라운드</span>
										<span class="author">토비</span>
										<span class="level">LV30</span>
										<span class="author-detail">네이버 게임 봇</span>
										<span class="rank">12</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>[업데이트] PC 13.1 업데이트 패치노트</h3>

									<div class="source-wrap">
										<span class="game">플레이어언노운스 배틀그라운드</span>
										<span class="author">토비</span>
										<span class="level">LV30</span>
										<span class="author-detail">네이버 게임 봇</span>
										<span class="rank">12</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>[업데이트] PC 13.1 업데이트 패치노트</h3>

									<div class="source-wrap">
										<span class="game">플레이어언노운스 배틀그라운드</span>
										<span class="author">토비</span>
										<span class="level">LV30</span>
										<span class="author-detail">네이버 게임 봇</span>
										<span class="rank">12</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>[업데이트] PC 13.1 업데이트 패치노트</h3>

									<div class="source-wrap">
										<span class="game">플레이어언노운스 배틀그라운드</span>
										<span class="author">토비</span>
										<span class="level">LV30</span>
										<span class="author-detail">네이버 게임 봇</span>
										<span class="rank">12</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>[업데이트] PC 13.1 업데이트 패치노트</h3>

									<div class="source-wrap">
										<span class="game">플레이어언노운스 배틀그라운드</span>
										<span class="author">토비</span>
										<span class="level">LV30</span>
										<span class="author-detail">네이버 게임 봇</span>
										<span class="rank">12</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>[업데이트] PC 13.1 업데이트 패치노트</h3>

									<div class="source-wrap">
										<span class="game">플레이어언노운스 배틀그라운드</span>
										<span class="author">토비</span>
										<span class="level">LV30</span>
										<span class="author-detail">네이버 게임 봇</span>
										<span class="rank">12</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>[업데이트] PC 13.1 업데이트 패치노트</h3>

									<div class="source-wrap">
										<span class="game">플레이어언노운스 배틀그라운드</span>
										<span class="author">토비</span>
										<span class="level">LV30</span>
										<span class="author-detail">네이버 게임 봇</span>
										<span class="rank">12</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>	
</body>

CSS 문서 1 - style.css

#game-main .game-container {
	align-items: stretch;
}

#game-main .left {
	width: 900px;
	padding-bottom: 200px;
}

#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;
	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 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 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 .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 li {
	padding: 10px 0;
	border-bottom: solid 1px rgba(0, 0, 0, .03);
}

#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 {
	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 .author:before {
    margin: 5px;
    content: "·";
}

#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 .level:before {
    margin: 5px;
    content: "·";
}

#game-section-1 ol li .txt-info .source-wrap .author-detail {
	font-size: 13px;
	color: #00C79B;
	margin-right: -5px;
}

#game-section-1 ol li .txt-info .source-wrap .author-detail:before {
    color: #858894;
    margin: 5px;
    content: "·";
}

#game-section-1 ol li .txt-info .source-wrap .rank {
	font-size: 13px;
	color: #858894;
}

#game-section-1 ol li .txt-info .source-wrap .rank:before {
    margin: 5px;
    content: "·";
}

#game-section-1 ol li .blog-thumbnail {
	border-radius: 8px;
}

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

  • before 가상 선택자의 여백 조절

해결방법

  • span 태그가 가지고 있는 기본 여백 때문인지, 아니면 CSS 속성 때문인지, 가상 선택자 사용 시에 간격이 넓어서 음수 숫자값을 입력하여 여백을 맞춤

학습 소감

  • 오늘은 어제에 이어서 네이버 게임 메인의 왼쪽 영역 카피캣 실습을 진행하였음. 오늘 실습 과정 중에는 내가 직접 부가 영역을 만들어서 가상 선택자를 이용, 글자 간 점 표시를 넣었음.

    그런데, 각자 가지고 있는 여백 탓인지 간격이 맞지 않아서 설정해두었던 margin 값을 임의로 수정하고, 가상 선택자를 사용한 영역에는 marign 값을 플러스로 설정하여 맞추었음. 실제로 여백을 맞추다보니 생각보다 쉽지 않다는 것을 깨달았고, 더 쉬운 방법이 없는지 확인해 봐야겠음.

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

Dev log - 29, 네이버 게임 카피캣 실습 #1

다음 포스트

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

0개의 댓글