@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;
display: flex; justify-content: space-between; align-items: center;}
header nav {}
header nav .gnb {display: flex;}
header nav .gnb >li {font-size: 22px; position: relative;}
header nav .gnb >li> a {color: #1e3622;
padding: 35px 34px; display: block; transition: 0.15s;}
header nav .gnb>li:hover >a{color: #fff2e4;}
header 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%; width: 0; max-height: 0; overflow: hidden; background-size: 50%; border-radius: 10px 160px 10px 26px; transition: 0.15s;}
header nav .gnb li:hover .lnb {width: 600px; max-height: 250px; padding: 60px 100px;}
header nav .gnb li:hover .lnb li {opacity: 1;}
header nav .gnb li .lnb li{width: 40%; height: 55px; text-indent: 20px; ★ text-indent : 문단의 첫 번째 줄을 들여쓰기 ★
font-size: 20px;position: relative; opactiy: 0; transition:0.5s}
header nav .gnb li .lnb li::before{content: "";
position: absolute; width: 3px; height: 3px;
background: #1e3522; border-radius: 50%;
top: 50%; transform: translateY(-50%); left: 0; transition: 0.15s;}
header nav .gnb li .lnb li a{color: #1e3622; padding: 12px 0; display: block;}
header nav .gnb li .lnb li:hover:before{left: 8px;}
header nav .gnb li .lnb li:hover a {color: rgb(228, 113, 132);}
header h1{position: absolute; left: 50%; transform: translate(-50%);}
header .login_box {}
header .login_box .login {display: flex;}
header .login_box a {font-size: 22px; color: #fff; padding: 10px 34px;
border: 1px solid #000;}
header .login_box .logout {display: none;}
#hero{background: #ffb1a7; height: 100vh;}
#section_box{}
#section1{}
#section2{}
#section3{}
footer{}
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
button 태그 속 3type - button : 일반 버튼인데, 자바 스크립트와 연결해야 우리가 원하는 특정 기능을 실행할 수 있음. 그냥 누르면 아무것도 안됨. - submit : 기본. form 안에 작성된 모든 내용을 서버로 보냄 type을 따로 적지 않으면 브라우저는 자동으로 이 버튼을 submit로 인식. 그러므로 따로 써줘도 되고 안 써줘도 됨. - reset : 사용자가 form안에 입력했던 모든 내용 싹 지우고 처음 상태로 되돌림.
$('.search_open').click(function(){
$('.search_wrap').fadeIn(300);
})
★ click: 이벤트, fadeIn: 메서드 ★
이벤트 = 웹 브라우저에서 일어나는 사건이나 행위 자체.
사용자가 마우스를 클릭하거나, 키보드를 누르거나, 페이지가 로드되는 등의 모든 '사건'이 이벤트.
메서드 = 객체가 수행할 수 있는 구체적인 동작이나 기능을 미리 만들어 둔 함수.
→ click : 사용자가 특정 요소를 클릭하는 이벤트가 발생
→ fadeIn : 선택한 요소를 서서히 나타나게 만드는 구체적인 동작 수행
$('.search_close').click(function(){
$('.search_wrap').fadeOut(300);
})
$('.word li').click(function(){
let wordVal = $(this).text(); ★ .text() - 선택한 요소 안에 있는 글자(텍스트) 내용을 가져오거나 바꿀 때 사용 ★
기능에는 읽기랑 쓰기가 있음. 만약 읽기는 괄호 안에 아무것도 적지 않으면, 해당 요소가 가진 글자만 쏙 가져옴.
$('.search_inner input').val(wordVal+' ').focus
})
★ $('.btn').text() : 버튼에 적힌 글자가 무엇인지 가져옴.
★ $('.btn').text('확인') : 버튼의 글자를 확인으로 바꿈. 괄호 안에 따옴표와 함께 글자를 적으면 새로운 내용이 나옴.
대상.val() : 값을 구하는거 대상.length : 길이를 구하는거 대상.addClass('on') 대상.removeClass('on')
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
<!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>
<nav>
<ul class="gnb">
<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="#">SERVICE</a>
</li>
<li><a href="#">BRAND</a>
<ul class="lnb">
<li><a href="#">SUBMENU</a></li>
<li><a href="#">SUBMENU</a></li>
<li><a href="#">SUBMENU</a></li>
</ul>
</li>
<li><a href="#">STORE</a>
</li>
</ul>
</nav>
<h1><a href="#"><img src="images/logo.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>
</header>
<div id="hero"></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">
★ action : 사용자가 입력한 데이터를 전달할 서버의 주소(url)로 저장
★ method : 데이터를 서버로 보내는 방식(수단)을 결정
<input type="text" placeholder="검색어를 입력해주세요" name="search_keyword">
★ input - 웹 페이지에서 사용자에게 데이터를 입력받기 위해 사용하는 대표적인 상호작용 코드.
type을 numer / password / checkbox 등으로 만들어서 숫자만 입력 / 비밀번호를 숨기기 / 체크박스 만들기 가능
★ placeholder - 사용자가 값을 입력하기 전, 입력창(input나 textarea)에 연하게 표시되는 안내 문구
사용자가 입력을 시작하면 자동으로 안내문구가 사라지고 내용을 다 지우면 다시 나타남.
<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>
