학습한 내용

네이버 오디오 3편

네이버 오디오 오른쪽, 하단, 카테고리 페이지

			<div class="audio-main-right">
				
				<div id="audio-intro" 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/152x152">
									<h3>공유의 베드타임 스토리</h3>
									<span class="source">네이버</span>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>밀레니얼의 시사친구, 듣똑라</h3>
									<span class="source">중앙그룹</span>
								</a>
							</li>
						</ul>
					</div>
				</div>



				<div id="audio-discovery" class="audio-section">
					<div class="audio-header">
						<h2>
							오늘의 발견<br>
							요즘 많이 듣는 채널👍
						</h2>
						<p>6월 9일 0시부터 24시까지 많이 들은 채널입니다.</p>
						<a href="#" class="link-setting">관심 설정</a>
					</div>

					<div class="audio-body">
						<ul class="audio-flex-between">
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>클래식 매니저</h3>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>클래식 매니저</h3>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>클래식 매니저</h3>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>클래식 매니저</h3>
								</a>
							</li>
						</ul>

						<button class="btn-more">
							<span class="color-blue">더 많이</span> 발견하기 1 <span class="pages">/ 5</span>
						</button>
					</div>
				</div>


				<div id="audio-create" class="audio-section">
					<div class="audio-body">
						<ul>
							<li>
								<a href="#" class="audio-flex-between">
									<div class="txt-wrap">
										<h2>오디오클립 채널을 만들어 보세요!</h2>
										<p class="color-blue">콘텐츠 제안하기</p>
									</div>
									<div class="list-bg list-bg-1"></div>
								</a>
							</li>

							<li>
								<a href="#" class="audio-flex-between">
									<div class="txt-wrap">
										<h2>오디오클립 채널을 만들어 보세요!</h2>
										<p class="color-purple">콘텐츠 제안하기</p>
									</div>
									<div class="list-bg list-bg-2"></div>
								</a>
							</li>
						</ul>
					</div>
				</div>



			</div>

		</div>

	</main>



	<footer id="audio-footer">
		<div class="audio-container">
			<h1>
				<a href="#">audio clip</a>
			</h1>

			<div class="copyright-wrap">
				<p>
					동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세<br>
					동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세<br>
					동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리 나라 만세
				</p>
			</div>

			<nav class="footer-nav">
				<ul>
					<li><a href="#">로그인</a></li>
					<li><a href="#">오디오클립</a></li>
					<li><a href="#">오디오클립</a></li>
					<li><a href="#">오디오클립</a></li>
					<li><a href="#">오디오클립</a></li>
					<li><a href="#">오디오클립</a></li>
					<li><a href="#">오디오클립</a></li>
				</ul>
			</nav>
			<a href="#" class="footer-copyright-link">
				<span class="symbol">&copy;</span>
				네이버
			</a>
		</div>
	</footer>

학습내용 중 어려웠던 점

딱히 어려운점은 없었다.

해결방법

집중해서 들으려고 하였다.

학습소감

이 수업을 둘은지 생각보다 많은 시간이 지났다. 이런 작업은 지속적으로 해야 잊지않을 것 같다.