2021.07.02(NAVER Sports3)
44780 ワード
学習の内容
[ネイバースポーツ右側部分]
<div class="right">
<div id="esport_news_view">
<h2>많이 본 뉴스</h2>
<ol>
<li>
<a href="#" class="esport_flex_between">
<div class="image_wrap">
<img src="https://via.placeholder.com/84x48">
<span class="rank">1</span>
</div>
<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
</a>
</li>
<li>
<a href="#" class="esport_flex_between">
<div class="image_wrap">
<img src="https://via.placeholder.com/84x48">
<span class="rank">2</span>
</div>
<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
</a>
</li>
<li>
<a href="#" class="esport_flex_between">
<div class="image_wrap">
<img src="https://via.placeholder.com/84x48">
<span class="rank">3</span>
</div>
<h3>타이틀 타이틀</h3>
</a>
</li>
<li>
<a href="#" class="esport_flex_between">
<div class="image_wrap">
<img src="https://via.placeholder.com/84x48">
<span class="rank">4</span>
</div>
<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
</a>
</li>
<li>
<a href="#" class="esport_flex_between">
<div class="image_wrap">
<img src="https://via.placeholder.com/84x48">
<span class="rank">5</span>
</div>
<h3>타이틀 타이틀 타이틀 타이틀</h3>
</a>
</li>
<li>
<a href="#" class="esport_flex_between">
<div class="image_wrap">
<img src="https://via.placeholder.com/84x48">
<span class="rank">6</span>
</div>
<h3>타이틀 타이틀 타이틀 </h3>
</a>
</li>
<li>
<a href="#" class="esport_flex_between">
<div class="image_wrap">
<img src="https://via.placeholder.com/84x48">
<span class="rank">7</span>
</div>
<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
</a>
</li>
<li>
<a href="#" class="esport_flex_between">
<div class="image_wrap">
<img src="https://via.placeholder.com/84x48">
<span class="rank">8</span>
</div>
<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
</a>
</li>
<li>
<a href="#" class="esport_flex_between">
<div class="image_wrap">
<img src="https://via.placeholder.com/84x48">
<span class="rank">9</span>
</div>
<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h3>
</a>
</li>
<li>
<a href="#" class="esport_flex_between">
<div class="image_wrap">
<img src="https://via.placeholder.com/84x48">
<span class="rank">10</span>
</div>
<h3>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
타이틀 </h3>
</a>
</li>
</ol>
</div>
<div id="esport_schedule">
<h2>e스포츠 경기 일정/결과</h2>
<div class="schedule_wrap">
<div class="schedule_header esport_flex_between">
<button type="button" class="arrow arrow_left"></button>
<span>07.02 금</span>
<button type="button" class="arrow arrow_right"></button>
</div>
<div class="schedule_body">
<ul>
<li>
<h3>2021 LCK AS 챔피언십 플러그 3일차</h3>
<div class="status_wrap esport_flex_center">
<span class="status">진행중</span>
<span class="time">10:00</span>
</div>
</li>
<li>
<h3>2021 LCK AS 챔피언십 플러그 3일차</h3>
<div class="status_wrap esport_flex_center">
<span class="status">진행중</span>
<span class="time">10:00</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>#esport_main .right {
float: right;
width: 357px;
}
#esport_news_view {
border: solid 1px grey;
border-radius: 10px;
padding: 20px;
margin-bottom: 30px;
}
#esport_news_view h2 {
font-size: 18px;
}
#esport_news_view ol {
margin-top: 20px;
}
#esport_news_view ol li {
margin-bottom: 13px;
}
#esport_news_view ol li:last-child {
margin-bottom: 0;
}
#esport_news_view ol li a .image_wrap {
position: relative;
width: 84px;
height: 48px;
overflow: hidden;
border: solid 1px rgba(0, 0, 0, .04);
border-radius: 6px;
}
#esport_news_view ol li a .image_wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#esport_news_view ol li a .image_wrap .rank {
position: absolute;
width: 22px;
border-bottom-right-radius: 6px;
background-color: #4e41db;
font-size: 13px;
font-weight: 800;
color: #ffffff;
line-height: 19px;
text-align: center;
padding: 2px 0;
top: 0;
left: 0;
}
#esport_news_view ol li a h3 {
width: 218px;
font-size: 14px;
line-height: 19px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
max-height: 38px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#esport_schedule {
}
#esport_schedule h2 {
font-size: 18px;
}
#esport_schedule .schedule_wrap {
border: solid 1px grey;
border-radius: 4px;
margin-top: 15px;
}
#esport_schedule .schedule_wrap .schedule_header {
border-bottom: solid 1px grey;
padding: 10px 15px;
}
#esport_schedule .schedule_wrap .schedule_header .arrow {
width: 20px;
height: 20px;
}
#esport_schedule .schedule_wrap .schedule_header .arrow_left {
background-color: yellow;
}
#esport_schedule .schedule_wrap .schedule_header .arrow_right {
background-color: greenyellow;
}
#esport_schedule .schedule_wrap .schedule_header span {
font-size: 18px;
font-weight: 800;
}
#esport_schedule .schedule_wrap .schedule_body {
padding: 17px 0;
}
#esport_schedule .schedule_wrap .schedule_body li:first-child:after {
display: block;
content: "";
width: calc(100% - 40px);
height: 1px;
background-color: rgba(0, 0, 0, .05);
margin: 17px auto;
}
#esport_schedule .schedule_wrap .schedule_body li h3 {
font-size: 14px;
text-align: center;
margin-bottom: 12px;
}
#esport_schedule .schedule_wrap .schedule_body li .status_wrap:hover {
cursor: pointer;
background-color: yellow;
}
#esport_schedule .schedule_wrap .schedule_body li .status_wrap .status {
font-size: 11px;
font-weight: 500;
color: red;
border-radius: 3px;
background-color: rgba(255, 0, 0, .1);
padding: 2px 4px;
margin-right: 4.5px;
}
#esport_schedule .schedule_wrap .schedule_body li .status_wrap .time {
font-size: 15px;
font-weight: 700;
}
[Webフォントを適用]
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;学習内容の難点
あまり難しくはありませんが、border-radiusをどのように適用するか、liとマークされたborderを最初の間に配置するときに値を入力していないか知りたいです.
解決策
border-bottom-right-radiusはこのように底の右側の特定の部分だけを適用し、4つの異なる位置を指定することができ、borderは入れたいliタグの間にdiv,height 1 pxを入れ、次に,適切なwidth値と中央ソートを用いることを考慮し,afterはhtmlのコードを増やさずに簡潔に解決し,ビデオ方式で修正した.
学習の心得.
cssの広範な応用に伴い,同じレイアウトであるにもかかわらず,異なる感覚,特にフォントの違い,同じページの感覚が大きく異なることが分かった.
Reference
この問題について(2021.07.02(NAVER Sports3)), 我々は、より多くの情報をここで見つけました https://velog.io/@lstem12/2021.07.02-naver-esport-3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol