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

1. \uc544\ucf54\ub514\uc5b8\uba54\ub274<\/h1>\n

\uac00\ubcc0\ub192\uc774\uc758 \uc544\ucf54\ub514\uc5b8 \uba54\ub274 \ub9cc\ub4e4\uc5b4\ubcf4\uc790<\/p>\n

1.1. \uc81c\uc774\ucffc\ub9ac<\/h2>\n

\uc9c0\uc2dc\ubb38<\/h4>\n

\ud22c\ub381\uc2a4\uc758 \ub192\uc774\ub97c \uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \uac00\ubcc0\uc801\uc73c\ub85c \uc870\uc791\ud558\ub294 \uc544\ucf54\ub514\uc5b8 \uba54\ub274\ub97c \ub9cc\ub4e4\uc5b4\ubd05\uc2dc\ub2e4.<\/p>\n

HTML<\/h4>\n
<!DOCTYPE html>\n<html lang="ko">\n  <head>\n    <meta charset="UTF-8" \/>\n    <title>Document<\/title>\n  <\/head>\n\n  <body>\n    <ul class="gnb">\n      <li>\n        <a href="#">\ud68c\uc0ac\uc18c\uac1c<\/a>\n        <ul class="sub">\n          <li><a href="#">submenu1<\/a><\/li>\n          <li><a href="#">submenu2<\/a><\/li>\n          <li><a href="#">submenu3<\/a><\/li>\n          <li><a href="#">submenu4<\/a><\/li>\n          <li><a href="#">submenu5<\/a><\/li>\n        <\/ul>\n      <\/li>\n      <li>\n        <a href="#">\uc81c\ud488\uc18c\uac1c<\/a>\n        <ul class="sub">\n          <li><a href="#">submenu1<\/a><\/li>\n          <li><a href="#">submenu2<\/a><\/li>\n          <li><a href="#">submenu3<\/a><\/li>\n          <li><a href="#">submenu4<\/a><\/li>\n          <li><a href="#">submenu5<\/a><\/li>\n          <li><a href="#">submenu6<\/a><\/li>\n          <li><a href="#">submenu7<\/a><\/li>\n        <\/ul>\n      <\/li>\n      <li>\n        <a href="#">\ucee4\ubba4\ub2c8\ud2f0<\/a>\n        <ul class="sub">\n          <li><a href="#">submenu1<\/a><\/li>\n          <li><a href="#">submenu2<\/a><\/li>\n          <li><a href="#">submenu3<\/a><\/li>\n        <\/ul>\n      <\/li>\n      <li>\n        <a href="#">\ub2e4\uc6b4\ub85c\ub4dc<\/a>\n        <ul class="sub">\n          <li><a href="#">submenu1<\/a><\/li>\n          <li><a href="#">submenu2<\/a><\/li>\n        <\/ul>\n      <\/li>\n    <\/ul>\n    <script src="https:\/\/code.jquery.com\/jquery-3.7.1.min.js"><\/script>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n
CSS<\/h4>\n
* {\n  margin: 0;\n  padding: 0;\n}\n\nhtml {\n  font-size: 62.5%;\n}\n\nbody {\n  font-size: 1.6rem;\n}\n\na {\n  text-decoration: none;\n}\n\nul,\nli {\n  list-style: none;\n}\n\n.gnb {\n  width: 20rem;\n  margin: 2rem auto 0;\n  text-align: center;\n  text-indent: 1rem;\n}\n\n.gnb > li > a {\n  display: block;\n  background: #390;\n  cursor: pointer;\n  line-height: 3rem;\n  border-top: 0.1rem dotted #fff;\n  color: #fff;\n}\n\n.gnb .sub li {\n  line-height: 3rem;\n  background: #cf9;\n  padding: 1rem;\n}\n\n.gnb .sub li a {\n  display: block;\n  width: 100%;\n  height: 100%;\n  color: #222;\n}\n\n.gnb .sub li:hover {\n  background: #cf0;\n}\n\n.sub {\n  height: 0;\n  transition: height 0.5s;\n  overflow: hidden;\n}\n<\/code><\/pre>\n
JQ<\/h4>\n
$(() => {\n  $('.gnb>li').click(function () {\n    let tg = $(this);\n    let subH = $('.sub>li').innerHeight();\n    let subLen = tg.find('li>a').length;\n    let subTH = subH * subLen;\n    $('.sub').removeClass('on').outerHeight(0);\n    tg.find('.sub').addClass('on').outerHeight(subTH);\n  });\n});\n<\/code><\/pre>\n
1.2. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8<\/h2>\n
\uc9c0\uc2dc\ubb38<\/h4>\n
\ud22c\ub381\uc2a4\uc758 \ub192\uc774\ub97c \uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \uac00\ubcc0\uc801\uc73c\ub85c \uc870\uc791\ud558\ub294 \uc544\ucf54\ub514\uc5b8 \uba54\ub274\ub97c \ub9cc\ub4e4\uc5b4\ubd05\uc2dc\ub2e4.<\/p>\n
HTML<\/h4>\n
<!DOCTYPE html>\n<html lang="ko">\n  <head>\n    <meta charset="UTF-8" \/>\n    <title>Document<\/title>\n  <\/head>\n\n  <body>\n    <ul class="gnb">\n      <li>\n        <a href="#">\ud68c\uc0ac\uc18c\uac1c<\/a>\n        <ul class="sub">\n          <li><a href="#">submenu1<\/a><\/li>\n          <li><a href="#">submenu2<\/a><\/li>\n          <li><a href="#">submenu3<\/a><\/li>\n          <li><a href="#">submenu4<\/a><\/li>\n          <li><a href="#">submenu5<\/a><\/li>\n        <\/ul>\n      <\/li>\n      <li>\n        <a href="#">\uc81c\ud488\uc18c\uac1c<\/a>\n        <ul class="sub">\n          <li><a href="#">submenu1<\/a><\/li>\n          <li><a href="#">submenu2<\/a><\/li>\n          <li><a href="#">submenu3<\/a><\/li>\n          <li><a href="#">submenu4<\/a><\/li>\n          <li><a href="#">submenu5<\/a><\/li>\n          <li><a href="#">submenu6<\/a><\/li>\n          <li><a href="#">submenu7<\/a><\/li>\n        <\/ul>\n      <\/li>\n      <li>\n        <a href="#">\ucee4\ubba4\ub2c8\ud2f0<\/a>\n        <ul class="sub">\n          <li><a href="#">submenu1<\/a><\/li>\n          <li><a href="#">submenu2<\/a><\/li>\n          <li><a href="#">submenu3<\/a><\/li>\n        <\/ul>\n      <\/li>\n      <li>\n        <a href="#">\ub2e4\uc6b4\ub85c\ub4dc<\/a>\n        <ul class="sub">\n          <li><a href="#">submenu1<\/a><\/li>\n          <li><a href="#">submenu2<\/a><\/li>\n        <\/ul>\n      <\/li>\n    <\/ul>\n    <script src="https:\/\/code.jquery.com\/jquery-3.7.1.min.js"><\/script>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n
CSS<\/h4>\n
* {\n  margin: 0;\n  padding: 0;\n}\n\nhtml {\n  font-size: 62.5%;\n}\n\nbody {\n  font-size: 1.6rem;\n}\n\na {\n  text-decoration: none;\n}\n\nul,\nli {\n  list-style: none;\n}\n\n.gnb {\n  width: 20rem;\n  margin: 2rem auto 0;\n  text-align: center;\n  text-indent: 1rem;\n}\n\n.gnb > li > a {\n  display: block;\n  background: #390;\n  cursor: pointer;\n  line-height: 3rem;\n  border-top: 0.1rem dotted #fff;\n  color: #fff;\n}\n\n.gnb .sub li {\n  line-height: 3rem;\n  background: #cf9;\n  padding: 1rem;\n}\n\n.gnb .sub li a {\n  display: block;\n  width: 100%;\n  height: 100%;\n  color: #222;\n}\n\n.gnb .sub li:hover {\n  background: #cf0;\n}\n\n.sub {\n  height: 0;\n  transition: height 0.5s;\n  overflow: hidden;\n}\n<\/code><\/pre>\n
JQ<\/h4>\n
$(() => {\n  $('.gnb>li').click(function () {\n    let tg = $(this);\n    let subH = $('.sub>li').innerHeight();\n    let subLen = tg.find('li>a').length;\n    let subTH = subH * subLen;\n    $('.sub').removeClass('on').outerHeight(0);\n    tg.find('.sub').addClass('on').outerHeight(subTH);\n  });\n});\n<\/code><\/pre>\n
JS<\/h4>\n
const depth1 = document.querySelectorAll('.gnb>li');\nconst sub = document.querySelectorAll('.sub');\ndepth1.forEach((el, idx) => {\n  el.addEventListener('click', function () {\n    let tg = this;\n    let subH = document.querySelector('.sub>li').clientHeight;\n    let subLen = tg.children[1].childElementCount;\n    let subHT = subH * subLen;\n    console.log(subHT);\n    tg.querySelector('.sub').classList.remove('on');\n    subOff();\n    tg.querySelector('.sub').style.height = subHT + 'px';\n  });\n});\nfunction subOff() {\n  sub.forEach((el) => {\n    el.classList.remove('on');\n    el.style.height = 0;\n  });\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
1. \uc544\ucf54\ub514\uc5b8\uba54\ub274 \uac00\ubcc0\ub192\uc774\uc758 \uc544\ucf54\ub514\uc5b8 \uba54\ub274 \ub9cc\ub4e4\uc5b4\ubcf4\uc790 1.1. \uc81c\uc774\ucffc\ub9ac \uc9c0\uc2dc\ubb38 \ud22c\ub381\uc2a4\uc758 \ub192\uc774\ub97c \uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \uac00\ubcc0\uc801\uc73c\ub85c \uc870\uc791\ud558\ub294 \uc544\ucf54\ub514\uc5b8 \uba54\ub274\ub97c \ub9cc\ub4e4\uc5b4\ubd05\uc2dc\ub2e4. HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" \/> <title>Document<\/title> <\/head> <body> <ul class="gnb"> <li> <a href="#">\ud68c\uc0ac\uc18c\uac1c<\/a> <ul class="sub"> <li><a href="#">submenu1<\/a><\/li> <li><a href="#">submenu2<\/a><\/li> <li><a href="#">submenu3<\/a><\/li> <li><a href="#">submenu4<\/a><\/li> <li><a href="#">submenu5<\/a><\/li> <\/ul> <\/li> <li> <a href="#">\uc81c\ud488\uc18c\uac1c<\/a> <ul class="sub"> <li><a href="#">submenu1<\/a><\/li> … \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-855","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\/855","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=855"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/855\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}