HTML Dialog 및 Popover 요소 정리

Form 요소 내에서 Button 사용

HTML 폼(form) 내부에서 다양한 버튼을 사용할 수 있습니다. 다음은 각 버튼의 역할을 설명합니다.

1. <input> 태그의 버튼

<div>
  <input type="submit" value="전송" />
  <input type="reset" value="초기화" />
  <input type="button" value="Click Me!" />
</div>

• type="submit" : 폼 데이터를 서버로 제출합니다.
• type="reset" : 입력된 데이터를 초기화합니다.
• type="button" : 특별한 동작이 없으며, JavaScript와 함께 사용하여 이벤트를 트리거할 수 있습니다.

2. <button> 태그의 버튼

<div>
  <button type="submit">전송</button>
  <button type="reset">초기화</button>
  <button type="button">클릭!</button>
</div>

• type="submit" : form 요소 내에서 제출 역할을 합니다.
• type="reset" : form 내의 입력값을 초기화합니다.
• type="button" : 기본 동작이 없으며, JavaScript 이벤트 핸들러와 함께 사용됩니다.

3. 이미지 버튼 사용

<div>
  <button type="submit">
    <img src="/src/assets/icon/search.svg" alt="전송하기" />
  </button>
</div>

• 버튼 내부에 이미지를 삽입하여 시각적인 요소를 추가할 수 있습니다.

4. form 속성을 이용한 버튼 제어

<button type="reset" form="buttonForm">초기화</button>

• form="buttonForm" 속성을 사용하여, 특정 form과 연결된 버튼을 폼 외부에서도 동작하도록 설정할 수 있습니다.

Select 요소란?

<select> 요소는 사용자가 미리 정의된 옵션 중 하나를 선택할 수 있도록 하는 드롭다운 메뉴입니다. option 태그와 함께 사용됩니다.

Select 요소 예제

<form action="/" method="post">
  <div>
    <label for="petSelect">반려동물</label>
    <select name="petSelect" id="petSelect">
      <option value="dog">강아지</option>
      <option value="cat">고양이</option>
      <option value="hamster">햄스터</option>
      <option value="spider">거미</option>
      <option value="goldfish">금붕어</option>
      <option value="parrot">패럿</option>
    </select>
  </div>
</form>

TextArea 요소란?

<textarea> 요소는 여러 줄의 텍스트를 입력할 수 있는 입력 필드입니다. 주로 사용자 의견, 설명 등의 입력에 사용됩니다.

TextArea 요소 예제

<form action="/" method="post">
  <div>
    <label for="message">
      내용
      <span aria-hidden="true">*</span>
      <span class="sr-only">필수</span>
      <textarea
        name="message"
        id="message"
        cols="50"
        rows="20"
        placeholder="여기에 의견을 적어주세요."
      ></textarea>
    </label>
  </div>
</form>

Dialog 요소란?

<dialog> 요소는 모달 다이얼로그를 구현하는 데 사용됩니다. showModal()과 close() 메서드를 이용해 다이얼로그를 제어할 수 있습니다.

Dialog 요소 예제

<dialog class="panel-dialog" aria-labelledby="event">
  <h2 id="event">깜짝 혜택</h2>
  <p>모달창 내용</p>
  <button type="button" class="close-dialog">닫기</button>
</dialog>

• showModal() : 다이얼로그를 모달로 표시합니다.
• close() : 다이얼로그를 닫습니다.

JavaScript를 이용한 Dialog 제어

document.addEventListener('DOMContentLoaded', () => {
  const showDialogButton = document.querySelector('.show-dialog');
  const closeDialogButton = document.querySelector('.close-dialog');
  const dialog = document.querySelector('.panel-dialog');

  const showDialog = () => dialog.showModal();
  const closeDialog = () => dialog.close();

  showDialogButton.addEventListener('click', showDialog);
  closeDialogButton.addEventListener('click', closeDialog);
});

Popover 속성이란?

HTML5의 popover 속성을 사용하면 추가적인 JavaScript 없이 팝업을 쉽게 구현할 수 있습니다.

Popover 속성 예제

<button popovertarget="popoverContent" type="button" class="button-popover">팝오버 보기</button>
<div popover id="popoverContent">
  <p>팝오버 내용</p>
</div>

• popovertarget : 버튼을 클릭하면 해당 ID를 가진 popover 요소가 표시됩니다.

정리

• button, select, textarea뿐만 아니라 dialog와 popover 요소도 효과적인 사용자 인터페이스 구성에 중요합니다.
• dialog는 JavaScript와 함께 활용하여 동적인 모달 창을 만들 수 있습니다.
• popover 속성을 사용하면 JavaScript 없이도 간단한 팝업 UI를 구현할 수 있습니다.
• 접근성을 고려하여 aria-labelledby, aria-hidden 등의 속성을 활용하는 것이 중요합니다.

이번 학습을 통해 다양한 HTML 요소의 활용법을 배웠으며, 이를 실전 프로젝트에 적용하는 것이 중요하다는 점을 다시 한번 깨달았습니다!