hyohyo0803
/
DYStudy
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

22-08-09

master
DohyunJegal 3 years ago
commit
76dae92cbe
34 changed files with 2624 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 928
      copy-css.txt
  2. 393
      copy.txt
  3. 27
      effect.js
  4. 378
      index.html
  5. 870
      main.css
  6. BIN
      main/icon/card_left.png
  7. BIN
      main/icon/card_right.png
  8. BIN
      main/icon/join.png
  9. BIN
      main/icon/more.png
  10. BIN
      main/icon/sns_blog_off.png
  11. BIN
      main/icon/sns_blog_on.png
  12. BIN
      main/icon/sns_face_off.png
  13. BIN
      main/icon/sns_face_on.png
  14. BIN
      main/icon/sns_insta_off.png
  15. BIN
      main/icon/sns_insta_on.png
  16. BIN
      main/icon/sns_youtube_off.png
  17. BIN
      main/icon/sns_youtube_on.png
  18. BIN
      main/logo/btm_banner1.png
  19. BIN
      main/logo/btm_banner2.png
  20. BIN
      main/logo/btm_banner3.png
  21. BIN
      main/logo/footer_logo.png
  22. BIN
      main/logo/logo_big.png
  23. BIN
      main/logo/logo_small.png
  24. BIN
      main/main/ban1.png
  25. BIN
      main/main/ban2.png
  26. BIN
      main/main/ban3.png
  27. BIN
      main/main/con1.png
  28. BIN
      main/main/con2.png
  29. BIN
      main/main/con3.png
  30. BIN
      main/main/img_slide1.png
  31. BIN
      main/main/img_slide2.png
  32. BIN
      main/main/img_slide3.png
  33. BIN
      main/main/line.png
  34. 28
      test.html

928
copy-css.txt
Unescape View File

@ -0,0 +1,928 @@
* {
font-family: 'Noto Sans KR', 'sans-serif';
}
body {
margin: 0 auto;
overflow-x: hidden;
}
ul {
list-style: none;
padding: 0;
}
a:visited, a:link {
text-decoration: none;
color: black;
}
h1, h2, h3, h4, h5, p {
margin: 0;
}
div, section, nav, main, footer, span {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hide {
display: none !important;
}
/*notice효과들*/
.notice-fade-in {
transform: translateY(0px);
opacity: 1;
}
.notice-fade-out {
transform: translateY(80px);
opacity: 0;
}
/*notice banner 효과들*/
.notice-banner-animation0-off {
transform: translateY(150px);
opacity: 0;
}
.notice-banner-animation1-off {
transform: translateY(200px);
opacity: 0;
}
.notice-banner-animation2-off {
transform: translateY(250px);
opacity: 0;
}
.notice-banner-animation0-on {
transform: translateY(0px);
transition: all 1s;
opacity: 1;
}
.notice-banner-animation1-on {
transform: translateY(0px);
transition: all 1s;
opacity: 1;
}
.notice-banner-animation2-on {
transform: translateY(0px);
transition: all 1s;
opacity: 1;
}
/*bot slider효과들*/
.bot-slider-fade-in {
transform: translateY(0px);
opacity: 1;
}
.bot-slider-fade-out {
transform: translateY(200px);
opacity: 0;
}
.fixed{
position: fixed;
top: 0;
}
.dot-color {
background-color: #7CE063 !important;
}
.cusor-p {
cursor: pointer;
}
.nav {
width: 100%;
height: auto;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
text-align: center;
padding-top: 15px;
overflow: hidden;
background-color: #fff;
z-index: 999;
}
.nav .login-sec {
width: 100%;
height: auto;
padding-bottom: 10px;
}
.nav .login-sec .login-menu {
width: 100%;
max-width: 1080px;
margin: 0 auto;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
font-size: 16px;
font-weight: 600;
color: #000;
}
.nav .login-sec .login-menu li:nth-child(2) {
margin-left: 8px;
margin-right: 8px;
}
.nav .logo-sec {
width: auto;
max-width: 1080px;
height: auto;
}
.nav .logo-sec .nav-logo{
width: 355px;
height: auto;
}
.nav .logo-sec .nav-logo-m {
display: none;
}
.nav .gnb {
width: 100%;
max-width: 1150px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
margin-top: 15px;
}
.nav .gnb .main-menu {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
font-size: 22px;
font-weight: 600;
margin-bottom: 20px;
flex: 5;
}
.nav .gnb .gnb-sns {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
margin-bottom: 20px;
flex: 1;
}
.nav .gnb .gnb-sns li {
width: 28px;
height: 28px;
transition: all 0.2s;
}
.nav .gnb-line{
width: 100%;
height: 5px;
background: url("./main/main/line.png") no-repeat center;
background-size: cover;
}
.nav .toggle-btn {
display: none;
}
.m-menu-box {
transition: all 1s;
}
/*********************************************************************/
#main {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#main .slider-sec{
width: 100%;
height: auto;
}
#main .slider-sec .slider-outer{
width: 100%;
height: auto;
min-height: 240px;
position: relative;
overflow: hidden;
}
#main .notice-sec {
width: 100%;
height: auto;
display: flex;
flex-flow: column;
align-items: center;
margin-top: 50px;
}
#main .notice-sec .notice {
width: 100%;
max-width: 1080px;
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-bottom: 20px;
transition: all 1s;
}
#main .notice-sec .notice h4 {
font-size: 22px;
font-weight: 800;
flex: 1;
}
#main .notice-sec .notice .notice-roll-box{
width: 900px;
height: 24px;
font-size: 18px;
font-weight: 700;
margin-left: 25px;
position: relative;
overflow: hidden;
}
#main .notice-sec .notice .notice-roll-box .notice-roll{
width: 100%;
height: auto;
margin: 0;
animation: noticeRoll 5s infinite;
}
@keyframes noticeRoll {
0% { transform: translateY(0px);}
25% { transform: translateY(-24px);}
50% { transform: translateY(-48px);}
50.05% { transform: translateY(0px);}
100% { transform: translateY(0px);}
}
#main .notice-sec .notice .notice-roll li{
width: 100%;
height: 24px;
}
#main .notice-sec .notice .notice-btn {
border: none;
background: transparent;
}
#main .notice-sec .banner {
width: 100%;
max-width: 1080px;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding-bottom: 80px;
transition: all 1s;
}
#main .bot-slider-sec {
width: 100%;
background-color: #B4A0FF;
transition: all 1s;
}
#main .bot-slider-sec .bot-slider-box {
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding-top: 50px;
padding-bottom: 50px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box {
width: 300px;
height: auto;
display: flex;
flex-flow: column;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
color: #fff;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{
font-size: 2em;
display: block;
font-weight: normal;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){
font-size: 2.4em;
margin-bottom: 30px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){
font-size: 1.5em;
font-weight: normal;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{
font-size: 1.3em;
padding-bottom: 30px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box {
width: 150px;
height: auto;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{
border: none;
background: transparent;
filter: contrast(170%);
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer {
width: 780px;
height: auto;
padding: 0px 15px 0px 15px;
box-sizing: border-box;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .swiper-slide{
padding: 0px 10px 0px 10px;
box-sizing: border-box;
}
#main .alliance-sec {
width: 100%;
height: auto;
border-top: 1px solid #e0e0e0;
display: flex;
flex-flow: row;
justify-content: center;
transition: all 1s;
}
#main .alliance-sec .alliance-bar {
width: 100%;
max-width: 1080px;
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-top: 15px;
margin-bottom: 15px;
}
#main .alliance-sec .alliance-bar a {
margin-right: 70px;
}
#footer {
width: 100%;
height: auto;
border-top: 1px solid #e0e0e0;
padding-top: 50px;
padding-bottom: 30px;
display: flex;
flex-flow: row;
justify-content: center;
}
#footer .footer-box {
width: 100%;
max-width: 1080px;
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
}
#footer .footer-box .footer-logo {
width: auto;
height: auto;
flex: 1;
}
#footer .footer-box .footer-logo img {
width: 50%;
}
#footer .footer-box .footer-sns {
display: none;
}
#footer .footer-box .footer-text {
display: flex;
flex-flow: column;
color: #666;
font-size: 14px;
flex: 2;
}
#footer .footer-box .footer-text span {
margin-bottom: 5px;
}
#footer .footer-box .footer-text span:last-child {
margin-top: 10px;
}
#footer .footer-box .call-num {
flex: 1;
}
#footer .footer-box .call-num h1{
font-size: 18px;
font-weight: 500
}
#footer .footer-box .call-num p {
font-size: 14px;
font-weight: 500;
}
#footer .footer-box .call-num p > strong{
font-size: 35px;
font-weight: 600
}
.nav-scroll{
width: 100%;
height: auto;
display: flex;
flex-flow: column;
align-items: center;
background-color: #fff;
z-index: 9999;
}
.nav-scroll .scroll-nav-top {
width: 100%;
max-width: 1080px;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
}
.nav-scroll .scroll-nav-top .gnb-sns {
width: auto;
height: auto;
display: flex;
flex-flow: row;
}
.nav-scroll .scroll-nav-top .gnb-sns li {
width: 28px;
height: 28px;
margin-right: 25px;
transition: all 0.2s;
}
.nav-scroll .scroll-nav-top .login-sec {
width: auto;
height: auto;
}
.nav-scroll .scroll-nav-top .login-sec .login-menu{
width: auto;
height: auto;
display: flex;
flex-flow: row nowrap;
font-size: 16px;
font-weight: 600;
}
.nav-scroll .scroll-nav-top .login-sec .login-menu li:nth-child(2) {
margin-left: 8px;
margin-right: 8px;
}
.nav-scroll .scroll-nav-bottom {
width: 100%;
max-width: 1080px;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-scroll .scroll-nav-bottom .logo-sec{
width: 100%;
height: auto;
flex: 1;
text-align: center;
}
.nav-scroll .scroll-nav-bottom .logo-sec img{
width: 60%;
height: auto;
}
.nav-scroll .scroll-nav-bottom .gnb{
width: 100%;
height: auto;
flex: 2;
}
.nav-scroll .scroll-nav-bottom .gnb .main-menu{
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
.nav-scroll .scroll-nav-bottom .gnb .main-menu li{
font-size: 22px;
font-weight: 600;
}
.nav-scroll .gnb-line{
width: 100%;
height: 5px;
background: url(./main/main/line.png) no-repeat center;
background-size: cover;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-wrapper {
width: 100%;
height: 100%;
min-height: 240px ;
}
.swiper-slide{
width: 100%;
height: 100%;
}
.swiper-slide img {
display: block ;
width: 100% ;
height: 100%;
object-fit: cover;
}
.swiper .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #7CE063;
margin: 0 15px !important;
}
@media (max-width: 425px) {
#scroll-nav {
display: none !important;
}
.m-menu-box {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
position: absolute;
}
.m-menu-box .m-menu {
width: 85%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
}
.m-menu-box .m-menu .m-login-sec {
width: 100%;
height: auto;
padding: 25px 0px;
text-align: center;
}
.m-menu-box .m-menu .m-login-sec .m-login-menu {
margin: 0;
display: flex;
flex-flow: row-reverse nowrap;
justify-content: center;
align-items: center;
font-size: 1rem;
}
.m-menu-box .m-menu .m-login-sec .m-login-menu > li:nth-child(2){
margin-left: 30px;
margin-right: 30px;
}
.m-menu-box .m-menu .m-gnb {
width: 100%;
height: auto;
}
.m-menu-box .m-menu .m-gnb .m-main-menu {
margin: 0;
}
.m-menu-box .m-menu .m-gnb .m-main-menu > li {
width: 100%;
height: auto;
font-size: 20px;
font-weight: 800;
padding: 15px 30px;
box-sizing: border-box;
}
.nav .login-sec {
width: 100%;
height: 70px;
display: none;
}
.nav .logo-sec {
width: 50%;
max-width: 1080px;
height: auto;
}
.nav .logo-sec .nav-logo{
display: none;
}
.nav .logo-sec .nav-logo-m {
display: block;
margin: 0 auto;
width: 100%;
}
.nav .gnb {
display: none;
}
.nav .gnb-line{
width: 100%;
height: 5px;
background: url("./main/main/line.png") no-repeat center;
background-size: cover;
margin-top: 10px;
}
.nav .toggle-btn{
width: 50px;
height: 29px;
position: absolute;
top: calc((80px - 29px) / 2);
left: calc((100% - 60px ));
padding: 0px ;
display: flex;
flex-flow: column;
justify-content: space-around;
align-items: center;
}
.nav .toggle-btn > div {
width: 30px;
height: 4px;
background-color: #B4A0FF;
display: block;
margin: 0;
}
/* nav m-menu */
/*silder-sec*/
#main .slider-sec .slider-outer .slider-btn {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
}
#main .slider-sec .slider-outer .slider-btn .slider-bullet {
content: "";
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 100%;
}
#main .slider-sec .slider-outer .slider-btn .slider-bullet:nth-child(2) {
margin-left: 25px;
margin-right: 25px;
}
#main .notice-sec {
width: 100%;
height: auto;
display: flex;
flex-flow: column;
align-items: center;
margin-top: 0px;
}
#main .notice-sec .notice {
width: 100%;
max-width: 1080px;
height: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 10px 20px;
margin-bottom: 0px;
}
#main .notice-sec .notice h4 {
width: 25%;
font-size: 18px;
font-weight: bold;
}
#main .notice-sec .notice .notice-roll-box{
width: 70%;
height: 35px;
font-size: 16px;
font-weight: 500;
margin-left: 0px;
position: relative;
overflow: hidden;
}
#main .notice-sec .notice .notice-roll-box .notice-roll{
width: 100%;
height: auto;
margin: 0;
animation: noticeRoll 5s infinite;
}
@keyframes noticeRoll {
0% { transform: translateY(7px);}
25% { transform: translateY(-27px);}
50% { transform: translateY(-64px);}
50.5% { transform: translateY(0px);}
100% { transform: translateY(7px);}
}
#main .notice-sec .notice .notice-roll li{
width: 100%;
height: 35px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#main .notice-sec .notice .notice-btn {
width: auto;
border: none;
background: transparent;
}
#main .notice-sec .notice .notice-btn img{
width: 15px;
height: 15px;
}
#main .notice-sec .banner {
width: 100%;
max-width: 1080px;
height: auto;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
padding: 0px 20px 20px 20px;
}
#main .notice-sec .banner a{
width: 100%;
height: auto;
}
#main .notice-sec .banner a img{
width: 100%;
}
/*notice*/
#main .bot-slider-sec {
width: 100%;
background-color: #B4A0FF;
}
#main .bot-slider-sec .bot-slider-box {
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding-top: 50px;
padding-bottom: 50px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box {
width: auto;
height: auto;
display: flex;
flex-flow: column;
align-items: center;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text {
display: block;
color: #fff;
text-align: center;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{
font-size: 1.75rem;;
display: inline-block;
font-weight: normal;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){
font-size: 1.6em;
margin-bottom: 30px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){
font-size: 18px;
display: inline-block;
font-weight: normal;
margin-top: 10px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{
font-size: 18px;
padding-bottom: 0px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box {
width: auto;
height: auto;
padding-top: 20px;
padding-bottom: 25px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{
border: none;
background: transparent;
filter: contrast(170%);
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer {
width: 100%;
height: auto;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner {
width: auto;
height: auto;
padding: 0px 0px;
overflow: hidden;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items {
width: 100%;
height: auto;
display: flex;
padding: 0px;
transition: all 1s;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a {
width: 100%;
height: auto;
padding: 0px 30px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a:nth-child(2n) {
margin-left: 0px;
margin-right: 0px;
}
/*bot-slider-sec*/
#main .alliance-sec {
width: 100%;
height: auto;
border-top: 1px solid #e0e0e0;
display: flex;
flex-flow: row;
justify-content: center;
}
#main .alliance-sec .alliance-bar {
width: 100%;
max-width: 1080px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
margin-top: 15px;
margin-bottom: 15px;
}
#main .alliance-sec .alliance-bar a {
margin-right: 0px;
text-align: center;
}
#main .alliance-sec .alliance-bar a img{
width: 80%;
}
/*.alliance-sec*/
#footer {
width: 100%;
height: auto;
border-top: 1px solid #e0e0e0;
padding-top: 0px;
padding-bottom: 30px;
display: flex;
flex-flow: row;
justify-content: center;
}
#footer .footer-box {
width: 100%;
max-width: 1080px;
display: flex;
flex-flow: column;
justify-content: space-between;
align-items: center;
}
#footer .footer-box .footer-logo {
width: auto;
height: auto;
flex: 1;
display: none;
}
#footer .footer-box .footer-logo img {
width: 50%;
}
#footer .footer-box .footer-sns {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
#footer .footer-box .footer-sns li:first-child{
margin-right: 5px;
}
#footer .footer-box .footer-sns li:nth-child(2){
margin: 0px 5px 0px 5px;
}
#footer .footer-box .footer-sns li:nth-child(3){
margin: 0px 5px 0px 5px;
}
#footer .footer-box .footer-sns li:last-child{
margin-left: 5px;
}
#footer .footer-box .footer-text {
display: flex;
flex-flow: column;
align-items: center;
color: #666;
font-size: 14px;
flex: 2;
text-align: center;
}
#footer .footer-box .footer-text span {
margin-bottom: 5px;
}
#footer .footer-box .footer-text span:last-child {
margin-top: 10px;
}
#footer .footer-box .call-num {
flex: 1;
display: none;
}
#footer .footer-box .call-num h1{
font-size: 18px;
font-weight: 500
}
#footer .footer-box .call-num p {
font-size: 14px;
font-weight: 300;
}
#footer .footer-box .call-num p > strong{
font-size: 35px;
font-weight: 500;
}
.mySwiper {
width: 100%;
height: 100%;
}
.mySwiper .swiper-wrapper {
width: 100%;
height: 100%;
}
.mySwiper .swiper-wrapper .swiper-slide{
width: 100%;
height: 100%;
max-height: 240px;
}
.mySwiper .swiper-wrapper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
max-height: 240px !important;
object-fit: fill;
}
.mySwiper .swiper-pagination-bullet {
width: 9px;
height: 9px;
background-color: #7CE063;
margin: 0 5px !important;
}
}

393
copy.txt
Unescape View File

@ -0,0 +1,393 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>음성명작페스티벌</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="./main.css">
</head>
<body>
<!--네비-->
<nav id="nav" class="nav">
<div class="login-sec">
<ul class="login-menu">
<li class="sign-up cusor-p "><a href=""> 회원가입</a></li>
<li>|</li>
<li class="login cusor-p ">로그인</li>
</ul>
</div>
<div class="logo-sec">
<img class="nav-logo" src="./main/logo/logo_big.png" alt="음성명작 페스티벌">
<img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 모바일 홈페이지">
</div>
<div class="gnb">
<ul class="main-menu">
<li class="cusor-p ">축제소개</li>
<li class="cusor-p ">주요 콘텐츠</li>
<li class="cusor-p ">이벤트</li>
<li class="cusor-p ">명작스토리</li>
<li class="cusor-p ">커뮤니티</li>
</ul>
<ul class="gnb-sns">
<li class="cusor-p gnb-sns-item insta"></li>
<li class="cusor-p gnb-sns-item blog"></li>
<li class="cusor-p gnb-sns-item youtube"></li>
<li class="cusor-p gnb-sns-item face"></li>
</ul>
</div>
<div class="gnb-line"></div>
<div class="toggle-btn cusor-p">
<div class="toggle-bar"></div>
<div class="toggle-bar"></div>
<div class="toggle-bar"></div>
</div>
</nav>
<!-- 스크롤 네비-->
<nav id="scroll-nav" class="nav-scroll hide">
<div class="scroll-nav-top">
<ul class="gnb-sns">
<li class="cusor-p gnb-sns-item insta"></li>
<li class="cusor-p gnb-sns-item face"></li>
<li class="cusor-p gnb-sns-item blog"></li>
<li class="cusor-p gnb-sns-item youtube"></li>
</ul>
<div class="login-sec">
<ul class="login-menu">
<li class="sign-up cusor-p "><a href=""> 회원가입</a></li>
<li>|</li>
<li class="login cusor-p ">로그인</li>
</ul>
</div>
</div>
<div class="scroll-nav-bottom">
<div class="logo-sec">
<img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 홈페이지">
</div>
<div class="gnb">
<ul class="main-menu">
<li class="cusor-p ">축제소개</li>
<li class="cusor-p ">축제안내</li>
<li class="cusor-p ">명작스토리</li>
<li class="cusor-p ">게시판</li>
</ul>
</div>
</div>
<div class="gnb-line"></div>
<div class="toggle-btn cusor-p">
<div class="toggle-bar"></div>
<div class="toggle-bar"></div>
<div class="toggle-bar"></div>
</div>
</nav>
<!--모바일 네비-->
<div class="m-menu-box hide">
<div class="m-menu">
<div class="m-login-sec">
<ul class="m-login-menu">
<li class="m-sign-up cusor-p "><a href=""> 회원가입</a></li>
<li>|</li>
<li class="m-login cusor-p ">로그인</li>
</ul>
</div>
<div class="m-gnb">
<ul class="m-main-menu">
<li class="cusor-p ">축제소개</li>
<li class="cusor-p ">축제안내</li>
<li class="cusor-p ">명작스토리</li>
<li class="cusor-p ">커뮤니티</li>
</ul>
</div>
</div>
</div>
<!--메인-->
<main id="main">
<!--메인 슬라이드-->
<section class="slider-sec">
<div class="slider-outer">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="">
<img src="./main/main/img_slide1.png" alt="음성명작 페스티벌 배너 광고1">
</a>
</div>
<div class="swiper-slide">
<a href="">
<img src="./main/main/img_slide2.png" alt="음성명작 페스티벌 배너 광고2">
</a>
</div>
<div class="swiper-slide">
<a href="">
<img src="./main/main/img_slide3.png" alt="음성명작 페스티벌 배너 광고3"></a>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<!--메인 공지-->
<section class="notice-sec">
<div class="notice notice-fade-out ">
<h4>공지사항</h4>
<div class="notice-roll-box">
<ul class="notice-roll">
<li class="cusor-p">
<a class="notice-text" href="">음성군 6월 대표과일!</a>
</li>
<li class="cusor-p">
<a class="notice-text" href="">2021 음성명작 페스티벌 사이트가 리뉴얼 되었습니다~</a>
</li>
<li class="cusor-p">
<a class="notice-text" href="">음성군 6월 대표과일!</a>
</li>
</ul>
</div>
<button class="notice-btn cusor-p "><img src="./main/icon/more.png" alt="공지사항 더보기 버튼"></button>
</div>
<div class="banner">
<a href="" class="notice-banner-animation0-off">
<img src="./main/main/con1.png" alt="음성명작 페스티벌 잔치잔치 열렸네! - 포스터">
</a>
<a href="" class="notice-banner-animation1-off">
<img src="./main/main/con2.png" alt="문예공모전 결과 발표 - 포스터">
</a>
<a href="" class="notice-banner-animation2-off">
<img src="./main/main/con3.png" alt="명작 스토리 안심농가 방문 - 포스터">
</a>
</div>
</section>
<!--메인 바텀 슬라이드-->
<section class="bot-slider-sec bot-slider-fade-out">
<div class="bot-slider-box">
<div class="bot-slider-text-box">
<div class="text">
<span>음성명작페스티벌</span>
<span><strong>둘러보기!</strong></span>
<span>음성명작페스티벌</span>
<span>백배 즐기기</span>
</div>
<div class="bot-slider-btn-box">
<button class="cusor-p bot-slider-btn bot-swiper-button-prev " id="prev">
<img src="./main/icon/card_left.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 이전">
</button>
<button class="cusor-p bot-slider-btn bot-swiper-button-next" id="next">
<img src="./main/icon/card_right.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 다음">
</button>
</div>
</div>
<div class="bot-slider-outer">
<div class="swiper bot-swiper">
<div class="swiper-wrapper">
<a href="" class="swiper-slide">
<img src="./main/main/ban1.png" alt="축제공간구성 위치확인하고 빠르게 찾아가자 바로가기">
</a>
<a href="" class="swiper-slide">
<img src="./main/main/ban2.png" alt="축제프로그램 다양한 공연과 체험 프로그램 바로가기">
</a>
<a href="" class="swiper-slide">
<img src="./main/main/ban3.png" alt="지난이야기 음성명작 페스티벌 발자취 바로가기">
</a>
</div>
</div>
</div>
</div>
</section>
<!--메인 협업사-->
<section class="alliance-sec">
<div class="alliance-bar">
<a href=""><img src="./main/logo/btm_banner1.png" alt="음성군 홈페이지 바로가기"></a>
<a href=""><img src="./main/logo/btm_banner2.png" alt="음성장터 바로가기"></a>
<a href=""><img src="./main/logo/btm_banner3.png" alt="음성명작페스티벌 바로가기"></a>
</div>
</section>
</main>
<!--푸터-->
<footer id="footer">
<div class="footer-box">
<div class="footer-logo">
<img src="./main/logo/footer_logo.png" alt="음성명작 페스티벌 로고">
</div>
<ul class="footer-sns">
<li><a><img src="./main/icon/sns_insta_on.png" alt="인스타그램 바로가기"></a></li>
<li><a><img src="./main/icon/sns_face_on.png" alt="인스타그램 바로가기"></a></li>
<li><a><img src="./main/icon/sns_blog_on.png" alt="인스타그램 바로가기"></a></li>
<li><a><img src="./main/icon/sns_youtube_on.png" alt="인스타그램 바로가기"></a></li>
</ul>
<div class="footer-text">
<span><strong>음성명작페스티벌 사업단</strong></span>
<span>충청북도 음성군 음성읍 반기문로 27 2층</span>
<span>사업자등록번호 : 308-82-73169 | 대표자 : 조용주</span>
<span>Copyright ⓒ2020 EUMSEONG MYEONGJAK. ALL RIGHTS RESERVED.</span>
</div>
<div class="call-num">
<h1>대표전화</h1>
<p><strong>043-873-8940</strong></p>
<p>09:00 ~ 18:00 토·일요일·공휴일 휴무</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
direction: 'horizontal',
loop: true,
speed: 1000,
autoplay: {
delay: 2000,
},
setWrapperSize: true,
autoHeight: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets"
},
breakpoints: { //반응형 조건 속성
320: { //640 이상일 경우
slidesPerView: 1, //레이아웃 2열
},
}
});
var swiper = new Swiper(".bot-swiper", {
direction: 'horizontal',
pagination: false,
loop: true,
speed: 1000,
autoplay: {
delay: 2000,
},
navigation: {
nextEl: '.bot-swiper-button-next',
prevEl: '.bot-swiper-button-prev',
},
breakpoints: { //반응형 조건 속성
426: { //640 이상일 경우
slidesPerView: 2.2, //레이아웃 2열
},
320: { //640 이상일 경우
slidesPerView: 1, //레이아웃 2열
},
}
});
</script>
<script>
$(document).ready(function () {
$(".notice-text").each(() => {
var length = 16;
$(this).each(() => {
if ($(this).text().length >= length) {
$(this).text($(this).text().substr(0, length) + '...');
}
})
})
$(".toggle-btn").click(() => {
$(".m-menu-box").toggleClass("hide")
})
$(".notice").removeClass("notice-fade-out")
$(".notice").addClass("notice-fade-in")
const bannerFn = function () {
$(".banner a").each((index, item) => {
$(item).removeClass(`notice-banner-animation${index}-off`)
$(item).addClass(`notice-banner-animation${index}-on`)
})
}
setTimeout(bannerFn, 500)
})
$(window).resize(function() {
if ($(this).width() >= 426) {
$(".m-menu-box").addClass("hide")
}else if($(this).width() < 426) {
console.log("작음");
$(".m-menu-box").addClass("hide")
}
})
</script>
<script>
const navScroll = document.querySelector("#scroll-nav");
const navSns = document.querySelectorAll("#nav .gnb-sns .gnb-sns-item")
const arryNavSns = Array.from(navSns)
const scrollNavSns = document.querySelectorAll("#scroll-nav .gnb-sns .gnb-sns-item")
const arryScrollNavSns = Array.from(scrollNavSns)
const snsKind = ['insta', 'face', 'blog', 'youtube']
const ON = "on"
const OFF = "off"
// SNS 호버 이벤트
const snsBg = (listArray)=>{
if(listArray) {
listArray.forEach((element, index, array)=>{
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
})
}
}
const mouseEnter = (listArray)=>{
listArray.forEach((element, index, array)=>{
element.addEventListener('mouseenter', ()=>{
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${ON}.png') no-repeat`
})
})
}
const mouseLeave = (listArray)=>{
listArray.forEach((element, index, array)=>{
element.addEventListener('mouseleave', ()=>{
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
})
})
}
snsBg(arryNavSns)
mouseEnter(arryNavSns)
mouseLeave(arryNavSns)
snsBg(arryScrollNavSns)
mouseEnter(arryScrollNavSns)
mouseLeave(arryScrollNavSns)
const scrollNavFn = () => {
let Y = document.documentElement.scrollTop
if (Y >= 300) {
navScroll.classList.add("fixed")
navScroll.classList.remove("hide")
} else {
navScroll.classList.remove("fixed")
navScroll.classList.add("hide")
}
}
const scrollBotSliderFn = () => {
let Y = document.documentElement.scrollTop
const botSliderSec = document.querySelector(".bot-slider-sec")
const allianceSec = document.querySelector(".alliance-sec")
const botSliderSecH = document.querySelector(".bot-slider-sec").scrollHeight
if (Y >= botSliderSecH) {
botSliderSec.classList.remove("bot-slider-fade-out")
botSliderSec.classList.add("bot-slider-fade-in")
allianceSec.classList.remove("bot-slider-fade-out")
allianceSec.classList.add("bot-slider-fade-in")
} else {
botSliderSec.classList.remove("bot-slider-fade-in")
botSliderSec.classList.add("bot-slider-fade-out")
allianceSec.classList.remove("bot-slider-fade-in")
allianceSec.classList.add("bot-slider-fade-out")
}
}
const scrollFn = () => {
scrollNavFn()
scrollBotSliderFn()
}
document.addEventListener("scroll", scrollFn)
</script>
</body>
</html>

27
effect.js
Unescape View File

@ -0,0 +1,27 @@
// SNS리스트 호버 이벤트(백그라운드 이미지)
const snsKind = ['insta', 'face', 'blog', 'youtube']
const ON = "on"
const OFF = "off"
// listArray = 리스트 DOM이 담긴 배열
const snsBg = (listArray) => {
if (listArray) {
listArray.forEach((element, index, array) => {
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
})
}
}
const mouseEnter = (listArray) => {
listArray.forEach((element, index, array) => {
element.addEventListener('mouseenter', () => {
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${ON}.png') no-repeat`
})
})
}
const mouseLeave = (listArray) => {
listArray.forEach((element, index, array) => {
element.addEventListener('mouseleave', () => {
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
})
})
}

378
index.html
Unescape View File

@ -0,0 +1,378 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>음성명작페스티벌</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="./main.css">
</head>
<body>
<!--네비-->
<nav id="nav" class="nav">
<div class="login-sec">
<ul class="login-menu">
<li class="sign-up cusor-p "><a href=""> 회원가입</a></li>
<li>|</li>
<li class="login cusor-p ">로그인</li>
</ul>
</div>
<div class="logo-sec">
<img class="nav-logo" src="./main/logo/logo_big.png" alt="음성명작 페스티벌">
<img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 모바일 홈페이지">
</div>
<div class="gnb">
<ul class="main-menu">
<li class="cusor-p ">축제소개</li>
<li class="cusor-p ">주요 콘텐츠</li>
<li class="cusor-p ">이벤트</li>
<li class="cusor-p ">명작스토리</li>
<li class="cusor-p ">커뮤니티</li>
</ul>
<ul class="gnb-sns">
<li class="cusor-p gnb-sns-item insta"></li>
<li class="cusor-p gnb-sns-item blog"></li>
<li class="cusor-p gnb-sns-item youtube"></li>
<li class="cusor-p gnb-sns-item face"></li>
</ul>
</div>
<div class="gnb-line"></div>
<div class="toggle-btn cusor-p">
<div class="toggle-bar"></div>
<div class="toggle-bar"></div>
<div class="toggle-bar"></div>
</div>
</nav>
<!-- 스크롤 네비-->
<nav id="scroll-nav" class="nav-scroll hide">
<div class="scroll-nav-top">
<ul class="gnb-sns">
<li class="cusor-p gnb-sns-item insta"></li>
<li class="cusor-p gnb-sns-item face"></li>
<li class="cusor-p gnb-sns-item blog"></li>
<li class="cusor-p gnb-sns-item youtube"></li>
</ul>
<div class="login-sec">
<ul class="login-menu">
<li class="sign-up cusor-p "><a href=""> 회원가입</a></li>
<li>|</li>
<li class="login cusor-p ">로그인</li>
</ul>
</div>
</div>
<div class="scroll-nav-bottom">
<div class="logo-sec">
<img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 홈페이지">
</div>
<div class="gnb">
<ul class="main-menu">
<li class="cusor-p ">축제소개</li>
<li class="cusor-p ">축제안내</li>
<li class="cusor-p ">명작스토리</li>
<li class="cusor-p ">게시판</li>
</ul>
</div>
</div>
<div class="gnb-line"></div>
<div class="toggle-btn cusor-p">
<div class="toggle-bar"></div>
<div class="toggle-bar"></div>
<div class="toggle-bar"></div>
</div>
</nav>
<!--모바일 네비-->
<div class="m-menu-box hide">
<div class="m-menu">
<div class="m-login-sec">
<ul class="m-login-menu">
<li class="m-sign-up cusor-p "><a href=""> 회원가입</a></li>
<li>|</li>
<li class="m-login cusor-p ">로그인</li>
</ul>
</div>
<div class="m-gnb">
<ul class="m-main-menu">
<li class="cusor-p ">축제소개</li>
<li class="cusor-p ">축제안내</li>
<li class="cusor-p ">명작스토리</li>
<li class="cusor-p ">커뮤니티</li>
</ul>
</div>
</div>
</div>
<!--메인-->
<main id="main">
<!--메인 슬라이드-->
<section class="slider-sec">
<div class="slider-outer">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="">
<img src="./main/main/img_slide1.png" alt="음성명작 페스티벌 배너 광고1">
</a>
</div>
<div class="swiper-slide">
<a href="">
<img src="./main/main/img_slide2.png" alt="음성명작 페스티벌 배너 광고2">
</a>
</div>
<div class="swiper-slide">
<a href="">
<img src="./main/main/img_slide3.png" alt="음성명작 페스티벌 배너 광고3"></a>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<!--메인 공지-->
<section class="notice-sec">
<div class="notice aos-init aos-animate" data-aos="fade-up" data-aos-once="true">
<h4>공지사항</h4>
<div class="notice-roll-box">
<ul class="notice-roll">
<li class="cusor-p">
<a class="notice-text" href="">음성군 6월 대표과일!</a>
</li>
<li class="cusor-p">
<a class="notice-text" href="">2021 음성명작 페스티벌 사이트가 리뉴얼 되었습니다~</a>
</li>
<li class="cusor-p">
<a class="notice-text" href="">음성군 6월 대표과일!</a>
</li>
</ul>
</div>
<button class="notice-btn cusor-p "><img src="./main/icon/more.png" alt="공지사항 더보기 버튼"></button>
</div>
<div class="banner">
<a href="" data-aos="fade-up" data-aos-delay="600" data-aos-once="true" data-aos-duration="1000">
<img src="./main/main/con1.png" alt="음성명작 페스티벌 잔치잔치 열렸네! - 포스터">
</a>
<a href="" data-aos="fade-up" data-aos-delay="700" data-aos-once="true" data-aos-duration="1000">
<img src="./main/main/con2.png" alt="문예공모전 결과 발표 - 포스터">
</a>
<a href="" data-aos="fade-up" data-aos-delay="800" data-aos-once="true" data-aos-duration="1000">
<img src="./main/main/con3.png" alt="명작 스토리 안심농가 방문 - 포스터">
</a>
</div>
</section>
<!--메인 바텀 슬라이드-->
<section class="bot-slider-sec" data-aos="fade-up" data-aos-offset="300">
<div class="bot-slider-box">
<div class="bot-slider-text-box">
<div class="text">
<span>음성명작페스티벌</span>
<span><strong>둘러보기!</strong></span>
<span>음성명작페스티벌</span>
<span>백배 즐기기</span>
</div>
<div class="bot-slider-btn-box">
<button class="cusor-p bot-slider-btn bot-swiper-button-prev " id="prev">
<img src="./main/icon/card_left.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 이전">
</button>
<button class="cusor-p bot-slider-btn bot-swiper-button-next" id="next">
<img src="./main/icon/card_right.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 다음">
</button>
</div>
</div>
<div class="bot-slider-outer">
<div class="swiper bot-swiper">
<div class="swiper-wrapper">
<a href="" class="swiper-slide">
<img src="./main/main/ban1.png" alt="축제공간구성 위치확인하고 빠르게 찾아가자 바로가기">
</a>
<a href="" class="swiper-slide">
<img src="./main/main/ban2.png" alt="축제프로그램 다양한 공연과 체험 프로그램 바로가기">
</a>
<a href="" class="swiper-slide">
<img src="./main/main/ban3.png" alt="지난이야기 음성명작 페스티벌 발자취 바로가기">
</a>
</div>
</div>
</div>
</div>
</section>
<!--메인 협업사-->
<section class="alliance-sec">
<div class="alliance-bar">
<a href=""><img src="./main/logo/btm_banner1.png" alt="음성군 홈페이지 바로가기"></a>
<a href=""><img src="./main/logo/btm_banner2.png" alt="음성장터 바로가기"></a>
<a href=""><img src="./main/logo/btm_banner3.png" alt="음성명작페스티벌 바로가기"></a>
</div>
</section>
</main>
<!--푸터-->
<footer id="footer">
<div class="footer-box">
<div class="footer-logo">
<img src="./main/logo/footer_logo.png" alt="음성명작 페스티벌 로고">
</div>
<ul class="footer-sns">
<li><a><img src="./main/icon/sns_insta_on.png" alt="인스타그램 바로가기"></a></li>
<li><a><img src="./main/icon/sns_face_on.png" alt="인스타그램 바로가기"></a></li>
<li><a><img src="./main/icon/sns_blog_on.png" alt="인스타그램 바로가기"></a></li>
<li><a><img src="./main/icon/sns_youtube_on.png" alt="인스타그램 바로가기"></a></li>
</ul>
<div class="footer-text">
<span><strong>음성명작페스티벌 사업단</strong></span>
<span>충청북도 음성군 음성읍 반기문로 27 2층</span>
<span>사업자등록번호 : 308-82-73169 | 대표자 : 조용주</span>
<span>Copyright ⓒ2020 EUMSEONG MYEONGJAK. ALL RIGHTS RESERVED.</span>
</div>
<div class="call-num">
<h1>대표전화</h1>
<p><strong>043-873-8940</strong></p>
<p>09:00 ~ 18:00 토·일요일·공휴일 휴무</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
direction: 'horizontal',
loop: true,
speed: 1000,
autoplay: {
delay: 2000,
},
setWrapperSize: true,
autoHeight: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets"
},
breakpoints: { //반응형 조건 속성
320: { //320 이상일 경우
slidesPerView: 1, //레이아웃 2열
},
}
});
var swiper = new Swiper(".bot-swiper", {
direction: 'horizontal',
pagination: false,
loop: true,
speed: 1000,
autoplay: {
delay: 2000,
},
navigation: {
nextEl: '.bot-swiper-button-next',
prevEl: '.bot-swiper-button-prev',
},
breakpoints: { //반응형 조건 속성
426: { //426 이상일 경우
slidesPerView: 2.2, //레이아웃 2열
},
320: { //320 이상일 경우
slidesPerView: 1, //레이아웃 2열
},
}
});
</script>
<script>
AOS.init({
easing: 'ease-out-back',
});
</script>
<script>
$(document).ready(function () {
// 공지사항 롤링 👇
let height = $(".notice-roll-box").height()
let leng = $(".notice-roll li").length
let count = 0
function noticeRoll() {
count++
$('.notice-roll').animate({"top":`-${height * count}px` }, 1000,
()=>{
if (count >= (leng-1)) {
count = 0
$('.notice-roll').css({top: "0"})
}}
)
}
setInterval(noticeRoll, 2000)
//모바일 메뉴 버튼 클릭 👇
$(".toggle-btn").click(() => {
$(".m-menu-box").toggleClass("hide")
})
})
//모바일 메뉴 리사이징시 숨김👇
$(window).resize(function () {
if ($(this).width() >= 426) {
$(".m-menu-box").addClass("hide")
} else if ($(this).width() < 426) {
$(".m-menu-box").addClass("hide")
}
})
</script>
<script>
const navScroll = document.querySelector("#scroll-nav");
const navSns = document.querySelectorAll("#nav .gnb-sns .gnb-sns-item")
const arryNavSns = Array.from(navSns)
const scrollNavSns = document.querySelectorAll("#scroll-nav .gnb-sns .gnb-sns-item")
const arryScrollNavSns = Array.from(scrollNavSns)
const snsKind = ['insta', 'face', 'blog', 'youtube']
const ON = "on"
const OFF = "off"
// SNS 리스트 백그라운드 깔기 👇
const snsBg = (listArray) => {
if (listArray) {
listArray.forEach((element, index, array) => {
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
})
}
}
// SNS 리스트 마우스 enter, leave 효과 👇
const mouseEnter = (listArray) => {
listArray.forEach((element, index, array) => {
element.addEventListener('mouseenter', () => {
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${ON}.png') no-repeat`
})
})
}
const mouseLeave = (listArray) => {
listArray.forEach((element, index, array) => {
element.addEventListener('mouseleave', () => {
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat`
})
})
}
snsBg(arryNavSns)
mouseEnter(arryNavSns)
mouseLeave(arryNavSns)
snsBg(arryScrollNavSns)
mouseEnter(arryScrollNavSns)
mouseLeave(arryScrollNavSns)
// 스크롤에 따른 NAV 변경 👇
const scrollNavFn = () => {
let Y = document.documentElement.scrollTop
if (Y >= 300) {
navScroll.classList.add("fixed")
navScroll.classList.remove("hide")
} else {
navScroll.classList.remove("fixed")
navScroll.classList.add("hide")
}
}
const scrollFn = () => {
scrollNavFn()
}
document.addEventListener("scroll", scrollFn)
</script>
</body>
</html>

870
main.css
Unescape View File

@ -0,0 +1,870 @@
* {
font-family: 'Noto Sans KR', 'sans-serif';
}
body {
margin: 0 auto;
overflow-x: hidden;
}
ul {
list-style: none;
padding: 0;
}
a:visited, a:link {
text-decoration: none;
color: black;
}
h1, h2, h3, h4, h5, p {
margin: 0;
}
div, section, nav, main, footer, span {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hide {
display: none !important;
}
.fixed{
position: fixed;
top: 0;
}
.dot-color {
background-color: #7CE063 !important;
}
.cusor-p {
cursor: pointer;
}
.nav {
width: 100%;
height: auto;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
text-align: center;
padding-top: 15px;
overflow: hidden;
background-color: #fff;
z-index: 999;
}
.nav .login-sec {
width: 100%;
height: auto;
padding-bottom: 10px;
}
.nav .login-sec .login-menu {
width: 100%;
max-width: 1080px;
margin: 0 auto;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
font-size: 16px;
font-weight: 600;
color: #000;
}
.nav .login-sec .login-menu li:nth-child(2) {
margin-left: 8px;
margin-right: 8px;
}
.nav .logo-sec {
width: auto;
max-width: 1080px;
height: auto;
}
.nav .logo-sec .nav-logo{
width: 355px;
height: auto;
}
.nav .logo-sec .nav-logo-m {
display: none;
}
.nav .gnb {
width: 100%;
max-width: 1150px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
margin-top: 15px;
}
.nav .gnb .main-menu {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
font-size: 22px;
font-weight: 600;
margin-bottom: 20px;
flex: 5;
}
.nav .gnb .gnb-sns {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
margin-bottom: 20px;
flex: 1;
}
.nav .gnb .gnb-sns li {
width: 28px;
height: 28px;
transition: all 0.2s;
}
.nav .gnb-line{
width: 100%;
height: 5px;
background: url("./main/main/line.png") no-repeat center;
background-size: cover;
}
.nav .toggle-btn {
display: none;
}
.m-menu-box {
transition: all 1s;
}
/*********************************************************************/
#main {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#main .slider-sec{
width: 100%;
height: auto;
}
#main .slider-sec .slider-outer{
width: 100%;
height: auto;
min-height: 240px;
position: relative;
overflow: hidden;
}
#main .notice-sec {
width: 100%;
height: auto;
display: flex;
flex-flow: column;
align-items: center;
margin-top: 50px;
}
#main .notice-sec .notice {
width: 100%;
max-width: 1080px;
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-bottom: 20px;
transition: all 1s;
}
#main .notice-sec .notice h4 {
font-size: 22px;
font-weight: 800;
flex: 1;
}
#main .notice-sec .notice .notice-roll-box{
width: 900px;
height: 24px;
font-size: 18px;
font-weight: 700;
margin-left: 25px;
position: relative;
overflow: hidden;
}
#main .notice-sec .notice .notice-roll-box .notice-roll{
width: 100%;
height: auto;
margin: 0;
position: relative;
}
#main .notice-sec .notice .notice-roll li{
width: 100%;
height: 24px;
}
#main .notice-sec .notice .notice-btn {
border: none;
background: transparent;
}
#main .notice-sec .banner {
width: 100%;
max-width: 1080px;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding-bottom: 80px;
transition: all 1s;
}
#main .bot-slider-sec {
width: 100%;
background-color: #B4A0FF;
transition: all 1s;
}
#main .bot-slider-sec .bot-slider-box {
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding-top: 50px;
padding-bottom: 50px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box {
width: 300px;
height: auto;
display: flex;
flex-flow: column;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
color: #fff;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{
font-size: 2em;
display: block;
font-weight: normal;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){
font-size: 2.4em;
margin-bottom: 30px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){
font-size: 1.5em;
font-weight: normal;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{
font-size: 1.3em;
padding-bottom: 30px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box {
width: 150px;
height: auto;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{
border: none;
background: transparent;
filter: contrast(170%);
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer {
width: 780px;
height: auto;
padding: 0px 15px 0px 15px;
box-sizing: border-box;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .swiper-slide{
padding: 0px 10px 0px 10px;
box-sizing: border-box;
}
#main .alliance-sec {
width: 100%;
height: auto;
border-top: 1px solid #e0e0e0;
display: flex;
flex-flow: row;
justify-content: center;
transition: all 1s;
}
#main .alliance-sec .alliance-bar {
width: 100%;
max-width: 1080px;
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-top: 15px;
margin-bottom: 15px;
}
#main .alliance-sec .alliance-bar a {
margin-right: 70px;
}
#footer {
width: 100%;
height: auto;
border-top: 1px solid #e0e0e0;
padding-top: 50px;
padding-bottom: 30px;
display: flex;
flex-flow: row;
justify-content: center;
}
#footer .footer-box {
width: 100%;
max-width: 1080px;
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
}
#footer .footer-box .footer-logo {
width: auto;
height: auto;
flex: 1;
}
#footer .footer-box .footer-logo img {
width: 50%;
}
#footer .footer-box .footer-sns {
display: none;
}
#footer .footer-box .footer-text {
display: flex;
flex-flow: column;
color: #666;
font-size: 14px;
flex: 2;
}
#footer .footer-box .footer-text span {
margin-bottom: 5px;
}
#footer .footer-box .footer-text span:last-child {
margin-top: 10px;
}
#footer .footer-box .call-num {
flex: 1;
}
#footer .footer-box .call-num h1{
font-size: 18px;
font-weight: 500
}
#footer .footer-box .call-num p {
font-size: 14px;
font-weight: 500;
}
#footer .footer-box .call-num p > strong{
font-size: 35px;
font-weight: 600
}
.nav-scroll{
width: 100%;
height: auto;
display: flex;
flex-flow: column;
align-items: center;
background-color: #fff;
z-index: 9999;
}
.nav-scroll .scroll-nav-top {
width: 100%;
max-width: 1080px;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
}
.nav-scroll .scroll-nav-top .gnb-sns {
width: auto;
height: auto;
display: flex;
flex-flow: row;
}
.nav-scroll .scroll-nav-top .gnb-sns li {
width: 28px;
height: 28px;
margin-right: 25px;
transition: all 0.2s;
}
.nav-scroll .scroll-nav-top .login-sec {
width: auto;
height: auto;
}
.nav-scroll .scroll-nav-top .login-sec .login-menu{
width: auto;
height: auto;
display: flex;
flex-flow: row nowrap;
font-size: 16px;
font-weight: 600;
}
.nav-scroll .scroll-nav-top .login-sec .login-menu li:nth-child(2) {
margin-left: 8px;
margin-right: 8px;
}
.nav-scroll .scroll-nav-bottom {
width: 100%;
max-width: 1080px;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-scroll .scroll-nav-bottom .logo-sec{
width: 100%;
height: auto;
flex: 1;
text-align: center;
}
.nav-scroll .scroll-nav-bottom .logo-sec img{
width: 60%;
height: auto;
}
.nav-scroll .scroll-nav-bottom .gnb{
width: 100%;
height: auto;
flex: 2;
}
.nav-scroll .scroll-nav-bottom .gnb .main-menu{
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-between;
}
.nav-scroll .scroll-nav-bottom .gnb .main-menu li{
font-size: 22px;
font-weight: 600;
}
.nav-scroll .gnb-line{
width: 100%;
height: 5px;
background: url(./main/main/line.png) no-repeat center;
background-size: cover;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-wrapper {
width: 100%;
height: 100%;
min-height: 240px ;
}
.swiper-slide{
width: 100%;
height: 100%;
}
.swiper-slide img {
display: block ;
width: 100% ;
height: 100%;
object-fit: cover;
}
.swiper .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #7CE063;
margin: 0 15px !important;
}
@media (max-width: 425px) {
#scroll-nav {
display: none !important;
}
.m-menu-box {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
position: absolute;
}
.m-menu-box .m-menu {
width: 85%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
}
.m-menu-box .m-menu .m-login-sec {
width: 100%;
height: auto;
padding: 25px 0px;
text-align: center;
}
.m-menu-box .m-menu .m-login-sec .m-login-menu {
margin: 0;
display: flex;
flex-flow: row-reverse nowrap;
justify-content: center;
align-items: center;
font-size: 1rem;
}
.m-menu-box .m-menu .m-login-sec .m-login-menu > li:nth-child(2){
margin-left: 30px;
margin-right: 30px;
}
.m-menu-box .m-menu .m-gnb {
width: 100%;
height: auto;
}
.m-menu-box .m-menu .m-gnb .m-main-menu {
margin: 0;
}
.m-menu-box .m-menu .m-gnb .m-main-menu > li {
width: 100%;
height: auto;
font-size: 20px;
font-weight: 800;
padding: 15px 30px;
box-sizing: border-box;
}
.nav .login-sec {
width: 100%;
height: 70px;
display: none;
}
.nav .logo-sec {
width: 50%;
max-width: 1080px;
height: auto;
}
.nav .logo-sec .nav-logo{
display: none;
}
.nav .logo-sec .nav-logo-m {
display: block;
margin: 0 auto;
width: 100%;
}
.nav .gnb {
display: none;
}
.nav .gnb-line{
width: 100%;
height: 5px;
background: url("./main/main/line.png") no-repeat center;
background-size: cover;
margin-top: 10px;
}
.nav .toggle-btn{
width: 50px;
height: 29px;
position: absolute;
top: calc((80px - 29px) / 2);
left: calc((100% - 60px ));
padding: 0px ;
display: flex;
flex-flow: column;
justify-content: space-around;
align-items: center;
}
.nav .toggle-btn > div {
width: 30px;
height: 4px;
background-color: #B4A0FF;
display: block;
margin: 0;
}
/* nav m-menu */
/*silder-sec*/
#main .slider-sec .slider-outer .slider-btn {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
}
#main .slider-sec .slider-outer .slider-btn .slider-bullet {
content: "";
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 100%;
}
#main .slider-sec .slider-outer .slider-btn .slider-bullet:nth-child(2) {
margin-left: 25px;
margin-right: 25px;
}
#main .notice-sec {
width: 100%;
height: auto;
display: flex;
flex-flow: column;
align-items: center;
margin-top: 0px;
}
#main .notice-sec .notice {
width: 100%;
max-width: 1080px;
height: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 10px 10px;
margin-bottom: 0px;
}
#main .notice-sec .notice h4 {
width: 25%;
font-size: 16px;
font-weight: bold;
}
#main .notice-sec .notice .notice-roll-box{
width: 70%;
height: 24px;
font-size: 16px;
font-weight: 500;
margin-left: 0px;
position: relative;
overflow: hidden;
}
#main .notice-sec .notice .notice-roll-box .notice-roll{
width: 100%;
height: auto;
margin: 0;
position: relative;
}
#main .notice-sec .notice .notice-roll li{
width: 100%;
height: 24px;
font-size: 14px;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#main .notice-sec .notice .notice-btn {
width: auto;
border: none;
background: transparent;
}
#main .notice-sec .notice .notice-btn img{
width: 15px;
height: 15px;
}
#main .notice-sec .banner {
width: 100%;
max-width: 1080px;
height: auto;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
padding: 0px 20px 20px 20px;
}
#main .notice-sec .banner a{
width: 100%;
height: auto;
}
#main .notice-sec .banner a img{
width: 100%;
}
/*notice*/
#main .bot-slider-sec {
width: 100%;
background-color: #B4A0FF;
}
#main .bot-slider-sec .bot-slider-box {
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding-top: 50px;
padding-bottom: 50px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box {
width: auto;
height: auto;
display: flex;
flex-flow: column;
align-items: center;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text {
display: block;
color: #fff;
text-align: center;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{
font-size: 1.75rem;;
display: inline-block;
font-weight: normal;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){
font-size: 1.6em;
margin-bottom: 30px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){
font-size: 18px;
display: inline-block;
font-weight: normal;
margin-top: 10px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{
font-size: 18px;
padding-bottom: 0px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box {
width: auto;
height: auto;
padding-top: 20px;
padding-bottom: 25px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{
border: none;
background: transparent;
filter: contrast(170%);
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer {
width: 100%;
height: auto;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner {
width: auto;
height: auto;
padding: 0px 0px;
overflow: hidden;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items {
width: 100%;
height: auto;
display: flex;
padding: 0px;
transition: all 1s;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a {
width: 100%;
height: auto;
padding: 0px 30px;
}
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a:nth-child(2n) {
margin-left: 0px;
margin-right: 0px;
}
/*bot-slider-sec*/
#main .alliance-sec {
width: 100%;
height: auto;
border-top: 1px solid #e0e0e0;
display: flex;
flex-flow: row;
justify-content: center;
}
#main .alliance-sec .alliance-bar {
width: 100%;
max-width: 1080px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
margin-top: 15px;
margin-bottom: 15px;
}
#main .alliance-sec .alliance-bar a {
margin-right: 0px;
text-align: center;
}
#main .alliance-sec .alliance-bar a img{
width: 80%;
}
/*.alliance-sec*/
#footer {
width: 100%;
height: auto;
border-top: 1px solid #e0e0e0;
padding-top: 0px;
padding-bottom: 30px;
display: flex;
flex-flow: row;
justify-content: center;
}
#footer .footer-box {
width: 100%;
max-width: 1080px;
display: flex;
flex-flow: column;
justify-content: space-between;
align-items: center;
}
#footer .footer-box .footer-logo {
width: auto;
height: auto;
flex: 1;
display: none;
}
#footer .footer-box .footer-logo img {
width: 50%;
}
#footer .footer-box .footer-sns {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
#footer .footer-box .footer-sns li:first-child{
margin-right: 5px;
}
#footer .footer-box .footer-sns li:nth-child(2){
margin: 0px 5px 0px 5px;
}
#footer .footer-box .footer-sns li:nth-child(3){
margin: 0px 5px 0px 5px;
}
#footer .footer-box .footer-sns li:last-child{
margin-left: 5px;
}
#footer .footer-box .footer-text {
display: flex;
flex-flow: column;
align-items: center;
color: #666;
font-size: 14px;
flex: 2;
text-align: center;
}
#footer .footer-box .footer-text span {
margin-bottom: 5px;
}
#footer .footer-box .footer-text span:last-child {
margin-top: 10px;
}
#footer .footer-box .call-num {
flex: 1;
display: none;
}
#footer .footer-box .call-num h1{
font-size: 18px;
font-weight: 500
}
#footer .footer-box .call-num p {
font-size: 14px;
font-weight: 300;
}
#footer .footer-box .call-num p > strong{
font-size: 35px;
font-weight: 500;
}
.mySwiper {
width: 100%;
height: 100%;
}
.mySwiper .swiper-wrapper {
width: 100%;
height: 100%;
}
.mySwiper .swiper-wrapper .swiper-slide{
width: 100%;
height: 100%;
max-height: 240px;
}
.mySwiper .swiper-wrapper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
max-height: 240px !important;
object-fit: fill;
}
.mySwiper .swiper-pagination-bullet {
width: 9px;
height: 9px;
background-color: #7CE063;
margin: 0 5px !important;
}
}

BIN
main/icon/card_left.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 916 B

BIN
main/icon/card_right.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 922 B

BIN
main/icon/join.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 543 B

BIN
main/icon/more.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 B

BIN
main/icon/sns_blog_off.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 581 B

BIN
main/icon/sns_blog_on.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 580 B

BIN
main/icon/sns_face_off.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 401 B

BIN
main/icon/sns_face_on.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 401 B

BIN
main/icon/sns_insta_off.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 663 B

BIN
main/icon/sns_insta_on.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
main/icon/sns_youtube_off.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 461 B

BIN
main/icon/sns_youtube_on.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 463 B

BIN
main/logo/btm_banner1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
main/logo/btm_banner2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
main/logo/btm_banner3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
main/logo/footer_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
main/logo/logo_big.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
main/logo/logo_small.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
main/main/ban1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
main/main/ban2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
main/main/ban3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
main/main/con1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
main/main/con2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 KiB

BIN
main/main/con3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

BIN
main/main/img_slide1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

BIN
main/main/img_slide2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
main/main/img_slide3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 848 KiB

BIN
main/main/line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 226 B

28
test.html
Unescape View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="fade">
<div class="swiper-container swiper-container-h">
<div class="swiper-wapper">
<?php foreach ($mainbanner as $o): ?>
<!--$mainbanner라는 배열을 foreach함수를 사용하여 swiper-slide를 생성-->
<div class="swiper-slide">
<a href="<?=$o->href?>">
<!--$mainbanner 라는 변수(배열)에 오브젝트속 키워드가 href인 갑을 추출 한다-->
<img src="/data/banner/<?=$o->bf_file?>" alt="음성명작페스티벌" width="100%">
<!--$mainbanner 라는 변수(배열)에 오브젝트속 키워드가 "bf_file" 갑을 추출 한다-->
</a>
</div>
<?php endforeach; ?>
</div>
<div class="swiper-pagination swiper-pagination-h"></div>
</div>
</section>
</body>
</html>
Write Preview
Loading…
Cancel
Save