HTML details와 summary 태그, 클릭하면 열리는 요약 박스 만들기

오늘은 HTML 태그 중에서 details와 summary 태그에 대해 알아보자.

<details>와 <summary>는 웹 페이지에서 클릭하면 내용이 펼쳐지거나 접히는 아코디언^Accordion UI를 만들 때 사용하는 아주 유용한 태그다.

과거에는 이런 기능을 구현하려면 자바스크립트^JavaScript가 필수였지만, 이제는 HTML 태그만으로도 완벽하게 만들 수 있다.

details와 summary 태그

먼저 이 태그들의 실제 사용 예부터 보여주겠다.

나의 다른 블로그에서 본문에 이 태그들을 사용했었다.

"참고로 말씀드리면.. (클릭)"이라고 쓰여있는 부분이 있다.

이 부분을 클릭하면?

이렇게 숨겨진 내용이 나오게 된다.

HTML 태그만으로도 이런 것을 구현할 수 있다니!

세상 참 좋구만?

이제부터 이 태그의 사용법과 주의사항들을 알려주겠다.

1. 사용 방법

<details>
  <summary>참고로 말씀드리면.. (클릭)</summary>
  <p>사실 제 기준에는 드디어 적정가에 샀다고 생각합니다.</p>
  <p>99,000원은 너무 비쌌습니다. 🙄</p>
  <p><span style="color: #999999;">(얼마에 샀는지 딱히 비밀로 할 이유는 없지만 앞으로 컨스파라의 매출에 영향을 끼칠까봐 일단 비밀로 해두는 걸로..)</span></p>
  <p><br /></p>
  <p>그래도 치안이 불안한 나라에 자주 가거나, 혹은 거주할 계획이 있는 사람에게는 원래의 가격으로 구입해도 그만한 값어치를 하는 슬링백이 될 것 같습니다.</p>
</details>

너무 간단해서 더 이상 설명할 것도 없다.

그래도 굳이 정리하자면,

• <details>: 접고 펼칠 수 있는 전체 구역을 감싸는 부모 태그다.
• <summary>: 접혀 있을 때 사용자에게 보여줄 텍스트를 넣을 부분이다.
  이 부분을 클릭하면 내용이 열리고, 또 클릭하면 닫힌다.

2. 주의사항

이 태그 내에 써놓은 내용도 검색 엔진(네이버나 다음 등)에 의해 검색될 수 있다.

그런데 검색에는 걸리지만, 방문자가 검색 결과를 클릭해 들어왔을 때 그 내용이 바로 보이지 않으면 방문자가 "어? 내가 찾던 내용이 어디 있지?" 하고 바로 나갈 수 있다.

이는 블로그 이탈률 상승으로 이어지기 때문에 중요한 내용이나 글의 핵심 키워드 등은 웬만하면 넣지 않도록 하자.

일반적으로는 다음과 같은 상황에서 주로 쓰인다.

• FAQ (자주 묻는 질문): 질문을 클릭하면 답변이 아래로 슥 나타나게 할 때 가장 많이 쓰인다.
• 상세 스펙 숨기기: 제품 설명 페이지에서 복잡한 수치나 사양을 숨겨두었다가 원하는 사람만 보게 할 때 유용하다.

CSS 수정

CSS 수정은 거의 필수다.

왜냐하면 <summary> 안의 텍스트에 아무런 효과도 들어가지 않아서 눈에 띄지도 않고, 마우스를 올렸을 때 마우스 커서의 모양에도 아무런 변화가 없어서 클릭을 해야 하는 요소처럼 보이지도 않기 때문이다.

summary{
  cursor:pointer;
  font-weight:bolder
}

블로그에서 <details>와 <summary>를 사용할 사람은 'HTML 편집'에서 최소한 이 정도의 코드는 추가해 두자.

이것으로 <summary> 안의 텍스트가 굵어지고, 마우스를 올렸을 때 커서 모양이 변해서 방문자가 '클릭을 해야 하는 요소'라는 것을 알 수 있을 것이다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.