2021_08_18개발일지

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

1) 학습한 내용

오늘은 오디오 페이지의 오른쪽 영역과 하단, 그리고 오디오 카테고리 페이지를 새로 만들어보았다.

1. audio-intro

- html

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

- css

/*right*/

#audio-intro {

}


#audio-intro .audio-body ul {

}

#audio-intro .audio-body li {

}

#audio-intro .audio-body li a {

}

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

#audio-intro .audio-body li h3 {
	margin-top: 12px;
	font-size: 11px;

}

#audio-intro .audio-body li .soruce {
	margin-top: 4px;
	font-size: 10px;
	color: #959595;
}

2. audio-discovery

- html

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

- css

#audio-discovery {

}

#audio-discovery .audio-header {
	position: relative;
}

#audio-discovery .audio-header h2 {
	font-size: 17px;
	line-height: 24px;
}

#audio-discovery .audio-header p {
	margin-top: 7px;
	font-size: 13px;
	color: #888;
}

#audio-discovery .audio-header .link-setting{
	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-discovery .audio-body ul {

}

#audio-discovery .audio-body li {
	margin-bottom: 40px;
}


#audio-discovery .audio-body li a {

}

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

#audio-discovery .audio-body li h3 {
	margin-top: 12px;
	font-size: 13px;

}

#audio-discovery .audio-body .btn-more {
	display: block;
	margin: 0 auto;


	font-size: 14px;
	color: #222;

	padding: 12px 21px 12px 21px;
	border: solid 1px rgba(0, 0, 0, 0.1);
	border-radius: 24px;
	background-color: #ffffff;
	box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);

	font-weight: 500;
}

#audio-discovery .audio-body .btn-more .color-blue {
	color: #157efb;
}

#audio-discovery .audio-body .btn-more .pages{
	color: #959595;
}

3. audio-create

- html

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

- css

#audio-create {

}

#audio-create .audio-body {
	
}

#audio-create .audio-body li {
	padding: 22px 4px;
	border-top: solid 1px #efefef;
}

#audio-create .audio-body li:last-child {
	border-bottom: solid 1px #efefef;
}

#audio-create .audio-body li a {
	
}

#audio-create .audio-body li .txt-wrap {
	width: 225px;
}

#audio-create .audio-body li .txt-wrap h2 {
	font-size: 14px;
	font-weight: 700;
}

#audio-create .audio-body li .txt-wrap p {
	font-size: 12px;
	margin-top: 6px;
	letter-spacing: -.8px;
}

#audio-create .audio-body li .txt-wrap p.color-blue {
	color: #2db8e8;
}

#audio-create .audio-body li .txt-wrap p.color-purple {
	color: #8560f7;
}

#audio-create .audio-body li .list-bg {
	width: 80px;
	height: 64px;
}

#audio-create .audio-body li .list-bg.list-bg-1 {
	background-color: yellow;
}

#audio-create .audio-body li .list-bg.list-bg-2 {
	background-color: purple;
}

- html

<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>
				<!-- 특수문자 리스트  
					http://kor.pe.kr/util/4/charmap2.htm -->
			</nav>
			<a href="#" class="footer-copyright-link">
				<span class="symbol">&copy;</span>
				네이버
			</a>
		</div>
	</footer>

- css


#audio-footer {
	background-color: #eaecef;
	padding: 48px 0 164px;
}

#audio-footer h1 {
	font-size: 25px;	
}

#audio-footer h1 a {
	color: #959595;
}

#audio-footer .copyright-wrap {
	margin-top: 37px;
}

#audio-footer .copyright-wrap p {
	letter-spacing: -.5px;
	font-size: 13px;
	line-height: 19px;

	color: #959595;
}

#audio-footer .footer-nav {
	margin-top: 47px;
}

#audio-footer .footer-nav ul {
	overflow: hidden;
}

#audio-footer .footer-nav li {
	float: left;
}

#audio-footer .footer-nav li a {
	font-size: 13px;
	color: #959595;
}

#audio-footer .footer-nav li a:after {
	display: inline-block;
	content: "";
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background-color: #959595;


	vertical-align: top;
	margin: 12px 7px 0;
}

#audio-footer .footer-nav li:last-child a:after {
	content: none;
}

#audio-footer .footer-copyright-link {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: #959595;
}

#audio-footer .footer-copyright-link .symbol{
	
}


5. audio - category - header

- html

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

	<link rel="stylesheet" type="text/css" href="css/style.css">
</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="audio.html"><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" class="active"><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">
					</div>

					<div class="profile-wrap">
						<img src="https://via.placeholder.com/32" class="profile-img">
						<a href="index.html" class="btn-login">로그인</a>
					</div>
				</div>

			</nav>

		</div>

	</header>

- css

오디오 메인 페이지와 동일

6. audio - category - main channel

- html

<main id="audio-main" class="audio-sub-main" role="main">
		
		<div class="audio-container">
			<div id="auido-category-channel" class="audio-category">
				
				<div class="title-wrap">
					<h2>채널</h2>
					<p>4,752개의 채널</p>
				</div>

				<ul class="audio-category-lists">
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
				</ul>

			</div>
			
		</div>

	</main>

- css

/* 오디오의 카테고리  */
#audio-main.audio-sub-main {
	background-color: #ffffff;	
}


.audio-category {
	padding-top: 71px;
}

.audio-category .title-wrap {
	padding-bottom: 20px;
	border-bottom: solid 1px #ececec;
}

.audio-category .title-wrap h2 {
	font-size: 27px;
	font-weight: 600;
	letter-spacing: -1px;
}

.audio-category .title-wrap p {
	font-size: 14px;
	color: #959595;
	margin-top: 20px;
}

.audio-category .audio-category-lists {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: stretch;
	margin-top: 22px;
}

.audio-category .audio-category-lists .category-list {
	width: 162px;
	height: 164px;
	margin-right: 20px;
	margin-bottom: 20px;
}

.audio-category .audio-category-lists .category-list:nth-child(6n) {
	margin-right: 0;
}

.audio-category .audio-category-lists .category-list:nth-child(odd) a {
	/*background-color: yellow;*/
}

.audio-category .audio-category-lists .category-list:nth-child(even) a {
	/*background-color: pink;*/
}

.audio-category .audio-category-lists a {
	overflow: hidden;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgb(230, 125, 127);
	border-radius: 6px;
	padding: 14px;
}

.audio-category .audio-category-lists a h3 {
	font-size: 19px;
	line-height: 1.3;
	color: #ffffff;
}

.audio-category .audio-category-lists a p {
	position: absolute;
	width: 80px;
	font-size: 13px;
	color: #fefefe;

	bottom: 14px;
}

.audio-category .audio-category-lists a .thumbnail{
	position: absolute;
	width: 78px;
	height: 78px;

	right: -13px;
	bottom: 0;
    /*컨테이너안 오른쪽 밑으로 맞추기위한 위치조정*/

	transform: rotate(25deg);
}

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

html에서 사용할 수 있는 특수문자들이 있다. 아직 아는게 하나도 없어 하나씩 찾아서 작성을 해야한다는 번거로움이 있는 것같다.
또 네이버작업을 하면서 rotate를 사용한건 처음인것같다. 이렇게 실전에서 사용해볼 수 있어서 좋았다.

3) 학습소감

오늘은 개발일지를 작성하기위해 들어왔다가 눈에 띄는 글이 있어 읽어보고 왔는데, 아주 유익했다. UI에관한 용어 32 가지를 정리해 놓은 글이었는데, 예전이었으면 익숙한 단어가 아니면 알수 없는 글이라 생각했는데, 이제는 아 이거 하면서 떠오르는 것들이 생긴 것 같다. 또 계속 사용은했지만 용어에 대한 생각은 딱히 안하고 있었는데, 이렇게 용어를 정리하는 시간을 가질 수있어 너무 좋았다 !
앞으로도 종종 글들을 읽어보는 시간을 가져야겠다 :)

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

2021_08_17 개발일지

다음 포스트

2021_08_19 개발일지

0개의 댓글

관련 채용 정보