2021.08.09네이버게임3

dogyeomyeo4444·2021년 8월 9일
대구AI스쿨
post-thumbnail

오늘의 강의 내용

* 네이버게임 왼쪽부분 중간부터 하단끝까지 카피캣

네이버게임 카피캣 영역인 왼쪽 부분 중간부터 하단끝까지

네이버게임 왼쪽부분 중간부터 하단끝까지 카피캣 완료한 모습

<!-- 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">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</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">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</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">금 05.28</a></li>
							<li><a href="#">토 05.29</a></li>
							<li><a href="#">일 05.30</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 ~ 05. 28</p>
										<span>닌텐도 스위치</span>
									</div>
								</a>
							</li>

							<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 ~ 05. 28</p>
										<span>닌텐도 스위치</span>
									</div>
								</a>
							</li>

							<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 ~ 05. 28</p>
										<span>닌텐도 스위치</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 ~ 05. 28</p>
										<span>닌텐도 스위치</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">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
									<span class="source">맴버 412,800</span>
								</div>
							</div>


							<div class="image_txt game_flex_start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<span class="category">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
									<span class="source">맴버 412,800</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
									<span class="source">맴버 412,800</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
									<span class="source">맴버 412,800</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
									<span class="source">맴버 412,800</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
									<span class="source">맴버 412,800</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
									<span class="source">맴버 412,800</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">에픽뷰</span>
									<h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
									<span class="source">맴버 412,800</span>
								</div>							
							</div>

						</div>
					</div>



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

				</div>

<!-- style.css언어 -->
#game_section_2 {

}

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

#game_section_2 .section_body_wrap {

}

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

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

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

#game_section_2 .section_body_wrap a {
	
}

#game_section_2 .section_body_wrap ul .title {
	width: 776px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#game_section_2 .section_body_wrap ul .source {
	
}


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

	font-size: 13px;
	color: #7776ff;
	margin-bottom: 3px;
}


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

#game_section_4 li {
	
}

#game_section_4 a {
	display: block;
}

#game_section_4 .image_wrap {
	position: relative;
	overflow: hidden;
	width: 263px;
	height: 148px;
	border-radius: 8px;
}

#game_section_4 .image_wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}

#game_section_4 .image_wrap .icon_play {
	position: absolute;
	width: 25px;
	height: 25px;
	background-color: gray;

	left: 10px;
	bottom: 12px;
}

#game_section_4 .image_wrap .time {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 2px 6px;
	border-radius: 6px;

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

	right: 10px;
	bottom: 10px;
}

#game_section_4 .section_body_wrap .image_txt {
	width: 100%;
	margin-top: 10px;
}

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

#game_section_4 .image_txt .source,
#game_section_4 .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;

	color: #ffffff;
	background-color: #4e41db;
	font-size: 15px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 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: gray;
}


#game_section_6 .section_body_wrap img {
	width: 80px;
	height: 80px;
	border-radius: 30px;
}

#game_section_6 .section_body_wrap .category {
	font-size: 15px;
}

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

#game_section_6 .section_body_wrap .title {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	font-size: 13px;
	color: #666;
}
  • ol태그의 자식태그로는 li태그가 있어야 한다.

강의를 끝난후 소감

이때 까지 강의를 청강하면서 처음으로 강사님 말씀이 쉽게 이해가 가지않았다. 두번, 세번 다시 들어봐야겠다.

힘든점, 문제점

오늘강의는 강의템포를 따라가는데 조금 힘든점이 있었다.
복사, 붙여넣기를 자유자재로 할수있어야 하는데, 중간에 놓쳐버리면 완전 소스코드가 엉망이 되기에 그 구간을 머무르는 시간이 길었다.

개선방안

왜이렇게 하는지 이해될때까지 구간반복으로 계속해서 청강하였다.반복과 연습만이 실력을 늘리는데 답인것 같았다.

profile
dogyeomyeo4444
i will be the best
이전 포스트

2021.08.06네이버게임2

다음 포스트

2021.08.10네이버게임4

0개의 댓글