2021.07.01 (네이버 이스포츠 2)
학습한 내용
[네이버 이스포츠 왼쪽 부분]
#esport_header {
z-index: 99999;
}- z-index값을 높게 줘서 header부분의 네비게이션은 항상 최상단에 표시되도록
<div class="esport_container">
<div class="content_wrap">
<div class="left">
<div id="esport_main_article">
<div class="article full">
<a href="#">
<img src="https://via.placeholder.com/150">
<div class="txt_wrap">
<h3>Title Title Title Title Title</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">포모스</span>
</div>
</a>
</div>
<div class="article top">
<a href="#">
<img src="https://via.placeholder.com/150">
<div class="txt_wrap">
<h3>Title Title Title Title Title</h3>
<span class="source">포모스</span>
</div>
</a>
</div>
<div class="article bottom">
<a href="">
<img src="https://via.placeholder.com/150">
<div class="txt_wrap">
<h3>Title Title Title Title</h3>
<span class="source">포모스</span>
</div>
</a>
</div>
</div>
<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>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>PWS</span>
</a>
</li>
</ul>
</nav>
<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">1:07:12</span>
</div>
</div>
<h3>BRO-GEN 3세트</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:07:12</span>
</div>
</div>
<h3>BRO-GEN 3세트</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:07:12</span>
</div>
</div>
<h3>BRO-GEN 3세트</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:07:12</span>
</div>
</div>
<h3>BRO-GEN 3세트</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:07:12</span>
</div>
</div>
<h3>T1-KT 3세트</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:07:12</span>
</div>
</div>
<h3>BRO-GEN 3세트</h3>
</a>
</li>
</ul>
<div class="replay_more">
<a href="#">영상 더보기</a>
</div>
</div>
<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>타이틀1 타이틀1 타이틀1 타이틀1 타이틀1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/226x132">
<h3>타이틀1 타이틀1 타이틀1 타이틀1 타이틀1 타이틀1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
</ul>
<ul class="right_lists">
<li><a href="#">동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</a></li>
<li><a href="#">동해물과 백두산이 마르고 닳도록</a></li>
<li><a href="#">동해물과 백두산이 마르고 닳도록</a></li>
<li><a href="#">동해물과 백두산이 마르고 닳도록</a></li>
<li><a href="#">동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</a></li>
<li><a href="#">동해물과 백두산이 마르고 닳도록</a></li>
<li><a href="#">동해물과 백두산이 마르고 닳도록</a></li>
<li><a href="#">동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</a></li>
</ul>
</div>
</div>
<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>Title Title Title Title Title Title Title</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</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 Title Title Title Title Title Title</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</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 Title Title Title Title Title Title Title Title</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</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 Title Title Title Title Title Title Title Title</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">Team LoL 핫매치 리뷰/프리뷰</span>
</div>
</a>
</li>
</ul>
</div>
<a href="#" class="test"></a>
</div>
<div class="right">
</div>
</div>
</div>#esport_main .content_wrap {
overflow: hidden;
padding-top: 30px;
}
#esport_main .left {
float: left;
width: 900px;
}
#esport_main .right {
float: right;
width: 357px;
height: 2000px;
background-color: grey;
}
#esport_main_article {
overflow: hidden;
width: 100%;
height: 468px;
background-color: grey;
margin-bottom: 30px;
border-radius: 10px;
}
#esport_main_article .article {
position: relative;
float: left;
width: 50%;
height: 50%;
}
#esport_main_article .article.top {
border-bottom: solid 1px grey;
}
#esport_main_article .article.full {
height: 100%;
background-color: green;
border-right: solid 1px grey;
}
#esport_main_article .article img {
position: absolute;
width: 100%;
height: 100%;
}
#esport_main_article .article .txt_wrap {
position: absolute;
width: 100%;
color: #ffffff;
padding: 0 24px 20px;
left: 0;
bottom: 0;
}
#esport_main_article .article .txt_wrap h3 {
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
#esport_main_article .article .txt_wrap p {
font-size: 14px;
font-weight: 500;
line-height: 19px;
margin-top: 5px;
}
#esport_main_article .article .txt_wrap .source {
display: block;
font-size: 13px;
color: hsla(0, 0%, 100%, .7);
margin-top: 10px;
}
.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;
}
#esport_replay {
position: relative;
}
#esport_replay .game_menu {
margin-bottom: 24px;
}
#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;
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;
font-weight: bold;
}
#esport_replay .game_menu ul li a i {
display: inline-block;
width: 60px;
height: 60px;
background-color: grey;
border-radius: 50%;
margin-bottom: 6px;
}
#esport_replay .game_menu ul li a span {
font-size: 13px;
}
#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 a .image_wrap {
position: relative;
width: 100%;
height: 160px;
margin-bottom: 11px;
}
#esport_replay .play_lists li a .image_wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#esport_replay .play_lists li a .image_wrap .status_wrap {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
padding: 10px;
}
#esport_replay .play_lists li a .image_wrap .status_wrap i {
display: block;
width: 20px;
height: 20px;
background-color: grey;
}
#esport_replay .play_lists li a .image_wrap .status_wrap .time {
font-size: 11px;
font-weight: 600;
color: #ffffff;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.7);
padding: 3px 5px;
}
#esport_replay .play_lists li a h3 {
font-size: 15px;
}
#esport_replay .replay_more {
position: absolute;
width: 145px;
height: 30px;
background-color: #ffffff;
bottom: -45px;
left: 50%;
transform: translateX(-50%);
padding: 0 10px;
}
#esport_replay .replay_more a {
display: inline-block;
width: 125px;
height: 29px;
background-color: #ffffff;
border: solid 1px #000000;
border-radius: 20px;
font-size: 15px;
text-align: center;
padding-top: 3px;
}
#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 li a img {
width: 100%;
height: 132px;
margin-bottom: 9px;
}
#esport_news .article_wrap .left_lists li a h3 {
font-size: 16px;
font-weight: 500;
line-height: 21px;
}
#esport_news .article_wrap .left_lists li a p {
font-size: 13px;
color: #777;
}
#esport_news .article_wrap .right_lists {
width: 400px;
}
#esport_news .article_wrap .right_lists li {
position: relative;
margin-bottom: 6px;
}
#esport_news .article_wrap .right_lists li:before {
position: absolute;
display: inline-block;
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background-color: grey;
top: 10px;
}
#esport_news .article_wrap .right_lists li a {
display: block;
width: 384px;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 10px;
}
#esport_expert .news_lists li {
width: 450px;
margin-bottom: 15px;
}
#esport_expert .news_lists li a img {
width: 153px;
height: 86px;
margin-right: 15px;
}
#esport_expert .news_lists li a .txt_wrap {
width: 268px;
}
#esport_expert .news_lists li a .txt_wrap h3 {
width: 100%;
font-size: 15px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#esport_expert .news_lists li a .txt_wrap p {
font-size: 14px;
color: #777;
line-height: 19px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
max-height: 38px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 4px;
}
#esport_expert .news_lists li a .txt_wrap .source {
font-size: 13px;
color: #777;
}
학습내용 중 어려웠던 점
영상에는 스킵 했지만 영상 더보기 배치작업을 어케 할지 고민하는데 시간이 약간 걸렸고 매번 한줄 말줄임 표시만 사용하다 두줄로 표시하려니 새로운 코드가 있어서 생소했습니다.
해결방법
영상 보기는 저 경기 다시보기를 감싸고 있는 div태그에 relative를 주고 새로운 자식 div와 a태그를 이용했고 자식 div태그에 position을 주고 padding을 좌우로 10px을 줘서 border가 양 옆으로 끊기는 형태로 작업했고 x축 중앙과 bottom을 이용해 배치작업을 했습니다. 그리고 따로 a태그에 공간을 만들고 타원의 디자인을 적용했습니다.
두줄 말줄임 표시는 자중 사용안해밨기 때문에 앞으로 자주 사용하면 코드에 쉽게 익숙해 질거라 생각합니다.
학습소감
페이지 마다 두줄 말줄임 표시가 많이 나와서 한번 찾아서 해보려고 했는데 영상에 나와서 쉽게 이해했고 스킵되는 부분이 점점 생긴다는 것은 div로 감싸는 위치나 안에 태그들의 형태와 크기만 다를 뿐이지 레이아웃은 공통적이 부분이 많은거 같아 레이아웃에 대한 이해만 있으면 다양한 형태를 만들수 있을거라 생각합니다.
Author And Source
이 문제에 관하여(2021.07.01 (네이버 이스포츠 2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lstem12/2021.07.01-naver-esport-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
