8월 31일 화
학습한 내용
유튜브 개인 채널 페이지 작성
학습한 내용 중 어려웠던 점 또는 해결못한 것들
ul 태그에 flex start를 넣었는데 정렬 기준이 이상.
해결방법 작성
html 오타
학습 소감
벌써 8월의 말이다. 아직 부족한 점이 많은데 큰일이다.
--*-----
<div id="wrapper">
<nav id="youtube-top-nav">
<div class="youtube-top-wrap flex-align-between">
<div class="nav-left flex-align-start">
<button type="button" class="btn-menu"></button>
<h1>
<a href="#">
<img src="https://via.placeholder.com/90x20">
</a>
</h1>
</div>
<div class="nav-center flex-align-start">
<div class="search-wrap flex-align-start">
<input type="text" placeholder="검색">
<button type="button" class="btn-search"></button>
</div>
<button class="btn-voice"></button>
</div>
<div class="nav-right flex-align-end">
<button type="button" class="btn-menu btn-menu-1"></button>
<button type="button" class="btn-menu btn-menu-2"></button>
<a href="#" class="btn-login">로그인</a>
</div>
</div>
</nav>
<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="explore.html" 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>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-13"></i>
<span>360° 동영상</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>YOUTBUE 더보기</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-4"></i>
<span>설정</span>
</a>
</li>
<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-4"></i>
<span>고객센터</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>의견 보내기</span>
</a>
</li>
</ul>
</div>
</div>
<footer id="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="#">Youtube 자동의 원리</a>
<a href="#">새로운 기능 테스트하기</a>
</div>
<div class="txt-wrap">
<p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet youNice to meet you</p>
</div>
</footer>
</div>
</nav>
<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>
<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>
</div>
</main>
</div>-
{
margin: 0;
padding: 0;box-sizing: border-box;}
html, body {
width: 100%;
height: 100%;
background-color: #212121;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
button {
background-color: transparent;
border: none;
}
input {
outline: none;
border: none;
}
input:focus {
outline: none;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
min-width: 1320px;
}
.flex-align-between {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
}
.flex-align-start {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: stretch;
}
.flex-align-end {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
align-content: stretch;
}
/상단 메뉴/
#youtube-top-nav {
position: fixed;
width: 100%;
height: 56px;
background-color: #212121;
padding: 0 16px;
z-index: 9999;}
#youtube-top-nav .nav-left {
height: 56px;
}
#youtube-top-nav .nav-left .btn-menu {
width: 24px;
height: 24px;
background-color: yellow;
}
#youtube-top-nav .nav-left h1 {
margin-left: 16px;
}
#youtube-top-nav .nav-left h1 a {
}
#youtube-top-nav .nav-left h1 img {
width: 90px;
height: 20px;
}
#youtube-top-nav .nav-right {
height: 56px;
}
#youtube-top-nav .nav-right .btn-menu {
width: 40px;
height: 40px;
margin-right: 16px;
}
#youtube-top-nav .nav-right .btn-menu.btn-menu-1 {
background-color: grey;
}
#youtube-top-nav .nav-right .btn-menu.btn-menu-2 {
background-color: yellow;
}
#youtube-top-nav .nav-right .btn-login {
display: inline-block;
border: solid 1px #3ea6ff;
padding: 10px 12px 8px;
font-size: 14px;
color: #3ea6ff;}
#youtube-top-nav #nav-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#youtube-top-nav #nav-center .search-wrap {
width: 640px;
height: 30px;}
#youtube-top-nav #nav-center .search-wrap input {
width: calc(100% - 65px);
height: 30px;
border: solid 1px grey;
background-color: #212121;
color: #ffffff;
padding: 2px 6px;
font-size: 14px;}
#youtube-top-nav #nav-center .search-wrap .btn-search {
width: 65px;
height: 30px;
border: solid 1px grey;
background-color: grey;
}
#youtube-top-nav #nav-center .btn-voice {
width: 24px;
height: 24px;
background-color: blue;
margin-left: 16px;}
/왼쪽 사이드 메뉴/
#youtube-left-nav {
overflow-y: auto;
overflow-x: hidden;
position: fixed;
width: 240px;
background-color: #212121;
top: 56px;
left: 0;
bottom: 0;}
#youtube-left-content {
position: absolute;
width: 225px;
height: 100%;
/background-color: grey;/
}
#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 {
}
#youtube-left-content .nav-section .nav-body ul {
}
#youtube-left-content .nav-section .nav-body li {
}
#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-weight: 400;
font-size: 13px;
}
#youtube-left-content .nav-section .nav-body .txt-wrap .btn-login {
display: inline-block;
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;
color: #717171;
font-weight: 400;
}
/유튜브 메인/
#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 {
align-items: flex-start;
align-content: flex-start;
width: 100%;
height: 100%;
}
#youtube-main-content ul li {
width: 24%;
background-color: #212121;
margin-bottom: 40px;
}
#youtube-main-content ul li .video-thumbnail {
width: 100%;
}
#youtube-main-content ul li .video-thumbnail a {
position: relative;
display: block;
width: 100%;
}
#youtube-main-content ul li .video-thumbnail img {
width: 100%;
}
#youtube-main-content ul li .video-thumbnail .time {
position: absolute;
background-color: rgba(0, 0, 0, .8);
font-size: 12px;
color: #ffffff;
padding: 3px 4px;
bottom: 4px;
right: 4px;}
#youtube-main-content ul li .video-txt-wrap {
align-items: flex-start;
margin-top: 12px;
}
#youtube-main-content ul li .video-txt-wrap .image-link {
display: block;
width: 36px;
height: 36px;
margin-right: 12px;}
#youtube-main-content ul li .video-txt-wrap .image-link img {
width: 100%;
height: 100%;
border-radius: 50%;
}
#youtube-main-content ul li .video-txt-wrap .txt {
width: calc(100% - 48px);
}
#youtube-main-content ul li .video-txt-wrap .txt h3 {
font-size: 15px;
margin-bottom: 6px;
}
#youtube-main-content ul li .video-txt-wrap .txt h3 .title-link {
color: #ffffff;
}
#youtube-main-content ul li .video-txt-wrap .txt p {
font-size: 12px;
}
#youtube-main-content ul li .video-txt-wrap .txt p .channel-link {
color: #aaaaaa;
}
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom {
}
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .count,
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .date {
font-size: 12px;
color: #aaaaaa;
}
/ 유튜브 채널 페이지 /
.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;
background-color: rgba(24, 24, 24, 1.0);
}
#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: 80px;
height: 80px;
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: 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;}
#channel-nav {
background-color: rgba(24, 24, 24, 1.0);
}
#channel-nav ul {
}
#channel-nav li {
}
#channel-nav li a {
display: block;
height: 47px;
line-height: 47px;
padding: 0 32px;
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;
}
#channel-recent {
padding: 24px 0;
align-items: flex-start;
border-bottom: solid 1px #aaaaaa;
}
#channel-recent .content-wrap {
}
#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: 5x;
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;
}
.channel-playlists-section {
padding: 24px 0;
border-bottom: solid 1px grey;
}
.channel-playlists-section .playlists-header {
}
.channel-playlists-section .playlists-header h3 {
margin-right: 20px;
font-size: 18px;
color: #ffffff;
}
.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 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: 12px;
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: 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 {
}
.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;
}
