Day 47. Youtube 서브 페이지
08월 31일
1. 학습 내용
채널 상단, 목록, 실시간 스트림
- 상단과 왼쪽 메뉴는 그대로 사용
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 src="https://via.placeholder.com/80" class="channel-thumbnail">
<div class="txt-wrap">
<h2>송전중 조작금지</h2>
<p>구독자 222만명</p>
</div>
</div>
<button type="button" class="btn-subscribe">구독</button>
</div>
</div>
</div>
<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>
<div id="channel-content">
<div class="channel-container">
<div id="channel-recent">
<div class="content-wrap flex-align-start">
<div class="thumbnail-wrap">
<img src="https://via.placeholder.com/246px*148px">
<span>실시간</span>
</div>
<div class="txt-wrap">
<h2>실시간 라이브 방송 코딩프로그램 24시간</h2>
<p class="channel">코딩 채널 41명 시청중</p>
<p class="description">
이 채널에 대한 설명은 모든 사람들이 이해하기 쉽도록 만들어주는 채널이며 전세계 200개국에서 서비스되고 있습니다. 유료 채널과 무료 채널로 나누어져있으며 모든 것들은 환영합니다.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>CSS
#youtube-channel-content #channel-banner {
width: 100%;
height: 250px;
background-color: darkblue;}
#youtube-channel-content #channel-header {
padding: 16px 0 4px;
background-color: rgba(24, 24, 24, 1.0);}
.channel-container {
width: 1084px;
margin: 0 auto;}
#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .channel-thumbnail {
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;
font-weight: 500;
color: #ffffff;}
#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap p {
font-size: 14px;
color: #aaaaaa;
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;}
#channel-nav {
background-color: rgba(24, 24, 24, 1.0);}
#channel-nav ul li a {
display: block;
height: 47px;
line-height: 47px;
padding: 0 32px;
- 같은 패딩값을 주고 글자수에 따라 크기가 달라짐
border-bottom: solid 2px transparent;
color: #aaaaaa;}
#channel-nav ul li a.active {
border-bottom: solid 2px #ffffff;
color: #ffffff;}
#channel-nav ul li a:hover {
color: #ffffff;}
#channel-recent .content-wrap {
padding: 24px 0;
align-items: flex-start;
border-bottom: solid 1px #aaaaaa;}
#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 span {
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 {
color: #ffffff;
font-size: 24px;
font-weight: 400;}
#channel-recent .txt-wrap .channel,
#channel-recent .txt-wrap .description {
font-size: 14px;
color: #aaaaaa;
margin-bottom: 8px;
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/210px*118px">
<span class="time">00:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<div class="txt">
<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>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210px*118px">
<span class="time">00:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<div class="txt">
<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>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210px*118px">
<span class="time">00:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<div class="txt">
<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>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210px*118px">
<span class="time">00:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<div class="txt">
<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>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210px*118px">
<span class="time">00:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<div class="txt">
<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>
</div>
</li>
</ul>
</div>
</div>- 이 형태를 복사하여 사용
CSS
.channel-playlists-section {
padding: 24px 0;
border-bottom: solid 1px grey;}
.channel-playlists-section .playlists-header h3 {
margin-right: 20px;
font-size: 18px;
color: #ffffff;}
.channel-playlists-section .playlists-header .play-wrap {
width: 100px;}
.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 a img {
width: 100%;
height: 100%;}
.channel-playlists-section .playlists-body li .channel-thumbnail a .time {
position: absolute;
font-size: 12px;
color: #ffffff;
background-color: #000000;
padding: 4px 8px 2px;
border-radius: 5px;
bottom: 4px;
right: 4px;}
.channel-playlists-section .playlists-body li .channel-txt-wrap {
margin-top: 8px;}
.channel-playlists-section .channel-txt-wrap .txt h3 {
font-size: 15px;
margin-bottom: 6px;}
.channel-playlists-section .channel-txt-wrap .txt .title-link {
color: #ffffff;}
.channel-playlists-section .channel-txt-wrap .txt p {
font-size: 12px;}
.channel-playlists-section .channel-txt-wrap .txt .channel-link {
color: #aaaaaa;}
.channel-playlists-section .channel-txt-wrap .txt .txt-bottom .count,
.channel-playlists-section .channel-txt-wrap .txt .txt-bottom .date {
font-size: 12px;
color: #aaaaaa;}
2. 학습 중 어려웠던 점
크게 없었다.
3. 해결 방안
4. 학습 소감
점점 실무를 접할 생각하니 두렵다
안녕하세요!