8月6日Verlog


学習の内容

NAVERゲーム実習#2


https://game.naver.com/

0. Default


[css]
.game_shadow {
	box-shadow: 0 2px 30px 0 rgba(0 0 0 / 6%);
}

3. Main Left


こうぞう

			<div class="game_main_left">
				
				<div class="banner_left game_shadow"></div>


				<div id="game_section_1" class="game_section"></div>

			</div>

(1) banner left


[html]
				<div class="banner_left game_shadow">
					<a href="#">
						<img src="https://via.placeholder.com/900x120">
					</a>
				</div>
[css]
#game_main .game_main_left .banner_left {
	overflow: hidden;

	width: 900px;
	height: 120px;
	border-radius: 12px;

	margin-bottom: 24px;
}

#game_main .game_main_left .banner_left a {
	display: block;
	width: 100%;
	height: 100%;
}

#game_main .game_main_left .banner_left a img {
	width: 100%;
	height: 100%;
}
  • 領域全体にoverflow: hidden;を適用し、border−radius外のimg領域を非表示処理する.

  • ゲーム設定のデフォルト値の設定


    複数のgameセクションで、cssが繰り返される場合、デフォルト値をタグの親領域に割り当てずにclassとして事前に指定し、サブタグのclassと一致させて、繰り返されるcssを適用する方法.
    [css]
    .game_section {
    	position: relative;
    
    	background-color: #ffffff;
    	border-radius: 12px;
    	box-shadow: 0 2px 30px 0 rgba(0 0 0 / 6%);
    
    	padding: 27px 30px 40px;
    	margin-bottom: 40px;
    }
    
    
    
    .game_section .game_title_wrap {
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    	align-items: center;
    }
    
    .game_section .game_title_wrap h2 {
    	font-size: 19px;
    	font-weight: 900;
    }
    
    
    
    .game_section .game_middle_nav ul {
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: flex-start;
    	align-items: center;
    
    	border-bottom: solid 1px rgba(0, 0, 0, 0.07);
    }
    
    .game_section .game_middle_nav ul li a {
    	display: block;
    
    	border-bottom: solid 3px transparent;
    
    	font-size: 15px;
    	color: #777;
        
    	margin: 14px 28px 0 0;
    	padding-bottom: 12px;
    }
    .game_section .game_middle_nav ul li.active a {
    	border-bottom: solid 3px #000000;
    
    	font-weight: 700;
    	color: #000000;
    }
    
    
    
    .game_section .btn_circle {
    	position: absolute;
    
    	width: 55px;
    	height: 55px;
    	background-color: #ffffff;
    	border-radius: 50%;
    	box-shadow: 0 2px 30px 0 rgba(0 0 0 / 6%);
    
    	bottom: -27.5px;
    
    	/*x축 중앙정렬 공식*/
    	left: 50%;
    	transform: translateX(-50%);
    }
    
    .game_section .btn_circle.icon_arrow {
    	background-color: grey;
    }
    ※idはclassより優先されるため、デフォルト値はclassとして指定され、idで個別にカスタマイズされます.

    (2) game section 1


    [html]
    				<div id="game_section_1" class="game_section">
    					<div class="game_title_wrap">
    						<h2>게임 라운지 인기 글</h2>
    
    						<div class="game_btn_wrap">
    							<a href="#" class="active">전체</a>
    							<a href="#">Joined</a>
    						</div>
    					</div>
    
    
    					<nav class="game_middle_nav">
    						<ul>
    							<li class="active"><a href="#">커뮤니티</a></li>
    							<li><a href="#">공략+</a></li>
    						</ul>
    					</nav>
    
    
    					<ol>
    						<li>
    							<a href="#" class="game_flex_start">
    								<img class="game_thumbnail" src="https://via.placeholder.com/38">
    								<div class="txt_info">
    									<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
    									<div class="source_wrap">
    										<span class="game">FIFA 온라인 4</span>
    										<span class="author">배고픈 끝판왕 2441</span>
    										<span class="level">LV8</span>
    										<span class="rank">9</span>
    									</div>
    								</div>
    								<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
    							</a>
    						</li>
    						<li>
    							<a href="#" class="game_flex_start">
    								<img class="game_thumbnail" src="https://via.placeholder.com/38">
    								<div class="txt_info">
    									<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
    									<div class="source_wrap">
    										<span class="game">FIFA 온라인 4</span>
    										<span class="author">배고픈 끝판왕 2441</span>
    										<span class="level">LV8</span>
    										<span class="rank">9</span>
    									</div>
    								</div>
    								<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
    							</a>
    						</li>
    						<li>
    							<a href="#" class="game_flex_start">
    								<img class="game_thumbnail" src="https://via.placeholder.com/38">
    								<div class="txt_info">
    									<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
    									<div class="source_wrap">
    										<span class="game">FIFA 온라인 4</span>
    										<span class="author">배고픈 끝판왕 2441</span>
    										<span class="level">LV8</span>
    										<span class="rank">9</span>
    									</div>
    								</div>
    								<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
    							</a>
    						</li>
    						<li>
    							<a href="#" class="game_flex_start">
    								<img class="game_thumbnail" src="https://via.placeholder.com/38">
    								<div class="txt_info">
    									<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
    									<div class="source_wrap">
    										<span class="game">FIFA 온라인 4</span>
    										<span class="author">배고픈 끝판왕 2441</span>
    										<span class="level">LV8</span>
    										<span class="rank">9</span>
    									</div>
    								</div>
    								<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
    							</a>
    						</li>
    						<li>
    							<a href="#" class="game_flex_start">
    								<img class="game_thumbnail" src="https://via.placeholder.com/38">
    								<div class="txt_info">
    									<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
    									<div class="source_wrap">
    										<span class="game">FIFA 온라인 4</span>
    										<span class="author">배고픈 끝판왕 2441</span>
    										<span class="level">LV8</span>
    										<span class="rank">9</span>
    									</div>
    								</div>
    								<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
    							</a>
    						</li>
    						<li>
    							<a href="#" class="game_flex_start">
    								<img class="game_thumbnail" src="https://via.placeholder.com/38">
    								<div class="txt_info">
    									<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
    									<div class="source_wrap">
    										<span class="game">FIFA 온라인 4</span>
    										<span class="author">배고픈 끝판왕 2441</span>
    										<span class="level">LV8</span>
    										<span class="rank">9</span>
    									</div>
    								</div>
    								<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
    							</a>
    						</li>
    						<li>
    							<a href="#" class="game_flex_start">
    								<img class="game_thumbnail" src="https://via.placeholder.com/38">
    								<div class="txt_info">
    									<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
    									<div class="source_wrap">
    										<span class="game">FIFA 온라인 4</span>
    										<span class="author">배고픈 끝판왕 2441</span>
    										<span class="level">LV8</span>
    										<span class="rank">9</span>
    									</div>
    								</div>
    								<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
    							</a>
    						</li>
    						<li>
    							<a href="#" class="game_flex_start">
    								<img class="game_thumbnail" src="https://via.placeholder.com/38">
    								<div class="txt_info">
    									<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
    									<div class="source_wrap">
    										<span class="game">FIFA 온라인 4</span>
    										<span class="author">배고픈 끝판왕 2441</span>
    										<span class="level">LV8</span>
    										<span class="rank">9</span>
    									</div>
    								</div>
    								<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
    							</a>
    						</li>
    						<li>
    							<a href="#" class="game_flex_start">
    								<img class="game_thumbnail" src="https://via.placeholder.com/38">
    								<div class="txt_info">
    									<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
    									<div class="source_wrap">
    										<span class="game">FIFA 온라인 4</span>
    										<span class="author">배고픈 끝판왕 2441</span>
    										<span class="level">LV8</span>
    										<span class="rank">9</span>
    									</div>
    								</div>
    								<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
    							</a>
    						</li>
    						<li>
    							<a href="#" class="game_flex_start">
    								<img class="game_thumbnail" src="https://via.placeholder.com/38">
    								<div class="txt_info">
    									<h3>새로운 시즌 EBS시즌 능력치, 선수들입니다</h3>
    									<div class="source_wrap">
    										<span class="game">FIFA 온라인 4</span>
    										<span class="author">배고픈 끝판왕 2441</span>
    										<span class="level">LV8</span>
    										<span class="rank">9</span>
    									</div>
    								</div>
    								<img class="blog_thumbnail" src="https://via.placeholder.com/90x50">
    							</a>
    						</li>
    					</ol>
    
    
    					<a href="#" class="btn_circle icon_arrow"></a>					
    				</div>
    [css]
    #game_section_1 .game_title_wrap .game_btn_wrap a {
    	font-size: 14px;
    	font-weight: 700;
    	color: #9da5b6;
    }
    
    #game_section_1 .game_title_wrap .game_btn_wrap a.active {
    	color: #000000;
    }
    
    #game_section_1 .game_title_wrap .game_btn_wrap a:last-child {
    	margin-left: 14px;
    }
    
    
    
    #game_section_1 ol li {
    	height: 64px;
    	border-bottom: solid 1px rgba(0, 0, 0, 0.03);
    }
    
    #game_section_1 ol li a {
    	height: 100%;
    }
    
    #game_section_1 ol li a .game_thumbnail {
    	border-radius: 8px;
    
    	margin-right: 10px;
    }
    
    #game_section_1 ol li a .txt_info {
    	width: 692px;
    
    	margin-right: 10px;
    }
    
    #game_section_1 .txt_info h3 {
    	font-size: 16px;
    	font-weight: 600;
    
    	margin-bottom: 3px;
    }
    
    #game_section_1 .txt_info .source_wrap {
    	font-size: 13px;
    }
    
    #game_section_1 .txt_info .source_wrap .game {
    	font-weight: 500;
    	color: #444;
    
    	margin-right: 5px;
    }
    
    #game_section_1 .txt_info .source_wrap .author {
    	color: #868894;
    
    	margin-right: 5px;
    }
    
    #game_section_1 .txt_info .source_wrap .level {
    	color: #868894;
    
    	margin-right: 5px;
    }
    
    #game_section_1 .txt_info .source_wrap .rank {
    	color: #868894;
    }
    
    #game_section_1 .blog_thumbnail {
    	border-radius: 8px;
    }