찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >FAQ 아코디언 웹사이트 구축

FAQ 아코디언 웹사이트 구축

WBOY
WBOY원래의
2024-09-03 13:33:41701검색

Build a FAQ Accordion Website

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 FAQ Accordion 웹 애플리케이션을 공유하게 되어 기쁩니다. 이 프로젝트는 웹사이트에 대화형이며 사용자 친화적인 FAQ 섹션을 만들려는 사람들에게 적합합니다. 다양한 애플리케이션에서 사용할 수 있는 실용적인 구성 요소를 구축하면서 HTML, CSS, JavaScript를 사용하여 프런트엔드 개발 기술을 향상시킬 수 있는 좋은 방법입니다.

프로젝트 개요

FAQ 아코디언은 자주 묻는 질문을 확장 및 축소 가능한 형식으로 표시하도록 제작된 웹 애플리케이션입니다. 깔끔하고 현대적인 디자인으로 사용자가 질문을 클릭하면 해당 답변이 표시됩니다. 이 프로젝트는 콘텐츠에 쉽게 접근할 수 있도록 하여 사용자 경험을 향상시키는 대화형 FAQ 섹션을 만드는 방법을 보여줍니다.

특징

  • 대화형 아코디언: 사용자는 질문을 클릭하여 답변 표시 여부를 전환하여 콘텐츠 가독성을 높일 수 있습니다.
  • 반응형 디자인: 애플리케이션은 완벽하게 반응하여 데스크톱과 모바일 장치 모두에서 최적의 보기 환경을 보장합니다.
  • 동적 아이콘: 아이콘이 변경되어 답변이 확장되었는지 축소되었는지 나타냅니다.

사용된 기술

  • HTML: FAQ 아코디언 애플리케이션의 구조를 제공합니다.
  • CSS: 깔끔하고 반응성이 뛰어난 디자인을 만들기 위해 애플리케이션 스타일을 지정합니다.
  • JavaScript: 답변 확장 및 축소, 아이콘 전환 등 대화형 요소를 관리합니다.

프로젝트 구조

프로젝트 구조 개요는 다음과 같습니다.

FAQ-Accordion/
├── index.html
├── style.css
└── script.js
  • index.html: FAQ Accordion 애플리케이션의 HTML 구조가 포함되어 있습니다.
  • style.css: CSS 스타일을 포함하여 매력적이고 반응이 빠른 디자인을 만듭니다.
  • script.js: 답변 확장 및 축소, 아이콘 업데이트 등의 대화형 요소를 관리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

  1. 저장소 복제:

    git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git

  2. 프로젝트 디렉토리 열기:

    cd FAQ-Accordion

  3. 프로젝트 실행:

    • 웹 브라우저에서 index.html 파일을 열어 FAQ 아코디언 애플리케이션을 확인하세요.

용법

  1. 웹 브라우저에서 애플리케이션을 엽니다.
  2. 질문을 클릭하여 답변 표시 여부를 전환합니다.
  3. 다양한 질문을 펼치고 접고 답변을 확인하세요.
  4. 필요에 따라 새 질문을 업데이트하거나 추가하세요.

코드 설명

HTML

index.html 파일은 질문과 답변을 포함하여 FAQ 아코디언 애플리케이션의 구조를 정의합니다. 다음은 스니펫입니다.

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7FAQ accordion6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    7f673eaf394f0b5c3dca2aceb68a12d5
      ca5768eb787de1bcd21f5c4158b542b2
      8f9e4409b06fde1ff1d3a80f075ca0ed
        4a249f0d628e2318394fd9b75b4636b1
          FAQs
          a6d6d8732e7aab09e58fc20552ce9c66
            473be947d5c9cf409521472bde60f1a854bdf357c58b8a65c66d7c19c8e4d114
        473f0a7621bec819994bb5020d29372a
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Is Frontend Mentor free?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              Frontend Mentor offers realistic coding challenges to help
              developers improve their frontend coding skills with projects in
              HTML, CSS, and JavaScript. It's suitable for all levels and ideal
              for portfolio building.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Can I use Frontend Mentor projects in my portfolio?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              Yes, Frontend Mentor offers both free and premium coding
              challenges, with the free option providing access to a range of
              projects suitable for all skill levels.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Can I use Frontend Mentor projects in my portfolio?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              Yes, you can use projects completed on Frontend Mentor in your
              portfolio. It's an excellent way to showcase your skills to
              potential employers!
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355
              How can I get help if I'm stuck on a Frontend Mentor challenge?
            39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              The best place to get help is inside Frontend Mentor's Discord
              community. There's a help channel where you can ask questions and
              seek support from other community members.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68

  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

style.css 파일은 FAQ Accordion 애플리케이션의 스타일을 지정하여 시각적으로 매력적이고 반응성이 뛰어납니다. 다음은 몇 가지 주요 스타일입니다.

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background-color: hsl(275, 100%, 97%);

}

img {
  width: 100%;
  position: fixed;
}

.container {
  position: absolute;
}

.box {
  top: 100px;
  margin: 0 auto;
  background-color: hsl(0, 0%, 100%);
  max-width: 555px;
  position: relative;
  border-radius: 13px;
  padding: 20px;
}

.imageStar img {
  width: 36px;
  margin-left: 10px;
}

.section {
  padding: 5px;
}

.question {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.answer {
  display: none;
  overflow: hidden;
  padding: 10px;
}

.answer.active {
  display: block;
}

.icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-img img {
  position: fixed;
  width: 19px;
}

@media (max-width: 700px) {
  .box {
    max-width: 500px;
  }
}

@media (max-width: 500px) {
  .box {
    max-width: 400px;
  }
}

자바스크립트

script.js 파일에는 답변을 펼치고 접는 기능이 포함되어 있습니다. 데모용 스니펫은 다음과 같습니다.

const questions = document.querySelectorAll(".question");

questions.forEach(question => {
  question.addEventListener("click", () => {
    const answer = question.nextElementSibling;
    const icon = question.querySelector(".icon-img img");

    // Toggle answer visibility
    answer.classList.toggle("active");

    // Change icon
    if (answer.classList.contains("active")) {
      icon.src = "./assets/images/icon-minus.svg";
    } else {
      icon.src = "./assets/images/icon-plus.svg";
    }
  });
});

라이브 데모

여기에서 FAQ Accordion 프로젝트의 라이브 데모를 확인하실 수 있습니다.

결론

FAQ Accordion 애플리케이션을 구축하는 것은 대화형이며 사용자 친화적인 FAQ 섹션을 만드는 보람 있는 경험이었습니다. 이 프로젝트는 사용자 참여와 콘텐츠 접근성의 중요성을 강조합니다. HTML, CSS, JavaScript를 적용하여 자주 묻는 질문에 쉽게 접근할 수 있도록 하여 사용자 경험을 향상시키는 구성 요소를 개발했습니다. 이 프로젝트가 여러분이 자신만의 대화형 구성요소를 구축하는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!

크레딧

이 프로젝트는 웹 개발에 대한 지속적인 학습 여정의 일환으로 개발되었습니다.

작가

  • 아비셰크 구자르
    • GitHub 프로필

위 내용은 FAQ 아코디언 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html for while format Directory using JS this display github
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：효과적인 웹 개발을 위해 각 유형의 선택기를 언제 사용해야 하는지 알고 계십니까?다음 기사：효과적인 웹 개발을 위해 각 유형의 선택기를 언제 사용해야 하는지 알고 계십니까?

관련 기사

더보기