[dg_ai_school] 웹프로그래밍 36

이채환·2021년 8월 17일

webprogramming

목록 보기

36/51

배운내용

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>네이버</title>
</head>
<body>

	<header id="audio-header">
		<div class="audio-container">
			<nav id="audio-nav" class="audio-flex-between">
				<div class="audio-nav-left audio-flex-between">
					<h1 class="audio-logo">
						<a href="#">audio clip</a>
					</h1>
					<ul class="audio-flex-end">
						<li><a href="#" class="active"><span>홈</span></a></li>
						<li><a href="#"><span>랭킹</span></a></li>
						<li><a href="#"><span>연재 채널</span></a></li>
						<li><a href="#"><span>오디오북</span></a></li>
						<li><a href="audio-category.html"><span>카테고리</span></a></li>
						<li><a href="#"><span>이벤트</span></a></li>
					</ul>
				</div>

				<div class="audio-nav-right audio-flex-between">
					<div class="search-wrap audio-flex-start">
						<i class="icon-search"></i>
						<input type="text" placeholder="무엇을 찾으세요?">
					</div>

					<div class="profile-wrap">
						<img src="https://ssl.pstatic.net/static/audio/img/m/2018/img/img_user.png?type=s80" class="profile-img">
						<a href="#" class="btn-login">로그인</a>
					</div>
				</div>
			</nav>
		</div>
	</header>

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

							<a href="#">
								<div class="audio-slide audio-flex-start">

									<img src="https://via.placeholder.com/380x198">
									<div class="txt-wrap">
										<h3>[재혼황후]오디오 드라마</h3>
										<p>오디오 드라마로 만나는 레전드 웹소설</p>
									</div>

								</div>
							</a>	


						<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 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/152x152">
										<i class="icon-like"></i>
										<i class="icon-play"></i>
									</div>

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

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

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

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

						<button type="button" class="btn 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>
								<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">8. 15. 21:00 예정</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">8. 15. 21:00 예정</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">8. 15. 21:00 예정</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="live">LIVE</span>
										</div>
									</div>
									<h3>☂빗소리 ASMR 잠못드는 밤</h3>
									<span class="author">라이브 중</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="live">LIVE</span>
										</div>
									</div>
									<h3>☂빗소리 ASMR 잠못드는 밤</h3>
									<span class="author">라이브 중</span>
								</a>
							</li>
						</ul>

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

				<div id="audio-book" class="audio-section">
					<div class="audio-header">
						<h2>셀럽들의 목소리로 듣는 베스트셀러</h2>
					</div>

					<div class="audio-body">
						<ul class="audio-flex-between">
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/120x170">
										<span class="status">요약본</span>
										<span class="time">1시간 58분</span>
									</div>

									<h3>은둔의 즐거움</h3>
									<span class="author-1">신기율 저</span>
									<span class="author-2">금새록 낭독</span>
									<span class="price">대여 3,000원</span>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/120x170">
										<span class="time">1시간 4분</span>
									</div>

									<h3>당신의 자리 - 나무로 자라는 방법</h3>
									<span class="author-1">신기율 저</span>
									<span class="author-2">금새록 낭독</span>
									<span class="price">대여 3,000원</span>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/120x170">
										<span class="status">요약본</span>
										<span class="time">1시간 58분</span>
									</div>

									<h3>은둔의 즐거움</h3>
									<span class="author-1">신기율 저</span>
									<span class="author-2">금새록 낭독</span>
									<span class="price">대여 3,000원</span>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/120x170">
										<span class="status">요약본</span>
										<span class="time">1시간 58분</span>
									</div>

									<h3>은둔의 즐거움</h3>
									<span class="author-1">신기율 저</span>
									<span class="author-2">금새록 낭독</span>
									<span class="price">대여 3,000원</span>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="image-wrap">
										<img src="https://via.placeholder.com/120x170">
										<span class="status">요약본</span>
										<span class="time">1시간 58분</span>
									</div>

									<h3>은둔의 즐거움</h3>
									<span class="author-1">신기율 저</span>
									<span class="author-2">금새록 낭독</span>
									<span class="price">대여 3,000원</span>
								</a>
							</li>
						</ul>

						<button type="button" class="btn 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>향기나는편지</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 btn-right"></button>
					</div>
				</div>
			</div>

			<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/152">
									<h2>오늘의 회화 - 영어</h2>
									<span class="author">네이버</span>	
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152">
									<h2>내 남편과 결혼해줘</h2>
									<span class="author">네이버</span>	
								</a>
							</li>
						</ul>

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

				<div id="audio-discovery" class="audio-section">
					<div class="audio-header">
						<h2>
							오늘의 발견<br>
							요즘 많이 든는 채널👍
						</h2>
						<p>8월 13일 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">
									<h2>[자장가] 피아노 테라피 (Relaxing Happy Music)</h2>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h2>[자장가] 피아노 테라피 (Relaxing Happy Music)</h2>
								</a>
							</li>	
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h2>[자장가] 피아노 테라피 (Relaxing Happy Music)</h2>
								</a>
							</li>	
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h2>[자장가] 피아노 테라피 (Relaxing Happy Music)</h2>
								</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>
					Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.<br> Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.<br>
					Curabitur aliquet quam id dui posuere blandit.
				</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="#" class="on">개인정보처리방침</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>
				NAVER
				<span>Corp.</span>
			</a>
		</div>	
	</footer>
	

</body>
</html>

CSS

/* 네이버 오디오 */
.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-end {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	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-header {
	position: fixed;
	width: 100%;
	height: 61px;
	background-color: #ffffff;
	border-bottom: solid 1px #efeff4;

	left: 0;
	top: 0;

	z-index: 99999;

	font-family: Roboto,NotosansKR,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Helvetica Neue",Helvetica,Arial,"Malgun Gothic","ë§‘ì€ ê³ ë”•",Dotum,"ë‹ì›€",sans-serif;;
}

#audio-header .audio-nav-left {
	width: 660px;
}

#audio-header .audio-nav-left .audio-logo {
	font-size: 25px;
}

#audio-header .audio-nav-left .audio-logo a {

}

#audio-header .audio-nav-left ul {
	padding-top: 6px;
}

#audio-header .audio-nav-left li {

}

#audio-header .audio-nav-left li a {
	display: block;
	font-size: 17px;
	padding: 12px 13px 17px 12px;
}

#audio-header .audio-nav-left li a.active {
	font-weight: 700;
}

#audio-header .audio-nav-left li a span {
	position: relative;
	display: inline-block;
	height: 21px;
}

#audio-header .audio-nav-left li a.active span:after {
	display: block;
	position: absolute;   
	content: "";
	background-color: #222222;
	border-bottom: solid 3px #222222;
	border-radius: 1.5px;

	z-index: 1;

	left: -4.5px;
	right: -5.5px;
	bottom: -22px;
}

#audio-header .audio-nav-left li a span:hover {
	font-weight: 700;
}

#audio-header .audio-nav-right {
	width: 330px;
} 

#audio-header .audio-nav-right .search-wrap {
	width: 180px;
	height: 40px;
	border: solid 2px rgba(0,86,201,.2);
	border-radius: 4px;
	background-color: #ffffff;
}

#audio-header .audio-nav-right .search-wrap .icon-search {
	display: inline-block;
	width: 32px;
	height: 100%;
	background-image: url(../img/search.png);
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

#audio-header .audio-nav-right .search-wrap input {
	width: calc(100% - 32px);
	height: 100%;

	padding: 8px 2px;
	font-size: 15px;

	outline: none;
	border: none;
	caret-color: #22c463;
}


#audio-header .audio-nav-right .profile-wrap {

}

#audio-header .audio-nav-right .profile-wrap .profile-img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
}

#audio-header .audio-nav-right .profile-wrap .btn-login {
	font-size: 15px;
	padding-left: 8px;
	vertical-align: middle;
}


/* 메인 영역 */
#audio-main {
	width: 100%;
	background-color: #f6f8fa;

	padding-top: 61px;

	font-family: #;
}

#audio-main .audio-container {
	/*overflow: hidden;*/
	align-items: flex-start;
}

/* 섹션별 공통 디자인 */
.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 {
	display: none;
	position: absolute;
    
    width: 35px;
    height: 35px;
    background-color: #ffffff;
    border-radius: 50%;

    right: 0;
	background-image: url(../img/right-arrow.png);
	background-repeat: no-repeat;
	background-size: 15px;
	background-position: 55% 50%;

    box-shadow: 3px 3px 15px -7px rgb(0 0 0 / 72%);
    -webkit-box-shadow: 3px 3px 15px -7px rgb(0 0 0 / 72%);
    -moz-box-shadow: 3px 3px 15px -7px rgba(0,0,0,0.72);
    cursor: pointer;

    right: -17px;
}

.audio-section .audio-body .btn-left {
	display: none;
	left: -17px;
	background-image: url(../img/left-arrow.png);
	background-repeat: no-repeat;
	background-size: 15px;
	background-position: 43%;
}

.audio-body:hover .btn {
	display: initial;
}


/* 메인 왼쪽 */
/* 오늘의 오디오 클립 */
.audio-main-left {
	float: left;
	width: 660px;
}

#audio-today .audio-slide .audio-slide-wrap {
	width: 100%;
}

#audio-today .audio-slide {
	align-items: flex-start;
}

#audio-today .audio-slide img {
	width: 380px;
	height: 198px;

	margin-right: 20px;
	border-radius: 8px;
}

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

#audio-today .audio-slide .txt-wrap h3 {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp:  2;
	-webkit-box-orient: vertical;
	max-height: 52px;

	padding-top: 2px;

	font-size: 18px;
	font-weight: 500;

}

#audio-today .audio-slide .txt-wrap p {
	display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

	margin-top: 12px;
	font-size: 12px;
	color: #666;
}

#audio-today .audio-slide-wrap {
	position: relative;
}

#audio-today .audio-slide-wrap .btn {
	position: absolute;

	width: 35px;
	height: 35px;
	background-color: #ffffff;
	border-radius: 50%;

	box-shadow: 3px 3px 15px -7px rgba(0,0,0,0.72);
	-webkit-box-shadow: 3px 3px 15px -7px rgba(0,0,0,0.72);
	-moz-box-shadow: 3px 3px 15px -7px rgba(0,0,0,0.72);

	top: 80px;

	cursor: pointer;
}

#audio-today .audio-slide-wrap .btn-right {
	right: 0;
	background-image: url(../img/right-arrow.png);
	background-repeat: no-repeat;
	background-size: 15px;
	background-position: 55% 50%;
}


/* 오디오클립 추천 오리지널 */
#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 {
	width: 120px;
	height: 120px;
	border-radius: 4px;
}

#audio-original .audio-body h3 {
	margin-top: 10px;
	font-size: 13px;

	display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 36px;
}

#audio-original .audio-body .author {
	margin-top: 6px;

	font-size: 12px;
	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 {
	margin-top: 8px;

	font-size: 13px;
	font-weight: 400;
	color: #888;
}

#audio-playlist .audio-header .link-total {
	display: block;
	position: absolute;

	padding: 10px 18px 8px;
	background-color: #ffffff;

	font-size: 13px;
	color: #157efb;
	font-weight: 600;
	border: solid 1px rgba(0, 0, 0, .1);
	border-radius: 20px;
	box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);

	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 .image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 4px 4px 0 0;
}

#audio-playlist .audio-body .image-wrap .icon-like {
	position: absolute;
	width: 20px;
	height: 17px;
	background-image: url(../img/heart.png);
	background-size: 17px 17px;
	background-repeat: no-repeat;

	top: 5px;
	right: 5px;
}

#audio-playlist .audio-body .image-wrap .icon-play {
	position: absolute;
	width: 32px;
	height: 32px;
	background-image: url(../img/play.png);
	background-size: 14px;
	background-repeat: no-repeat;
	background-position: 55% 50%;
	background-color: rgba(255, 255, 255, .8);
	border-radius: 50%;

	box-shadow: 2px 2px 7px -2px rgba(0,0,0,0.5);
	-webkit-box-shadow: 2px 2px 7px -2px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 7px -2px rgba(0,0,0,0.5);

	bottom: -16px;
	right: 10px;
}

#audio-playlist .audio-body li h3 {
	padding: 17px 11px;
	font-size: 13px;
	background-color: #ffffff;
	border-radius: 0 0 4px 4px;
}

#audio-playlist .audio-body .btn-right {
	top: 90px;
}


/* 라이브 ON */
#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 #E1E3E4;
	border-radius: 50%;
}

#audio-live .audio-body li.active .image-wrap {
	border: solid 2px #ff0031;
}

#audio-live .audio-body li .image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
	border: solid 2px #f6f8fa;
	border-radius: 50%
}

#audio-live .audio-body li .image-wrap .live-state {
	position: absolute;
	padding: 2px;
	border: solid 1px #ffffff;
	background-color: #ffffff;
	border-radius: 3px;

	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
}

#audio-live .audio-body li .image-wrap .live-state .live {
	display: inline-block;
	padding: 2px 4px;
	color: #FF0031;
	border: solid 1.5px #FF0031;
	background-color: #ffffff;
	border-radius: 3px;

	font-size: 12px;
	font-weight: bold;
	vertical-align: middle;
}

#audio-live .audio-body li.active .image-wrap .live-state .live {
	background-color: #FF0031;
	color: #ffffff;
}

#audio-live .audio-body li h3 {
	margin-top: 16px;
	font-size: 13px;
}

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

#audio-live .audio-body .btn-right {
	top: 60px
}




/* 셀럽들의 목소리로 듣는 베스트셀러 */
#audio-book {

}

#audio-book .audio-body {

}

#audio-book .audio-body ul {
	align-items: flex-start;
}

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

#audio-book .audio-body .image-wrap {
	position: relative;
	width: 100%;
}

#audio-book .audio-body .image-wrap img  {
/*	position: absolute;*/
	width: 100%;
	border-radius: 2px;
}

#audio-book .audio-body .image-wrap .status {
	position: absolute;	
	padding: 2px 5px;
	background-color: rgba(17, 17, 17, .75);

	font-size: 11px;
	color: #ffffff;

	top: 5px;
	left: 5px;
}

#audio-book .audio-body .image-wrap .time {
	position: absolute;

	padding: 2px 5px;
	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;

	display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 36px;
}

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

	font-size: 12px;
	color: #959595;
}

#audio-book .audio-body .author-2 {
	display: block;

	font-size: 12px;
	color: #959595;
}

#audio-book .audio-body .price {
	display: block;
	margin-top: 4px;

	font-size: 12px;
	font-weight: 500;
}

#audio-book .audio-body .btn-right {
	top: 85px;
}

/* 새로 나온 채널 */
#audio-channel .audio-body ul {
	align-items: flex-start;
}

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

#audio-channel .audio-body li a {

}

#audio-channel .audio-body li img {
	width: 120px;
	height: 120px;
	border-radius: 4px;
}

#audio-channel .audio-body h3 {
	margin-top: 10px;
	font-size: 13px;

	display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 36px;
}

#audio-channel .audio-body .author {
	margin-top: 6px;

	font-size: 12px;
	color: #959595;
}

#audio-channel .audio-body .btn-right {
	top: 60px;
}

어려운점

선택자들의 상세한 태그의 기능들
각종 padding 값의 미세한 조정
디자인이 같은듯 달라서 확인하는데 이게 정확하게 무엇을 뜻하는지 모를 때가 많아서 고민이 됨
영상 볼륨 너무 작아서 정말 답답함

해결방법

상세 태그 기능을 다시 알아 봄
미세 조정값은 컴퓨터 환경에 따라 약간씩 달라질 수도 있고 되도록 같은 값이면 같은 화면으로 보임
볼륨은 해결 방법이 없는데 진짜 소리를 100 으로 해도 잘 안들림

학습소감

코드가 길어지면서 링크와 링크로 연결된 홈페이지 사이트를 만든다는게 쉬운일이 아니구나라는 것을 다시 깨달음. 그리고 CSS 코드를 따로 만들었지만, 이렇게 까지 긴 줄로 작성되는 거라면 파일을 따로 만들어서 작업을 해야겠다고 생각함. 혹은 HTML에다 STYLE 태그를 사용해서 그 안에 직접 적어넣는 방식으로 한 번 진행해보고 싶다는 생각도 함. 생각보다 다양한 방식이 적용되고 사용되는데 어떤 것이 최적일지 고민됨.

이채환

Please be wonderful but don't be so serious, enjoy this journey with the good people!

[dg_ai_school] 웹프로그래밍 36

webprogramming

배운내용

어려운점

해결방법

학습소감

[dg_ai_school] 웹프로그래밍 35

[dg_ai_school] 웹프로그래밍 37

0개의 댓글