210831 개발일지

1) 학습한 내용

국내외 사이트 카피캣 유튜브

> 유튜브 채널 영역

<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>

.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;}

<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>

#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;}

<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>

#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: 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;}

<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>
</div> x 4

.channel-playlists-section 
	{padding: 24px 0;
	border-bottom: solid 1px grey;}

.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: 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;	}

<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>

/* 탐색 페이지 */
.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: grey;
	border-radius: 5px;

	padding: 20px;}

#explore-nav li a:hover 
	{background-color: darkgrey;}

#explore-nav li .icon 
	{display: block;
	width: 32px;
	height: 32px;
	background-color: red;

	margin-bottom: 25px;}

#explore-nav li span 
	{color: #ffffff;
	font-size: 16px;}

<div id="popular-section">

<h2>인기 급상승 동영상</h2>

<ul>
<li>
<a href="#" class="flex-align-start">

<div class="image-wrap">
<img src="https://via.placeholder.com/246x148">
<span class="time">10:00</span>
</div>

<div class="txt-wrap">
<h3>기발자 코딩 프로그램 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>
</div> x 14

#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: 148px;
	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 
	{content: '';
	display: inline-block;
	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;}

2)학습한 내용 중 어려웠던 점 또는 해결못한 것들

내용이 너무 많아서 당황했지만 해결했다.

3)해결방법 작성

상단과 왼쪽부분은 고정이라서 내용만 채우면 되어서
강의를 열심히 보며 해결했다.

4)학습 소감

오늘은 뭔가 내용이 많았다.
내일은 자바스크립트를 배울거같은데 두렵당.