8월 24일 화
학습한 내용
필기1
text-align: center;
left: 50%;
transform: translateX(-50%);
//가운데 정렬 방법
필기2
더보기에 배경색상을 넣은 이유 : 색상을 입힘으로 레이어가 형성되게하여 볼더 선을 잘라먹게 하 기 위해서
필기3
마우스 호버시 테두리 생기며 움직이는 효과 만들기
1. 배경색을 넣어주고(보라)
2. 이미지 움직이는 속도 설정
3. 이미지 움직이는 범위, 방향 설정
실제 작업 순서는 1 -> 3 -> 2 순서로 하셨음
학습한 내용 중 어려웠던 점 또는 해결못한 것들
카테고리 오타를 냈었다.
해결방법 작성
학습 소감
짧고 굴게 트위치 카피캣을 해서 성취감이 네이버 보다 조금 더 쌓이는 것 같다.
<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>
<button type="button" class="btn-more font-purple">더보기</button>
</div>
<div class="video-section">
<div class="title-wrap">
<h2>추천 <span class="font-purple">Just Chatting</span> 채널</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>
<button type="button" class="btn-more font-purple">더보기</button>
</div>
<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>
<button type="button" class="btn-more font-purple">더보기</button>
</div>
<div class="video-section">
<div class="title-wrap">
<h2>추천<span class="font-purple">League of Legends</span> 채널</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>
<button type="button" class="btn-more font-purple">더보기</button>
</div>
<div class="video-section">
<div class="title-wrap">
<h2>추천 <span class="font-purple">StarCraft</span> 채널</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>
<button type="button" class="btn-more font-purple">더보기</button>
</div>
<div class="category-section">
<div class="title-wrap">
<h2>취향 <span class="font-purple">저격</span> 카테고리</h2>
</div>
<div class="category-wrap">
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/152x203">
<div class="txt-wrap">
<h3>Apex Legends</h3>
<p class="count">시청자 4.1만명</p>
<div class="tag-wrap">
<span class="tag">e스포츠</span>
<span class="tag">한국어</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<footer>
<div class="txt-wrap">
<p>상호명: 트위치 프라임</p>
<p>상호명: 트위치 프라임</p>
<p>상호명: 트위치 프라임</p>
<p>상호명: 트위치 프라임</p>
<p>상호명: 트위치 프라임</p>
</div>
<div class="footer-bottom">
<ul>
<li><a href="#">지원팀에 문의</a></li>
<li><a href="#">판매약관</a></li>
<li><a href="#">사업자 정보</a></li>
</ul>
</div>
</footer>
</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;
margin-top: 5px;
}
.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 {
position: relative;
padding-top: 60px;
padding-bottom: 40px;
border-bottom: solid 1pxx grey;}
.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;
background-color: #9147ff;}
.video-section .video-wrap .image-wrap img {
width: 100%;
height: 100%;
transition: transform 0.15s linear;}
.video-section .video-wrap .image-wrap:hover img {
transform: translate(10px, -10px);
}
.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;
}
.video-section .btn-more {
position: absolute;
width: 100px;
height: 30px;
background-color: #0e0e10;
text-align: center;
line-height: 30px;
bottom: -16px;
left: 50%;
transform: translateX(-50%);}
.category-section {
padding-top: 60px;
padding-bottom: 40px;
}
.category-section .title-wrap {
padding-bottom: 10px;
}
.category-section .title-wrap h2 {
font-size: 20px;
}
.category-section .category-wrap {
}
.category-section .category-wrap ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.category-section .category-wrap li {
width: 152px;
}
.category-section .category-wrap img {
width: 152px;
height: 203px;
margin-bottom: 10px;
}
.category-section .category-wrap .txt-wrap {
}
.category-section .category-wrap .txt-wrap .count {
font-size: 14px;
color: grey;
}
footer {
width: 100%;
padding: 80px 0 150px;
text-align: center;}
footer .txt-wrap {
text-align: center;
}
footer .txt-wrap p {
font-size: 14px;
}
footer .footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: stretch;
margin-top: 20px;}
footer ul {
}
footer ul li {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: stretch;
}
footer ul li a {
color: grey;
font-size: 14px;
}
footer ul li a:after {
content: '';
display: inline-block;
width: 1px;
height: 12px;
background-color: grey;
margin: 0 8px;
position: relative;
top: 1px;}
footer ul li:last-child a:after {
content: none;
}
