2021_08_30 개발일지

Yeo Eunhye·2021년 8월 30일

1) 학습한 내용

오늘은 유튜브 탐색페이지를 카피캣해보았다.
유튜브 메인페이지와 기본적인 top,left nav 영역은 같으므로 메인영역만 디자인해보았다.

1. explore-nav

- html

<nav id="explore-nav">
						<ul class="flex-align-between">
							<li>
								<a href="#">
									<i class="icon">
										<img src="img/fire.png">
									</i>
									<span>인기</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon">
										<img src="img/music.png">
									</i>
									<span>음악</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon">
										<img src="img/game.png">
									</i>
									<span>게임</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon">
										<img src="img/movie.png">
									</i>
									<span>영화</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon">
										<img src="img/study.png">
									</i>
									<span>학습</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon">
										<img src="img/sports.png">
									</i>
									<span>스포츠</span>
								</a>
							</li>
						</ul>
					</nav>

- css

/* 탐색 페이지 */
.explore-container {
	width: 1280px;
	margin: 0 auto;
}

#explore-nav {
	padding: 12px 0 8px;
}

#explore-nav ul {
	
}

#explore-nav li {
	overflow: hidden;
	
	width: 210px;
	height: 116px;
}

#explore-nav li a {
	display: block;
	width: 100%;
	height: 100%;
	background-color: grey;
	border-radius: 5px;

	padding: 20px;
}

#explore-nav li a:hover {
	background-color: darkgrey;
}

#explore-nav li .icon img{
	display: block;
	width: 32px;
	height: 32px;
	/*background-color: red;*/

	margin-bottom: 25px;
}

#explore-nav li span {
	color: #ffffff;
	font-size: 16px;
}

2. popular-section

- html

<div id="popular-section">

						<h2>인기 급상승 동영상</h2>

						<ul>
							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>

							<li>
								<a href="#" class="flex-align-start">
									
									<div class="image-wrap">
										<img src="https://via.placeholder.com/246x148">
										<span class="time">10:00</span>
									</div>

									<div class="txt-wrap">
										<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
										<p class="video-info">
											<span class="channel">기발자 코딩채널</span>
											<span class="count">조회수 435만회</span>
											<span class="date">1일전</span>
										</p>
										<p class="description">동해물과 백두산이 마르고 닳도록</p>
									</div>

								</a>
							</li>
						</ul>
						
					</div>

- css

#popular-section {
	margin-top: 24px;
}

#popular-section h2 {
	font-size: 20px;
	color: #ffffff;
}

#popular-section ul {
	margin-top: 24px;
}

#popular-section li {
	margin-bottom: 16px;
}

#popular-section a {
	align-items: flex-start;
}

#popular-section li .image-wrap {
	position: relative;
	width: 246px;
	height: 148px;
	margin-right: 16px;
}

#popular-section li .image-wrap img {
	width: 100%;
	height: 100%;
}

#popular-section li .image-wrap .time {
	position: absolute;

	padding: 4px 8px 2px;
	background-color: #212121;
	color: #ffffff;
	font-size: 12px;
	border-radius: 5px;

	bottom: 4px;
	right: 4px;
}

#popular-section li .txt-wrap {
	width: 600px;
}

#popular-section li .txt-wrap h3 {
	font-size: 20px;	
	color: #ffffff;
}

#popular-section li .txt-wrap .video-info {
	color: #aaaaaa;
	font-size: 14px;
}

#popular-section li .txt-wrap .video-info span:after {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background-color: #aaaaaa;
	border-radius: 50%;

	margin: 6px 4px 0 8px;
    vertical-align: top;
}

#popular-section li .txt-wrap .video-info span:last-child:after {
	content: none;
}

#popular-section li .txt-wrap .video-info .channel {
	
}

#popular-section li .txt-wrap .video-info .count {
	
}

#popular-section li .txt-wrap .video-info .date {
	
}

#popular-section li .txt-wrap .description {
	padding-top: 8px;

	font-size: 14px;
	color: #aaaaaa;
}

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

voice 아이콘을 삽입하는데 아이콘 자체의 디자인이 투명배경에 검정색으로 되어있었는데, 흰색인걸 찾고 싶었지만 잘 나오지않아 css 코드를 사용하여 투명바탕에 흰색으로 바꾸는 코드를 주어 바꿀 수 있었다.
filter 코드로 처음 사용해보는 코드였는데, 다행히 잘 적용하여 원하는대로 나타낼 수 있었다.

3) 학습소감

매일 그냥 투명배경의 이미지만 찾아 사용을 하다가 이번엔 무료아이콘페이지를 찾아 거기서 받아서 사용해보았는데 확실히 더 깔끔하게 디자인을 적용할 수 있고 다양한 아이콘들이 있어 원하는대로 사용할 수 있는 장점이 있었다.
내일은 다시 돌아온 월말 평가 날이다 어떤 내용들이 나올지.. 긴장된다. 꼭 통과할 수 있기를 :)