HTML commandfor 속성 기준 정리

HTML commandfor는 버튼이 다른 요소에 명령을 보내도록 연결하는 속성입니다. 예전에는 버튼 클릭 후 JavaScript에서 대상 요소를 찾아 showModal()이나 popover 관련 메서드를 호출하는 식으로 처리하는 경우가 많았습니다. commandfor와 command를 함께 쓰면 일부 UI 동작을 HTML에 선언할 수 있습니다.

결론부터 말하면 dialog 열기, dialog 닫기, popover 표시처럼 HTML 표준이 정의한 동작에는 commandfor가 잘 맞습니다. 반대로 복잡한 상태 변경, 데이터 검증, 네트워크 요청, 프레임워크 상태 갱신이 섞이면 버튼 이벤트를 코드에서 명시적으로 처리하는 편이 더 읽기 쉽습니다.

commandfor는 무엇을 연결할까

commandfor는 <button>이 제어할 대상 요소의 id를 가리킵니다. WHATWG HTML Standard 기준으로 이 값은 같은 tree 안에 있는 요소의 ID여야 합니다. 실제 어떤 동작을 할지는 같은 버튼의 command 속성이 정합니다.

<button type="button" commandfor="help-dialog" command="show-modal">
  도움말 열기
</button>

<dialog id="help-dialog">
  <p>설정 화면에서 사용할 수 있는 옵션입니다.</p>
  <button type="button" commandfor="help-dialog" command="close">
    닫기
  </button>
</dialog>

위 예시는 버튼이 help-dialog라는 ID를 가진 <dialog>를 대상으로 삼고, show-modal 명령으로 모달 대화상자를 엽니다. 닫기 버튼은 같은 대상을 향해 close 명령을 보냅니다.

command에는 어떤 값이 있을까

HTML 표준은 command의 기본 키워드로 popover 제어, dialog 제어, custom command를 정의합니다. MDN의 button 문서와 Invoker Commands API 문서도 같은 흐름으로 설명합니다.

command 값	주 대상	의미
toggle-popover	popover 요소	popover를 표시하거나 숨김
show-popover	popover 요소	popover를 표시함
hide-popover	popover 요소	popover를 숨김
show-modal	<dialog>	dialog를 modal 상태로 엶
close	<dialog>	dialog를 닫음
request-close	<dialog>	취소 가능한 닫기 요청을 보냄
--name 형식	임의 대상	command 이벤트만 발생시켜 코드가 처리함

custom command는 이름이 --로 시작하는 문자열입니다. 표준 동작을 자동 실행하는 값이 아니라, 대상 요소에 command 이벤트를 발생시키고 이후 처리는 개발자가 작성한 코드에 맡깁니다.

popover에는 popovertarget 대신 써도 될까

popover만 다룬다면 popovertarget과 popovertargetaction도 여전히 직접적인 선택입니다. commandfor는 그보다 일반화된 형태로 볼 수 있습니다. 같은 버튼 문법으로 popover, dialog, custom command를 다룰 수 있다는 장점이 있습니다.

<button type="button" commandfor="menu" command="toggle-popover">
  메뉴
</button>

<div id="menu" popover>
  <a href="/profile">프로필</a>
  <a href="/settings">설정</a>
</div>

기존 코드가 이미 popovertarget를 명확하게 쓰고 있다면 굳이 바꿀 필요는 없습니다. 새 UI에서 dialog와 popover를 같은 패턴으로 정리하고 싶거나, 나중에 custom command까지 확장할 여지가 있으면 commandfor를 검토할 수 있습니다.

dialog 닫기에는 close와 request-close 중 무엇을 쓸까

close는 dialog를 바로 닫는 명령입니다. 버튼에 value가 있으면 dialog의 returnValue에 그 값이 전달될 수 있습니다. 확인, 취소, 삭제 같은 선택 결과를 닫힌 뒤에 읽어야 할 때 유용합니다.

request-close는 닫기를 요청하는 쪽에 가깝습니다. MDN 예시 기준으로 cancel 이벤트를 통해 닫기를 막을 수 있는 흐름을 만들 수 있습니다. 사용자가 닫기를 눌렀더라도 아직 저장되지 않은 변경사항이나 필수 확인이 있으면 코드에서 취소할 여지가 생깁니다.

상황	권장 명령	기준
단순 안내 dialog 닫기	close	닫기를 막을 조건이 없음
선택 결과를 남겨야 함	close + value	returnValue를 읽어 후속 처리
닫기 전 확인이 필요함	request-close	cancel 이벤트로 취소 가능

custom command는 언제 쓸까

custom command는 버튼과 대상 요소의 관계를 HTML에 남기고, 실제 동작은 JavaScript 이벤트에서 처리하고 싶을 때 씁니다. 예를 들어 이미지 회전, 패널 상태 변경, 위젯 내부 명령처럼 표준 HTML 동작으로 표현하기 어려운 경우입니다.

<button type="button" commandfor="preview" command="--reset">
  초기화
</button>

<section id="preview">미리보기 영역</section>

<script>
  const preview = document.querySelector("#preview");

  preview.addEventListener("command", (event) => {
    if (event.command === "--reset") {
      preview.dataset.state = "default";
    }
  });
</script>

이 방식은 버튼이 어떤 대상을 향하는지 HTML만 봐도 드러난다는 장점이 있습니다. 다만 이벤트 처리 로직이 필요하므로, 단순 클릭 핸들러보다 항상 더 좋은 구조라고 보기는 어렵습니다. 팀에서 custom command의 이름 규칙과 담당 영역을 정해두지 않으면 오히려 흐름이 흩어질 수 있습니다.

button type은 왜 같이 적는 것이 좋을까

<button>은 form 안에서 기본적으로 submit 동작과 연결될 수 있습니다. HTML 표준의 button 활성화 동작도 form 소유 여부와 submit button 여부를 먼저 확인합니다. 따라서 command용 버튼에는 type="button"을 명시하는 편이 안전합니다.

특히 dialog 안에 form이 있거나, 설정 화면처럼 버튼이 여러 개 섞인 UI에서는 의도하지 않은 form submit이 생기기 쉽습니다. commandfor가 붙어 있어도 팀원이 읽기 쉽게 하려면 명령 버튼이라는 의도를 type="button"으로 분명히 적는 것이 좋습니다.

브라우저 지원은 어떻게 봐야 할까

MDN은 HTMLButtonElement.command를 Baseline 2025로 표시합니다. 최신 브라우저만 대상으로 하는 관리 도구나 내부 서비스라면 적용 가능성을 검토할 수 있습니다. 반대로 오래된 WebView, 오래된 브라우저, 보수적인 호환성 요구가 있는 공개 서비스라면 실제 대상 브라우저의 지원 여부를 먼저 확인해야 합니다.

호환성이 불확실한 UI에서는 기존 방식처럼 버튼 클릭 이벤트에서 dialog.showModal(), dialog.close(), popover 관련 메서드를 호출하는 fallback을 유지하는 편이 안전합니다. 글에서 말하는 기준은 표준 문서와 최신 MDN 문서를 확인한 2026년 8월 11일 기준입니다.

자주 묻는 질문

commandfor만 쓰면 동작할까

아닙니다. 대상 연결은 commandfor가 맡지만, 어떤 명령을 보낼지는 command가 정합니다. command가 없거나 유효하지 않으면 의도한 동작이 일어나지 않을 수 있습니다.

대상 요소는 버튼 안에 있어야 할까

아닙니다. commandfor는 ID로 대상을 찾습니다. 다만 표준 기준으로 같은 tree 안의 요소를 가리켜야 하므로, shadow DOM이나 컴포넌트 경계를 넘는 구조에서는 실제 연결 범위를 확인해야 합니다.

모든 클릭 핸들러를 custom command로 바꿔야 할까

그럴 필요는 없습니다. commandfor는 버튼과 대상 요소의 관계가 중요할 때 유용합니다. 일반적인 버튼 클릭, 폼 제출, 라우팅, 비동기 저장처럼 애플리케이션 로직이 중심인 경우에는 기존 이벤트 처리 방식이 더 명확할 수 있습니다.

정리

commandfor는 버튼이 제어할 대상을 ID로 연결하고, command는 그 대상에 보낼 동작을 정합니다. popover와 dialog처럼 표준이 이미 동작을 정의한 UI에는 HTML만으로 의도를 드러낼 수 있어 코드가 단순해집니다.

무난한 기준은 세 가지입니다. 첫째, dialog 열기와 닫기, popover 표시처럼 표준 명령으로 충분한 곳에 우선 적용합니다. 둘째, command용 버튼에는 type="button"을 명시합니다. 셋째, 오래된 브라우저나 WebView까지 지원해야 한다면 실제 호환성과 fallback을 먼저 확인합니다.