[대구AI스쿨] 개발일지 34일차 210812

김선아·2021년 8월 12일
CSShtml대구AI스쿨웹프로그래밍
0

대구AI스쿨 개발일지

목록 보기
34/46

학습내용

1. 네이버 게임 (6)

1) e스포츠 메인 왼쪽 영역

<div class="esports-container">

	<div class="content-wrap">

		<div class="left">




			<div id="esports-main-article">

				<div class="article full">
					<img src="https://via.placeholder.com/150">
					<div class="txt-wrap">
						<h3>[기록으로 본 LPL] 각 라이너들의 '핵심 지표'는? (EDG vs FPX)</h3>
						<p>(MHN스포츠 이솔 기자) 단 두시간, '잊혀졌던 자'들이 '역사에 남을 황제'로 거듭날 LPL 플레이오프의 개시까지 남은 시간이다.오는 2일 오후 6시부터 펼쳐질 LPL 서머 결승전에서는 정규시즌 마지막까지 1-2위를 다퉜던 FPX와 EDG가 최후의 승부를 가린다.</p>
						<span class="source">MHN스포츠</span>
					</div>
				</div>

				<div class="article">
					<img src="https://via.placeholder.com/150">
					<div class="txt-wrap">
						<h3>中 LDL, 연령 조정...만 18세 미만 선수 출전 금지</h3>
						<span class="source">데일리e스포츠</span>
					</div>
				</div>

				<div class="article">
					<img src="https://via.placeholder.com/150">
					<div class="txt-wrap">
						<h3>中 LDL, 연령 조정...만 18세 미만 선수 출전 금지</h3>
						<span class="source">데일리e스포츠</span>
					</div>
				</div>
				
			</div>





			<div id="esports-replay" class="esports-section">

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

				<nav class="game-menu">
					<ul class="game-flex-start">
						<li>
							<a href="#" class="active">
								<i></i>
								<span>MSI</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i></i>
								<span>LCK</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i></i>
								<span>LCK CL</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i></i>
								<span>GSL</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i></i>
								<span>BSC</span>
							</a>
						</li>
						<li>
							<a href="#">
								<i></i>
								<span>롤드컵</span>
							</a>
						</li>
					</ul>
				</nav>


				<ul class="play-lists game-flex-between">
					<li>
						<a href="#">
							<div class="image-wrap"> 
								<img src="https://via.placeholder.com/285x160">
								
								<div class="status-wrap game-flex-between">
									<i></i>
									<span class="time">56:01</span>
								</div>
							</div>
							<h3>RNG-DK MSI FINAL 5세트</h3>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="image-wrap"> 
								<img src="https://via.placeholder.com/285x160">
								
								<div class="status-wrap game-flex-between">
									<i></i>
									<span class="time">56:01</span>
								</div>
							</div>
							<h3>RNG-DK MSI FINAL 4세트</h3>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="image-wrap"> 
								<img src="https://via.placeholder.com/285x160">
								
								<div class="status-wrap game-flex-between">
									<i></i>
									<span class="time">56:01</span>
								</div>
							</div>
							<h3>RNG-DK MSI FINAL 3세트</h3>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="image-wrap"> 
								<img src="https://via.placeholder.com/285x160">
								
								<div class="status-wrap game-flex-between">
									<i></i>
									<span class="time">56:01</span>
								</div>
							</div>
							<h3>RNG-DK MSI FINAL 2세트</h3>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="image-wrap"> 
								<img src="https://via.placeholder.com/285x160">
								
								<div class="status-wrap game-flex-between">
									<i></i>
									<span class="time">56:01</span>
								</div>
							</div>
							<h3>RNG-DK MSI FINAL 2세트</h3>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="image-wrap"> 
								<img src="https://via.placeholder.com/285x160">
								
								<div class="status-wrap game-flex-between">
									<i></i>
									<span class="time">56:01</span>
								</div>
							</div>
							<h3>RNG-DK MSI FINAL 1세트</h3>
						</a>
					</li>
				</ul>

			</div>





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

				<div class="article-wrap game-flex-between">

					<ul class="left-lists game-flex-between">
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/226x132">
								
								<h3>Hanwha Life Esports complete miracle run to Worlds 2021</h3>
								<p>Hanwha Life Esports beat Nongshim RedForce in a dominant 3-0 sweep on the second day of the Korean regional qualifiers for the 2021 League of Legends World Championship, on Wednesday evening. With the victory, Hanwha Life claimed Korea's final ticket to Worlds, joining DWG KIA, Gen.G Esports and T1.</p>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/226x132">
								
								<h3>Hanwha Life Esports complete miracle run to Worlds 2021</h3>
								<p>Hanwha Life Esports beat Nongshim RedForce in a dominant 3-0 sweep on the second day of the Korean regional qualifiers for the 2021 League of Legends World Championship, on Wednesday evening. With the victory, Hanwha Life claimed Korea's final ticket to Worlds, joining DWG KIA, Gen.G Esports and T1.</p>
							</a>
						</li>
					</ul>

					<ul class="right-lists">
						<li><a href="#">'데프트' 김혁규가 보여준 베테랑의 품격 [Oh!쎈 롤챔스]</a></li>
						<li><a href="#">'데프트' 김혁규가 보여준 베테랑의 품격 [Oh!쎈 롤챔스]</a></li>
						<li><a href="#">'데프트' 김혁규가 보여준 베테랑의 품격 [Oh!쎈 롤챔스]</a></li>
						<li><a href="#">'데프트' 김혁규가 보여준 베테랑의 품격 [Oh!쎈 롤챔스]</a></li>
						<li><a href="#">'데프트' 김혁규가 보여준 베테랑의 품격 [Oh!쎈 롤챔스]</a></li>
					</ul>
					
				</div>

			</div>




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

				<ul class="news-lists game-flex-between">
					<li>
						<a href="#" class="game-flex-start">
							<img src="https://via.placeholder.com/153x86">
							<div class="txt-wrap">
								<h3>[LCK 이야기] T1의 여섯 번째 롤드컵 진출, 그리고 '테디'</h3>
								<p>말도 많고, 탈도 많았던 T1이 결국 서머 결승 진출에 성공했다. LCK는 3시즌 만의 결승이다. 거기에 롤드컵 직행까지 거머쥐은, 최근 들어 T1의 가장 기쁜 날이 됐다.
								이날의 주인공은 6회 롤드컵 진출이라는 대기록을 달성한 '페이커' 이상혁도, 역천괴 '케리아' 류민석도, 든든하게 탑에서 제 역할을 해내는 '칸나' 김창동도, 신예라고 믿기지 않을 만큼 좋은 활약과 성장을 이어가고 있는 '오너' 문현준도 아닌 '테디' 박진성이라고 감히 말해본다.</p>
								<span class="source">핫매치 리뷰</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="game-flex-start">
							<img src="https://via.placeholder.com/153x86">
							<div class="txt-wrap">
								<h3>[LCK 이야기] T1의 여섯 번째 롤드컵 진출, 그리고 '테디'</h3>
								<p>말도 많고, 탈도 많았던 T1이 결국 서머 결승 진출에 성공했다. LCK는 3시즌 만의 결승이다. 거기에 롤드컵 직행까지 거머쥐은, 최근 들어 T1의 가장 기쁜 날이 됐다.
								이날의 주인공은 6회 롤드컵 진출이라는 대기록을 달성한 '페이커' 이상혁도, 역천괴 '케리아' 류민석도, 든든하게 탑에서 제 역할을 해내는 '칸나' 김창동도, 신예라고 믿기지 않을 만큼 좋은 활약과 성장을 이어가고 있는 '오너' 문현준도 아닌 '테디' 박진성이라고 감히 말해본다.</p>
								<span class="source">핫매치 리뷰</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="game-flex-start">
							<img src="https://via.placeholder.com/153x86">
							<div class="txt-wrap">
								<h3>[LCK 이야기] T1의 여섯 번째 롤드컵 진출, 그리고 '테디'</h3>
								<p>말도 많고, 탈도 많았던 T1이 결국 서머 결승 진출에 성공했다. LCK는 3시즌 만의 결승이다. 거기에 롤드컵 직행까지 거머쥐은, 최근 들어 T1의 가장 기쁜 날이 됐다.
								이날의 주인공은 6회 롤드컵 진출이라는 대기록을 달성한 '페이커' 이상혁도, 역천괴 '케리아' 류민석도, 든든하게 탑에서 제 역할을 해내는 '칸나' 김창동도, 신예라고 믿기지 않을 만큼 좋은 활약과 성장을 이어가고 있는 '오너' 문현준도 아닌 '테디' 박진성이라고 감히 말해본다.</p>
								<span class="source">핫매치 리뷰</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="game-flex-start">
							<img src="https://via.placeholder.com/153x86">
							<div class="txt-wrap">
								<h3>[LCK 이야기] T1의 여섯 번째 롤드컵 진출, 그리고 '테디'</h3>
								<p>말도 많고, 탈도 많았던 T1이 결국 서머 결승 진출에 성공했다. LCK는 3시즌 만의 결승이다. 거기에 롤드컵 직행까지 거머쥐은, 최근 들어 T1의 가장 기쁜 날이 됐다.
								이날의 주인공은 6회 롤드컵 진출이라는 대기록을 달성한 '페이커' 이상혁도, 역천괴 '케리아' 류민석도, 든든하게 탑에서 제 역할을 해내는 '칸나' 김창동도, 신예라고 믿기지 않을 만큼 좋은 활약과 성장을 이어가고 있는 '오너' 문현준도 아닌 '테디' 박진성이라고 감히 말해본다.</p>
								<span class="source">핫매치 리뷰</span>
							</div>
						</a>
					</li>
				</ul>
			</div>







			
		</div>
		

		<div class="right">
			
		</div>

	</div>

</div>

css↓

/* content wrap */

#esports-main .content-wrap {
	overflow: hidden;
}



/* esports-main .left */

#esports-main .left {
	float: left;
	width: 900px;
	/*height: 2000xp;*/
	/*background-color: yellow;*/
}




/* esports-main-article */


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

	margin-bottom: 30px;
}

#esports-main-article .article {
	position: relative;
	float: left;     /* float: left;를 하면, 왼쪽부터 차례로 x축 배치가 된다. 부모영역을 벗어나는 크기는 자동으로 줄바꿈 되는 것을 활용하여 배치 */
	width: 50%;
	height: 50%;
}

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


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

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

	left: 0;
	bottom: 0;

	color: #ffffff;
}


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

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

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

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

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




.esports-section {
	border-top: solid 1px grey;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.esports-section .title-wrap {
	padding: 15px 0;
}

.esports-section .title-wrap h2 {
	font-size: 18px;
}





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


#esports-replay .game-menu ul {
	
}

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

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

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

	text-align: center;
}

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

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

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

	margin-bottom: 6px;
}

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


#esports-replay .play-lists {

}

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

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

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

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

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

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

	width: 100%;
	height: 100%;
}

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

	left: 0;
	bottom: 0;

	padding: 10px;
}

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

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

#esports-replay .play-lists li .image-wrap .status-wrap i {
	
}

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







/* esports-news */

#esports-news {

}

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


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

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

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

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

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

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

	display: -webkit-box;
	overflow: hidden;
	max-height: 132px;
    -webkit-line-clamp: 2;    /*line-clamp만 설정해도 말줄임표가 생성됨*/
    -webkit-box-orient: vertical;
    /*text-overflow: ellipsis; */    /* line-clamp에서 이미 말줄임표가 생성되어 있기 때문에 다시 넣지 않아도 된다. */

}

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

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

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

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

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






/* esports-expert */

#esports-expert .news-lists {

}

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

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

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

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

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

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

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

	display: -webkit-box;
	overflow: hidden;
	max-height: 38px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /* 2번째 줄 이후부터 표시하지 않고 말줄임표 */
}

#esports-expert .news-lists .txt-wrap .source{
	font-size: 13px;
	color: #777777;
	line-height: 15px;
}


어려웠던 점과 해결 방안

css↓

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

-webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.
display 속성을 -webkit-box 또는 -webkit-inline-box로, 그리고 -webkit-box-orient (en-US) 속성을 vertical로 설정한 경우에만 동작합니다.
-webkit-line-clamp만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 overflow 속성 또한 hidden으로 설정해야 합니다.

( ? ) -webkit-line-clamp속성을 사용하면 자동으로 말줄임표가 생기는데, text-overflow: ellipsis;를 사용하는 이유가 뭔지 모르겠다.

학습소감

profile
김선아
이전 포스트

[대구AI스쿨] 개발일지 33일차 210811

다음 포스트

[대구AI스쿨] 개발일지 35일차 (1) 210813

0개의 댓글