2021.07.06 일지

이상화·2021년 7월 6일

1.팀별 프로젝트 진행 상황 및 본인 업무

기관이 요구하는 부분 파악과 기존 프로잭트를 참고해서 어떤 개발 방식을 이용해서 프로잭트를 이어나갈지 논의 및 검색 작업

2. 오늘 강의를 통해 프로젝트에 적용한 부분

[네이버 오디오 왼쪽 부분]

	<main role="main" id="audio_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/415x198">
								<div class="txt_wrap">
									<h3>[재혼 황후] 오디오 드라마</h3>
									<p>오디오 드라마로 만나는 레전드 웹소설!</p>
								</div>
							</div>

							<button type="button" class="bnt btn_left"></button>
							<button type="button" class="bnt 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/120x120">
									<h3>Title 1 Title 1</h3>
									<span class="author">스마트튜브</span>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/120x120">
									<h3>Title 1 Title 1</h3>
									<span class="author">스마트튜브</span>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/120x120">
									<h3>Title 1 Title 1</h3>
									<span class="author">스마트튜브</span>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/120x120">
									<h3>Title 1 Title 1</h3>
									<span class="author">스마트튜브</span>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/120x120">
									<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/152x152">
										<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_play"></i>
									</div>

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

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/152x152">
										<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_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/120x120">
										<div class="live_state">
											<span class="live">LIVE</span>
										</div>
									</div>
									<h3>Title 1 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/120x120">
										<div class="live_state">
											<span class="live">LIVE</span>
										</div>
									</div>
									<h3>Title 1 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/120x120">
										<div class="live_state">
											<span class="live">LIVE</span>
										</div>
									</div>
									<h3>Title 1 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/120x120">
										<div class="live_state">
											<span class="live">LIVE</span>
										</div>
									</div>
									<h3>Title 1 Title 1</h3>
									<span class="author">스마트튜브</span>
								</a>
							</li>

							<li>
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/120x120">
										<div class="live_state">
											<span class="live">LIVE</span>
										</div>
									</div>
									<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_book" class="audio_section">
					<div class="audio_header">
						<h2>주간 베스트 오디오북 TOP 100</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/120x120">
										<span class="time">2시간 13분</span>
									</div>

									<h3>Title 1 Title 1 Title 1 Title 1</h3>
									<span class="author_1">글배우 저</span>
									<span class="author_2">김명준 낭독</span>
									<span class="price">대여 3,000원</span>
								</a>
							</li>

							<li class="active">
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/120x120">
										<span class="time">2시간 13분</span>
									</div>
									
									<h3>Title 1 Title 1 Title 1 Title 1</h3>
									<span class="author_1">글배우 저</span>
									<span class="author_2">김명준 낭독</span>
									<span class="price">대여 3,000원</span>
								</a>
							</li>

							<li class="active">
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/120x120">
										<span class="time">2시간 13분</span>
									</div>
									
									<h3>Title 1 Title 1 Title 1 Title 1</h3>
									<span class="author_1">글배우 저</span>
									<span class="author_2">김명준 낭독</span>
									<span class="price">대여 3,000원</span>
								</a>
							</li>

							<li class="active">
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/120x110">
										<span class="time">2시간 13분</span>
									</div>
									
									<h3>Title 1 Title 1 Title 1 Title 1</h3>
									<span class="author_1">글배우 저</span>
									<span class="author_2">김명준 낭독</span>
									<span class="price">대여 3,000원</span>
								</a>
							</li>

							<li class="active">
								<a href="#">
									<div class="image_wrap">
										<img src="https://via.placeholder.com/120x130">
										<span class="time">2시간 13분</span>
									</div>
									
									<h3>Title 1 Title 1 Title 1 Title 1</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_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/120x120">
									<h3>Title 1 Title 1</h3>
									<span class="author">스마트튜브</span>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/120x120">
									<h3>Title 1 Title 1</h3>
									<span class="author">스마트튜브</span>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/120x120">
									<h3>Title 1 Title 1</h3>
									<span class="author">스마트튜브</span>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/120x120">
									<h3>Title 1 Title 1</h3>
									<span class="author">스마트튜브</span>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/120x120">
									<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>

			<div class="audio_main_right">
				
			</div>
		</div>
	</main>
#audio_main {
	width: 100%;
	height: 2000px;
	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;
	height: 1000px;
}

/* 오디오 클립 공통 부분 작업*/
.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 .audio_body .audio_slide_wrap {
	position: relative;
}

#audio_today .audio_body .audio_slide {
	align-items: flex-start;
}

#audio_today .audio_body .audio_slide img {
	width: 400px;
	height: 198px;

	border-radius: 8px;
}

#audio_today .audio_body .audio_slide .txt_wrap {

}

#audio_today .audio_body .audio_slide .txt_wrap h3 {
	font-size: 18px;

	padding-top: 2px;
}

#audio_today .audio_body .audio_slide .txt_wrap p {
	font-size: 13px;

	margin-top: 12px;
}

#audio_today .audio_body .audio_slide_wrap .bnt {
	position: absolute;

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

	top: 80px;
}

#audio_today .audio_body .audio_slide_wrap .btn_left {
	left: -17px;
}

#audio_today .audio_body .audio_slide_wrap .btn_right {
	right: -17px;
}

#audio_original .audio_body {
	position: relative;
}

#audio_original .audio_body ul {
	align-items: flex-start;
}

#audio_original .audio_body ul li {
	width: 120px;
}

#audio_original .audio_body ul li a img {
	border-radius: 10px;
}

#audio_original .audio_body ul li a h3 {
	font-size: 13px;

	margin-top: 10px;
}

#audio_original .audio_body ul li a .author {
	font-size: 12px;
	color: #959595;

	margin-top: 6px;
}

#audio_original .audio_body .btn_right {
	top: 60px;
}

#audio_playlist {

}

#audio_playlist .audio_header {
	position: relative;
}

#audio_playlist .audio_header p {
	font-size: 13px;
	font-weight: 400;
	color: #888888;

	margin-top: 8px;
}

#audio_playlist .audio_header .link_total {
	position: absolute;

	font-size: 13px;
	color: #157efb;

	display: block;
	background-color: #ffffff;
	border: solid 1px rgba(0, 0, 0, .1);
	border-radius: 20px;

	box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);

	padding: 10px 18px 8px;

	top: 6px;
	right: 0;
}

#audio_playlist .audio_body {

}

#audio_playlist .audio_body ul {
	align-items: flex-start;
}

#audio_playlist .audio_body ul li {
	width: 152px;

	border: solid 1px rgba(0, 0, 0, .1);
	border-radius: 4px;
}

#audio_playlist .audio_body ul li a {
	
}

#audio_playlist .audio_body ul li a .image_wrap {
	position: relative;

	width: 150px;
	height: 150px;	
}

#audio_playlist .audio_body ul li a .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#audio_playlist .audio_body ul li a .image_wrap .icon_play {
	position: absolute;

	width: 32px;
	height: 32px;
	background-color: yellow;
	border-radius: 50%;

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

#audio_playlist .audio_body ul li a h3 {
	font-size: 13px;

	background-color: #ffffff;

	padding: 17px 11px;
}

#audio_playlist .audio_body .btn_right {
	top: 90px;
}

#audio_live .audio_body ul {
	align-items: flex-start;
}

#audio_live .audio_body ul li {
	width: 120px;
}

#audio_live .audio_body ul li a .image_wrap {
	position: relative;

	width: 120px;
	height: 120px;
	border: solid 2px grey;
	border-radius: 50%;
}

#audio_live .audio_body ul li a .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
	border: solid 2px #ffffff;
	border-radius: 50%;
}

#audio_live .audio_body ul li a .image_wrap .live_state {
	position: absolute;

	background-color: #ffffff;

	border: solid 2px #ffffff;
	border-radius: 3px;

	padding: 2px;

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

#audio_live .audio_body ul li a .image_wrap .live_state .live {
	display: block;

	font-size: 10px;
	color: red;

	background-color: #ffffff;

	border: solid 2px red;
	border-radius: 3px;

	padding: 2px 8px;
}

#audio_live .audio_body ul li.active .image_wrap {
	border: solid 2px red;
}

#audio_live .audio_body ul li.active a .image_wrap .live_state .live {
	color: #ffffff;

	background-color: red;
	border: solid 2px red;
}

#audio_live .audio_body ul li a h3 {
	font-size: 13px;

	margin-top: 16px;
}

#audio_live .audio_body ul li a .author {
	font-size: 12px;
	color: #959595;

	margin-top: 6px;
}

#audio_live .btn_right {
	top: 60px;
}

#audio_book .audio_body ul {
	align-items: flex-start;
}

#audio_book .audio_body ul li {
	width: 120px;
}

#audio_book .audio_body ul li a .image_wrap {
	position: relative;

	width: 100%;
}

#audio_book .audio_body ul li a .image_wrap img {
	width: 100%;
}

#audio_book .audio_body ul li a .image_wrap .time {
	position: absolute;

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

	background-color: rgba(17, 17, 17, .75);

	padding: 2px 5px 0;

	right: 5px;
	bottom: 5px;
}

#audio_book .audio_body ul li a h3 {
	font-size: 13px;

	margin-top: 11px;
}

#audio_book .audio_body ul li a .author_1 {
	display: block;

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

	margin-top: 4px;

}

#audio_book .audio_body ul li a .author_2 {
	display: block;

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

#audio_book .audio_body ul li a .price {
	display: block;

	font-size: 12px;

	margin-top: 4px;
}

#audio_book .btn_right {
	top: 65px;
}

#audio_channel .audio_body {

}

#audio_channel .audio_body ul {
	align-items: flex-start;
}

#audio_channel .audio_body ul li {
	width: 120px;
}

#audio_channel .audio_body ul li a {

}

#audio_channel .audio_body ul li a img {
	width: 120px;
	height: 120px;

	border: solid 1px rgba(0, 0, 0, .2);
	border-radius: 8px;
}

#audio_channel .audio_body ul li a h3 {
	font-size: 13px;

	margin-top: 10px;	
}

#audio_channel .audio_body ul li a .author {
	font-size: 12px;
	color: #959595;

	margin-top: 6px;
}

#audio_channel .btn_right {
	top: 60px;
}


3. 어려웠던 점과 해결방법

실무에서 직접 사용하는 홈페이지를 만드는것이 처음이다보니 어떤 개발도구와 어떤 신으로 처리해야 될지 방향을 잡기 힘들었습니다.

기존 기수분들의 프로잭트 페이지를 보고 저희 기관에서 요구하는 기능을 만들려면 어느 개발도구를 사용해야 할지 어느정도 방향을 잡을수 있었습니다.

4. 아쉬웠던 점

기존 프로잭트를 보고 프로잭트 회의를 해보니 부트스트랩을 적용한 부분이 많은데 교육 과정에서는 빠져있어서 기본적인 틀을 잡는데 조금 도움은 됐을텐데 그렇지 못한게 조금 아쉽네요.

profile
이상화
개발자를 꿈꾸는 이상화입니다.
이전 포스트

2021.07.05 일지

다음 포스트

2021.07.07 일지

0개의 댓글