31(0809)

쩜·2021년 8월 9일
0

AI school

목록 보기
30/49

26강 네이버 게임 2 (01:05:21 - 끝)

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 game-flex-between">
						<div class="game-flex-between">
							<div class="image-txt game-flex-start">
								<img src="https://via.placeholder.com/180x100">
								<div class="txt">
									<h3 class="title">게임음악 가득했던 2020 도쿄올림픽, 닌텐도만 쏙 빠진 사연?</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</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>
						</ul>
					</div>


				

				</div>

css

#game-section-2 .section-title-wrap .more {
	font-size: 13px;
	font-weight: 400;
}

#game-section-2 .section-body-wrap .image-txt {
	width: 407.5px;
}

#game-section-2 .section-body-wrap img {
	width: 180px;
	height: 100px;
	border-radius: 8px;
	border: solid 1px rgba(0, 0, 0,.06);
	margin-right: 15px;
}

#game-section-2 .section-body-wrap .txt {
	width: 212px;
}

#game-section-2 .section-body-wrap .title {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;

	margin-bottom: 3px;
}

#game-section-2 .section-body-wrap .source {
	font-size: 13px;
	color: #999;
}

#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 ul .title {
	width: 770px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

디스이즈인벤이 들어가는 곳이 오른쪽이 아닌 아래쪽에 위치하게 되어서 width 값을 776에서 770으로 바꿔주었다.

html

<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">게임음악 가득했던 2020 도쿄올림픽, 닌텐도만 쏙 빠진 사연?</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">인벤</span>
								</div>
							</div>
						</div>
					</div>
				
					<a href="#" class="btn-circle icon-plus"></a>

				</div>

css

#game-section-3 .section-body-wrap .image-txt .category {
	display: block;

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

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/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">12,345</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;
}


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">월 08.09</a></li>
							<li><a href="#">화 08.10</a></li>
							<li><a href="#">수 08.11</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.06.13 ~ 2021.08.17</p>
										<span>Android,IOS,PC</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>Title</h3>
										<p>2021 ~ 08,09</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>Title</h3>
										<p>2021 ~ 08,09</p>
										<span>닌텐도 스위치</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/190x120">
										<span class="badge cbt">CBT 모집</span>
									</div>

									<div class="txt-wrap">
										<h3>Title</h3>
										<p>2021 ~ 08,09</p>
										<span>닌텐도 스위치</span>
									</div>
								</a>
							</li>
						</ol>
					</div>


					<a href="#" class="btn-circle icon-plus"></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 .image-wrap .badge.cbt {
	background-color: #40E0D0;
}

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

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">게임음악 가득했던 2020 도쿄올림픽, 닌텐도만 쏙 빠진 사연?</h3>
									<span class="source">멤버 123,456명</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">멤버 123,456명</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">멤버 123,456명</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">멤버 123,456명</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">멤버 123,456명</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">멤버 123,456명</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">멤버 123,456명</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">네오위즈 '블레스 언리쉬드' 스팀 동접 9위로 시작</h3>
									<span class="source">멤버 123,456명</span>
								</div>
							</div>
						</div>
					</div>
				
					<a href="#" class="btn-circle icon-plus"></a>
				</div>

css

#game-section-6 .section-body-wrap img {
	width: 80px;
	height: 80px;
	border-radius: 20px;
}

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

어려웠던 점
오늘 강의는 왼쪽 영역을 작업하는 것이었는데 오른쪽에 있어야 할 회색 박스 부분이 자꾸 내가 하고 있는 영역의 아래에 위치해있었다. 오늘은 강의를 듣는 것에 지장이 없었지만 내일 강의를 들으려면 미리 해결해놓아야만 했었다.

해결 방법
game-section 부분은 상관이 없을 것이라 생각해서 main 부분의 윗쪽과 header 부분에 작성해놓은 것을 다시 보았는데 아무리 봐도 다 괜찮았었다. 강의를 돌려봐도 이상한 부분이 없었고 오늘 강의 전까지만 해도 이상하지 않아서 혹시나 했는데 right 전 부분에 닫는 div 태그가 하나가 더 들어가있었다...

학습 소감
오랜 시간 고민한 것에 비해서 너무 허무하고 허탈한 결과가 있었지만 그래도 혼자 찾아보고 해결할 수 있었던 것에 조금의 뿌듯함을 느끼고 다음엔 이런 실수를 하지 않아야겠다고 생각했다.

profile
쩜
이전 포스트

30(0806)

다음 포스트

32(0810)

0개의 댓글

관련 채용 정보

신입 개발자
하이퍼에픽은 숏폼 콘텐츠의 새로운 흐름을 주도하며, 당신의 아이디어를 실험하고 실행해볼 기회를 제공합니다. Spring Boot와 Kotlin으로 빠르게 발전하는 플랫폼의 백엔드 개발에 참여해 보세요!
iOS 앱 개발자
DLT파트너스는 '헬로우봇'과 '비트윈'을 통해 전 세계에 감성적 소통을 제공하며, iOS 앱 개발자로서 혁신적인 기능을 함께 만들어갈 동료를 찾습니다. 팀은 IT 업계의 다양한 경험을 지닌 구성원들로, 협업을 통해 멋진 성과를 내고 있습니다.
iOS Developer
모빌리티 플랫폼 iOS 앱을 개발하며 카셰어링, 자전거 등 다양한 서비스를 제공합니다. 효율적인 개발 환경과 협업 문화를 통해 개인 역량을 극대화할 기회를 제공합니다.
Powered by GraphCDN, the GraphQL CDN