개발을 하다보면, 기획 및 디자인에, 레이어 팝업을 사용하는 디자인이 꽤나 많다. 자 생각해보자. 그러면 우리 개발자들은 레이어 팝업을 만들기 위해서 개발을 엄청 해왔다. 하지만 말이다. 뭐 특정 라이브러리를 사용하지 않는 이상, 꽤나 귀찮은 일이다. 팝업을 만드는 경우에, 크롬, 엣지, 사파리 등등을 다 지원해야 하기때문에, css를 까닥 잘못했다가는 제대로 만들어지지 않는 경우가 있다. 그것 뿐인가? 포커스를 생각해보자. 일반사용자가 tab을 이용하여, 하단에 노출되어있는 엘리먼트에 접근을 하는 것을 막기 위하여, click및 focus를 막기 위한, inert속성을 적용 해야하며, 해당 팝업이 닫혔을 때, 포커스를 되돌려 주어야 한다. 스크롤 조작때문이라도, 이렇게 진행 하는 것이 맞다. 아주 귀찮은 일이며, 매 프로젝트 마다 해야한다. 이러한 귀찮음을 한번에 해결해 줄 dialog라는 태그가 있다! 당연하게도 ie는 안되니, polyfill을 찾아야 한다. dialog 자 간단하게, 사용법 먼저 확인하자. 간단하게, HTMLDialogElement showModal, show, close 함수를 제공한다. 위에서 확인하면 알듯이, showModal은 전체화면을 덮으며, 최상위에 노출이 되고, show는 노출은 되나, 최상위는 아니다. showModal이후에 show를 호출하는 행위는 해서는 안된다. close는 당연하게도 팝업을 닫는 행위를 진행한다. close이벤트 와 cancel이벤트를 제공을 하며, cancel의 경우 esc를 눌렀을 때의 이벤트며, 해당 창을 닫으며, close 발생 시키기에, 해당 기능이 필요 없다면, preventDefault를 사용하면 된다. form method="dialog" 우리가 팝업을 왜 쓰나? 알림용도로만 사용 하는가? 그렇지 않다. 사용자의 입력을 받을때에도 사용 한다. 그거 아는가? form에 method에 get, post만 알고 있을 것이다. 이제 dialog도 생