2021년 8월 17일 36일차
학습한 내용
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"><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>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;
}
결과물
학습내용 중 어려웠던 점
오늘은 사진을 응용하는 법을 배웠다.
매번 같은 이미지를 그냥 넣어서 이미지에 대한 편집을 하지 않았는데,
다른것을 해보려하니 조금 생소해서 어려웠던 것 같다.
해결방법
이미지에 대한 연구를 여러번 해보면 될 것 같다.
학습소감
뭔가 같은 포맷으로 수업이 이루어져 조금은 지루하고 그랬는데, 오늘은 다른 방식으로 디자인을 하다보니 조금 색다르게 느껴졌다.
