HTML details가 open="false"인데 열리는 이유: 불리언 속성은 값보다 존재 여부
HTML의 details에 open="false"를 써도 처음부터 열립니다. open은 불리언 속성이어서 값의 문자열보다 속성이 존재하는지가 기준이기 때문입니다. 처음에 닫힌 상태를 원하면 open 속성 전체를 제거하세요. 목차 1. false라는 글자가 닫힘 스위치는 아닙니다 2. 시작 상태를 비교하는 짧은 예제 3. 코드와 공개 페이지를 함께 확인 4. 자주 묻는 질문 1. false라는 글자가 닫힘 스위치는 아닙니다 MDN은 open이 불리언 속성이라고 설명합니다. 속성이 있으면 펼쳐지고, 없으면 기본적으로 내용이 숨겨집니다. 문자열 "false"를 넣어도 존재하는 속성인 점은 같으므로 닫힌 상태가 되지 않습니다. AI가 만든 HTML 초안이나 다른 예제를 검토할 때 “false라는 단어가 있으니 닫혔겠지”라고 판단하기 쉬운 부분입니다. 코드의 단어 뜻과 브라우저가 속성을 처리하는 규칙을 나눠 보세요. 2. 시작 상태를 비교하는 짧은 예제 작성한 시작 태그 초기 상태 <details> 닫힘 <details open> 열림 <details open="false"> 열림 아래는 이 글을 위해 만든 최소 예제입니다. 닫힌 초기 상태를 원하므로 시작 태그에서 open을 뺐습니다. 펼치는 제목은 summary에 넣고 본문은 그 다음에 둡니다. <details> <summary>준비물 확인</summary> <p>필요한 준비물을 적습니다.</p> </details> 열린 초기 상태를 원할 때만 첫 줄을 <details open> 으로 바꿉니다. 닫힘을 만들려고 빈 문자열이나 "false"로 값을 바꾸는 대신 속성의 존재 여부를 확인하세요. 3. 코드와 공개 페이지를 함께 확인 MDN은 summary를 클릭하거나 포커스가 있을 때 스페이스 키로 펼침 상태를 바꾸는 동작을 설명합니다. ...