HTML <details> 태그 (내용 펼치기, 접기)

1. HTML details 태그란?
2. 기본 문법
3. 주요 특징
4. 사용 예제
   • FAQ 목록 만들기
   • 기본 상태를 열림으로 설정하기 (open 속성)
   • 여러 개의 콘텐츠 포함하기
   • CSS와 함께 사용하여 스타일링
5. details 태그와 dialog 태그의 차이점
6. 사용 장점

 

• details 태그는 클릭하면 펼쳐지고 접히는 정보 섹션을 제공
• JavaScript 없이도 기본적인 토글 기능 지원
• summary 태그를 클릭하면 내용이 표시됨
• FAQ, 추가 정보, 긴 설명을 줄이는 데 유용
• CSS를 활용하여 스타일을 커스터마이징 가능

 

---

 

HTML details 태그란?

details 태그는 사용자가 클릭하여 펼치거나 접을 수 있는 정보 섹션을 만들 때 사용하는 태그입니다. 주로 FAQ(자주 묻는 질문), 설명서, 추가 정보 제공 등의 용도로 사용됩니다.

 

---

 

기본 문법

<details>
  <summary>자세한 정보를 보려면 클릭하세요.</summary>
  <p>여기에 숨겨진 정보가 있습니다!</p>
</details>

• summary 태그를 클릭하면 details 안의 내용이 펼쳐졌다가 접힘.
• 기본적으로 닫힌 상태로 표시됨.

 

---

 

주요 특징

• 사용자가 클릭해서 열고 닫을 수 있는 정보 섹션 생성
• JavaScript 없이도 기본적인 토글(toggle) 기능 제공
• 접근성이 좋으며, 모든 최신 브라우저에서 지원됨
• summary 태그는 클릭할 수 있는 제목 역할을 함

 

---

 

사용 예제

💡 FAQ 목록 만들기

🌈 예제 코드:

<details>
  <summary>Q: HTML이란?</summary>
  <p>A: HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.</p>
</details>

<details>
  <summary>Q: CSS는 무엇인가요?</summary>
  <p>A: CSS는 웹 페이지의 스타일을 지정하는 스타일시트 언어입니다.</p>
</details>

✅ 실행 결과:

Q: HTML이란?

A: HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.

Q: CSS는 무엇인가요?

A: CSS는 웹 페이지의 스타일을 지정하는 스타일시트 언어입니다.

사용자가 클릭하면 내용이 펼쳐지고, 다시 클릭하면 접힙니다.

 

💡 기본 상태를 열림으로 설정하기 (open 속성)

🌈 예제 코드:

<details open>
  <summary>기본적으로 열린 상태</summary>
  <p>이 내용은 페이지가 로드될 때부터 보입니다.</p>
</details>

✅ 실행 결과:

기본적으로 열린 상태

이 내용은 페이지가 로드될 때부터 보입니다.

<details open> 속성을 사용하면 페이지가 로드될 때 기본적으로 열려 있음.

 

💡 여러 개의 콘텐츠 포함하기

🌈 예제 코드:

<details>
  <summary>더 많은 정보</summary>
  <ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
  </ul>
</details>

✅ 실행 결과:

더 많은 정보

• 항목 1
• 항목 2
• 항목 3

details 태그 안에는 텍스트뿐만 아니라 이미지, 리스트, 테이블 등 다양한 요소 포함 가능.

 

💡 CSS와 함께 사용하여 스타일링

🌈 예제 코드:

<style>
  details {
    border: 1px solid #ccc;
    padding: 10px;
    width: 300px;
    border-radius: 5px;
    background-color: #f9f9f9;
  }
  summary {
    font-weight: bold;
    cursor: pointer;
  }
  details[open] {
    background-color: #e6f7ff;
  }
</style>

<details>
  <summary>자세한 정보 보기</summary>
  <p>여기에 추가 정보가 표시됩니다.</p>
</details>

CSS를 활용하여 디자인을 더욱 깔끔하게 만들 수 있음

details[open]을 사용하면 펼쳐진 상태일 때 스타일을 변경 가능

 

---

 

details 태그와 dialog 태그의 차이점

태그	설명
details	사용자가 클릭하여 열고 닫을 수 있는 정보 섹션 (기본적으로 닫힘
dialog	팝업 창(Dialog) 형태로 표시되며 JavaScript로 제어 필요

🌈 예제 코드:

<dialog id="myDialog">
  <p>팝업 창입니다!</p>
  <button onclick="document.getElementById('myDialog').close()">닫기</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">팝업 열기</button>

dialog 태그는 팝업 창 역할이고, details 태그는 접고 펼치는 정보 패널 역할입니다.

 

---

 

사용 장점

• 추가 정보 제공 (기본적으로 숨김)
• 긴 설명을 줄이고, 클릭하면 펼쳐지도록 할 때
• JavaScript 없이도 토글 기능이 필요한 경우

 

---

 

• HTML <wbr> 태그
• HTML <del> 태그
• HTML <dd> 태그