34(0812)

29강 네이버 e스포츠 2

학습 내용

html

<div class="left">

					<div id="esport-main-article">
						
						<div class="article full">
							 <img src="https://via.placeholder.com/150">
							 <div class="txt-wrap">
							 	<h3>'쵸비, 아프리카전 캐리 할까?' 아프리카-한화생명 선발 라인업 공개 [LCK]</h3>
							 	<p>(엑스포츠뉴스 최지영기자) 아프리카와 한화생명의 선발 라인업이 공개됐다. 12일 서울 종로 롤파크에서는 '2021 LCK 서머' 2라운드 마지막주 아프리카 대 한화생명의 맞대결이 펼쳐진다.</p>
								<span class="source">엑스포츠뉴스</span>
							 </div>
						</div>

						<div class="article">
							<img src="https://via.placeholder.com/150">
							<div class="txt-wrap">
								<h3>[LPL P.O] 수닝 만난 LNG의 '복수혈전' (SN vs LNG)</h3>
								<span class="source">MHN스포츠</span>
							</div>
						</div>

						<div class="article">
							<img src="https://via.placeholder.com/150">
							<div class="txt-wrap">
								<h3>[와일드리프트] '맛있는건 못 참아' T1, 0-2로 BLG에 패배</h3>
								<span class="source">MHN스포츠</span>
							</div>
						</div>
					</div>

					
				</div>

css

#esport-main .left {
	float: left;
	width: 900px;
	height: 2000px;
	background-color: yellow;
}

#esport-main .right {
	float: right;
	width: 357px;
	height: 2000px;
	background-color: grey;
}


#esport-main-article {
	overflow: hidden;
	width: 100%;
	height: 468px;
	background-color: grey;
	border-radius: 10px;

	margin-bottom: 30px;
}

#esport-main-article .article {
	position: relative;
	float: left;
	width: 50%;
	height: 50%;
}

#esport-main-article .article.full {
	height: 100%;
}

#esport-main-article .article img {
	position: absolute;
	width: 100%;
	height: 100%;
}

#esport-main-article .txt-wrap {
	position: absolute;
	width: 100%;
	padding: 0 24px 20px;

	left: 0;
	bottom: 0;

	color: #ffffff;
}

#esport-main-article .article .txt-wrap h3 {
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
}

#esport-main-article .article .txt-wrap p {
	margin-top: 5px;

	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
}

#esport-main-article .article .txt-wrap .source {
	display: block;
	margin-top: 10px;

	font-size: 13px;
	color: hsla(0, 0, 100%, .7);
}

html

<div id="esport-replay" class="esport-section">
						
						<div class="title-wrap">
							<h2>경기 다시보기</h2>
						</div>

						<nav class="game-menu">
							<ul class="esport-flex-start">
								<li>
									<a href="#" class="active">
										<i></i>
										<span>MSI</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i></i>
										<span>MSI</span>
									</a>
								</li>
								<li>
									<a href="#">
										<i></i>
										<span>MSI</span>
									</a>
								</li>
							</ul>
						</nav>

css

#esport-replay .game-menu {
	margin-bottom: 24px;
}


#esport-replay .game-menu ul {}

#esport-replay .game-menu ul li {
	margin-right: 20px;
}

#esport-replay .game-menu ul li:last-child {
	margin-right: 0;
}

#esport-replay .game-menu ul li a {
	display: block;
	width: 60px;
	/*height: 82px;*/

	text-align: center;
}

#esport-replay .game-menu ul li a.active i {
	background-color: purple;
}

#esport-replay .game-menu ul li a.active span {
	color: purple;
}

#esport-replay .game-menu ul li i {
	display: inline-block;
	width: 60px;
	height: 60px;
	background-color: grey;
	border-radius: 50%;

	margin-bottom: 6px;
}

#esport-replay .game-menu ul li span {
	font-size: 13px;

}

html

<ul class="play-lists esport-flex-between">
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/285x160">
										<div class="status-wrap esport-flex-between">
											<i></i>
											<span class="time">12:34</span>
										</div>
									</div>
									<h3>롤드컵 Day2 5세트 경기</h3>
								</a>
							</li>
						</ul>

css

#esport-replay .play-lists {}

#esport-replay .play-lists li {
	width: 285px;
	margin-bottom: 24px;
}

#esport-replay .play-lists li:nth-child(4),
#esport-replay .play-lists li:nth-child(5),
#esport-replay .play-lists li:nth-child(6) {
	margin-bottom: 0;
}

#esport-replay .play-lists li a {
	display: block;
}

#esport-replay .play-lists li .image-wrap {
	position: relative;
	width: 100%;
	height: 160px;
	margin-bottom: 11px;
}

#esport-replay .play-lists li .image-wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#esport-replay .play-lists li .image-wrap .status-wrap {
	position: absolute;
	width: 100%;

	left: 0;
	bottom: 0;

	padding: 10px;
}

#esport-replay .play-lists li .image-wrap .status-wrap i {
	display: block;
	width: 20px;
	height: 20px;
	background-color: grey;
}

#esport-replay .play-lists li .image-wrap .status-wrap .time {
	background-color: rgba(0, 0, 0, 0.7);
	padding: 3px 5px;
	border-radius: 3px;

	font-size: 11px;
	color: #ffffff;
}

#esport-replay .play-lists li h3 {
	font-size: 15px;
}

html

<div id="esport-news" class="esport-section">
						
						<div class="title-wrap">
							<h2>추천 뉴스</h2>
						</div>

						<div class="article-wrap esport-flex-between">
							<ul class="left-lists esport-flex-between">
								<li>
									<a href="#">
										<img src="https://via.placeholder.com/226x132">
										<h3>발로란트 한국 최강은, VS-F4Q 15일 결승 '격돌'</h3>
										<p>[OSEN=고용준 기자] 비전 스트라이커즈와 F4Q가 한국 최고의 발로란트 팀이라는 타이틀을 놓고 한 판 승부를 벌인다. 오는 15일 서울 송파 롯데월드 지하 콜로세움에서 열리는 </p>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="https://via.placeholder.com/226x132">
										<h3>발로란트 한국 최강은, VS-F4Q 15일 결승 '격돌'</h3>
										<p>[OSEN=고용준 기자] 비전 스트라이커즈와 F4Q가 한국 최고의 발로란트 팀이라는 타이틀을 놓고 한 판 승부를 벌인다. 오는 15일 서울 송파 롯데월드 지하 콜로세움에서 열리는 </p>
									</a>
								</li>
							</ul>

							<ul class="right-lists">
								<li><a href="#">'T1 37%·젠지 6%' 더 높은 순위를 차지할 팀은?…플옵 2R 직행 확률</a></li>
								<li><a href="#">[LCK] 공동 1위 LSB, 2라운드 직행 안정권 위해 필요한 승리</a></li>
								<li><a href="#">[단독] 베트남 리그 VCS, 서머 취소...롤드컵 대표 2팀 선발 예정</a></li>
								<li><a href="#">발로란트 한국 최강은, VS-F4Q 15일 결승 '격돌'</a></li>
								<li><a href="#">COD 리그, 모든 참석자에 코로나 백신-음성 결과 확인서 요구</a></li>
							</ul>
							
						</div>
					</div>

css

#esport-news .article-wrap {
	align-items: flex-start;
}

#esport-news .article-wrap .left-lists {
	width: 472px;
}

#esport-news .article-wrap .left-lists li {
	width: 226px;
}

#esport-news .article-wrap .left-lists li a {
	display: block;
}

#esport-news .article-wrap .left-lists img {
	width: 100%;
	height: 132px;
	margin-bottom: 9px;
}

#esport-news .article-wrap .left-lists h3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
}

#esport-news .article-wrap .left-lists p {
	font-size: 14px;
	color: #777;
}

#esport-news .article-wrap .right-lists {
	width: 400px;
}

#esport-news .article-wrap .right-lists li {
	position: relative;
	margin-bottom: 5px;
}

#esport-news .article-wrap .right-lists li:before {
	position: absolute;
	display: inline-block;
	content: '';
	width: 4px;
	height: 4px;
	background-color: grey;
	border-radius: 50%;

	top: 6px;
}

#esport-news .article-wrap .right-lists li a {
	display: block;
	font-size: 16px;
	padding-left: 15px;
}

html

<div id="esport-expert" class="esport-section">
						<div class="title-wrap">
							<h2>전문가 칼럼</h2>
						</div>

						<ul class="news-lists esport-flex-between">
							<li>
								<a href="#" class="esport-flex-start">
									<img src="https://via.placeholder.com/153x86">
									<div class="txt-wrap">
										<h3>[LCK 이야기] 11승 4팀, 정규 시즌 종료 1주 남았다</h3>
										<p>11승만 네 팀이다. 8월 8일 T1과 담원 기아가 11승 고지를 밟으며, 리브 샌드박스, 농심 레드포스와 같은 승수를 기록했다. 리브 샌드박스와 농심 레드포스가 5패, 담원 기아와 T1이 6패이기 때문에 순위는 가려진다.</p>
										<span class="source">Team LoL 핫매치 리뷰 / 프리뷰 인벤</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-start">
									<img src="https://via.placeholder.com/153x86">
									<div class="txt-wrap">
										<h3>[LCK 이야기]위기에 변화를 선택한 두 팀, 젠지 VS T1</h3>
										<p>젠지 e스포츠도 T1도 갈 길이 바쁘다. 2라운드 초반까지 절대적 1위 자리를 내주지 않았던 젠지 e스포츠는 어느 순간 눈을 떠보니 1위 자리를 농심 레드포스에게 내줬다. 2위 자리 수성도 녹록지 않다. 어제 경기에서 리브 샌드박스와 담원 기아가 나란히 승리하며</p>
										<span class="source">Team LoL 핫매치 리뷰 / 프리뷰 인벤</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-start">
									<img src="https://via.placeholder.com/153x86">
									<div class="txt-wrap">
										<h3>[LCK 이야기] 체급보다 더 중요한 것</h3>
										<p>농심 레드포스(이하 농심)가 11승 고지를 밟았다. 단독 1위다. 앞으로 남은 경기는 세 경기. 아프리카 프릭스와 DRX, 젠지 e스포츠와의 잔여 경기가 예정되어 있다. 쉬운 일정은 아니다. 기세는 이보다 더 좋을 수가 없다.</p>
										<span class="source">Team LoL 핫매치 리뷰 / 프리뷰 인벤</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#" class="esport-flex-start">
									<img src="https://via.placeholder.com/153x86">
									<div class="txt-wrap">
										<h3>Title</h3>
										<p>ㅁ니어리ㅏ먼아ㅣ럼나ㅣㅇㄹ</p>
										<span class="source">Team LoL 핫매치 리뷰 / 프리뷰 인벤</span>
									</div>
								</a>
							</li>
						</ul>
					</div>

css

#esport-expert .news-lists li {
	width: 450px;
	margin-bottom: 15px;
}

#esport-expert .news-lists li a {}

#esport-expert .news-lists li img {
	width: 153px;
	height: 86px;
	margin-right: 15px;
}

#esport-expert .news-lists .txt-wrap {
	width: 268px;
}

#esport-expert .news-lists .txt-wrap h3 {
	font-size: 15px;
	font-weight: 500;
}

#esport-expert .news-lists .txt-wrap p {
	font-size: 14px;
	color: #777777;
	line-height: 19px;
	margin-top: 4px;

	display: -webkit-box;
	overflow: hidden;
	max-height: 38px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; 
	text-overflow: ellipsis;
}

#esport-expert .news-lists .txt-wrap .source {
	font-size: 13px;
	color: #777777;
}

어려웠던 점 & 해결 방법
webkit 부분이 오랜만이라서 헷갈렸던 것 빼고는 다 괜찮았다.

학습 소감
게임을 좋아하지만 게임 페이지에는 처음 들어가보고 만드는 것이었는데 순조롭게 진행되어서 좋았다.