* {
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: middle;
}
.clearfix {
clear: both;
}
button {
border: none;
outline: none;
background-color: transparent;
cursor: pointer;
}
input, textarea {
outline: none;
border: none;
}
h1, h2, h3, h4, h5, h6, p, span, input, button, a {
color: #ffffff;
}
.btn-purple {
background-color: #9147ff;
color: #ffffff;
}
.font-purple {
color: #9147ff;
}
.flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.flex-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.flex-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
/* 상단 네비 영역 */
#top-nav {
position: fixed;
width: 100%;
min-width: 1340px;
height: 50px;
background-color: #0e0e10;
padding: 0 15px;
z-index: 999;
}
#top-nav .nav-wrap .nav-left .logo a img {
width: 24px;
height: 28px;
}
#top-nav .nav-wrap .nav-left ul li {
height: 50px;
padding: 0 20px;
font-size: 20px;
}
#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 {
display: inline-block;
position: relative;
content: "";
width: 1px;
height: 30px;
background-color: gray;
margin-left: 20px;
top: 8px;
}
#top-nav .nav-wrap .nav-left ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 50px;
}
#top-nav .nav-wrap .nav-left .more a {
display: block;
height: 50px;
padding-left: 20px;
line-height: 50px;
font-size: 20px;
}
#top-nav .nav-wrap .nav-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#top-nav .nav-wrap .nav-center .search-wrap {
overflow: hidden;
width: 380px;
height: 36px;
border-radius: 5px;
background-color: gray;
}
#top-nav .nav-wrap .nav-center .search-wrap input {
width: calc(100% - 34px);
height: 100%;
background-color: darkgrey;
padding: 5px 10px;
}
#top-nav .nav-wrap .nav-center .search-wrap .btn-search {
width: 34px;
height: 100%;
background: url(../../naver-ex/img/search-white.png) no-repeat;
background-size: 24px;
background-position: 5px;
}
#top-nav .nav-wrap .nav-right .mark-wrap {
position: relative;
}
#top-nav .nav-wrap .nav-right .mark-wrap .icon-mark {
display: block;
width: 20px;
height: 20px;
background-color: greenyellow;
}
#top-nav .nav-wrap .nav-right .mark-wrap .alarm {
position: absolute;
border-radius: 15px;
background-color: red;
padding: 2px 5px;
color: #ffffff;
font-size: 14px;
top: -12px;
right: -12px;
}
#top-nav .nav-wrap .nav-right .btn {
width: 60px;
height: 30px;
border-radius: 5px;
text-align: center;
line-height: 30px;
font-size: 12px;
}
#top-nav .nav-wrap .nav-right .btn-login {
margin-left: 20px;
background-color: gray;
color: #ffffff;
}
#top-nav .nav-wrap .nav-right .btn-purple {
margin-left: 10px;
}
#top-nav .nav-wrap .nav-right .btn-profile {
width: 20px;
height: 20px;
background-color: #fff;
margin-left: 10px;
}
/* 컨텐츠 영역 */
.content {
overflow-y: auto;
position: absolute;
top: 50px;
left: 240px;
bottom: 0;
right: 0;
}
.content h1 {
font-size: 40px;
}
.content #content-banner {
position: relative;
width: 100%;
height: 350px;
background: url(../img/game.jpg) no-repeat center;
background-size: cover;
}
.content #content-banner .layer {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
top: 0;
left: 0;
}
.content #content-banner .layer .txt-wrap {
position: absolute;
top: 170px;
right: 200px;
}
.content .content-container {
width: 1060px;
margin: 0 auto;
}
/* 태그 디폴트 */
.content-container .tag-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 5px;
}
.content-container .tag-wrap .tag {
font-size: 12px;
font-weight: bold;
color: #d3d3d3;
background-color: #ffffff26;
border-radius: 10px;
padding: 3px 8px;
margin-right: 5px;
}
.content-container .tag-wrap .tag:hover {
background-color: rgb(255, 255, 255, 0.2);
}
.content-container .tag-wrap .tag:last-child {
margin-left: 0;
}
.content-container .txt-wrap {
}
.content-container .txt-wrap h3 {
font-size: 16px;
color: #dedee3;
letter-spacing: 1px;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content-container .txt-wrap h3:hover {
color: #9147ff;
}
/* 비디오 섹션 */
.video-section {
position: relative;
padding-top: 50px;
padding-bottom: 30px;
border-bottom: solid 1px #ffffff1a;
}
.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: 32%;
margin-right: auto;
}
.video-section .video-wrap li:last-child {
margin-right: 0;
}
.video-section .video-wrap a {
}
.video-section .video-wrap .image-wrap {
position: relative;
width: 100%;
height: 183px;
background-color: #9147ff;
}
.video-section .video-wrap .image-wrap .image-wrap-sub {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.15s linear;
}
.video-section .video-wrap .image-wrap:hover .image-wrap-sub {
transform: translate(6px, -6px);
}
.video-section .video-wrap .image-wrap img {
width: 100%;
height: 100%;
}
.video-section .video-wrap .image-wrap .mark {
position: absolute;
top: 10px;
left: 10px;
border-radius: 5px;
background-color: red;
padding: 3px 5px;
font-size: 14px;
font-weight: bold;
}
.video-section .video-wrap .image-wrap .count {
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 2px;
background-color: rgba(0, 0, 0, .6);
padding: 2px;
font-size: 13px;
}
.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;
border-radius: 50%;
}
.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: 13px;
color: #adadb8;
margin-top: 3px;
}
.video-section .video-wrap .video-bottom .txt-wrap .source:hover,
.video-section .video-wrap .video-bottom .txt-wrap .game:hover {
color: #9147ff;
}
.video-section .btn-more {
position: absolute;
width: 100px;
height: 30px;
background-color: #0e0e10;
border-radius: 20px;
padding: 0 10px;
text-align: center;
line-height: 30px;
font-weight: bold;
color: #bf94ff;
bottom: -16px;
left: 50%;
transform: translate(-50%);
cursor: pointer;
}
.video-section .btn-more:hover {
background-color: rgba(255, 255, 255, .3);
border-radius: 4px;
}
트위치 페이지 영상이 있는 새로운 색상코드
기존에 있던 양식은 눈에 익으나 HTML제외 기타 부분이 궁금함
새로운 색상코드를 뜯어서 봄
복습