8월 12일 Velog

류영서·2021년 8월 12일
대구AI스쿨
0

학습한 내용

네이버 e스포츠 실습 #2

https://game.naver.com/esports

1. Header

[css]

#esport_header {
	z-index: 99999; -> 스크롤시 고정+맨위에
}

2. Main

[html]

	<main role="main" id="esport_main">	
    
		<div id="esport_main_top"></div>


		<div class="esport_container esport_flex_between">

			<div id="esport_left"></div>
			<div id="esport_right"></div>
		</div>
        
	</main>

4. Esport Left

구조

[html]

			<div id="esport_left">
				
				<div id="esport_main_article"></div>


				<div id="esport_replay" class="esport_section"></div>


				<div id="esport_news" class="esport_section"></div>


				<div id="esport_expert" class="esport_section"></div>

			</div>

[css]

#esport_main #esport_left {
	width: 900px;
	height: 5000px;

	margin-top: 30px;
}

(1) esport main article

[html]

				<div id="esport_main_article">
					<div class="article full">
						<img src="https://via.placeholder.com/450x468">
						<div class="txt_wrap">
							<h3>'T1 37%·젠지 6%' 더 높은 순위를 차지할 팀은?…플옵 2R 직행 확률</h3>
							<p>(엑스포츠뉴스 최지영기자) 2021 LCK 서머 정규 시즌이 끝나간다. 마지막 10주차를 앞둔 상황에서도 플옵 2라운드 직행할 팀이 여전히 가려지지 않았다.이에 라이엇 측은 9주차까지 경기 결과와 남은 대진, 순위 등의 데이터를 분석한 '플레이오프 2라운드 직행 확률'을 공개했다. 플레이오프 2라운드 직행은...</p>
							<span class="source">엑스포츠뉴스</span>
						</div>
					</div>

					<div class="article half">
						<img src="https://via.placeholder.com/450x234">
						<div class="txt_wrap">
							<h3>공동 1위 LSB, 2라운드 직행 안정권 위해 필요한 승리 [LCK]</h3>
							<span class="source">포모스</span>
						</div>
					</div>

					<div class="article half">
						<img src="https://via.placeholder.com/450x234">
						<div class="txt_wrap">
							<h3>[단독] 베트남 리그 VCS, 서머 취소...롤드컵 대표 2팀 선발 예정</h3>
							<span class="source">데일리e스포츠</span>
						</div>
					</div>
				</div>

[css]

#esport_main #esport_left #esport_main_article {
	overflow: hidden;

	width: 100%;
	height: 468px;
	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 .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 {
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;

	margin-top: 5px;

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

#esport_main_article .article .txt_wrap .source {
	display: block;

	font-size: 13px;
	color: hsla(0, 0, 100%, 0.7);

	margin-top: 10px;
}

  • float을 사용해서 배치하는 방법
    : 모든 항목을 가로 50% 세로 50%으로 설정한 후 float을 left를 적용한다.
    부모영역에 overflow hidden 넣어줘야 한다.

esport section 기본값

[css]

.esport_section {
	border-top: solid 1px grey;

	padding-bottom: 30px;
	margin-bottom: 30px;
}

.esport_section .title_wrap {
	padding: 15px 0;
}

.esport_section .title_wrap h2 {
	font-size: 18px;
}

(2) esport replay

[html]

				<div id="esport_replay" class="esport_section">
					<div class="title_wrap">						
						<h2>경기 다시보기</h2>
					</div>

					<nav class="replay_menu">
						<ul class="esport_flex_start">
							<li class="active">
								<a href="#">
									<i></i>
									<span class="menu">LCK</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i></i>
									<span class="menu">LCK CL</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i></i>
									<span class="menu">GSL</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i></i>
									<span class="menu">PWS</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i></i>
									<span class="menu">BSC</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i></i>
									<span class="menu">MSI</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i></i>
									<span class="menu">롤드컵</span>
								</a>
							</li>
						</ul>
					</nav>

					<ul class="replay_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">1:08:44</span>
									</div>
								</div>
								<h4>SUNDAY NIGHT LCK 8화</h3>
							</a>
						</li>
						<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">1:08:44</span>
									</div>
								</div>
								<h4>SUNDAY NIGHT LCK 8화</h3>
							</a>
						</li>
						<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">1:08:44</span>
									</div>
								</div>
								<h4>SUNDAY NIGHT LCK 8화</h3>
							</a>
						</li>
						<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">1:08:44</span>
									</div>
								</div>
								<h4>SUNDAY NIGHT LCK 8화</h3>
							</a>
						</li>
						<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">1:08:44</span>
									</div>
								</div>
								<h4>SUNDAY NIGHT LCK 8화</h3>
							</a>
						</li>
						<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">1:08:44</span>
									</div>
								</div>
								<h4>SUNDAY NIGHT LCK 8화</h3>
							</a>
						</li>
					</ul>
				</div>

[css]

#esport_main #esport_left #esport_replay .replay_menu ul li {
	margin-right: 20px;
}

#esport_replay .replay_menu ul li:last-child {
	margin-right: 0;
}

#esport_replay .replay_menu ul li a {
	display: block;
	width: 60px;

	text-align: center; -> inline요소들 정렬
}


#esport_replay .replay_menu ul li a i {
	display: inline-block;

	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: lightgrey;

	margin-bottom: 6px;
}

#esport_replay .replay_menu ul li a .menu {
	font-size: 13px;
}

#esport_replay .replay_menu ul li.active a i{
	background-color: #4e41db;
}

#esport_replay .replay_menu ul li.active a .menu {
	color: #4e41db;
	font-weight: 700;
}

#esport_replay .replay_lists li {
	width: 285px;

	margin-top: 24px;
}

#esport_replay .replay_lists li a {
	display: block;
}

#esport_replay .replay_lists li a .image_wrap {
	position: relative;

	width: 100%;
	height: 160px;

	margin-bottom: 11px;
}

#esport_replay .replay_lists .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#esport_replay .replay_lists .image_wrap .status_wrap {
	position: absolute;

	width: 100%;

	left: 0;
	bottom: 0;

	padding: 10px 11px;
}

#esport_replay .replay_lists .image_wrap .status_wrap i {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: grey;
}

#esport_replay .replay_lists .image_wrap .status_wrap .time {
	background-color: black;
	opacity: 0.7;
	border-radius: 3px;

	padding: 3px 5px;

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

#esport_replay .replay_lists li a h4 {
	font-size: 15px;
	font-weight: 500;
}

(3) esport news

[html]

				<div id="esport_news" class="esport_section">
					<div class="title_wrap">						
						<h2>추천뉴스</h2>
					</div>

					<div class="esport_news_wrap esport_flex_between">
						<ul class="news_left esport_flex_start">
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/226x132">
									<h3>[단독] 베트남 리그 VCS, 서머 취소...롤드컵 대표 2팀 선발 예정</h3>
									<p>베트남 리그 오브 레전드 리그인 2021 VCS 서머가 오랜 연기 끝에 취소될 예정이다.VCS에 정통한 관계자에 따르면 다양한 이유로 연기됐던 2021 VCS 서머는 취소될 예정이지만 2021 리그 오브 레전드 월드 챔피언십(롤드컵)에 참가할 베트남 대표 2팀을 선발할 방식을 찾을 거라고 전했다.VCS 서머가 취소되는 이...</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/226x132">
									<h3>발로란트 한국 최강은, VS-F4Q 15일 결승 '격돌'</h3>
									<p>[OSEN=고용준 기자] 비전 스트라이커즈와 F4Q가 한국 최고의 발로란트 팀이라는 타이틀을 놓고 한 판 승부를 벌인다.오는 15일 서울 송파 롯데월드 지하 콜로세움에서 열리는 2021 발로란트 챌린저스 코리아 스테이지3 결승전에서 비전 스트라이커즈와 F4Q가 5전3선승제 결승을 치른다.비전 스트라이커즈와 F4Q는 지난...</p>
								</a>
							</li>
						</ul>

						<ul class="news_right">
							<li><a href="#"><strong>'금상전함'에 격추당한 '은하전함' LGD [LPL Report]</strong></a></li>
							<li><a href="#"><strong>'리브 샌박 VS 담원 기아' 해설진이 꼽은 2021 LCK 서머 마지막주 빅매치는?</strong></a></li>
							<li><a href="#"><strong>'전띵', 2021 ATL 시즌2 LCQ 우승... 파이널행 막차 탑승</strong></a></li>
							<li><a href="#"><strong>‘프린스’ 이채환 “매 경기 긴장되지만 마지막까지 자만하지 않겠다” [LCK]</strong></a></li>
							<li><a href="#">COD 리그, 모든 참석자에 코로나 백신-음성 결과 확인서 요구</a></li>
							<li><a href="#">EG '대니' 카일, 2021 LCS 신인상 수상</a></li>
							<li><a href="#">아프리카 프릭스, 한화생명 상대로 돌아온 힘 증명할까? [LCK]</a></li>
							<li><a href="#">韓 선수들이 점령한 서머 정규 시즌… MVP ‘도인비’ [LPL]</a></li>
						</ul>
					</div>					
				</div>

[css]

#esport_main #esport_left #esport_news .esport_news_wrap {
	align-items: stretch;
}


#esport_news .esport_news_wrap .news_left li {
	width: 226px;
	height: 239px;

	margin-right: 20px;
}

#esport_news .esport_news_wrap .news_left li:last-child {
	margin-right: 0;
}

#esport_news .esport_news_wrap .news_left li a {
	display: block;
	width: 100%;
}

#esport_news .esport_news_wrap .news_left li a img {
	width: 100%;
	height: 132px;
	border-radius: 8px;

	margin-bottom: 9px;
}

#esport_news .esport_news_wrap .news_left li a h3 {
	display: -webkit-box;
    overflow: hidden;


	max-height: 42px;
    white-space: normal;
    line-height: 21px;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

	font-size: 16px;
	font-weight: 600;

	margin-bottom: 4px;
}

#esport_news .esport_news_wrap .news_left li a p {
	display: -webkit-box;
    overflow: hidden;

    max-height: 38px;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

    font-size: 14px;
    line-height: 19px;
    color: #777;
}

#esport_news .esport_news_wrap .news_right {
	width: 410px;
}

#esport_news .esport_news_wrap .news_right li {
	margin-bottom: 5px;
}

#esport_news .esport_news_wrap .news_right li a:before {
	display: inline-block;
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background-color: lightgrey;

	vertical-align: top;
	margin: 7px 10px 0 0;

}

#esport_news .esport_news_wrap .news_right li a {
	display: block;
	overflow: hidden;

	width: 380px;

	font-size: 16px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

(4) esport expert

[html]

				<div id="esport_expert" class="esport_section">
					<div class="title_wrap">						
						<h2>전문가 칼럼</h2>
					</div>

					<ul class="expert_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승 고지를 밟으며, 리브 샌드박스, 농심 레드포스와 같은 승수를 기록했다.</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 이야기] 11승 4팀, 정규 시즌 종료 1주 남았다</h3>
									<p>11승만 네 팀이다. 8월 8일 T1과 담원 기아가 11승 고지를 밟으며, 리브 샌드박스, 농심 레드포스와 같은 승수를 기록했다.</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 이야기] 11승 4팀, 정규 시즌 종료 1주 남았다</h3>
									<p>11승만 네 팀이다. 8월 8일 T1과 담원 기아가 11승 고지를 밟으며, 리브 샌드박스, 농심 레드포스와 같은 승수를 기록했다.</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 이야기] 11승 4팀, 정규 시즌 종료 1주 남았다</h3>
									<p>11승만 네 팀이다. 8월 8일 T1과 담원 기아가 11승 고지를 밟으며, 리브 샌드박스, 농심 레드포스와 같은 승수를 기록했다.</p>
									<span class="source">Team LoL 핫매치 리뷰 / 프리뷰</span>			
								</div>
							</a>
						</li>
					</ul>
				</div>

[css]

#esport_main #esport_left #esport_expert .expert_lists li {
	width: 450px;

	margin-top: 25px;
}

#esport_expert .expert_lists li a img {
	width: 153px;
	height: 86px;
	border-radius: 8px;

	margin-right: 15px;
}

#esport_expert .expert_lists li a .txt_wrap {
	width: 268px;
}

#esport_expert .expert_lists .txt_wrap h3 {
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 15px;
    font-weight: 600;

    margin-top: 4px;
}

#esport_expert .expert_lists .txt_wrap p {
	display: -webkit-box;
    overflow: hidden;
    max-height: 38px;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

    word-break: break-all;
    word-wrap: break-word;

    font-size: 14px;
    color: #777;

    margin-top: 4px;
}

#esport_expert .expert_lists .txt_wrap .source {
	margin-top: 4px;

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

profile
류영서
이전 포스트

8월 11일 Velog

다음 포스트

8월 13일 Velog

0개의 댓글

관련 채용 정보