🧩 04. 네이티브 HTML 심화 요소: JavaScript 없이 모달이 된다고?

<!-- HTML 구조 -->
<dialog id="confirm-modal">
  <h2>정말 삭제하시겠어요?</h2>
  <p>삭제한 게시글은 복구할 수 없습니다.</p>
  <div>
    <!-- form method="dialog": dialog 자동 닫힘 + returnValue 설정 -->
    <form method="dialog">
      <button value="cancel">취소</button>
      <button value="confirm">삭제</button>
    </form>
  </div>
</dialog>
 
<button onclick="document.getElementById('confirm-modal').showModal()">
  게시글 삭제
</button>

const modal = document.getElementById('confirm-modal');
 
// 모달 열기: .showModal() → 전체화면 오버레이 + 포커스 트랩 자동 적용
modal.showModal();
 
// 모달 닫기 이벤트: form method="dialog" 제출 시 자동 발생
modal.addEventListener('close', () => {
  if (modal.returnValue === 'confirm') {
    // 삭제 로직 실행
  }
});

/* dialog 기본 스타일링 */
dialog {
  border: none;
  border-radius: 12px;
  padding: 2rem;
  max-width: min(90vw, 480px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
 
/* 배경 오버레이 */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

import { useRef, useEffect } from "react";
 
interface ConfirmDialogProps {
  isOpen: boolean;
  onClose: (confirmed: boolean) => void;
  title: string;
  message: string;
}
 
function ConfirmDialog({ isOpen, onClose, title, message }: ConfirmDialogProps) {
  const dialogRef = useRef<HTMLDialogElement>(null);
 
  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
 
    if (isOpen) {
      // 이미 열려있지 않으면 showModal
      if (!dialog.open) dialog.showModal();
    } else {
      dialog.close();
    }
  }, [isOpen]);
 
  // close 이벤트: ESC 키로 닫힐 때도 캐치
  const handleClose = () => {
    onClose(dialogRef.current?.returnValue === "confirm");
  };
 
  return (
    <dialog ref={dialogRef} onClose={handleClose}>
      <h2>{title}</h2>
      <p>{message}</p>
      <form method="dialog">
        <button value="cancel" type="submit">취소</button>
        <button value="confirm" type="submit">확인</button>
      </form>
    </dialog>
  );
}

<!-- FAQ 섹션: JS 없이 완전한 아코디언 구현 -->
<section>
  <h2>자주 묻는 질문</h2>
 
  <details>
    <summary>영수네 커뮤니티는 무료인가요?</summary>
    <p>네, 완전 무료 서비스입니다. 스터디 매칭부터 진행까지 모두 무료예요.</p>
  </details>
 
  <details>
    <summary>스터디 최소 인원이 있나요?</summary>
    <p>최소 2명부터 최대 8명까지 구성할 수 있어요.</p>
  </details>
 
  <!-- open 속성: 초기 열림 상태 -->
  <details open>
    <summary>어떤 개발 분야를 공부할 수 있나요?</summary>
    <p>프론트엔드, 백엔드, 알고리즘, 디자인 등 다양한 분야의 스터디가 있어요.</p>
  </details>
</section>

/* details/summary 스타일링 */
details {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
 
summary {
  padding: 1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none; /* 기본 삼각형 제거 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
summary::after {
  content: "+";
  font-size: 1.5rem;
  transition: transform 0.2s;
}
 
details[open] summary::after {
  transform: rotate(45deg); /* 열리면 X 모양으로 */
}
 
details > *:not(summary) {
  padding: 0 1rem 1rem;
}

<!-- Popover API: 버튼 클릭으로 팝오버 토글 -->
<button popovertarget="user-menu">내 계정</button>
 
<div id="user-menu" popover>
  <ul>
    <li><a href="/profile">프로필 수정</a></li>
    <li><a href="/settings">설정</a></li>
    <li><button type="button">로그아웃</button></li>
  </ul>
</div>

/* Popover 스타일링 */
[popover] {
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  min-width: 200px;
  /* 트랜지션: Discrete Animation (Chrome 117+) */
}
 
[popover]:popover-open {
  display: block;
}