이번 로또 미션에서 이런 모달창을 구현해야했다.
시맨틱 태그를 최대한 활용하고 싶어서 <dialog> 태그를 사용하기로했다.
<dialog>: 기본적으로 open 이라는 boolean 속성을 가지고있으며 이 속성에 따라 보여지고 안보여지고가 정해진다.showModal():<dialog>태그에 open 속성을 추가함으로써 모달창처럼 top layer에 띠운다.close():<dialog>태그에서 open 속성을 삭제함으로써 모달창을 닫아주는 인스턴스 메서드이다.::backdrop CSS: 뷰포트 크기의 상자로, 최상위 레이어에서 표시되는 모든 요소 바로 아래에 렌더링된다. deem을 만들기 위해 따로 html 요소를 만들 필요 없다.
위와 같은 유용한 인스턴스 메서드,CSS를 이용해 쉽게 모달창을 구현 할 수 있다.
<body>
<dialog id="modal">
<!-- dialog contents -->
</dialog>
</body>#modal {
display: flex;
}처음에 이렇게 구현했는데 showModal(),close()를 정상적으로 호출해도 <dialog>창이 계속 떠있었다.
#modal에 넣어둔 display: flex; css 속성 때문에, showModal()을 하기도 전에 브라우저에 dialog가 렌더링되어있었다. 심지어 close()를 해도 이 css 속성 때문에 닫히지 않았다.
이유는 css cascading,브라우저 동작 방식,브라우저 기본 스타일의 충돌 때문인것같다...
css cascading
- 인라인 스타일: HTML 요소에 직접 적용된 스타일 (style 속성 사용)이 가장 높은 우선순위를 가진다.
- ID 선택자: #id 형태의 선택자가 다음으로 높은 우선순위를 가집니다.
- 클래스, 의사 클래스 및 속성 선택자: .class, :pseudo-class, [attribute] 형태의 선택자가 이에 해당합니다.
- 요소(태그) 및 의사 요소 선택자: element, ::pseudo-element 형태의 선택자입니다.
- 범용 선택자 (*), 관계 선택자 (+, >, ~): 가장 낮은 우선순위를 가집니다.
- 브라우저 기본 스타일 : 제일 꼴지다.
⚠️
<dialog open>이 cascading에서 속성 선택자 css로 작동해서 그보다 우선순위인 ID 선택자 CSS에게 먹혀서(?) 안되는건 줄 알았는데,<dialog>태그의 showModal,close 작동은 css cascading과 관련 없다고한다..
해결 방법
#modal {
/* display: flex; 를 제외한 나머지 CSS들 */
}
dialog:open {
display: flex;
}이렇게 display css를 속성 선택자 css로 빼왔더니 showModal(),close()가 제대로 작동했다.
`
참고 링크
MDN |<dialog>: 대화 상자 요소
MDN | HTMLDialogElement: showModal() 메서드
MDN | CSS ::backdrop
MDN | HTMLDialogElement: close() method
프론트엔드 개발자