Dev log - 36, 네이버 오디오 카피캣 실습 #2

박강산·2021년 8월 17일

대구AI스쿨 - 개발일지

목록 보기

36/44

학습한 내용

네이버 오디오 실습 - 기본 세팅

HTML 문서

<!DOCTYPE html>
<html>
<head>                 
	<meta charset="utf-8">
	<title>네이버</title>

	<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>

CSS 문서

/* Default CSS */
* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000000;
}

img {
	vertical-align: middle;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}

.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}

.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-section {
	padding: 32px 0;
}

.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 영역의 txt-wrap 영역이 좌우로 정렬되지 않고 레이아웃이 틀어져서, txt-wrap 영역에 width 값을 지정하여 해결하였음
audio-container 영역의 overflow: hidden 값 때문에 다음과 같은 현상이 일어남

왼쪽 버튼의 모양을 제대로 나타내기 위해서 overflow: hidden 값을 제거하고, audio-flex-between 라는 class 를 추가함

HTML 문서

<body>
	<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">
							<div class="audio-slide audio-flex-between">							
								<img src="https://via.placeholder.com/413x196">

								<div class="txt-wrap">
									<h3>정우성, 이영애가 읽어주는 세계 문학</h3>
									<p>소장본 10% 할인, 구매 인증 시 수록도서 증정</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>Title 1 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 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 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 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 Title 1</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>Title 2 Title 2 Title 2 Title 2</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 2 Title 2 Title 2 Title 2</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 2 Title 2 Title 2 Title 2</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 2 Title 2 Title 2 Title 2</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 2 Title 2 Title 2 Title 2</h3>
									<span class="author">라이브 중</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/120x150">
										<span class="time">15시간 44분</span>
									</div>
									
									<h3>Title 3 Title 3 Title 3 Title 3</h3>
									<span class="author-1">네이버 네이버</span>
									<span class="author-2">네이버</span>
									<span class="price">대여 5,500원</span>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image-wrap ">
										<img src="https://via.placeholder.com/120x145">
										<span class="time">15시간 44분</span>
									</div>
									
									<h3>Title 3 Title 3 Title 3 Title 3</h3>
									<span class="author-1">네이버 네이버</span>
									<span class="author-2">네이버</span>
									<span class="price">대여 5,500원</span>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image-wrap ">
										<img src="https://via.placeholder.com/120x130">
										<span class="time">15시간 44분</span>
									</div>
									
									<h3>Title 3 Title 3 Title 3 Title 3</h3>
									<span class="author-1">네이버 네이버</span>
									<span class="author-2">네이버</span>
									<span class="price">대여 5,500원</span>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image-wrap ">
										<img src="https://via.placeholder.com/120x150">
										<span class="time">15시간 44분</span>
									</div>
									
									<h3>Title 3 Title 3 Title 3 Title 3</h3>
									<span class="author-1">네이버 네이버</span>
									<span class="author-2">네이버</span>
									<span class="price">대여 5,500원</span>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image-wrap ">
										<img src="https://via.placeholder.com/120x145">
										<span class="time">15시간 44분</span>
									</div>
									
									<h3>Title 3 Title 3 Title 3 Title 3</h3>
									<span class="author-1">네이버 네이버</span>
									<span class="author-2">네이버</span>
									<span class="price">대여 5,500원</span>
								</a>
							</li>
						</ul>

						<button type="button" class="btn-right"></button>						
					</div>
				</div>
			</div>
		</div>
	</main>
</body>

CSS 문서 1 - style.css

#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-today .audio-slide {
	align-items: flex-start;
}

#audio-today .audio-slide img {
	width: 413px;
	height: 196px;
	border-radius: 8px;
}

#audio-today .audio-slide .txt-wrap {
    width: 221px;
}

#audio-today .audio-slide .txt-wrap h3 {
	font-size: 15px;
	padding-top: 2px;
}

#audio-today .audio-slide .txt-wrap p {
	font-size: 11px;
	margin-top: 13px;
}

#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-body ul {
	align-items: flex-start;
}

#audio-original .audio-body ul li {
	width: 120px;
}

#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-header {
	position: relative;
}

#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 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-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-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-book .audio-body .btn-right {
	top: 65px;
}

#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-channel .audio-body .btn-right {
	top: 65px;
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들

audio-today 영역의 txt-wrap 영역이 좌우로 정렬되지 않고 레이아웃이 틀어지는 현상

해결방법

txt-wrap 영역에 width 값을 설정해주었더니 해결됨, 다른 레이아웃 크기 때문에 틀어짐 현상이 벌어진듯 함.

학습 소감

오늘은 어제에 이어서 네이버 오디오클립 사이트 카피캣 실습을 진행하였음. 오늘의 실습은 3차원 속성과 2차원 속성을 다양하게 변경하여 진행되었는데, 어떤 것을 2차원으로 설정해야하여 3차원과 중복이 되게 할지, 아니면 3차원으로 변경할지 잘 생각하여 진행해야됨을 느꼈음. 특히 오늘 오디오북 영역의 time 영역을 겹치게 표기하기 위해서 img 영역을 바로 2차원을 변경하여 진행한 것은 배웠던 내용이지만 새롭게 다가왔음.

박강산

안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.

이전 포스트

Dev log - 35, 네이버 이스포츠 카피캣 실습 #3, 네이버 오디오 카피캣 실습 #1

다음 포스트

Dev log - 36, 네이버 오디오 카피캣 실습 #2

대구AI스쿨 - 개발일지

학습한 내용

네이버 오디오 실습 - 기본 세팅

네이버 오디오 실습 - 네이버 오디오 왼쪽 영역

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법

학습 소감

Dev log - 35, 네이버 이스포츠 카피캣 실습 #3, 네이버 오디오 카피캣 실습 #1

Dev log - 37, 네이버 오디오 카피캣 실습 #3

0개의 댓글