FAQ 아코디언 웹사이트 구축-CSS 튜토리얼-php.cn

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: 답변 확장 및 축소, 아이콘 업데이트 등의 대화형 요소를 관리합니다.

설치

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

저장소 복제:

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

로그인 후 복사

프로젝트 디렉토리 열기:
```
cd FAQ-Accordion
```
로그인 후 복사
프로젝트 실행:
- 웹 브라우저에서 index.html 파일을 열어 FAQ 아코디언 애플리케이션을 확인하세요.

용법

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

코드 설명

HTML

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FAQ accordion</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="conatiner">
      <img src="./assets/images/background-pattern-desktop.svg" alt="" />
      <div class="box">
        <h1>
          FAQs
          <span class="imageStar">
            <img src="./assets/images/icon-star.svg" alt=""
          /></span>
        </h1>
        <section class="section">
          <div class="question">
            <h3>Is Frontend Mentor free?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              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.
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              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.
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              Yes, you can use projects completed on Frontend Mentor in your
              portfolio. It's an excellent way to showcase your skills to
              potential employers!
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>
              How can I get help if I'm stuck on a Frontend Mentor challenge?
            </h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              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.
            </p>
          </div>
          <hr />
        </section>
      </div>
    </div>

  </body>
</html>

로그인 후 복사

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를 적용하여 자주 묻는 질문에 쉽게 접근할 수 있도록 하여 사용자 경험을 향상시키는 구성 요소를 개발했습니다. 이 프로젝트가 여러분이 자신만의 대화형 구성요소를 구축하는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!