08월 09일

1. 학습 내용

인기게임영상(섹션 4) ~ 급상승 게임카페 (섹션 6)

HTML

<div id="game-section-4" class="game-section">
				<div class="section-title-wrap game-flex-between">
					<h2 class="font-19">인기 게임 영상</h2>
				</div>

				<div class="section-body-wrap">
					<ol class="game-flex-between">
						<li class="game-m-t-20">
							<a href="#">
								<div class="image-wrap">
									<img src="https://via.placeholder.com/263px*148px">
									<i class="icon-play"></i>
									<span class="time">01:06:26</span>
								</div>
								<div class="image-txt">
									<h3>담원 기아 vs RNC</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/263px*148px">
									<i class="icon-play"></i>
									<span class="time">01:06:26</span>
								</div>
								<div class="image-txt">
									<h3>담원 기아 vs RNC</h3>
									<div class="game-flex-between">
										<span class="source">리그오브레전드 네이버 스포츠</span>
										<span class="count">17,161</span>
									</div>
								</div>
							</a>
						</li>
					</ol>
				</div>
			</div>


			<!-- 섹션 1을 사용하여 커스텀 -->
			<div id="game-section-5" class="game-section">
				<div class="section-title-wrap game-flex-between">
					<h2 class="font-19">이번달 출시 게임</h2>
					<a href="#" class="info">일정은 게임사 사정으로 변경될 수 있습니다.</a>
				</div>

				<nav class="section-middle-nav">
					<ul class="game-flex-start">
						<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/190px*120px">
									<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/190px*120px">
									<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/190px*120px">
									<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/190px*120px">
									<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>


			<!-- 섹션 3를 사용 -->
			<div id="game-section-6" class="game-section">
				<div class="section-title-wrap game-flex-between">
					<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/80px">
							<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/180px*100px">
							<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/180px*100px">
							<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/180px*100px">
							<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/180px*100px">
							<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/180px*100px">
							<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/180px*100px">
							<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/180px*100px">
							<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>

CSS

#game-section-4 .section-body-wrap ol li a {
	display: block;}

#game-section-4 .section-body-wrap ol li a .image-wrap {
	position: relative;
	width: 263px;
	height: 148px;

	border-radius: 8px;
	overflow: hidden;}

#game-section-4 .section-body-wrap ol li a .image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;}

#game-section-4 .section-body-wrap ol li a .image-wrap .icon-play {
	position: absolute;
	width: 25px;
	height: 25px;
	background-color: grey;

	left: 10px;
	bottom: 12px;}

#game-section-4 .section-body-wrap ol li a .image-wrap .time {
	position: absolute;
	background-color: rgba(0, 0, 0, .5);

	padding: 0 6px;
	border-radius: 6px;
	color: #ffffff;
	font-size: 14px;

	right: 10px;
	bottom: 10px;}

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

#game-section-4 .section-body-wrap ol li a .image-txt h3 {
	font-size: 15px;}

#game-section-4 .section-body-wrap ol li a .image-txt .source {
	font-size: 13px;
	color: #999;}

#game-section-4 .section-body-wrap 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;

	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: 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 .category {
	font-size: 15px;}


#game-section-6 .section-body-wrap .title {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
    - 기존 두줄을 한줄로 만들고 말줄임표

	font-size: 13px;
	color: #666;}

2. 학습 중 어려웠던 점

앞서 어려웠던 점과 동일하다.

3. 해결방안

구조에 대해 찬찬히 살펴본다

4. 학습 소감

도움없이 완성본을 만들고 싶다