개발일지 28일차
학습 내용
- 네이버 이스포츠 오른쪽파트
e-sport.html
<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">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">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">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">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">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">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">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">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">1</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 class="arrow arrow-left"></button>
<span>06.05토</span>
<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:10</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:10</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>style.css
#esport-main .right { float: right; width: 357px; /*background-color: grey;*/ } #esport-news-view { padding: 20px; border: solid 1px grey; border-radius: 10px; margin-bottom: 30px; } #esport-news-view h2 { font-size: 18px; } #esport-news-view ol { margin-top: 20px; } #esport-news-view li { margin-bottom: 8px; } #esport-news-view li:last-child { margin-bottom: 0; } #esport-news-view li a { /*display: block;*/ } #esport-news-view li .image-wrap { overflow: hidden; position: relative; width: 84px; height: 48px; border: solid 1px rgba(0, 0, 0, 0.04); border-radius: 4px; } #esport-news-view li .image-wrap img { position: absolute; width: 100%; height: 100%; } #esport-news-view li .image-wrap .rank { position: absolute; background-color: #4e41db; border-bottom-right-radius: 4px; padding: 4px 10px; top: 0; left: 0; font-size: 13px; font-weight: 800; color: #fff; } #esport-news-view li h3 { width: 218px; font-size: 14px; line-height: 19px; display: -webkit-box; overflow: hidden; max-height: 38px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } #esport-schedule { } #esport-schedule h2 { font-size: 18px; } #esport-schedule .schedule-wrap { margin-top: 15px; border: solid 1px grey; border-radius: 4px; } #esport-schedule .schedule-wrap .schedule-header { padding: 14px 15px; border-bottom: solid 1px grey; } #esport-schedule .schedule-wrap .schedule-header .arrow { width: 20px; height: 20px; } #esport-schedule .schedule-wrap .schedule-header .arrow.arrow-left { background-color: yellow; } #esport-schedule .schedule-wrap .schedule-header .arrow.arrow-right { background-color: greenyellow; } #esport-schedule .schedule-wrap .schedule-header span { position: relative; font-size: 18px; font-weight: 800; top: 1px; } #esport-schedule .schedule-wrap .schedule-body { padding: 17px 0; } #esport-schedule .schedule-wrap .schedule-body ul { } #esport-schedule .schedule-wrap .schedule-body li { } #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; margin-bottom: 12px; text-align: center; } #esport-schedule .schedule-wrap .schedule-body li .status-wrap { } #esport-schedule .schedule-wrap .schedule-body li .status-wrap:hover { background-color: yellow; cursor: pointer; } #esport-schedule .schedule-wrap .schedule-body li .status-wrap .status { background-color: rgba(255, 0, 0, 0.1); color: red; font-size: 11px; font-weight: 500; border-radius: 3px; margin-right: 4.5px; padding: 2px 4px; } #esport-schedule .schedule-wrap .schedule-body li .status-wrap .time { position: relative; font-size: 15px; font-weight: 700; top: 2px; }
결과
학습한 내용 중 어려웠던 점 또는 해결하지 못한 것들
없음
해결한 방법
학습 소감
폰트 자체에 미세한 공간 때문에 간격이 어그러지는 부분이 있었는데 그런 세세한 디테일을 캐치하여 조정하여야함을 깨달음
I'm Closer