반응형
아래 소스코드는 <details>와 <summary> 태그를 함께 사용하여 아코디언 메뉴(접기/펼치기)를 구현하였습니다.
<details> 태그
펼치기/접기 가능한 세부 정보를 나타내는 데 사용됩니다. 펼쳐진 정보(내용)와 그 정보를 요약하는 제목(요약)을 함께 표시하는 데 사용됩니다.
- open 속성 : open 속성을 추가하면 페이지를 로드할 때 세부 정보가 열린 상태로 표시됩니다.
<details open></details>
<summary> 태그
<details> 요소 내에서 세부 정보를 요약하는 제목을 나타냅니다. 사용자가 세부 정보를 열거나 접을 때 클릭할 수 있는 버튼 또는 텍스트로 표시됩니다.
- <summary> 요소는 <details> 요소 내에서 하나만 사용됩니다.
- 사용자가 클릭하면 세부 정보를 제어하는 토글 동작을 활성화합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details 태그 예제</title>
<style>
/* 화살표 완전 제거 */
summary::-webkit-details-marker {
display: none;
}
/* 탭 모양 스타일링 */
summary {
list-style: none; /* 리스트 마커 제거 */
padding: 8px 16px; /* 원하는 패딩 적용 */
background-color: #f0f0f0; /* 배경색 지정 */
border: 1px solid #ddd; /* 테두리 스타일 설정 */
cursor: pointer; /* 마우스 커서를 포인터로 변경 */
outline: none; /* 클릭 시 포커스 표시 제거 */
}
/* 열린 상태 스타일링 (선택적) */
details[open] summary {
background-color: #e0e0e0; /* 열린 상태 배경색 변경 */
}
</style>
</head>
<body>
<h2>제목</h2>
<p>이 부분은 보통 내용에 대한 간단한 설명입니다.</p>
<!-- <details> 태그 시작 -->
<details id="myDetails">
<summary>추가 정보 보기</summary>
<p>여기에는 추가 정보가 들어갑니다. 이 부분은 사용자가 클릭하면 펼쳐집니다.</p>
</details>
<!-- <details> 태그 종료 -->
<p>이 부분은 추가 정보를 제공하지 않는 본문입니다.</p>
</body>
</html>
<script>
const detailsElement = document.getElementById("myDetails");
detailsElement.addEventListener("toggle", function() {
if (detailsElement.open) {
console.log("내용이 열림");
// 추가 작업을 여기에 추가할 수 있습니다.
} else {
console.log("내용이 닫힘");
// 다른 작업을 여기에 추가할 수 있습니다.
}
});
</script>
반응형
'개발이야기 > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] :not(), :has() 가상 클래스 선택자 사용하기 (예제, 설명) (0) | 2023.10.05 |
|---|---|
| [HTML&CSS] abbr, cite 태그 사용해서 약어와 줄임말, 인용과 출처 표시하기 (0) | 2023.09.25 |
| [HTML&CSS] datalist 태그 사용해서 자동완성 구현하기 (0) | 2023.09.08 |
| [HTML&CSS] img 태그 이미지 없을 때 대체 이미지 띄우기, 안 보이게 하기 (onerror) (0) | 2023.09.08 |
| [HTML&CSS] 텍스트, 이미지 깜빡이는 애니메이션 효과 주기 (0) | 2023.07.31 |
댓글