8월 6일 Velog

학습한 내용

네이버 게임 실습 #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 section 기본값 설정

여러 game section에서 css가 반복적으로 등장할 때 class로 기본값을 미리 지정하고 해당 태그에 class를 부여하는 방법 대신에 가장 상위의 부모 영역에 특정 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;
}

※ class보다 id가 우선순위가 높기 때문에 기본값은 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;
}