본문 바로가기
실시간TV∴영화∴드라마∴예능

스마트 웹 사이트 디자인 동영상 슬라이드 메뉴

반응형

 스마트 웹 사이트 디자인 동영상 슬라이드 메뉴

 ubang.tistory.com

 미리보기.

 

전체소스

더보기 
<!doctype html>
<html>
<head>
<meta charset="euc-kr">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Smart website design video slide menu"/>
<title>웹 사이트 디자인 동영상 슬라이드 메뉴</title>
<style>
@font-face{
font-family:'PyeongChangPeace-Bold';
src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
font-weight:700;
font-style:normal;
}
@font-face {
font-family:'SpoqaHanSansNeo-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{
-webkit-text-size-adjust:100%;
font-family:'SpoqaHanSansNeo-Regular', AppleSDGothicNeo-Regular, Georgia, Arial, Helvetica, FontAwesome, serif;
margin: 0;
padding: 0;
font-weight: 400;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.gnb_menu .gnb_menu_list,
.gnb_menu .gnb_menu_list_recruit,
.header h2 a, nav {
display: inline-block;
}
.inner {
display: flow-root;
}
#header {
position: relative;
padding: 20px 0 10px;
width: 100%;
}
#header:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%;
opacity: 0.4;
z-index: -1;
}
.header h2 {
letter-spacing: -0.02em;
color: #1a1a1a;
font-size: 24px;
font-weight: 900;
width: 50%;
float: left;
}
.header h2 a {
color: #000;
}

.header .menu {
position: fixed;
top: 0;
right: -100%;
z-index: 400;
overflow: auto;
width: 100%;
height: 100%;
padding: 30px 26px;
background-color: #3f51b5;
box-sizing: border-box;
transition: right 0.3s ease-in-out;
text-align: left;
}
.header .menu p {
margin-top: 133px;
font-size: 0.75em;
color: #9b9b9b;
}
.header .menu.on {
right: 0;
}
.menu #gnb h2 a {
color: #000;
font-size: 0.7em;
font-weight: 900;
}
.menu .menu-list ul li a {
display: block;
color: #000;
font-size: 0.8em;
padding-top: 15px;
}
.menu .cat-list h3 {
font-size: 0.9em;
padding-top: 5px;
padding-bottom: 5px;
display: none;
}
.menu .cat-list ul li a {
display: block;
color: #fff;
font-size: 14px;
}
span.logo img:hover {
opacity: 0.5;
transition: 0.2s ease-out;
}
.gnb_menu .gnb_dropMenu .gnb_dropMenu_item:focus span:before,
.gnb_menu .gnb_dropMenu .gnb_dropMenu_item:hover span:before,
.gnb_menu .gnb_menu_list .gnb_menu_item:focus:before,
.gnb_menu .gnb_menu_list.on .gnb_menu_item:before,
.gnb_menu .gnb_menu_list:hover .gnb_menu_item:before,
.gnb_menu .gnb_menu_list_recruit .gnb_menu_item:focus:before,
.gnb_menu .gnb_menu_list_recruit:hover .gnb_menu_item:before{
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
header {
position: fixed;
left: 0;
top: 0;
}
span.btn.view {
line-height: 33px;
letter-spacing: 1px;
}
#info-txt > div.left > img,
.gnb_menu,
.header_wrap{
text-align: center;
}
img {
height: auto;
}
header, header.active {
height: 80px;
}
header {
right: 0;
z-index: 9998;
min-width: 1100px;
-webkit-transition: top 0.4s ease-in-out;
transition: top 0.4s ease-in-out;
}
.header_up {
top: -80px;
}
.header_wrap {
max-width: 1600px;
margin: 0 auto;
}
.gnb_menu {
font-size: 0;
}
.gnb_menu .gnb_menu_list .gnb_menu_item:before,
.gnb_menu .gnb_menu_list_recruit .gnb_menu_item:before {
content: "";
position: absolute;
left: -1px;
bottom: 20px;
width: calc(100% + 2px);
height: 2px;
background-color: #3f51b5;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.gnb_menu .gnb_menu_list_recruit .gnb_menu_item:focus:after,
.gnb_menu .gnb_menu_list_recruit:hover .gnb_menu_item.recruit:after {
content: "";
position: absolute;
right: 1px;
top: 28px;
width: 18px;
height: 18px;
background: url(https://tistory3.daumcdn.net/tistory/240726/skin/images/Link_arrow.svg) bottom/contain no-repeat;
}
.gnb_menu .gnb_menu_item {
display: block;
position: relative;
margin: 0 28px;
padding: 31px 0;
font-size: 15px;
color: var(--color-first);
font-weight: 600;
}
.gnb_menu .gnb_menu_item.recruit {
padding-right: 25px;
}
.gnb_menu .gnb_dropMenu_wrap {
display: none;
position: absolute;
left: 0;
right: 0;
top: 80px;
z-index: 999;
min-width: 1100px;
height: 277px;
background-color: #282e42;
font-size: 0;
text-align: center;
padding-bottom: 28px;
}
.gnb_menu .gnb_dropMenu_wrap > li {
position: relative;
display: inline-block;
vertical-align: top;
width: 190px;
height: 287px;
padding: 18px 0 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.gnb_menu .gnb_dropMenu_wrap > li:before,
.gnb_menu .gnb_dropMenu_wrap > li:last-child:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
background-color: #fff;
opacity: 0.1;
}
.gnb_menu .gnb_dropMenu_wrap > li:last-child:after {
left: auto;
right: 0;
}
.gnb_menu .gnb_dropMenu_wrap > li:hover {
background-color: #2f3d8a;
}
.gnb_menu .gnb_dropMenu > li {
margin: 0 0 5px;
font-size: initial;
text-align: left;
}
.gnb_menu .gnb_dropMenu .depth_top_category {
margin-bottom: 22px;
}
.gnb_menu .gnb_dropMenu .depth_top_edge {
margin: 0 0 18px;
}
.gnb_menu .gnb_dropMenu > li.depth_blank {
margin-bottom: 14px;
}
.gnb_menu .gnb_dropMenu > li:last-child {
margin-bottom: 0;
}
.gnb_menu .gnb_dropMenu .classify {
margin-bottom: 22px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.gnb_menu .gnb_dropMenu .classify:first-child {
padding-top: 0;
border-top: 0;
}
.gnb_menu .gnb_dropMenu .gnb_dropMenu_item {
display: block;
padding: 0 0 0 28px;
color: #fff;
line-height: 1.2;
}
.gnb_menu .gnb_dropMenu .gnb_dropMenu_item.btn_link:after {
right: 74px;
top: 17px;
background-position: -81px 0;
}
.gnb_menu .gnb_dropMenu .gnb_dropMenu_item .depth {
position: relative;
display: inline-block;
font-size: 14px;
font-weight: 200;
}
.gnb_menu .gnb_dropMenu .gnb_dropMenu_item span:before,
.sitemap_list .menu_list a span:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #fff;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.gnb_menu .gnb_dropMenu .gnb_dropMenu_item strong span {
position: relative;
}

.header_wrap{
background:#F9F9F9;
}
.wrap {
overflow: hidden;
margin: 85px 10px 30px 10px;
}
.box {
float: left;
position: relative;
width: 100%;
}
.boxInner {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
overflow: hidden;
border: 1px solid black;
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
}
.boxInner img {
width: 100%;
-webkit-filter: grayscale(0);
filter: grayscale(0);
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.boxInner img:hover{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.boxInner .titleBox {
width: auto;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
padding: 10px;
text-align: center;
font-size:.85em;
}
@media only screen and (max-width : 480px) {
.box {
width: 100%;
padding-bottom:56.25%;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
.box {
width: 50%;
padding-bottom:28.125%;
}
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
.box {
width: 33.3%;
padding-bottom:18.75%;
}
}
@media only screen and (min-width : 1051px) {
.box {
width: 25%;
padding-bottom:14.0625%;
}
}
.mylogo{
position:absolute;
left:10px;
top:16px;
font-size:2.25em;
font-family:'PyeongChangPeace-Bold';
color:#000;
text-shadow:-1px 0px #FFF, 0px 1px #FFF, 1px 0px #FFF, 0px -1px #FFF;
z-index:2;
}
.footer{
position:relative;
width:100%;
height:128px;
background-color:#080914;
color:#FFF;
}
.copyright{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
color:#EEE;
font-size:.85em;
}
.iframe-lightbox,
.iframe-lightbox .backdrop{
width:100%;
height:100%;
top:0;
left:0;
margin:auto;
}
.iframe-lightbox{
display:none;
position:fixed;
opacity:0;
-webkit-transition:opacity 0.2s ease;
transition:opacity 0.2s ease;
z-index:999999;
}
.iframe-lightbox .backdrop{
position:absolute;
background-color:rgba(0, 0, 0, 0.7);
cursor:default;
}
.iframe-lightbox .content-holder{
width:90%;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
margin-right:-50%;
}
.iframe-lightbox .content{
height:0;
position:relative;
padding-bottom:56.25%;
}
.iframe-lightbox .content>.body{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.iframe-lightbox .content>.body .half-circle-spinner,
.iframe-lightbox .content>.body .half-circle-spinner *{
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.iframe-lightbox .content>.body .half-circle-spinner{
width:60px;
height:60px;
border-radius:100%;
position:relative;
margin:0;
position:fixed;
top:50%;
left:50%;
margin-right:-50%;
-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
.iframe-lightbox .content>.body .half-circle-spinner .circle{
content:"";
position:absolute;
width:100%;
height:100%;
border-radius:100%;
border:calc(60px / 10) solid transparent;
}
.iframe-lightbox .content>.body .half-circle-spinner .circle.circle-1{
border-top-color:#FFFFFF;
-webkit-animation:half-circle-spinner-animation 1s infinite;
animation:half-circle-spinner-animation 1s infinite;
}
.iframe-lightbox .content>.body .half-circle-spinner .circle.circle-2{
border-bottom-color:#FFFFFF;
-webkit-animation:half-circle-spinner-animation 1s infinite alternate;
animation:half-circle-spinner-animation 1s infinite alternate;
}
@-webkit-keyframes half-circle-spinner-animation{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes half-circle-spinner-animation{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
.iframe-lightbox .content>.body.is-loaded .half-circle-spinner{
display:none;
}
.iframe-lightbox iframe{
display:block;
width:100%;
height:100%;
border:0;
box-shadow:0.267rem 0.267rem 0.267rem 0 rgba(3, 3, 3, 0.3);
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
-webkit-transition:opacity 0.2s ease;
transition:opacity 0.2s ease;
border-radius:10px;
}
.iframe-lightbox.is-showing{
display:block;
}
.iframe-lightbox.is-opened{
opacity:1;
}
.iframe-lightbox .btn-close{
position:fixed;
top:0.625em;
right:0.625em;
width:1.500em;
height:1.500em;
}
.iframe-lightbox .btn-close:before,
.iframe-lightbox .btn-close:after{
content:" ";
width:0.125em;
height:1.500em;
position:absolute;
right:0.625em;
background-color:#FFFFFF;
}
.iframe-lightbox .btn-close:before{
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.iframe-lightbox .btn-close:after{
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
body.iframe-lightbox--open{
overflow:hidden;
}
</style>
</head>
<body>
<div id="wrap">
<header class="header">
<div class="header_wrap">
<a href=""><span class="mylogo">스마트웹</span></a>
<nav>
<ul class="gnb_menu" role="menu">
<li class="gnb_menu_list " role="menuitem" aria-haspopup="true"><a href="" aria-expanded="false" class="gnb_menu_item" title="라이브러리 브랜드">라이브러리 브랜드</a>
<ul class="gnb_dropMenu_wrap">
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="라이브러리 브랜드">
<strong>
<span>라이브러리 브랜드</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="에세이">
<span class="depth">에세이</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="다이어리">
<span class="depth">다이어리</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="노트">
<span class="depth">노트</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="비즈니스">
<span class="depth">비즈니스</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="성과추적">
<span class="depth">성과추적</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="단어">
<span class="depth">단어</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="글쓰기">
<span class="depth">글쓰기</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="기사">
<span class="depth">기사</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="게임·엔터테인먼트">
<strong>
<span>게임·엔터테인먼트</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="게임소식">
<span class="depth">게임소식</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="마인크래프트">
<span class="depth">마인크래프트</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="스타크래프트">
<span class="depth">스타크래프트</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="모바일게임">
<span class="depth">모바일게임</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="인물·연예인">
<span class="depth">인물·연예인</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="/" class="gnb_dropMenu_item" rel="noopener" title="브랜드">
<strong>
<span>브랜드</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="라이브러리 기술블로그" target="_top">
<span class="depth">라이브러리 기술블로그</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="홈즈에셋" target="_top">
<span class="depth">홈즈에셋</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="우주연구소" target="_top">
<span class="depth">우주연구소</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="지수사괘" target="_top">
<span class="depth">지수사괘</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="판타지라이프" target="_top">
<span class="depth">판타지라이프</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="디아블로 II" target="_top">
<span class="depth">디아블로 II</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="블랙캣도그" target="_top">
<span class="depth">블랙캣도그</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="데이트레이더" target="_top">
<span class="depth">데이트레이더</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="스튜디오 콤플렉스" target="_top">
<span class="depth">스튜디오 콤플렉스</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="페르소나">
<strong>
<span>페르소나</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="가치판단">
<span class="depth">가치판단</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="공인중개사">
<span class="depth">공인중개사</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="자격증">
<span class="depth">자격증</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="장바구니">
<span class="depth">장바구니</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="사주풀이">
<span class="depth">사주풀이</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="공간인테리어">
<strong>
<span>공간인테리어</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="그랜드 인터컨티넨탈" target="_top">
<span class="depth">그랜드 인터컨티넨탈</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="덕수궁 디팰리스" target="_top">
<span class="depth">덕수궁 디팰리스</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="신라스테이" target="_top">
<span class="depth">신라스테이</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="건축·인테리어">
<span class="depth">건축·인테리어</span>
</a></li>
</ul></li>
</ul></li>
<li class="gnb_menu_list " role="menuitem" aria-haspopup="true"><a href="" aria-expanded="false" class="gnb_menu_item" rel="noopener" title="디자인">디자인</a>
<ul class="gnb_dropMenu_wrap">
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="크리에이티브 툴">
<strong>
<span>크리에이티브 툴</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="일러스트레이터">
<span class="depth">일러스트레이터</span>
</a></li>
<li class="depth_top_edge"><a href="" class="gnb_dropMenu_item" rel="noopener" title="포토샵">
<span class="depth">포토샵</span>
</a></li>
<li class="classify depth_top"><a href="" class="gnb_dropMenu_item" rel="noopener" title="웹개발">
<strong>
<span>웹개발</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="HTML">
<span class="depth">HTML</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="CSS">
<span class="depth">CSS</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="JavaScript">
<span class="depth">JavaScript</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="Code">
<span class="depth">Code</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="프로젝트">
<strong>
<span>프로젝트</span>
</strong>
</a></li>
<li class="depth_top_edge"><a href="" class="gnb_dropMenu_item" rel="noopener" title="포트폴리오">
<span class="depth">포트폴리오</span>
</a></li>
<li class="classify depth_top"><a href="" class="gnb_dropMenu_item" rel="noopener" title="생산성 도구">
<strong>
<span>생산성 도구</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="마이크로소프트 워드">
<span class="depth">마이크로소프트 워드</span>
</a></li>
<li class="depth_top"><a href="" class="gnb_dropMenu_item" rel="noopener" title="마이크로소프트 엑셀">
<span class="depth">마이크로소프트 엑셀</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="놀라운 영감">
<strong>
<span>놀라운 영감</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="그라폴리오">
<span class="depth">그라폴리오</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="아트 뮤지움">
<span class="depth">아트 뮤지움</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="포토그래프">
<span class="depth">포토그래프</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="참고자료">
<span class="depth">참고자료</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="디자인 매거진">
<span class="depth">디자인 매거진</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="웹디자인">
<strong>
<span>웹디자인</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="프로그래밍">
<span class="depth">프로그래밍</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="티스토리 SEO">
<span class="depth">티스토리 SEO</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="티스토리 스킨">
<span class="depth">티스토리 스킨</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="스킨무료배포">
<span class="depth">스킨무료배포</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="워드프레스">
<span class="depth">워드프레스</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="워드프레스 팁">
<span class="depth">워드프레스 팁</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="호스팅 서버">
<span class="depth">호스팅 서버</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item btn_link" target="_top" rel="noopener" title="스타일">
<strong>
<span>스타일</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="컬러">
<span class="depth">컬러</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="글꼴 다운로드">
<span class="depth">글꼴 다운로드</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="로고 다운로드">
<span class="depth">로고 다운로드</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="목업 다운로드">
<span class="depth">목업 다운로드</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="이미지 다운로드">
<span class="depth">이미지 다운로드</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="일러스트 다운로드">
<span class="depth">일러스트 다운로드</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="테마 다운로드">
<span class="depth">테마 다운로드</span>
</a></li>
</ul></li>
</ul></li>
<li class="gnb_menu_list " role="menuitem" aria-haspopup="true"><a href="" aria-expanded="false" class="gnb_menu_item" title="미디어">미디어</a>
<ul class="gnb_dropMenu_wrap">
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="마케팅">
<strong>
<span>마케팅</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="마케팅 방법">
<span class="depth">마케팅 방법</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="마케팅 칼럼">
<span class="depth">마케팅 칼럼</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="제휴 마케팅">
<span class="depth">제휴 마케팅</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="구글 애드센스">
<span class="depth">구글 애드센스</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="구글 서치콘솔">
<span class="depth">구글 서치콘솔</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="구글 블로그">
<span class="depth">구글 블로그</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" rel="noopener" title="기능도구">
<strong>
<span>기능도구</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="소프트웨어">
<span class="depth">소프트웨어</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="온라인 도구">
<span class="depth">온라인 도구</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="확장프로그램">
<span class="depth">확장프로그램</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="디바이스 관리">
<span class="depth">디바이스 관리</span>
</a></li>
<li class="depth_top_edge"><a href="" class="gnb_dropMenu_item" rel="noopener" title="자동화업무">
<span class="depth">자동화업무</span>
</a></li>
<li class="classify depth_top"><a href="" class="gnb_dropMenu_item" rel="noopener" title="애플">
<strong>
<span>애플</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="아이폰">
<span class="depth">아이폰</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="사운드">
<strong>
<span>사운드</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="플레이리스트">
<span class="depth">플레이리스트</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="애니메이션 사운드">
<span class="depth">애니메이션 사운드</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="피아노곡 목록">
<span class="depth">피아노곡 목록</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="동양 음악예술">
<span class="depth">동양 음악예술</span>
</a></li>
<li class="depth_top_edge"><a href="" class="gnb_dropMenu_item" rel="noopener" title="악보 다운로드">
<span class="depth">악보 다운로드</span>
</a></li>
<li class="classify depth_top"><a href="" class="gnb_dropMenu_item" rel="noopener" title="레이블">
<strong>
<span>레이블</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="클럽">
<strong>
<span class="depth">클럽</span>
</strong>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="classify"><a href="" class="gnb_dropMenu_item" rel="noopener" title="캠페인">
<strong>
<span>캠페인</span>
</strong>
</a></li>
<li class="classify depth_top"><a href="" class="gnb_dropMenu_item" rel="noopener" title="미디어">
<strong>
<span>미디어</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="다큐멘터리">
<span class="depth">다큐멘터리</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="라이브방송">
<span class="depth">라이브방송</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="유튜브">
<span class="depth">유튜브</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="클립영상">
<span class="depth">클립영상</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="콘텐츠">
<span class="depth">콘텐츠</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="도큐멘트">
<strong>
<span>도큐멘트</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="텍스트 파일">
<span class="depth">텍스트 파일</span>
</a></li>
<li class="depth_top_edge"><a href="" class="gnb_dropMenu_item" rel="noopener" title="디지털 문서">
<span class="depth">디지털 문서</span>
</a></li>
<li class="classify"><a href="" class="gnb_dropMenu_item" rel="noopener" title="언론·미디어">
<strong>
<span>언론·미디어</span>
</strong>
</a></li>
<li class="classify"><a href="" class="gnb_dropMenu_item" rel="noopener" title="스크립트">
<strong>
<span>스크립트</span>
</strong>
</a></li>
</ul></li>
</ul></li>
<li class="gnb_menu_list " role="menuitem" aria-haspopup="true"><a href="" class="gnb_menu_item" title="라이프스타일">라이프스타일</a>
<ul class="gnb_dropMenu_wrap">
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="라이프스타일">
<strong>
<span>라이프스타일</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="생활정보">
<span class="depth">생활정보</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="여행정보">
<span class="depth">여행정보</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="도시정보">
<span class="depth">도시정보</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="토지정보">
<span class="depth">토지정보</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="자동차 매거진">
<span class="depth">자동차 매거진</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="이민과 해외생활">
<span class="depth">이민과 해외생활</span>
</a></li>
<li class="depth_top_edge"><a href="" class="gnb_dropMenu_item" rel="noopener" title="외국어">
<span class="depth">외국어</span>
</a></li>
<li class="classify"><a href="" class="gnb_dropMenu_item" rel="noopener" title="프라이버시">
<strong>
<span>프라이버시</span>
</strong>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="교육·학문">
<strong>
<span>교육·학문</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="수학">
<span class="depth">수학</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="자연">
<span class="depth">자연</span>
</a></li>
<li><a href="/category/Education/History" class="gnb_dropMenu_item" rel="noopener" title="역사">
<span class="depth">역사</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="글로벌">
<span class="depth">글로벌</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="전쟁역사">
<span class="depth">전쟁역사</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="과학기술">
<span class="depth">과학기술</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="거시경제">
<span class="depth">거시경제</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="미시경제">
<span class="depth">미시경제</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="심리학">
<span class="depth">심리학</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="은비학">
<span class="depth">은비학</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="비즈니스">
<strong>
<span>비즈니스</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="권리">
<span class="depth">권리</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="법률">
<span class="depth">법률</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="창업">
<span class="depth">창업</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="세무">
<span class="depth">세무</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="증명서">
<span class="depth">증명서</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="직장">
<span class="depth">직장</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="국세청 홈택스">
<span class="depth">국세청 홈택스</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="현금영수증" target="_top">
<span class="depth">현금영수증</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="정부 24" target="_top">
<span class="depth">정부 24</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="중소기업현황" target="_top">
<span class="depth">중소기업현황</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="커뮤니케이션 채널">
<strong>
<span>커뮤니케이션 채널</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="크리에이터 스튜디오" target="_top">
<span class="depth">크리에이터 스튜디오</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="카카오톡채널 관리자센터" target="_top">
<span class="depth">카카오톡채널 관리자센터</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="카카오비즈니스" target="_top">
<span class="depth">카카오비즈니스</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="커뮤니티" target="_top">
<span class="depth">커뮤니티</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="네이버 애드포스트" target="_top">
<span class="depth">네이버 애드포스트</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="쿠팡 파트너스" target="_top">
<span class="depth">쿠팡 파트너스</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="네이버 MY쇼핑" target="_top">
<span class="depth">네이버 MY쇼핑</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="사교">
<strong>
<span>사교</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="최고경영자과정">
<span class="depth">최고경영자과정</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="프리메이슨">
<span class="depth">프리메이슨</span>
</a></li>
</ul></li>
</ul></li>
<li class="gnb_menu_list " role="menuitem" aria-haspopup="true"><a href="" class="gnb_menu_item" title="디지털자산·금융">디지털자산·금융</a>
<ul class="gnb_dropMenu_wrap">
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" class="gnb_dropMenu_item" rel="noopener" title="디지털자산">
<strong>
<span>디지털자산</span>
</strong>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="매매일지">
<span class="depth">매매일지</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="투자정보">
<span class="depth">투자정보</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="코인전망">
<span class="depth">코인전망</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="코인미디어">
<span class="depth">코인미디어</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="차트분석">
<span class="depth">차트분석</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="블록체인기술">
<span class="depth">블록체인기술</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="기술적분석">
<span class="depth">기술적분석</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="리워드">
<span class="depth">리워드</span>
</a></li>
<li><a href="" class="gnb_dropMenu_item" rel="noopener" title="디파이">
<span class="depth">디파이</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="classify"><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="주가정보">
<strong>
<span>주가정보</span>
</strong>
</a></li>
<li class="classify"><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="주식투자">
<strong>
<span>주식투자</span>
</strong>
</a></li>
Office
<li class="classify"><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="핀테크">
<strong>
<span>핀테크</span>
</strong>
</a></li>
<li class="classify"><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="신용관리">
<strong>
<span>신용관리</span>
</strong>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="금융">
<strong>
<span>금융</span>
</strong>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="국내증시">
<span class="depth">국내증시</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="해외증시">
<span class="depth">해외증시</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="시장지표">
<span class="depth">시장지표</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="리서치">
<span class="depth">리서치</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="금융뉴스">
<span class="depth">금융뉴스</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="신용 거래">
<span class="depth">신용 거래</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="머니 플로우">
<span class="depth">머니 플로우</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="지불수단">
<span class="depth">지불수단</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="경제용어">
<span class="depth">경제용어</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="depth_top_category"><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="부동산">
<strong>
<span>부동산</span>
</strong>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="부동산 투자">
<span class="depth">부동산 투자</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="고급주택">
<span class="depth">고급주택</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="상가">
<span class="depth">상가</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="오피스텔">
<span class="depth">오피스텔</span>
</a></li>
<li><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="중개 커뮤니티">
<span class="depth">중개 커뮤니티</span>
</a></li>
</ul></li>
<li><ul class="gnb_dropMenu">
<li class="classify"><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="부동산실거래가조회">
<strong>
<span>부동산실거래가조회</span>
</strong>
</a></li>
<li class="classify"><a href="" target="_top" class="gnb_dropMenu_item" rel="noopener" title="부동산시세·동향">
<strong>
<span>부동산시세·동향</span>
</strong>
</a></li>
</ul></li>
</ul></li>
<li class="gnb_menu_list_recruit" role="menuitem" aria-haspopup="false"><a href="" class="gnb_menu_item recruit" title="채용" target="_top">채용</a></li>
</ul>
</nav>
</header>
</div>
<div class="wrap">
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/tX0A6E_YirY" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/tX0A6E_YirY/mqdefault.jpg" />
</a><div class="titleBox">가슴적시는 트로트 경음악 모음 전곡 가사제공 4K</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/ApxzklAbduk" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/ApxzklAbduk/mqdefault.jpg" />
</a><div class="titleBox">시린가슴 달래줄 환상의 전자올겐 트로트 경음악 모음 전곡 가사제공 4K</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/l1HIIRISoRA" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/l1HIIRISoRA/mqdefault.jpg" />
</a><div class="titleBox">신경자 심금을 울리는 가슴시린 트로트 전곡 가사제공 4K</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/FUNTaHUdG5A" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/FUNTaHUdG5A/mqdefault.jpg" />
</a><div class="titleBox">심금을 울리는 가슴시린 애절한 트로트 모음 전곡 가사제공 4K</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/VmSll6nSPOE" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/VmSll6nSPOE/mqdefault.jpg" />
</a><div class="titleBox">외로움을 달래보는 가슴시린 트로트 애창곡 전곡 가사제공 4K</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/W0Gkr3pwALE" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/W0Gkr3pwALE/mqdefault.jpg" />
</a><div class="titleBox">추억의 유랑극단 대사와노래 전곡 가사제공 4K</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/AStwiDPYSQU" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/AStwiDPYSQU/mqdefault.jpg" />
</a><div class="titleBox">이도경 뽕짝아가씨 옛노래명작 전곡 가사제공 4K</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/z8MIb9qbajA" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/z8MIb9qbajA/mqdefault.jpg" />
</a><div class="titleBox">정애리 오계절 트로트 관광 나들이 전곡 가사제공</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/QtyFXLvoEFc" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/QtyFXLvoEFc/mqdefault.jpg" />
</a><div class="titleBox">권용선 막걸리가 생각나는 구구절절 가슴시린 트로트 메들리 전곡 가사제공 4K</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/qLUcBIajyrI" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/qLUcBIajyrI/mqdefault.jpg" />
</a><div class="titleBox">주선미 가슴적시는 향수의 옛노래 피리가락 메들리 전곡 가사제공 4k</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/dghlrvepayE" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/dghlrvepayE/mqdefault.jpg" />
</a><div class="titleBox">이수진, 민승아 추억의 뽕작 파트너 전곡 가사제공</div>
</div>
</div>
<div class="box">
<div class="boxInner"><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/hulq6yBjr7s" data-padding-bottom="56.25%" style="cursor:pointer;">
<img src="https://img.youtube.com/vi/hulq6yBjr7s/mqdefault.jpg" />
</a><div class="titleBox">이청 옛사랑이 그리워질때 한잔술과 함께 들어보는 트로트모음 전곡 가사제공</div>
</div>
</div>
</div>
<div class="footer"><a href="http://www.musictrot.com" target="_blank">
<span class="copyright">Copyright ⓒ SmartWeb All rights reserved.</span></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.gnb_menu').delegate('.gnb_menu_list', 'mouseenter', function() {
$(this)
.find('.gnb_dropMenu_wrap')
.stop()
.slideDown(500);
});
$('.gnb_menu').delegate('.gnb_menu_list', 'focusin', function() {
$(this)
.find('.gnb_dropMenu_wrap')
.stop()
.slideDown(500);
});
$('.gnb_menu').delegate('.gnb_menu_list', 'mouseleave', function() {
$(this)
.find('.gnb_dropMenu_wrap')
.stop()
.slideUp(250);
});
$('.gnb_menu').delegate('.gnb_menu_list', 'focusout', function() {
$(this)
.find('.gnb_dropMenu_wrap')
.stop()
.slideUp(250);
});
$('.btn_sitemap').click(function() {
$(this).attr("aria-expanded", true);
$('header').toggleClass('active');
});
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight) {
$('header').removeClass('header_down').addClass('header_up');
} else {
if (st + $(window).height() < $(document).height()) {
$('header').removeClass('header_up').addClass('header_down');
}
}
lastScrollTop = st;
}
});
(function (root, document) {
"use strict";
var docBody = document.body || "";
var appendChild = "appendChild";
var classList = "classList";
var createElement = "createElement";
var dataset = "dataset";
var getAttribute = "getAttribute";
var getElementById = "getElementById";
var getElementsByClassName = "getElementsByClassName";
var _addEventListener = "addEventListener";
var containerClass = "iframe-lightbox";
var iframeLightboxOpenClass = "iframe-lightbox--open";
var iframeLightboxLinkIsBindedClass = "iframe-lightbox-link--is-binded";
var isLoadedClass = "is-loaded";
var isOpenedClass = "is-opened";
var isShowingClass = "is-showing";
var IframeLightbox = function (elem, settings) {
var options = settings || {};
this.trigger = elem;
this.el = document[getElementsByClassName](containerClass)[0] || "";
this.body = this.el ? this.el[getElementsByClassName]("body")[0] : "";
this.content = this.el ? this.el[getElementsByClassName]("content")[0] : "";
this.src = elem[dataset].src || "";
this.href = elem[getAttribute]("href") || "";
this.dataPaddingBottom = elem[dataset].paddingBottom || "";
this.dataScrolling = elem[dataset].scrolling || "";
this.rate = options.rate || 500;
this.scrolling = options.scrolling;
/*Event handlers*/
this.onOpened = options.onOpened;
this.onIframeLoaded = options.onIframeLoaded;
this.onLoaded = options.onLoaded;
this.onCreated = options.onCreated;
this.onClosed = options.onClosed;
this.init();
};
IframeLightbox.prototype.init = function () {
var _this = this;
if (!this.el) {
this.create();
}
var debounce = function (func, wait) {
var timeout,
args,
context,
timestamp;
return function () {
context = this;
args = [].slice.call(arguments, 0);
timestamp = new Date();
var later = function () {
var last = (new Date()) - timestamp;
if (last < wait) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
func.apply(context, args);
}
};
if (!timeout) {
timeout = setTimeout(later, wait);
}
};
};
var logic = function () {
_this.open();
};
if (!this.trigger[classList].contains(iframeLightboxLinkIsBindedClass)) {
this.trigger[classList].add(iframeLightboxLinkIsBindedClass);
this.trigger[_addEventListener]("click", function (e) {
e.stopPropagation();
e.preventDefault();
debounce(logic, this.rate).call();
});
}
};
IframeLightbox.prototype.create = function () {
var _this = this,
bd = document[createElement]("div");
this.el = document[createElement]("div");
this.content = document[createElement]("div");
this.body = document[createElement]("div");
this.el[classList].add(containerClass);
bd[classList].add("backdrop");
this.content[classList].add("content");
this.body[classList].add("body");
this.el[appendChild](bd);
this.content[appendChild](this.body);
this.contentHolder = document[createElement]("div");
this.contentHolder[classList].add("content-holder");
this.contentHolder[appendChild](this.content);
this.el[appendChild](this.contentHolder);
this.btnClose = document[createElement]("a");
this.btnClose[classList].add("btn-close");
this.btnClose.setAttribute("href", "javascript:void(0);");
this.el[appendChild](this.btnClose);
docBody[appendChild](this.el);
bd[_addEventListener]("click", function () {
_this.close();
});
this.btnClose[_addEventListener]("click", function () {
_this.close();
});
root[_addEventListener]("keyup", function (ev) {
if (27 === (ev.which || ev.keyCode)) {
_this.close();
}
});
var clearBody = function () {
if (_this.isOpen()) {
return;
}
_this.el[classList].remove(isShowingClass);
_this.body.innerHTML = "";
};
this.el[_addEventListener]("transitionend", clearBody, false);
this.el[_addEventListener]("webkitTransitionEnd", clearBody, false);
this.el[_addEventListener]("mozTransitionEnd", clearBody, false);
this.el[_addEventListener]("msTransitionEnd", clearBody, false);
this.callCallback(this.onCreated, this);
};
IframeLightbox.prototype.loadIframe = function () {
var _this = this;
this.iframeId = containerClass + Date.now();
this.iframeSrc = this.src || this.href || "";
var iframeHTML = [];
iframeHTML.push('<iframe src="' + this.iframeSrc + '" name="' + this.iframeId + '" id="' + this.iframeId + '" onload="this.style.opacity=1;" style="opacity:0;border:none;" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" height="166" frameborder="no"></iframe>');
iframeHTML.push('<div class="half-circle-spinner"><div class="circle circle-1"></div><div class="circle circle-2"></div></div>');
this.body.innerHTML = iframeHTML.join("");
(function (iframeId, body) {
var iframe = document[getElementById](iframeId);
iframe.onload = function () {
this.style.opacity = 1;
body[classList].add(isLoadedClass);
if (_this.scrolling || _this.dataScrolling) {
iframe.removeAttribute("scrolling");
iframe.style.overflow = "scroll";
} else {
iframe.setAttribute("scrolling", "no");
iframe.style.overflow = "hidden";
}
_this.callCallback(_this.onIframeLoaded, _this);
_this.callCallback(_this.onLoaded, _this);
};
})(this.iframeId, this.body);
};
IframeLightbox.prototype.open = function () {
this.loadIframe();
if (this.dataPaddingBottom) {
this.content.style.paddingBottom = this.dataPaddingBottom;
} else {
this.content.removeAttribute("style");
}
this.el[classList].add(isShowingClass);
this.el[classList].add(isOpenedClass);
docBody[classList].add(iframeLightboxOpenClass);
this.callCallback(this.onOpened, this);
};
IframeLightbox.prototype.close = function () {
this.el[classList].remove(isOpenedClass);
this.body[classList].remove(isLoadedClass);
docBody[classList].remove(iframeLightboxOpenClass);
this.callCallback(this.onClosed, this);
};
IframeLightbox.prototype.isOpen = function () {
return this.el[classList].contains(isOpenedClass);
};
IframeLightbox.prototype.callCallback = function (func, data) {
if (typeof func !== "function") {
return;
}
var caller = func.bind(this);
caller(data);
};
root.IframeLightbox = IframeLightbox;
})("undefined" !== typeof window ? window : this, document);

(function(root, document) {
"use strict";
[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {
el.lightbox = new IframeLightbox(el, {
onCreated: function() {
},
onLoaded: function() {
},
onError: function() {
},
onClosed: function() {
},
scrolling: false,
rate: 500
});
});
})("undefined" !== typeof window ? window : this, document);
</script>
</body>
</html>

적절히 수정하여 멋진 웹사이트를 구현해 보세요^^

반응형
저작자표시

'디자인소스' 카테고리의 다른 글

심플한 동영상 플레이어 MPlayer HTML5 Media Player  (0) 2023.12.12
심플한 비디오 플레이어 (Simple Video player)  (0) 2023.12.11
Navigation Page Design (네비게이션 페이지 디자인)  (0) 2023.12.07
Responsive Photo Gallery CSS (반응형 포토 갤러리)  (0) 2023.12.07
멋진 버튼 색상 애니메이션 CSS (Button Color Animation CSS)  (0) 2023.12.06
반응형 이미지 비디오 갤러리 Responsive Image Video Gallery  (0) 2023.12.02
음악방송 웹플레이어 디자인  (0) 2023.12.02
CSS 기반 스크롤 애니메이션 반응형 웹페이지 디자인  (0) 2023.11.30

관련글

댓글

Copyright ⓒ SmartWeb All rights reserved.

티스토리툴바