210830 개발일지

juyoungkim·2021년 8월 30일

1) 학습한 내용

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

> 유튜브 하단 영역

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

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

<div class="nav-section">
					
<div class="nav-body">
<div class="txt-wrap">
<p>로그인하면 동영상에 좋아요를 표시하고 댓글을 달거나 구독할 수 있습니다.</p>
<a href="#" class="btn-login">로그인</a>
</div>
</div>
					
</div>

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

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

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

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

<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/1024x640">
<span class="time">00:20</span>
</a>
</div>

<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>

<div class="txt">
<h3>
<a href="#" class="title-link">
[무한도전] 무한상사 특집편! 퇴근... 할려면 하시던가요.
</a>
</h3>
								
<p><a href="a" class="a">MBC 엔터테이먼트</a></p>
								
<div class="txt-bottom">
<span class="count">조회수 71만회</span>
<span class="date">6개월 전</span>
</div>
</div>

</div>
</li> x 20

#youtube-main 
	{position: absolute;
	left: 240px;
	top: 56px;
	right: 0;
	bottom: 0;
	/*background-color: grey;*/}

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

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

다 해결했다.

3)해결방법 작성

강의를 열심히 들으며 작성해나갔다.

4)학습 소감

9월이 다가온다
팀플 같은거 할거같은데 두렵지만 화이팅

juyoungkim

이전 포스트

210827 개발일지

다음 포스트

210830 개발일지

1) 학습한 내용

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

3)해결방법 작성

4)학습 소감

210827 개발일지

210831 개발일지

0개의 댓글