오늘의 강의 내용
* 유튜브 채널 컨텐츠, 탐색 컨텐츠 카피캣
.png)
카피캣 영역인 유튜트채널 컨텐츠
.png)
카피캣 영역인 유튜브탐색 컨텐츠
.png)
유튜트채널 컨텐츠 카피캣 완료된 모습
.png)
유튜브탐색 컨텐츠 카피캣 완료된 모습
<!-- channel.html언어 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>유튜브 튜토리얼</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<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 type="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>YOUTUBE 더보기</h2>
</div>
<div class="nav_body">
<ul>
<li>
<a href="#" class="flex_align_start">
<i class="icon icon_6"></i>
<span>You Tube 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 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="#">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 you Nice to meet you Nice to meet you Nice to meet you Nice to meet you</p>
</div>
</footer>
</div>
</nav>
<main role="main" id="youtube_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/246x138">
<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>
</body>
</html>
<!-- style.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;
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: 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);
}
#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;
}
#channel_recent {
align-items: flex-start;
padding: 24px 0;
border-bottom: solid 1px gray;
}
#channel_recent .thumbnail_wrap {
position: relative;
width: 246px;
height: 138px;
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;
}
.channel_playlists-section {
padding: 24px 0;
border-bottom: solid 1px gray;
}
.channel_playlists-section .playlists_header {
}
.channel_playlists-section .playlists_header h3 {
font-size: 18px;
color: #ffffff;
margin-right: 20px;
}
.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: #ffffff;
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;
}유튜브채널 컨텐츠 소스코드
<!-- explore.html언어 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>유튜브 튜토리얼</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<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 type="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>YOUTUBE 더보기</h2>
</div>
<div class="nav_body">
<ul>
<li>
<a href="#" class="flex_align_start">
<i class="icon icon_6"></i>
<span>You Tube 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 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="#">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 you Nice to meet you Nice to meet you Nice to meet you Nice to meet you</p>
</div>
</footer>
</div>
</nav>
<main role="main" id="youtube_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 id="popular_section">
<h2>인기 급상승 동영상</h2>
<ul>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
<li>
<a href="#" class="flex_align_start">
<div class="image_wrap">
<img src="https://via.placeholder.com/246x138">
<span class="time">10:00</span>
</div>
<div class="txt_wrap">
<h3>기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간 기발자 코딩 프로그램 24시간</h3>
<p class="video_info">
<span class="channel">기발자 코딩채널</span>
<span class="count">조회수 435만회</span>
<span class="date">1일전</span>
</p>
<p class="description">동해물과 백두산이 마르고 닳도록</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
<!-- style.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: gray;
border-radius: 5px;
padding: 20px;
}
#explore_nav li a:hover {
background-color: darkgray;
}
#explore_nav li .icon {
display: block;
width: 32px;
height: 32px;
background-color: red;
margin-bottom: 25px;
}
#explore_nav li span {
color: #ffffff;
font-size: 14px;
}
#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: 138px;
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 {
display: inline-block;
content: '';
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 .video_info .channel {
}
#popular_section li .txt_wrap .video_info .count {
}
#popular_section li .txt_wrap .video_info .date {
}
#popular_section li .txt_wrap .description {
padding-top: 8px;
font-size: 14px;
color: #aaaaaa;
}유튜브탐색 컨텐츠 소스코드
강의가 끝난후 소감
이번에 유튜브카피갯을 마무리 하였는데, 규모가 큰 외국사이트 이다 보니 다양한 코드기법을 알수있어서 좋았다.
힘든점, 문제점
딱히 이번강의 에서 힘든점은 없었다.
개선방안
나중에 개발자가 되기위해서는 다양한 코드기법을 필히 익혀두는것이 도움이 될것 같아서 생소한 코드기법도 응용하여 연습을 하여야 겠다.
i will be the best