8월 30일 월
학습한 내용
메인 부분에 배경 색이 흰색이 보인다.
그 이유는 오른쪽에 스크롤이 잡혀있는데 이 스크롤은 브라우저 기준으로 잡혀있다.
따라서 main 부분을 넘어서 body 부분의 기본 색상인 흰색이 보이는 것.
따라서 body부분에 배경 컬러를 넣음으로 해결.
단어 마다 줄 바꿈을 할때 사용.
word-break: keep-all;
a태그 안에 a 태그 넣기 XXX 안돼
학습한 내용 중 어려웠던 점 또는 해결못한 것들
class 명 빠트림
해결방법 작성
천천히 구조를 살펴보며 해결
학습 소감
월 말이다. 사실상 정규 교육 과정은 끝이 났다. 다음 주 부터 실무 프로젝트라는데 팀원들에게 민폐가 될 것 같다. 하지만 오히려 그때 공부가 더 될 것 같기도 한데 걱정이 대부분이다.
유튜브
<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">
<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="#" 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-6"></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 Prepium</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-7"></i>
<span>실기간</span>
</a>
</li>
</ul>
</div>
<div class="nav-section">
<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>
</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 you Nice to meet you Nice to meet you Nice to meet youNice to meet you</p>
</div>
</footer>
</div>
</div>
</nav>
<main id="youtube-main" role="main">
<div id="youtube-main-content">
<ul class="flex-align-between">
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
<li>
<div class="video-thumbnail">
<img src="https://via.placeholder.com/1024x640">
<span class="time">00:20</span>
</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>
<a href="#">
</a>
</li>
</ul>
</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;
}
