1) 학습한 내용
오늘은 유튜브 서브페이지를 만들어보았다.
top 과 left 부분은 메인페이지와 동일
1. channel-banner & nav
- 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>기발자 유튜브 채널</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>- css
.channel-container {
width: 1284px;
margin: 0 auto;
}
#youtube-channel-content #channel-banner {
width: 100%;
height: 170px;
background-color: darkblue;
}
#youtube-channel-content #channel-header {
padding: 16px 0 4px;
background-color: rgba(24, 24, 24, 1);
}
#youtube-channel-content #channel-header .channel-profile-wrap {
}
#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile {
}
#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile img {
width: 70px;
height: 70px;
border-radius: 50%;
margin-right: 24px;
}
#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap {
}
#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap h2 {
font-size: 20px;
color: #ffffff;
font-weight: 500;
}
#youtube-channel-content #channel-header .channel-profile-wrap .channel-profile .txt-wrap p {
color: #aaaaaa;
font-size: 12px;
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: 11px;
}
#channel-nav {
background-color: rgba(24, 24, 24, 1);
}
#channel-nav ul {
}
#channel-nav li {
}
#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;
}
2. channel-content
- html
<div id="channel-content">
<div class="channel-container">
<div id="channel-recent" class="flex-align-start">
<div class="thumbnail-wrap">
<img src="https://via.placeholder.com/246x148">
<span class="mark">실시간</span>
</div>
<div class="txt-wrap">
<h2>기발자 실시간 라이브 코딩 방송프로그램 24시간</h2>
<p class="channel">기발자 코딩채널 41명 시청중</p>
<p class="description">
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
</p>
</div>
</div>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</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: 8px;
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: 18px;
color: #ffffff;
font-weight: 400;
}
#channel-recent .txt-wrap .channel {
font-size: 10px;
color: #aaaaaa;
}
#channel-recent .txt-wrap .description{
padding-top: 8px;
font-size: 10px;
color: #aaaaaa;
line-height: 1.45;
}
.channel-playlists-section {
padding: 24px 0;
border-bottom: solid 1px grey;
}
.channel-playlists-section .playlists-header {
}
.channel-playlists-section .playlists-header h3 {
font-size: 16px;
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: 12px;
color: #aaaaaa;
margin-left: 8px;
}
.channel-playlists-section .playlists-body {
margin-top: 24px;
}
.channel-playlists-section .playlists-body ul {
}
.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: 10px;
color: #ffffff;
background-color: #000000;
padding: 4px 8px 2px;
border-radius: 5px;
bottom: 4px;
right: 4px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap {
margin-top: 8px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap h3 {
font-size: 13px;
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: 10px;
}
.channel-playlists-section .playlists-body .channel-txt-wrap p a {
color: #aaaaaa;
}
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom {
}
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom .count,
.channel-playlists-section .playlists-body .channel-txt-wrap .txt-bottom .date {
font-size: 10px;
color: #aaaaaa;
}
2) 학습내용 중 어려웠던 점 및 해결방법
오늘은 유튜브 서브 페이지를 만들어 보았는데, 확실히 화면사이즈가 달라 x축 스크롤이 생기지 않고는 똑같이 하기가 어려웠다.
나의 컴퓨터로 유튜브 페이지를 들어가도 다르게 구성이 되었다. 왼쪽 메뉴버튼이 아예 접혀있는 형태로 나오고 오른쪽 페이지가 틀에 맞게 들어가있었다.
그래서 이번에는 일단 강사님의 레이아웃과 비슷하게 만들어보았는데,
다음번에는 내컴퓨터에서 보여지는 유튜브 페이지를 만들어보아야겠다.
3) 학습소감
요즘은 자습범위 까지 듣기위해 조금더 당겨서 듣고 있는데, 아직도 많은 부분이 남아있다. 특히 자바는 이번달 말까지는 아니더라도 꼭 다들어야겠다.
오늘은 불금이다!! 하지만 비도 오고 날씨도 우중충~ 하면 할 수록 어려워지는 코딩과 같은마음이랄까............ 그래도 뽜이팅!!
아직 여백이 많은 개린이입니다.