html

<!-- 모바일에서 기기의 해상도 능력에 상관없이 절대적인 크기로 나오도록 -->
<!-- 예를들어, pc에서의 300px이 모바일 에서도 똑같은 크기로 나오도록 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 폰트어썸 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- 폰트어썸 FREE 아이콘 리스트 : https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free -->

<!-- 테일윈드 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 테일윈드 치트시트 : https://nerdcave.com/tailwind-cheat-sheet -->

<section class="section section-faq">
  <div class="container mx-auto">
    <h1>FAQ</h1>

    <div class="faq-box">
      <!-- 마크업 구조
      ul>li*10>div.faq-box__question>span{질문 $}^div.faq-box__answer>lorem*10
    -->
      <ul>
        <li>
          <div class="faq-box__question"><span>질문 1</span></div>
          <div class="faq-box__answer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Est aspernatur voluptates dolorum architecto, quam molestiae sint sunt minus quisquam. Consequatur voluptatibus recusandae nostrum illum facilis! Fugiat sint dolores placeat distinctio.
            Labore hic vero voluptas repellendus voluptatem voluptates animi magni ipsam, explicabo voluptatibus exercitationem. Ad quia nihil provident numquam, magnam laudantium impedit repudiandae, repellendus soluta molestiae quis dignissimos consectetur iste fuga!
            Quibusdam reiciendis obcaecati ipsam? Esse at voluptate, nam nulla quia suscipit. Exercitationem, quia. Similique sunt non architecto sint explicabo facere expedita quia cupiditate porro, blanditiis aspernatur vitae perferendis rem repudiandae.
            Assumenda fugit aliquid quia ipsum, labore sunt illum quis nulla dignissimos facilis ullam laboriosam voluptates aliquam voluptatem recusandae officiis mollitia, eaque voluptatibus voluptate nobis aut ratione eum nostrum distinctio. Voluptates!
            Optio ipsam consequuntur facilis numquam eligendi expedita, deleniti accusantium. Rerum minima atque praesentium quae tempora magni velit provident, sunt libero magnam temporibus nostrum eveniet, nisi dolore hic, officiis fugiat corporis!
            Laboriosam at, eius libero ducimus quaerat quisquam odit sint cupiditate harum beatae? Corporis nesciunt, nostrum earum pariatur reiciendis omnis iusto rem aliquid, saepe libero laudantium ipsam cumque perferendis a tempore.
            Enim, impedit. Voluptatem, consequatur distinctio explicabo cumque in laudantium dicta incidunt sint commodi assumenda inventore quae, aspernatur libero neque, eaque voluptates consectetur nihil possimus accusantium non molestiae. Corporis, fugiat nisi?
            Molestiae consequatur repellat quasi quas totam facere quidem distinctio tempora nihil suscipit cupiditate iste quisquam consequuntur, fuga delectus quod expedita vel, ipsam assumenda adipisci accusantium dolor? Nam eveniet adipisci sit.
            Ipsa, officia? Ad nihil dolores dolor similique aliquam ratione, accusamus esse molestias consequuntur minus neque totam iusto iste delectus. Optio nisi exercitationem quisquam! Accusantium pariatur voluptatum inventore vitae sint! Magni?
            Qui ex earum laborum enim hic aliquid quae, optio porro harum magnam commodi sapiente officia, facere aspernatur at, omnis a repudiandae sit debitis error molestiae in? Voluptas aperiam dolorum eius.
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 2</span></div>
          <div class="faq-box__answer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore fuga ratione illo fugit temporibus, hic quidem reiciendis atque, accusantium ab facilis minus autem beatae, quae veritatis ipsa. Vero, officia cum?
            Dignissimos nobis sint exercitationem fugiat voluptates eaque ullam in unde minima libero assumenda natus ratione, dolor quibusdam nemo ipsum mollitia quasi. Iste cumque tempora voluptatem dicta, soluta placeat perspiciatis quisquam!
            Aut quia totam maxime vero iusto deleniti dolore a rem inventore suscipit maiores soluta, cupiditate in veritatis alias! Similique voluptate, explicabo cupiditate quas assumenda id esse consequuntur libero eos eligendi?
            Et, assumenda molestias. Repellendus similique explicabo labore ab laudantium totam fugit, dolor esse inventore assumenda placeat? Fuga mollitia, facere impedit perferendis quam, explicabo blanditiis quaerat a vel, dignissimos architecto. Tempore!
            Ducimus vel quos ipsam alias fugiat cum inventore corrupti libero laboriosam adipisci repellat, consequuntur dolorem, iste accusantium facilis nesciunt aperiam dolores! Deserunt officiis molestiae possimus, nam qui neque soluta sed!
            Odio magni tempore voluptas libero ea iure consequatur labore expedita explicabo aspernatur rerum eum aliquid est quos nam, similique odit magnam vitae, repellat minima. Sunt doloribus iusto molestiae similique nam.
            Earum magni nisi est laborum magnam, nam architecto obcaecati eius corrupti eos enim maxime tempore dolor perspiciatis, atque iure odit saepe ipsa quis. Tenetur soluta quidem alias quibusdam eum ipsam.
            Possimus sequi saepe id voluptates obcaecati culpa in aliquid adipisci nulla iure! Perspiciatis amet molestias expedita cupiditate consequatur! Officia quibusdam error magnam facilis earum minus recusandae at pariatur possimus commodi.
            Autem magnam minus eum unde officia doloremque consectetur aliquam vel. Eaque minus ullam quia cum! Vitae molestiae magnam deserunt tempore placeat, hic non dolorum voluptas dolorem reprehenderit repudiandae corporis consectetur.
            Corrupti maxime error exercitationem minima beatae, cum magnam accusantium qui? Debitis cum, esse in nesciunt molestias illo numquam praesentium iure sapiente voluptas ipsa et, qui, obcaecati veniam consequatur ad quaerat.
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 3</span></div>
          <div class="faq-box__answer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi possimus ipsa tempore sapiente voluptatem, voluptate et alias provident aut iure, est molestias facilis rem temporibus! Illum mollitia sequi reprehenderit distinctio?
            Quod, quia omnis. Aliquid doloribus minima architecto quaerat et maxime sed similique odit odio sint quam unde iste quisquam repudiandae, modi explicabo praesentium sunt. Vel officia sapiente quo officiis? Maiores!
            Nostrum necessitatibus odit ab sequi enim quibusdam corporis sunt in maxime totam tempora ipsam vero quisquam sint hic aliquam harum dolore quas pariatur, ipsa sit? Nostrum ea doloribus totam nihil!
            Necessitatibus, iusto illum, consequuntur eveniet, eligendi nihil quidem optio incidunt perferendis similique provident excepturi cumque esse itaque modi. Soluta ratione labore fugiat possimus natus! Tempore praesentium vero aliquam est facere?
            Ducimus iste nihil hic in blanditiis odio culpa, corporis architecto nobis, molestiae sed. Corporis quia aperiam vitae adipisci aspernatur natus optio unde, dignissimos debitis tempora cum sunt ratione cumque temporibus.
            Architecto, fuga impedit blanditiis soluta atque, libero adipisci eos iure, obcaecati ipsa reprehenderit eaque deleniti expedita beatae qui laboriosam officiis quos! Iste alias adipisci soluta dolores officiis excepturi quis eos?
            A ratione placeat repellat minima odio harum! Sit ad explicabo corporis. Neque blanditiis delectus reprehenderit atque omnis consectetur dolorem ipsam labore cum, soluta minima voluptatem deleniti dignissimos obcaecati quos quis.
            Vitae nulla culpa deserunt exercitationem libero, molestias beatae mollitia repellat autem impedit possimus ipsa commodi. Nostrum hic quidem dolorem incidunt, consequuntur sed odio porro nemo, asperiores dolores rerum excepturi autem?
            Sit incidunt culpa numquam nam libero consectetur totam enim, nihil illum nobis, minima fugiat, sequi quo dignissimos ad tenetur dolores quibusdam natus odio sunt veritatis. Dolorem similique voluptatum praesentium. Corrupti.
            Corrupti qui libero illum error vitae temporibus magnam, nam assumenda quibusdam placeat, quo aspernatur quod at obcaecati id aperiam nesciunt iure perferendis! Doloremque eligendi neque dolores atque distinctio ullam ex.
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 4</span></div>
          <div class="faq-box__answer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi possimus ipsa tempore sapiente voluptatem, voluptate et alias provident aut iure, est molestias facilis rem temporibus! Illum mollitia sequi reprehenderit distinctio?
            Quod, quia omnis. Aliquid doloribus minima architecto quaerat et maxime sed similique odit odio sint quam unde iste quisquam repudiandae, modi explicabo praesentium sunt. Vel officia sapiente quo officiis? Maiores!
            Nostrum necessitatibus odit ab sequi enim quibusdam corporis sunt in maxime totam tempora ipsam vero quisquam sint hic aliquam harum dolore quas pariatur, ipsa sit? Nostrum ea doloribus totam nihil!
            Necessitatibus, iusto illum, consequuntur eveniet, eligendi nihil quidem optio incidunt perferendis similique provident excepturi cumque esse itaque modi. Soluta ratione labore fugiat possimus natus! Tempore praesentium vero aliquam est facere?
            Ducimus iste nihil hic in blanditiis odio culpa, corporis architecto nobis, molestiae sed. Corporis quia aperiam vitae adipisci aspernatur natus optio unde, dignissimos debitis tempora cum sunt ratione cumque temporibus.
            Architecto, fuga impedit blanditiis soluta atque, libero adipisci eos iure, obcaecati ipsa reprehenderit eaque deleniti expedita beatae qui laboriosam officiis quos! Iste alias adipisci soluta dolores officiis excepturi quis eos?
            A ratione placeat repellat minima odio harum! Sit ad explicabo corporis. Neque blanditiis delectus reprehenderit atque omnis consectetur dolorem ipsam labore cum, soluta minima voluptatem deleniti dignissimos obcaecati quos quis.
            Vitae nulla culpa deserunt exercitationem libero, molestias beatae mollitia repellat autem impedit possimus ipsa commodi. Nostrum hic quidem dolorem incidunt, consequuntur sed odio porro nemo, asperiores dolores rerum excepturi autem?
            Sit incidunt culpa numquam nam libero consectetur totam enim, nihil illum nobis, minima fugiat, sequi quo dignissimos ad tenetur dolores quibusdam natus odio sunt veritatis. Dolorem similique voluptatum praesentium. Corrupti.
            Corrupti qui libero illum error vitae temporibus magnam, nam assumenda quibusdam placeat, quo aspernatur quod at obcaecati id aperiam nesciunt iure perferendis! Doloremque eligendi neque dolores atque distinctio ullam ex.
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 5</span></div>
          <div class="faq-box__answer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi possimus ipsa tempore sapiente voluptatem, voluptate et alias provident aut iure, est molestias facilis rem temporibus! Illum mollitia sequi reprehenderit distinctio?
            Quod, quia omnis. Aliquid doloribus minima architecto quaerat et maxime sed similique odit odio sint quam unde iste quisquam repudiandae, modi explicabo praesentium sunt. Vel officia sapiente quo officiis? Maiores!
            Nostrum necessitatibus odit ab sequi enim quibusdam corporis sunt in maxime totam tempora ipsam vero quisquam sint hic aliquam harum dolore quas pariatur, ipsa sit? Nostrum ea doloribus totam nihil!
            Necessitatibus, iusto illum, consequuntur eveniet, eligendi nihil quidem optio incidunt perferendis similique provident excepturi cumque esse itaque modi. Soluta ratione labore fugiat possimus natus! Tempore praesentium vero aliquam est facere?
            Ducimus iste nihil hic in blanditiis odio culpa, corporis architecto nobis, molestiae sed. Corporis quia aperiam vitae adipisci aspernatur natus optio unde, dignissimos debitis tempora cum sunt ratione cumque temporibus.
            Architecto, fuga impedit blanditiis soluta atque, libero adipisci eos iure, obcaecati ipsa reprehenderit eaque deleniti expedita beatae qui laboriosam officiis quos! Iste alias adipisci soluta dolores officiis excepturi quis eos?
            A ratione placeat repellat minima odio harum! Sit ad explicabo corporis. Neque blanditiis delectus reprehenderit atque omnis consectetur dolorem ipsam labore cum, soluta minima voluptatem deleniti dignissimos obcaecati quos quis.
            Vitae nulla culpa deserunt exercitationem libero, molestias beatae mollitia repellat autem impedit possimus ipsa commodi. Nostrum hic quidem dolorem incidunt, consequuntur sed odio porro nemo, asperiores dolores rerum excepturi autem?
            Sit incidunt culpa numquam nam libero consectetur totam enim, nihil illum nobis, minima fugiat, sequi quo dignissimos ad tenetur dolores quibusdam natus odio sunt veritatis. Dolorem similique voluptatum praesentium. Corrupti.
            Corrupti qui libero illum error vitae temporibus magnam, nam assumenda quibusdam placeat, quo aspernatur quod at obcaecati id aperiam nesciunt iure perferendis! Doloremque eligendi neque dolores atque distinctio ullam ex.
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 6</span></div>
          <div class="faq-box__answer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi possimus ipsa tempore sapiente voluptatem, voluptate et alias provident aut iure, est molestias facilis rem temporibus! Illum mollitia sequi reprehenderit distinctio?
            Quod, quia omnis. Aliquid doloribus minima architecto quaerat et maxime sed similique odit odio sint quam unde iste quisquam repudiandae, modi explicabo praesentium sunt. Vel officia sapiente quo officiis? Maiores!
            Nostrum necessitatibus odit ab sequi enim quibusdam corporis sunt in maxime totam tempora ipsam vero quisquam sint hic aliquam harum dolore quas pariatur, ipsa sit? Nostrum ea doloribus totam nihil!
            Necessitatibus, iusto illum, consequuntur eveniet, eligendi nihil quidem optio incidunt perferendis similique provident excepturi cumque esse itaque modi. Soluta ratione labore fugiat possimus natus! Tempore praesentium vero aliquam est facere?
            Ducimus iste nihil hic in blanditiis odio culpa, corporis architecto nobis, molestiae sed. Corporis quia aperiam vitae adipisci aspernatur natus optio unde, dignissimos debitis tempora cum sunt ratione cumque temporibus.
            Architecto, fuga impedit blanditiis soluta atque, libero adipisci eos iure, obcaecati ipsa reprehenderit eaque deleniti expedita beatae qui laboriosam officiis quos! Iste alias adipisci soluta dolores officiis excepturi quis eos?
            A ratione placeat repellat minima odio harum! Sit ad explicabo corporis. Neque blanditiis delectus reprehenderit atque omnis consectetur dolorem ipsam labore cum, soluta minima voluptatem deleniti dignissimos obcaecati quos quis.
            Vitae nulla culpa deserunt exercitationem libero, molestias beatae mollitia repellat autem impedit possimus ipsa commodi. Nostrum hic quidem dolorem incidunt, consequuntur sed odio porro nemo, asperiores dolores rerum excepturi autem?
            Sit incidunt culpa numquam nam libero consectetur totam enim, nihil illum nobis, minima fugiat, sequi quo dignissimos ad tenetur dolores quibusdam natus odio sunt veritatis. Dolorem similique voluptatum praesentium. Corrupti.
            Corrupti qui libero illum error vitae temporibus magnam, nam assumenda quibusdam placeat, quo aspernatur quod at obcaecati id aperiam nesciunt iure perferendis! Doloremque eligendi neque dolores atque distinctio ullam ex.
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 7</span></div>
          <div class="faq-box__answer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi possimus ipsa tempore sapiente voluptatem, voluptate et alias provident aut iure, est molestias facilis rem temporibus! Illum mollitia sequi reprehenderit distinctio?
            Quod, quia omnis. Aliquid doloribus minima architecto quaerat et maxime sed similique odit odio sint quam unde iste quisquam repudiandae, modi explicabo praesentium sunt. Vel officia sapiente quo officiis? Maiores!
            Nostrum necessitatibus odit ab sequi enim quibusdam corporis sunt in maxime totam tempora ipsam vero quisquam sint hic aliquam harum dolore quas pariatur, ipsa sit? Nostrum ea doloribus totam nihil!
            Necessitatibus, iusto illum, consequuntur eveniet, eligendi nihil quidem optio incidunt perferendis similique provident excepturi cumque esse itaque modi. Soluta ratione labore fugiat possimus natus! Tempore praesentium vero aliquam est facere?
            Ducimus iste nihil hic in blanditiis odio culpa, corporis architecto nobis, molestiae sed. Corporis quia aperiam vitae adipisci aspernatur natus optio unde, dignissimos debitis tempora cum sunt ratione cumque temporibus.
            Architecto, fuga impedit blanditiis soluta atque, libero adipisci eos iure, obcaecati ipsa reprehenderit eaque deleniti expedita beatae qui laboriosam officiis quos! Iste alias adipisci soluta dolores officiis excepturi quis eos?
            A ratione placeat repellat minima odio harum! Sit ad explicabo corporis. Neque blanditiis delectus reprehenderit atque omnis consectetur dolorem ipsam labore cum, soluta minima voluptatem deleniti dignissimos obcaecati quos quis.
            Vitae nulla culpa deserunt exercitationem libero, molestias beatae mollitia repellat autem impedit possimus ipsa commodi. Nostrum hic quidem dolorem incidunt, consequuntur sed odio porro nemo, asperiores dolores rerum excepturi autem?
            Sit incidunt culpa numquam nam libero consectetur totam enim, nihil illum nobis, minima fugiat, sequi quo dignissimos ad tenetur dolores quibusdam natus odio sunt veritatis. Dolorem similique voluptatum praesentium. Corrupti.
            Corrupti qui libero illum error vitae temporibus magnam, nam assumenda quibusdam placeat, quo aspernatur quod at obcaecati id aperiam nesciunt iure perferendis! Doloremque eligendi neque dolores atque distinctio ullam ex.
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 8</span></div>
          <div class="faq-box__answer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi possimus ipsa tempore sapiente voluptatem, voluptate et alias provident aut iure, est molestias facilis rem temporibus! Illum mollitia sequi reprehenderit distinctio?
            Quod, quia omnis. Aliquid doloribus minima architecto quaerat et maxime sed similique odit odio sint quam unde iste quisquam repudiandae, modi explicabo praesentium sunt. Vel officia sapiente quo officiis? Maiores!
            Nostrum necessitatibus odit ab sequi enim quibusdam corporis sunt in maxime totam tempora ipsam vero quisquam sint hic aliquam harum dolore quas pariatur, ipsa sit? Nostrum ea doloribus totam nihil!
            Necessitatibus, iusto illum, consequuntur eveniet, eligendi nihil quidem optio incidunt perferendis similique provident excepturi cumque esse itaque modi. Soluta ratione labore fugiat possimus natus! Tempore praesentium vero aliquam est facere?
            Ducimus iste nihil hic in blanditiis odio culpa, corporis architecto nobis, molestiae sed. Corporis quia aperiam vitae adipisci aspernatur natus optio unde, dignissimos debitis tempora cum sunt ratione cumque temporibus.
            Architecto, fuga impedit blanditiis soluta atque, libero adipisci eos iure, obcaecati ipsa reprehenderit eaque deleniti expedita beatae qui laboriosam officiis quos! Iste alias adipisci soluta dolores officiis excepturi quis eos?
            A ratione placeat repellat minima odio harum! Sit ad explicabo corporis. Neque blanditiis delectus reprehenderit atque omnis consectetur dolorem ipsam labore cum, soluta minima voluptatem deleniti dignissimos obcaecati quos quis.
            Vitae nulla culpa deserunt exercitationem libero, molestias beatae mollitia repellat autem impedit possimus ipsa commodi. Nostrum hic quidem dolorem incidunt, consequuntur sed odio porro nemo, asperiores dolores rerum excepturi autem?
            Sit incidunt culpa numquam nam libero consectetur totam enim, nihil illum nobis, minima fugiat, sequi quo dignissimos ad tenetur dolores quibusdam natus odio sunt veritatis. Dolorem similique voluptatum praesentium. Corrupti.
            Corrupti qui libero illum error vitae temporibus magnam, nam assumenda quibusdam placeat, quo aspernatur quod at obcaecati id aperiam nesciunt iure perferendis! Doloremque eligendi neque dolores atque distinctio ullam ex.
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 9</span></div>
          <div class="faq-box__answer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi possimus ipsa tempore sapiente voluptatem, voluptate et alias provident aut iure, est molestias facilis rem temporibus! Illum mollitia sequi reprehenderit distinctio?
            Quod, quia omnis. Aliquid doloribus minima architecto quaerat et maxime sed similique odit odio sint quam unde iste quisquam repudiandae, modi explicabo praesentium sunt. Vel officia sapiente quo officiis? Maiores!
            Nostrum necessitatibus odit ab sequi enim quibusdam corporis sunt in maxime totam tempora ipsam vero quisquam sint hic aliquam harum dolore quas pariatur, ipsa sit? Nostrum ea doloribus totam nihil!
            Necessitatibus, iusto illum, consequuntur eveniet, eligendi nihil quidem optio incidunt perferendis similique provident excepturi cumque esse itaque modi. Soluta ratione labore fugiat possimus natus! Tempore praesentium vero aliquam est facere?
            Ducimus iste nihil hic in blanditiis odio culpa, corporis architecto nobis, molestiae sed. Corporis quia aperiam vitae adipisci aspernatur natus optio unde, dignissimos debitis tempora cum sunt ratione cumque temporibus.
            Architecto, fuga impedit blanditiis soluta atque, libero adipisci eos iure, obcaecati ipsa reprehenderit eaque deleniti expedita beatae qui laboriosam officiis quos! Iste alias adipisci soluta dolores officiis excepturi quis eos?
            A ratione placeat repellat minima odio harum! Sit ad explicabo corporis. Neque blanditiis delectus reprehenderit atque omnis consectetur dolorem ipsam labore cum, soluta minima voluptatem deleniti dignissimos obcaecati quos quis.
            Vitae nulla culpa deserunt exercitationem libero, molestias beatae mollitia repellat autem impedit possimus ipsa commodi. Nostrum hic quidem dolorem incidunt, consequuntur sed odio porro nemo, asperiores dolores rerum excepturi autem?
            Sit incidunt culpa numquam nam libero consectetur totam enim, nihil illum nobis, minima fugiat, sequi quo dignissimos ad tenetur dolores quibusdam natus odio sunt veritatis. Dolorem similique voluptatum praesentium. Corrupti.
            Corrupti qui libero illum error vitae temporibus magnam, nam assumenda quibusdam placeat, quo aspernatur quod at obcaecati id aperiam nesciunt iure perferendis! Doloremque eligendi neque dolores atque distinctio ullam ex.
          </div>
        </li>
        <li>
          <div class="faq-box__question"><span>질문 10</span></div>
          <div class="faq-box__answer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi possimus ipsa tempore sapiente voluptatem, voluptate et alias provident aut iure, est molestias facilis rem temporibus! Illum mollitia sequi reprehenderit distinctio?
            Quod, quia omnis. Aliquid doloribus minima architecto quaerat et maxime sed similique odit odio sint quam unde iste quisquam repudiandae, modi explicabo praesentium sunt. Vel officia sapiente quo officiis? Maiores!
            Nostrum necessitatibus odit ab sequi enim quibusdam corporis sunt in maxime totam tempora ipsam vero quisquam sint hic aliquam harum dolore quas pariatur, ipsa sit? Nostrum ea doloribus totam nihil!
            Necessitatibus, iusto illum, consequuntur eveniet, eligendi nihil quidem optio incidunt perferendis similique provident excepturi cumque esse itaque modi. Soluta ratione labore fugiat possimus natus! Tempore praesentium vero aliquam est facere?
            Ducimus iste nihil hic in blanditiis odio culpa, corporis architecto nobis, molestiae sed. Corporis quia aperiam vitae adipisci aspernatur natus optio unde, dignissimos debitis tempora cum sunt ratione cumque temporibus.
            Architecto, fuga impedit blanditiis soluta atque, libero adipisci eos iure, obcaecati ipsa reprehenderit eaque deleniti expedita beatae qui laboriosam officiis quos! Iste alias adipisci soluta dolores officiis excepturi quis eos?
            A ratione placeat repellat minima odio harum! Sit ad explicabo corporis. Neque blanditiis delectus reprehenderit atque omnis consectetur dolorem ipsam labore cum, soluta minima voluptatem deleniti dignissimos obcaecati quos quis.
            Vitae nulla culpa deserunt exercitationem libero, molestias beatae mollitia repellat autem impedit possimus ipsa commodi. Nostrum hic quidem dolorem incidunt, consequuntur sed odio porro nemo, asperiores dolores rerum excepturi autem?
            Sit incidunt culpa numquam nam libero consectetur totam enim, nihil illum nobis, minima fugiat, sequi quo dignissimos ad tenetur dolores quibusdam natus odio sunt veritatis. Dolorem similique voluptatum praesentium. Corrupti.
            Corrupti qui libero illum error vitae temporibus magnam, nam assumenda quibusdam placeat, quo aspernatur quod at obcaecati id aperiam nesciunt iure perferendis! Doloremque eligendi neque dolores atque distinctio ullam ex.
          </div>
        </li>
      </ul>
    </div>
  </div>
</section>

<!-- 폰트 -->
<style>
  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 400;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
  }

  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 700;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
  }

  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 300;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
  }

  html>body {
    font-family: 'LotteMartDream', sans-serif;
  }
</style>

css

.faq-box {
  border:2px solid black;
  background-color:#343434;;
  color:white;
  padding:10px;
}

/*질문에 가져다대면 포인터*/
.faq-box__question {
  cursor:pointer;
}

.faq-box__question::after {
  content:"[+]";
  float:right;
}/*질문의 after태그는 [+]*/

.faq-box > ul > li {
  padding:10px;
}

.faq-box > ul > li.hover > .faq-box__question::after {
  content:"[-]";
}/*클래스 hover가지고 있는 질문의 after태그는 [-]로*/

.faq-box__answer {
  display:none;
  background-color:#565656;
  border-radius:10px;
  padding:10px;
}

.faq-box > ul > li.hover > .faq-box__answer {
  display:block;
}/*원래는 none이었다가 hover추가되면 block으로*/

JS

function FaqBox__init() {
  $('.faq-box > ul > li').click(function() {
    let $this = $(this);
    
    /*제외한 형제들에게 클래스 제거*/
    $this.siblings('.hover').removeClass('hover');
    
    /*클래스 hover 토글*/
    if ( $this.hasClass('hover') ) {
      $this.removeClass('hover');
    }
    else {
      $this.addClass('hover');
    }
  });
  
  /*answer박스 클릭 비활성화*/
  $('.faq-box__answer').click(function() {
    return false;
  });
}

FaqBox__init();

질의 응답 박스를 만들었다. 이제부터 제이쿼리의 라이브러리 함수를 이용해서 애니메이션을 부여해보자.

show(), hide()

$(selector).show();
$(selector).hide();

이렇게 사용하고

function FaqBox__init() {
  $('.faq-box > ul > li').click(function() {
    let $this = $(this);
    
    $this.siblings('.hover').find(' > .faq-box__answer').hide();
    /*전에 열었던 창을 닫기 위해서 클릭하면 다 닫는다.*/
    $this.siblings('.hover').removeClass('hover');;
    /*제외한 형제들에게 클래스 제거*/
    
    if ( $this.hasClass('hover') ) {
      $this.find(' > .faq-box__answer').hide(); // hover를 가지고 있으면 숨긴다.
      $this.removeClass('hover');
    }
    else {
      $this.find(' > .faq-box__answer').show(); // hover를 가지고 있으면 나타낸다.
      $this.addClass('hover');
    }
  });
  
  /*answer박스 클릭 비활성화*/
  $('.faq-box__answer').click(function() {
    return false;
  });
}

FaqBox__init();

따로 클래스를 추가해서 display:block;으로 바꿔주지 않더라도 두 함수로 모두 해결할 수 있다.

함수의 매개변수자리에 ms단위로 초를 부여해서 실행속도를 조절할 수 있다.

slideUp(), slideDown()

$(selector).slideUp("실행속도", 콜백함수);
$(selector).slideDown("실행속도", 콜백함수);

이 함수는 슬라이드하면서 나타나고 없어지게 하는 effect함수이다.

function FaqBox__init() {
  $('.faq-box > ul > li').click(function() {
    let $this = $(this);
    
    $this.siblings('.hover').find(' > .faq-box__answer').slideUp(); 
    $this.siblings('.hover').removeClass('hover');;
    
    if ( $this.hasClass('hover') ) {
      $this.find(' > .faq-box__answer').slideUp(); 
      $this.removeClass('hover');
    }
    else {
      $this.find(' > .faq-box__answer').slideDown();
      $this.addClass('hover');
    }
  });
  
  /*answer박스 클릭 비활성화*/
  $('.faq-box__answer').click(function() {
    return false;
  });
}

FaqBox__init();

fadeIn(), fadeOut()

$(selector).fadeIn("실행속도", 콜백함수);
$(selector).fadeOut("실행속도", 콜백함수);

이 함수는 fade효과를 주는 effect함수 이다.

function FaqBox__init() {
  $('.faq-box > ul > li').click(function() {
    let $this = $(this);
    
    $this.siblings('.hover').find(' > .faq-box__answer').fadeOut(); 
    $this.siblings('.hover').removeClass('hover');;
    
    if ( $this.hasClass('hover') ) {
      $this.find(' > .faq-box__answer').fadeOut(); 
      $this.removeClass('hover');
    }
    else {
      $this.find(' > .faq-box__answer').fadeIn();
      $this.addClass('hover');
    }
  });
  
  /*answer박스 클릭 비활성화*/
  $('.faq-box__answer').click(function() {
    return false;
  });
}

FaqBox__init();

애니메이션 큐 제거

기본적으로 이 함수의 애니메이션은 큐라는 방식으로 동작하는데 쉽게 말해 선입선출이다. 클릭하면 그 애니메이션을 다 실행해야 다음 클릭에 해당하는 애니메이션을 작동시킨다. (다른 방식으로는 스택이 있다. - 후입선출)

질문을 연속해서 빠르게 클릭해보자. 10번은 빠르게 클릭한다면 즉각적으로 그 클릭 애니메이션을 재생하는 것이 아닌 전 애니메이션을 완료한 후에야 다음 애니메이션을 작동시키고 10번을 반복한다.

큐를 제거하는 방식에는 stop()함수가 있다.

$(selector).stop();
$(selector).stop(clearQueue);
$(selector).stop(clearQueue, goToEnd);

매개변수 자리에는 true, false값이 들어가고
첫 번째 매개 변수인 clearQueue를 true로 설정하면 남아있던 큐를 제거한다. 두 번째 매개 변수인 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 효과를 지정한 최종 형태에서 멈추게 된다. 인자가 없다면 default로 false값을 입력한 것으로 간주한다.

기본적으로 stop()함수는 애니메이션을 중단시키기 때문에 완료된 상태로 큐를 제거하고 싶다면 clearQue()라는 함수를 사용해야한다(참고: https://webclub.tistory.com/461)

이것을 이용하여 큐가 쌓이지 않고 클릭할 때마다 그 자리에서 애니메이션을 다시 실행하도록 만들어보자.

function FaqBox__init() {
  $('.faq-box > ul > li').click(function() {
    let $this = $(this);
    
    $this.siblings('.hover').find(' > .faq-box__answer').stop().slideUp(300); // 추가
    $this.siblings('.hover').removeClass('hover');
    
    if ( $this.hasClass('hover') ) {
      $this.find(' > .faq-box__answer').stop().slideUp(300); 
      $this.removeClass('hover');
    }
    else {
      $this.find(' > .faq-box__answer').stop().slideDown(300); // 추가
      $this.addClass('hover');
    }
  });
  
  $('.faq-box__answer').click(function() {
    return false;
  });
}

FaqBox__init();