8월 10일 Velog

류영서·2021년 8월 10일
대구AI스쿨
0

학습한 내용

네이버 게임 실습 #4

https://game.naver.com/

4. Main Right

구조

[hmtl]

			<div class="game_main_right">
				
				<div id="visitor_section" class="right_section"></div>

				<div id="popular_section_1" class="right_section rank_section"></div>

				<div id="popular_section_2" class="right_section rank_section"></div>

				<div id="game_news_section" class="right_section"></div>

				<div id="game_week_section" class="right_section"></div>

				<div id="game_footer_section"></div>

			</div>

class : right section 기본값

[css]

.right_section {
	background-color: #ffffff;
	box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.06);
	border-radius: 12px;	

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

.right_section .title_wrap h2 {
	font-size: 17px;
	font-weight: 900;
}

.right_section .title_wrap a {
	font-size: 13px;
	font-weight: 400;
	color: #444;
}

.right_section .right_section_body {
	margin-top: 20px;
}

(1) visitor section

[html]

				<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="txt_wrap">						
							<p>관심있는 게임을 검색해보세요.</p>
                            
							<div class="input_wrap">
								<input type="text" placeholder="라운지 검색">
								<button type="button" class="btn_search"></button>
							</div>
						</div>						
					</div>
				</div>

[css]

#visitor_section .right_section_body .txt_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#visitor_section .right_section_body .txt_wrap p {
	font-size: 13px;
	color: #9da5b6;

	text-align: center;

	margin-top: 20px;
}

#visitor_section .right_section_body .txt_wrap .input_wrap {
	position: relative;
	overflow: hidden;

	width: 250px;
	height: 44px;
	background-color: #f5f6fa;
	border-radius: 12px;

	margin-top: 18px;
}

#visitor_section .right_section_body .txt_wrap .input_wrap input {
	position: absolute;

	width: calc(100% - 44px);
	height: 100%;
	background-color: transparent;
	border: none;

	padding: 10px 16px;
}

#visitor_section .right_section_body .txt_wrap .input_wrap input:focus {
	outline: none;
}

#visitor_section .right_section_body .txt_wrap .input_wrap input::placeholder {
	font-size: 15px;
	color: grey;
}

#visitor_section .right_section_body .txt_wrap .input_wrap .btn_search {
	position: absolute;

	width: 44px;
	height: 100%;
	background-color: grey;

	right: 0;
}
  • 내부에 있는 내용을 일렬(y축 방향)로 중앙 정렬하고자 할 때
    ※ wrap을 적용하지 않으면 일렬(x축 방향)로 정렬되어 resize된다.

[html]

				<div id="popular_section_1" class="right_section rank_section">
					<div class="title_wrap game_flex_between">
						<h2>인기 게임 라운지 TOP</h2>

						<a href="#" class="more">더보기</a>
					</div>

					<div class="right_section_body">
						<ol>
							<li>
								<a href="#" 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>
								</a>
							</li>
							<li>
								<a href="#" 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>
								</a>
							</li>
							<li>
								<a href="#" 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>
								</a>
							</li>
							<li>
								<a href="#" 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>
								</a>
							</li>
							<li>
								<a href="#" 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">벨트 스크롤 액션 RPG</span>
									</div>
								</a>
							</li>
						</ol>

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

[html]

				<div id="popular_section_2" class="right_section rank_section">
					<div class="title_wrap game_flex_between">
						<h2>급상승 게임 라운지 TOP5</h2>

						<a href="#" class="more">더보기</a>
					</div>

					<div class="right_section_body">
						<ol>
							<li>
								<a href="#" 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>
								</a>
							</li>
							<li>
								<a href="#" 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>바람의나라: 연</h3>
										<span class="genre">롤플레잉</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" 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">RPG</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" 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">액션</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" 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>
								</a>
							</li>
						</ol>

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

class : rank section 기본값

[css]

.rank_section .right_section_body ol li {
	margin-bottom: 16px;
}

.rank_section .right_section_body ol li:last-child {
	margin-bottom: 0;
}

.rank_section .right_section_body ol li a {
	width: 100%;
}

.rank_section .right_section_body ol li a:after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: lightgrey;
}

.rank_section .right_section_body .count_wrap {
	position: relative;

	width: 25px;
}

.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; -> flex의 영향을 받지 않는다.

	top: 11px;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .equal {
	display: inline-block; -> margin-left 적용시키기 위해서

	width: 5px;
	height: 2px;
	background-color: lightgrey;

	margin-left: 3px;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .up {
	font-size: 10px;
	color: red;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .up:before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 2px;
	background-color: red;

	margin: 0 1px 2px 0;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .down {
	font-size: 10px;
	color: blue;
}

.rank_section .right_section_body .count_wrap .up_and_down_wrap .down:before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 2px;
	background-color: blue;

	margin: 0 1px 2px 0;
}

.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: #4e41db;
	border-radius: 50%;

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

.rank_section .right_section_body .txt_wrap {
	margin: 0 50px 0 14px;
}

.rank_section .right_section_body .txt_wrap h3 {
	width: 135px;

	font-size: 15px;
	line-height: 19px;

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

.rank_section .right_section_body .txt_wrap .genre {
	font-size: 13px;
	line-height: 15px;
	color: #999;
}

.rank_section .right_section_body .time {
	margin-top: 13px;

	font-size: 13px;
	color: #999;
}
  • count_wrap 배치하는 방법
  1. flex의 center 정렬로 count와 up_and_down_wrap이 같이 센터 정렬로 된다.
  2. count만 센터 정렬하고 싶을 때 -> up_and_down_wrap에 position으로 absolute를 준다. (부모 태그에 position으로 relative를 설정해야 부모 영역 기준을 자리이동할 수 있다.) 이러면 flex의 영향을 받지 않는다.
  3. equal은 up, down과 크기가 다르기 때문에 equal에 따로 margin-left를 줘서 위치 이동시킨다.

(4) game news section

[html]

				<div id="game_news_section" class="right_section">
					<div class="title_wrap game_flex_between">
						<h2>e스포츠 주요 뉴스</h2>

						<a href="#" class="more">더보기</a>
					</div>

					<div class="right_section_body">
						<ul>
							<li><a href="#"><strong>페이커-쇼메이커가 생각하는 초시계의 가치</strong></a></li>
							<li><a href="#"><strong>'1위 리브 샌박·농심 3위 DK 4위 T1' 2021 LCK 서머 8주차 순위</strong></a></li>
							<li><a href="#">[LPL Report] '한 번도 경험해보지 못한 성적' iG, 내년엔 다를까?</a></li>
							<li><a href="#">[LPL] 정규시즌 1위 일등공신 ‘도인비’, 9주차 MVP 선정</a></li>
							<li><a href="#">[LCK CL] T1 역습 허용해 마지막 경기 패배, 프레딧-한화생명은 마지막 기회 얻어</a></li>
							<li><a href="#">[LCK 서머] PO 순위 결정 짓는 메인 매치 '담원 vs 리브', '농심 vs 젠지'</a></li>
							<li><a href="#">[LCS] 팀 리퀴드-EG, 승자조 2R 진출...'퍽즈'의 C9는 패자조行</a></li>
							<li><a href="#">[오피셜] 이스타V5, 스웨덴 게임단 NIP와 합병 발표</a></li>
							<li><a href="#">[영상 인터뷰] '페이트' 유수혁 "처음 해보는 공동 1등…뜻깊다"</a></li>
							<li><a href="#">[LCK CL] PO 2R 직행 티켓의 주인공, 젠지와 아프리카 프릭스 2군</a></li>
						</ul>
					</div>
				</div>

[css]

#game_news_section ul li {
	margin-bottom: 5px;
}

#game_news_section ul li:last-child {
	margin-bottom: 0;
}

#game_news_section ul li a {
	display: block;
	width: 100%;

	font-size: 16px;

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

	padding-right: 10px;
}

#game_news_section ul li a:before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: grey;

	vertical-align: top;
	margin: 10px 5px 0 0;
}

(5) game week section

[html]

				<div id="game_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/128x74">
									<div class="txt_wrap">
										<h3>리벨 갤럭시</h3>
										<span class="genre">오픈 월드 액션 RPG, PC</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="game_flex_start">
									<img src="https://via.placeholder.com/128x74">
									<div class="txt_wrap">
										<h3>인피니티 킹덤</h3>
										<span class="genre">전력, 모바일</span>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>

[css]

#game_week_section li:first-child {
	margin-bottom: 16px;
}

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

	margin-right: 16px;
}

#game_week_section .txt_wrap h3 {
	font-size: 15px;
}

#game_week_section .txt_wrap .genre {
	font-size: 13px;
	color: #999;
}

[html]

				<div id="game_footer_section">
					<a href="#">네이버 이용약관</a>
					<a href="#">네이버 게임 운영정책</a>
					<a href="#">개인정보처리 방침</a>
					<a href="#">네이버 게임 고객센터</a>
					<a href="#">서비스 소개 및 제휴 안내</a>

					<p>ⓒ NAVER Corp.</p>
				</div>

[css]

#game_footer_section {
	margin-left: 10px;
}

#game_footer_section a {
	display: inline-block;

	font-size: 12px;
	color: #666;
}

#game_footer_section a:after {
	content: "";
	display: inline-block;

	width: 1px;
	height: 11px;
	background-color: #ddd;

	margin: 1px 8px 0;
	vertical-align: top;
}

#game_footer_section p {
	font-size: 12px;
	font-weight: 700;
	color: #666;

	margin-top: 4px;
}

profile
류영서
이전 포스트

8월 9일 Velog

다음 포스트

8월 11일 Velog

0개의 댓글

관련 채용 정보