2021년 8월 18일 37일차
학습한 내용
html - audio
네이버<link rel="stylesheet" type="text/css" href="css/style.css"><header id="audio-header">
<div class="audio-container">
<nav id="audio-nav" class="audio-flex-between">
<div class="audio-nav-left audio-flex-between">
<h1 class="audio-logo">
<a href="#">audio clip</a>
</h1>
<ul class="audio-flex-end">
<li><a href="audio.html" class="active"><span>홈</span></a></li>
<li><a href="#"><span>랭킹</span></a></li>
<li><a href="#"><span>연재 채널</span></a></li>
<li><a href="#"><span>오디오북</span></a></li>
<li><a href="audio-category.html"><span>카테고리</span></a></li>
<li><a href="#"><span>이벤트</span></a></li>
</ul>
</div>
<div class="audio-nav-right audio-flex-between">
<div class="search-wrap audio-flex-start">
<i class="icon-search"></i>
<input type="text">
</div>
<div class="profile-wrap">
<img src="https://via.placeholder.com/32" class="profile-img">
<a href="#" class="btn-login">로그인</a>
</div>
</div>
</nav>
</div>
</header>
<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>
<div class="audio-main-right">
<div id="audio-intro" 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/152x152">
<h3>공유의 베드타임 스토리</h3>
<span class="source">네이버</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x152">
<h3>밀레니얼의 시사친구, 듣똑라</h3>
<span class="source">중앙그룹</span>
</a>
</li>
</ul>
</div>
</div>
<div id="audio-discovery" class="audio-section">
<div class="audio-header">
<h2>
오늘의 발견<br>
요즘 많이 듣는 채널👍
</h2>
<p>6월 9일 0시부터 24시까지 많이 들은 채널입니다.</p>
<a href="#" class="link-setting">관심 설정</a>
</div>
<div class="audio-body">
<ul class="audio-flex-between">
<li>
<a href="#">
<img src="https://via.placeholder.com/152x152">
<h3>클래식 매니저</h3>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x152">
<h3>클래식 매니저</h3>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x152">
<h3>클래식 매니저</h3>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x152">
<h3>클래식 매니저</h3>
</a>
</li>
</ul>
<button class="btn-more">
<span class="color-blue">더 많이</span> 발견하기 1 <span class="pages">/ 5</span>
</button>
</div>
</div>
<div id="audio-create" class="audio-section">
<div class="audio-body">
<ul>
<li>
<a href="#" class="audio-flex-between">
<div class="txt-wrap">
<h2>오디오클립 채널을 만들어 보세요!</h2>
<p class="color-blue">콘텐츠 제안하기</p>
</div>
<div class="list-bg list-bg-1"></div>
</a>
</li>
<li>
<a href="#" class="audio-flex-between">
<div class="txt-wrap">
<h2>오디오클립 채널을 만들어 보세요!</h2>
<p class="color-purple">콘텐츠 제안하기</p>
</div>
<div class="list-bg list-bg-2"></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<footer id="audio-footer">
<div class="audio-container">
<h1>
<a href="#">audio clip</a>
</h1>
<div class="copyright-wrap">
<p>
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세<br>
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세<br>
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세
</p>
</div>
<nav class="footer-nav">
<ul>
<li><a href="#">로그인</a></li>
<li><a href="#">오디오클립</a></li>
<li><a href="#">오디오클립</a></li>
<li><a href="#">오디오클립</a></li>
<li><a href="#">오디오클립</a></li>
<li><a href="#">오디오클립</a></li>
<li><a href="#">오디오클립</a></li>
</ul>
</nav>
<a href="#" class="footer-copyright-link">
<span class="symbol">©</span>
네이버
</a>
</div>
</footer>html - audio-category
네이버<link rel="stylesheet" type="text/css" href="css/style.css"><header id="audio-header">
<div class="audio-container">
<nav id="audio-nav" class="audio-flex-between">
<div class="audio-nav-left audio-flex-between">
<h1 class="audio-logo">
<a href="#">audio clip</a>
</h1>
<ul class="audio-flex-end">
<li><a href="audio.html"><span>홈</span></a></li>
<li><a href="#"><span>랭킹</span></a></li>
<li><a href="#"><span>연재 채널</span></a></li>
<li><a href="#"><span>오디오북</span></a></li>
<li><a href="audio-category.html" class="active"><span>카테고리</span></a></li>
<li><a href="#"><span>이벤트</span></a></li>
</ul>
</div>
<div class="audio-nav-right audio-flex-between">
<div class="search-wrap audio-flex-start">
<i class="icon-search"></i>
<input type="text">
</div>
<div class="profile-wrap">
<img src="https://via.placeholder.com/32" class="profile-img">
<a href="#" class="btn-login">로그인</a>
</div>
</div>
</nav>
</div>
</header>
<main id="audio-main" class="audio-sub-main" role="main">
<div class="audio-container">
<div id="auido-category-channel" class="audio-category">
<div class="title-wrap">
<h2>채널</h2>
<p>4,752개의 채널</p>
</div>
<ul class="audio-category-lists">
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
</ul>
</div>
<div id="auido-category-book" class="audio-category">
<div class="title-wrap">
<h2>오디오북</h2>
<p>4,752개의 채널</p>
</div>
<ul class="audio-category-lists">
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>예능</h3>
<p>유머, 코미디, 고민상담</p>
<img class="thumbnail" src="https://via.placeholder.com/103">
</a>
</li>
</ul>
</div>
</div>
</main>
<footer id="audio-footer">
<div class="audio-container">
<h1>
<a href="#">audio clip</a>
</h1>
<div class="copyright-wrap">
<p>
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세<br>
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세<br>
동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세
</p>
</div>
<nav class="footer-nav">
<ul>
<li><a href="#">로그인</a></li>
<li><a href="#">오디오클립</a></li>
<li><a href="#">오디오클립</a></li>
<li><a href="#">오디오클립</a></li>
<li><a href="#">오디오클립</a></li>
<li><a href="#">오디오클립</a></li>
<li><a href="#">오디오클립</a></li>
</ul>
</nav>
<a href="#" class="footer-copyright-link">
<span class="symbol">©</span>
네이버
</a>
</div>
</footer>css
.audio-container {
width: 1080px;
margin: 0 auto;
}
.audio-flex-start {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: stretch;
}
.audio-flex-between {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
}
.audio-flex-center {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: stretch;
}
.audio-flex-end {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
align-content: stretch;
}
#audio-header {
position: fixed;
width: 100%;
background-color: #ffffff;
border-bottom: solid 1px #efeff4;
left: 0;
top: 0;
z-index: 99999;}
#audio-header .audio-nav-left {
width: 660px;
}
#audio-header .audio-nav-left .audio-logo {
font-size: 25px;
}
#audio-header .audio-nav-left .audio-logo a {
}
#audio-header .audio-nav-left ul {
padding-top: 10px;
}
#audio-header .audio-nav-left li {
}
#audio-header .audio-nav-left li a {
display: block;
font-size: 17px;
padding: 12px 13px 17px 12px;
}
#audio-header .audio-nav-left li a.active {
font-weight: 700;
}
#audio-header .audio-nav-left li a span {
position: relative;
display: inline-block;
height: 21px;
}
#audio-header .audio-nav-left li a.active span:after {
display: block;
position: absolute;
content: "";
border-bottom: solid 3px #222222;
border-radius: 1.5px;
z-index: 1;
left: -4.5px;
right: -5.5px;
bottom: -17px;}
#audio-header .audio-nav-right {
width: 330px;
}
#audio-header .audio-nav-right .search-wrap {
width: 180px;
height: 40px;
background-color: #ffffff;
border: solid 2px rgba(0, 86, 201, .2);
border-radius: 4px;
}
#audio-header .audio-nav-right .search-wrap .icon-search {
width: 40px;
height: 100%;
background-color: yellow;
}
#audio-header .audio-nav-right .search-wrap input {
width: calc(100% - 40px);
height: 100%;
padding: 8px 15px;
font-size: 15px;
outline: none;
border: none;}
#audio-header .audio-nav-right .search-wrap input:focus {
outline: none;
}
#audio-header .audio-nav-right .profile-wrap {
}
#audio-header .audio-nav-right .profile-wrap .profile-img {
width: 32px;
height: 32px;
border-radius: 50%;
}
#audio-header .audio-nav-right .profile-wrap .btn-login {
font-size: 15px;
padding-left: 8px;
}
#audio-main {
width: 100%;
background-color: #f6f8fa;
padding-top: 61px;}
#audio-main .audio-container {
/overflow: hidden;/
align-items: flex-start;
}
#audio-main .audio-main-left {
/float: left;/
width: 660px;
}
#audio-main .audio-main-right {
/float: right;/
width: 330px;
}
/ 각 섹션별 공통 디자인 /
.audio-section {
padding: 32px 0;
}
.audio-section .audio-header {
}
.audio-section .audio-header h2 {
font-size: 22px;
font-weight: 500;
letter-spacing: -.8px;
}
.audio-section .audio-body {
position: relative;
padding-top: 19px;
}
.audio-section .audio-body .btn-right {
position: absolute;
width: 35px;
height: 35px;
background-color: yellow;
border-radius: 50%;
right: -17px;
}
/ 오늘의 오디오 클립 /
#audio-today .audio-slide {
align-items: flex-start;
}
#audio-today .audio-slide img {
width: 380px;
height: 198px;
}
#audio-today .audio-slide .txt-wrap h3 {
font-size: 18px;
padding-top: 2px;
}
#audio-today .audio-slide .txt-wrap p {
margin-top: 12px;
}
#audio-today .audio-slide-wrap {
position: relative;
}
#audio-today .audio-slide-wrap .btn {
position: absolute;
width: 35px;
height: 35px;
background-color: yellow;
border-radius: 50%;
top: 80px;}
#audio-today .audio-slide-wrap .btn-left {
left: -17px;
}
#audio-today .audio-slide-wrap .btn-right {
right: -17px;
}
#audio-original {
}
#audio-original .audio-body {
}
#audio-original .audio-body ul {
align-items: flex-start;
}
#audio-original .audio-body ul li {
width: 120px;
}
#audio-original .audio-body li a {
}
#audio-original .audio-body li img {
border-radius: 10px;
}
#audio-original .audio-body h3 {
font-size: 13px;
margin-top: 10px;
}
#audio-original .audio-body .author {
font-size: 12px;
margin-top: 6px;
color: #959595;}
#audio-original .audio-body .btn-right {
top: 60px;
}
#audio-playlist {
}
#audio-playlist .audio-header {
position: relative;
}
#audio-playlist .audio-header h2 {
}
#audio-playlist .audio-header p {
font-size: 13px;
margin-top: 8px;
color: #888888;
font-weight: 400;
}
#audio-playlist .audio-header .link-total {
display: block;
position: absolute;
padding: 10px 18px 8px;
background-color: #ffffff;
font-size: 13px;
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 20px;
box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);
color: #157efb;
right: 0;
top: 6px;}
#audio-playlist .audio-body {
}
#audio-playlist .audio-body ul {
align-items: flex-start;
}
#audio-playlist .audio-body li {
width: 152px;
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
#audio-playlist .audio-body li .image-wrap {
position: relative;
width: 150px;
height: 150px;
}
#audio-playlist .audio-body li .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#audio-playlist .audio-body li .image-wrap .icon-play {
position: absolute;
width: 32px;
height: 32px;
background-color: yellow;
border-radius: 50%;
bottom: -16px;
right: 10px;}
#audio-playlist .audio-body li h3 {
background-color: #ffffff;
padding: 17px 11px;
font-size: 13px;
}
#audio-playlist .audio-body .btn-right {
top: 90px;
}
#audio-live {
}
#audio-live .audio-body {
}
#audio-live .audio-body ul {
align-items: flex-start;
}
#audio-live .audio-body li {
width: 120px;
}
#audio-live .audio-body li .image-wrap {
position: relative;
width: 120px;
height: 120px;
border: solid 2px grey;
border-radius: 50%;
}
#audio-live .audio-body li .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
border: solid 2px #ffffff;
border-radius: 50%;
}
#audio-live .audio-body li .image-wrap .live-state {
position: absolute;
padding: 2px;
border: solid 2px #ffffff;
border-radius: 3px;
background-color: #ffffff;
bottom: -15px;
left: 50%;
transform: translateX(-50%);}
#audio-live .audio-body li .image-wrap .live-state .live {
display: block;
padding: 4px 8px;
color: red;
border: solid 2px red;
border-radius: 3px;
background-color: #ffffff;
font-size: 10px;}
#audio-live .audio-body li.active .image-wrap .live-state .live {
border: solid 2px red;
background-color: red;
color: #ffffff;}
#audio-live .audio-body li h3 {
margin-top: 16px;
font-size: 13px;
}
#audio-live .audio-body li .author {
margin-top: 6px;
font-size: 12px;
color: #959595;
}
#audio-book {
}
#audio-book .audio-body {
}
#audio-book .audio-body ul {
align-items: flex-start;
}
#audio-book .audio-body li {
width: 120px;
}
#audio-book .audio-body .image-wrap {
position: relative;
width: 100%;
}
#audio-book .audio-body .image-wrap img {
/position: absolute;/
width: 100%;
}
#audio-book .audio-body .image-wrap .time{
position: absolute;
padding: 2px 5px 0;
background-color: rgba(17, 17, 17, .75);
font-size: 11px;
color: #ffffff;
right: 5px;
bottom: 5px;}
#audio-book .audio-body li h3 {
font-size: 13px;
margin-top: 11px;
}
#audio-book .audio-body li .author-1 {
display: block;
font-size: 12px;
margin-top: 4px;
color: #959595;}
#audio-book .audio-body li .author-2 {
display: block;
font-size: 12px;
color: #959595;
}
#audio-book .audio-body li .price {
display: block;
font-size: 12px;
margin-top: 4px;
font-weight: 500;
}
#audio-channel {
}
#audio-channel .audio-body {
}
#audio-channel .audio-body ul {
align-items: flex-start;
}
#audio-channel .audio-body li {
width: 120px;
}
#audio-channel .audio-body li img {
width: 120px;
height: 120px;
border: solid 1px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
#audio-channel .audio-body li h3 {
font-size: 13px;
margin-top: 10px;
}
#audio-channel .audio-body li .author {
font-size: 12px;
margin-top: 6px;
color: #959595;
}
#audio-intro {
}
#audio-intro .audio-body ul {
}
#audio-intro .audio-body li {
}
#audio-intro .audio-body li a {
}
#audio-intro .audio-body li img {
width: 152px;
height: 152px;
border-radius: 4px;
}
#audio-intro .audio-body li h3 {
margin-top: 12px;
font-size: 13px;
}
#audio-intro .audio-body li .soruce {
margin-top: 4px;
font-size: 12px;
color: #959595;
}
#audio-discovery {
}
#audio-discovery .audio-header {
position: relative;
}
#audio-discovery .audio-header h2 {
font-size: 17px;
line-height: 24px;
}
#audio-discovery .audio-header p {
margin-top: 7px;
font-size: 13px;
color: #888;
}
#audio-discovery .audio-header .link-setting{
display: block;
position: absolute;
padding: 10px 18px 8px;
background-color: #ffffff;
font-size: 13px;
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 20px;
box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);
color: #157efb;
right: 0;
top: 6px;
}
#audio-discovery .audio-body ul {
}
#audio-discovery .audio-body li {
margin-bottom: 40px;
}
#audio-discovery .audio-body li a {
}
#audio-discovery .audio-body li img {
width: 152px;
height: 152px;
border-radius: 4px;
}
#audio-discovery .audio-body li h3 {
margin-top: 12px;
font-size: 13px;
}
#audio-discovery .audio-body .btn-more {
display: block;
margin: 0 auto;
font-size: 14px;
color: #222;
padding: 12px 21px 12px 21px;
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 24px;
background-color: #ffffff;
box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);
font-weight: 500;}
#audio-discovery .audio-body .btn-more .color-blue {
color: #157efb;
}
#audio-discovery .audio-body .btn-more .pages{
color: #959595;
}
#audio-create {
}
#audio-create .audio-body {
}
#audio-create .audio-body li {
padding: 22px 4px;
border-top: solid 1px #efefef;
}
#audio-create .audio-body li:last-child {
border-bottom: solid 1px #efefef;
}
#audio-create .audio-body li a {
}
#audio-create .audio-body li .txt-wrap {
width: 225px;
}
#audio-create .audio-body li .txt-wrap h2 {
font-size: 16px;
font-weight: 700;
}
#audio-create .audio-body li .txt-wrap p {
font-size: 14px;
margin-top: 6px;
letter-spacing: -.8px;
}
#audio-create .audio-body li .txt-wrap p.color-blue {
color: #2db8e8;
}
#audio-create .audio-body li .txt-wrap p.color-purple {
color: #8560f7;
}
#audio-create .audio-body li .list-bg {
width: 80px;
height: 64px;
}
#audio-create .audio-body li .list-bg.list-bg-1 {
background-color: yellow;
}
#audio-create .audio-body li .list-bg.list-bg-2 {
background-color: purple;
}
#audio-footer {
background-color: #eaecef;
padding: 48px 0 164px;
}
#audio-footer h1 {
font-size: 25px;
}
#audio-footer h1 a {
color: #959595;
}
#audio-footer .copyright-wrap {
margin-top: 37px;
}
#audio-footer .copyright-wrap p {
letter-spacing: -.5px;
font-size: 13px;
line-height: 19px;
color: #959595;}
#audio-footer .footer-nav {
margin-top: 47px;
}
#audio-footer .footer-nav ul {
overflow: hidden;
}
#audio-footer .footer-nav li {
float: left;
}
#audio-footer .footer-nav li a {
font-size: 13px;
color: #959595;
}
#audio-footer .footer-nav li a:after {
display: inline-block;
content: "";
width: 2px;
height: 2px;
border-radius: 50%;
background-color: #959595;
/*margin: 4px 7px;*/
vertical-align: top;
margin: 9px 7px 0;}
#audio-footer .footer-nav li:last-child a:after {
content: none;
}
#audio-footer .footer-copyright-link {
display: block;
margin-top: 8px;
font-size: 12px;
color: #959595;
}
#audio-footer .footer-copyright-link .symbol{
}
/ 오디오의 카테고리 /
#audio-main.audio-sub-main {
background-color: #ffffff;
}
.audio-category {
padding-top: 71px;
}
.audio-category .title-wrap {
padding-bottom: 20px;
border-bottom: solid 1px #ececec;
}
.audio-category .title-wrap h2 {
font-size: 27px;
font-weight: 600;
letter-spacing: -1px;
}
.audio-category .title-wrap p {
font-size: 14px;
color: #959595;
margin-top: 20px;
}
.audio-category .audio-category-lists {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: stretch;
margin-top: 22px;
}
.audio-category .audio-category-lists .category-list {
width: 162px;
height: 164px;
margin-right: 20px;
margin-bottom: 20px;
}
.audio-category .audio-category-lists .category-list:nth-child(6n) {
margin-right: 0;
}
.audio-category .audio-category-lists .category-list:nth-child(odd) a {
/background-color: yellow;/
}
.audio-category .audio-category-lists .category-list:nth-child(even) a {
/background-color: pink;/
}
.audio-category .audio-category-lists a {
overflow: hidden;
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: rgb(230, 125, 127);
border-radius: 6px;
padding: 14px;
}
.audio-category .audio-category-lists a h3 {
font-size: 19px;
line-height: 1.3;
color: #ffffff;
}
.audio-category .audio-category-lists a p {
position: absolute;
width: 80px;
font-size: 13px;
color: #fefefe;
bottom: 14px;}
.audio-category .audio-category-lists a .thumbnail{
position: absolute;
width: 78px;
height: 78px;
right: -13px;
bottom: 0;
transform: rotate(25deg);}
#auido-category-book {
padding-bottom: 120px;
}
결과물
학습내용 중 어려웠던 점
수업 내용이 빨라서 따라가기 힘들었다.
해결방법
좀더 집중하고자 배속을 느리게 하고, 머릿속에 시뮬레이션을 돌리고 강의를 들었다.
학습소감
내용이 어렵지는 않지만 여러가지 응용을 잘해야겠다라고 느꼈다.
그리고 한가지만의 방법을 고수할것이 아니라 여러가지 방법을 시도를 함으로써 나의 실력을 향상시켜야 겠다라고 다짐했다.
