2021.06.28 (네이버 게임 2)

학습한 내용

[네이버 게임 왼쪽 부분]

공통 부분

.game_m_t_20 {
	margin-top: 20px;
}

.game_section .btn_circle.icon_plus {
	background-color: blue;
}

game.html 부분

				<div id="game_section_2" class="game_section">
					<div class="section_title_wrap">
						<h2 class="font_19">생생 주요 게임 뉴스</h2>
						<a href="#" class="more">더보기</a>
					</div>

					<div class="section_body_wrap">
						<div class="image_txt_wrap">
							<div class="image_txt game_flex_start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">‘오딘: 발할라 라이징’ 사전 예약자 400만 명 돌파</h3>
									<span class="source">인벤</span>
								</div>
							</div>
							
							<div class="image_txt game_flex_start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">‘오딘: 발할라 라이징’ 사전 예약자 400만 명 돌파</h3>
									<span class="source">인벤</span>
								</div>
							</div>
						</div>

						<ul>
							<li>
								<a href="#" class="game_flex_between">
									<h3 class="title">"큰 거 온다!" 스팀 여름 세일 시작! 어떤 게임을 구입해야 할까? "큰 거 온다!" 스팀 여름 세일 시작! 어떤 게임을 구입해야 할까?</h3>
									<span class="source">디스이즈게임</span>
								</a>
							</li>

							<li>
								<a href="#" class="game_flex_between">
									<h3 class="title">"큰 거 온다!" 스팀 여름 세일 시작! 어떤 게임을 구입해야 할까?</h3>
									<span class="source">디스이즈게임</span>
								</a>
							</li>

							<li>
								<a href="#" class="game_flex_between">
									<h3 class="title">"큰 거 온다!" 스팀 여름 세일 시작! 어떤 게임을 구입해야 할까?</h3>
									<span class="source">디스이즈게임</span>
								</a>
							</li>

							<li>
								<a href="#" class="game_flex_between">
									<h3 class="title">"큰 거 온다!" 스팀 여름 세일 시작! 어떤 게임을 구입해야 할까? "큰 거 온다!" 스팀 여름 세일 시작! 어떤 게임을 구입해야 할까?</h3>
									<span class="source">디스이즈게임</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div id="game_section_3" class="game_section">
					<div class="section_title_wrap">
						<h2 class="font_19">오리지널 시리즈</h2>
					</div>

					<div class="section_body_wrap">
						<div class="image_txt_wrap">
							<div class="image_txt game_flex_start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">글로벌 e게임</span>
									<h3 class="title">‘오딘: 발할라 라이징’ 사전 예약자 400만 명 돌파</h3>
									<span class="source">인벤</span>
								</div>
							</div>
							
							<div class="image_txt game_flex_start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">글로벌 e게임</span>
									<h3 class="title">‘오딘: 발할라 라이징’ 사전 예약자 400만 명 돌파</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">글로벌 e게임</span>
									<h3 class="title">‘오딘: 발할라 라이징’ 사전 예약자 400만 명 돌파</h3>
									<span class="source">인벤</span>
								</div>
							</div>
							
							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">글로벌 e게임</span>
									<h3 class="title">‘오딘: 발할라 라이징’ 사전 예약자 400만 명 돌파</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">글로벌 e게임</span>
									<h3 class="title">‘오딘: 발할라 라이징’ 사전 예약자 400만 명 돌파</h3>
									<span class="source">인벤</span>
								</div>
							</div>
							
							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">글로벌 e게임</span>
									<h3 class="title">‘오딘: 발할라 라이징’ 사전 예약자 400만 명 돌파</h3>
									<span class="source">인벤</span>
								</div>
							</div>

							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">글로벌 e게임</span>
									<h3 class="title">‘오딘: 발할라 라이징’ 사전 예약자 400만 명 돌파</h3>
									<span class="source">인벤</span>
								</div>
							</div>
							
							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">글로벌 e게임</span>
									<h3 class="title">‘오딘: 발할라 라이징’ 사전 예약자 400만 명 돌파</h3>
									<span class="source">인벤</span>
								</div>
							</div>
						</div>
					</div>

					<a href="#" class="btn_circle icon_plus"></a>
				</div>

				<div id="game_section_4" class="game_section">
					<div class="section_title_wrap">
						<h2 class="font_19">인기게임 영상</h2>
					</div>

					<div class="section_body_wrap">
						<ol >
							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon_play"></i>
										<span class="time">01:06:26</span>
									</div>

									<div class="image_txt">
										<h3>담원기아 vs RNG 1세트</h3>
										<div class="game_flex_between">
											<span class="source">리그오브레전드 네이버스포츠</span>
											<span class="count">17.161</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon_play"></i>
										<span class="time">01:06:26</span>
									</div>

									<div class="image_txt">
										<h3>담원기아 vs RNG 1세트</h3>
										<div class="game_flex_between">
											<span class="source">리그오브레전드 네이버스포츠</span>
											<span class="count">17.161</span>
										</div>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon_play"></i>
										<span class="time">01:06:26</span>
									</div>

									<div class="image_txt">
										<h3>담원기아 vs RNG 1세트</h3>
										<div class="game_flex_between">
											<span class="source">리그오브레전드 네이버스포츠</span>
											<span class="count">17.161</span>
										</div>
									</div>
								</a>
							</li>

							<li class="game_m_t_20">
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon_play"></i>
										<span class="time">01:06:26</span>
									</div>

									<div class="image_txt">
										<h3>담원기아 vs RNG 1세트</h3>
										<div class="game_flex_between">
											<span class="source">리그오브레전드 네이버스포츠</span>
											<span class="count">17.161</span>
										</div>
									</div>
								</a>
							</li>

							<li class="game_m_t_20">
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon_play"></i>
										<span class="time">01:06:26</span>
									</div>

									<div class="image_txt">
										<h3>담원기아 vs RNG 1세트</h3>
										<div class="game_flex_between">
											<span class="source">리그오브레전드 네이버스포츠</span>
											<span class="count">17.161</span>
										</div>
									</div>
								</a>
							</li>

							<li class="game_m_t_20">
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/263x148">
										<i class="icon_play"></i>
										<span class="time">01:06:26</span>
									</div>

									<div class="image_txt">
										<h3>담원기아 vs RNG 1세트</h3>
										<div class="game_flex_between">
											<span class="source">리그오브레전드 네이버스포츠</span>
											<span class="count">17.161</span>
										</div>
									</div>
								</a>
							</li>
						</ol>
					</div>
				</div>

				<div id="game_section_5" class="game_section">
					<div class="section_title_wrap">
						<h2 class="font_19">이번 달 출시 게임</h2>
						<a href="#" class="info">일정은 게임사 사정으로 변경될 수 있습니다.</a>
					</div>

					<nav class="section_middle_nav">
						<ul>
							<li><a href="#" class="active">월 06.28.</a></li>
							<li><a href="#">화 06.29.</a></li>
							<li><a href="#">수 06.30.</a></li>
							<li><a href="#">목 07.01.</a></li>
							<li><a href="#">금 07.02.</a></li>
							<li><a href="#">토 07.03.</a></li>
							<li><a href="#">일 07.04.</a></li>
						</ul>
					</nav>

					<div class="section_body_wrap">
						<ol class="game_flex_between">
							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/190x120">
										<span class="badge open">오픈</span>
									</div>

									<div class="txt_wrap">
										<h3>오딘 : 발할라 라이징</h3>
										<p>2021.04.28 ~ 2021.06.28</p>
										<span>Android,iOS</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/190x120">
										<span class="badge">사전예약</span>
									</div>

									<div class="txt_wrap">
										<h3>오딘 : 발할라 라이징</h3>
										<p>2021.04.28 ~ 2021.06.28</p>
										<span>Android,iOS</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/190x120">
										<span class="badge">사전예약</span>
									</div>

									<div class="txt_wrap">
										<h3>오딘 : 발할라 라이징</h3>
										<p>2021.04.28 ~ 2021.06.28</p>
										<span>Android,iOS</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/190x120">
										<span class="badge">사전예약</span>
									</div>

									<div class="txt_wrap">
										<h3>오딘 : 발할라 라이징</h3>
										<p>2021.04.28 ~ 2021.06.28</p>
										<span>Android,iOS</span>
									</div>
								</a>
							</li>
						</ol>
					</div>

					<a href="#" class="btn_circle icon_plus"></a>
				</div>

				<div id="game_section_6" class="game_section">
					<div class="section_title_wrap">
						<h2 class="font_19">급상승 공식 게임 카페</h2>
					</div>

					<div class="section_body_wrap">
						<div class="image_txt_wrap">
							<div class="image_txt game_flex_start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">AFK 삼국지 공식 카페 AFK 삼국지 공식 카페</h3>
									<p class="category">AFK 삼국지 공식 카페 입니다.</p>
									<span class="source">멤버 9,663명</span>
								</div>
							</div>
							
							<div class="image_txt game_flex_start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">AFK 삼국지 공식 카페</h3>
									<p class="category">AFK 삼국지 공식 카페 입니다.</p>
									<span class="source">멤버 9,663명</span>
								</div>
							</div>

							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">AFK 삼국지 공식 카페</h3>
									<p class="category">AFK 삼국지 공식 카페 입니다.</p>
									<span class="source">멤버 9,663명</span>
								</div>
							</div>
							
							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">AFK 삼국지 공식 카페</h3>
									<p class="category">AFK 삼국지 공식 카페 입니다.</p>
									<span class="source">멤버 9,663명</span>
								</div>
							</div>

							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">AFK 삼국지 공식 카페</h3>
									<p class="category">AFK 삼국지 공식 카페 입니다.</p>
									<span class="source">멤버 9,663명</span>
								</div>
							</div>
							
							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">AFK 삼국지 공식 카페</h3>
									<p class="category">AFK 삼국지 공식 카페 입니다.</p>
									<span class="source">멤버 9,663명</span>
								</div>
							</div>

							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">AFK 삼국지 공식 카페</h3>
									<p class="category">AFK 삼국지 공식 카페 입니다.</p>
									<span class="source">멤버 9,663명</span>
								</div>
							</div>
							
							<div class="image_txt game_flex_start game_m_t_20">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">AFK 삼국지 공식 카페</h3>
									<p class="category">AFK 삼국지 공식 카페 입니다.</p>
									<span class="source">멤버 9,663명</span>
								</div>
							</div>
						</div>
					</div>

					<a href="#" class="btn_circle icon_plus"></a>
				</div>

.game_section .section_body_wrap {
	margin-top: 18px;
}

.game_section .section_body_wrap .image_txt_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.game_section .section_body_wrap .image_txt {
	width: 407.5px;
}

.game_section .section_body_wrap img {
	width: 180px;
	height: 100px;

	border: solid 1px rgba(0, 0, 0, .06);
	border-radius: 8px;

	margin-right: 15px;
}

.game_section .section_body_wrap .txt {
	width: 212px;
}

.game_section .section_body_wrap .title {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;

	margin-bottom: 3px;
}

.game_section .section_body_wrap .source {
	font-size: 13px;
	color: #999;
}

#game_section_2 .section_title_wrap .more {
	font-size: 13px;
	font-weight: 400;
}

#game_section_2 .section_body_wrap ul {
	margin-top: 25px;
}

#game_section_2 .section_body_wrap ul li {
	margin-bottom: 11px;
}

#game_section_2 .section_body_wrap ul li:last-child {
	margin-bottom: 0;
}

#game_section_2 .section_body_wrap ul li a .title {
	width: 750px;

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

#game_section_3 .section_body_wrap .image_txt .txt .category {
	display: block;

	font-size: 13px;
	color: #7776ff;

	margin-bottom: 3px;
}

#game_section_4 {

}

#game_section_4 ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

#game_section_4 ol li {

}

#game_section_4 ol li a {
	display: block;
}

#game_section_4 ol li a .image_wrap {
	position: relative;

	overflow: hidden;

	width: 263px;
	height: 148px;

	border-radius: 8px;
}

#game_section_4 ol li a .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#game_section_4 ol li a .image_wrap .icon_play {
	position: absolute;

	width: 25px;
	height: 25px;

	background-color: grey;

	left: 10px;
	bottom: 12px;
}

#game_section_4 ol li a .image_wrap .time {
	position: absolute;

	font-size: 14px;
	color: #ffffff;

	background-color: rgba(0, 0, 0, .5);

	border-radius: 6px;

	right: 10px;
	bottom: 10px;

	padding: 2px 6px;
}

#game_section_4 .section_body_wrap .image_txt {
	width: 100%;

	margin-top: 10px;
}

#game_section_4 ol li a .image_txt h3 {
	font-size: 15px;
}

#game_section_4 ol li a .image_txt .source,
#game_section_4 ol li a .image_txt .count {
	font-size: 13px;
	color: #999;
}

#game_section_5 .section_title_wrap .info {
	font-size: 13px;
	color: #999999;
}

#game_section_5 .section_body_wrap .image_wrap {
	position: relative;

	width: 190px;
	height: 120px;
}

#game_section_5 .section_body_wrap .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;

	border: none;

	margin-right: 0;
}

#game_section_5 .section_body_wrap .image_wrap .badge {
	position: absolute;

	display: inline-block;

	font-size: 15px;
	font-weight: 700;
	color: #ffffff;

	border-radius: 8px;

	background-color: #4e41db;

	padding: 4px 8px;

	top: -5px;
	left: -5px;
}

#game_section_5 .section_body_wrap .image_wrap .badge.open {
	background-color: red;
}

#game_section_5 .section_body_wrap .txt_wrap {
	margin-top: 12px;
}

#game_section_5 .section_body_wrap .txt_wrap h3 {
	font-size: 15px;
	font-weight: 600;
}

#game_section_5 .section_body_wrap .txt_wrap p {
	font-size: 13px;
	font-weight: 500;
}

#game_section_5 .section_body_wrap .txt_wrap span {
	font-size: 13px;
	color: grey;
}

#game_section_6 .section_body_wrap img {
	width: 80px;
	height: 80px;

	border-radius: 30px;
}

#game_section_6 .section_body_wrap .txt {
	width: 300px;
}

#game_section_6 .section_body_wrap .title {
	width: 100%;

	font-size: 15px;

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

#game_section_6 .section_body_wrap .category {
	font-size: 13px;
	color: #666;
}

학습내용 중 어려웠던 점

공통 디자인은 공통 클래스로 빼고 수정이 필요한 부분은 부분적인 css수정 작업을 하는 방식으로 학습 했는데 확실히 코드는 줄었지만 아직 익숙하진 않은 형태고 공통 클래스의 경우 선택자를 필요한 부분만 써서 재사용시 css적용이 잘되도록 해야되는데 습관처럼 선택자를 다 쓰면서 해서 코드 수정을 하는데 조금 오래 걸렸습니다.

해결방법

.game_section으로 시작하는 부분은 다 공통적으로도 사용가능한 css이기 때문에 우선 재사용 코드를 쓰고 관리자 모드에서 어느부분이 적용되고 안됬는지 확인후 해당 공통 선택자가 있는부분에서 어디까지가 공통 선택자 인지 확인후 수정 작업을 진행했습니다.

학습소감

공통 클래스를 이용한 작업이 아직 익숙하지 않아서 재사용하는 부분이거나 공통으로 만드는 부분을 찾고 하는데 시간이 오래걸려서 혼란이 온 경우가 있었지만 익숙해 지면 점점 빠른 속도로 페이지 작업을 할거라 생각합니다.

Author And Source

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