8월 13일 Velog
학습한 내용
네이버 e스포츠 실습 #3
https://game.naver.com/esports
5. Esport Right
구조
[html]
<div id="esport_right">
<div id="esport_news_view"></div>
<div id="esport_schedule"></div>
</div>[css]
#esport_main #esport_right {
width: 357px;
margin-top: 30px;
}(1) esport news view
[html]
<div id="esport_news_view">
<h3>많이 본 뉴스</h3>
<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>
<h4>[LCK 서머] 단독 1위에서 어느새 5위로</h4>
</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>
<h4>'리헨즈' 손시우 "도란, 솔랭서 만나면 트롤짓 해…복수하겠다" [인터뷰]</h4>
</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>
<h4>[LCK 리뷰] ‘선발전 경쟁팀 상대 1승’ 한화생명, 정말 벼랑끝 몰렸다</h4>
</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>
<h4>[LCK 프리뷰] 'PO 2R 확률 6.117%'...침체된 젠지, 경기력 살아날까</h4>
</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>
<h4>[LCK] 'KT 롤스터'는 꺾지 못한 6연승의 리브 샌드박스</h4>
</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>
<h4>[LPL P.O] '합비의 장료' 타잔 대활약한 LNG, P.O 2라운드 선착 (LNG vs SN)</h4>
</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>
<h4>[LCK] PO 2R 직행 경쟁 이어가고 싶은 젠지, '복병' 프레딧 브리온을 잡아라</h4>
</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>
<h4>[LCK] 리브 샌드박스, 4위로 떨어지며 '충격'...2021 LCK 순위(8월 12일 기준)</h4>
</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>
<h4>'T1 37%·젠지 6%' 더 높은 순위를 차지할 팀은?…플옵 2R 직행 확률</h4>
</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>
<h4>[LCK 서머] '상체' 라인전 '벌크업' 필요한 DRX-농심</h4>
</a>
</li>
</ol>
</div>[css]
#esport_main #esport_right #esport_news_view {
padding: 20px;
border: solid 1px lightgrey;
border-radius: 10px;
margin-bottom: 30px;
}
#esport_news_view h3 {
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;
overflow: hidden;
width: 84px;
height: 48px;
border: solid 1px rgba(0, 0, 0, 0.04);
border-radius: 6px;
}
#esport_news_view .image_wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#esport_news_view .image_wrap .rank {
position: absolute;
width: 22px;
padding: 1px 0;
background-color: #4e41db;
border-bottom-right-radius: 4px;
font-size: 13px;
line-height: 19px;
font-weight: 800;
color: #ffffff;
text-align: center;
top: 0;
left: 0;
}
#esport_news_view ol li a h4 {
display: -webkit-box;
overflow: hidden;
width: 218px;
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;
line-height: 19px;
}- border-bottom-right-radius 로 영역별로 border를 명시할 수 있다.
(2) esport schedule
[html]
<div id="esport_schedule">
<h3>e스포츠 경기 일정/결과</h3>
<div class="schedule_wrap">
<div class="schedule_header esport_flex_between">
<button type="button" class="btn btn_prev"></button>
<span class="date">08.13 금</span>
<button type="button" class="btn btn_next"></button>
</div>
<ul class="schedule_body">
<li class="live">
<h4>2021 LCK 서머 정규시즌 2R</h4>
<a class="icon_wrap esport_flex_between">
<div class="icon one">
<i></i>
<span class="name">젠지</span>
</div>
<div class="status_wrap">
<span class="status">예정</span>
<span class="time">17:00</span>
</div>
<div class="icon two">
<i></i>
<span class="name">프레딧</span>
</div>
</a>
</li>
<li>
<div class="icon_wrap esport_flex_between">
<div class="icon one">
<i></i>
<span class="name">DRX</span>
</div>
<div class="status_wrap">
<span class="status">예정</span>
<span class="time">20:00</span>
</div>
<div class="icon two">
<i></i>
<span class="name">농심</span>
</div>
</div>
</li>
<li>
<h4>PWS : EAST ASIA PHASE 2 Wild Card W4</h4>
<div class="status_wrap future esport_flex_center">
<span class="status">예정</span>
<span class="time">19:00</span>
</div>
</li>
<li class="live">
<h4>2021 와일드 리프트 라이벌즈 DAY 3</h4>
<a class="status_wrap live esport_flex_center">
<span class="status">진행중</span>
<span class="time">13:00</span>
</a>
</li>
</ul>
</div>
</div>[css]
#esport_main #esport_right #esport_schedule h3 {
font-size: 18px;
}
#esport_schedule .schedule_wrap {
margin-top: 15px;
border: solid 1px lightgrey;
border-radius: 8px;
}
#esport_schedule .schedule_wrap .schedule_header {
padding: 14px 15px;
border-bottom: solid 1px lightgrey;
}
#esport_schedule .schedule_header .btn {
width: 20px;
height: 20px;
background-color: black;
border-radius: 4px;
}
#esport_schedule .schedule_header .date {
font-size: 18px;
font-weight: 800;
}
#esport_schedule .schedule_wrap .schedule_body {
/*margin: 0 20px;*/
}
#esport_schedule .schedule_body li {
margin: 0 20px;
padding: 7px 0 10px;
border-bottom: solid 1px lightgrey;
text-align: center;
}
#esport_schedule .schedule_body li:last-child {
border-bottom: 0;
}
#esport_schedule .schedule_body li h4 {
font-size: 14px;
font-weight: 500;
margin-top: 8px;
padding-bottom: 6px;
}
#esport_schedule .schedule_body li .status_wrap {
padding: 3px 0 8px;
}
#esport_schedule .schedule_body li .status_wrap .status {
display: inline-block;
width: 36px;
padding: 3px 0 4px;
background-color: rgba(163,173,202,.16);
border-radius: 3px;
font-size: 11px;
font-weight: 500;
margin-right: 4.5px;
}
#esport_schedule .schedule_body li .status_wrap .time {
display: inline-block;
font-size: 15px;
font-weight: 700;
}
#esport_schedule .schedule_body li .status_wrap.live:hover {
background-color: #f3f4f9;
cursor: pointer;
}
#esport_schedule .schedule_body li .status_wrap.live .status {
color: red;
}
#esport_schedule .schedule_body li .icon_wrap {
padding: 0 50px 0;
margin-top: 3px;
margin-bottom: 8px;
}
#esport_schedule .schedule_body li.live .icon_wrap:hover {
background-color: #f3f4f9;
cursor: pointer;
}
#esport_schedule .schedule_body li .icon_wrap .icon {
text-align: center;
}
#esport_schedule .schedule_body li .icon_wrap .icon i {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: lightgrey;
}
#esport_schedule .schedule_body li .icon_wrap .icon .name {
display: block;
margin-top: 5px;
font-size: 13px;
font-weight: 700;
}
#esport_schedule .schedule_body li .icon_wrap .status_wrap {
margin-left: 10px;
}
#esport_schedule .schedule_body li .icon_wrap .status {
display: block;
width: 60px;
padding: 3px 0 4px;
}
#esport_schedule .schedule_body li .icon_wrap .time {
display: block;
width: 60px;
height: 28px;
background-color: rgba(163,173,202,.16);
border-radius: 5px;
font-size: 15px;
font-weight: 700;
margin-top: 8px;
}
6. 폰트 서체 바꾸기
[html]
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>네이버 e스포츠</title>
</head>[css]
* {
font-family: 'Nanum Gothic', sans-serif;
}
- link 태그 가져올 때 태그 순서를 지키는 것도 중요하다.
- 여러개를 한번에 선택해서 동시에 가져올 수 있다.
- 우선순위대로 나열한다.
새로 공부한 내용
강사님과 다르게 left와 right를 flex를 사용해서 정렬했는데 height를 제거하면 자꾸 줄바꿈? 위치가 이동되었다. 그 전에는 그런 경우가 없어서 의아했는데 flex를 주는 대신 strech를 따로 적용하니까 위에서부터 원하는 대로 정렬되었다. 전체 영역을 좌우로 정렬할 때는 강사님처럼 float을 사용하는 것이 더 간편하다는 것을 알게 되었다.
Author And Source
이 문제에 관하여(8월 13일 Velog), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ryuyoungseo8232/813Velog저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
