20210817
학습한 내용
네이버 오디오 2편
네이버 오디오 왼쪽 영역
<main id="audio-main" role="main">
<div class="audio-container audio-flex-between">
<div class="audio-main-left">
<div id="audio-today" class="audio-section">
<div class="audio-header">
<h2>오늘의 오디오클립</h2>
</div>
<div class="audio-body">
<div class="audio-slide-wrap">
<div class="audio-slide audio-flex-between">
<img src="https://via.placeholder.com/415x198">
<div class="txt-wrap">
<h3>[재혼 황후]오디오 드라마</h3>
<p>오디오 드라마로 만나는 레전드 웹소설!</p>
</div>
</div>
<button type="button" class="btn btn-left"></button>
<button type="button" class="btn btn-right"></button>
</div>
</div>
</div>
<div id="audio-original" class="audio-section">
<div class="audio-header">
<h2>오디오클립 추천 오리지널</h2>
</div>
<div class="audio-body">
<ul class="audio-flex-between">
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
</ul>
<button type="button" class="btn-right"></button>
</div>
</div>
<div id="audio-playlist" class="audio-section">
<div class="audio-header">
<h2>나를 위한 플레이리스트</h2>
<p>당신을 위해 매일 새롭게 업데이트 됩니다.</p>
<a href="#" class="link-total">전체보기</a>
</div>
<div class="audio-body">
<ul class="audio-flex-between">
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/152">
<i class="icon-play"></i>
</div>
<h3>이번주 베스트 추천</h3>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/152">
<i class="icon-play"></i>
</div>
<h3>이번주 베스트 추천</h3>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/152">
<i class="icon-play"></i>
</div>
<h3>이번주 베스트 추천</h3>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/152">
<i class="icon-play"></i>
</div>
<h3>이번주 베스트 추천</h3>
</a>
</li>
</ul>
<button type="button" class="btn-right"></button>
</div>
</div>
<div id="audio-live" class="audio-section">
<div class="audio-header">
<h2>라이브 ON</h2>
</div>
<div class="audio-body">
<ul class="audio-flex-between">
<li class="active">
<a href="#">
<div class="image-wrap ">
<img src="https://via.placeholder.com/120">
<div class="live-state">
<span class="live">LIVE</span>
</div>
</div>
<h3>Title 1 Title 1 Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120">
<div class="live-state">
<span class="live">LIVE</span>
</div>
</div>
<h3>Title 1 Title 1 Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120">
<div class="live-state">
<span class="live">LIVE</span>
</div>
</div>
<h3>Title 1 Title 1 Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120">
<div class="live-state">
<span class="live">LIVE</span>
</div>
</div>
<h3>Title 1 Title 1 Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120">
<div class="live-state">
<span class="live">LIVE</span>
</div>
</div>
<h3>Title 1 Title 1 Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
</ul>
<button type="button" class="btn-right"></button>
</div>
</div>
<div id="audio-book" class="audio-section">
<div class="audio-header">
<h2>주간 베스트 오디오북 TOP 100</h2>
</div>
<div class="audio-body">
<ul class="audio-flex-between">
<li>
<a href="#">
<div class="image-wrap ">
<img src="https://via.placeholder.com/120">
<span class="time">2시간</span>
</div>
<h3>Title 1 Title 1 Title 1</h3>
<span class="author-1">기발자</span>
<span class="author-2">기발자</span>
<span class="price">대여 3,500원</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap ">
<img src="https://via.placeholder.com/120">
<span class="time">2시간</span>
</div>
<h3>Title 1 Title 1 Title 1</h3>
<span class="author-1">기발자</span>
<span class="author-2">기발자</span>
<span class="price">대여 3,500원</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap ">
<img src="https://via.placeholder.com/120">
<span class="time">2시간</span>
</div>
<h3>Title 1 Title 1 Title 1</h3>
<span class="author-1">기발자</span>
<span class="author-2">기발자</span>
<span class="price">대여 3,500원</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap ">
<img src="https://via.placeholder.com/120x110">
<span class="time">2시간</span>
</div>
<h3>Title 1 Title 1 Title 1</h3>
<span class="author-1">기발자</span>
<span class="author-2">기발자</span>
<span class="price">대여 3,500원</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap ">
<img src="https://via.placeholder.com/120x130">
<span class="time">2시간</span>
</div>
<h3>Title 1 Title 1 Title 1</h3>
<span class="author-1">기발자</span>
<span class="author-2">기발자</span>
<span class="price">대여 3,500원</span>
</a>
</li>
</ul>
<button type="button" class="btn-right"></button>
</div>
</div>
<div id="audio-channel" class="audio-section">
<div class="audio-header">
<h2>새로 나온 채널</h2>
</div>
<div class="audio-body">
<ul class="audio-flex-between">
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1 Title 1 Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1 Title 1 Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1 Title 1 Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1 Title 1 Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1 Title 1 Title 1</h3>
<span class="author">기발자</span>
</a>
</li>
</ul>
<button type="button" class="btn-right"></button>
</div>
</div>
</div>학습내용 중 어려웠던 점
css 적용이 안되어 잘못된 코드를 찾는데 시간이 걸렸다.
해결방법
몇줄을 빠뜨리고 작성된것을 발견.
학습소감
빨리 하기보다는 천천히 알아간다는 마음으로 해야겠다.
