{"id":857,"date":"2026-06-26T13:39:03","date_gmt":"2026-06-26T13:39:03","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=857"},"modified":"2026-06-26T13:39:03","modified_gmt":"2026-06-26T13:39:03","slug":"activemenu","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=857","title":{"rendered":"activeMenu"},"content":{"rendered":"

1. \uba54\ub274\ud65c\uc131\ud654<\/h2>\n

1.1. \ub2e8\uacc41-\uc0c1\ub2e8\uba54\ub274<\/h3>\n

1.1.1. \uc2a4\ud2f0\ud0a4<\/h4>\n

\uc608\uc81c<\/h4>\n
[\ubbf8\ub9ac\ubcf4\uae30](https:\/\/qwerewqwerew.github.io\/source\/jq\/9)\n<\/code><\/pre>\n
HTML<\/h4>\n
  <!DOCTYPE html>\n  <html lang="ko">\n    <head>\n      <meta charset="UTF-8" \/>\n      <meta http-equiv="X-UA-Compatible" content="IE=edge" \/>\n      <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n      <title>Document<\/title>\n      <meta property="og:title" content="\ubc1c\uc804\ud558\ub294 \uc2e0\uc785 \ud37c\ube14\ub9ac\uc154 \ub9dd\uace0\uc758 \ud3ec\ud2b8\ud3f4\ub9ac\uc624\uc785\ub2c8\ub2e4" \/>\n      <meta property="og:url" content="http:\/\/www.mango.dothome.co.kr" \/>\n      <meta property="og:type" content="website" \/>\n      \n      <meta property="og:site_name" content="\ub9dd\uace0\uc758 \ud3ec\ud2b8\ud3f4\ub9ac\uc624" \/>\n      <meta property="og:description" content="\uc624\ub298\ubcf4\ub2e4\ub294 \ub0b4\uc77c \ub354 \uc131\uc7a5\ud558\ub294 \uac83\uc774 \ubaa9\ud45c\uc778 \ud37c\ube14\ub9ac\uc154\uc758 \ud3ec\ud2b8\ud3f4\ub9ac\uc624\uc785\ub2c8\ub2e4." \/>\n      <meta name="twitter:card" content="summary" \/>\n      <meta name="twitter:title" content="\ubc1c\uc804\ud558\ub294 \uc2e0\uc785 \ud37c\ube14\ub9ac\uc154 \ub9dd\uace0\uc758 \ud3ec\ud2b8\ud3f4\ub9ac\uc624\uc785\ub2c8\ub2e4" \/>\n      <meta name="twitter:description" content="\uc624\ub298\ubcf4\ub2e4\ub294 \ub0b4\uc77c \ub354 \uc131\uc7a5\ud558\ub294 \uac83\uc774 \ubaa9\ud45c\uc778 \ud37c\ube14\ub9ac\uc154\uc758 \ud3ec\ud2b8\ud3f4\ub9ac\uc624\uc785\ub2c8\ub2e4." \/>\n      \n      <link rel="stylesheet" href="css\/reset.css" \/>\n      <link rel="stylesheet" href="css\/style.css" \/>\n    <\/head>\n\n    <body>\n      <nav>\n        <ul class="gnb">\n          <li class="on"><a href="#section1">section1<\/a><\/li>\n          <li><a href="#section2">section2<\/a><\/li>\n          <li><a href="#section3">section3<\/a><\/li>\n          <li><a href="#section4">section4<\/a><\/li>\n          <li><a href="#section5">section5<\/a><\/li>\n          <li><a href="#section6">section6<\/a><\/li>\n          <li><a href="#section7">section7<\/a><\/li>\n          <li><a href="#section8">section8<\/a><\/li>\n          <li><a href="#section9">section9<\/a><\/li>\n        <\/ul>\n      <\/nav>\n      <ul class="sideNav">\n        <li class="on"><a href="#section1">section1<\/a><\/li>\n        <li><a href="#section2">section2<\/a><\/li>\n        <li><a href="#section3">section3<\/a><\/li>\n        <li><a href="#section4">section4<\/a><\/li>\n        <li><a href="#section5">section5<\/a><\/li>\n        <li><a href="#section6">section6<\/a><\/li>\n        <li><a href="#section7">section7<\/a><\/li>\n        <li><a href="#section8">section8<\/a><\/li>\n        <li><a href="#section9">section9<\/a><\/li>\n      <\/ul>\n      <main class="container">\n        <section class="section" id="section1">section1<\/section>\n        <section class="section" id="section2">section2<\/section>\n        <section class="section" id="section3">\n          <div class="ball">ball<\/div>\n          section3\n        <\/section>\n        <section class="section" id="section4">section4<\/section>\n        <section class="section" id="section5">section5<\/section>\n        <section class="section" id="section6">section6<\/section>\n        <section class="section" id="section7">section7<\/section>\n        <section class="section" id="section8">section8<\/section>\n        <section class="section" id="section9">section9<\/section>\n      <\/main>\n      <script src="https:\/\/code.jquery.com\/jquery-1.12.0.js"><\/script>\n      <script src="https:\/\/code.jquery.com\/ui\/1.12.0\/jquery-ui.js"><\/script>\n      <script src="jq.js"><\/script>\n    <\/body>\n  <\/html>\n<\/code><\/pre>\n
CSS<\/h4>\n
[reset\ub2e4\uc6b4\ub85c\ub4dc](https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/)\n\n```css\n  @charset 'UTF-8';\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Black+And+White+Picture&family=Noto+Sans+KR:wght@100; 300; 400; 500; 700; 900&display=swap');\n  html {\n    overflow-x: hidden;\n  }\n  html,\n  body,\n  a,\n  table {\n    font-family: 'Black And White Picture', sans-serif;\n    font-family: 'Noto Sans KR', sans-serif;\n  }\n  ul,\n  li,\n  ol {\n    list-style: none;\n  }\n  a {\n    text-decoration: none;\n  }\n\n  body::-webkit-scrollbar {\n    width: 1em;\n    background-color: red;\n    background-image: repeating-conic-gradient(#474bff 0% 25%, #47d3ff 0% 50%);\n    background-position: 0 0, 38px 38px;\n    background-size: 46px 76px;\n    background-color: #47d3ff;\n  }\n  body::-webkit-scrollbar-thumb {\n  }\n  body::-webkit-scrollbar-button {\n    width: 3em;\n    height: 3em;\n    background-color: #282972;\n    box-shadow: 1px 1px 3px #000;\n  }\n  body::-webkit-scrollbar-thumb {\n    width: 10em;\n    height: 10em;\n    background-color: #47d3ff;\n    background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);\n    border-radius: 3px 0 0 3px;\n    box-shadow: 1px 1px 4px #000;\n  }\n  \/* nav *\/\n  nav {\n    position: absolute;\n    top: 0;\n    z-index: 2;\n    background: rgba(0, 0, 0, 0.4);\n    padding: 1em 1.4em;\n    width: 100%;\n  }\n  nav.sticky {\n    background: rgba(255, 0, 100, 0.6);\n    position: fixed;\n    z-index: 222;\n  }\n  nav .gnb {\n    display: flex;\n    width: 100%;\n    max-width: 1600px;\n    margin: auto;\n  }\n  nav .gnb li {\n    flex: 1 1 200px;\n  }\n  nav .gnb li a {\n    color: #fff;\n    display: inline-block;\n    padding: 0.2rem;\n    text-align: center;\n    line-height: 2rem;\n    height: 2rem;\n    position: relative;\n  }\n  nav .gnb li a:before,\n  nav .gnb li a:after {\n    position: absolute;\n    content: '';\n    left: 0;\n    width: 100%;\n    height: 2px;\n    background: #000;\n    transform: scaleX(0);\n    transition: all 0.5s;\n  }\n  nav .gnb li a:before {\n    top: 0;\n    transform-origin: left;\n  }\n  .gnb li a:after {\n    bottom: 0;\n    transform-origin: right;\n  }\n  nav .gnb li.on a:before,\n  nav .gnb li a:hover:before,\n  nav .gnb li.on a:after,\n  nav .gnb li a:hover:after {\n    transform: scaleX(1);\n  }\n  .container {\n  }\n  section {\n    min-height: 100vh;\n    line-height: 100vh;\n    text-align: center;\n    background-color: yellow;\n    margin: 40vw auto;\n  }\n  section::selection {\n    color: red;\n    background-color: #00eeff;\n  }\n\n  \/* sideNav  *\/\n  .sideNav {\n    position: fixed;\n    top: 10%;\n    right: 10%;\n    z-index: 999;\n  }\n  .sideNav a {\n    display: inline-block;\n    padding: 1em;\n    background: rgba(0, 0, 0, 0.5);\n    color: #fff;\n    margin-bottom: 1em;\n  }\n  .sideNav li.on a::before {\n    content: '\ud83d\ude3a';\n  }\n\n  \/* sectionIn *\/\n  section {\n    position: relative;\n  }\n  section .ball {\n    position: absolute;\n    background-color: skyblue;\n    width: 450px;\n    height: 450px;\n    border-radius: 50%;\n    left: -450px;\n    transition: left 1s;\n  }\n  section.on .ball {\n    left: 100px;\n  }\n```\n<\/code><\/pre>\n
JQ<\/h4>\n
```js\n  let win = $(window),\n    sections = $('.section'),\n    gnb = $('.gnb li'),\n    sideNav = $('.sideNav>li');\n\n  const gnbOff = () => {\n    gnb.each(() => {\n      this.removeClass('on');\n    });\n  };\n\n  gnb.click(function (e) {\n    e.preventDefault();\n    let tg = $(this);\n    let index = tg.index();\n    let section = sections.eq(index);\n    let offset = section.offset().top;\n    $('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');\n  });\n  sideNav.click(function (e) {\n    e.preventDefault();\n    let tg = $(this);\n    let index = tg.index();\n    let section = sections.eq(index);\n    let offset = section.offset().top;\n    $('html,body').stop().animate({ scrollTop: offset }, 1000, 'easeOutCirc');\n  });\n\n  win.scroll(function () {\n    let sct = win.scrollTop();\n    sections.each(function (i) {\n      if (sct >= sections.eq(i).offset().top - 300) {\n        $('.gnb li').eq(i).addClass('on').siblings().removeClass('on');\n        sideNav.eq(i).addClass('on').siblings().removeClass('on');\n        sections.eq(i).addClass('on').siblings().removeClass('on');\n      }\n    });\n    sct > 400 ? $('nav').addClass('sticky') : $('nav').removeClass('sticky');\n  });\n```\n<\/code><\/pre>\n
JS<\/h4>\n
```js\nlet win = window,\n  winSct,\n  sections = document.querySelectorAll('.section'),\n  gnb = document.querySelectorAll('.gnb li'),\n  sideNav = document.querySelectorAll('.sideNav>li');\n\nconst gnbOff = () => {\n  gnb.forEach((o) => {\n    o.classList.remove('on');\n  });\n};\nconst navOff = () => {\n  sideNav.forEach((o) => {\n    o.classList.remove('on');\n  });\n};\n\ngnb.forEach((el) => {\n  el.addEventListener('click', function (e) {\n    e.preventDefault();\n    document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });\n    gnbOff();\n    el.classList.add('on');\n  });\n});\nsideNav.forEach((el) => {\n  el.addEventListener('click', function (e) {\n    e.preventDefault();\n    document.querySelector(el.firstChild.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });\n    navOff();\n    el.classList.add('on');\n  });\n});\n\nwin.addEventListener('scroll', function (e) {\n  e.preventDefault();\n  winSct = this.scrollY;\n  winSct >= 400 ? document.querySelector('nav').classList.add('sticky') : document.querySelector('nav').classList.remove('sticky');\n  scrollOn(winSct);\n});\n\nconst scrollOn = (sct) => {\n  if (sct >= sections[0].offsetTop - 300) {\n    gnbOff();\n    navOff();\n    document.querySelector('.gnb li:nth-child(1)').classList.add('on');\n    document.querySelector('.sideNav li:nth-child(1)').classList.add('on');\n    sections[0].classList.add('on');\n  }\n  if (sct >= sections[1].offsetTop - 300) {\n    gnbOff();\n    navOff();\n    document.querySelector('.gnb li:nth-child(2)').classList.add('on');\n    document.querySelector('.sideNav li:nth-child(2)').classList.add('on');\n    sections[1].classList.add('on');\n  }\n  if (sct >= sections[2].offsetTop - 700) {\n    gnbOff();\n    navOff();\n    document.querySelector('.gnb li:nth-child(3)').classList.add('on');\n    document.querySelector('.sideNav li:nth-child(3)').classList.add('on');\n    sections[2].classList.add('on');\n  }\n  if (sct >= sections[3].offsetTop - 300) {\n    gnbOff();\n    navOff();\n    document.querySelector('.gnb li:nth-child(4)').classList.add('on');\n    document.querySelector('.sideNav li:nth-child(4)').classList.add('on');\n  }\n  if (sct >= sections[4].offsetTop - 300) {\n    gnbOff();\n    navOff();\n    document.querySelector('.gnb li:nth-child(5)').classList.add('on');\n    document.querySelector('.sideNav li:nth-child(5)').classList.add('on');\n  }\n  if (sct >= sections[5].offsetTop - 300) {\n    gnbOff();\n    navOff();\n    document.querySelector('.gnb li:nth-child(6)').classList.add('on');\n    document.querySelector('.sideNav li:nth-child(6)').classList.add('on');\n  }\n  if (sct >= sections[6].offsetTop - 300) {\n    gnbOff();\n    navOff();\n    document.querySelector('.gnb li:nth-child(7)').classList.add('on');\n    document.querySelector('.sideNav li:nth-child(7)').classList.add('on');\n  }\n  if (sct >= sections[7].offsetTop - 300) {\n    gnbOff();\n    navOff();\n    document.querySelector('.gnb li:nth-child(8)').classList.add('on');\n    document.querySelector('.sideNav li:nth-child(8)').classList.add('on');\n  }\n  if (sct >= sections[8].offsetTop - 300) {\n    gnbOff();\n    navOff();\n    document.querySelector('.gnb li:nth-child(9)').classList.add('on');\n    document.querySelector('.sideNav li:nth-child(2)').classList.add('on');\n  }\n};\n<\/code><\/pre>\n
\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
1. \uba54\ub274\ud65c\uc131\ud654 1.1. \ub2e8\uacc41-\uc0c1\ub2e8\uba54\ub274 1.1.1. \uc2a4\ud2f0\ud0a4 \uc608\uc81c [\ubbf8\ub9ac\ubcf4\uae30](https:\/\/qwerewqwerew.github.io\/source\/jq\/9) HTML <!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>Document<\/title> <meta property="og:title" content="\ubc1c\uc804\ud558\ub294 \uc2e0\uc785 \ud37c\ube14\ub9ac\uc154 \ub9dd\uace0\uc758 \ud3ec\ud2b8\ud3f4\ub9ac\uc624\uc785\ub2c8\ub2e4" \/> <meta property="og:url" content="http:\/\/www.mango.dothome.co.kr" \/> <meta property="og:type" content="website" \/> <meta property="og:site_name" content="\ub9dd\uace0\uc758 \ud3ec\ud2b8\ud3f4\ub9ac\uc624" \/> <meta property="og:description" content="\uc624\ub298\ubcf4\ub2e4\ub294 \ub0b4\uc77c \ub354 \uc131\uc7a5\ud558\ub294 \uac83\uc774 … \ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-857","post","type-post","status-publish","format-standard","hentry","category-html-css-ui"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=857"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/857\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}