HTML details가 open="false"인데 열리는 이유: 불리언 속성은 값보다 존재 여부

노트북 앞 접힌 카드와 열린 카드를 보여 주는 HTML 접기 false인데 열림 속성 확인 제목의 개념 삽화

HTML의 details에 open="false"를 써도 처음부터 열립니다. open은 불리언 속성이어서 값의 문자열보다 속성이 존재하는지가 기준이기 때문입니다. 처음에 닫힌 상태를 원하면 open 속성 전체를 제거하세요.

1. false라는 글자가 닫힘 스위치는 아닙니다

MDN은 open이 불리언 속성이라고 설명합니다. 속성이 있으면 펼쳐지고, 없으면 기본적으로 내용이 숨겨집니다. 문자열 "false"를 넣어도 존재하는 속성인 점은 같으므로 닫힌 상태가 되지 않습니다.

AI가 만든 HTML 초안이나 다른 예제를 검토할 때 “false라는 단어가 있으니 닫혔겠지”라고 판단하기 쉬운 부분입니다. 코드의 단어 뜻과 브라우저가 속성을 처리하는 규칙을 나눠 보세요.

open 존재: 값이 false여도 처음에는 열림 / 닫힌 초기값: open 속성 전체를 제거 / summary: 접기 제목에 내용이 드러나게 쓰기 / 저장 후 확인: 실제 페이지에서 클릭·키보드 동작 보기

아래는 이 글을 위해 만든 최소 예제입니다. 닫힌 초기 상태를 원하므로 시작 태그에서 open을 뺐습니다. 펼치는 제목은 summary에 넣고 본문은 그 다음에 둡니다.

<details>
  <summary>준비물 확인</summary>
  <p>필요한 준비물을 적습니다.</p>
</details>

열린 초기 상태를 원할 때만 첫 줄을 <details open>으로 바꿉니다. 닫힘을 만들려고 빈 문자열이나 "false"로 값을 바꾸는 대신 속성의 존재 여부를 확인하세요.

MDN은 summary를 클릭하거나 포커스가 있을 때 스페이스 키로 펼침 상태를 바꾸는 동작을 설명합니다. 저장한 뒤 실제 페이지에서 제목을 눌러 열고 닫히는지 확인하세요. 제목은 “더 보기”만 쓰기보다 펼치면 무엇을 읽게 되는지 드러내는 편이 좋습니다.

일부 편집기는 저장 과정에서 HTML 요소나 속성을 바꿀 수 있습니다. 붙여 넣기 직후의 코드만 보고 지원 완료로 판단하지 말고 저장된 결과를 확인하세요. 스타일과 동작이 달라지면 그 편집기의 지원 범위부터 살펴봅니다.

간단한 검토 메모는 “원하는 초기 상태 / 시작 태그의 open 유무 / 저장 후 클릭 동작 / 키보드로 확인한 결과” 네 칸이면 충분합니다. 이 글의 코드는 문법을 설명하는 예제이며 모든 CMS에서 동일하게 저장된다고 보장하지 않습니다.

속성이 여전히 존재합니다. 닫힌 초기 상태를 만들려면 open 속성 전체를 제거하세요.

편집기마다 지원 범위가 다릅니다. 저장 후 실제 공개 페이지의 동작을 확인해야 합니다.

대표 이미지는 AI로 제작한 개념 삽화이며 실제 제품·현장 사진이 아닙니다. 본문 설명 도표는 직접 구성했습니다.