46(0831)

유튜브 3

학습 내용

html

<main id="youtube-main" role="main">
			
			<div id="youtube-channel-content">
				
				<div id="channel-banner"></div>

				<div id="channel-header">
					
					<div class="channel-container">
						<div class="channel-profile-wrap flex-align-between">
							
							<div class="channel-profile flex-align-start">
								<img class="channel-thumbnail" src="https://via.placeholder.com/80">
								<div class="txt-wrap">
									<h2>youtube channel</h2>
									<p>구독자 123만명</p>
								</div>
							</div>

							<button type="button" class="btn-subscribe">구독</button>
						</div>
					</div>

				</div>

				<nav id="channel-nav"></nav>
			</div>
		</main>

css

.channel-container {
	width: 1284px;
	margin: 0 auto;
}

#youtube-channel-content #channel-banner {
	width: 100%;
	height: 250px;
	background-color: darkblue;
}

#youtube-channel-content #channel-header {
	padding: 16px 0 4px;
}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile img {
	width: 80px;
	height: 80px;
	border-radius: 50%;

	margin-right: 24px;
}


#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap h2 {
	font-size: 25px;
	color: #ffffff;
	font-weight: 500;
}

#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap p {
	color: #aaaaaa;
	font-size: 14px;
	margin-top: 5px;
}

#youtube-channel-content #channel-header .channel-profile-wrap .btn-subscribe {
	padding: 10px 20px;
	background-color: red;
	border-radius: 5px;

	color: #ffffff;
	font-size: 16px;
}

html

<nav id="channel-nav">
					
					<div class="channel-container">

						<ul class="flex-align-start">
							<li><a href="#" class="active">홈</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>
					</div>
				</nav>

css

#channel-nav {
	background-color: rgba(24, 24, 24, 1);
}

#channel-nav li a {
	display: block;
	height: 47px;

	padding: 0 32px;

	line-height: 47px;

	border-bottom: solid 2px transparent;
	color: #aaaaaa;
}


#channel-nav li a:hover {
	color: #ffffff;
}

#channel-nav li a.active {
	border-bottom: solid 2px #ffffff;
	color: #ffffff;
}

html

<div id="channel-content">
					<div class="channel-container">
						
						<div id="channel-recent">
							
							<div class="thumbnail-wrap">
								<img src="https://via.placeholder.com/">
								<span class="mark"></span>
							</div>

							<div class="txt-wrap">
								<h2>youtube channel making program</h2>
								<p class="channel">coding channel 31 watching</p>
								<p class="description">
									hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
								</p>
							</div>
						</div>
					</div>
				</div>

css

#channel-recent {
	align-items: flex-start;
	padding: 24px 0;

	border-bottom: solid 1px grey;
}

#channel-recent .thumbnail-wrap {
	position: relative;
	width: 246px;
	height: 148px;
	margin-right: 16px;
}

#channel-recent .thumbnail-wrap img {
	width: 100%;
	height: 100%;
}

#channel-recent .thumbnail-wrap .mark {
	position: absolute;
	background-color: red;
	font-size: 12px;
	color: #ffffff;
	padding: 4px 8px 2px;
	border-radius: 5px;

	right: 4px;
	bottom: 4px;
}

#channel-recent .txt-wrap {
	width: 600px;
}

#channel-recent .txt-wrap h2 {
	font-size: 24px;
	color: #ffffff;
	font-weight: 400;
}

#channel-recent .txt-wrap .channel {
	font-size: 14px;
	color: #aaaaaa;
}

#channel-recent .txt-wrap .description {
	padding-top: 8px;
	font-size: 14px;
	color: #aaaaaa;
	line-height: 1.45;
}

html

<div class="channel-playlists-section">
								
								<div class="playlists-header flex-align-start">
									<h3>코딩하는 사람들</h3>
									<div class="play-wrap flex-align-start">
										<i class="icon-play"></i>
										<a href="#" class="play-link">모두 재생</a>
									</div>
								</div>

								<div class="playlists-body">
									<ul class="flex-align-between">
										<li>
											<div class="channel-thumbnail">
												<a href="#">
													<img src="https://via.placeholder.com/210x118">
													<span class="time">00:20</span>
												</a>
											</div>

											<div class="channel-txt-wrap">
												<h3>
													<a href="#" class="title-link">
														[무한도전] 무한상사 특집편! 퇴근... 하려면 하시던가요.
													</a>
												</h3>
												<p><a href="channel.html" class="channel-link">MBC 엔터테인먼트</a></p>

												<div class="txt-bottom">
													<span class="count">조회수 71만회</span>
													<span class="date">6개월 전</span>
												</div>
											</div>
										</li>
								
									</ul>
								</div>
							</div>

css

.channel-playlists-section {
	padding: 24px 0;
	border-bottom: solid 1px grey;
}

.channel-playlists-section .playlists-header h3 {
	font-size: 18px;
	color: #ffffff;
	margin-right: 20px;
}

.channel-playlists-section .playlists-header .play-wrap {
	width: 85px;
}

.channel-playlists-section .playlists-header .play-wrap .icon-play {
	width: 24px;
	height: 24px;
	background-color: #ffffff;
}

.channel-playlists-section .playlists-header .play-wrap .play-link {
	font-size: 14px;
	color: #aaaaaa;
	margin-left: 8px;
}

.channel-playlists-section .playlists-body {
	margin-top: 24px;
}

.channel-playlists-section .playlists-body li {
	width: 210px;
}

.channel-playlists-section .playlists-body li .channel-thumbnail {
	width: 100%;
	height: 118px;
}

.channel-playlists-section .playlists-body li .channel-thumbnail a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.channel-playlists-section .playlists-body li .channel-thumbnail img {
	width: 100%;
	height: 100%;
}

.channel-playlists-section .playlists-body li .channel-thumbnail .time {
	position: absolute;

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

	bottom: 4px;
	right: 4px;
}

css

.channel-playlists-section .playlists-body .channel-txt-wrap {
	margin-top: 8px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap h3 {
	font-size: 15px;
	margin-bottom: 6px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap h3 a {
	color: #ffffff;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p {
	font-size: 12px;
}

.channel-playlists-section .playlists-body .channel-txt-wrap p a {
	color: #aaaaaa;
}

.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom .count,
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom .date {
	font-size: 12px;
	color: #aaaaaa;
}

탐색 페이지

html

<main id="youtube-main" role="main">
			
			<div id="youtube-explore-content">
				
				<div class="explore-container">
					
					<nav id="explore-nav">
						<ul class="flex-align-between">
							<li>
								<a href="#">
									<i class="icon"></i>
									<span>인기</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon"></i>
									<span>음악</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon"></i>
									<span>게임</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon"></i>
									<span>영화</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon"></i>
									<span>학습</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="icon"></i>
									<span>스포츠</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>

		</main>

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 {
	display: block;
	width: 32px;
	height: 32px;
	background-color: red;

	margin-bottom: 25px;
}

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

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">17:00</span>
									</div>

									<div class="txt-wrap">
										<h3>[놀면 뭐하니?] 김태호PD 또 판벌림🥶 명불허전 국민MC의 앵커 도전</h3>
										<p class="video-info">
											<span class="channel">엠뚜루마뚜루</span>
											<span class="count">조회수 116만회</span>
											<span class="date">23시간 전</span>
										</p>

										<p class="description">[놀면 뭐하니?] 토요일 저녁 6시 30분 방송! MBC의 따끈따끈한 영상을 내 맘대로 편하게 즐기는 채널</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 .description {
	padding-top: 8px;

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

어려웠던 점 & 해결 방법
크게 어려운 부분은 없었다.

학습 소감
다음달부터는 팀프로젝트가 예정되어 있는데 지금 내 능력으로 잘 맞춰갈 수 있을지 조금 걱정이 된다. 팀프로젝트가 시작하기 전까지 열심히 공부를 해둬야겠다.