8월 23일 월
학습한 내용
트위치 콘텐츠 영역(1)
헤더를 제외한 컨텐츠 부분에만 스크롤 적용시키는 방법. overflow-y 사용
그리고 3차원 특성을 이용한 공간 배치. 탑, 좌, 우, 바텀 범위를 0으로 하면 화면 전체 범위로 늘어난다. 그런데 탑 50px 좌 240px 를 넣으면 수치만큼 빈 공간으로 만든다.
backgorund 코드로 이미지를 넣을 수 있다.
코드안의 입력 순서는 상관 없다. url/no-repeat/center 등 위치 바껴도 됨.
복습-css폴더 밖의 img 폴더에 가기 위해서 ../ 를 통해서 나갈 수 있다.
background-size: cover;은 첨부한 이미지의 크기를 내가 설정한 값에 맞춰주는 기능이다.
학습한 내용 중 어려웠던 점 또는 해결못한 것들
해결방법 작성
학습 소감
오늘 실습 부분은 무난했다. 헤프닝으로 원래 알람이 울자마자 출석 체크를 하는데 오늘은 조금 있다가 해야지 하다가 놓쳐버렸다. 다행이 10시 6분에 알게되어 댓글을 남겼는데 다른 분의 질문글에 댓글을 남겼다. 잘못남겨진 걸 보고 다시 11분에 남겼는데 5분이 초과하면 안되지만 1회 만 예외처리 해주신다고 했다. 어차피 출석을 깜빡한 것이지만 그래도 6분에 댓글을 남겼다는 증거가 있어서 말을 하려고 했으나 구차한 변명인 것 같아서 말았다. 팀즈를 보면 가끔 출석을 놓치시는 분들이 계시는데 이 간단한걸 왜 놓치는 걸까? 공감이 되지 않았다. 그런데 오늘 내가 직접 실수를 해보니 너그러움이라는 것이 남을 위한게 아니라 그 실수가 내가 되었을 때를 대비한 보험이 아닌가 싶다. 너그러움과 친절함은 너도 좋고 나도 좋은 것 같다.
html 코드
트위치<nav id="top-nav">
<div class="nav-wrap">
<div class="nav-left">
<h1 class="logo">
<a href="#">
<img src="https://via.placeholder.com/24x28">
</a>
</h1>
<ul>
<li><a href="#">탐색</a></li>
<li><a href="#">e스포츠</a></li>
<li><a href="#">음악</a></li>
</ul>
<div class="more">
<a href="#">더보기</a>
</div>
</div>
<div class="nav-center">
<div class="search-wrap">
<input type="text" placeholder="검색">
<button class="btn-search"></button>
</div>
</div>
<div class="nav-right">
<div class="mark-wrap">
<i class="icon-mark"></i>
<span class="alarm">44</span>
</div>
<a href="#" class="btn-login">로그인</a>
<a href="#" class="btn-purple">회원가입</a>
<button class="btn-profile"></button>
</div>
</div>
</nav>
<div class="main-container">
<div class="left-area">
<div class="channel-wrap">
<div class="channel-header">
<h3>추천채널</h3>
<i class="icon-arrow"></i>
</div>
<div class="channel-body">
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>개발자(gae_balja)</h4>
<span class="source">Just
Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>개발자(gae_balja)</h4>
<span class="source">Just
Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>개발자(gae_balja)</h4>
<span class="source">Just
Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>개발자(gae_balja)</h4>
<span class="source">Just
Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>개발자(gae_balja)</h4>
<span class="source">Just
Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>개발자(gae_balja)</h4>
<span class="source">Just
Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>개발자(gae_balja)</h4>
<span class="source">Just
Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>개발자(gae_balja)</h4>
<span class="source">Just
Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>개발자(gae_balja)</h4>
<span class="source">Just
Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/30">
<div class="txt-wrap">
<h4>개발자(gae_balja)</h4>
<span class="source">Just
Chatting</span>
</div>
<span class="count">10,000</span>
</a>
</li>
</ul>
</div>
</div>
<div class="join-wrap">
<div class="txt-wrap">
<h2><span class="font-purple">Twitch</span>커뮤니티와 함께하세요!</h2>
<p>어디서나 최고의 생방송을 즐겨보세요.</p>
<button type="button" class="btn-purple">회원가입
</button>
</div>
</div>
<div class="info-wrap">
<p>상호명: 동해물과 백두산이</p>
<p>대표자명: 동해물</p>
<p>동해물과 백두산이 마르고 닳도록 하나늠이 보우하사 우리나라 만세</p>
<ul>
<li><a href="#">지원팀에 문의</a></li>
<li><a href="#">판매약관</a></li>
<li><a href="#">사업자 정보</a></li>
</ul>
</div>
</div>
<div class="content">
<div id="content-banner">
<div class="layer">
<div class="txt-wrap">
<h2>hello</h2>
<p>nice to meet ypu</p>
</div>
</div>
</div>
<div class="content-container">
<div class="video-section">
<div class="title-wrap">
<h2>취향 저격 생방송 채널</h2>
</div>
<div class="video-wrap">
<ul>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>2021 LCK Summer Split</h3>
<p class="source">LCK_Korea</p>
<p class="game">League of Legendes</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
<span class="tag">독일어</span>
<span class="tag">후원 열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>2021 LCK Summer Split</h3>
<p class="source">LCK_Korea</p>
<p class="game">League of Legendes</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
<span class="tag">독일어</span>
<span class="tag">후원 열차</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image-wrap">
<img src="https://via.placeholder.com/333x186">
<span class="mark">생방송</span>
</div>
<div class="video-bottom">
<img class="thumbnail" src="https://via.placeholder.com/40">
<div class="txt-wrap">
<h3>2021 LCK Summer Split</h3>
<p class="source">LCK_Korea</p>
<p class="game">League of Legendes</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
<span class="tag">독일어</span>
<span class="tag">후원 열차</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
<h1>동해물과 백두산이 동해물과 백두산이 동해물과 백두산이</h1>
</div>
</div>
</div>-+---
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #0e0e10;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: top;
}
input {
outline: none;
border: none;
}
button {
outline: none;
border: none;
background: transparent;
}
h1, h2, h3, h4, h5, h6, p, span, input, button, a {
color: #ffffff;
}
.btn-purple {
background-color: #9147ff;
color: #ffffff;
}
.font-purple {
color: #9147ff;
}
/상단 네비 영역/
#top-nav {
position: fixed;
width: 100%;
height: 50px;
background-color: #0e0e10;
padding: 0 15px;
min-width: 1340px;}
#top-nav .nav-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#top-nav .nav-wrap .nav-left {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
#top-nav .nav-wrap .nav-left .logo {
}
#top-nav .nav-wrap .nav-left .logo a {
}
#top-nav .nav-wrap .nav-left .logo a img {
width: 24px;
height: 28px;
}
#top-nav .nav-wrap .nav-left ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
#top-nav .nav-wrap .nav-left ul li {
height: 50px;
font-size: 20px;
padding: 0 20px;
}
#top-nav .nav-wrap .nav-left ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 50px;
}
#top-nav .nav-wrap .nav-left ul li:first-child {
padding-right: 0;
}
#top-nav .nav-wrap .nav-left ul li:first-child a:after {
position: relative;
display: inline-block;
content: '';
width: 1px;
height: 30px;
background-color: grey;
margin-left: 20px;
top: 8px;}
#top-nav .nav-wrap .nav-left .more a {
display: block;
font-size: 20px;
height: 50px;
line-height: 50px;
padding-left: 20px;}
#top-nav .nav-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#top-nav .nav-center .search-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 380px;
height: 36px;
background-color: yellow;
overflow: hidden;
border-radius: 5px;}
#top-nav .nav-center .search-wrap input {
width: calc(100% - 34px);
height: 100%;
background-color: grey;
}
#top-nav .nav-center .search-wrap .btn-search {
width: 34px;
height: 100%;
background-color: darkgrey;
}
#top-nav .nav-right {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
#top-nav .nav-right .mark-wrap {
position: relative;
}
#top-nav .nav-right .mark-wrap .icon-mark {
display: block;
width: 20px;
height: 20px;
background-color: yellow;
cursor: pointer;}
#top-nav .nav-right .mark-wrap .alarm {
position: absolute;
border-radius: 15px;
background-color: red;
color: #ffffff;
font-size: 14px;
top: -12px;
right: -20px;
padding: 4px 8px 2px;}
#top-nav .nav-right .btn-login {
width: 53px;
height: 30px;
border-radius: 5px;
background-color: grey;
text-align: center;
line-height: 30px;
margin-left: 20px;
font-size: 12px;}
#top-nav .nav-right .btn-purple {
width: 53px;
height: 30px;
border-radius: 5px;
text-align: center;
line-height: 30px;
margin-left: 10px;
font-size: 12px;}
#top-nav .nav-right .btn-profile {
width: 20px;
height: 20px;
background-color: #ffffff;
margin-left: 10px;}
.main-container {
position: relative;
width: 100%;
height: 100%;
min-width: 1340px;
/*padding-top: 50px;*/}
.left-area {
position: fixed;
width: 240px;
background-color: #202024;
top: 50px;
bottom: 0;
left: 0;
overflow-y: auto;}
.left-area .channel-wrap {
}
.left-area .channel-wrap .channel-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 10px;}
.left-area .channel-wrap .channel-header h3 {
font-size: 15px;
}
.left-area .channel-wrap .channel-header .icon-arrow {
display: inline-block;
width: 30px;
height: 30px;
background-color: #ffffff;
}
.left-area .channel-wrap .channel-body {
}
.left-area .channel-wrap .channel-body ul {
}
.left-area .channel-wrap .channel-body li {
}
.left-area .channel-wrap .channel-body a {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding: 5px 10px;}
.left-area .channel-wrap .channel-body img {
width: 30px;
height: 30px;
border-radius: 50%;
}
.left-area .channel-wrap .channel-body .txt-wrap {
width: 110px;
margin-left: 10px;
}
.left-area .channel-wrap .channel-body .txt-wrap h4 {
font-size: 13px;
}
.left-area .channel-wrap .channel-body .txt-wrap .source {
font-size: 12px;
color: grey;
}
.left-area .channel-wrap .channel-body .count {
display: block;
width: 53px;
font-size: 12px;
}
.left-area .channel-wrap .channel-body .count:before {
position: relative;
display: inline-block;
content: '';
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
margin-right: 5px;
top: 1px;}
.left-area .join-wrap {
margin: 10px;
}
.left-area .join-wrap .txt-wrap{
background-color: #18181a;
padding: 20px;
}
.left-area .join-wrap .txt-wrap h2 {
font-size: 24px;
}
.left-area .join-wrap .txt-wrap h2 span {
}
.left-area .join-wrap .txt-wrap p {
margin-top: 10px;
font-size: 13px;
}
.left-area .join-wrap .txt-wrap .btn-purple {
width: 53px;
height: 30px;
border-radius: 5px;
margin-left: 10px;
text-align: center;
line-height: 30px;
font-size: 12px;
margin-top: 10px;}
.left-area .info-wrap {
font-size: 12px;
margin: 0 10px 10px 10px;}
.left-area .info-wrap p {
color: grey;
}
.left-area .info-wrap ul {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 10px;}
.left-area .info-wrap li {
}
.left-area .info-wrap li a {
color: grey;
}
.left-area .info-wrap li a:after {
position: relative;
display: inline-block;
content: '';
width: 2px;
height: 10px;
background-color: grey;
margin: 0 5px;}
.left-area .info-wrap li:last-child a:after {
content: none;
}
.content {
overflow-y: auto;
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 240px;}
.content h1 {
font-size: 40px;
}
.content #content-banner {
position: relative;
width: 100%;
height: 350px;
background: url('../img/notebook.jpg') no-repeat center;
background-size: cover;
}
.content #content-banner .layer {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;}
.content #content-banner .layer .txt-wrap {
position: absolute;
top: 170px;
right: 200px;
}
.content .content-container {
width: 1240px;
margin: 0 auto;
}
/태그 디폴트/
.content-container .tag-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.content-container .tag-wrap .tag {
border-radius: 8px;
font-size: 10px;
color: #ffffff;
background-color: grey;
padding: 2px 4px 0;
margin-right: 5px;}
.content-container .tag-wrap .tag:last-child {
margin-right: 0;
}
.content-container .txt-wrap {
}
.content-container .txt-wrap h3 {
font-size: 16px;
}
/비디오 섹션/
.video-section {
}
.video-section .title-wrap {
padding-bottom: 10px;
}
.video-section .title-wrap h2 {
font-size: 20px;
}
.video-section .video-wrap {
}
.video-section .video-wrap ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.video-section .video-wrap li {
width: 333px;
}
.video-section .video-wrap a {
}
.video-section .video-wrap .image-wrap {
position: relative;
width: 333px;
height: 186px;
}
.video-section .video-wrap .image-wrap img {
width: 100%;
height: 100%;}
.video-section .video-wrap .image-wrap .mark {
position: absolute;
top: 15px;
left: 15px;
border-radius: 5px;
background-color: red;
padding: 2px 4px 0;
font-size: 14px;}
.video-section .video-wrap .video-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin-top: 10px;}
.video-section .video-wrap .video-bottom .thumbnail {
width: 40px;
height: 40px;
}
.video-section .video-wrap .video-bottom .txt-wrap {
width: calc(100% - 50px);
}
.video-section .video-wrap .video-bottom .txt-wrap .source,
.video-section .video-wrap .video-bottom .txt-wrap .game {
font-size: 14px;
color: grey;
}
