2021.07.07 일지

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

메뉴구성과 해당 메뉴들을 이용해 뎁스를 어느 정도로 설정 할지와 메뉴를 눌렀을때 어떤식으로 페이지가 흘러갈지 구상중
개발 방향은 아임웹 + 커스텀 작업이 필요하면 부트스트랩을 활용하는 방향으로 현재 진행 예정입니다.

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

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

			<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>7월 6일 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 type="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>
#audio_main .audio_main_right {
	/*float: right;*/

	width: 330px;
	height: 1000px;
}

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

#audio_intro .audio_body ul li {
	width: 152px;
}

#audio_intro .audio_body ul li a img {
	width: 152px;
	height: 152px;
	border-radius: 4px;
}

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

	margin-top: 12px;
}

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

	margin-top: 4px;
}

#audio_discovery .audio_header {
	position: relative;
}

#audio_discovery .audio_header h2 {
	font-size: 17px;
	line-height: 24px;
}

#audio_discovery .audio_header p {
	font-size: 13px;
	color: #888;

	margin-top: 7px;
}

#audio_discovery .audio_header .link_setting {
	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_discovery .audio_body ul {
	align-items: flex-start;
}

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

	margin-bottom: 40px;
}

#audio_discovery .audio_body ul li a img {
	width: 152px;
	height: 152px;
	border-radius: 4px;
}

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

	margin-top: 12px;
}

#audio_discovery .audio_body .btn_more {
	display: block;

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

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

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

	padding: 12px 21px 12px 21px;
	margin: 0 auto;
}

#audio_discovery .audio_body .btn_more .color_blue {
	color: #157efb;
}

#audio_discovery .audio_body .btn_more .pages {
	color: #959595;
}

#audio_create .audio_body ul li {
	border-top: solid 1px #efefef;

	padding: 22px 4px;
}

#audio_create .audio_body ul li:last-child {
	border-bottom: solid 1px #efefef;
}

#audio_create .audio_body ul li a .txt_wrap {
	width: 225px;
}

#audio_create .audio_body ul li a .txt_wrap h2 {
	font-size: 14px;
	font-weight: 700;
}

#audio_create .audio_body ul li a .txt_wrap p {
	font-size: 12px;
	letter-spacing: -.8px;

	margin-top: 6px;
}

#audio_create .audio_body ul li a .txt_wrap p.color_blue {
	color: #2db8e8;
}

#audio_create .audio_body ul li a .txt_wrap p.color_purple {
	color: #8560f7;
}

#audio_create .audio_body ul li a .list_bg {
	width: 80px;
	height: 64px;
}

#audio_create .audio_body ul li a .list_bg.list_bg_1 {
	background-color: yellow;
}

#audio_create .audio_body ul li a .list_bg.list_bg_2 {
	background-color: purple;
}


[네이버 오디오 하단 부분]

	<footer id="audio_footer">
		<div class="audio_container">
			<h1>
				<a href="#">audioClip</a>
			</h1>

			<div class="copyright_wrap">
				<p>
					동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록<br>
					동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록<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>
					<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>
#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 {
	font-size: 13px;
	color: #959595;
	letter-spacing: -.5px;
	line-height: 19px;
}

#audio_footer .footer_nav {
	margin-top: 47px;
}

#audio_footer .footer_nav ul {
	overflow: hidden;
}

#audio_footer .footer_nav ul li {
	float: left;
}

#audio_footer .footer_nav ul li a {
	font-size: 13px;
	color: #959595;
}

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

	vertical-align: middle;

	margin: 0 7px 4px;
}

#audio_footer .footer_nav ul li:last-child a:after {
	content: none;
}

#audio_footer .footer_copyright_link {
	display: block;

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

	margin-top: 8px;
}

[네이버 오디오 카테고리 부분]

	<main role="main" id="audio_main" class="audio_sub_main">
		<div class="audio_container">
			<div id="audio_category_channel" class="audio_category">
				<div class="title_wrap">
					<h2>채널</h2>
					<p>4,874개의 채널</p>
				</div>

				<ul class="audio_category_lists audio_flex_start">
					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>
				</ul>
			</div>

			<div id="audio_category_book" class="audio_category">
				<div class="title_wrap">
					<h2>오디오북</h2>
					<p>20,105개의 오디오북</p>
				</div>

				<ul class="audio_category_lists audio_flex_start">
					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>

					<li class="category_list">
						<a href="#">
							<h3>어학</h3>
							<p>영어, 중국어, 일본어</p>
							<img src="https://via.placeholder.com/103x103" class="thumbnail">
						</a>
					</li>
				</ul>
			</div>
		</div>
	</main>
#audio_main.audio_sub_main {
	background-color: #ffffff;
}

.audio_category {
	padding-top: 71px;
}

.audio_category .title_wrap {
	border-bottom: solid 1px #ececec;

	padding-bottom: 20px;
}

.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 {
	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: rgb(230, 125, 127);
}

.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;
	color: #ffffff;
	line-height: 1.3;

}

.audio_category .audio_category_lists a p {
	position: absolute;

	width: 80px;

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

	bottom: 14px;
}

.audio_category .audio_category_lists a .thumbnail {
	position: absolute;

	width: 78px;
	height: 78px;

	right: -13px;
	bottom: 0;

	transform: rotate(25deg);
}

#audio_category_book {
	padding-bottom: 120px;
}

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

플랫폼이 다양해서 모든 사람이 만족하고 어느정도 디자인 커스텀이 가능한 사이트를 찾는 부분이 조금 어려운 부분이었습니다.

여러가지 플랫폼들의 다양하게 사용해 보면서 최대한 개발 방향과 부합하는 플랫폼을 찾았습니다.

4. 아쉬웠던 점

참여 기관 모집시 어느정도 레퍼런스 사이트나 대략적인 메뉴 구성정도를 받아서 팀 구성 당시 참고 자료로 제공하면 보다 수월하게 진행했을 텐데 그렇지 못한점이 아쉽습니다.

07-22 Android
[깃꾸] GitHub 프로필 꾸미기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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