Day 46. 유튜브 메인 2
08월 30일
1. 학습 내용
왼쪽 메뉴
HTML
<nav id="youtube-left-nav">
<div id="youtube-left-content">
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-1"></i>
<span>홈</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-2"></i>
<span>탐색</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-3"></i>
<span>구독</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>보관함</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-5"></i>
<span>시청기록</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<div class="txt-wrap">
<p>로그인하면 동영상에 좋아요를 표시하고 댓글을 달거나 구독할 수 있습니다.</p>
<a href="#" class="btn-login">로그인</a>
</div>
</div>
</div>
<div class="nav-section">
<div class="nav-title-wrap">
<h2>인기 Youtube</h2>
</div>
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-6"></i>
<span>음악</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-7"></i>
<span>스포츠</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-8"></i>
<span>게임</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-9"></i>
<span>영화</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-10"></i>
<span>뉴스</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-11"></i>
<span>실시간</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-12"></i>
<span>학습</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>채널 탐색</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-title-wrap">
<h2>Youtube 더보기</h2>
</div>
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-6"></i>
<span>Youtube Premium</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-7"></i>
<span>실시간</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-1"></i>
<span>설정</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-2"></i>
<span>신고 기록</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-3"></i>
<span>센터</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-3"></i>
<span>의견 보내기</span>
</a>
</li>
</ul>
</div>
</div>
<footer class="youtube-footer">
<div class="txt-wrap">
<a href="#">정보</a>
<a href="#">보도자료</a>
<a href="#">저작권</a>
<a href="#">문의하기</a>
<a href="#">크리에이터</a>
<a href="#">광고</a>
<a href="#">개발자</a>
</div>
<div class="txt-wrap">
<a href="#">약관</a>
<a href="#">개인정보처리방침</a>
<a href="#">정책 및 안전</a>
<a href="#">새로운 기능 테스트하기</a>
<a href="#">youtube 자동의 원리</a>
</div>
<div class="txt-wrap">
<p>유튜브 프리미엄의 가격은 상승하는 와중에 인도 우회를 통한 결제가 기승하고 있다.</p>
</div>
</footer>
</div>
</nav>
- 거의 비슷하기 때문에 복붙으로 만들고 공통부분을 같은 class로 묶어 제작CSS
#wrapper #youtube-left-nav {
position: fixed;
width: 240px;
top: 56px;
bottom: 0;
left: 0;
background-color: #212121;
overflow-y: auto;
/* 컨텐츠가 넘어갈때 스크롤이 생성 */
overflow-x: hidden;}
#wrapper #youtube-left-nav #youtube-left-content {
position: absolute;
width: 225px;
height: 100%;}
#youtube-left-content .nav-section {
padding: 8px 0;
border-bottom: solid 1px rgba(255, 255, 255, 0.1);}
#youtube-left-content .nav-section .nav-title-wrap {
padding: 8px 24px;}
#youtube-left-content .nav-section .nav-title-wrap h2 {
color: #aaaaaa;
font-size: 15px;
font-weight: bold;}
#youtube-left-content .nav-section .nav-body li a {
height: 40px;
padding: 0 24px;}
#youtube-left-content .nav-section .nav-body li .icon {
display: inline-block;
width: 24px;
height: 24px;
background-color: #ffffff;
margin-right: 24px;}
#youtube-left-content .nav-section .nav-body li span {
font-size: 13px;
color: #ffffff;}
- 공통된 머리글과 내부를 디자인
#youtube-left-content .nav-section .nav-body .txt-wrap {
padding: 0 24px;}
#youtube-left-content .nav-section .nav-body .txt-wrap p {
color: #ffffff;
font-size: 13px;
font-weight: 400;}
#youtube-left-content .nav-section .nav-body .txt-wrap .btn-login {
display: inline-block;
/* inline의 성질을 바꿔준다(높이값을 인식못함) */
border: solid 1px #3ea6ff;
padding: 10px 12px 8px;
font-size: 14px;
color: #3ea6ff;
margin-top: 12px;}
- 중간에 나오는 다른 부분을 디자인
#youtube-left-content .youtube-footer {
padding-bottom: 150px;}
#youtube-left-content .youtube-footer .txt-wrap {
padding: 12px 24px 0;}
#youtube-left-content .youtube-footer .txt-wrap a {
margin-right: 8px;
color: #aaaaaa;
font-size: 12px;
font-weight: 500;
word-break: keep-all;
/* 단어를 기준으로 줄바꿈 */}
#youtube-left-content .youtube-footer .txt-wrap p {
font-size: 12px;
font-weight: 400;
color: #717171;}
-공통된 부분을 디자인하고 p를 사용해 다른 부분을 제작
메인 페이지
HTML
<main id="youtube-main" role="main">
<div id="youtube-main-content">
<ul class="flex-align-between">
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024px*640px">
<span class="time">00:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img src="https://via.placeholder.com/36" class="profile">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한 상사 특집편! 퇴근하려면 하시던가요...
</a>
</h3>
<p>
<a href="#" 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>
</main>CSS
#youtube-main {
position: absolute;
left: 240px;
top: 56px;
right: 0;
bottom: 0;
background-color: #212121;}
#youtube-main-content {
width: 100%;
height: 100%;
padding: 24px;}
#youtube-main-content ul {
width: 100%;
height: 100%;
align-items: flex-start;
align-content: flex-start;
- 화면이 줄때 위쪽 정렬을 항상 유지}
#youtube-main-content ul li {
width: 24%;
/* 브라우저의 크기가 변하면 24%의 비율을 유지 */
margin-bottom: 40px;
background-color: #212121;}
#youtube-main-content li .video-thumbnail {
width: 100%;}
#youtube-main-content li .video-thumbnail a {
position: relative;
display: block;
width: 100%;}
#youtube-main-content li .video-thumbnail img {
width: 100%;}
#youtube-main-content li .video-thumbnail .time {
position: absolute;
font-size: 12px;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.8);
padding: 3px 4px;
bottom: 4px;
right: 4px;}
#youtube-main-content li .video-txt-wrap {
margin-top: 12px;
align-items: flex-start;}
#youtube-main-content li .video-txt-wrap .image-link {
display: block;
width: 36px;
width: 36px;
margin-right: 12px;}
#youtube-main-content li .video-txt-wrap .image-link img {
width: 100%;
height: 100%;
border-radius: 50%;}
#youtube-main-content li .video-txt-wrap .txt {
width: calc(100% - 48px);}
#youtube-main-content li .video-txt-wrap .txt h3 {
font-size: 15px;
margin-bottom: 6px;}
#youtube-main-content li .video-txt-wrap .txt .title-link {
color: #ffffff;}
#youtube-main-content li .video-txt-wrap .txt p .channel-link {
font-size: 12px;
color: #aaaaaa;}
#youtube-main-content li .video-txt-wrap .txt .txt-bottom .count,
#youtube-main-content li .video-txt-wrap .txt .txt-bottom .date {
font-size: 12px;
color: #aaaaaa;}2. 학습 중 어려웠던 점
배웠던 내용이라 어려운 점이 없었다.
3. 해결방안
4. 학습 소감
자바를 배워서 더 많은 것을 활용해보고 싶다
안녕하세요!