8월 17일 화
학습한 내용
필기 1
letter-spacing = 글자 간격 조절
<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>제목</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-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>제목 영역입니다</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>제목 영역입니다</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>제목 영역입니다</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>제목 영역입니다</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>제목 영역입니다</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 class="active">
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120">
<div class="live-state">
<span class="time">2시간</span>
</div>
</div>
<h3>제목 영역입니다</h3>
<span class="author-1">개발자</span>
<span class="author-2">개발자</span>
<span class="price">대여 4,500원</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="time">2시간</span>
</div>
</div>
<h3>제목 영역입니다</h3>
<span class="author-1">개발자</span>
<span class="author-2">개발자</span>
<span class="price">대여 4,500원</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="time">2시간</span>
</div>
</div>
<h3>제목 영역입니다</h3>
<span class="author-1">개발자</span>
<span class="author-2">개발자</span>
<span class="price">대여 4,500원</span>
</a>
</li>
<li class="active">
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120x110">
<div class="live-state">
<span class="time">2시간</span>
</div>
</div>
<h3>제목 영역입니다</h3>
<span class="author-1">개발자</span>
<span class="author-2">개발자</span>
<span class="price">대여 4,500원</span>
</a>
</li>
<li class="active">
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/120x130">
<div class="live-state">
<span class="time">2시간</span>
</div>
</div>
<h3>제목 영역입니다</h3>
<span class="author-1">개발자</span>
<span class="author-2">개발자</span>
<span class="price">대여 4,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 class="active">
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>제목 영역입니다</h3>
<span class="author-1">개발자</span>
<span class="price">대여 4,500원</span>
</a>
</li>
<li class="active">
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>제목 영역입니다</h3>
<span class="author-1">개발자</span>
<span class="price">대여 4,500원</span>
</a>
</li>
<li class="active">
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>제목 영역입니다</h3>
<span class="author-1">개발자</span>
<span class="price">대여 4,500원</span>
</a>
</li>
<li class="active">
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>제목 영역입니다</h3>
<span class="author-1">개발자</span>
<span class="price">대여 4,500원</span>
</a>
</li>
<li class="active">
<a href="#">
<img src="https://via.placeholder.com/120">
<h3>제목 영역입니다</h3>
<span class="author-1">개발자</span>
<span class="price">대여 4,500원</span>
</a>
</li>
</ul>
<button type="button" class="btn-right"></button>
</div>
</div>
</div>
/*8월 17일 화*/#audio-main {
width: 100%;
height: 2000px;
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-sction .audio-header h2 {
font-size: 22px;
font-weight: 500;
letter-spacing: -.8px;
}
.audio-sction .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 {
width: 100%;
}
#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 img .icon-play {
position: absolute;
width: 32px;
height: 32px;
background-color: yellow;
border-radius: 50%;
bottom: -16px;
right: 10px;}
#audio-playlist .audio-body li h3 {
padding: 17px 11px;
font-size: 13px;
background-color: #ffffff;
}
#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, 0.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 .author-1 {
display: block;
font-size: 12px;
margin-top: 4px;
color: #959595;}
#audio-book .audio-body .author-2 {
display: block;
font-size: 12px;
color: #959595;
}
#audio-book .audio-body .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;
}
학습한 내용 중 어려웠던 점 또는 해결못한 것들
문제1
between 배치가 적용 되지 않음.
해결방법 작성
문제1 = 모르겠음. 소스코드 제공 양식에도 똑같음. 뭔가 문제가 있는 듯.
학습 소감
실습 진행하는데 짜증나는 하루였다. 배치 부분에서 똑같이 따라해도 제대로 되지가 않는다. 소스코드 제공되는 걸 검토해보고 파일을 바꿔봐도 똑같다. 교육 진행이 개인별로하다보니 질문하기도 불편해서 질문하고 싶지도 않고 마음에 안든다. 솔직히 강의 듣고 보고서 쓰고 이게 편하기는 한데 학습 측면에서는 별로 도움이 안된다. 1시간 짜리 강의라도 중간 중간에 멈추고 들어야하고 또 집중도 안되면 플레이 시간만 늘어날 뿐이다. 이런 스타일은 내게 안맞는다.
