5.8 FAQ

약 5분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

5.8 FAQ

FAQ(자주 묻는 질문) 섹션은 웹사이트에서 사용자가 자주 문의하는 내용에 대한 답변을 제공하는 중요한 부분입니다. 반응형 웹사이트의 FAQ 섹션에서는 다양한 화면 크기에서도 잘 보이고 쉽게 접근할 수 있는 디자인을 구현하는 것이 중요합니다. 다음은 반응형 FAQ를 작성하기 위한 기본적인 예제입니다.

코드 html

<div class="faq-container">
  <h2>자주 묻는 질문</h2>
  <div class="faq-item">
    <h3 class="faq-question">질문 1: 반응형 웹이란 무엇인가요?</h3>
    <p class="faq-answer">답변: 반응형 웹은 다양한 화면 크기에서 적절하게 표시될 수 있도록 설계된 웹사이트입니다.</p>
  </div>
  <div class="faq-item">
    <h3 class="faq-question">질문 2: 어떻게 반응형 웹을 만들 수 있나요?</h3>
    <p class="faq-answer">답변: CSS 미디어 쿼리와 유연한 그리드 레이아웃을 사용하여 다양한 화면에 맞추어 디자인할 수 있습니다.</p>
  </div>
</div>

위 예제에서는 두 개의 FAQ 항목을 포함하여 각 질문과 답변을 정의하였습니다. 이와 같은 구조를 사용하면 다양한 요소를 추가하더라도 일관된 디자인을 유지할 수 있습니다.

코드 css

.faq-container {
  padding: 20px;
  max-width: 800px;
  margin: auto;
}

.faq-item {
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.faq-question {
  cursor: pointer;
  font-weight: bold;
}

.faq-answer {
  display: none;
  margin-top: 10px;
}

위 CSS는 FAQ 항목의 레이아웃을 정의합니다. 각 항목은 간단한 테두리와 패딩이 적용되어 있으며, 질문을 클릭했을 때 답변이 나타나도록 JavaScript를 활용하여 간단한 기능을 추가할 수 있습니다.

코드 javascript

document.querySelectorAll('.faq-question').forEach(question => {
  question.addEventListener('click', function() {
    const answer = this.nextElementSibling;
    if (answer.style.display === 'block') {
      answer.style.display = 'none';
    } else {
      answer.style.display = 'block';
    }
  });
});

이 JavaScript 코드는 각 질문을 클릭할 때 해당 질문의 답변 표시를 토글하는 기능을 제공합니다. 이와 같은 기능을 통해 사용자들은 쉽게 FAQ 정보를 탐색할 수 있습니다.

이번 섹션에서 학습한 내용을 활용하여 여러분만의 FAQ 섹션을 반응형 웹사이트에 구현해 보세요. 각 요소에 대해 추가적인 스타일링이나 상호작용 기능을 더하는 것도 좋은 방법입니다. 연습 후에는 다른 화면 크기에서의 동작을 확인하고, Chrome DevTools를 사용하여 디버깅해 보세요.

5.8 FAQ

5.8 FAQ

댓글 0