HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>네이버</title>
</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 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="#" 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" placeholder="무엇을 찾으세요?">
</div>
<div class="profile-wrap">
<img src="https://ssl.pstatic.net/static/audio/img/m/2018/img/img_user.png?type=s80" 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/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>어학</h3>
<p>영어, 중국어, 일본어</p>
<img class="thumbnail" src="https://via.placeholder.com/103x103">
</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>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</a>
</li>
<li class="category-list">
<a href="#">
<h3>소설</h3>
<p>
세계문학,<br>
한국소설
</p>
<img class="thumbnail" src="https://via.placeholder.com/82x119">
</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>
Curabitur aliquet quam id dui posuere blandit.
</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="#" class="on">개인정보처리방침</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
<span>Corp.</span>
</a>
</div>
</footer>
</body>
</html>CSS
/* 메인 오른쪽 */
.audio-main-right {
float: right;
width: 330px;
}
#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 h2 {
margin-top: 12px;
font-size: 13px;
}
#audio-intro .audio-body li .author {
margin-top: 4px;
font-size: 12px;
color: #959595;
}
#audio-intro .audio-body button {
top: 82px;
}
#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;
color: #157efb;
font-weight: 600;
border: solid 1px rgba(0, 0, 0, .1);
border-radius: 20px;
box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);
right: 0;
top: 0px;
}
#audio-discovery .audio-body ul {
}
#audio-discovery .audio-body li {
width: 152px;
margin-bottom: 40px;
}
#audio-discovery.audio-body li a {
}
#audio-discovery .audio-body li img {
width: 100%;
height: 152px;
border-radius: 4px;
}
#audio-discovery .audio-body li h2 {
margin-top: 12px;
font-size: 13px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 36px;
}
#audio-discovery .audio-body .btn-more {
display: block;
margin: 0 auto;
font-size: 14px;
color: #222;
padding: 12px 21px 12px;
border: solid 1px rgba(0, 0, 0, .1);
border-radius: 24px;
background-color: #ffffff;
box-shadow: 0 2px 10px 0 rgb(80 85 91 /7%);
font-weight: 600;
cursor: pointer;
}
#audio-discovery .audio-body .btn-more .color-blue {
color: #157efb;
}
#audio-discovery .audio-body .btn-more .pages {
color: #959595;
}
#audio-create {
padding-top: 0 !important;
}
#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;
letter-spacing: -0.5px;
}
#audio-create .audio-body li .txt-wrap p {
margin-top: 6px;
font-size: 14px;
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: #2db8e8;
}
#audio-create .audio-body li .list-bg.list-bg-2 {
background-color: #8560f7;
}
#audio-footer {
background-color: #eaecef;
padding: 48px 0 164px;
font-family: Roboto,NotosansKR,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Helvetica Neue",Helvetica,Arial,"Malgun Gothic","ë§‘ì€ ê³ ë”•",Dotum,"ë‹ì›€",sans-serif;;
}
#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;
color: #959595;
line-height: 19px;
}
#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;
letter-spacing: -1px;
}
#audio-footer .footer-nav li a.on {
font-weight: 600;
}
#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-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 a {
position: relative;
display: block;
width: 100%;
height: 100%;
background-color: rgb(133, 134, 247);
border-radius: 6px;
padding: 14px;
overflow: hidden;
}
.audio-category .audio-category-lists .category-list a h3 {
font-size: 19px;
line-height: 1.3;
color: #ffffff;
}
.audio-category .audio-category-lists .category-list a p {
position: absolute;
width: 80px;
font-size: 13px;
color: #fefefe;
bottom: 14px;
}
.audio-category .audio-category-lists .category-list a .thumbnail {
position: absolute;
width: 78px;
height: 78px;
right: -17px;
bottom: 0;
transform: rotate(25deg);
border-radius: inherit;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}
#audio-category-book {
padding-bottom: 121px;
}
#audio-category-book .category-list a {
background-color: rgb(200, 100, 108);
}
#audio-category-book .category-list .thumbnail {
width: 82px;
height: 119px;
right: -25px;
}어려운점
-
카피캣을 그대로 따라했지만, 전체적인 그림을 잘 못그리겠음
-
코드가 길어지고 세부내용에 대한 조정을 실제 혼자서 할 수 있을지 계속 의문이 듦
-
세부 그림이 적용될 때의 값에 대한 어려움
해결방법
-
네이버 카피캣의 처음 부분부터 다시 시작해봄
-
코드의 세부내용은 복습하기로 함
-
세부 값들에 대해 고민하지 않고 조정해보면서 맞춰봄.
학습소감
- 네이버의 카테고리별로 카피캣을 따라해봤는데 과연이게 도움이 될지 의문이 드는 것은 지금까지 따라해봤지만 남이 만들어 놓은 것을 그저 따라한 것이라 과연 혼자 할 수 있을지 의문이 들기 때문임. 혼자서 더 연습이 필요하다고 생각함.
Please be wonderful but don't be so serious, enjoy this journey with the good people!