LittleDeveloper

아직도 div로 모달을 만드는 당신! 여기를 보세요 - dialog의 모든 것 본문

html

아직도 div로 모달을 만드는 당신! 여기를 보세요 - dialog의 모든 것

lemonjelly 2023. 4. 6. 19:51

✨모달을 만들자✨

  • 레벨1에서 모달을 구현했던 기억을 떠올려볼까요?
  1. 로또 미션 -> 모달 창에서 당첨 결과 확인하는 기능
  2. 점심 뭐먹지 미션 -> 모달 창에서 음식점 추가하는 기능
  3. 영화 리뷰 미션 -> 모달 창에서 영화의 상세정보를 조회하는 기능

매 순간 우리는 모달과 함께 했던 것을 알 수 있습니다..
모달창을 만들면서 다들 한 번쯤은 고민이 있었을 것이라 생각해요.

모달의 디자인은 어떤 식으로 구현할 것이며,
모달에 이벤트는 또 어떻게 부여할 것인지.. 다양한 고민들이 있을 텐데요,
이러한 고민들을 해소할 수 있는 멋쟁이 태그, 바로 dialog 태그에 대해서 한번 알아봅시다!

💭나에게도 이름이 있어요 - dialog 태그

div 지옥 vs header, nav, main, footer···

  • 시맨틱 태그(Semantic tag)라는 개념은 HTML5에서 처음 등장한 태그들입니다.
  • 우리는 이제 태그 이름만 봐도, '아, 이게 어디 위치에 있을 것이고, 어떤 정보를 포함하겠구나!' 라는 감이 딱 오죠.
  • 만약 모달과 관련된 태그가 있다면, '아, 이 태그 내의 정보는 모달 창에서 보일 것이고, 모달 창을 열고 닫을 수 있겠구나!' 라는 느낌이 딱 올 거예요.
  • dialog가 바로 그 모달창에 대한 시맨틱 태그입니다!

😮그런 태그가 있구나.. 그래도 div에 class="modal" 붙여서 쓸래...

  • 물론 모달창을 만들기 위해 dialog를 꼭 쓸 필요는 없어요!
  • 하지만 <div class="header"></div> 를 쓰는 대신 header 태그를 쓰고 계시다면, 오늘부터 dialog를 써보는 것을 추천합니다.
    • (단순히 태그명을 바꾸는 행위가 아니라, 웹 문서를접근성 좋은 요소로 구성하는데 필요하기 때문이에요!)

🔎About dialog

이름이 왜 dialog야?

  • 잠깐, 모달창에 대한 태그라면서 왜 태그 이름이 modal이 아닌 거죠? (굉장히 불편..)
  • 사실 dialog 태그는 '사용자와 대화하는 상자' 라는 의미를 지니고 있어요.
    • 이 대화에는 경고 표시, 검사기, 상세 정보 조회 등등이 있을 거예요.

따끈따끈한 신생 태그

호환성 준비 완료!

  • 2014년에 탄생한 dialog 태그는 모달(modal), 다이얼로그(dialogue), **팝업(pop-up)**을 쉽게 생성하기 위해 만들어졌어요.
  • 그런데 이 태그에는 치명적인 한계가 있었으니.. 이 태그를 모든 브라우저에서 지원하지 않았기 때문에, Edge에서는 dialog가 동작하지만 FireFox에서는 동작하지 않는 이슈가 있었죠.
  • 그런데 2022년 하반기, 드디어 FireFox와 Safari에서 <dialog>를 지원하게 되어, 이제 모든 브라우저에서 <dialog>태그를 안정적으로 쓸 수 있답니다!

dialog 제대로 활용하기

모달 창 열고 닫기 (show, close 함수)

  • 어떤 요소를 클릭해서 모달 창을 열고 닫는 예시입니다.
const openButton = document.querySelector("open-button"); // 모달을 열기 위한 버튼
const dialog = document.getElementById("myDialog"); // 모달 창
const closeButton = document.querySelector("close-button"); // 모달을 닫기 위한 버튼

openButton.addEventListener('click', () => {
  dialog.show();
});

closeButton.addEventListener('click', () => {
  dialog.close();
});
  • 위와 같이 dialog에 대한 dom 객체를 가져와서, 이 객체에 내장된 show, close 함수를 이용해 모달 창을 열고 닫을 수 있어요.

showModal() vs show() 의 차이?

  • showModal()을 이용해 모달 창(대화 상자)를 열면, 사용자는 모달 창 외의 다른 요소들과 상호작용 할 수 없어요.
  • 반면 show() 를 사용한다면, 모달 창이 열려 있어도 사용자는 다른 요소들과 상호작용 할 수 있습니다.
  • showModal()는 언제 쓸까?
    • 모달이 아닌 팝업 외에, 기존의 전체 페이지를 덮는 모달이 필요하다면 showModal()을 사용하는 것이 바람직합니다!

접근성 및 키보드 사용성에 유리해!

모달 내 버튼 focus

  • show 함수로 모달 창을 열고 나면, 모달 창의 (닫기)버튼이 자동으로 focus되는 것을 알 수 있어요.
  • 따라서 ESC 버튼 등의 키보드 동작으로, 모달 창을 매우 손쉽게 닫을 수 있다는 장점이 있죠.
  • dialog.close() 로 모달을 닫으면, focus가 이전에 focus를 맞춘 요소(예를 들어 모달 열기 버튼)로 다시 이동합니다.

🎨CSS 디테일

::backdrop 의사 요소 제공

/* 크롬 유저 에이전트 스타일에 포함된다. */
    dialog::backdrop {
      position: fixed;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      background: rgba(0, 0, 0, 0.1);
    }
  • <div class="modal-backdrop"></div> 으로 모달 뒤 배경을 처리했던 경험이 있나요? (me.. 양심선언)
  • 모달창이 열렸을 때 모달창(dialog) 밖의 배경을 반투명한 스타일로 변경하고 싶다면, dialog 요소가 제공하는 ::backdrop css 선택자를 사용해보는 것은 어떤가요?
    (⚠주의: ::backdrop css 선택자는 Safari에서 작동하지 않음..)

생각했던 것 이상으로 기능이 많은 dialog 태그!
아직 사용하지 않았다면 리팩터링 단계에서 사용해보는 것은 어떠신가요?🙂😄

📚Reference