개발일지 26일차
학습 내용
- 네이버 e스포츠 header영역
e-sport.html
<header id="esport-header">
<nav id="esport-nav">
<div class="esport-container">
<div class="nav-wrap esport-flex-between">
<div class="left esport-flex-start">
<h1><a href="#">e스포츠</a></h1>
<ul class="esport-flex-start">
<li><a href="game.html">GAME</a></li>
<li><a href="#">PC게임</a></li>
</ul>
</div>
<div class="center">
<ul class="esport-flex-center">
<li><a href="#" class="active">홈</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 class="right esport-flex-end">
<a href="#">로그인</a>
<a href="#">메뉴</a>
</div>
</div>
</nav>
</header>
<main role="main" id="esport-main">
<div id="esport-main-top">
<div class="esport-container">
<div class="timeline-wrap">
<ul class="esport-flex-start">
<li>
<a href="#">
<span class="date">오늘 (06.05)</span>
<h2>2021 LCK AS 챔피언쉽 풀리그 3일차</h2>
<div class="status-wrap esport-flex-between">
<span class="live">LIVE</span>
<span class="status">진행중</span>
</div>
</a>
</li>
<li>
<a href="#">
<span class="date">오늘 (06.05)</span>
<h2>2021 LCK AS 챔피언쉽 풀리그 3일차</h2>
<div class="status-wrap esport-flex-between">
<span class="live">LIVE</span>
<span class="status">진행중</span>
</div>
</a>
</li>
<li>
<a href="#">
<span class="date">오늘 (06.05)</span>
<h2>2021 LCK AS 챔피언쉽 풀리그 3일차</h2>
<div class="status-wrap esport-flex-between">
<span class="live">LIVE</span>
<span class="status">진행중</span>
</div>
</a>
</li>
<li>
<a href="#">
<span class="date">오늘 (06.05)</span>
<h2>2021 LCK AS 챔피언쉽 풀리그 3일차</h2>
<div class="status-wrap esport-flex-between">
<span class="live">LIVE</span>
<span class="status">진행중</span>
</div>
</a>
</li>
<li>
<a href="#">
<span class="date">오늘 (06.05)</span>
<h2>2021 LCK AS 챔피언쉽 풀리그 3일차</h2>
<div class="status-wrap esport-flex-between">
<span class="live">LIVE</span>
<span class="status">진행중</span>
</div>
</a>
</li>
<li>
<a href="#">
<span class="date">오늘 (06.05)</span>
<h2>2021 LCK AS 챔피언쉽 풀리그 3일차</h2>
<div class="status-wrap esport-flex-between">
<span class="live">LIVE</span>
<span class="status">진행중</span>
</div>
</a>
</li>
</ul>
</div>
<div class="live-wrap">
<h2>라이브중인 경기 <span class="count">2</span></h2>
<ul class="esport-flex-between">
<li>
<a href="#" class="esport-flex-between">
<img src="https://via.placeholder.com/442x252">
<div class="txt-wrap">
<span>진행중</span>
<h3>2021 PMPS S1 WEEKLY FINAL DAY 3</h3>
</div>
</a>
</li>
<li>
<a href="#" class="esport-flex-between">
<img src="https://via.placeholder.com/442x252">
<div class="txt-wrap">
<span>진행중</span>
<h3>2021 PMPS S1 WEEKLY FINAL DAY 3</h3>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</main>
style.css
/* e-sport */ .esport-flex-between { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: stretch; } .esport-flex-start { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: stretch; } .esport-flex-center { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: stretch; } .esport-flex-end { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; align-content: stretch; } .esport-container { width: 1280px; margin: 0 auto; } /*header*/ #esport-header { position: fixed; width: 100%; background-color: #151618; border-bottom: solid 1px grey; left: 0; top: 0; } #esport-header #esport-nav { /*height: 60px;*/ } #esport-header #esport-nav a { color: #ffffff; } /* esport-flex-between가 적용되어 있기 때문에 자동으로 y축 센터값이 적용 */ #esport-header #esport-nav .nav-wrap { height: 60px; } #esport-header #esport-nav .left h1 { font-size: 20px; } #esport-header #esport-nav .left li { } #esport-header #esport-nav .left li:before { display: inline-block; content: ''; width: 1px; height: 14px; margin: 0 12px; background-color: rgba(160, 165, 182, .3); } #esport-header #esport-nav .left li a { color: grey; } #esport-header #esport-nav .center li { margin-right: 24px; } #esport-header #esport-nav .center li:last-child { margin-right: 0; } #esport-header #esport-nav .center li a { display: inline-block; height: 60px; line-height: 60px; border-bottom: solid 5px transparent; color: grey; font-size: 17px; padding-bottom: 10px; } #esport-header #esport-nav .center li a.active { color: #ffffff; border-bottom: solid 5px #ffffff; } #esport-header #esport-nav .center li a:hover { color: darkgrey; } #esport-header #esport-nav .right a { border: solid 1px hsla(0, 0%, 80%, .3); border-radius: 8px; padding: 4px 8px; font-size: 12px; } #esport-header #esport-nav .right a:last-child { margin-left: 10px; } #esport-main { padding-top: 61px; } #esport-main-top { background-color: #151618; } #esport-main-top .timeline-wrap { padding: 20px 0; } #esport-main-top .timeline-wrap ul { } #esport-main-top .timeline-wrap li { width: 16.6%; background-color: #272b31; border-radius: 10px; margin-right: 1px; } #esport-main-top .timeline-wrap li:last-child { margin-right: 0; } #esport-main-top .timeline-wrap li a { display: block; width: 100%; padding: 14px 18px; color: #fff; } #esport-main-top .timeline-wrap li a .date { font-size: 12px; font-weight: 500; } #esport-main-top .timeline-wrap li a h2 { font-size: 13px; margin-top: 6px; color: #a0a5b6; } #esport-main-top .timeline-wrap li a .status-wrap { margin-top: 35px; } #esport-main-top .timeline-wrap li a .status-wrap .live { font-size: 12px; font-weight: 700; } #esport-main-top .timeline-wrap li a .status-wrap .status { font-size: 12px; font-weight: 500; color: red; } #esport-main-top .live-wrap { padding-bottom: 60px; } #esport-main-top .live-wrap h2 { font-size: 18px; color: #fff; margin-bottom: 20px; } #esport-main-top .live-wrap h2 .count { color: #8a7cff; } #esport-main-top .live-wrap ul { } #esport-main-top .live-wrap li { overflow: hidden; width: 625px; background-color: #1f2227; border-radius: 10px; } #esport-main-top .live-wrap a { /*display: block;*/ /*width: 100%;*/ /*height: 100%;*/ align-items: flex-start; } #esport-main-top .live-wrap li img { width: 442px; height: 252px; } #esport-main-top .live-wrap li .txt-wrap { width: 183px; padding: 17px 22px; } #esport-main-top .live-wrap li .txt-wrap span { color: red; background-color: rgba(255, 0, 0, 0.2); padding: 3px 7px; border-radius: 3px; } #esport-main-top .live-wrap li .txt-wrap h3 { font-size: 15px; color: #fff; margin-top: 8px; }
결과
학습한 내용 중 어려웠던 점 또는 해결하지 못한 것들
오늘 학습한 내용 모두 해결
해결한 방법
학습 소감
javascript를 적용하여 좀 더 완벽하게 작업을 하면 좋을 것 같다는 생각이 든다.
Author And Source
이 문제에 관하여(개발일지 26일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hijaekyeoung/개발일지-26일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)