2021.08.17네이버오디오2

101886 단어 대구AI스쿨대구AI스쿨

오늘의 강의 내용

* 네이버오디오 왼쪽부분 카피캣

카피캣 영역인 네이버오디오 왼쪽부분

네이버오디오 왼쪽부분 카피캣 완료된 모습

<!-- audio.html언어 -->
	<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/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>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>

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

					</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/120">
										<span class="time">7시간 17분</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">7시간 17분</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">7시간 17분</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">7시간 17분</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">7시간 17분</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>

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

			</div>
            
<!-- style.css언어 -->
#audio_main {
	width: 100%;
	height: 2000px;
	background-color: #f6f8fa;

	padding-top: 61px;
}

#audio_main .audio_container {
	align-items: flex-start;
}

#audio_main .audio_main_left {
	width: 660px;
}

#audio_main .audio_main_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: -0.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_wrap {
	width: 100%;
}

#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 {
	font-size: 13px;
	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 gray;
	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 {
	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 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: 60px;
}


#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_channel .audio_body .btn_right {
	top: 60px;
}

강의가 끝난후 소감

소스코드 작성할때에 순서라고 해야하나? 큰그림을 그리는것에 고민하게 되었다.

힘든점, 문제점

이번강의는 큰틀을 짜는거에서 조금 혼란이 있었다. 먼저 하는것이 뭔지 아는것이 중요해보인다.

개선방안

반복된 연습을 하는것이 중요해 보인다. 그리고 다른 사이트를 자습으로 카피해보는것도 좋을것 같다.

[210508][백준/BOJ] 11052번 카드 구매하기
[BOJ] 1697번 : 숨바꼭질

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage