modal : 어둡게
$('topset_nav').clone()
nav 자체를 복사
$('topset_nav').html()
자식코드만 구함.
object-fit: cover
비율 안달라지게
playsinlline
모바일에서 볼때 확대되면서 보여지지 않도록
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
- 너무 졸아서 고친다 -
영상이 안됨.
<video> autoplay muted playsinlline loop
<source src ="video/main1.mp4" type="video/mp4">
<!-- <source src ="video/main1.mp4" type="video/ogg"> -->
<source src ="video/main1.mp4" type="video/webn">
</video><!-- <video src="video/main1.mp4" autoplay muted playsinlline loop></video> -->
<video autoplay muted playsinlline loop>
<source src ="video/main1.mp4" type="video/mp4">
<!-- <source src ="video/main1.ogg" type="video/ogg"> -->
<source src ="video/main1.webm" type="video/webm">
</video>
CSS에서 lnb_box에 ::before (화살표 효과)를 사용하기 때문에 꼭 필요해요.
<li><a href="#">SHOP</a>
<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>
</li><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>
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
영상이 안올라가짐...
<!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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=search" />
</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">
<div class="textbox">
<strong>Better Sleep, Better life</strong>
<p>오늘 밤, 더 깊은 휴식으로 내일의 나를 충전하세요</p>
</div>
<!-- <video src="video/main1.mp4" autoplay muted playsinlline loop></video> -->
<video autoplay muted playsinlline loop>
<source src ="video/main1.mp4" type="video/mp4">
<!-- <source src ="video/main1.ogg" type="video/ogg"> -->
<source src ="video/main1.webm" type="video/webm">
</video>
</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>
</body>
</html>@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;}
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; overflow: hidden; background-size: 50%; border-radius: 10px 160px 10px 26px; transition: 0.5s;}
header .topset nav .gnb li .lnb_box {position: relative;}
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;}
#hero{background: #ffb1a7; height: 100vh;}
#hero .textbox {position: absolute; left: 50%; top: 30%; transform: translate(-50%, 0); color: #fff; text-align: center;}
#hero .textbox strong {font-size: 80px;}
#hero .textbox p {font-size: 30px;}
#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;}
.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 video {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;}
}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;}// $('.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:''});
// });
$('.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');
}
})
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')
})
// alert ($('.topset_mobile nav') .offset() .top )
// input에서 글자를 칠때 input의 값을 구하고 val()
// 만약에 값의 길이가 0보다 큰 경우 .material-symbols-outlined .on 클래스를 추가하라.
// 아닌경우는 .on클래스를 제거해라.'web design' 카테고리의 다른 글
| 05.11 - html 연습하기 (0) | 2026.05.30 |
|---|---|
| 05.10 - cresto (개인) (0) | 2026.05.30 |
| 05.10 - holo (팀플) (0) | 2026.05.30 |
| 05.09 - holo (팀플) (0) | 2026.05.30 |
| 05.08 - holo(팀플) (0) | 2026.05.30 |