[大邱AI学校]開発ログ34日目210812
101903 ワード
学習内容
1.NAVERゲーム(6)
1）電子競技主左側領域
<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:省略記号;使用理由がわかりません.
学習の心得.
Reference
この問題について([大邱AI学校]開発ログ34日目210812), 我々は、より多くの情報をここで見つけました
https://velog.io/@seona056/대구AI스쿨-개발일지-34일차-210812
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<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>/* 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:省略記号;使用理由がわかりません.
学習の心得.
Reference
この問題について([大邱AI学校]開発ログ34日目210812), 我々は、より多くの情報をここで見つけました
https://velog.io/@seona056/대구AI스쿨-개발일지-34일차-210812
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について([大邱AI学校]開発ログ34日目210812), 我々は、より多くの情報をここで見つけました https://velog.io/@seona056/대구AI스쿨-개발일지-34일차-210812テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol