본문 바로가기
씹덕티스토리에코딩의등장이라

jquery

by 희쨩 2024. 4. 12.

js 이벤트 연결

document.querySel~

 

제이쿼리에서는 $로 요소 선택

 

$(window).on('scroll', function () {

 

이런 식

맨 처음에

$(function() { 

 

}); 하고 안에 넣어 줘야 함

on = addeventlistener

 

addclass

removeclass

toggleclass

 

문서에서의 요소 위치

js = document.querySelector('~').offsettop

jp = $('~').offset().top;

 

offset이 메소드라 괄호 넣고 top을 해 줘야 함

제이쿼리는 거의 다 메소드

 

 

스크롤바 위치

js = window.scrollY

jq = $(window).scrollTop()

 

이벤트 강제 발생

js = window.dispatchEvent(new Event('scroll')

jq = $(window).on('scroll', function() {}). trigger('scroll')

 

 

스크롤 애니메이션

js = window.scrollTo({ top: 0, behavior : 'smooth', })

$('html, body').animate({ scrollTop: 0 });

animate( { scrollTop : 변수 } );

자체적인 메소드인 animate를 쓴다

 

 

 

 

  height: 30px;
  line-height: 30px;

 

글자가 있는 경우 (로그인, 회원가입) 없는 경우 (지구본) 둘 다 있어서 line height이랑 height 둘 다 넣어 준다

 

 

 

 

 

 

#header .gnb>li {
  position: relative;
  /* 간격이 다른 경우 width로 지정 */
  width:165px;
}

 

간격이 같아 보이지만 조금씩 다름 width가 지정되어 있음

flex justify로 하는 게 아니라 width로 지정해 줘야 함

 

 

 

 

 

메뉴 한꺼번에 나오게 하기

 

/* 컬러 변수 */
:root {
  --point-color1: #ffce32;
  --point-color2: #009223;
  --point-color3: #76CA9E;
  --txt-color-400: #999;
  --txt-color-500: #666;
  --txt-color-600: #292929;
}

#wrap {
  min-width: 1250px;
  height: 2000px;
  position: relative;
}

#header {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  background: #fff;
  z-index: 9999;
  border-top:5px solid var(--point-color2);
}
#header::before {
  content: '';
  position: absolute;
  left:0;
  bottom: 0;
  width:100%;
  height: 1px;
  background: #e5e5e5;
}
#header .header_top {
  width:1170px;
  height: 98px;
  margin:0 auto;
  display: flex;
  justify-content: center;
  position: relative;
  padding-top:35px;
}
#header .header_top .login {
  position: absolute;
  right:25px;
  top:40px;
  display: flex;
}
#header .header_top .login li + li {
  margin-left:15px;
  padding-left:15px;
  position: relative;
}
#header .header_top .login li + li::before {
  content: '';
  position: absolute;
  left:0;
  top:50%;
  width: 3px;
  height: 3px;
  margin-left:-1px;
  margin-top:-1px;
  border-radius: 50%;
  background: #ddd;
}
#header .header_top .login a {
  font-size: 13px;
  display: block;
  /* 글자가 있는 경우와 없는 경우이므로 */
  height: 30px;
  line-height: 30px;
}

#header .header_top .login .eng {
  padding-left:0;
}
#header .header_top .login .eng::before {
  display: none;
}
#header .header_top .login .eng a {
  width:30px;
  background: url(../images/icon_utill_global.png) no-repeat;
}

#header .header_bottom {
  display: flex;
  justify-content: center;
}
#header .gnb {
  display: flex;
}
#header .gnb>li {
  position: relative;
  /* 간격이 다른 경우 width로 지정 */
  width:165px;
}
#header .gnb>li>a {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 67px;
  color:var(--txt-color-600);
}

#header.on .gnb .depth2 {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  /* 서브메뉴 열릴때는 조금 천천히 */
  transition: all 0.5s;
}
#header .gnb .depth2 {
  /* 닫힐때는 빨리 */
  transition: all 0.2s;
  position: absolute;
  left:0;
  top:67px;
  width:100%;
  z-index: 10;
  text-align: center;
  padding-top:20px;
  transform: translateY(-20px);
  opacity: 0;
  visibility: hidden;
  /* 메뉴갯수가 짧은 부분이 있으므로 높이를 잡아 mouseleave안되도록 */
  height: 260px;
}
#header .gnb .depth2 li + li {
  margin-top:10px;
}
#header .gnb .depth2 a {
  font-size: 15px;
  letter-spacing: -0.05em;
}
#header .gnb .depth2 a:hover {
  color:var(--point-color2);
  text-decoration: underline;
}

#header.on::after {
  height: 260px;
}
#header::after {
  content: '';
  position: absolute;
  left:0;
  top:165px;
  width:100%;
  height: 0;
  transition: all 0.3s;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}



#container {
  padding-top:170px;
}

.main_slider {
  position: relative;
  overflow: hidden;
  /* 부모안의 a가 포지션엡솔이면 부모높이가 0이 되므로 잡아야함 */
  height: 440px;
}
.main_slider a {
  position: absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
}
.main_slider img {
  max-width: none;
}

 

 

 

 

#header::after {
  content: '';
  position: absolute;
  left:0;
  top:165px;
  width:100%;
  height: 0;
  transition: all 0.3s;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

 

 

이 부분이 흰색 

 

 

#header .gnb .depth2 {
  /* 닫힐때는 빨리 */
  transition: all 0.2s;
  position: absolute;
  left:0;
  top:67px;
  width:100%;
  z-index: 10;
  text-align: center;
  padding-top:20px;
  transform: translateY(-20px);
  opacity: 0;
  visibility: hidden;
  /* 메뉴갯수가 짧은 부분이 있으므로 높이를 잡아 mouseleave안되도록 */
  height: 260px;
}

 

 

depth2에서 열렸다 닫히는 거 해 줌

 

 

 

 

유투바이오 푸터 부분

 

css


#footer {
  background: #222;
  padding-bottom: 100px;
}
#footer .inner {
  max-width: 1440px;
  padding:0 20px;
  margin:0 auto;
}
#footer .footer_top {
  display: flex;
}
#footer .footer_menu {
  display: flex;
  gap:0 32px;
}
#footer .footer_menu a {
  color:#fff;
  display: block;
  line-height: 84px;
  font-size: 17px;
}

#footer .footer_bottom {
  display: flex;
  padding-top:32px;
  border-top: 1px solid rgba(255,255,255,.3);
  position: relative;
}
#footer .footer_logo {
  width:90px;
  height: 46px;
  -webkit-mask:url(../images/logo.svg) no-repeat 0 0 / 100%;
  mask:url(../images/logo.svg) no-repeat 0 0 / 100%;
  background: #fff;
}
#footer .txt_wrap {
  margin-left:60px;
}
#footer .txt_wrap .address {
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  line-height: 2;
}
#footer .txt_wrap .address .line {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.3);
  display: inline-block;
  margin: 0 10px;
  vertical-align: -1px;
}

#footer .txt_wrap .copyright {
  color:rgba(255,255,255,0.5);
  margin-top:20px;
  font-size: 15px;
}

#footer .link_wrap {
  position: absolute;
  right:0;
  top:32px;
  display: flex;
  gap: 0 20px;
}
#footer .link_wrap .inquiry_btn {
  width: 180px;
  line-height: 40px;
  background-color: #fff;
  color: var(--txt-color-500);
  border-radius: 5px;
  font-size: 16px;
  padding: 0 20px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
#footer .link_wrap .inquiry_btn::after {
  content: '';
  width: 7px;
  height: 12px;
  background: url(../images/arrow_link.svg) no-repeat 0 0 / 100%;
}

#footer .link_wrap .family_wrap {
  position: relative;
  width: 180px;
}
#footer .link_wrap .family_btn {
  width: 100%;
  height: 40px;
  border: none;
  background: #222;
  color: #fff;
  font-size: 16px;
  border: 1px solid rgba(255,255,255,0.5);
  text-align: left;
  padding: 0 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#footer .link_wrap .family_btn::after {
  content: '';
  width: 7px;
  height: 12px;
  -webkit-mask: url(../images/arrow_link.svg) no-repeat 0 0 / 100%;
  mask: url(../images/arrow_link.svg) no-repeat 0 0 /100%;
  background: rgba(255, 255 ,255 ,0.7);
  transition: all 0.2s;
  transform: rotate(90deg);
}
#footer .link_wrap .family_wrap.on .family_btn {
  border-radius: 0 0 5px 5px;
}
#footer .link_wrap .family_wrap.on .family_btn::after {
  transform: rotate(270deg);
}
#footer .link_wrap .family_wrap.on .family {
  max-height: 121px;
  opacity: 1;
  /* 마우스올렸을 때는 높이만 애니메이션 */
  transition: max-height 0.4s;
}

#footer .link_wrap .family {
  /* 마우스 빠질 때는 투명도0.4초 뒤에 0으로 변경 */
  transition: max-height 0.4s, opacity 0s 0.4s;
  position: absolute;
  left: 0;
  bottom: 40px;
  border: 1px solid rgba(255,255,255,0.5);
  border-bottom: none;
  width: 100%;
  background: #222;
  border-radius: 5px 5px 0 0;
  max-height: 0;
  overflow: hidden;
  /* 선은 바깥쪽에 있으므로 투명도 이용하여 안 보이게 처리 */
  opacity: 0;
}
#footer .link_wrap .family a {
  color: #fff;
  font-size: 15px;
  display: block;
  padding: 0 20px;
  line-height: 40px;
}

#footer .top_btn {
  position:fixed;
  right: 50px;
  bottom: 50px;
  width: 70px;
  height: 70px;
  background: #76CA9E url(../images/arrow_top.svg) no-repeat 50% 50%;
  border-radius: 50% ;
}

 

 

js


  // 푸터 패밀리버튼
  // #footer. family_btn 클릭시 family_wrap에 on 토글
  document
    .querySelector('#footer .family_btn')
    .addEventListener('click', function () {
      document.querySelector('#footer .family_wrap').classList.toggle('on');
    });

  // 푸터 탑버튼

  document
    .querySelector('#footer .top_btn')
    .addEventListener('click', function (e) {
      // a 태그 기본이벤트 막기
      e.preventDefault();

      let posY = document.querySelector('#header').offsetTop;

      window.scrollTo({
        top: posY,
        behavior: 'smooth',
      });
    });

 

 

 

 

 

 

저작자표시

'씹덕티스토리에코딩의등장이라' 카테고리의 다른 글

서브웨이 메인페이지  (0) 2024.04.15
유투바이오 메인 비주얼 부분들  (0) 2024.04.11
유투바이오(js동작)  (0) 2024.04.03
LG그룹 IR 정보 (테이블)  (0) 2024.04.01
자바스크립트  (0) 2024.04.01

관련글

댓글

티스토리툴바