1.학습한 내용

(1) 페이지 실습
네이버 게임 (https://game.naver.com/) 페이지의 왼쪽 영역에 대한 작업을 마무리지었다.

생생 주요 게임 뉴스

오리지널 시리즈

인기게임영상

이번달 출시 게임

급상승 공식 게임 카페

이번 실습에서 비슷한 틀을 가진 section들은 HTML 구조를 끌어서 변형하는 식으로 재탕(?)작업으로 한 부분이 많다.

(2) 학습한 내용

인기게임 영상에서 (3x2) 배치

HTML code

	<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 set</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 set</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 set</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 set</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 set</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 set</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 스포츠</span>
											<span class="count">17,161</span>
										</div>
									</div>
								</a>
							</li>
						</ol>

						</div>
					
			</div>

css code

.game-m-t-20 {
	margin-top: 20px;
}

이번 학습에서는 미리 class 선택자로 game-m-t-20이라고 지정을 하였고 HTML code에서 밑에 3개의 box에 class를 넣어주었다. 모식도와 같이 저런식으로 적용이 가능한 부분이고 만일 size 조절로 (4x2)라던지 (1x4)와 같은 형태도 가능하다.

Cascading의 특성을 이용한 default값의 변경

HTML code

			<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 set</h3>
										<div class="game-flex-between">
											<span class="source">리그 오브 레전드 네이버 스포츠</span>
											<span class="count">17,161</span>
										</div>
									</div>
								</a>
							</li>

css code

#game-section-4 .image-wrap {
	position: relative;
	overflow: hidden;
	width: 263px;
	height: 148px;
	border-radius: 8px;
}



.game-section .section-body-wrap .imgae-txt width: 407.5px


#game-section-4 .section-body-wrap .image-txt {
	width: 100%;
	margin-top: 10px;
}

section-4에서 width: 100% 넣어주는 이유 : 위에 code에서 407.5px로 적용했던 부분때문에 적용했던 것 때문에 정해진 구간을 넘어가는데 그걸 막기위해 사용한다.

△ 위에 개발자도구를 보면 초기 default로 넣어준 407.5px 때문에 배열자체가 뭉개져있다.

이부분을 수정 하기위해서는 #id 선택자의 우선순위가 높음을 이용하여 .class 선택자를 상세하는 방향으로 재설정을 해준다.
특히, width: 100%;를 이용하면 설정해주면 결과는 다음과 같다.

△ width 263px이 맞추어짐

2. 실습

깃허브 소스코드:

naver 게임 -3 ( 상단-왼쪽 끝 ) 실습 HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/55

naver 게임 -3 ( 상단-왼쪽 끝 )실습 css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/56

3. 어려웠던 내용 & 해결방법

언제나 그렇듯이 div tag의 배치

4.소감

진도를 빨리 빼야겠다는 생각이 든다. 8월에는 더더욱 부지런히!