이코노트허브(econotehub) 노하우 연구소

안녕하세요 이코노트허브 입니다.

블로그 글 아래에 "자주 묻는 질문(FAQ)"을 넣고 싶은데, 질문을 다 펼쳐두면 페이지가 너무 길어 보일 때가 있습니다. 클릭했을 때만 답변이 펼쳐지는 아코디언 UI가 필요한 순간이죠. 보통 자바스크립트가 필요하다고 생각하기 쉽지만, 사실 HTML 태그 하나면 CSS도 필요 없이 만들 수 있습니다.

가장 쉬운 방법: details 태그

<details>
  <summary>애드센스 승인은 얼마나 걸리나요?</summary>
  <p>보통 신청 후 몇 주에서 한 달 정도 소요됩니다. 사이트 규모와 심사 상황에 따라 달라질 수 있습니다.</p>
</details>

<details>는 접고 펼치는 기능을 브라우저가 기본으로 지원하는 태그입니다. <summary> 안에 쓴 내용이 클릭 가능한 제목이 되고, 그 아래 내용은 평소엔 숨겨져 있다가 클릭하면 펼쳐집니다. 자바스크립트 코드 없이 이 6줄만으로 작동합니다.

기본 모양이 마음에 안 든다면: CSS로 꾸미기

브라우저 기본 스타일은 화살표 아이콘이 투박합니다. 아래 CSS로 좀 더 깔끔하게 꾸밀 수 있습니다.

details {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
}

summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '+';
  float: right;
}

details[open] summary::after {
  content: '−';
}

몇 가지 포인트를 짚어드리면 이렇습니다.

list-style: none과 ::-webkit-details-marker는 브라우저 기본 화살표 아이콘을 숨기는 코드입니다.
summary::after { content: '+'; }로 직접 만든 + 아이콘을 오른쪽에 배치했습니다.
details[open]은 "펼쳐진 상태일 때"를 가리키는 선택자입니다. 펼쳐지면 아이콘이 +에서 −로 바뀌도록 했습니다.

여러 개를 나열할 때: 펼침 효과 부드럽게

details 태그는 기본적으로 펼쳐질 때 뚝 끊기듯 나타납니다. 지난번 배운 transition을 살짝 응용하면 조금 더 부드럽게 만들 수 있습니다.

details p {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

details 태그 자체의 펼침 동작은 CSS로 완전히 애니메이션 처리하기가 까다롭지만, 안에 있는 내용에 페이드인 효과를 주는 것만으로도 훨씬 자연스러운 느낌을 줄 수 있습니다.

FAQ 여러 개, 이렇게 나열하세요

<h2>자주 묻는 질문</h2>

<details>
  <summary>질문 1</summary>
  <p>답변 1</p>
</details>

<details>
  <summary>질문 2</summary>
  <p>답변 2</p>
</details>

<details>
  <summary>질문 3</summary>
  <p>답변 3</p>
</details>

details 태그는 각각 독립적으로 작동해서, 여러 개를 나열해도 서로 영향을 주지 않고 원하는 것만 펼쳐집니다.

초보자가 자주 하는 실수 2가지

summary 안에 너무 많은 내용을 넣는 경우: summary는 클릭하는 제목 영역입니다. 여기에 긴 문장이나 이미지를 넣으면 클릭 영역이 애매해지고 디자인도 깨지기 쉽습니다. 짧은 질문이나 제목 한 줄 정도로 유지하세요.
details[open] 선택자를 안 쓰고 아이콘 전환을 하려는 경우: 자바스크립트로 클래스를 붙였다 뗐다 하는 방식으로 접근하기 쉬운데, details 태그는 [open]이라는 속성 선택자만으로 펼침 상태를 CSS에서 바로 감지할 수 있어 훨씬 간단합니다.

핵심 요약

<details>와 <summary> 태그만으로 자바스크립트 없이 접고 펼치는 UI를 만들 수 있습니다.
details[open] 선택자로 펼쳐진 상태를 감지해서 아이콘이나 스타일을 바꿀 수 있습니다.
기본 화살표 아이콘이 마음에 안 들면 list-style: none과 ::after로 직접 아이콘을 만들 수 있습니다.
details 태그들은 서로 독립적으로 작동해서 여러 개를 나열해도 문제없습니다.

FAQ뿐 아니라 목차, 댓글 접기, 스포일러 가리기 등 다양한 곳에 활용할 수 있는 태그입니다. 자바스크립트가 부담스러웠다면, details 태그부터 가볍게 시작해보시길 추천드립니다.

제목 없음