- swiper slide 가져오기 -
preview → ctrl + u → ctrl + c
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
swiper slide 순서값 구하기
on: {slideChange: function () {
// this는 swiper 인스턴스를 가리킵니다.
console.log('현재 실제 인덱스:', this.realIndex);
console.log('활성 인덱스:', this.activeIndex);
},
},
.eq = nth-child
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper",{
spaceBetween: 0,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
slideChange: function () {
$('.swiper-slide').removeClass('on') 사용자가 화살표를 넘겼을때만 애니메이션이 작동되도록 removeClass를 사용
$('.swiper-slide').eq(this.realIndex).addClass('on')
또는 아래것도 가능하긴 함.
// $('.swiper-slide').removeClass('on')
$('.swiper-slide').eq(this.realIndex).addClass('on').siblings().removeClass('on');
},
}
});
</script>
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
word-break: keep-all
header
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>윤서</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=search" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
</head>
<body>
<header>
<h1><a href="#"><img src="images/logo.png" alt=""></a></h1>
<div class="topset">
<nav>
<ul class="gnb">
<li><a href="#">SHOP</a>
<div class="lnb_box">
<ul class="lnb">
<li><a href="#">SUBMENU</a></li>
<li><a href="#">SUBMENU</a></li>
<li><a href="#">SUBMENU</a></li>
<li><a href="#">SUBMENU</a></li>
<li><a href="#">SUBMENU</a></li>
<li><a href="#">SUBMENU</a></li>
<li><a href="#">SUBMENU</a></li>
</ul>
</div>
</li>
<li><a href="#">SERVICE</a>
</li>
<li><a href="#">BRAND</a>
<div class="lnb_box">
<ul class="lnb">
<li><a href="#">SUBMENU</a></li>
<li><a href="#">SUBMENU</a></li>
<li><a href="#">SUBMENU</a></li>
</ul>
</div>
</li>
<li><a href="#">STORE</a>
</li>
</ul>
</nav>
<div class="login_box">
<div class="login">
<a href="#"class="search_open">SEARCH</a>
<a href="#">login</a>
</div>
<div class="logout">
<a href="#"class="search_open">SEARCH</a>
<a href="#">LOGOUT</a>
</div>
</div>
</div>
<div class="hamburger">
<span></span>
</div>
<div class="topset_mobile">
<div class="topset_monav">
<h1><a href="#"><img src="images/logo_w.png" alt=""></a></h1>
<div class="login_box">
<!-- <div class="login">
<a href="#"class="search_open">SEARCH</a>
<a href="#">login</a>
</div>
<div class="logout">
<a href="#"class="search_open">SEARCH</a>
<a href="#">LOGOUT</a>
</div> -->
</div>
<nav>
</nav>
</div>
</div>
</header>
<div id="hero">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide on">
<div class="textbox">
<strong>Better Sleep, Better life</strong>
<p>오늘 밤, 더 깊은 휴식으로 내일의 나를 충전하세요</p>
</div>
<video autoplay muted playsinlline loop>
<source src ="video/main1.mp4" type="video/mp4">
<source src ="video/main1.webm" type="video/webm">
</video>
</div>
<div class="swiper-slide">
<div class="textbox">
<strong>Better Sleep, Better life2</strong>
<p>오늘 밤, 더 깊은 휴식으로 내일의 나를 충전하세요</p>
</div>
<video autoplay muted playsinlline loop>
<source src ="video/main1.mp4" type="video/mp4">
<source src ="video/main1.webm" type="video/webm">
</video>
</div>
<div class="swiper-slide">
<div class="textbox">
<strong>Better Sleep, Better life3</strong>
<p>오늘 밤, 더 깊은 휴식으로 내일의 나를 충전하세요</p>
</div>
<video autoplay muted playsinlline loop>
<source src ="video/main1.mp4" type="video/mp4">
<source src ="video/main1.webm" type="video/webm">
</video>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<div id="section_box">
<section id="section1"></section>
<section id="section2"></section>
<section id="section3"></section>
</div>
<div class="search_wrap">
<div class="search_box">
<div class="search_inner">
<form action="index.html" method="get">
<input type="text" placeholder="검색어를 입력해주세요" name="search_keyword">
<button class="material-symbols-outlined" type="button">search</button>
</form>
</div>
<div class="search_word">
<ul class="word">
<li>싱글 침대</li>
<li>서랍장</li>
<li>더블 침대</li>
</ul>
</div>
<div class="search_close">
<span></span>
<span></span>
</div>
</div>
</div>
<script src="script/jquery-4.0.0.min.js"></script>
<script src="script/action.js"></script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper",{
spaceBetween: 0,
centeredSlides: true,
speed:1000,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
slideChange: function () {
// $('.swiper-slide').removeClass('on')
$('.swiper-slide').eq(this.realIndex).addClass('on').siblings().removeClass('on');
},
}
});
</script>
</body>
</html>
reset.css
reset.css
*{margin: 0; padding: 0; font-family: Pretendard;}
li {list-style: none;}
a {color: #333; text-decoration: none;}
html, body{height: 100%;}
img {vertical-align: top;}
input {border: 0; outline: 0;}
button {border: 0; background: none;}
style.css
charset "UTF-8";
@import url(reset.css);
@import url(font.css);
header{max-width: 1650px;
left: 50%; transform: translateX(-50%);
position: absolute; width: 100%; top: 30px; z-index: 10;}
header .topset {display: flex; justify-content: space-between; align-items: center;z-index: 9;}
header .topset nav {}
header .topset nav .gnb {display: flex;}
header .topset nav .gnb >li {font-size: 22px; position: relative; overflow: visible;}
header .topset nav .gnb >li> a {color: #1e3622;
padding: 1.77vw 1.77vw ; display: block; transition: 0.15s;}
header .topset nav .gnb>li:hover >a{color: #fff2e4;}
header .topset nav .gnb li .lnb{position: absolute;
padding: 0; background: #fff5eb url(../images/leap1.png) no-repeat right bottom; display: flex; flex-wrap: wrap; top: 100%; left: 0; width: 0; max-height: 0; background-size: 50%; border-radius: 10px 160px 10px 26px; transition: 0.5s;}
header .topset nav .gnb li .lnb_box {position: relative; overflow: visible;}
header .topset nav .gnb li .lnb_box:before {content:""; position: absolute; width: 10px; height: 10px;background: #fff5eb; left: 60px; right: 20px; transform: rotate(45deg); z-index: 6; opacity: 0; visibility: hidden;}
header .topset nav .gnb li:hover .lnb_box:before {top: -5px; opacity: 1; visibility: visible; transform: rotate(135deg);}
header .topset nav .gnb li:hover .lnb {width: 600px; max-height: 250px; padding: 60px 100px;}
header .topset nav .gnb li:hover .lnb li {opacity: 1;}
header .topset nav .gnb li .lnb li{width: 40%; height: 55px; text-indent: 20px;
font-size: 20px;position: relative; opacity: 0; transition:0.5s}
header .topset nav .gnb li .lnb li:before{content: "";
position: absolute; width: 3px; height: 3px;
background: #1e3622; border-radius: 50%;
top: 50%; transform: translateY(-50%); left: 0; transition: 0.5s;}
header .topset nav .gnb li .lnb li a{color: #1e3622; padding: 12px 0; display: block;}
header .topset nav .gnb li .lnb li:hover:before{left: 8px;}
header .topset nav .gnb li .lnb li:hover a {color: rgb(228, 113, 132);}
header h1{position: absolute; left: 50%; transform: translate(-50%); width: 173px; top: -10px;}
header h1 img {width: 100%;}
header .topset .login_box {}
header .topset .login_box .login {display: flex;}
header .topset .login_box a {font-size: 22px; color: #fff; padding: 10px 34px; padding: 10px 1.77vw;}
header .topset .login_box .logout {display: none;}
.topset_mobile {display: none;}
#section_box{height: 1000px;}
#section1{}
#section2{}
#section3{}
footer{}
.search_wrap {position: fixed; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.75); left: 0; top: 0; display: none; z-index: 99;}
.search_wrap .search_box {max-width : 700px; position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.search_wrap .search_word {}
.search_wrap .search_close {}
.search_wrap .search_inner {position: relative;}
.search_wrap .search_inner input {font-size: 22px; padding: 25px 100px; border-radius: 30px; width: 100%; text-align: center; box-sizing: border-box;}
/* .search_wrap .search_inner focus {border: 1px solid pink; } */
.search_wrap .search_inner .material-symbols-outlined {position: absolute; font-size: 45px; right: 30px; top: 50%; transform: translateY(-50%); cursor: pointer; color : #dddddd; pointer-events: none;}
.search_wrap .search_inner .material-symbols-outlined.on {color: #000}
.search_wrap .search_word {}
.search_wrap .search_word .word {display: flex; gap: 20px; padding-left: 50px;}
.search_wrap .search_word .word li{color: #fff; font-size: 18px; position: relative; text-indent: 10px; line-height: 3;}
.search_wrap .search_word .word li:before {content: "";
position: absolute; width: 5px; height: 5px;
background: #fff; border-radius: 50%;
top: 50%; transform: translateY(-50%); left: 0;}
.search_wrap .search_close {position: relative; width: 80px; height: 80px; margin:100px auto 0; cursor: pointer;}
.search_wrap .search_close span {position: absolute; width: 100%; height: 2px; background: #fff; top: 50%; transform: translateY(-50%); left: 0; transition: 1s;}
.search_wrap .search_close span:nth-child(1) {transform: rotate(45deg);}
.search_wrap .search_close span:nth-child(2) {transform: rotate(-45deg);}
.search_wrap .search_close:hover span:nth-child(1) {transform: rotate(-45deg);background: #1e3622;}
.search_wrap .search_close:hover span:nth-child(2) {transform: rotate(45deg); background: #1e3622;}
#hero{background: #ffb1a7; height: 100vh; position: relative; z-index: 7;}
#hero .textbox {position: absolute; left: 50%; top: 30%; transform: translate(-50%, 0); color: #fff; text-align: center;}
#hero .textbox p {word-break: keep-all;}
#hero .swiper-slide.on .textbox strong {font-size: 80px; display: block; line-height: 1.2;}
#hero .swiper-slide.on .textbox p {font-size: 30px;}
@keyframes slideAni {
0% {opacity: 0; margin-top: 50px;}
100% {opacity: 1; margin: 0;}
}
#hero video {width: 100%; height: 100%; object-fit: cover;}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #444;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* tablet */
@media screen and (max-width: 1200px) {
header {top: 20px;}
header h1{width: 150px; position: relative;}
}
/* mobile */
@media screen and (max-width: 860px) {
header .topset {display: none;}
.hamburger {position: absolute; width: 30px; height: 30px; right: 30px; top: 20px; z-index: 7;}
.hamburger span {position: absolute; width: 20px; height: 2px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #000;}
.hamburger span:before,
.hamburger span:after {content:""; position: absolute; width: 100%; height: 100%; background: #000; left: 0; transition: 0.5s;}
.hamburger span:before {top: -7px;}
.hamburger span:after {top: 7px;}
.hamburger.on span {background: rgba(255,255,255,0)}
.hamburger.on span:before {transform: rotate(135deg); top: 0; background: #fff;}
.hamburger.on span:after {transform: rotate(-135deg);top: 0; background: #fff;}
.topset_mobile {position: fixed; width: 100%; height: 100vh; left: 0; top: -20px; background: rgba(0, 0, 0, 0.8); z-index: 5; display: none;}
.topset_mobile .topset_monav {width: 300px; height: 100vh; background: rgb(141,16,37); position: fixed; top: -20px; right: -300px; padding: 0 20px; box-sizing: border-box; transition: 0.5s;}
.topset_mobile .topset_monav.on {right: 0;}
.topset_mobile h1 {margin-top: 20px;}
.topset_mobile .login_box .login {display: flex; gap: 2px;}
.topset_mobile .login_box a {color:rgb(141,16,37); width: 50%; text-align: center; padding: 12px 0; background: #fff;}
.topset_mobile .login_box .logout {display: none;}
.topset_mobile nav {margin-top: 70px; height: calc(100vh - 230px); overflow: auto;}
.topset_mobile nav .gnb {}
.topset_mobile nav .gnb li {text-align: center;}
.topset_mobile nav .gnb > li > a {color: #fff; padding: 15px 0; display: block; font-size: 20px;}
.topset_mobile nav .gnb li .lnb {background: rgb(221, 89, 111); display: none;}
.topset_mobile nav .gnb li .lnb li {}
.topset_mobile nav .gnb li .lnb li a {color: #fff; padding: 15px 0; display: block;}
#hero .textbox strong {font-size: 60px;}
}
action.js
// $('.gnb > li').mouseover(function(){
// $(this).find('.lnb').css({width:'600px', height:'200px', padding: '60px 100px'});
// });
// $('.gnb > li').mouseout(function(){
// $('.lnb').css({width:'', height:'', padding: ''});
// $('this').find('.lnb li').css({opacity:''});
// });
let loginHtml = $('.topset .login_box').html()
$('.topset_mobile .login_box').html(loginHtml)
let navHtml = $('.topset nav').html()
$('.topset_mobile nav').html(navHtml)
$('.topset_mobile .gnb > li').click(function(){
$('.lnb').slideUp();
$(this).find('.lnb').stop().slideToggle();
})
$('header .hamburger').click(function(){
$('.topset_mobile').fadeToggle();
$(this).toggleClass('on')
$('.topset_monav').toggleClass('on')
})
$('.search_open').click(function(){
$('.search_wrap').fadeIn(300);
})
$('.search_close').click(function(){
$('.search_wrap').fadeOut(300);
})
$('.word li').click(function(){
let wordVal = $(this).text();
$('.search_inner input').val(wordVal+' ').focus().trigger('keyup');
})
$('.search_inner input').keyup(function(){
let inputText = $(this).val()
console.log(inputText.length)
if(inputText.length > 0) {
$('.material-symbols-outlined').addClass('on');
} else {
$('.material-symbols-outlined').removeClass('on');
}
})
// alert ($('.topset_mobile nav') .offset() .top )
// input에서 글자를 칠때 input의 값을 구하고 val()
// 만약에 값의 길이가 0보다 큰 경우 .material-symbols-outlined .on 클래스를 추가하라.
// 아닌경우는 .on클래스를 제거해라.'web design' 카테고리의 다른 글
| 05.13 - html 연습하기 (0) | 2026.05.30 |
|---|---|
| 05.13 - holo (팀플) (0) | 2026.05.30 |
| 05.10 - cresto (개인) (0) | 2026.05.30 |
| 05.10 - html 연습하기 (0) | 2026.05.30 |
| 05.10 - holo (팀플) (0) | 2026.05.30 |