8月10日Verlog


学習の内容

NAVERゲーム実習#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;
}
  • の内容を1列(y軸方向)で中央に揃えます.
    ※wrapを適用しない場合は、一列(x軸方向)に並べてサイズを調整します.

  • (2) popular section 1


    [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>

    (3) popular section 2


    [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導入方法
  • flexの中心ソート、countとup and down wrapは中心ソートです.
  • countだけが中心に立ちたいとき->up and down wrapで絶対位置を与えます.(親範囲基準を移動するには、親ラベルに相対位置を設定する必要があります.)これでflexの影響を受けません.
  • equalはup,downとはサイズが異なるのでequalにもう1つの余白-左を付けて移動させます.
  • (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;
    }
    

    (6) game footer section


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