2021.06.25 (네이버 게임 2)

학습한 내용

[네이버 왼쪽 부분 - 게임라운지 인기글]

			<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/38x38" class="game_thumbnail">
								<div class="txt_info">
									<h3>롤 패치</h3>

									<div class="source_wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이상화</span>
										<span class="level">LV8</span>
										<span class="rank">3</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/38x38" class="game_thumbnail">
								<div class="txt_info">
									<h3>롤 패치</h3>

									<div class="source_wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이상화</span>
										<span class="level">LV8</span>
										<span class="rank">3</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/38x38" class="game_thumbnail">
								<div class="txt_info">
									<h3>롤 패치</h3>

									<div class="source_wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이상화</span>
										<span class="level">LV8</span>
										<span class="rank">3</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/38x38" class="game_thumbnail">
								<div class="txt_info">
									<h3>롤 패치</h3>

									<div class="source_wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이상화</span>
										<span class="level">LV8</span>
										<span class="rank">3</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/38x38" class="game_thumbnail">
								<div class="txt_info">
									<h3>롤 패치</h3>

									<div class="source_wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이상화</span>
										<span class="level">LV8</span>
										<span class="rank">3</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/38x38" class="game_thumbnail">
								<div class="txt_info">
									<h3>롤 패치</h3>

									<div class="source_wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이상화</span>
										<span class="level">LV8</span>
										<span class="rank">3</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/38x38" class="game_thumbnail">
								<div class="txt_info">
									<h3>롤 패치</h3>

									<div class="source_wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이상화</span>
										<span class="level">LV8</span>
										<span class="rank">3</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/38x38" class="game_thumbnail">
								<div class="txt_info">
									<h3>롤 패치</h3>

									<div class="source_wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이상화</span>
										<span class="level">LV8</span>
										<span class="rank">3</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/38x38" class="game_thumbnail">
								<div class="txt_info">
									<h3>롤 패치</h3>

									<div class="source_wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이상화</span>
										<span class="level">LV8</span>
										<span class="rank">3</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/38x38" class="game_thumbnail">
								<div class="txt_info">
									<h3>롤 패치</h3>

									<div class="source_wrap">
										<span class="game">리그 오브 레전드</span>
										<span class="author">이상화</span>
										<span class="level">LV8</span>
										<span class="rank">3</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>

#game_main .left {
	width: 900px;
	height: 2000px;

	background-color: yellow;
}

#game_main .left .left_banner {
	width: 900px;
	height: 120px;

	border-radius: 12px;

	overflow: hidden;

	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: 700;
}

.game_section .section_middle_nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	border-bottom: solid 1px rgba(0, 0, 0, 0.07);
}

.game_section .section_middle_nav ul li a {
	display: block;

	color: #777;

	border-bottom: solid 3px transparent;

	padding: 14px;
}

.game_section .section_middle_nav ul li a.active {
	font-weight: 700;
	color: #7776ff;

	border-bottom: solid 3px #7776ff;
}

#game_section_1 .section_title_wrap .section_btn_wrap a {
	font-size: 14px;
	font-weight: 700;
	color: #9da5b6;
}

#game_section_1 .section_title_wrap .section_btn_wrap a.active {
	color: #7776ff;
}

#game_section_1 .section_title_wrap .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 a .game_thumbnail {
	border-radius: 8px;

	margin-right: 10px;
}

#game_section_1 ol li a .txt_info {
	width: 690px;

	margin-right: 10px;
}

#game_section_1 ol li a .txt_info h3 {
	font-size: 16px;
	font-weight: 600;

	margin-bottom: 3px;
}

#game_section_1 ol li a .txt_info .source_wrap .game {
	font-size: 13px;
	color: #858894;

	margin-right: 5px;
}


#game_section_1 ol li a .txt_info .source_wrap .author {
	font-size: 13px;
	color: #858894;

	margin-right: 5px;
}


#game_section_1 ol li a .txt_info .source_wrap .level {
	font-size: 13px;
	color: #858894;

	margin-right: 5px;
}


#game_section_1 ol li a .txt_info .source_wrap .rank {
	font-size: 13px;
	color: #858894;
}

#game_section_1 ol li a .blog_thumbnail {
	border-radius: 8px;
}

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

학습내용 중 어려웠던 점

어려운 내용은 아니지만 기존과 조금 다르게 section부분에 id값과 class값 두개를 적용해서 공통으로 적용되는 부분들은 class를 베이스로 적용하고 해당 section에 적용되는 것은 id값을 적용 하는식으로 하는것은 새로운 방식이라 초반에 헷갈리는 부분이 있었습니다.

해결방법

아직은 전체를 보는 눈이 부족하지만 코드를 많이 줄이기 위해선 font나 이런 스타일적인 부분을 class로 빼는것도 중요하고 앞으로는 페이지 전체를 보고 레이아웃이나 배치작업의 공통을 보고 공통 class를 만들어두고 필요한 부분은 선택자 우선순위를 통해 수정 작업 하는 형식으로 해야겠습니다.

학습소감

똑같은 페이지를 작성하고나면 코드 자체가 다른경우도 있지만 공통 class를 이용해서 코드를 많이 줄일수 있는 등 다양하게 코딩 작업을 할수 있다는것을 알게 되었습니다.

Author And Source

이 문제에 관하여(2021.06.25 (네이버 게임 2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lstem12/2021.06.25-naver-game-2