210817 네이버 오디오 클립 카피캣
학습내용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>홈 : 오디오클립</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 오디오클립 상단 -->
<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>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">
<img src="img/magnifier.png" class="icon-search">
<input type="text" placeholder="무엇을 찾으세요?">
</div>
<div class="profile-wrap audio-flex-end">
<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">
<a href="#">
<div class="audio-slide audio-flex-start">
<img src="https://via.placeholder.com/415x198">
<div class="txt-wrap">
<h3>현대지성 고전문학 70% 할인</h3>
<p>명상록, 톨스토이 고백록 외 6권을 들어보세요!</p>
</div>
</div>
</a>
<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>하지현의 하트 : 마음 이야기</h3>
<span class="author">하지현의 하트</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1</h3>
<span class="author">author</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1</h3>
<span class="author">author</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1</h3>
<span class="author">author</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>Title 1</h3>
<span class="author">author</span>
</a>
</li>
</ul>
<button type="button" class="btn 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="img-wrap">
<img src="https://via.placeholder.com/152">
<i class="icon-play"></i>
</div>
<h3>이번주 베스트 추천</h3>
</a>
</li>
<li>
<a href="#">
<div class="img-wrap">
<img src="https://via.placeholder.com/152">
<i class="icon-play"></i>
</div>
<h3>KBS 뉴스</h3>
</a>
</li>
<li>
<a href="#">
<div class="img-wrap">
<img src="https://via.placeholder.com/152">
<i class="icon-play"></i>
</div>
<h3>마음주치의</h3>
</a>
</li>
<li>
<a href="#">
<div class="img-wrap">
<img src="https://via.placeholder.com/152">
<i class="icon-play"></i>
</div>
<h3>데일리 증시</h3>
</a>
</li>
</ul>
<button type="button" class="btn 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>빗소리 ASMR 잠못드는 밤</h3>
<span class="time">라이브 중</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>[Live] 오늘아침 라이브</h3>
<span class="time">8.17. 7:30 예정</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>[삼성전자x다사소] 갤럭시 Z Flip 3</h3>
<span class="time">8.16. 14:00 예정</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>20210817 장중 종목점검</h3>
<span class="time">8.17. 9:00 예정</span>
</a>
</li>
<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>불멍 ASMR 모닥불</h3>
<span class="time">라이브 중</span>
</a>
</li>
</ul>
</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">4시간 55분</span>
</div>
<h3>자기만의 방 (민음사 세계문학,완독본)</h3>
<span class="author-1">버지니아 울프 저</span>
<span class="author-2">천지선 낭독</span>
<span class="price">대여 3,000원</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120">
<span class="time">4시간 55분</span>
</div>
<h3>Title 1</h3>
<span class="author-1">저자</span>
<span class="author-2">낭독</span>
<span class="price">대여 3,000원</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120x110">
<span class="time">4시간 55분</span>
</div>
<h3>Title 1</h3>
<span class="author-1">저자</span>
<span class="author-2">낭독</span>
<span class="price">대여 3,000원</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120">
<span class="time">4시간 55분</span>
</div>
<h3>Title 1</h3>
<span class="author-1">저자</span>
<span class="author-2">낭독</span>
<span class="price">대여 3,000원</span>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120x140">
<span class="time">4시간 55분</span>
</div>
<h3>Title 1</h3>
<span class="author-1">저자</span>
<span class="author-2">낭독</span>
<span class="price">대여 3,000원</span>
</a>
</li>
</ul>
<button type="button" class="btn 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>향기나는 편지</h3>
<span class="author">향기나는편지</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>향기나는 편지</h3>
<span class="author">향기나는편지</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>향기나는 편지</h3>
<span class="author">향기나는편지</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>향기나는 편지</h3>
<span class="author">향기나는편지</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>향기나는 편지</h3>
<span class="author">향기나는편지</span>
</a>
</li>
</ul>
<button type="button" class="btn 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>
<button type="button" class="btn btn-right"></button>
</div>
</div>
<div id="audio-discovery" class="audio-section">
<div class="audio-header">
<h2>
오늘의 발견<br>
요즘 많이 듣는 채널👍
</h2>
<p>8월 16일 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>[자장가] 피아노 테라피 (Relaxing Happy Music)</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>
<li><a href="#">결제관련문의</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</nav>
<a href="#" class="footer-copyright-link">
<span class="symbol">©</span>
NAVER Corp.
</a>
</div>
</footer>
</body><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>카테고리 : 오디오클립</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 오디오클립 카데고리 상단 -->
<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>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">
<img src="img/magnifier.png" class="icon-search">
<input type="text" placeholder="무엇을 찾으세요?">
</div>
<div class="profile-wrap audio-flex-end">
<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="audio-category-channel" class="audio-category">
<div class="title-wrap">
<h2>채널</h2>
<p>4,989개의 채널</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>
</ul>
</div>
<div id="audio-category-book" class="audio-category">
<div class="title-wrap">
<h2>오디오북</h2>
<p>20,477개의 채널</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>
</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>
<li><a href="#">결제관련문의</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</nav>
<a href="#" class="footer-copyright-link">
<span class="symbol">©</span>
NAVER Corp.
</a>
</div>
</footer>
</body>Author And Source
이 문제에 관하여(210817 네이버 오디오 클립 카피캣), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jungchulheo0512/210817-네이버-오디오-클립-카피캣저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
