2021_08_06 ,2021_08_09 개발일지

Yeo Eunhye·2021년 8월 6일
개발일지
0

1) 학습한 내용

오늘은 어제에 이어 게임 왼쪽 영역을 마무리 해보았다.

1. Game - main left section 4

- html


				<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/263x148px">
										
										<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/263x148px">
										
										<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/263x148px">
										
										<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/263x148px">
										
										<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/263x148px">
										
										<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/263x148px">
										
										<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>

- css

#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: grey;

	left: 10px;
	bottom: 12px;
}

#game-section-4 .image-wrap .time {
	position: absolute;
	background-color: rgba(0, 0, 0, .5);
	border-radius: 6px;
	padding: 2px 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;
}

2. Game - main left section 5

- html

<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-arrow">▲</a>	
				</div>

- css

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

3. Game - main left section 6

- html

<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-arrow">▲</a>	
				</div>

- css

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

2) 학습내용 중 어려웠던 점 및 해결방법

css를 디폴트값으로 정해놓고 레이아웃을 작업을 하다 보니 크게 어려웠던 점은 없었다.
비슷한 레이아웃이라 버튼도 같은 작업을 주어서 어렵지 않았다.

3) 학습소감

어제 오늘의 학습량까지 모두 들어버리고, 오늘은 월요일의 학습까지 해버렸다. 그런줄도 모르고 더 듣고 싶어 오른쪽 영역의 동영상을 찾아보다 보니.. 오른쪽 영역은 다음주 화요일 학습이었다.. 또륵 더 듣고 싶지만 화요일을 위해 참고 자바로 넘어가야겠다.
내일은 건강검진일이라 배가 너무 고프다..ㅎㅎㅎ
그래도 집중해서 들어야겠지~?

profile
Yeo Eunhye
아직 여백이 많은 개린이입니다.
이전 포스트

2021_08_05 개발일지

다음 포스트

2021_08_10 개발일지

0개의 댓글