2021_08_17 개발일지

Yeo Eunhye·2021년 8월 17일
개발일지
0

1) 학습한 내용

오늘은 오디오페이지 왼쪽 영역을 완성시켜보았다.

1. audio-today

- html

<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>

- css

/* Auadio main*/
#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;
	height: 100%;
}


#audio-main .audio-main-right {
	/*float: right;*/
	width: 330px;
	height: 100%;
}


/* 각 섹션별 공통 디자인  */
.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: palegoldenrod;
    border-radius: 50%;
	right: -17px;
	top: 56px;
}


/*  오늘의 오디오 클립  */
#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: palegoldenrod;
	border-radius: 50%;

	top: 80px;
}
#audio-today .audio-slide-wrap .btn-left {
	left: -17px;
}

#audio-today .audio-slide-wrap .btn-right {
	right: -17px;
}

2. audio-original

- html

<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>

- css

#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;
}

3. audio-playlist

- html

<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"><img src="img/play.png"></i>
									</div>

									<h3>이번주 베스트 추천</h3>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/152">
										
										<i class="icon-play"><img src="img/play.png"></i>
									</div>

									<h3>이번주 베스트 추천</h3>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/152">
										
										<i class="icon-play"><img src="img/play.png"></i>
									</div>

									<h3>이번주 베스트 추천</h3>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/152">
										
										<i class="icon-play"><img src="img/play.png"></i>
									</div>

									<h3>이번주 베스트 추천</h3>
								</a>
							</li>
						</ul>

						<button type="button" class="btn-right"></button>


					</div>
					
				</div>

- css

#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 {
	overflow: hidden;
	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;
}

4. audio-live

- html


				<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>

- css

#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: 11px;
}

#audio-live .audio-body li .author {
	margin-top: 6px;
	font-size: 10px;
	color: #959595;
}

5. audio-book

- html

<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>

- css

#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: 11px;
	margin-top: 11px;
}

#audio-book .audio-body li .author-1 {
	display: block;
	font-size: 10px;
	margin-top: 4px;

	color: #959595;
}

#audio-book .audio-body li .author-2 {
	display: block;
	font-size: 10px;	
	color: #959595;
}

#audio-book .audio-body li .price {
	display: block;
	font-size: 10px;
	margin-top: 4px;
	font-weight: 500;
}

6. audio-channel

- html

<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>

- css

#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: 11px;
    margin-top: 10px;
}

#audio-channel .audio-body li .author {
	font-size: 10px;
    margin-top: 6px;
    color: #959595;
}

2) 학습내용 중 어려웠던 점 및 해결방법

페이지 왼쪽 부분을 마무리하고 보니 많은 부분들의 레이아웃이 틀어져있었다. 막상 만들때는 생각하지 않았던 부분들이 끝나고 나니 보였다.
그래서 다시 하나하나 글씨크기를 바꾸고
옆에있는 화살표를 넣는 부분의 위치도 조정해주었다.
이렇게 글씨체가 다르다보니 생기는 문제가 조금씩 있는 것 같다.

3) 학습소감

오랜만에 오랜시간 쉬다 와서 그런지 속도가 조금 느려진 느낌을 받았다.
겨우하루 더 쉬었는데도 이렇게나 휴가를 다녀온사람 처럼 제대로 집중을 못한것 같다.
다시 마음을 다잡고 내일부터는 집중할 수 있도록 해야겠다.

profile
Yeo Eunhye
아직 여백이 많은 개린이입니다.
이전 포스트

2021_08_13개발일지(2)

다음 포스트

2021_08_18개발일지

0개의 댓글