[{"data":1,"prerenderedAt":5910},["ShallowReactive",2],{"nav-global":3,"doc-\u002Fdevelop\u002Fhtml\u002Felements\u002Fdialog":579,"nav":5751,"surround-\u002Fdevelop\u002Fhtml\u002Felements\u002Fdialog":5907},[4,16,27,453,477,563],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":15},"Planning","i-vscode-icons:file-type-html","\u002Fplan","1.plan",[10],{"title":11,"path":12,"stem":13,"icon":14},"프로젝트 로드맵 작성 가이드","\u002Fplan\u002Fproject-roadmap","1.plan\u002Fproject-roadmap","i-heroicons-map",false,{"title":17,"icon":18,"path":19,"stem":20,"children":21,"page":15},"Design","i-vscode-icons-file-type-image","\u002Fdesign","2.design",[22],{"title":23,"path":24,"stem":25,"icon":26},"디자인 시스템 구축 가이드","\u002Fdesign\u002Fdesign-system-guide","2.design\u002F1.design-system-guide","i-heroicons-book-open",{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":15},"Development","i-heroicons-code-bracket-square","\u002Fdevelop","3.develop",[33,43,427],{"title":34,"redirect":35,"icon":36,"path":37,"stem":38,"children":39,"page":15},"MarkDown","\u002Fdevelop\u002Fmarkdown\u002Fmarkdown","i-vscode-icons-file-type-markdown","\u002Fdevelop\u002Fmarkdown","3.develop\u002F0.markdown",[40],{"title":41,"path":35,"stem":42,"icon":36},"Markdown 필수 문법 완전 정복","3.develop\u002F0.markdown\u002Fmarkdown",{"title":44,"path":45,"stem":46,"children":47,"page":15},"Html","\u002Fdevelop\u002Fhtml","3.develop\u002F1.html",[48,423],{"title":49,"path":50,"stem":51,"children":52,"icon":54},"Elements","\u002Fdevelop\u002Fhtml\u002Felements","3.develop\u002F1.html\u002F1.elements\u002F0.index",[53,55,59,63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167,171,175,179,183,187,191,195,199,203,207,211,215,219,223,227,231,235,239,243,247,251,255,259,263,267,271,275,279,283,287,291,295,299,303,307,311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,371,375,379,383,387,391,395,399,403,407,411,415,419],{"title":49,"path":50,"stem":51,"icon":54},"i-vscode-icons-file-type-html",{"title":56,"path":57,"stem":58},"\u003Ca>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fa","3.develop\u002F1.html\u002F1.elements\u002Fa",{"title":60,"path":61,"stem":62},"\u003Cabbr>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fabbr","3.develop\u002F1.html\u002F1.elements\u002Fabbr",{"title":64,"path":65,"stem":66},"\u003Caddress>","\u002Fdevelop\u002Fhtml\u002Felements\u002Faddress","3.develop\u002F1.html\u002F1.elements\u002Faddress",{"title":68,"path":69,"stem":70},"\u003Carticle>","\u002Fdevelop\u002Fhtml\u002Felements\u002Farticle","3.develop\u002F1.html\u002F1.elements\u002Farticle",{"title":72,"path":73,"stem":74},"\u003Caside>: 별도 구획 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Faside","3.develop\u002F1.html\u002F1.elements\u002Faside",{"title":76,"path":77,"stem":78},"\u003Cb>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fb","3.develop\u002F1.html\u002F1.elements\u002Fb",{"title":80,"path":81,"stem":82},"\u003Cbase>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fbase","3.develop\u002F1.html\u002F1.elements\u002Fbase",{"title":84,"path":85,"stem":86},"\u003Cbdo>: 양방향 텍스트 재정의 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fbdo","3.develop\u002F1.html\u002F1.elements\u002Fbdo",{"title":88,"path":89,"stem":90},"\u003Cblockquote>: 인용 블록 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fblockquote","3.develop\u002F1.html\u002F1.elements\u002Fblockquote",{"title":92,"path":93,"stem":94},"\u003Cbody>: 문서 본문 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fbody","3.develop\u002F1.html\u002F1.elements\u002Fbody",{"title":96,"path":97,"stem":98},"\u003Cbr>: 줄바꿈 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fbr","3.develop\u002F1.html\u002F1.elements\u002Fbr",{"title":100,"path":101,"stem":102},"\u003Cbutton>: 버튼 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fbutton","3.develop\u002F1.html\u002F1.elements\u002Fbutton",{"title":104,"path":105,"stem":106},"\u003Ccanvas>: 그래픽 캔버스 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fcanvas","3.develop\u002F1.html\u002F1.elements\u002Fcanvas",{"title":108,"path":109,"stem":110},"\u003Ccaption>: 표 설명 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fcaption","3.develop\u002F1.html\u002F1.elements\u002Fcaption",{"title":112,"path":113,"stem":114},"\u003Ccenter>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fcenter","3.develop\u002F1.html\u002F1.elements\u002Fcenter",{"title":116,"path":117,"stem":118},"\u003Ccite>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fcite","3.develop\u002F1.html\u002F1.elements\u002Fcite",{"title":120,"path":121,"stem":122},"\u003Ccode>: 인라인 코드 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fcode","3.develop\u002F1.html\u002F1.elements\u002Fcode",{"title":124,"path":125,"stem":126},"\u003Cdata>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fdata","3.develop\u002F1.html\u002F1.elements\u002Fdata",{"title":128,"path":129,"stem":130},"\u003Cdatalist>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fdatalist","3.develop\u002F1.html\u002F1.elements\u002Fdatalist",{"title":132,"path":133,"stem":134},"\u003Cdd> 설명 세부정보 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fdd","3.develop\u002F1.html\u002F1.elements\u002Fdd",{"title":136,"path":137,"stem":138},"\u003Cdel>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fdel","3.develop\u002F1.html\u002F1.elements\u002Fdel",{"title":140,"path":141,"stem":142},"\u003Cdetails>: 세부 정보 공개 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fdetails","3.develop\u002F1.html\u002F1.elements\u002Fdetails",{"title":144,"path":145,"stem":146},"\u003Cdfn>: 정의 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fdfn","3.develop\u002F1.html\u002F1.elements\u002Fdfn",{"title":148,"path":149,"stem":150},"\u003Cdialog>: 대화 상자 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fdialog","3.develop\u002F1.html\u002F1.elements\u002Fdialog",{"title":152,"path":153,"stem":154},"\u003Cdiv>: 콘텐츠 구분 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fdiv","3.develop\u002F1.html\u002F1.elements\u002Fdiv",{"title":156,"path":157,"stem":158},"\u003Cdl> 설명 목록 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fdl","3.develop\u002F1.html\u002F1.elements\u002Fdl",{"title":160,"path":161,"stem":162},"\u003Cdt>: 설명 용어 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fdt","3.develop\u002F1.html\u002F1.elements\u002Fdt",{"title":164,"path":165,"stem":166},"\u003Cem>: 강세 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fem","3.develop\u002F1.html\u002F1.elements\u002Fem",{"title":168,"path":169,"stem":170},"\u003Cembed>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fembed","3.develop\u002F1.html\u002F1.elements\u002Fembed",{"title":172,"path":173,"stem":174},"\u003Cfieldset>: 필드셋 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Ffieldset","3.develop\u002F1.html\u002F1.elements\u002Ffieldset",{"title":176,"path":177,"stem":178},"\u003Cfigcaption>","\u002Fdevelop\u002Fhtml\u002Felements\u002Ffigcaption","3.develop\u002F1.html\u002F1.elements\u002Ffigcaption",{"title":180,"path":181,"stem":182},"\u003Cfigure>","\u002Fdevelop\u002Fhtml\u002Felements\u002Ffigure","3.develop\u002F1.html\u002F1.elements\u002Ffigure",{"title":184,"path":185,"stem":186},"\u003Cfooter>","\u002Fdevelop\u002Fhtml\u002Felements\u002Ffooter","3.develop\u002F1.html\u002F1.elements\u002Ffooter",{"title":188,"path":189,"stem":190},"\u003Cform>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fform","3.develop\u002F1.html\u002F1.elements\u002Fform",{"title":192,"path":193,"stem":194},"\u003Cframeset>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fframeset","3.develop\u002F1.html\u002F1.elements\u002Fframeset",{"title":196,"path":197,"stem":198},"\u003Chead>: 문서 메타데이터 (헤더) 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fhead","3.develop\u002F1.html\u002F1.elements\u002Fhead",{"title":200,"path":201,"stem":202},"\u003Cheader>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fheader","3.develop\u002F1.html\u002F1.elements\u002Fheader",{"title":204,"path":205,"stem":206},"\u003Ch1>–\u003Ch6>: HTML 구획 제목 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fheading_elements","3.develop\u002F1.html\u002F1.elements\u002Fheading_elements",{"title":208,"path":209,"stem":210},"\u003Chgroup>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fhgroup","3.develop\u002F1.html\u002F1.elements\u002Fhgroup",{"title":212,"path":213,"stem":214},"\u003Chr>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fhr","3.develop\u002F1.html\u002F1.elements\u002Fhr",{"title":216,"path":217,"stem":218},"\u003Chtml>: HTML 문서 \u002F 루트 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fhtml","3.develop\u002F1.html\u002F1.elements\u002Fhtml",{"title":220,"path":221,"stem":222},"\u003Ci>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fi","3.develop\u002F1.html\u002F1.elements\u002Fi",{"title":224,"path":225,"stem":226},"\u003Cimg>: 이미지 삽입 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fimg","3.develop\u002F1.html\u002F1.elements\u002Fimg",{"title":228,"path":229,"stem":230},"\u003Cins>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fins","3.develop\u002F1.html\u002F1.elements\u002Fins",{"title":232,"path":233,"stem":234},"\u003Ckbd>: 키보드 입력 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fkbd","3.develop\u002F1.html\u002F1.elements\u002Fkbd",{"title":236,"path":237,"stem":238},"\u003Clabel>","\u002Fdevelop\u002Fhtml\u002Felements\u002Flabel","3.develop\u002F1.html\u002F1.elements\u002Flabel",{"title":240,"path":241,"stem":242},"\u003Clegend>","\u002Fdevelop\u002Fhtml\u002Felements\u002Flegend","3.develop\u002F1.html\u002F1.elements\u002Flegend",{"title":244,"path":245,"stem":246},"\u003Cli>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fli","3.develop\u002F1.html\u002F1.elements\u002Fli",{"title":248,"path":249,"stem":250},"\u003Clink>: 외부 리소스 연결 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Flink","3.develop\u002F1.html\u002F1.elements\u002Flink",{"title":252,"path":253,"stem":254},"\u003Cmain>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fmain","3.develop\u002F1.html\u002F1.elements\u002Fmain",{"title":256,"path":257,"stem":258},"\u003Cmap>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fmap","3.develop\u002F1.html\u002F1.elements\u002Fmap",{"title":260,"path":261,"stem":262},"\u003Cmark>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fmark","3.develop\u002F1.html\u002F1.elements\u002Fmark",{"title":264,"path":265,"stem":266},"\u003Cmenu>: 메뉴 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fmenu","3.develop\u002F1.html\u002F1.elements\u002Fmenu",{"title":268,"path":269,"stem":270},"\u003Cmeta>: 문서 레벨 메타데이터 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fmeta","3.develop\u002F1.html\u002F1.elements\u002Fmeta",{"title":272,"path":273,"stem":274},"\u003Cmeter>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fmeter","3.develop\u002F1.html\u002F1.elements\u002Fmeter",{"title":276,"path":277,"stem":278},"\u003Cnav>: 탐색 구획 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fnav","3.develop\u002F1.html\u002F1.elements\u002Fnav",{"title":280,"path":281,"stem":282},"\u003Cnoscript>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fnoscript","3.develop\u002F1.html\u002F1.elements\u002Fnoscript",{"title":284,"path":285,"stem":286},"\u003Cobject>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fobject","3.develop\u002F1.html\u002F1.elements\u002Fobject",{"title":288,"path":289,"stem":290},"\u003Col>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fol","3.develop\u002F1.html\u002F1.elements\u002Fol",{"title":292,"path":293,"stem":294},"\u003Coptgroup>","\u002Fdevelop\u002Fhtml\u002Felements\u002Foptgroup","3.develop\u002F1.html\u002F1.elements\u002Foptgroup",{"title":296,"path":297,"stem":298},"\u003Coption>","\u002Fdevelop\u002Fhtml\u002Felements\u002Foption","3.develop\u002F1.html\u002F1.elements\u002Foption",{"title":300,"path":301,"stem":302},"\u003Coutput>: 출력 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Foutput","3.develop\u002F1.html\u002F1.elements\u002Foutput",{"title":304,"path":305,"stem":306},"\u003Cp>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fp","3.develop\u002F1.html\u002F1.elements\u002Fp",{"title":308,"path":309,"stem":310},"\u003Cpre>: 미리 서식 정의된 텍스트 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fpre","3.develop\u002F1.html\u002F1.elements\u002Fpre",{"title":312,"path":313,"stem":314},"\u003Cprogress>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fprogress","3.develop\u002F1.html\u002F1.elements\u002Fprogress",{"title":316,"path":317,"stem":318},"\u003Cq>: 인라인 인용문 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fq","3.develop\u002F1.html\u002F1.elements\u002Fq",{"title":320,"path":321,"stem":322},"\u003Crb>: 루비 베이스 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Frb","3.develop\u002F1.html\u002F1.elements\u002Frb",{"title":324,"path":325,"stem":326},"\u003Crp>: 루비 대체 괄호 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Frp","3.develop\u002F1.html\u002F1.elements\u002Frp",{"title":328,"path":329,"stem":330},"\u003Crt>: 루비 텍스트 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Frt","3.develop\u002F1.html\u002F1.elements\u002Frt",{"title":332,"path":333,"stem":334},"\u003Crtc>: 루비 텍스트 콘테이너 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Frtc","3.develop\u002F1.html\u002F1.elements\u002Frtc",{"title":336,"path":337,"stem":338},"\u003Cruby>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fruby","3.develop\u002F1.html\u002F1.elements\u002Fruby",{"title":340,"path":341,"stem":342},"\u003Cs>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fs","3.develop\u002F1.html\u002F1.elements\u002Fs",{"title":344,"path":345,"stem":346},"\u003Csamp>: 출력 예시 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fsamp","3.develop\u002F1.html\u002F1.elements\u002Fsamp",{"title":348,"path":349,"stem":350},"\u003Cscript>: 스크립트 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fscript","3.develop\u002F1.html\u002F1.elements\u002Fscript",{"title":352,"path":353,"stem":354},"\u003Csection>: 일반 구획 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fsection","3.develop\u002F1.html\u002F1.elements\u002Fsection",{"title":356,"path":357,"stem":358},"\u003Cslot>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fslot","3.develop\u002F1.html\u002F1.elements\u002Fslot",{"title":360,"path":361,"stem":362},"\u003Csmall>: 덧붙임 글 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fsmall","3.develop\u002F1.html\u002F1.elements\u002Fsmall",{"title":364,"path":365,"stem":366},"\u003Cspan>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fspan","3.develop\u002F1.html\u002F1.elements\u002Fspan",{"title":368,"path":369,"stem":370},"\u003Cstrong>: 강한 중요 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fstrong","3.develop\u002F1.html\u002F1.elements\u002Fstrong",{"title":372,"path":373,"stem":374},"\u003Cstyle>: 스타일 정보 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fstyle","3.develop\u002F1.html\u002F1.elements\u002Fstyle",{"title":376,"path":377,"stem":378},"\u003Csub>: 아래 첨자 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fsub","3.develop\u002F1.html\u002F1.elements\u002Fsub",{"title":380,"path":381,"stem":382},"\u003Ctemplate>: 콘텐츠 템플릿 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Ftemplate","3.develop\u002F1.html\u002F1.elements\u002Ftemplate",{"title":384,"path":385,"stem":386},"\u003Ctfoot>: 표 바닥글 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Ftfoot","3.develop\u002F1.html\u002F1.elements\u002Ftfoot",{"title":388,"path":389,"stem":390},"\u003Cthead>: 표 머릿글 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fthead","3.develop\u002F1.html\u002F1.elements\u002Fthead",{"title":392,"path":393,"stem":394},"\u003Ctime>","\u002Fdevelop\u002Fhtml\u002Felements\u002Ftime","3.develop\u002F1.html\u002F1.elements\u002Ftime",{"title":396,"path":397,"stem":398},"\u003Ctitle>: 문서 제목 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Ftitle","3.develop\u002F1.html\u002F1.elements\u002Ftitle",{"title":400,"path":401,"stem":402},"\u003Ctrack>: 텍스트 트랙 삽입 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Ftrack","3.develop\u002F1.html\u002F1.elements\u002Ftrack",{"title":404,"path":405,"stem":406},"\u003Cu>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fu","3.develop\u002F1.html\u002F1.elements\u002Fu",{"title":408,"path":409,"stem":410},"\u003Cul>","\u002Fdevelop\u002Fhtml\u002Felements\u002Ful","3.develop\u002F1.html\u002F1.elements\u002Ful",{"title":412,"path":413,"stem":414},"\u003Cvar>: 변수 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fvar","3.develop\u002F1.html\u002F1.elements\u002Fvar",{"title":416,"path":417,"stem":418},"\u003Cvideo>: 비디오 삽입 요소","\u002Fdevelop\u002Fhtml\u002Felements\u002Fvideo","3.develop\u002F1.html\u002F1.elements\u002Fvideo",{"title":420,"path":421,"stem":422},"\u003Cwbr>","\u002Fdevelop\u002Fhtml\u002Felements\u002Fwbr","3.develop\u002F1.html\u002F1.elements\u002Fwbr",{"title":424,"path":425,"stem":426,"icon":54},"HTML이란?","\u002Fdevelop\u002Fhtml\u002Fhtml","3.develop\u002F1.html\u002Fhtml",{"title":428,"icon":29,"path":429,"stem":430,"children":431,"page":15},"Frameworks","\u002Fdevelop\u002Fframeworks","3.develop\u002F2.frameworks",[432,442],{"title":433,"icon":434,"path":435,"stem":436,"children":437,"page":15},"React","i-logos-react","\u002Fdevelop\u002Fframeworks\u002Freact","3.develop\u002F2.frameworks\u002F2.react",[438],{"title":439,"path":440,"stem":441,"icon":434},"React 애플리케이션 성능 최적화 기법","\u002Fdevelop\u002Fframeworks\u002Freact\u002Freact-performance-optimization","3.develop\u002F2.frameworks\u002F2.react\u002Freact-performance-optimization",{"title":443,"icon":444,"path":445,"stem":446,"children":447,"page":15},"Nuxt","i-logos-nuxt-icon","\u002Fdevelop\u002Fframeworks\u002Fnuxt","3.develop\u002F2.frameworks\u002F3.nuxt",[448],{"title":449,"path":450,"stem":451,"icon":452},"Nuxt 3 시작하기 가이드","\u002Fdevelop\u002Fframeworks\u002Fnuxt\u002Fnuxt3-intro-guide","3.develop\u002F2.frameworks\u002F3.nuxt\u002Fnuxt3-intro-guide","i-logos-vue",{"title":454,"icon":455,"path":456,"stem":457,"children":458,"page":15},"Env","i-vscode-icons-folder-type-tools","\u002Fdevops","4.devops",[459],{"title":460,"icon":455,"path":461,"stem":462,"children":463},"OS","\u002Fdevops\u002Fos","4.devops\u002F1.os\u002Findex",[464,467],{"title":465,"path":461,"stem":462,"icon":466},"Operation System 설정","i-heroicons-cog-8-tooth",{"title":468,"path":469,"stem":470,"children":471,"page":15},"Linux","\u002Fdevops\u002Fos\u002Flinux","4.devops\u002F1.os\u002F1.linux",[472],{"title":473,"path":474,"stem":475,"icon":476},"운영 체제 비교 - 윈도우, 리눅스, 맥OS","\u002Fdevops\u002Fos\u002Flinux\u002Fwindows_linux_macos","4.devops\u002F1.os\u002F1.linux\u002Fwindows_linux_macOS","i-logos-linux-tux",{"title":478,"icon":479,"path":480,"stem":481,"children":482,"page":15},"AI","i-heroicons-sparkles","\u002Fai","5.ai",[483,492,513],{"title":428,"icon":484,"path":485,"stem":486,"children":487,"page":15},"i-vscode-icons-file-type-robotframework","\u002Fai\u002Fframeworks","5.ai\u002F3.frameworks",[488],{"title":489,"path":490,"stem":491,"icon":484},"gstack","\u002Fai\u002Fframeworks\u002Fgstack","5.ai\u002F3.frameworks\u002Fgstack",{"title":493,"path":494,"stem":495,"children":496,"page":15},"Prompt","\u002Fai\u002Fprompt","5.ai\u002F4.prompt",[497],{"title":498,"path":499,"stem":500,"children":501,"page":15},"Claude","\u002Fai\u002Fprompt\u002Fclaude","5.ai\u002F4.prompt\u002F1.claude",[502],{"title":503,"redirect":504,"icon":505,"path":504,"stem":506,"children":507,"page":15},"Claude Code","\u002Fai\u002Fprompt\u002Fclaude\u002Fclaude-code","i-logos-anthropic-icon","5.ai\u002F4.prompt\u002F1.claude\u002Fclaude-code",[508],{"title":509,"path":510,"stem":511,"icon":512},"Claude Code MCP 서버 자동 실행 설정","\u002Fai\u002Fprompt\u002Fclaude\u002Fclaude-code\u002Fmcp-server-autostart-configuration","5.ai\u002F4.prompt\u002F1.claude\u002Fclaude-code\u002Fmcp-server-autostart-configuration","i-heroicons-server",{"title":514,"redirect":515,"icon":516,"path":517,"stem":518,"children":519,"page":15},"AI Personas","\u002Fai\u002Fpersonas\u002F01-system-architect","i-heroicons-users","\u002Fai\u002Fpersonas","5.ai\u002F5.personas",[520,523,527,531,535,539,543,547,551,555,559],{"title":521,"path":515,"stem":522},"🏗️ System Architect","5.ai\u002F5.personas\u002F01-system-architect",{"title":524,"path":525,"stem":526},"🎨 ui accessibility expert","\u002Fai\u002Fpersonas\u002F02-ui-accessibility-expert","5.ai\u002F5.personas\u002F02-ui-accessibility-expert",{"title":528,"path":529,"stem":530},"⚙️ Backend API Infrastructure Specialist","\u002Fai\u002Fpersonas\u002F03-backend-api-infrastructure","5.ai\u002F5.personas\u002F03-backend-api-infrastructure",{"title":532,"path":533,"stem":534},"🛡️ Security Threat Modeling Expert System","\u002Fai\u002Fpersonas\u002F04-security-threat-modeling-expert","5.ai\u002F5.personas\u002F04-security-threat-modeling-expert",{"title":536,"path":537,"stem":538},"⚡ Performance-Optimizer AI Assist","\u002Fai\u002Fpersonas\u002F05-performance-optimizer","5.ai\u002F5.personas\u002F05-performance-optimizer",{"title":540,"path":541,"stem":542},"🔍 Root Cause Analyzer AI Persona","\u002Fai\u002Fpersonas\u002F11-root-cause-analyzer","5.ai\u002F5.personas\u002F11-root-cause-analyzer",{"title":544,"path":545,"stem":546},"🧪 QA Testing Expert AI Assistant","\u002Fai\u002Fpersonas\u002F12-quality-assurance-testing-expert","5.ai\u002F5.personas\u002F12-quality-assurance-testing-expert",{"title":548,"path":549,"stem":550},"🔄 Code Refactoring Specialist AI Assistant","\u002Fai\u002Fpersonas\u002F13-code-refactoring-specialist","5.ai\u002F5.personas\u002F13-code-refactoring-specialist",{"title":552,"path":553,"stem":554},"🚀 DevOps Infrastructure Expert AI Assistant","\u002Fai\u002Fpersonas\u002F14-infra-automation-expert","5.ai\u002F5.personas\u002F14-infra-automation-expert",{"title":556,"path":557,"stem":558},"👨‍🏫 Educational-Guidance-Mentor Persona System","\u002Fai\u002Fpersonas\u002F21-educational-guidance-mentor","5.ai\u002F5.personas\u002F21-educational-guidance-mentor",{"title":560,"path":561,"stem":562},"✍️ Documentation Expert AI Assistant","\u002Fai\u002Fpersonas\u002F22-technical-documentation-expert","5.ai\u002F5.personas\u002F22-technical-documentation-expert",{"title":564,"icon":565,"path":566,"stem":567,"children":568,"page":15},"Blog","i-heroicons-newspaper","\u002Fblog","6.blog",[569],{"title":570,"path":571,"stem":572,"children":573,"page":15},"2024","\u002Fblog\u002F2024","6.blog\u002F2024",[574],{"title":575,"path":576,"stem":577,"icon":578},"기록의 중요성","\u002Fblog\u002F2024\u002F2024-02-15-blog","6.blog\u002F2024\u002F2024-02-15-blog","i-heroicons-pencil-square",{"id":580,"title":148,"authors":581,"body":582,"description":5743,"draft":15,"extension":5744,"head":581,"icon":581,"image":581,"meta":5745,"navigation":1456,"path":149,"publishedAt":581,"seo":5749,"stem":150,"tags":581,"updatedAt":581,"__hash__":5750},"docs\u002F3.develop\u002F1.html\u002F1.elements\u002Fdialog.md",null,{"type":583,"value":584,"toc":5726},"minimark",[585,602,608,643,647,655,677,837,840,908,911,928,931,953,959,1016,1019,1024,1044,1141,1145,1152,1167,1171,1189,1197,1199,1262,1266,1271,1363,1367,1380,1543,1546,1549,1553,1570,1590,1606,1609,1910,1913,2207,2210,2213,2245,2262,2274,2283,2287,2300,2570,2610,2613,2755,2758,2768,2772,2780,2783,2808,3230,3426,3429,3476,3788,3791,3794,3804,3808,3853,3856,3898,3921,3925,3931,4016,4019,4023,4032,4106,4109,4148,4173,4629,4645,4648,4654,4782,4785,4788,4826,4830,4836,4876,4879,4882,4889,4959,4962,4980,5431,5434,5440,5562,5566,5568,5572,5660,5663,5667,5671,5722],[586,587,588,595,596,601],"p",{},[589,590,591],"strong",{},[592,593,594],"code",{},"\u003Cdialog>"," ",[597,598,600],"a",{"href":599},"\u002Fko\u002Fdocs\u002FWeb\u002FHTML","HTML"," 요소는 모달 또는 비모달 대화 상자나 닫을 수 있는 알림창, 검사기, 하위 창과 같은 상호작용 가능한 컴포넌트를 나타냅니다.",[586,603,604,605,607],{},"HTML ",[592,606,594],{}," 요소는 모달 및 비모달 대화 상자를 만드는 데 사용됩니다. 모달 대화 상자는 페이지의 나머지 부분과 상호작용을 중단시키는 반면, 비모달 대화 상자는 페이지의 나머지 부분과 상호작용을 허용합니다.",[586,609,610,612,613,616,617,620,621,624,625,627,628,630,631,637,638,642],{},[592,611,594],{}," 요소를 표시하려면 JavaScript를 사용해야 합니다. 모달 대화 상자를 표시하려면 ",[592,614,615],{},"HTMLDialogElement.showModal()"," 메서드를 사용하고, 비모달 대화 상자를 표시하려면 ",[592,618,619],{},"HTMLDialogElement.show()"," 메서드를 사용합니다. 대화 상자는 ",[592,622,623],{},"HTMLDialogElement.close()"," 메서드를 사용하거나 ",[592,626,594],{}," 요소 내에 중첩된 ",[592,629,188],{},"을 제출할 때 ",[597,632,634],{"href":633},"\u002Fdevelop\u002Fhtml\u002Felements\u002Fform#method",[592,635,636],{},"dialog"," 메서드를 이용하여 닫을 수 있습니다. 모달 대화 상자는 ",[639,640,641],"kbd",{},"Esc"," 키를 눌러 닫을 수도 있습니다.",[644,645,646],"h2",{"id":646},"특성",[586,648,649,650,654],{},"이 요소는 ",[597,651,653],{"href":652},"\u002Fko\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes","전역 특성","을 포함합니다.",[656,657,658],"blockquote",{},[586,659,660,664,665,668,669,671,672,676],{},[661,662,663],"span",{},"!WARNING","\n이 ",[592,666,667],{},"tabindex"," 특성은 ",[592,670,594],{}," 요소에 사용하면 안 됩니다. ",[597,673,675],{"href":674},"#%EC%82%AC%EC%9A%A9_%EC%9D%BC%EB%9E%8C","사용 일람","을 참고하세요.",[678,679,680,794],"ul",{},[681,682,683,686],"li",{},[592,684,685],{},"closedby",[678,687,688],{},[681,689,690,691,693,694,733,736,737,769,771,773,774,776,777],{},": ",[592,692,594],{}," 요소를 닫는 데 사용할 수 있는 사용자 작업 유형을 지정합니다. 이 특성은 대화 상자를 닫을 수 있는 세 가지 방법을 구분합니다.",[678,695,696,707,713],{},[681,697,698,699,701,702,706],{},"간편 닫기 사용자 작업. 사용자가 대화 상자 외부를 클릭하거나 탭할 때 ",[592,700,594],{},"가 닫힙니다. 이는 ",[597,703,705],{"href":704},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FPopover_API\u002FUsing#auto_state_and_light_dismiss","\"자동\" 상태 팝오버의 \"간편 닫기\" 동작","과 동일합니다.",[681,708,709,710,712],{},"플랫폼별 사용자 작업. 데스크톱 플랫폼에서 ",[639,711,641],{}," 키를 누르거나 모바일 플랫폼에서 \"뒤로 가기\" 또는 \"닫기\" 제스처와 같은 동작입니다.",[681,714,715,716,718,719,725,726,729,730,732],{},"개발자가 지정한 메커니즘. ",[592,717,623],{},"를 호출하는 ",[597,720,722],{"href":721},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FElement\u002Fclick_event",[592,723,724],{},"click"," 핸들러가 있는 ",[592,727,728],{},"\u003Cbutton>"," 또는 ",[592,731,188],{}," 제출과 같은 메커니즘입니다.",[734,735],"br",{},"가능한 값은 다음과 같습니다.",[678,738,739,749,759],{},[681,740,741,744],{},[592,742,743],{},"any",[678,745,746],{},[681,747,748],{},": 세 가지 방법 중 어떤 방법으로든 대화 상자를 닫을 수 있습니다.",[681,750,751,754],{},[592,752,753],{},"closerequest",[678,755,756],{},[681,757,758],{},": 플랫폼별 사용자 동작 또는 개발자가 지정한 메커니즘으로 대화 상자를 닫을 수 있습니다.",[681,760,761,764],{},[592,762,763],{},"none",[678,765,766],{},[681,767,768],{},": 개발자가 지정한 메커니즘으로만 대화 상자를 닫을 수 있습니다.",[734,770],{},[592,772,594],{}," 요소에 유효한 ",[592,775,685],{}," 값이 지정되지 않은 경우,",[678,778,779,788],{},[681,780,781,783,784,787],{},[592,782,615],{},"을 사용하여 열었다면 ",[592,785,786],{},"\"closerequest\""," 값처럼 동작합니다.",[681,789,790,791,787],{},"그렇지 않으면 ",[592,792,793],{},"\"none\"",[681,795,796,799],{},[592,797,798],{},"open",[678,800,801],{},[681,802,803,804,806,807,809,810,729,813,816,817,819,820,822,823],{},": 대화 상자가 활성화되어 상호 작용할 수 있음을 나타냅니다. ",[592,805,798],{}," 특성이 설정되지 않으면 대화 상자가 사용자에게 표시되지 않습니다.\n대화 상자를 렌더링하려면 ",[592,808,798],{}," 특성 대신 ",[592,811,812],{},".show()",[592,814,815],{},".showModal()"," 메서드를 사용하는 것이 좋습니다. ",[592,818,798],{}," 특성을 사용하여 ",[592,821,594],{},"를 열면 비모달 상태가 됩니다.",[656,824,825],{},[586,826,827,664,830,832,833,836],{},[661,828,829],{},"!NOTE",[592,831,798],{}," 특성의 존재 여부를 토글하여 비모달 대화 상자의 열림 및 닫힘 상태를 전환할 수 있지만, 이 접근 방식은 권장되지 않습니다. 자세한 내용은 ",[592,834,835],{},"HTMLDialogElement.open","을 참조하세요.",[644,838,675],{"id":839},"사용-일람",[678,841,842,871,884,900],{},[681,843,604,844,846,847,850,851,857,858,860,861,863,864,866,867,870],{},[592,845,188],{}," 요소는 ",[592,848,849],{},"method=\"dialog\""," 특성이 있거나 양식 제출 버튼에 ",[597,852,854],{"href":853},"\u002Fdevelop\u002Fhtml\u002Felements\u002Finput#formmethod",[592,855,856],{},"formmethod=\"dialog\"","가 설정된 경우 대화 상자를 닫는 데 사용할 수 있습니다. ",[592,859,594],{}," 내의 ",[592,862,188],{},"이 ",[592,865,636],{}," 메서드를 통해 제출되면 대화 상자가 닫히고, 폼 컨트롤의 상태가 저장되지만 제출되지는 않으며, ",[592,868,869],{},"HTMLDialogElement.returnValue"," 속성에는 클릭된 버튼의 값이 설정됩니다.",[681,872,873,874,877,878,880,881,883],{},"CSS ",[592,875,876],{},"::backdrop"," 의사 요소를 사용하여 모달 대화 상자의 배경을 스타일링할 수 있습니다. 이 배경은 대화 상자를 ",[592,879,615],{}," 메서드를 사용하여 나타낼 때 ",[592,882,594],{}," 요소 뒤에 표시됩니다. 예를 들어, 이 의사 요소를 사용하여 모달 대화 상자 뒤에 있는 비활성 콘텐츠를 흐리게 하거나, 어둡게 하거나, 가리는 등의 작업을 할 수 있습니다.",[681,885,886,887,893,894,896,897,899],{},"모달 대화 상자를 열 때 사용자가 즉시 상호 작용할 것으로 예상되는 요소에 ",[597,888,890],{"href":889},"\u002Fko\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Fautofocus",[592,891,892],{},"autofocus"," 특성을 추가해야 합니다. 더 즉각적인 상호 작용이 필요한 다른 요소가 없는 경우, 대화 상자 내의 닫기 버튼에 ",[592,895,892],{},"를 추가하거나, 사용자가 대화 상자 자체를 클릭\u002F활성화하여 닫을 것으로 예상되는 경우에는 대화 상자에 직접 ",[592,898,892],{},"를 추가하는 것이 좋습니다.",[681,901,902,904,905,907],{},[592,903,594],{}," 요소는 상호작용하지 않고 포커스를 받지 않으므로 ",[592,906,667],{}," 속성을 추가하지 마세요. 대화 상자 내 닫기 버튼을 포함한 콘텐츠는 포커스를 받을 수 있고 상호작용할 수 있습니다.",[644,909,910],{"id":910},"접근성",[586,912,913,914,916,917,919,920,924,925,927],{},"대화 상자를 구현할 때, 사용자 포커스를 설정하기 가장 적절한 위치를 고려하는 것이 중요합니다. ",[592,915,615],{},"을 사용하여 ",[592,918,594],{},"를 열 때 대화 상자 내부에서 탭 순서상 첫 번째로 포커스 가능한 요소에 포커스가 자동으로 설정됩니다. ",[597,921,922],{"href":889},[592,923,892],{}," 특성을 사용하여 초기 포커스를 명시적으로 지정하면 각 대화 상자에서 가장 적절한 요소에 초기 포커스가 설정되도록 할 수 있습니다. 대화 상자 내에서 초기 포커스를 어디에 설정할지 명확하지 않은 경우, 특히 대화 상자의 내용이 호출 시점에 동적으로 렌더링되는 상황에서는 ",[592,926,594],{}," 요소 자체가 초기 포커스 배치에 가장 적절한 위치가 될 수 있습니다.",[586,929,930],{},"사용자가 대화 상자를 닫을 수 있는 메커니즘을 제공해야 합니다. 모든 사용자가 대화 상자를 닫을 수 있도록 보장하는 가장 강력한 방법은 확인, 취소 또는 닫기 버튼과 같은 명시적 버튼을 포함하는 것입니다.",[586,932,933,934,937,938,940,941,943,944,946,947,949,950,952],{},"기본적으로 ",[592,935,936],{},"showModal()"," 메서드로 호출된 대화 상자는 ",[639,939,641],{}," 키를 눌러 닫을 수 있습니다. 비모달 대화 상자는 기본적으로 ",[639,942,641],{}," 키로 닫히지 않으며, 비모달 대화 상자의 목적에 따라서는 이러한 동작이 필요하지 않을 수 있습니다. 키보드 사용자는 ",[639,945,641],{}," 키가 모달 대화 상자를 닫을 것으로 예상하므로, 이 동작이 구현되고 유지되도록 해야 합니다. 여러 모달 대화 상자가 열려 있는 경우 ",[639,948,641],{}," 키를 누르면 마지막으로 표시된 대화 상자만 닫아야 합니다. ",[592,951,594],{},"를 사용하면 이 동작은 브라우저에서 제공됩니다.",[586,954,955,956,958],{},"다른 요소를 사용하여 대화 상자를 만들 수 있지만, 기본 ",[592,957,594],{}," 요소는 사용성과 접근성 기능을 내장하고 있으므로 다른 요소로 비슷한 기능을 구현할 때는 이러한 특성들을 직접 구현해야 합니다. 사용자가 직접 대화 상자를 구현하는 경우, 모든 예상되는 기본 동작이 지원되는지 확인하고 적절한 레이블 지정 권장 사항을 준수해야 합니다.",[586,960,961,963,964,968,969,971,972,974,975,979,980,983,984,986,987,989,990,993,994,846,996,999,1000,1002,1003,1009,1010,1012,1013,1015],{},[592,962,594],{}," 요소는 ARIA ",[597,965,967],{"href":966},"\u002Fko\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FReference\u002FRoles\u002Fdialog_role","role=\"dialog\""," 특성을 사용하는 사용자 구현 대화 상자와 유사한 방식으로 브라우저에서 처리됩니다. ",[592,970,936],{}," 메서드로 호출된 ",[592,973,594],{}," 요소는 암묵적으로 ",[597,976,978],{"href":977},"\u002Fko\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FReference\u002FAttributes\u002Faria-modal","aria-modal=\"true\"","를 가지고 있는 반면, ",[592,981,982],{},"show()"," 메서드로 호출되거나 ",[592,985,798],{}," 특성을 사용하여 표시되거나 ",[592,988,594],{},"의 기본 ",[592,991,992],{},"display","를 변경하여 표시되는 ",[592,995,594],{},[592,997,998],{},"[aria-modal=\"false\"]","로 노출됩니다. 모달 대화 상자를 구현할 때 ",[592,1001,594],{}," 및 그 콘텐츠를 제외한 모든 것은 ",[597,1004,1006],{"href":1005},"\u002Fko\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Finert",[592,1007,1008],{},"inert"," 특성을 사용하여 비활성화되어야 합니다. ",[592,1011,594],{},"와 ",[592,1014,615],{}," 메서드를 사용하면 이 동작은 브라우저에서 제공됩니다.",[644,1017,1018],{"id":1018},"예제",[1020,1021,1023],"h3",{"id":1022},"html만으로-대화-상자-만들기","HTML만으로 대화 상자 만들기",[586,1025,1026,1027,1029,1030,1032,1033,1035,1036,1039,1040,1043],{},"이 예제는 HTML만을 사용하여 비모달 대화 상자를 만드는 방법을 보여줍니다. ",[592,1028,594],{}," 요소의 불리언 ",[592,1031,798],{}," 특성으로 인해 페이지가 로드될 때 대화 상자가 열린 상태로 나타납니다. ",[592,1034,188],{}," 요소의 ",[592,1037,1038],{},"method"," 특성이 ",[592,1041,1042],{},"\"dialog\"","로 설정되어 있기 때문에 \"확인\" 버튼을 클릭하면 대화 상자가 닫힙니다. 이 경우 JavaScript는 필요하지 않습니다.",[1045,1046,1051],"pre",{"className":1047,"code":1048,"language":1049,"meta":1050,"style":1050},"language-html shiki shiki-themes github-light github-dark","\u003Cdialog open>\n  \u003Cp>안녕하세요, 여러분!\u003C\u002Fp>\n  \u003Cform method=\"dialog\">\n    \u003Cbutton>확인\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Fdialog>\n","html","",[592,1052,1053,1071,1086,1105,1121,1131],{"__ignoreMap":1050},[661,1054,1057,1061,1064,1068],{"class":1055,"line":1056},"line",1,[661,1058,1060],{"class":1059},"sVt8B","\u003C",[661,1062,636],{"class":1063},"s9eBZ",[661,1065,1067],{"class":1066},"sScJk"," open",[661,1069,1070],{"class":1059},">\n",[661,1072,1074,1077,1079,1082,1084],{"class":1055,"line":1073},2,[661,1075,1076],{"class":1059},"  \u003C",[661,1078,586],{"class":1063},[661,1080,1081],{"class":1059},">안녕하세요, 여러분!\u003C\u002F",[661,1083,586],{"class":1063},[661,1085,1070],{"class":1059},[661,1087,1089,1091,1094,1097,1100,1103],{"class":1055,"line":1088},3,[661,1090,1076],{"class":1059},[661,1092,1093],{"class":1063},"form",[661,1095,1096],{"class":1066}," method",[661,1098,1099],{"class":1059},"=",[661,1101,1042],{"class":1102},"sZZnC",[661,1104,1070],{"class":1059},[661,1106,1108,1111,1114,1117,1119],{"class":1055,"line":1107},4,[661,1109,1110],{"class":1059},"    \u003C",[661,1112,1113],{"class":1063},"button",[661,1115,1116],{"class":1059},">확인\u003C\u002F",[661,1118,1113],{"class":1063},[661,1120,1070],{"class":1059},[661,1122,1124,1127,1129],{"class":1055,"line":1123},5,[661,1125,1126],{"class":1059},"  \u003C\u002F",[661,1128,1093],{"class":1063},[661,1130,1070],{"class":1059},[661,1132,1134,1137,1139],{"class":1055,"line":1133},6,[661,1135,1136],{"class":1059},"\u003C\u002F",[661,1138,636],{"class":1063},[661,1140,1070],{"class":1059},[1142,1143,1144],"h4",{"id":1144},"결과",[656,1146,1147],{},[586,1148,1149,1151],{},[661,1150,829],{},"\n결과물을 초기화하려면 페이지를 새로고침 하세요.",[586,1153,1154,1155,1157,1158,1160,1161,1163,1164,1166],{},"이 대화 상자는 ",[592,1156,798],{}," 특성이 있기 때문에 처음에 열려 있습니다. ",[592,1159,798],{}," 특성을 사용하여 표시되는 대화 상자는 비모달입니다. \"확인\"을 클릭한 후 대화 상자가 닫히고 결과창은 비어있습니다. 대화 상자가 닫히면 다시 열 수 있는 방법이 제공되지 않습니다. 이러한 이유로 비모달 대화 상자를 표시하는 데 선호되는 방법은 ",[592,1162,619],{}," 메서드를 사용하는 것입니다. 불리언 ",[592,1165,798],{}," 특성을 추가하거나 제거하여 대화 상자의 표시를 전환할 수 있지만, 이는 권장되는 방법이 아닙니다.",[1020,1168,1170],{"id":1169},"모달-대화-상자-만들기","모달 대화 상자 만들기",[586,1172,1173,1174,1178,1179,1181,1182,1184,1185,1188],{},"이 예제는 ",[597,1175,1177],{"href":1176},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002Fgradient","gradient"," 배경이 있는 모달 대화 상자를 보여줍니다. ",[592,1180,815],{}," 메서드는 \"대화 상자 표시\" 버튼이 클릭될 때 모달 대화 상자를 엽니다. 대화 상자는 ",[639,1183,641],{}," 키를 누르거나 대화 상자 내의 \"닫기\" 버튼이 클릭될 때 ",[592,1186,1187],{},"close()"," 메서드를 통해 닫을 수 있습니다.",[586,1190,1191,1192,1196],{},"대화 상자가 열리면 브라우저는 대화 상자 내에서 포커스를 받을 수 있는 첫 번째 요소에 기본적으로 포커스를 줍니다. 이 예제에서는 ",[597,1193,1194],{"href":889},[592,1195,892],{}," 특성이 \"닫기\" 버튼에 적용되어 대화 상자가 열릴 때 포커스를 받습니다. 이는 대화 상자가 열린 직후에 사용자가 상호 작용할 것으로 예상되는 요소이기 때문입니다.",[1142,1198,600],{"id":1049},[1045,1200,1202],{"className":1047,"code":1201,"language":1049,"meta":1050,"style":1050},"\u003Cdialog>\n  \u003Cbutton autofocus>닫기\u003C\u002Fbutton>\n  \u003Cp>이 모달 대화 상자는 멋진 배경을 가지고 있습니다!\u003C\u002Fp>\n\u003C\u002Fdialog>\n\u003Cbutton>대화 상자 표시\u003C\u002Fbutton>\n",[592,1203,1204,1212,1228,1241,1249],{"__ignoreMap":1050},[661,1205,1206,1208,1210],{"class":1055,"line":1056},[661,1207,1060],{"class":1059},[661,1209,636],{"class":1063},[661,1211,1070],{"class":1059},[661,1213,1214,1216,1218,1221,1224,1226],{"class":1055,"line":1073},[661,1215,1076],{"class":1059},[661,1217,1113],{"class":1063},[661,1219,1220],{"class":1066}," autofocus",[661,1222,1223],{"class":1059},">닫기\u003C\u002F",[661,1225,1113],{"class":1063},[661,1227,1070],{"class":1059},[661,1229,1230,1232,1234,1237,1239],{"class":1055,"line":1088},[661,1231,1076],{"class":1059},[661,1233,586],{"class":1063},[661,1235,1236],{"class":1059},">이 모달 대화 상자는 멋진 배경을 가지고 있습니다!\u003C\u002F",[661,1238,586],{"class":1063},[661,1240,1070],{"class":1059},[661,1242,1243,1245,1247],{"class":1055,"line":1107},[661,1244,1136],{"class":1059},[661,1246,636],{"class":1063},[661,1248,1070],{"class":1059},[661,1250,1251,1253,1255,1258,1260],{"class":1055,"line":1123},[661,1252,1060],{"class":1059},[661,1254,1113],{"class":1063},[661,1256,1257],{"class":1059},">대화 상자 표시\u003C\u002F",[661,1259,1113],{"class":1063},[661,1261,1070],{"class":1059},[1142,1263,1265],{"id":1264},"css","CSS",[586,1267,1268,1270],{},[592,1269,876],{}," 의사 요소를 사용하여 대화 상자의 배경을 스타일링할 수 있습니다.",[1045,1272,1275],{"className":1273,"code":1274,"language":1264,"meta":1050,"style":1050},"language-css shiki shiki-themes github-light github-dark","::backdrop {\n  background-image: linear-gradient(\n    45deg,\n    magenta,\n    rebeccapurple,\n    dodgerblue,\n    green\n  );\n  opacity: 0.75;\n}\n",[592,1276,1277,1284,1298,1310,1317,1324,1331,1337,1343,1357],{"__ignoreMap":1050},[661,1278,1279,1281],{"class":1055,"line":1056},[661,1280,876],{"class":1066},[661,1282,1283],{"class":1059}," {\n",[661,1285,1286,1290,1292,1295],{"class":1055,"line":1073},[661,1287,1289],{"class":1288},"sj4cs","  background-image",[661,1291,690],{"class":1059},[661,1293,1294],{"class":1288},"linear-gradient",[661,1296,1297],{"class":1059},"(\n",[661,1299,1300,1303,1307],{"class":1055,"line":1088},[661,1301,1302],{"class":1288},"    45",[661,1304,1306],{"class":1305},"szBVR","deg",[661,1308,1309],{"class":1059},",\n",[661,1311,1312,1315],{"class":1055,"line":1107},[661,1313,1314],{"class":1288},"    magenta",[661,1316,1309],{"class":1059},[661,1318,1319,1322],{"class":1055,"line":1123},[661,1320,1321],{"class":1288},"    rebeccapurple",[661,1323,1309],{"class":1059},[661,1325,1326,1329],{"class":1055,"line":1133},[661,1327,1328],{"class":1288},"    dodgerblue",[661,1330,1309],{"class":1059},[661,1332,1334],{"class":1055,"line":1333},7,[661,1335,1336],{"class":1288},"    green\n",[661,1338,1340],{"class":1055,"line":1339},8,[661,1341,1342],{"class":1059},"  );\n",[661,1344,1346,1349,1351,1354],{"class":1055,"line":1345},9,[661,1347,1348],{"class":1288},"  opacity",[661,1350,690],{"class":1059},[661,1352,1353],{"class":1288},"0.75",[661,1355,1356],{"class":1059},";\n",[661,1358,1360],{"class":1055,"line":1359},10,[661,1361,1362],{"class":1059},"}\n",[1142,1364,1366],{"id":1365},"javascript","JavaScript",[586,1368,1369,1370,1372,1373,729,1376,1379],{},"대화 상자는 ",[592,1371,815],{}," 메서드를 사용하여 모달 방식으로 열리고 ",[592,1374,1375],{},".close()",[592,1377,1378],{},".requestClose()"," 메서드를 사용하여 닫힙니다.",[1045,1381,1385],{"className":1382,"code":1383,"language":1384,"meta":1050,"style":1050},"language-js shiki shiki-themes github-light github-dark","const dialog = document.querySelector(\"dialog\");\nconst showButton = document.querySelector(\"dialog + button\");\nconst closeButton = document.querySelector(\"dialog button\");\n\n\u002F\u002F \"대화 상자 표시\" 버튼이 모달 방식으로 대화 상자를 엽니다\nshowButton.addEventListener(\"click\", () => {\n  dialog.showModal();\n});\n\n\u002F\u002F \"닫기\" 버튼이 대화 상자를 닫습니다\ncloseButton.addEventListener(\"click\", () => {\n  dialog.close();\n});\n","js",[592,1386,1387,1412,1432,1452,1458,1464,1485,1496,1501,1505,1510,1528,1538],{"__ignoreMap":1050},[661,1388,1389,1392,1395,1398,1401,1404,1407,1409],{"class":1055,"line":1056},[661,1390,1391],{"class":1305},"const",[661,1393,1394],{"class":1288}," dialog",[661,1396,1397],{"class":1305}," =",[661,1399,1400],{"class":1059}," document.",[661,1402,1403],{"class":1066},"querySelector",[661,1405,1406],{"class":1059},"(",[661,1408,1042],{"class":1102},[661,1410,1411],{"class":1059},");\n",[661,1413,1414,1416,1419,1421,1423,1425,1427,1430],{"class":1055,"line":1073},[661,1415,1391],{"class":1305},[661,1417,1418],{"class":1288}," showButton",[661,1420,1397],{"class":1305},[661,1422,1400],{"class":1059},[661,1424,1403],{"class":1066},[661,1426,1406],{"class":1059},[661,1428,1429],{"class":1102},"\"dialog + button\"",[661,1431,1411],{"class":1059},[661,1433,1434,1436,1439,1441,1443,1445,1447,1450],{"class":1055,"line":1088},[661,1435,1391],{"class":1305},[661,1437,1438],{"class":1288}," closeButton",[661,1440,1397],{"class":1305},[661,1442,1400],{"class":1059},[661,1444,1403],{"class":1066},[661,1446,1406],{"class":1059},[661,1448,1449],{"class":1102},"\"dialog button\"",[661,1451,1411],{"class":1059},[661,1453,1454],{"class":1055,"line":1107},[661,1455,1457],{"emptyLinePlaceholder":1456},true,"\n",[661,1459,1460],{"class":1055,"line":1123},[661,1461,1463],{"class":1462},"sJ8bj","\u002F\u002F \"대화 상자 표시\" 버튼이 모달 방식으로 대화 상자를 엽니다\n",[661,1465,1466,1469,1472,1474,1477,1480,1483],{"class":1055,"line":1133},[661,1467,1468],{"class":1059},"showButton.",[661,1470,1471],{"class":1066},"addEventListener",[661,1473,1406],{"class":1059},[661,1475,1476],{"class":1102},"\"click\"",[661,1478,1479],{"class":1059},", () ",[661,1481,1482],{"class":1305},"=>",[661,1484,1283],{"class":1059},[661,1486,1487,1490,1493],{"class":1055,"line":1333},[661,1488,1489],{"class":1059},"  dialog.",[661,1491,1492],{"class":1066},"showModal",[661,1494,1495],{"class":1059},"();\n",[661,1497,1498],{"class":1055,"line":1339},[661,1499,1500],{"class":1059},"});\n",[661,1502,1503],{"class":1055,"line":1345},[661,1504,1457],{"emptyLinePlaceholder":1456},[661,1506,1507],{"class":1055,"line":1359},[661,1508,1509],{"class":1462},"\u002F\u002F \"닫기\" 버튼이 대화 상자를 닫습니다\n",[661,1511,1513,1516,1518,1520,1522,1524,1526],{"class":1055,"line":1512},11,[661,1514,1515],{"class":1059},"closeButton.",[661,1517,1471],{"class":1066},[661,1519,1406],{"class":1059},[661,1521,1476],{"class":1102},[661,1523,1479],{"class":1059},[661,1525,1482],{"class":1305},[661,1527,1283],{"class":1059},[661,1529,1531,1533,1536],{"class":1055,"line":1530},12,[661,1532,1489],{"class":1059},[661,1534,1535],{"class":1066},"close",[661,1537,1495],{"class":1059},[661,1539,1541],{"class":1055,"line":1540},13,[661,1542,1500],{"class":1059},[1142,1544,1144],{"id":1545},"결과-1",[586,1547,1548],{},"모달 대화 상자가 표시되면 화면에 존재하는 다른 대화 상자보다 위에 나타납니다. 모달 대화 상자 외부의 모든 것은 비활성 상태이며 대화 상자 외부와 상호 작용이 차단됩니다. 대화 상자가 열려 있을 때 대화 상자 자체를 제외하고는 문서와의 상호 작용이 불가능하다는 점에 유의하세요. \"대화 상자 표시\" 버튼은 대화 상자의 불투명한 배경에 대부분 가려져 있으며 비활성 상태입니다.",[1020,1550,1552],{"id":1551},"대화-상자에서-반환-값-처리하기","대화 상자에서 반환 값 처리하기",[586,1554,1173,1555,1035,1557,1563,1564,1566,1567,1569],{},[592,1556,594],{},[597,1558,1560],{"href":1559},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FHTMLDialogElement\u002FreturnValue",[592,1561,1562],{},"returnValue","와 폼을 사용하여 모달 대화 상자를 닫는 방법을 보여줍니다. 기본적으로 ",[592,1565,1562],{},"는 빈 문자열이지만, ",[592,1568,594],{}," 요소 내에 폼을 제출하는 버튼이 있는 경우에는 해당 버튼의 값이 반환됩니다.",[586,1571,1572,1573,1012,1576,1578,1579,1582,1583,1585,1586,1589],{},"이 예제는 \"대화 상자 표시\" 버튼이 클릭될 때 모달 대화 상자를 엽니다. 대화 상자에는 ",[592,1574,1575],{},"\u003Cselect>",[592,1577,728],{}," 요소 두 개로 이루어진 양식이 포함되어 있으며, 버튼들은 기본적으로 ",[592,1580,1581],{},"type=\"submit\"","입니다. 이벤트 리스너는 선택 옵션이 변경될 때마다 \"확인\" 버튼의 값을 업데이트합니다. \"확인\" 버튼을 눌러 대화 상자를 닫으면 버튼의 현재 값이 반환 값입니다. \"취소\" 버튼을 눌러 대화 상자를 닫으면 ",[592,1584,1562],{},"는 ",[592,1587,1588],{},"cancel","입니다.",[586,1591,1592,1593,1595,1596,1598,1599,1601,1602,1605],{},"대화 상자가 닫히면 \"대화 상자 표시\" 버튼 아래에 반환 값이 표시됩니다. 대화 상자가 ",[639,1594,641],{}," 키를 눌러 닫히면 ",[592,1597,1562],{},"가 업데이트되지 않고 ",[592,1600,1535],{}," 이벤트가 발생하지 않으므로 ",[592,1603,1604],{},"\u003Coutput>","의 텍스트는 업데이트되지 않습니다.",[1142,1607,600],{"id":1608},"html-1",[1045,1610,1612],{"className":1047,"code":1611,"language":1049,"meta":1050,"style":1050},"\u003C!-- 폼이 포함된 모달 대화 상자 -->\n\u003Cdialog id=\"favDialog\">\n  \u003Cform>\n    \u003Cp>\n      \u003Clabel>\n        좋아하는 동물:\n        \u003Cselect>\n          \u003Coption value=\"default\">선택하기…\u003C\u002Foption>\n          \u003Coption>씨몽키\u003C\u002Foption>\n          \u003Coption>레서판다\u003C\u002Foption>\n          \u003Coption>거미원숭이\u003C\u002Foption>\n        \u003C\u002Fselect>\n      \u003C\u002Flabel>\n    \u003C\u002Fp>\n    \u003Cdiv>\n      \u003Cbutton value=\"cancel\" formmethod=\"dialog\">취소\u003C\u002Fbutton>\n      \u003Cbutton id=\"confirmBtn\" value=\"default\">확인\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fform>\n\u003C\u002Fdialog>\n\u003Cp>\n  \u003Cbutton id=\"showDialog\">대화 상자 표시\u003C\u002Fbutton>\n\u003C\u002Fp>\n\u003Coutput>\u003C\u002Foutput>\n",[592,1613,1614,1619,1635,1643,1651,1661,1666,1676,1699,1712,1725,1738,1747,1756,1766,1776,1804,1830,1839,1848,1857,1866,1886,1895],{"__ignoreMap":1050},[661,1615,1616],{"class":1055,"line":1056},[661,1617,1618],{"class":1462},"\u003C!-- 폼이 포함된 모달 대화 상자 -->\n",[661,1620,1621,1623,1625,1628,1630,1633],{"class":1055,"line":1073},[661,1622,1060],{"class":1059},[661,1624,636],{"class":1063},[661,1626,1627],{"class":1066}," id",[661,1629,1099],{"class":1059},[661,1631,1632],{"class":1102},"\"favDialog\"",[661,1634,1070],{"class":1059},[661,1636,1637,1639,1641],{"class":1055,"line":1088},[661,1638,1076],{"class":1059},[661,1640,1093],{"class":1063},[661,1642,1070],{"class":1059},[661,1644,1645,1647,1649],{"class":1055,"line":1107},[661,1646,1110],{"class":1059},[661,1648,586],{"class":1063},[661,1650,1070],{"class":1059},[661,1652,1653,1656,1659],{"class":1055,"line":1123},[661,1654,1655],{"class":1059},"      \u003C",[661,1657,1658],{"class":1063},"label",[661,1660,1070],{"class":1059},[661,1662,1663],{"class":1055,"line":1133},[661,1664,1665],{"class":1059},"        좋아하는 동물:\n",[661,1667,1668,1671,1674],{"class":1055,"line":1333},[661,1669,1670],{"class":1059},"        \u003C",[661,1672,1673],{"class":1063},"select",[661,1675,1070],{"class":1059},[661,1677,1678,1681,1684,1687,1689,1692,1695,1697],{"class":1055,"line":1339},[661,1679,1680],{"class":1059},"          \u003C",[661,1682,1683],{"class":1063},"option",[661,1685,1686],{"class":1066}," value",[661,1688,1099],{"class":1059},[661,1690,1691],{"class":1102},"\"default\"",[661,1693,1694],{"class":1059},">선택하기…\u003C\u002F",[661,1696,1683],{"class":1063},[661,1698,1070],{"class":1059},[661,1700,1701,1703,1705,1708,1710],{"class":1055,"line":1345},[661,1702,1680],{"class":1059},[661,1704,1683],{"class":1063},[661,1706,1707],{"class":1059},">씨몽키\u003C\u002F",[661,1709,1683],{"class":1063},[661,1711,1070],{"class":1059},[661,1713,1714,1716,1718,1721,1723],{"class":1055,"line":1359},[661,1715,1680],{"class":1059},[661,1717,1683],{"class":1063},[661,1719,1720],{"class":1059},">레서판다\u003C\u002F",[661,1722,1683],{"class":1063},[661,1724,1070],{"class":1059},[661,1726,1727,1729,1731,1734,1736],{"class":1055,"line":1512},[661,1728,1680],{"class":1059},[661,1730,1683],{"class":1063},[661,1732,1733],{"class":1059},">거미원숭이\u003C\u002F",[661,1735,1683],{"class":1063},[661,1737,1070],{"class":1059},[661,1739,1740,1743,1745],{"class":1055,"line":1530},[661,1741,1742],{"class":1059},"        \u003C\u002F",[661,1744,1673],{"class":1063},[661,1746,1070],{"class":1059},[661,1748,1749,1752,1754],{"class":1055,"line":1540},[661,1750,1751],{"class":1059},"      \u003C\u002F",[661,1753,1658],{"class":1063},[661,1755,1070],{"class":1059},[661,1757,1759,1762,1764],{"class":1055,"line":1758},14,[661,1760,1761],{"class":1059},"    \u003C\u002F",[661,1763,586],{"class":1063},[661,1765,1070],{"class":1059},[661,1767,1769,1771,1774],{"class":1055,"line":1768},15,[661,1770,1110],{"class":1059},[661,1772,1773],{"class":1063},"div",[661,1775,1070],{"class":1059},[661,1777,1779,1781,1783,1785,1787,1790,1793,1795,1797,1800,1802],{"class":1055,"line":1778},16,[661,1780,1655],{"class":1059},[661,1782,1113],{"class":1063},[661,1784,1686],{"class":1066},[661,1786,1099],{"class":1059},[661,1788,1789],{"class":1102},"\"cancel\"",[661,1791,1792],{"class":1066}," formmethod",[661,1794,1099],{"class":1059},[661,1796,1042],{"class":1102},[661,1798,1799],{"class":1059},">취소\u003C\u002F",[661,1801,1113],{"class":1063},[661,1803,1070],{"class":1059},[661,1805,1807,1809,1811,1813,1815,1818,1820,1822,1824,1826,1828],{"class":1055,"line":1806},17,[661,1808,1655],{"class":1059},[661,1810,1113],{"class":1063},[661,1812,1627],{"class":1066},[661,1814,1099],{"class":1059},[661,1816,1817],{"class":1102},"\"confirmBtn\"",[661,1819,1686],{"class":1066},[661,1821,1099],{"class":1059},[661,1823,1691],{"class":1102},[661,1825,1116],{"class":1059},[661,1827,1113],{"class":1063},[661,1829,1070],{"class":1059},[661,1831,1833,1835,1837],{"class":1055,"line":1832},18,[661,1834,1761],{"class":1059},[661,1836,1773],{"class":1063},[661,1838,1070],{"class":1059},[661,1840,1842,1844,1846],{"class":1055,"line":1841},19,[661,1843,1126],{"class":1059},[661,1845,1093],{"class":1063},[661,1847,1070],{"class":1059},[661,1849,1851,1853,1855],{"class":1055,"line":1850},20,[661,1852,1136],{"class":1059},[661,1854,636],{"class":1063},[661,1856,1070],{"class":1059},[661,1858,1860,1862,1864],{"class":1055,"line":1859},21,[661,1861,1060],{"class":1059},[661,1863,586],{"class":1063},[661,1865,1070],{"class":1059},[661,1867,1869,1871,1873,1875,1877,1880,1882,1884],{"class":1055,"line":1868},22,[661,1870,1076],{"class":1059},[661,1872,1113],{"class":1063},[661,1874,1627],{"class":1066},[661,1876,1099],{"class":1059},[661,1878,1879],{"class":1102},"\"showDialog\"",[661,1881,1257],{"class":1059},[661,1883,1113],{"class":1063},[661,1885,1070],{"class":1059},[661,1887,1889,1891,1893],{"class":1055,"line":1888},23,[661,1890,1136],{"class":1059},[661,1892,586],{"class":1063},[661,1894,1070],{"class":1059},[661,1896,1898,1900,1903,1906,1908],{"class":1055,"line":1897},24,[661,1899,1060],{"class":1059},[661,1901,1902],{"class":1063},"output",[661,1904,1905],{"class":1059},">\u003C\u002F",[661,1907,1902],{"class":1063},[661,1909,1070],{"class":1059},[1142,1911,1366],{"id":1912},"javascript-1",[1045,1914,1916],{"className":1382,"code":1915,"language":1384,"meta":1050,"style":1050},"const showButton = document.getElementById(\"showDialog\");\nconst favDialog = document.getElementById(\"favDialog\");\nconst outputBox = document.querySelector(\"output\");\nconst selectEl = favDialog.querySelector(\"select\");\nconst confirmBtn = favDialog.querySelector(\"#confirmBtn\");\n\n\u002F\u002F \"대화 상자 표시\" 버튼이 \u003Cdialog>를 모달 방식으로 엽니다\nshowButton.addEventListener(\"click\", () => {\n  favDialog.showModal();\n});\n\n\u002F\u002F \"취소\" 버튼은 [formmethod=\"dialog\"]이기 때문에 제출하지 않고 대화 상자를 닫아 close 이벤트를 트리거합니다.\nfavDialog.addEventListener(\"close\", (e) => {\n  outputBox.value =\n    favDialog.returnValue === \"default\"\n      ? \"반환 값이 없습니다.\"\n      : `반환 값: ${favDialog.returnValue}.`; \u002F\u002F 빈 문자열 대신 \"default\"를 확인해야 합니다\n});\n\n\u002F\u002F \"확인\" 버튼의 기본 동작인 폼을 제출하는 것을 방지하고, `close()` 메서드로 대화 상자를 닫아 \"close\" 이벤트를 트리거합니다.\nconfirmBtn.addEventListener(\"click\", (event) => {\n  event.preventDefault(); \u002F\u002F 가짜 폼을 제출하지 않습니다\n  favDialog.close(selectEl.value); \u002F\u002F 여기서 셀렉트 박스 값을 보내야 합니다.\n});\n",[592,1917,1918,1937,1956,1976,1997,2017,2021,2026,2042,2051,2055,2059,2064,2090,2098,2109,2117,2142,2146,2150,2155,2177,2191,2203],{"__ignoreMap":1050},[661,1919,1920,1922,1924,1926,1928,1931,1933,1935],{"class":1055,"line":1056},[661,1921,1391],{"class":1305},[661,1923,1418],{"class":1288},[661,1925,1397],{"class":1305},[661,1927,1400],{"class":1059},[661,1929,1930],{"class":1066},"getElementById",[661,1932,1406],{"class":1059},[661,1934,1879],{"class":1102},[661,1936,1411],{"class":1059},[661,1938,1939,1941,1944,1946,1948,1950,1952,1954],{"class":1055,"line":1073},[661,1940,1391],{"class":1305},[661,1942,1943],{"class":1288}," favDialog",[661,1945,1397],{"class":1305},[661,1947,1400],{"class":1059},[661,1949,1930],{"class":1066},[661,1951,1406],{"class":1059},[661,1953,1632],{"class":1102},[661,1955,1411],{"class":1059},[661,1957,1958,1960,1963,1965,1967,1969,1971,1974],{"class":1055,"line":1088},[661,1959,1391],{"class":1305},[661,1961,1962],{"class":1288}," outputBox",[661,1964,1397],{"class":1305},[661,1966,1400],{"class":1059},[661,1968,1403],{"class":1066},[661,1970,1406],{"class":1059},[661,1972,1973],{"class":1102},"\"output\"",[661,1975,1411],{"class":1059},[661,1977,1978,1980,1983,1985,1988,1990,1992,1995],{"class":1055,"line":1107},[661,1979,1391],{"class":1305},[661,1981,1982],{"class":1288}," selectEl",[661,1984,1397],{"class":1305},[661,1986,1987],{"class":1059}," favDialog.",[661,1989,1403],{"class":1066},[661,1991,1406],{"class":1059},[661,1993,1994],{"class":1102},"\"select\"",[661,1996,1411],{"class":1059},[661,1998,1999,2001,2004,2006,2008,2010,2012,2015],{"class":1055,"line":1123},[661,2000,1391],{"class":1305},[661,2002,2003],{"class":1288}," confirmBtn",[661,2005,1397],{"class":1305},[661,2007,1987],{"class":1059},[661,2009,1403],{"class":1066},[661,2011,1406],{"class":1059},[661,2013,2014],{"class":1102},"\"#confirmBtn\"",[661,2016,1411],{"class":1059},[661,2018,2019],{"class":1055,"line":1133},[661,2020,1457],{"emptyLinePlaceholder":1456},[661,2022,2023],{"class":1055,"line":1333},[661,2024,2025],{"class":1462},"\u002F\u002F \"대화 상자 표시\" 버튼이 \u003Cdialog>를 모달 방식으로 엽니다\n",[661,2027,2028,2030,2032,2034,2036,2038,2040],{"class":1055,"line":1339},[661,2029,1468],{"class":1059},[661,2031,1471],{"class":1066},[661,2033,1406],{"class":1059},[661,2035,1476],{"class":1102},[661,2037,1479],{"class":1059},[661,2039,1482],{"class":1305},[661,2041,1283],{"class":1059},[661,2043,2044,2047,2049],{"class":1055,"line":1345},[661,2045,2046],{"class":1059},"  favDialog.",[661,2048,1492],{"class":1066},[661,2050,1495],{"class":1059},[661,2052,2053],{"class":1055,"line":1359},[661,2054,1500],{"class":1059},[661,2056,2057],{"class":1055,"line":1512},[661,2058,1457],{"emptyLinePlaceholder":1456},[661,2060,2061],{"class":1055,"line":1530},[661,2062,2063],{"class":1462},"\u002F\u002F \"취소\" 버튼은 [formmethod=\"dialog\"]이기 때문에 제출하지 않고 대화 상자를 닫아 close 이벤트를 트리거합니다.\n",[661,2065,2066,2069,2071,2073,2076,2079,2083,2086,2088],{"class":1055,"line":1540},[661,2067,2068],{"class":1059},"favDialog.",[661,2070,1471],{"class":1066},[661,2072,1406],{"class":1059},[661,2074,2075],{"class":1102},"\"close\"",[661,2077,2078],{"class":1059},", (",[661,2080,2082],{"class":2081},"s4XuR","e",[661,2084,2085],{"class":1059},") ",[661,2087,1482],{"class":1305},[661,2089,1283],{"class":1059},[661,2091,2092,2095],{"class":1055,"line":1758},[661,2093,2094],{"class":1059},"  outputBox.value ",[661,2096,2097],{"class":1305},"=\n",[661,2099,2100,2103,2106],{"class":1055,"line":1768},[661,2101,2102],{"class":1059},"    favDialog.returnValue ",[661,2104,2105],{"class":1305},"===",[661,2107,2108],{"class":1102}," \"default\"\n",[661,2110,2111,2114],{"class":1055,"line":1778},[661,2112,2113],{"class":1305},"      ?",[661,2115,2116],{"class":1102}," \"반환 값이 없습니다.\"\n",[661,2118,2119,2122,2125,2128,2131,2133,2136,2139],{"class":1055,"line":1806},[661,2120,2121],{"class":1305},"      :",[661,2123,2124],{"class":1102}," `반환 값: ${",[661,2126,2127],{"class":1059},"favDialog",[661,2129,2130],{"class":1102},".",[661,2132,1562],{"class":1059},[661,2134,2135],{"class":1102},"}.`",[661,2137,2138],{"class":1059},"; ",[661,2140,2141],{"class":1462},"\u002F\u002F 빈 문자열 대신 \"default\"를 확인해야 합니다\n",[661,2143,2144],{"class":1055,"line":1832},[661,2145,1500],{"class":1059},[661,2147,2148],{"class":1055,"line":1841},[661,2149,1457],{"emptyLinePlaceholder":1456},[661,2151,2152],{"class":1055,"line":1850},[661,2153,2154],{"class":1462},"\u002F\u002F \"확인\" 버튼의 기본 동작인 폼을 제출하는 것을 방지하고, `close()` 메서드로 대화 상자를 닫아 \"close\" 이벤트를 트리거합니다.\n",[661,2156,2157,2160,2162,2164,2166,2168,2171,2173,2175],{"class":1055,"line":1859},[661,2158,2159],{"class":1059},"confirmBtn.",[661,2161,1471],{"class":1066},[661,2163,1406],{"class":1059},[661,2165,1476],{"class":1102},[661,2167,2078],{"class":1059},[661,2169,2170],{"class":2081},"event",[661,2172,2085],{"class":1059},[661,2174,1482],{"class":1305},[661,2176,1283],{"class":1059},[661,2178,2179,2182,2185,2188],{"class":1055,"line":1868},[661,2180,2181],{"class":1059},"  event.",[661,2183,2184],{"class":1066},"preventDefault",[661,2186,2187],{"class":1059},"(); ",[661,2189,2190],{"class":1462},"\u002F\u002F 가짜 폼을 제출하지 않습니다\n",[661,2192,2193,2195,2197,2200],{"class":1055,"line":1888},[661,2194,2046],{"class":1059},[661,2196,1535],{"class":1066},[661,2198,2199],{"class":1059},"(selectEl.value); ",[661,2201,2202],{"class":1462},"\u002F\u002F 여기서 셀렉트 박스 값을 보내야 합니다.\n",[661,2204,2205],{"class":1055,"line":1897},[661,2206,1500],{"class":1059},[1142,2208,1144],{"id":2209},"결과-2",[586,2211,2212],{},"위의 예제는 모달 대화 상자를 닫는 다음 세 가지 방법을 보여줍니다.",[678,2214,2215,2224,2229],{},[681,2216,2217,2219,2220,2223],{},[592,2218,636],{}," 메서드를 사용하여 대화 상자 내의 폼을 제출해 닫는 방법(",[597,2221,1023],{"href":2222},"#html%EB%A7%8C%EC%9C%BC%EB%A1%9C_%EB%8C%80%ED%99%94_%EC%83%81%EC%9E%90_%EB%A7%8C%EB%93%A4%EA%B8%B0","에서 볼 수 있음).",[681,2225,2226,2228],{},[639,2227,641],{}," 키를 눌러 닫는 방법.",[681,2230,2231,2233,2234,2238,2239,2241,2242,2244],{},[592,2232,623],{}," 메서드를 호출하여 닫는 방법(",[597,2235,2237],{"href":2236},"#%EB%AA%A8%EB%8B%AC_%EB%8C%80%ED%99%94_%EC%83%81%EC%9E%90_%EB%A7%8C%EB%93%A4%EA%B8%B0","모달 예제","에서 볼 수 있음).\n이 예제에서 \"취소\" 버튼은 ",[592,2240,636],{}," 폼 메서드를 통해 대화 상자를 닫고 \"확인\" 버튼은 ",[592,2243,623],{}," 메서드를 통해 대화 상자를 닫습니다.",[586,2246,2247,2248,2253,2254,2256,2257,2261],{},"\"취소\" 버튼에는 ",[597,2249,2251],{"href":2250},"\u002Fdevelop\u002Fhtml\u002Felements\u002Finput\u002Fsubmit#formmethod",[592,2252,856],{}," 특성이 포함되어 있어 ",[592,2255,188],{},"의 기본  메서드를 재정의합니다. 폼의 메서드가 ",[597,2258,2259],{"href":674},[592,2260,636],{},"인 경우 폼의 상태가 저장되지만 제출되지 않고 대화 상자가 닫힙니다.",[586,2263,2264,2267,2268,1012,2271,2273],{},[592,2265,2266],{},"action","이 없으면 기본  메서드를 통해 폼을 제출하면 페이지가 다시 로드됩니다. 우리는 JavaScript를 사용하여 ",[592,2269,2270],{},"event.preventDefault()",[592,2272,623],{}," 메서드를 각각 사용하여 제출을 방지하고 대화 상자를 닫습니다.",[586,2275,2276,2277,2279,2280,2282],{},"모든 ",[592,2278,636],{}," 요소 내에 닫기 메커니즘을 제공하는 것이 중요합니다. ",[639,2281,641],{}," 키는 기본적으로 비모달 대화 상자를 닫지 않으며, 모든 사용자가 물리적 키보드를 이용할 수 있다고 가정해서는 안 됩니다 (예: 키보드 없이 터치스크린 장치만 사용하는 경우).",[1020,2284,2286],{"id":2285},"필수-폼-입력이-있는-대화-상자-닫기","필수 폼 입력이 있는 대화 상자 닫기",[586,2288,2289,2290,2296,2297,2299],{},"대화 상자 내의 폼에 필수 입력이 있는 경우, 사용자는 필수 입력에 값을 제공한 후에만 대화 상자를 닫을 수 있습니다. 이런 대화 상자를 닫으려면 닫기 버튼에 ",[597,2291,2293],{"href":2292},"\u002Fdevelop\u002Fhtml\u002Felements\u002Finput#formnovalidate",[592,2294,2295],{},"formnovalidate"," 특성을 사용하거나 닫기 버튼을 클릭할 때 대화 상자 객체의 ",[592,2298,1187],{}," 메서드를 호출하세요.",[1045,2301,2303],{"className":1047,"code":2302,"language":1049,"meta":1050,"style":1050},"\u003Cdialog id=\"dialog\">\n  \u003Cform method=\"dialog\">\n    \u003Cp>\n      \u003Clabel>\n        좋아하는 동물:\n        \u003Cinput type=\"text\" required \u002F>\n      \u003C\u002Flabel>\n    \u003C\u002Fp>\n    \u003Cdiv>\n      \u003Cinput type=\"submit\" id=\"normal-close\" value=\"일반 닫기\" \u002F>\n      \u003Cinput\n        type=\"submit\"\n        id=\"novalidate-close\"\n        value=\"검증 없이 닫기\"\n        formnovalidate \u002F>\n      \u003Cinput type=\"submit\" id=\"js-close\" value=\"JS 닫기\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fform>\n\u003C\u002Fdialog>\n\u003Cp>\n  \u003Cbutton id=\"show-dialog\">대화 상자 표시\u003C\u002Fbutton>\n\u003C\u002Fp>\n\u003Coutput>\u003C\u002Foutput>\n",[592,2304,2305,2319,2333,2341,2349,2353,2374,2382,2390,2398,2427,2434,2444,2454,2464,2471,2499,2507,2515,2523,2531,2550,2558],{"__ignoreMap":1050},[661,2306,2307,2309,2311,2313,2315,2317],{"class":1055,"line":1056},[661,2308,1060],{"class":1059},[661,2310,636],{"class":1063},[661,2312,1627],{"class":1066},[661,2314,1099],{"class":1059},[661,2316,1042],{"class":1102},[661,2318,1070],{"class":1059},[661,2320,2321,2323,2325,2327,2329,2331],{"class":1055,"line":1073},[661,2322,1076],{"class":1059},[661,2324,1093],{"class":1063},[661,2326,1096],{"class":1066},[661,2328,1099],{"class":1059},[661,2330,1042],{"class":1102},[661,2332,1070],{"class":1059},[661,2334,2335,2337,2339],{"class":1055,"line":1088},[661,2336,1110],{"class":1059},[661,2338,586],{"class":1063},[661,2340,1070],{"class":1059},[661,2342,2343,2345,2347],{"class":1055,"line":1107},[661,2344,1655],{"class":1059},[661,2346,1658],{"class":1063},[661,2348,1070],{"class":1059},[661,2350,2351],{"class":1055,"line":1123},[661,2352,1665],{"class":1059},[661,2354,2355,2357,2360,2363,2365,2368,2371],{"class":1055,"line":1133},[661,2356,1670],{"class":1059},[661,2358,2359],{"class":1063},"input",[661,2361,2362],{"class":1066}," type",[661,2364,1099],{"class":1059},[661,2366,2367],{"class":1102},"\"text\"",[661,2369,2370],{"class":1066}," required",[661,2372,2373],{"class":1059}," \u002F>\n",[661,2375,2376,2378,2380],{"class":1055,"line":1333},[661,2377,1751],{"class":1059},[661,2379,1658],{"class":1063},[661,2381,1070],{"class":1059},[661,2383,2384,2386,2388],{"class":1055,"line":1339},[661,2385,1761],{"class":1059},[661,2387,586],{"class":1063},[661,2389,1070],{"class":1059},[661,2391,2392,2394,2396],{"class":1055,"line":1345},[661,2393,1110],{"class":1059},[661,2395,1773],{"class":1063},[661,2397,1070],{"class":1059},[661,2399,2400,2402,2404,2406,2408,2411,2413,2415,2418,2420,2422,2425],{"class":1055,"line":1359},[661,2401,1655],{"class":1059},[661,2403,2359],{"class":1063},[661,2405,2362],{"class":1066},[661,2407,1099],{"class":1059},[661,2409,2410],{"class":1102},"\"submit\"",[661,2412,1627],{"class":1066},[661,2414,1099],{"class":1059},[661,2416,2417],{"class":1102},"\"normal-close\"",[661,2419,1686],{"class":1066},[661,2421,1099],{"class":1059},[661,2423,2424],{"class":1102},"\"일반 닫기\"",[661,2426,2373],{"class":1059},[661,2428,2429,2431],{"class":1055,"line":1512},[661,2430,1655],{"class":1059},[661,2432,2433],{"class":1063},"input\n",[661,2435,2436,2439,2441],{"class":1055,"line":1530},[661,2437,2438],{"class":1066},"        type",[661,2440,1099],{"class":1059},[661,2442,2443],{"class":1102},"\"submit\"\n",[661,2445,2446,2449,2451],{"class":1055,"line":1540},[661,2447,2448],{"class":1066},"        id",[661,2450,1099],{"class":1059},[661,2452,2453],{"class":1102},"\"novalidate-close\"\n",[661,2455,2456,2459,2461],{"class":1055,"line":1758},[661,2457,2458],{"class":1066},"        value",[661,2460,1099],{"class":1059},[661,2462,2463],{"class":1102},"\"검증 없이 닫기\"\n",[661,2465,2466,2469],{"class":1055,"line":1768},[661,2467,2468],{"class":1066},"        formnovalidate",[661,2470,2373],{"class":1059},[661,2472,2473,2475,2477,2479,2481,2483,2485,2487,2490,2492,2494,2497],{"class":1055,"line":1778},[661,2474,1655],{"class":1059},[661,2476,2359],{"class":1063},[661,2478,2362],{"class":1066},[661,2480,1099],{"class":1059},[661,2482,2410],{"class":1102},[661,2484,1627],{"class":1066},[661,2486,1099],{"class":1059},[661,2488,2489],{"class":1102},"\"js-close\"",[661,2491,1686],{"class":1066},[661,2493,1099],{"class":1059},[661,2495,2496],{"class":1102},"\"JS 닫기\"",[661,2498,2373],{"class":1059},[661,2500,2501,2503,2505],{"class":1055,"line":1806},[661,2502,1761],{"class":1059},[661,2504,1773],{"class":1063},[661,2506,1070],{"class":1059},[661,2508,2509,2511,2513],{"class":1055,"line":1832},[661,2510,1126],{"class":1059},[661,2512,1093],{"class":1063},[661,2514,1070],{"class":1059},[661,2516,2517,2519,2521],{"class":1055,"line":1841},[661,2518,1136],{"class":1059},[661,2520,636],{"class":1063},[661,2522,1070],{"class":1059},[661,2524,2525,2527,2529],{"class":1055,"line":1850},[661,2526,1060],{"class":1059},[661,2528,586],{"class":1063},[661,2530,1070],{"class":1059},[661,2532,2533,2535,2537,2539,2541,2544,2546,2548],{"class":1055,"line":1859},[661,2534,1076],{"class":1059},[661,2536,1113],{"class":1063},[661,2538,1627],{"class":1066},[661,2540,1099],{"class":1059},[661,2542,2543],{"class":1102},"\"show-dialog\"",[661,2545,1257],{"class":1059},[661,2547,1113],{"class":1063},[661,2549,1070],{"class":1059},[661,2551,2552,2554,2556],{"class":1055,"line":1868},[661,2553,1136],{"class":1059},[661,2555,586],{"class":1063},[661,2557,1070],{"class":1059},[661,2559,2560,2562,2564,2566,2568],{"class":1055,"line":1888},[661,2561,1060],{"class":1059},[661,2563,1902],{"class":1063},[661,2565,1905],{"class":1059},[661,2567,1902],{"class":1063},[661,2569,1070],{"class":1059},[1045,2571,2574],{"className":1273,"code":2572,"language":1264,"meta":2573,"style":1050},"[type=\"submit\"] {\n  margin-right: 1rem;\n}\n","hidden",[592,2575,2576,2591,2606],{"__ignoreMap":1050},[661,2577,2578,2581,2584,2586,2588],{"class":1055,"line":1056},[661,2579,2580],{"class":1059},"[",[661,2582,2583],{"class":1066},"type",[661,2585,1099],{"class":1305},[661,2587,2410],{"class":1102},[661,2589,2590],{"class":1059},"] {\n",[661,2592,2593,2596,2598,2601,2604],{"class":1055,"line":1073},[661,2594,2595],{"class":1288},"  margin-right",[661,2597,690],{"class":1059},[661,2599,2600],{"class":1288},"1",[661,2602,2603],{"class":1305},"rem",[661,2605,1356],{"class":1059},[661,2607,2608],{"class":1055,"line":1088},[661,2609,1362],{"class":1059},[1142,2611,1366],{"id":2612},"javascript-2",[1045,2614,2616],{"className":1382,"code":2615,"language":1384,"meta":1050,"style":1050},"const showBtn = document.getElementById(\"show-dialog\");\nconst dialog = document.getElementById(\"dialog\");\nconst jsCloseBtn = dialog.querySelector(\"#js-close\");\n\nshowBtn.addEventListener(\"click\", () => {\n  dialog.showModal();\n});\n\njsCloseBtn.addEventListener(\"click\", (e) => {\n  e.preventDefault();\n  dialog.close();\n});\n",[592,2617,2618,2637,2655,2676,2680,2697,2705,2709,2713,2734,2743,2751],{"__ignoreMap":1050},[661,2619,2620,2622,2625,2627,2629,2631,2633,2635],{"class":1055,"line":1056},[661,2621,1391],{"class":1305},[661,2623,2624],{"class":1288}," showBtn",[661,2626,1397],{"class":1305},[661,2628,1400],{"class":1059},[661,2630,1930],{"class":1066},[661,2632,1406],{"class":1059},[661,2634,2543],{"class":1102},[661,2636,1411],{"class":1059},[661,2638,2639,2641,2643,2645,2647,2649,2651,2653],{"class":1055,"line":1073},[661,2640,1391],{"class":1305},[661,2642,1394],{"class":1288},[661,2644,1397],{"class":1305},[661,2646,1400],{"class":1059},[661,2648,1930],{"class":1066},[661,2650,1406],{"class":1059},[661,2652,1042],{"class":1102},[661,2654,1411],{"class":1059},[661,2656,2657,2659,2662,2664,2667,2669,2671,2674],{"class":1055,"line":1088},[661,2658,1391],{"class":1305},[661,2660,2661],{"class":1288}," jsCloseBtn",[661,2663,1397],{"class":1305},[661,2665,2666],{"class":1059}," dialog.",[661,2668,1403],{"class":1066},[661,2670,1406],{"class":1059},[661,2672,2673],{"class":1102},"\"#js-close\"",[661,2675,1411],{"class":1059},[661,2677,2678],{"class":1055,"line":1107},[661,2679,1457],{"emptyLinePlaceholder":1456},[661,2681,2682,2685,2687,2689,2691,2693,2695],{"class":1055,"line":1123},[661,2683,2684],{"class":1059},"showBtn.",[661,2686,1471],{"class":1066},[661,2688,1406],{"class":1059},[661,2690,1476],{"class":1102},[661,2692,1479],{"class":1059},[661,2694,1482],{"class":1305},[661,2696,1283],{"class":1059},[661,2698,2699,2701,2703],{"class":1055,"line":1133},[661,2700,1489],{"class":1059},[661,2702,1492],{"class":1066},[661,2704,1495],{"class":1059},[661,2706,2707],{"class":1055,"line":1333},[661,2708,1500],{"class":1059},[661,2710,2711],{"class":1055,"line":1339},[661,2712,1457],{"emptyLinePlaceholder":1456},[661,2714,2715,2718,2720,2722,2724,2726,2728,2730,2732],{"class":1055,"line":1345},[661,2716,2717],{"class":1059},"jsCloseBtn.",[661,2719,1471],{"class":1066},[661,2721,1406],{"class":1059},[661,2723,1476],{"class":1102},[661,2725,2078],{"class":1059},[661,2727,2082],{"class":2081},[661,2729,2085],{"class":1059},[661,2731,1482],{"class":1305},[661,2733,1283],{"class":1059},[661,2735,2736,2739,2741],{"class":1055,"line":1359},[661,2737,2738],{"class":1059},"  e.",[661,2740,2184],{"class":1066},[661,2742,1495],{"class":1059},[661,2744,2745,2747,2749],{"class":1055,"line":1512},[661,2746,1489],{"class":1059},[661,2748,1535],{"class":1066},[661,2750,1495],{"class":1059},[661,2752,2753],{"class":1055,"line":1530},[661,2754,1500],{"class":1059},[1142,2756,1144],{"id":2757},"결과-3",[586,2759,2760,2761,2763,2764,2767],{},"결과에서 볼 수 있듯이 일반 닫기 버튼으로는 대화 상자를 닫을 수 없습니다. 그러나 취소 버튼에 ",[592,2762,2295],{}," 특성을 사용하여 폼 유효성 검사를 우회하면 대화 상자를 닫을 수 있습니다. 프로그래밍 방식으로 ",[592,2765,2766],{},"dialog.close()","를 사용해도 이러한 대화 상자를 닫을 수 있습니다.",[1020,2769,2771],{"id":2770},"다양한-closedby-동작-비교","다양한 closedby 동작 비교",[586,2773,1173,2774,2779],{},[597,2775,2777],{"href":2776},"#closedby",[592,2778,685],{}," 특성의 서로 다른 값 간의 동작 차이를 보여줍니다.",[1142,2781,600],{"id":2782},"html-2",[586,2784,2785,2787,2788,2790,2791,2793,2794,2796,2797,2796,2799,2801,2802,2804,2805,2807],{},[592,2786,728],{}," 요소 세 개와 ",[592,2789,594],{}," 요소 세 개를 제공합니다. 버튼마다 ",[592,2792,685],{}," 특성 세 가지 값 ",[592,2795,763],{},", ",[592,2798,753],{},[592,2800,743],{}," 중 하나의 동작을 보여주는 대화 상자를 열도록 프로그래밍되었습니다. 모든 ",[592,2803,594],{}," 요소에는 대화 상자를 닫는 ",[592,2806,728],{}," 요소가 포함되어 있습니다.",[1045,2809,2812],{"className":1047,"code":2810,"language":1049,"meta":2811,"style":1050},"\u003Cp>\u003Ccode><dialog>\u003C\u002Fcode> 유형을 선택하세요:\u003C\u002Fp>\n\u003Cdiv id=\"controls\">\n  \u003Cbutton id=\"none-btn\">\u003Ccode>closedby=\"none\"\u003C\u002Fcode>\u003C\u002Fbutton>\n  \u003Cbutton id=\"closerequest-btn\">\n    \u003Ccode>closedby=\"closerequest\"\u003C\u002Fcode>\n  \u003C\u002Fbutton>\n  \u003Cbutton id=\"any-btn\">\u003Ccode>closedby=\"any\"\u003C\u002Fcode>\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\n\u003Cdialog closedby=\"none\">\n  \u003Ch2>\u003Ccode>closedby=\"none\"\u003C\u002Fcode>\u003C\u002Fh2>\n  \u003Cp>\n    특정 제공된 메커니즘만을 사용하여 닫을 수 있으며, 이 경우에는 아래 \"닫기\"\n    버튼을 누르는 것입니다.\n  \u003C\u002Fp>\n  \u003Cbutton class=\"close\">닫기\u003C\u002Fbutton>\n\u003C\u002Fdialog>\n\n\u003Cdialog closedby=\"closerequest\">\n  \u003Ch2>\u003Ccode>closedby=\"closerequest\"\u003C\u002Fcode>\u003C\u002Fh2>\n  \u003Cp>\"닫기\" 버튼 또는 Esc 키를 사용하여 닫을 수 있습니다.\u003C\u002Fp>\n  \u003Cbutton class=\"close\">닫기\u003C\u002Fbutton>\n\u003C\u002Fdialog>\n\n\u003Cdialog closedby=\"any\">\n  \u003Ch2>\u003Ccode>closedby=\"any\"\u003C\u002Fcode>\u003C\u002Fh2>\n  \u003Cp>\n    \"닫기\" 버튼, Esc 키 또는 대화 상자 외부를 클릭하여 닫을 수 있습니다. \"간편\n    닫기\" 동작입니다.\n  \u003C\u002Fp>\n  \u003Cbutton class=\"close\">닫기\u003C\u002Fbutton>\n\u003C\u002Fdialog>\n","live-sample___closedbyvalues",[592,2813,2814,2847,2862,2890,2905,2918,2926,2954,2962,2966,2981,3001,3009,3014,3019,3027,3046,3054,3058,3072,3092,3105,3123,3131,3135,3151,3172,3181,3187,3193,3202,3221],{"__ignoreMap":1050},[661,2815,2816,2818,2820,2823,2825,2828,2831,2833,2836,2838,2840,2843,2845],{"class":1055,"line":1056},[661,2817,1060],{"class":1059},[661,2819,586],{"class":1063},[661,2821,2822],{"class":1059},">\u003C",[661,2824,592],{"class":1063},[661,2826,2827],{"class":1059},">",[661,2829,2830],{"class":1288},"<",[661,2832,636],{"class":1059},[661,2834,2835],{"class":1288},">",[661,2837,1136],{"class":1059},[661,2839,592],{"class":1063},[661,2841,2842],{"class":1059},"> 유형을 선택하세요:\u003C\u002F",[661,2844,586],{"class":1063},[661,2846,1070],{"class":1059},[661,2848,2849,2851,2853,2855,2857,2860],{"class":1055,"line":1073},[661,2850,1060],{"class":1059},[661,2852,1773],{"class":1063},[661,2854,1627],{"class":1066},[661,2856,1099],{"class":1059},[661,2858,2859],{"class":1102},"\"controls\"",[661,2861,1070],{"class":1059},[661,2863,2864,2866,2868,2870,2872,2875,2877,2879,2882,2884,2886,2888],{"class":1055,"line":1088},[661,2865,1076],{"class":1059},[661,2867,1113],{"class":1063},[661,2869,1627],{"class":1066},[661,2871,1099],{"class":1059},[661,2873,2874],{"class":1102},"\"none-btn\"",[661,2876,2822],{"class":1059},[661,2878,592],{"class":1063},[661,2880,2881],{"class":1059},">closedby=\"none\"\u003C\u002F",[661,2883,592],{"class":1063},[661,2885,1905],{"class":1059},[661,2887,1113],{"class":1063},[661,2889,1070],{"class":1059},[661,2891,2892,2894,2896,2898,2900,2903],{"class":1055,"line":1107},[661,2893,1076],{"class":1059},[661,2895,1113],{"class":1063},[661,2897,1627],{"class":1066},[661,2899,1099],{"class":1059},[661,2901,2902],{"class":1102},"\"closerequest-btn\"",[661,2904,1070],{"class":1059},[661,2906,2907,2909,2911,2914,2916],{"class":1055,"line":1123},[661,2908,1110],{"class":1059},[661,2910,592],{"class":1063},[661,2912,2913],{"class":1059},">closedby=\"closerequest\"\u003C\u002F",[661,2915,592],{"class":1063},[661,2917,1070],{"class":1059},[661,2919,2920,2922,2924],{"class":1055,"line":1133},[661,2921,1126],{"class":1059},[661,2923,1113],{"class":1063},[661,2925,1070],{"class":1059},[661,2927,2928,2930,2932,2934,2936,2939,2941,2943,2946,2948,2950,2952],{"class":1055,"line":1333},[661,2929,1076],{"class":1059},[661,2931,1113],{"class":1063},[661,2933,1627],{"class":1066},[661,2935,1099],{"class":1059},[661,2937,2938],{"class":1102},"\"any-btn\"",[661,2940,2822],{"class":1059},[661,2942,592],{"class":1063},[661,2944,2945],{"class":1059},">closedby=\"any\"\u003C\u002F",[661,2947,592],{"class":1063},[661,2949,1905],{"class":1059},[661,2951,1113],{"class":1063},[661,2953,1070],{"class":1059},[661,2955,2956,2958,2960],{"class":1055,"line":1339},[661,2957,1136],{"class":1059},[661,2959,1773],{"class":1063},[661,2961,1070],{"class":1059},[661,2963,2964],{"class":1055,"line":1345},[661,2965,1457],{"emptyLinePlaceholder":1456},[661,2967,2968,2970,2972,2975,2977,2979],{"class":1055,"line":1359},[661,2969,1060],{"class":1059},[661,2971,636],{"class":1063},[661,2973,2974],{"class":1066}," closedby",[661,2976,1099],{"class":1059},[661,2978,793],{"class":1102},[661,2980,1070],{"class":1059},[661,2982,2983,2985,2987,2989,2991,2993,2995,2997,2999],{"class":1055,"line":1512},[661,2984,1076],{"class":1059},[661,2986,644],{"class":1063},[661,2988,2822],{"class":1059},[661,2990,592],{"class":1063},[661,2992,2881],{"class":1059},[661,2994,592],{"class":1063},[661,2996,1905],{"class":1059},[661,2998,644],{"class":1063},[661,3000,1070],{"class":1059},[661,3002,3003,3005,3007],{"class":1055,"line":1530},[661,3004,1076],{"class":1059},[661,3006,586],{"class":1063},[661,3008,1070],{"class":1059},[661,3010,3011],{"class":1055,"line":1540},[661,3012,3013],{"class":1059},"    특정 제공된 메커니즘만을 사용하여 닫을 수 있으며, 이 경우에는 아래 \"닫기\"\n",[661,3015,3016],{"class":1055,"line":1758},[661,3017,3018],{"class":1059},"    버튼을 누르는 것입니다.\n",[661,3020,3021,3023,3025],{"class":1055,"line":1768},[661,3022,1126],{"class":1059},[661,3024,586],{"class":1063},[661,3026,1070],{"class":1059},[661,3028,3029,3031,3033,3036,3038,3040,3042,3044],{"class":1055,"line":1778},[661,3030,1076],{"class":1059},[661,3032,1113],{"class":1063},[661,3034,3035],{"class":1066}," class",[661,3037,1099],{"class":1059},[661,3039,2075],{"class":1102},[661,3041,1223],{"class":1059},[661,3043,1113],{"class":1063},[661,3045,1070],{"class":1059},[661,3047,3048,3050,3052],{"class":1055,"line":1806},[661,3049,1136],{"class":1059},[661,3051,636],{"class":1063},[661,3053,1070],{"class":1059},[661,3055,3056],{"class":1055,"line":1832},[661,3057,1457],{"emptyLinePlaceholder":1456},[661,3059,3060,3062,3064,3066,3068,3070],{"class":1055,"line":1841},[661,3061,1060],{"class":1059},[661,3063,636],{"class":1063},[661,3065,2974],{"class":1066},[661,3067,1099],{"class":1059},[661,3069,786],{"class":1102},[661,3071,1070],{"class":1059},[661,3073,3074,3076,3078,3080,3082,3084,3086,3088,3090],{"class":1055,"line":1850},[661,3075,1076],{"class":1059},[661,3077,644],{"class":1063},[661,3079,2822],{"class":1059},[661,3081,592],{"class":1063},[661,3083,2913],{"class":1059},[661,3085,592],{"class":1063},[661,3087,1905],{"class":1059},[661,3089,644],{"class":1063},[661,3091,1070],{"class":1059},[661,3093,3094,3096,3098,3101,3103],{"class":1055,"line":1859},[661,3095,1076],{"class":1059},[661,3097,586],{"class":1063},[661,3099,3100],{"class":1059},">\"닫기\" 버튼 또는 Esc 키를 사용하여 닫을 수 있습니다.\u003C\u002F",[661,3102,586],{"class":1063},[661,3104,1070],{"class":1059},[661,3106,3107,3109,3111,3113,3115,3117,3119,3121],{"class":1055,"line":1868},[661,3108,1076],{"class":1059},[661,3110,1113],{"class":1063},[661,3112,3035],{"class":1066},[661,3114,1099],{"class":1059},[661,3116,2075],{"class":1102},[661,3118,1223],{"class":1059},[661,3120,1113],{"class":1063},[661,3122,1070],{"class":1059},[661,3124,3125,3127,3129],{"class":1055,"line":1888},[661,3126,1136],{"class":1059},[661,3128,636],{"class":1063},[661,3130,1070],{"class":1059},[661,3132,3133],{"class":1055,"line":1897},[661,3134,1457],{"emptyLinePlaceholder":1456},[661,3136,3138,3140,3142,3144,3146,3149],{"class":1055,"line":3137},25,[661,3139,1060],{"class":1059},[661,3141,636],{"class":1063},[661,3143,2974],{"class":1066},[661,3145,1099],{"class":1059},[661,3147,3148],{"class":1102},"\"any\"",[661,3150,1070],{"class":1059},[661,3152,3154,3156,3158,3160,3162,3164,3166,3168,3170],{"class":1055,"line":3153},26,[661,3155,1076],{"class":1059},[661,3157,644],{"class":1063},[661,3159,2822],{"class":1059},[661,3161,592],{"class":1063},[661,3163,2945],{"class":1059},[661,3165,592],{"class":1063},[661,3167,1905],{"class":1059},[661,3169,644],{"class":1063},[661,3171,1070],{"class":1059},[661,3173,3175,3177,3179],{"class":1055,"line":3174},27,[661,3176,1076],{"class":1059},[661,3178,586],{"class":1063},[661,3180,1070],{"class":1059},[661,3182,3184],{"class":1055,"line":3183},28,[661,3185,3186],{"class":1059},"    \"닫기\" 버튼, Esc 키 또는 대화 상자 외부를 클릭하여 닫을 수 있습니다. \"간편\n",[661,3188,3190],{"class":1055,"line":3189},29,[661,3191,3192],{"class":1059},"    닫기\" 동작입니다.\n",[661,3194,3196,3198,3200],{"class":1055,"line":3195},30,[661,3197,1126],{"class":1059},[661,3199,586],{"class":1063},[661,3201,1070],{"class":1059},[661,3203,3205,3207,3209,3211,3213,3215,3217,3219],{"class":1055,"line":3204},31,[661,3206,1076],{"class":1059},[661,3208,1113],{"class":1063},[661,3210,3035],{"class":1066},[661,3212,1099],{"class":1059},[661,3214,2075],{"class":1102},[661,3216,1223],{"class":1059},[661,3218,1113],{"class":1063},[661,3220,1070],{"class":1059},[661,3222,3224,3226,3228],{"class":1055,"line":3223},32,[661,3225,1136],{"class":1059},[661,3227,636],{"class":1063},[661,3229,1070],{"class":1059},[1045,3231,3234],{"className":1273,"code":3232,"language":1264,"meta":3233,"style":1050},"body {\n  font-family: sans-serif;\n}\n\n#controls {\n  display: flex;\n  justify-content: space-around;\n}\n\ndialog {\n  width: 480px;\n  border-radius: 5px;\n  border-color: rgb(0 0 0 \u002F 0.3);\n}\n\ndialog h2 {\n  margin: 0;\n}\n\ndialog p {\n  line-height: 1.4;\n}\n","hidden live-sample___closedbyvalues",[592,3235,3236,3243,3255,3259,3263,3270,3282,3294,3298,3302,3308,3323,3337,3365,3369,3373,3382,3393,3397,3401,3410,3422],{"__ignoreMap":1050},[661,3237,3238,3241],{"class":1055,"line":1056},[661,3239,3240],{"class":1063},"body",[661,3242,1283],{"class":1059},[661,3244,3245,3248,3250,3253],{"class":1055,"line":1073},[661,3246,3247],{"class":1288},"  font-family",[661,3249,690],{"class":1059},[661,3251,3252],{"class":1288},"sans-serif",[661,3254,1356],{"class":1059},[661,3256,3257],{"class":1055,"line":1088},[661,3258,1362],{"class":1059},[661,3260,3261],{"class":1055,"line":1107},[661,3262,1457],{"emptyLinePlaceholder":1456},[661,3264,3265,3268],{"class":1055,"line":1123},[661,3266,3267],{"class":1066},"#controls",[661,3269,1283],{"class":1059},[661,3271,3272,3275,3277,3280],{"class":1055,"line":1133},[661,3273,3274],{"class":1288},"  display",[661,3276,690],{"class":1059},[661,3278,3279],{"class":1288},"flex",[661,3281,1356],{"class":1059},[661,3283,3284,3287,3289,3292],{"class":1055,"line":1333},[661,3285,3286],{"class":1288},"  justify-content",[661,3288,690],{"class":1059},[661,3290,3291],{"class":1288},"space-around",[661,3293,1356],{"class":1059},[661,3295,3296],{"class":1055,"line":1339},[661,3297,1362],{"class":1059},[661,3299,3300],{"class":1055,"line":1345},[661,3301,1457],{"emptyLinePlaceholder":1456},[661,3303,3304,3306],{"class":1055,"line":1359},[661,3305,636],{"class":1063},[661,3307,1283],{"class":1059},[661,3309,3310,3313,3315,3318,3321],{"class":1055,"line":1512},[661,3311,3312],{"class":1288},"  width",[661,3314,690],{"class":1059},[661,3316,3317],{"class":1288},"480",[661,3319,3320],{"class":1305},"px",[661,3322,1356],{"class":1059},[661,3324,3325,3328,3330,3333,3335],{"class":1055,"line":1530},[661,3326,3327],{"class":1288},"  border-radius",[661,3329,690],{"class":1059},[661,3331,3332],{"class":1288},"5",[661,3334,3320],{"class":1305},[661,3336,1356],{"class":1059},[661,3338,3339,3342,3344,3347,3349,3352,3355,3357,3360,3363],{"class":1055,"line":1540},[661,3340,3341],{"class":1288},"  border-color",[661,3343,690],{"class":1059},[661,3345,3346],{"class":1288},"rgb",[661,3348,1406],{"class":1059},[661,3350,3351],{"class":1288},"0",[661,3353,3354],{"class":1288}," 0",[661,3356,3354],{"class":1288},[661,3358,3359],{"class":1059}," \u002F ",[661,3361,3362],{"class":1288},"0.3",[661,3364,1411],{"class":1059},[661,3366,3367],{"class":1055,"line":1758},[661,3368,1362],{"class":1059},[661,3370,3371],{"class":1055,"line":1768},[661,3372,1457],{"emptyLinePlaceholder":1456},[661,3374,3375,3377,3380],{"class":1055,"line":1778},[661,3376,636],{"class":1063},[661,3378,3379],{"class":1063}," h2",[661,3381,1283],{"class":1059},[661,3383,3384,3387,3389,3391],{"class":1055,"line":1806},[661,3385,3386],{"class":1288},"  margin",[661,3388,690],{"class":1059},[661,3390,3351],{"class":1288},[661,3392,1356],{"class":1059},[661,3394,3395],{"class":1055,"line":1832},[661,3396,1362],{"class":1059},[661,3398,3399],{"class":1055,"line":1841},[661,3400,1457],{"emptyLinePlaceholder":1456},[661,3402,3403,3405,3408],{"class":1055,"line":1850},[661,3404,636],{"class":1063},[661,3406,3407],{"class":1063}," p",[661,3409,1283],{"class":1059},[661,3411,3412,3415,3417,3420],{"class":1055,"line":1859},[661,3413,3414],{"class":1288},"  line-height",[661,3416,690],{"class":1059},[661,3418,3419],{"class":1288},"1.4",[661,3421,1356],{"class":1059},[661,3423,3424],{"class":1055,"line":1868},[661,3425,1362],{"class":1059},[1142,3427,1366],{"id":3428},"javascript-3",[586,3430,3431,3432,3434,3435,3437,3438,3440,3441,3446,3447,3451,3452,3457,3458,3460,3461,3463,3464,3469,3470,3472,3473,3475],{},"여기서는 메인 컨트롤의 ",[592,3433,728],{}," 요소, ",[592,3436,594],{}," 요소 및 대화 상자 내부의 \"닫기\" ",[592,3439,728],{}," 요소를 참조하기 위해 다양한 변수를 할당합니다. 먼저 ",[597,3442,3444],{"href":3443},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FEventTarget\u002FaddEventListener",[592,3445,1471],{},"를 사용하여 각 컨트롤 버튼에 ",[597,3448,3449],{"href":721},[592,3450,724],{}," 이벤트 리스너를 할당합니다. 이 이벤트 핸들러 함수는 ",[597,3453,3455],{"href":3454},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FHTMLDialogElement\u002FshowModal",[592,3456,936],{},"을 통해 관련 ",[592,3459,594],{}," 요소를 엽니다. 그런 다음 \"닫기\" ",[592,3462,728],{}," 참조를 반복하여 ",[597,3465,3467],{"href":3466},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FHTMLDialogElement\u002Fclose",[592,3468,1187],{},"를 통해 ",[592,3471,594],{}," 요소를 닫는 ",[592,3474,724],{}," 이벤트 핸들러 함수를 각각 버튼에 할당합니다.",[1045,3477,3479],{"className":1382,"code":3478,"language":1384,"meta":2811,"style":1050},"const noneBtn = document.getElementById(\"none-btn\");\nconst closerequestBtn = document.getElementById(\"closerequest-btn\");\nconst anyBtn = document.getElementById(\"any-btn\");\n\nconst noneDialog = document.querySelector(\"[closedby='none']\");\nconst closerequestDialog = document.querySelector(\"[closedby='closerequest']\");\nconst anyDialog = document.querySelector(\"[closedby='any']\");\n\nconst closeBtns = document.querySelectorAll(\".close\");\n\nnoneBtn.addEventListener(\"click\", () => {\n  noneDialog.showModal();\n});\n\ncloserequestBtn.addEventListener(\"click\", () => {\n  closerequestDialog.showModal();\n});\n\nanyBtn.addEventListener(\"click\", () => {\n  anyDialog.showModal();\n});\n\ncloseBtns.forEach((btn) => {\n  btn.addEventListener(\"click\", () => {\n    btn.parentElement.close();\n  });\n});\n",[592,3480,3481,3500,3519,3538,3542,3562,3582,3602,3606,3627,3631,3648,3657,3661,3665,3682,3691,3695,3699,3716,3725,3729,3733,3753,3770,3779,3784],{"__ignoreMap":1050},[661,3482,3483,3485,3488,3490,3492,3494,3496,3498],{"class":1055,"line":1056},[661,3484,1391],{"class":1305},[661,3486,3487],{"class":1288}," noneBtn",[661,3489,1397],{"class":1305},[661,3491,1400],{"class":1059},[661,3493,1930],{"class":1066},[661,3495,1406],{"class":1059},[661,3497,2874],{"class":1102},[661,3499,1411],{"class":1059},[661,3501,3502,3504,3507,3509,3511,3513,3515,3517],{"class":1055,"line":1073},[661,3503,1391],{"class":1305},[661,3505,3506],{"class":1288}," closerequestBtn",[661,3508,1397],{"class":1305},[661,3510,1400],{"class":1059},[661,3512,1930],{"class":1066},[661,3514,1406],{"class":1059},[661,3516,2902],{"class":1102},[661,3518,1411],{"class":1059},[661,3520,3521,3523,3526,3528,3530,3532,3534,3536],{"class":1055,"line":1088},[661,3522,1391],{"class":1305},[661,3524,3525],{"class":1288}," anyBtn",[661,3527,1397],{"class":1305},[661,3529,1400],{"class":1059},[661,3531,1930],{"class":1066},[661,3533,1406],{"class":1059},[661,3535,2938],{"class":1102},[661,3537,1411],{"class":1059},[661,3539,3540],{"class":1055,"line":1107},[661,3541,1457],{"emptyLinePlaceholder":1456},[661,3543,3544,3546,3549,3551,3553,3555,3557,3560],{"class":1055,"line":1123},[661,3545,1391],{"class":1305},[661,3547,3548],{"class":1288}," noneDialog",[661,3550,1397],{"class":1305},[661,3552,1400],{"class":1059},[661,3554,1403],{"class":1066},[661,3556,1406],{"class":1059},[661,3558,3559],{"class":1102},"\"[closedby='none']\"",[661,3561,1411],{"class":1059},[661,3563,3564,3566,3569,3571,3573,3575,3577,3580],{"class":1055,"line":1133},[661,3565,1391],{"class":1305},[661,3567,3568],{"class":1288}," closerequestDialog",[661,3570,1397],{"class":1305},[661,3572,1400],{"class":1059},[661,3574,1403],{"class":1066},[661,3576,1406],{"class":1059},[661,3578,3579],{"class":1102},"\"[closedby='closerequest']\"",[661,3581,1411],{"class":1059},[661,3583,3584,3586,3589,3591,3593,3595,3597,3600],{"class":1055,"line":1333},[661,3585,1391],{"class":1305},[661,3587,3588],{"class":1288}," anyDialog",[661,3590,1397],{"class":1305},[661,3592,1400],{"class":1059},[661,3594,1403],{"class":1066},[661,3596,1406],{"class":1059},[661,3598,3599],{"class":1102},"\"[closedby='any']\"",[661,3601,1411],{"class":1059},[661,3603,3604],{"class":1055,"line":1339},[661,3605,1457],{"emptyLinePlaceholder":1456},[661,3607,3608,3610,3613,3615,3617,3620,3622,3625],{"class":1055,"line":1345},[661,3609,1391],{"class":1305},[661,3611,3612],{"class":1288}," closeBtns",[661,3614,1397],{"class":1305},[661,3616,1400],{"class":1059},[661,3618,3619],{"class":1066},"querySelectorAll",[661,3621,1406],{"class":1059},[661,3623,3624],{"class":1102},"\".close\"",[661,3626,1411],{"class":1059},[661,3628,3629],{"class":1055,"line":1359},[661,3630,1457],{"emptyLinePlaceholder":1456},[661,3632,3633,3636,3638,3640,3642,3644,3646],{"class":1055,"line":1512},[661,3634,3635],{"class":1059},"noneBtn.",[661,3637,1471],{"class":1066},[661,3639,1406],{"class":1059},[661,3641,1476],{"class":1102},[661,3643,1479],{"class":1059},[661,3645,1482],{"class":1305},[661,3647,1283],{"class":1059},[661,3649,3650,3653,3655],{"class":1055,"line":1530},[661,3651,3652],{"class":1059},"  noneDialog.",[661,3654,1492],{"class":1066},[661,3656,1495],{"class":1059},[661,3658,3659],{"class":1055,"line":1540},[661,3660,1500],{"class":1059},[661,3662,3663],{"class":1055,"line":1758},[661,3664,1457],{"emptyLinePlaceholder":1456},[661,3666,3667,3670,3672,3674,3676,3678,3680],{"class":1055,"line":1768},[661,3668,3669],{"class":1059},"closerequestBtn.",[661,3671,1471],{"class":1066},[661,3673,1406],{"class":1059},[661,3675,1476],{"class":1102},[661,3677,1479],{"class":1059},[661,3679,1482],{"class":1305},[661,3681,1283],{"class":1059},[661,3683,3684,3687,3689],{"class":1055,"line":1778},[661,3685,3686],{"class":1059},"  closerequestDialog.",[661,3688,1492],{"class":1066},[661,3690,1495],{"class":1059},[661,3692,3693],{"class":1055,"line":1806},[661,3694,1500],{"class":1059},[661,3696,3697],{"class":1055,"line":1832},[661,3698,1457],{"emptyLinePlaceholder":1456},[661,3700,3701,3704,3706,3708,3710,3712,3714],{"class":1055,"line":1841},[661,3702,3703],{"class":1059},"anyBtn.",[661,3705,1471],{"class":1066},[661,3707,1406],{"class":1059},[661,3709,1476],{"class":1102},[661,3711,1479],{"class":1059},[661,3713,1482],{"class":1305},[661,3715,1283],{"class":1059},[661,3717,3718,3721,3723],{"class":1055,"line":1850},[661,3719,3720],{"class":1059},"  anyDialog.",[661,3722,1492],{"class":1066},[661,3724,1495],{"class":1059},[661,3726,3727],{"class":1055,"line":1859},[661,3728,1500],{"class":1059},[661,3730,3731],{"class":1055,"line":1868},[661,3732,1457],{"emptyLinePlaceholder":1456},[661,3734,3735,3738,3741,3744,3747,3749,3751],{"class":1055,"line":1888},[661,3736,3737],{"class":1059},"closeBtns.",[661,3739,3740],{"class":1066},"forEach",[661,3742,3743],{"class":1059},"((",[661,3745,3746],{"class":2081},"btn",[661,3748,2085],{"class":1059},[661,3750,1482],{"class":1305},[661,3752,1283],{"class":1059},[661,3754,3755,3758,3760,3762,3764,3766,3768],{"class":1055,"line":1897},[661,3756,3757],{"class":1059},"  btn.",[661,3759,1471],{"class":1066},[661,3761,1406],{"class":1059},[661,3763,1476],{"class":1102},[661,3765,1479],{"class":1059},[661,3767,1482],{"class":1305},[661,3769,1283],{"class":1059},[661,3771,3772,3775,3777],{"class":1055,"line":3137},[661,3773,3774],{"class":1059},"    btn.parentElement.",[661,3776,1535],{"class":1066},[661,3778,1495],{"class":1059},[661,3780,3781],{"class":1055,"line":3153},[661,3782,3783],{"class":1059},"  });\n",[661,3785,3786],{"class":1055,"line":3174},[661,3787,1500],{"class":1059},[1142,3789,1144],{"id":3790},"결과-4",[586,3792,3793],{},"렌더링된 결과는 다음과 같습니다.",[586,3795,3796,3797,3799,3800,3803],{},"각 버튼을 클릭하여 대화 상자를 열어보세요. 첫 번째는 \"닫기\" 버튼을 클릭해야만 닫을 수 있습니다. 두 번째는 ",[639,3798,641],{}," 키와 같은 장치별 사용자 작업을 통해서도 닫을 수 있습니다. 세 번째는 완전한 ",[597,3801,3802],{"href":704},"\"간편 닫기\" 동작","을 가지므로 대화 상자 외부를 클릭하거나 탭하여 닫을 수도 있습니다.",[1020,3805,3807],{"id":3806},"대화-상자-애니메이션","대화 상자 애니메이션",[586,3809,3810,3812,3813,3819,3820,3823,3824,3828,3829,3831,3832,3834,3835,1585,3839,3843,3844,3846,3847,3849,3850,3852],{},[592,3811,594],{},"는 숨겨져 있을 때 ",[597,3814,3816],{"href":3815},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002Fdisplay",[592,3817,3818],{},"display: none;","으로 설정되고 나타날 때 ",[592,3821,3822],{},"display: block;","으로 설정되며, top layer와 ",[597,3825,3827],{"href":3826},"\u002Fko\u002Fdocs\u002FWeb\u002FPerformance\u002FGuides\u002FHow_browsers_work#building_the_accessibility_tree","접근성 트리","에서 제거\u002F추가됩니다. 따라서 ",[592,3830,594],{}," 요소에 애니메이션을 적용하려면 ",[592,3833,992],{}," 속성이 애니메이션을 지원해야 합니다. ",[597,3836,3838],{"href":3837},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002Fdisplay#browser_compatibility","지원하는 브라우저",[597,3840,3842],{"href":3841},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_animated_properties#discrete","불연속 애니메이션 유형","의 변형을 통해 ",[592,3845,992],{}," 속성에 애니메이션 효과를 줍니다. 구체적으로, 브라우저는 ",[592,3848,763],{},"과 ",[592,3851,992],{}," 의 다른 값 사이를 전환하여 애니메이션이 진행되는 전체 기간 동안 콘텐츠가 보이도록 처리합니다.",[586,3854,3855],{},"예를 들면,",[678,3857,3858,3880],{},[681,3859,3860,3862,3863,3865,3866,3869,3870,3872,3873,3876,3877,3879],{},[592,3861,992],{},"를 ",[592,3864,763],{},"에서 ",[592,3867,3868],{},"block"," (또는 다른 보이는 ",[592,3871,992],{}," 값)으로 애니메이션을 적용할 때, 애니메이션 시작 시점인 ",[592,3874,3875],{},"0%","에서 값이 ",[592,3878,3868],{},"으로 전환되어 애니메이션 전체 기간 동안 요소가 보이게 됩니다.",[681,3881,3882,3862,3884,3886,3887,3889,3890,3892,3893,3876,3896,3879],{},[592,3883,992],{},[592,3885,3868],{},"(또는 다른 보이는 ",[592,3888,992],{}," 값)에서 ",[592,3891,763],{},"으로 애니메이션을 적용할 때, 애니메이션 종료 시점인 ",[592,3894,3895],{},"100%",[592,3897,763],{},[656,3899,3900],{},[586,3901,3902,664,3904,3908,3909,3915,3916,3920],{},[661,3903,829],{},[597,3905,3907],{"href":3906},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FTransitions","CSS 전환","을 사용하여 애니메이션을 적용할 때는 위의 동작을 활성화하기 위해 ",[597,3910,3912],{"href":3911},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002Ftransition-behavior",[592,3913,3914],{},"transition-behavior: allow-discrete"," 를 설정해야 합니다. 이 동작은 ",[597,3917,3919],{"href":3918},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_animations","CSS 애니메이션","으로 애니메이션을 적용할 때 기본적으로 사용할 수 있으므로 별도의 추가 작업이 필요하지 않습니다.",[1142,3922,3924],{"id":3923},"대화-상자-요소-전환하기","대화 상자 요소 전환하기",[586,3926,3927,3928,3930],{},"CSS 전환으로 ",[592,3929,594],{},"에 애니메이션을 적용할 때 다음 기능이 필요합니다.",[678,3932,3933,3955,3977,3995],{},[681,3934,3935,3941,3942],{},[597,3936,3938],{"href":3937},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002F@starting-style",[592,3939,3940],{},"@starting-style"," @규칙\n",[678,3943,3944],{},[681,3945,690,3946,3948,3949,3951,3952,3954],{},[592,3947,594],{},"가 열릴 때마다 전환 효과를 적용하고 싶은 속성들의 시작 값을 지정합니다. 이는 예상치 못한 동작을 방지하기 위해 필요합니다. 기본적으로 CSS 전환은 이미 화면에 표시된 요소에서 속성이 한 값에서 다른 값으로 변경될 때만 발생합니다. 요소가 처음 스타일을 적용받을 때나 ",[592,3950,992],{}," 속성이 ",[592,3953,763],{},"에서 다른 값으로 바뀔 때는 트리거되지 않습니다.",[681,3956,3957,3961,3962],{},[597,3958,3959],{"href":3815},[592,3960,992],{}," 속성\n",[678,3963,3964],{},[681,3965,3966,3967,3969,3970,3973,3974,3976],{},": 전환 목록에 ",[592,3968,992],{},"를 추가하여 대화 상자가 전환 기간 동안 ",[592,3971,3972],{},"display: block","(또는 대화 상자가 열린 상태에 설정된 다른 보이는 ",[592,3975,992],{}," 값)으로 유지되어 다른 전환 효과가 제대로 보입니다.",[681,3978,3979,3961,3985],{},[597,3980,3982],{"href":3981},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002Foverlay",[592,3983,3984],{},"overlay",[678,3986,3987],{},[681,3988,3966,3989,3991,3992,3994],{},[592,3990,3984],{},"를 포함하여 전환이 완료될 때까지 상위 레이어에서 ",[592,3993,594],{}," 제거를 지연하여 전환 효과가 제대로 보입니다.",[681,3996,3997,3961,4000],{},[592,3998,3999],{},"transition-behavior",[678,4001,4002],{},[681,4003,690,4004,1012,4006,4008,4009,4012,4013,4015],{},[592,4005,992],{},[592,4007,3984],{}," 전환(또는 ",[592,4010,4011],{},"transition"," 단축형)에 ",[592,4014,3914],{},"를 설정하여 기본적으로 애니메이션이 불가능한 이 두 속성에 불연속 전환을 적용할 수 있습니다.",[586,4017,4018],{},"다음은 이것이 어떻게 동작하는지 보여주는 간단한 예제입니다.",[4020,4021,600],"h5",{"id":4022},"html-3",[586,4024,4025,4026,4028,4029,4031],{},"HTML에는 ",[592,4027,594],{}," 요소와 대화 상자를 표시하는 버튼이 포함되어 있습니다. 또한 ",[592,4030,594],{}," 요소에는 대화 상자 자체를 닫을 수 있는 다른 버튼이 포함되어 있습니다.",[1045,4033,4035],{"className":1047,"code":4034,"language":1049,"meta":1050,"style":1050},"\u003Cdialog id=\"dialog\">\n  여기에 내용\n  \u003Cbutton class=\"close\">닫기\u003C\u002Fbutton>\n\u003C\u002Fdialog>\n\n\u003Cbutton class=\"show\">모달 나타내기\u003C\u002Fbutton>\n",[592,4036,4037,4051,4056,4074,4082,4086],{"__ignoreMap":1050},[661,4038,4039,4041,4043,4045,4047,4049],{"class":1055,"line":1056},[661,4040,1060],{"class":1059},[661,4042,636],{"class":1063},[661,4044,1627],{"class":1066},[661,4046,1099],{"class":1059},[661,4048,1042],{"class":1102},[661,4050,1070],{"class":1059},[661,4052,4053],{"class":1055,"line":1073},[661,4054,4055],{"class":1059},"  여기에 내용\n",[661,4057,4058,4060,4062,4064,4066,4068,4070,4072],{"class":1055,"line":1088},[661,4059,1076],{"class":1059},[661,4061,1113],{"class":1063},[661,4063,3035],{"class":1066},[661,4065,1099],{"class":1059},[661,4067,2075],{"class":1102},[661,4069,1223],{"class":1059},[661,4071,1113],{"class":1063},[661,4073,1070],{"class":1059},[661,4075,4076,4078,4080],{"class":1055,"line":1107},[661,4077,1136],{"class":1059},[661,4079,636],{"class":1063},[661,4081,1070],{"class":1059},[661,4083,4084],{"class":1055,"line":1123},[661,4085,1457],{"emptyLinePlaceholder":1456},[661,4087,4088,4090,4092,4094,4096,4099,4102,4104],{"class":1055,"line":1133},[661,4089,1060],{"class":1059},[661,4091,1113],{"class":1063},[661,4093,3035],{"class":1066},[661,4095,1099],{"class":1059},[661,4097,4098],{"class":1102},"\"show\"",[661,4100,4101],{"class":1059},">모달 나타내기\u003C\u002F",[661,4103,1113],{"class":1063},[661,4105,1070],{"class":1059},[4020,4107,1265],{"id":4108},"css-1",[586,4110,4111,4112,1012,4115,4118,4119,4121,4122,4125,4126,4128,4129,4131,4132,4134,4135,4137,4138,4140,4141,4143,4144,4147],{},"CSS에는 ",[592,4113,4114],{},"opacity",[592,4116,4117],{},"transform"," 속성의 전환 시작 스타일을 정의하는 ",[592,4120,3940],{}," 블록과 ",[592,4123,4124],{},"dialog:open"," 상태에 대한 전환 종료 스타일, 그리고 ",[592,4127,594],{},"가 나타난 후 다시 전환할 기본 ",[592,4130,636],{}," 상태의 기본 스타일이 포함되어 있습니다. ",[592,4133,594],{},"의 ",[592,4136,4011],{}," 목록에는 이러한 속성뿐만 아니라 ",[592,4139,992],{}," 및 ",[592,4142,3984],{}," 속성도 포함되며, 각각에는 ",[592,4145,4146],{},"allow-discrete","가 설정되어 있습니다.",[586,4149,4150,4151,4153,4154,4134,4159,4162,4163,4165,4166,4169,4170,4172],{},"또한 ",[592,4152,594],{}," 뒤에 나타나는 ",[597,4155,4157],{"href":4156},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002F::backdrop",[592,4158,876],{},[592,4160,4161],{},"background-color"," 속성에 대한 시작 스타일 값을 설정하여 ",[592,4164,594],{},"가 열릴 때 어두워지는 멋진 애니메이션을 제공합니다. ",[592,4167,4168],{},"dialog:open::backdrop"," 선택자는 대화 상자가 열려 있을 때만 ",[592,4171,594],{}," 요소의 배경을 선택합니다.",[1045,4174,4176],{"className":1273,"code":4175,"language":1264,"meta":1050,"style":1050},"\u002F* 대화 상자의 열린 상태 *\u002F\ndialog:open {\n  opacity: 1;\n  transform: scaleY(1);\n}\n\n\u002F* 대화 상자의 닫힌 상태 *\u002F\ndialog {\n  opacity: 0;\n  transform: scaleY(0);\n  transition:\n    opacity 0.7s ease-out,\n    transform 0.7s ease-out,\n    overlay 0.7s ease-out allow-discrete,\n    display 0.7s ease-out allow-discrete;\n  \u002F* 다음과 동일\n  transition: all 0.7s allow-discrete; *\u002F\n}\n\n\u002F* 열기 전 상태 *\u002F\n\u002F* 이전 dialog:open 규칙과 특이성이 같으므로 효과를 발휘하려면\n  dialog:open 규칙 다음에 있어야 함 *\u002F\n@starting-style {\n  dialog:open {\n    opacity: 0;\n    transform: scaleY(0);\n  }\n}\n\n\u002F* 대화 상자 모달이 상위 레이어로 승격될 때 ::backdrop 전환 *\u002F\ndialog::backdrop {\n  background-color: rgb(0 0 0 \u002F 0%);\n  transition:\n    display 0.7s allow-discrete,\n    overlay 0.7s allow-discrete,\n    background-color 0.7s;\n  \u002F* 다음과 동일\n  transition: all 0.7s allow-discrete; *\u002F\n}\n\ndialog:open::backdrop {\n  background-color: rgb(0 0 0 \u002F 25%);\n}\n\n\u002F* 이 starting-style 규칙은 위의 선택자 안에 중첩될 수 없음.\n중첩 선택자는 의사 요소를 나타낼 수 없기 때문. *\u002F\n\n@starting-style {\n  dialog:open::backdrop {\n    background-color: rgb(0 0 0 \u002F 0%);\n  }\n}\n",[592,4177,4178,4183,4190,4200,4216,4220,4224,4229,4235,4245,4259,4267,4283,4296,4311,4325,4330,4335,4339,4343,4348,4353,4358,4364,4371,4382,4397,4402,4406,4410,4415,4423,4449,4456,4467,4478,4490,4495,4500,4505,4510,4522,4548,4553,4558,4564,4570,4575,4582,4593,4619,4624],{"__ignoreMap":1050},[661,4179,4180],{"class":1055,"line":1056},[661,4181,4182],{"class":1462},"\u002F* 대화 상자의 열린 상태 *\u002F\n",[661,4184,4185,4187],{"class":1055,"line":1073},[661,4186,636],{"class":1063},[661,4188,4189],{"class":1059},":open {\n",[661,4191,4192,4194,4196,4198],{"class":1055,"line":1088},[661,4193,1348],{"class":1288},[661,4195,690],{"class":1059},[661,4197,2600],{"class":1288},[661,4199,1356],{"class":1059},[661,4201,4202,4205,4207,4210,4212,4214],{"class":1055,"line":1107},[661,4203,4204],{"class":1288},"  transform",[661,4206,690],{"class":1059},[661,4208,4209],{"class":1288},"scaleY",[661,4211,1406],{"class":1059},[661,4213,2600],{"class":1288},[661,4215,1411],{"class":1059},[661,4217,4218],{"class":1055,"line":1123},[661,4219,1362],{"class":1059},[661,4221,4222],{"class":1055,"line":1133},[661,4223,1457],{"emptyLinePlaceholder":1456},[661,4225,4226],{"class":1055,"line":1333},[661,4227,4228],{"class":1462},"\u002F* 대화 상자의 닫힌 상태 *\u002F\n",[661,4230,4231,4233],{"class":1055,"line":1339},[661,4232,636],{"class":1063},[661,4234,1283],{"class":1059},[661,4236,4237,4239,4241,4243],{"class":1055,"line":1345},[661,4238,1348],{"class":1288},[661,4240,690],{"class":1059},[661,4242,3351],{"class":1288},[661,4244,1356],{"class":1059},[661,4246,4247,4249,4251,4253,4255,4257],{"class":1055,"line":1359},[661,4248,4204],{"class":1288},[661,4250,690],{"class":1059},[661,4252,4209],{"class":1288},[661,4254,1406],{"class":1059},[661,4256,3351],{"class":1288},[661,4258,1411],{"class":1059},[661,4260,4261,4264],{"class":1055,"line":1512},[661,4262,4263],{"class":1288},"  transition",[661,4265,4266],{"class":1059},":\n",[661,4268,4269,4272,4275,4278,4281],{"class":1055,"line":1530},[661,4270,4271],{"class":1059},"    opacity ",[661,4273,4274],{"class":1288},"0.7",[661,4276,4277],{"class":1305},"s",[661,4279,4280],{"class":1288}," ease-out",[661,4282,1309],{"class":1059},[661,4284,4285,4288,4290,4292,4294],{"class":1055,"line":1540},[661,4286,4287],{"class":1059},"    transform ",[661,4289,4274],{"class":1288},[661,4291,4277],{"class":1305},[661,4293,4280],{"class":1288},[661,4295,1309],{"class":1059},[661,4297,4298,4301,4304,4306,4308],{"class":1055,"line":1758},[661,4299,4300],{"class":1288},"    overlay",[661,4302,4303],{"class":1288}," 0.7",[661,4305,4277],{"class":1305},[661,4307,4280],{"class":1288},[661,4309,4310],{"class":1059}," allow-discrete,\n",[661,4312,4313,4316,4318,4320,4322],{"class":1055,"line":1768},[661,4314,4315],{"class":1059},"    display ",[661,4317,4274],{"class":1288},[661,4319,4277],{"class":1305},[661,4321,4280],{"class":1288},[661,4323,4324],{"class":1059}," allow-discrete;\n",[661,4326,4327],{"class":1055,"line":1778},[661,4328,4329],{"class":1462},"  \u002F* 다음과 동일\n",[661,4331,4332],{"class":1055,"line":1806},[661,4333,4334],{"class":1462},"  transition: all 0.7s allow-discrete; *\u002F\n",[661,4336,4337],{"class":1055,"line":1832},[661,4338,1362],{"class":1059},[661,4340,4341],{"class":1055,"line":1841},[661,4342,1457],{"emptyLinePlaceholder":1456},[661,4344,4345],{"class":1055,"line":1850},[661,4346,4347],{"class":1462},"\u002F* 열기 전 상태 *\u002F\n",[661,4349,4350],{"class":1055,"line":1859},[661,4351,4352],{"class":1462},"\u002F* 이전 dialog:open 규칙과 특이성이 같으므로 효과를 발휘하려면\n",[661,4354,4355],{"class":1055,"line":1868},[661,4356,4357],{"class":1462},"  dialog:open 규칙 다음에 있어야 함 *\u002F\n",[661,4359,4360,4362],{"class":1055,"line":1888},[661,4361,3940],{"class":1305},[661,4363,1283],{"class":1059},[661,4365,4366,4369],{"class":1055,"line":1897},[661,4367,4368],{"class":1063},"  dialog",[661,4370,4189],{"class":1059},[661,4372,4373,4376,4378,4380],{"class":1055,"line":3137},[661,4374,4375],{"class":1288},"    opacity",[661,4377,690],{"class":1059},[661,4379,3351],{"class":1288},[661,4381,1356],{"class":1059},[661,4383,4384,4387,4389,4391,4393,4395],{"class":1055,"line":3153},[661,4385,4386],{"class":1288},"    transform",[661,4388,690],{"class":1059},[661,4390,4209],{"class":1288},[661,4392,1406],{"class":1059},[661,4394,3351],{"class":1288},[661,4396,1411],{"class":1059},[661,4398,4399],{"class":1055,"line":3174},[661,4400,4401],{"class":1059},"  }\n",[661,4403,4404],{"class":1055,"line":3183},[661,4405,1362],{"class":1059},[661,4407,4408],{"class":1055,"line":3189},[661,4409,1457],{"emptyLinePlaceholder":1456},[661,4411,4412],{"class":1055,"line":3195},[661,4413,4414],{"class":1462},"\u002F* 대화 상자 모달이 상위 레이어로 승격될 때 ::backdrop 전환 *\u002F\n",[661,4416,4417,4419,4421],{"class":1055,"line":3204},[661,4418,636],{"class":1063},[661,4420,876],{"class":1066},[661,4422,1283],{"class":1059},[661,4424,4425,4428,4430,4432,4434,4436,4438,4440,4442,4444,4447],{"class":1055,"line":3223},[661,4426,4427],{"class":1288},"  background-color",[661,4429,690],{"class":1059},[661,4431,3346],{"class":1288},[661,4433,1406],{"class":1059},[661,4435,3351],{"class":1288},[661,4437,3354],{"class":1288},[661,4439,3354],{"class":1288},[661,4441,3359],{"class":1059},[661,4443,3351],{"class":1288},[661,4445,4446],{"class":1305},"%",[661,4448,1411],{"class":1059},[661,4450,4452,4454],{"class":1055,"line":4451},33,[661,4453,4263],{"class":1288},[661,4455,4266],{"class":1059},[661,4457,4459,4461,4463,4465],{"class":1055,"line":4458},34,[661,4460,4315],{"class":1059},[661,4462,4274],{"class":1288},[661,4464,4277],{"class":1305},[661,4466,4310],{"class":1059},[661,4468,4470,4472,4474,4476],{"class":1055,"line":4469},35,[661,4471,4300],{"class":1288},[661,4473,4303],{"class":1288},[661,4475,4277],{"class":1305},[661,4477,4310],{"class":1059},[661,4479,4481,4484,4486,4488],{"class":1055,"line":4480},36,[661,4482,4483],{"class":1059},"    background-color ",[661,4485,4274],{"class":1288},[661,4487,4277],{"class":1305},[661,4489,1356],{"class":1059},[661,4491,4493],{"class":1055,"line":4492},37,[661,4494,4329],{"class":1462},[661,4496,4498],{"class":1055,"line":4497},38,[661,4499,4334],{"class":1462},[661,4501,4503],{"class":1055,"line":4502},39,[661,4504,1362],{"class":1059},[661,4506,4508],{"class":1055,"line":4507},40,[661,4509,1457],{"emptyLinePlaceholder":1456},[661,4511,4513,4515,4518,4520],{"class":1055,"line":4512},41,[661,4514,636],{"class":1063},[661,4516,4517],{"class":1059},":open",[661,4519,876],{"class":1066},[661,4521,1283],{"class":1059},[661,4523,4525,4527,4529,4531,4533,4535,4537,4539,4541,4544,4546],{"class":1055,"line":4524},42,[661,4526,4427],{"class":1288},[661,4528,690],{"class":1059},[661,4530,3346],{"class":1288},[661,4532,1406],{"class":1059},[661,4534,3351],{"class":1288},[661,4536,3354],{"class":1288},[661,4538,3354],{"class":1288},[661,4540,3359],{"class":1059},[661,4542,4543],{"class":1288},"25",[661,4545,4446],{"class":1305},[661,4547,1411],{"class":1059},[661,4549,4551],{"class":1055,"line":4550},43,[661,4552,1362],{"class":1059},[661,4554,4556],{"class":1055,"line":4555},44,[661,4557,1457],{"emptyLinePlaceholder":1456},[661,4559,4561],{"class":1055,"line":4560},45,[661,4562,4563],{"class":1462},"\u002F* 이 starting-style 규칙은 위의 선택자 안에 중첩될 수 없음.\n",[661,4565,4567],{"class":1055,"line":4566},46,[661,4568,4569],{"class":1462},"중첩 선택자는 의사 요소를 나타낼 수 없기 때문. *\u002F\n",[661,4571,4573],{"class":1055,"line":4572},47,[661,4574,1457],{"emptyLinePlaceholder":1456},[661,4576,4578,4580],{"class":1055,"line":4577},48,[661,4579,3940],{"class":1305},[661,4581,1283],{"class":1059},[661,4583,4585,4587,4589,4591],{"class":1055,"line":4584},49,[661,4586,4368],{"class":1063},[661,4588,4517],{"class":1059},[661,4590,876],{"class":1066},[661,4592,1283],{"class":1059},[661,4594,4596,4599,4601,4603,4605,4607,4609,4611,4613,4615,4617],{"class":1055,"line":4595},50,[661,4597,4598],{"class":1288},"    background-color",[661,4600,690],{"class":1059},[661,4602,3346],{"class":1288},[661,4604,1406],{"class":1059},[661,4606,3351],{"class":1288},[661,4608,3354],{"class":1288},[661,4610,3354],{"class":1288},[661,4612,3359],{"class":1059},[661,4614,3351],{"class":1288},[661,4616,4446],{"class":1305},[661,4618,1411],{"class":1059},[661,4620,4622],{"class":1055,"line":4621},51,[661,4623,4401],{"class":1059},[661,4625,4627],{"class":1055,"line":4626},52,[661,4628,1362],{"class":1059},[656,4630,4631],{},[586,4632,4633,664,4635,4637,4638,4641,4642,4644],{},[661,4634,829],{},[592,4636,4517],{}," 의사 클래스를 지원하지 않는 브라우저에서는 ",[592,4639,4640],{},"dialog[open]"," 특성 선택자를 사용하여 열린 상태의 ",[592,4643,594],{}," 요소를 스타일링할 수 있습니다.",[4020,4646,1366],{"id":4647},"javascript-4",[586,4649,4650,4651,4653],{},"JavaScript는 클릭될 때 ",[592,4652,594],{},"를 보이거나 닫는 열기 버튼과 닫기 버튼에 이벤트 핸들러를 추가합니다.",[1045,4655,4657],{"className":1382,"code":4656,"language":1384,"meta":1050,"style":1050},"const dialogElem = document.getElementById(\"dialog\");\nconst showBtn = document.querySelector(\".show\");\nconst closeBtn = document.querySelector(\".close\");\n\nshowBtn.addEventListener(\"click\", () => {\n  dialogElem.showModal();\n});\n\ncloseBtn.addEventListener(\"click\", () => {\n  dialogElem.close();\n});\n",[592,4658,4659,4678,4697,4716,4720,4736,4745,4749,4753,4770,4778],{"__ignoreMap":1050},[661,4660,4661,4663,4666,4668,4670,4672,4674,4676],{"class":1055,"line":1056},[661,4662,1391],{"class":1305},[661,4664,4665],{"class":1288}," dialogElem",[661,4667,1397],{"class":1305},[661,4669,1400],{"class":1059},[661,4671,1930],{"class":1066},[661,4673,1406],{"class":1059},[661,4675,1042],{"class":1102},[661,4677,1411],{"class":1059},[661,4679,4680,4682,4684,4686,4688,4690,4692,4695],{"class":1055,"line":1073},[661,4681,1391],{"class":1305},[661,4683,2624],{"class":1288},[661,4685,1397],{"class":1305},[661,4687,1400],{"class":1059},[661,4689,1403],{"class":1066},[661,4691,1406],{"class":1059},[661,4693,4694],{"class":1102},"\".show\"",[661,4696,1411],{"class":1059},[661,4698,4699,4701,4704,4706,4708,4710,4712,4714],{"class":1055,"line":1088},[661,4700,1391],{"class":1305},[661,4702,4703],{"class":1288}," closeBtn",[661,4705,1397],{"class":1305},[661,4707,1400],{"class":1059},[661,4709,1403],{"class":1066},[661,4711,1406],{"class":1059},[661,4713,3624],{"class":1102},[661,4715,1411],{"class":1059},[661,4717,4718],{"class":1055,"line":1107},[661,4719,1457],{"emptyLinePlaceholder":1456},[661,4721,4722,4724,4726,4728,4730,4732,4734],{"class":1055,"line":1123},[661,4723,2684],{"class":1059},[661,4725,1471],{"class":1066},[661,4727,1406],{"class":1059},[661,4729,1476],{"class":1102},[661,4731,1479],{"class":1059},[661,4733,1482],{"class":1305},[661,4735,1283],{"class":1059},[661,4737,4738,4741,4743],{"class":1055,"line":1133},[661,4739,4740],{"class":1059},"  dialogElem.",[661,4742,1492],{"class":1066},[661,4744,1495],{"class":1059},[661,4746,4747],{"class":1055,"line":1333},[661,4748,1500],{"class":1059},[661,4750,4751],{"class":1055,"line":1339},[661,4752,1457],{"emptyLinePlaceholder":1456},[661,4754,4755,4758,4760,4762,4764,4766,4768],{"class":1055,"line":1345},[661,4756,4757],{"class":1059},"closeBtn.",[661,4759,1471],{"class":1066},[661,4761,1406],{"class":1059},[661,4763,1476],{"class":1102},[661,4765,1479],{"class":1059},[661,4767,1482],{"class":1305},[661,4769,1283],{"class":1059},[661,4771,4772,4774,4776],{"class":1055,"line":1359},[661,4773,4740],{"class":1059},[661,4775,1535],{"class":1066},[661,4777,1495],{"class":1059},[661,4779,4780],{"class":1055,"line":1512},[661,4781,1500],{"class":1059},[4020,4783,1144],{"id":4784},"결과-5",[586,4786,4787],{},"코드는 다음과 같이 렌더링됩니다.",[656,4789,4790,4818],{},[586,4791,4792,664,4794,4796,4797,3865,4800,4802,4803,4805,4806,4808,4809,4811,4812,4814,4815,4817],{},[661,4793,829],{},[592,4795,594],{},"는 표시될 때마다 ",[592,4798,4799],{},"display: none",[592,4801,3972],{},"으로 변경되므로, 대화 상자는 전환이 시작될 때마다 ",[592,4804,3940],{}," 스타일에서 ",[592,4807,4124],{}," 스타일로 전환됩니다. ",[592,4810,594],{},"가 닫히면 ",[592,4813,4124],{}," 상태에서 기본 ",[592,4816,636],{}," 상태로 전환됩니다.",[586,4819,4820,4821,4825],{},"이러한 경우에는 진입 및 퇴장 시 스타일 전환이 다를 수 있습니다. ",[597,4822,4824],{"href":4823},"\u002Fko\u002Fdocs\u002FWeb\u002FCSS\u002F@starting-style#demonstration_of_when_starting_styles_are_used","시작 스타일 적용 시점 시연"," 예제를 참조하세요.",[1142,4827,4829],{"id":4828},"대화-상자-키프레임-애니메이션","대화 상자 키프레임 애니메이션",[586,4831,4832,4833,4835],{},"CSS 키프레임 애니메이션으로 ",[592,4834,594],{},"에 애니메이션을 적용할 때는 전환과 다른 몇 가지 차이점에 유의해야 합니다.",[678,4837,4838,4843,4858,4864],{},[681,4839,4840,4842],{},[592,4841,3940],{},"을 제공하지 않습니다.",[681,4844,4845,4846,4848,4849,4851,4852,4854,4855,4857],{},"키프레임에 ",[592,4847,992],{}," 값을 포함합니다. 이는 애니메이션 전체 기간 동안 적용되는 ",[592,4850,992],{}," 값이 되며, ",[592,4853,763],{},"이 아닌 다른 ",[592,4856,992],{}," 값이 나타나기 전까지 유지됩니다.",[681,4859,4860,4861,4863],{},"불연속 애니메이션을 명시적으로 활성화할 필요가 없습니다. 키프레임 내에서 ",[592,4862,4146],{},"와 동등한 것은 없습니다.",[681,4865,4866,4867,4869,4870,4872,4873,4875],{},"키프레임 내에 ",[592,4868,3984],{},"를 설정할 필요도 없습니다. ",[592,4871,992],{}," 애니메이션이 표시된 상태에서 숨겨진 상태로의 ",[592,4874,594],{}," 애니메이션을 처리합니다.",[586,4877,4878],{},"예제를 살펴보고 어떻게 보이는지 확인해 보겠습니다.",[4020,4880,600],{"id":4881},"html-4",[586,4883,4884,4885,4028,4887,4031],{},"먼저 HTML에는 ",[592,4886,594],{},[592,4888,594],{},[1045,4890,4891],{"className":1047,"code":4034,"language":1049,"meta":1050,"style":1050},[592,4892,4893,4907,4911,4929,4937,4941],{"__ignoreMap":1050},[661,4894,4895,4897,4899,4901,4903,4905],{"class":1055,"line":1056},[661,4896,1060],{"class":1059},[661,4898,636],{"class":1063},[661,4900,1627],{"class":1066},[661,4902,1099],{"class":1059},[661,4904,1042],{"class":1102},[661,4906,1070],{"class":1059},[661,4908,4909],{"class":1055,"line":1073},[661,4910,4055],{"class":1059},[661,4912,4913,4915,4917,4919,4921,4923,4925,4927],{"class":1055,"line":1088},[661,4914,1076],{"class":1059},[661,4916,1113],{"class":1063},[661,4918,3035],{"class":1066},[661,4920,1099],{"class":1059},[661,4922,2075],{"class":1102},[661,4924,1223],{"class":1059},[661,4926,1113],{"class":1063},[661,4928,1070],{"class":1059},[661,4930,4931,4933,4935],{"class":1055,"line":1107},[661,4932,1136],{"class":1059},[661,4934,636],{"class":1063},[661,4936,1070],{"class":1059},[661,4938,4939],{"class":1055,"line":1123},[661,4940,1457],{"emptyLinePlaceholder":1456},[661,4942,4943,4945,4947,4949,4951,4953,4955,4957],{"class":1055,"line":1133},[661,4944,1060],{"class":1059},[661,4946,1113],{"class":1063},[661,4948,3035],{"class":1066},[661,4950,1099],{"class":1059},[661,4952,4098],{"class":1102},[661,4954,4101],{"class":1059},[661,4956,1113],{"class":1063},[661,4958,1070],{"class":1059},[4020,4960,1265],{"id":4961},"css-2",[586,4963,4964,4965,4967,4968,4970,4971,4973,4974,4976,4977,4979],{},"CSS는 ",[592,4966,594],{},"의 닫힌 상태와 열린 상태 사이의 전환 효과를 위한 키프레임과 ",[592,4969,594],{}," 배경의 페이드인 애니메이션을 정의합니다. ",[592,4972,594],{}," 애니메이션은 ",[592,4975,992],{}," 속성도 함께 변화시켜 실제 시각적 효과가 애니메이션 전체 기간 동안 유지되도록 합니다. ",[592,4978,594],{},"가 닫히면 배경이 즉시 DOM에서 제거되므로 배경에 페이드 아웃 애니메이션은 적용하지 못합니다.",[1045,4981,4983],{"className":1273,"code":4982,"language":1264,"meta":1050,"style":1050},"dialog {\n  animation: fade-out 0.7s ease-out;\n}\n\ndialog:open {\n  animation: fade-in 0.7s ease-out;\n}\n\ndialog:open::backdrop {\n  animation: backdrop-fade-in 0.7s ease-out forwards;\n}\n\n\u002F* 애니메이션 키프레임 *\u002F\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n    transform: scaleY(0);\n    display: none;\n  }\n\n  100% {\n    opacity: 1;\n    transform: scaleY(1);\n    display: block;\n  }\n}\n\n@keyframes fade-out {\n  0% {\n    opacity: 1;\n    transform: scaleY(1);\n    display: block;\n  }\n\n  100% {\n    opacity: 0;\n    transform: scaleY(0);\n    display: none;\n  }\n}\n\n@keyframes backdrop-fade-in {\n  0% {\n    background-color: rgb(0 0 0 \u002F 0%);\n  }\n\n  100% {\n    background-color: rgb(0 0 0 \u002F 25%);\n  }\n}\n\nbody,\nbutton {\n  font-family: system-ui;\n}\n",[592,4984,4985,4991,5007,5011,5015,5021,5036,5040,5044,5054,5072,5076,5080,5085,5089,5099,5106,5116,5130,5141,5145,5149,5156,5166,5180,5190,5194,5198,5202,5211,5217,5227,5241,5251,5255,5259,5265,5275,5289,5299,5303,5307,5311,5320,5326,5350,5354,5358,5364,5388,5392,5396,5400,5407,5414,5426],{"__ignoreMap":1050},[661,4986,4987,4989],{"class":1055,"line":1056},[661,4988,636],{"class":1063},[661,4990,1283],{"class":1059},[661,4992,4993,4996,4999,5001,5003,5005],{"class":1055,"line":1073},[661,4994,4995],{"class":1288},"  animation",[661,4997,4998],{"class":1059},": fade-out ",[661,5000,4274],{"class":1288},[661,5002,4277],{"class":1305},[661,5004,4280],{"class":1288},[661,5006,1356],{"class":1059},[661,5008,5009],{"class":1055,"line":1088},[661,5010,1362],{"class":1059},[661,5012,5013],{"class":1055,"line":1107},[661,5014,1457],{"emptyLinePlaceholder":1456},[661,5016,5017,5019],{"class":1055,"line":1123},[661,5018,636],{"class":1063},[661,5020,4189],{"class":1059},[661,5022,5023,5025,5028,5030,5032,5034],{"class":1055,"line":1133},[661,5024,4995],{"class":1288},[661,5026,5027],{"class":1059},": fade-in ",[661,5029,4274],{"class":1288},[661,5031,4277],{"class":1305},[661,5033,4280],{"class":1288},[661,5035,1356],{"class":1059},[661,5037,5038],{"class":1055,"line":1333},[661,5039,1362],{"class":1059},[661,5041,5042],{"class":1055,"line":1339},[661,5043,1457],{"emptyLinePlaceholder":1456},[661,5045,5046,5048,5050,5052],{"class":1055,"line":1345},[661,5047,636],{"class":1063},[661,5049,4517],{"class":1059},[661,5051,876],{"class":1066},[661,5053,1283],{"class":1059},[661,5055,5056,5058,5061,5063,5065,5067,5070],{"class":1055,"line":1359},[661,5057,4995],{"class":1288},[661,5059,5060],{"class":1059},": backdrop-fade-in ",[661,5062,4274],{"class":1288},[661,5064,4277],{"class":1305},[661,5066,4280],{"class":1288},[661,5068,5069],{"class":1288}," forwards",[661,5071,1356],{"class":1059},[661,5073,5074],{"class":1055,"line":1512},[661,5075,1362],{"class":1059},[661,5077,5078],{"class":1055,"line":1530},[661,5079,1457],{"emptyLinePlaceholder":1456},[661,5081,5082],{"class":1055,"line":1540},[661,5083,5084],{"class":1462},"\u002F* 애니메이션 키프레임 *\u002F\n",[661,5086,5087],{"class":1055,"line":1758},[661,5088,1457],{"emptyLinePlaceholder":1456},[661,5090,5091,5094,5097],{"class":1055,"line":1768},[661,5092,5093],{"class":1305},"@keyframes",[661,5095,5096],{"class":2081}," fade-in",[661,5098,1283],{"class":1059},[661,5100,5101,5104],{"class":1055,"line":1778},[661,5102,5103],{"class":1066},"  0%",[661,5105,1283],{"class":1059},[661,5107,5108,5110,5112,5114],{"class":1055,"line":1806},[661,5109,4375],{"class":1288},[661,5111,690],{"class":1059},[661,5113,3351],{"class":1288},[661,5115,1356],{"class":1059},[661,5117,5118,5120,5122,5124,5126,5128],{"class":1055,"line":1832},[661,5119,4386],{"class":1288},[661,5121,690],{"class":1059},[661,5123,4209],{"class":1288},[661,5125,1406],{"class":1059},[661,5127,3351],{"class":1288},[661,5129,1411],{"class":1059},[661,5131,5132,5135,5137,5139],{"class":1055,"line":1841},[661,5133,5134],{"class":1288},"    display",[661,5136,690],{"class":1059},[661,5138,763],{"class":1288},[661,5140,1356],{"class":1059},[661,5142,5143],{"class":1055,"line":1850},[661,5144,4401],{"class":1059},[661,5146,5147],{"class":1055,"line":1859},[661,5148,1457],{"emptyLinePlaceholder":1456},[661,5150,5151,5154],{"class":1055,"line":1868},[661,5152,5153],{"class":1066},"  100%",[661,5155,1283],{"class":1059},[661,5157,5158,5160,5162,5164],{"class":1055,"line":1888},[661,5159,4375],{"class":1288},[661,5161,690],{"class":1059},[661,5163,2600],{"class":1288},[661,5165,1356],{"class":1059},[661,5167,5168,5170,5172,5174,5176,5178],{"class":1055,"line":1897},[661,5169,4386],{"class":1288},[661,5171,690],{"class":1059},[661,5173,4209],{"class":1288},[661,5175,1406],{"class":1059},[661,5177,2600],{"class":1288},[661,5179,1411],{"class":1059},[661,5181,5182,5184,5186,5188],{"class":1055,"line":3137},[661,5183,5134],{"class":1288},[661,5185,690],{"class":1059},[661,5187,3868],{"class":1288},[661,5189,1356],{"class":1059},[661,5191,5192],{"class":1055,"line":3153},[661,5193,4401],{"class":1059},[661,5195,5196],{"class":1055,"line":3174},[661,5197,1362],{"class":1059},[661,5199,5200],{"class":1055,"line":3183},[661,5201,1457],{"emptyLinePlaceholder":1456},[661,5203,5204,5206,5209],{"class":1055,"line":3189},[661,5205,5093],{"class":1305},[661,5207,5208],{"class":2081}," fade-out",[661,5210,1283],{"class":1059},[661,5212,5213,5215],{"class":1055,"line":3195},[661,5214,5103],{"class":1066},[661,5216,1283],{"class":1059},[661,5218,5219,5221,5223,5225],{"class":1055,"line":3204},[661,5220,4375],{"class":1288},[661,5222,690],{"class":1059},[661,5224,2600],{"class":1288},[661,5226,1356],{"class":1059},[661,5228,5229,5231,5233,5235,5237,5239],{"class":1055,"line":3223},[661,5230,4386],{"class":1288},[661,5232,690],{"class":1059},[661,5234,4209],{"class":1288},[661,5236,1406],{"class":1059},[661,5238,2600],{"class":1288},[661,5240,1411],{"class":1059},[661,5242,5243,5245,5247,5249],{"class":1055,"line":4451},[661,5244,5134],{"class":1288},[661,5246,690],{"class":1059},[661,5248,3868],{"class":1288},[661,5250,1356],{"class":1059},[661,5252,5253],{"class":1055,"line":4458},[661,5254,4401],{"class":1059},[661,5256,5257],{"class":1055,"line":4469},[661,5258,1457],{"emptyLinePlaceholder":1456},[661,5260,5261,5263],{"class":1055,"line":4480},[661,5262,5153],{"class":1066},[661,5264,1283],{"class":1059},[661,5266,5267,5269,5271,5273],{"class":1055,"line":4492},[661,5268,4375],{"class":1288},[661,5270,690],{"class":1059},[661,5272,3351],{"class":1288},[661,5274,1356],{"class":1059},[661,5276,5277,5279,5281,5283,5285,5287],{"class":1055,"line":4497},[661,5278,4386],{"class":1288},[661,5280,690],{"class":1059},[661,5282,4209],{"class":1288},[661,5284,1406],{"class":1059},[661,5286,3351],{"class":1288},[661,5288,1411],{"class":1059},[661,5290,5291,5293,5295,5297],{"class":1055,"line":4502},[661,5292,5134],{"class":1288},[661,5294,690],{"class":1059},[661,5296,763],{"class":1288},[661,5298,1356],{"class":1059},[661,5300,5301],{"class":1055,"line":4507},[661,5302,4401],{"class":1059},[661,5304,5305],{"class":1055,"line":4512},[661,5306,1362],{"class":1059},[661,5308,5309],{"class":1055,"line":4524},[661,5310,1457],{"emptyLinePlaceholder":1456},[661,5312,5313,5315,5318],{"class":1055,"line":4550},[661,5314,5093],{"class":1305},[661,5316,5317],{"class":2081}," backdrop-fade-in",[661,5319,1283],{"class":1059},[661,5321,5322,5324],{"class":1055,"line":4555},[661,5323,5103],{"class":1066},[661,5325,1283],{"class":1059},[661,5327,5328,5330,5332,5334,5336,5338,5340,5342,5344,5346,5348],{"class":1055,"line":4560},[661,5329,4598],{"class":1288},[661,5331,690],{"class":1059},[661,5333,3346],{"class":1288},[661,5335,1406],{"class":1059},[661,5337,3351],{"class":1288},[661,5339,3354],{"class":1288},[661,5341,3354],{"class":1288},[661,5343,3359],{"class":1059},[661,5345,3351],{"class":1288},[661,5347,4446],{"class":1305},[661,5349,1411],{"class":1059},[661,5351,5352],{"class":1055,"line":4566},[661,5353,4401],{"class":1059},[661,5355,5356],{"class":1055,"line":4572},[661,5357,1457],{"emptyLinePlaceholder":1456},[661,5359,5360,5362],{"class":1055,"line":4577},[661,5361,5153],{"class":1066},[661,5363,1283],{"class":1059},[661,5365,5366,5368,5370,5372,5374,5376,5378,5380,5382,5384,5386],{"class":1055,"line":4584},[661,5367,4598],{"class":1288},[661,5369,690],{"class":1059},[661,5371,3346],{"class":1288},[661,5373,1406],{"class":1059},[661,5375,3351],{"class":1288},[661,5377,3354],{"class":1288},[661,5379,3354],{"class":1288},[661,5381,3359],{"class":1059},[661,5383,4543],{"class":1288},[661,5385,4446],{"class":1305},[661,5387,1411],{"class":1059},[661,5389,5390],{"class":1055,"line":4595},[661,5391,4401],{"class":1059},[661,5393,5394],{"class":1055,"line":4621},[661,5395,1362],{"class":1059},[661,5397,5398],{"class":1055,"line":4626},[661,5399,1457],{"emptyLinePlaceholder":1456},[661,5401,5403,5405],{"class":1055,"line":5402},53,[661,5404,3240],{"class":1063},[661,5406,1309],{"class":1059},[661,5408,5410,5412],{"class":1055,"line":5409},54,[661,5411,1113],{"class":1063},[661,5413,1283],{"class":1059},[661,5415,5417,5419,5421,5424],{"class":1055,"line":5416},55,[661,5418,3247],{"class":1288},[661,5420,690],{"class":1059},[661,5422,5423],{"class":1288},"system-ui",[661,5425,1356],{"class":1059},[661,5427,5429],{"class":1055,"line":5428},56,[661,5430,1362],{"class":1059},[4020,5432,1366],{"id":5433},"javascript-5",[586,5435,5436,5437,5439],{},"마지막으로 JavaScript는 ",[592,5438,594],{}," 열기 및 닫기를 활성화하기 위해 버튼에 이벤트 핸들러를 추가합니다.",[1045,5441,5442],{"className":1382,"code":4656,"language":1384,"meta":1050,"style":1050},[592,5443,5444,5462,5480,5498,5502,5518,5526,5530,5534,5550,5558],{"__ignoreMap":1050},[661,5445,5446,5448,5450,5452,5454,5456,5458,5460],{"class":1055,"line":1056},[661,5447,1391],{"class":1305},[661,5449,4665],{"class":1288},[661,5451,1397],{"class":1305},[661,5453,1400],{"class":1059},[661,5455,1930],{"class":1066},[661,5457,1406],{"class":1059},[661,5459,1042],{"class":1102},[661,5461,1411],{"class":1059},[661,5463,5464,5466,5468,5470,5472,5474,5476,5478],{"class":1055,"line":1073},[661,5465,1391],{"class":1305},[661,5467,2624],{"class":1288},[661,5469,1397],{"class":1305},[661,5471,1400],{"class":1059},[661,5473,1403],{"class":1066},[661,5475,1406],{"class":1059},[661,5477,4694],{"class":1102},[661,5479,1411],{"class":1059},[661,5481,5482,5484,5486,5488,5490,5492,5494,5496],{"class":1055,"line":1088},[661,5483,1391],{"class":1305},[661,5485,4703],{"class":1288},[661,5487,1397],{"class":1305},[661,5489,1400],{"class":1059},[661,5491,1403],{"class":1066},[661,5493,1406],{"class":1059},[661,5495,3624],{"class":1102},[661,5497,1411],{"class":1059},[661,5499,5500],{"class":1055,"line":1107},[661,5501,1457],{"emptyLinePlaceholder":1456},[661,5503,5504,5506,5508,5510,5512,5514,5516],{"class":1055,"line":1123},[661,5505,2684],{"class":1059},[661,5507,1471],{"class":1066},[661,5509,1406],{"class":1059},[661,5511,1476],{"class":1102},[661,5513,1479],{"class":1059},[661,5515,1482],{"class":1305},[661,5517,1283],{"class":1059},[661,5519,5520,5522,5524],{"class":1055,"line":1133},[661,5521,4740],{"class":1059},[661,5523,1492],{"class":1066},[661,5525,1495],{"class":1059},[661,5527,5528],{"class":1055,"line":1333},[661,5529,1500],{"class":1059},[661,5531,5532],{"class":1055,"line":1339},[661,5533,1457],{"emptyLinePlaceholder":1456},[661,5535,5536,5538,5540,5542,5544,5546,5548],{"class":1055,"line":1345},[661,5537,4757],{"class":1059},[661,5539,1471],{"class":1066},[661,5541,1406],{"class":1059},[661,5543,1476],{"class":1102},[661,5545,1479],{"class":1059},[661,5547,1482],{"class":1305},[661,5549,1283],{"class":1059},[661,5551,5552,5554,5556],{"class":1055,"line":1359},[661,5553,4740],{"class":1059},[661,5555,1535],{"class":1066},[661,5557,1495],{"class":1059},[661,5559,5560],{"class":1055,"line":1512},[661,5561,1500],{"class":1059},[4020,5563,5565],{"id":5564},"result","Result",[586,5567,4787],{},[644,5569,5571],{"id":5570},"기술-요약","기술 요약",[5573,5574,5577,5578],"table",{"className":5575},[5576],"properties","\n  ",[5579,5580,5581,5582,5581,5603,5581,5612,5581,5620,5581,5630,5581,5639,5581,5652],"tbody",{},"\n    ",[5583,5584,5585,5586,5585,5595,5581],"tr",{},"\n      ",[5587,5588,5590,5591,5585],"th",{"scope":5589},"row","\n        ",[597,5592,5594],{"href":5593},"\u002Fko\u002Fdocs\u002FWeb\u002FHTML\u002FGuides\u002FContent_categories","콘텐츠 카테고리",[5596,5597,5590,5598,5602],"td",{},[597,5599,5601],{"href":5600},"\u002Fko\u002Fdocs\u002FWeb\u002FHTML\u002FGuides\u002FContent_categories#flow_content","플로우 콘텐츠",",\n        구획 루트\n      ",[5583,5604,5585,5605,5585,5608,5581],{},[5587,5606,5607],{"scope":5589},"가능한 콘텐츠",[5596,5609,5590,5610,5585],{},[597,5611,5601],{"href":5600},[5583,5613,5585,5614,5585,5617,5581],{},[5587,5615,5616],{"scope":5589},"태그 생략",[5596,5618,5619],{},"불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.",[5583,5621,5585,5622,5585,5625,5581],{},[5587,5623,5624],{"scope":5589},"가능한 부모 요소",[5596,5626,5590,5627,5629],{},[597,5628,5601],{"href":5600},"를 허용하는 모든 요소\n      ",[5583,5631,5585,5632,5585,5635,5581],{},[5587,5633,5634],{"scope":5589},"암시적 ARIA 역할",[5596,5636,5590,5637,5585],{},[597,5638,636],{"href":966},[5583,5640,5585,5641,5585,5644,5581],{},[5587,5642,5643],{"scope":5589},"가능한 ARIA 역할",[5596,5645,5646],{},[597,5647,5649],{"href":5648},"\u002Fko\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FReference\u002FRoles\u002Falertdialog_role",[592,5650,5651],{},"alertdialog",[5583,5653,5585,5654,5585,5657,5581],{},[5587,5655,5656],{"scope":5589},"DOM 인터페이스",[5596,5658,5659],{},"`HTMLDialogElement`",[644,5661,5662],{"id":5662},"명세서",[644,5664,5666],{"id":5665},"브라우저-호환성","브라우저 호환성",[644,5668,5670],{"id":5669},"같이-보기","같이 보기",[678,5672,5673,5679,5687,5694,5702,5710,5715],{},[681,5674,5675,5678],{},[592,5676,5677],{},"HTMLDialogElement"," 인터페이스",[681,5680,5681,595,5684,5686],{},[592,5682,5683],{},"HTMLDialogElement\u002Fclose_event",[592,5685,5677],{}," 인터페이스의 이벤트",[681,5688,5689,595,5692,5686],{},[592,5690,5691],{},"HTMLDialogElement\u002Fcancel_event",[592,5693,5677],{},[681,5695,5696,595,5699,5701],{},[592,5697,5698],{},"HTMLDialogElement\u002Fopen",[592,5700,5677],{}," 인터페이스의 속성",[681,5703,5704,5705,5709],{},"HTML 요소를 위한 ",[597,5706,5707],{"href":1005},[592,5708,1008],{}," 전역 특성",[681,5711,5712,5714],{},[592,5713,876],{}," CSS 의사 요소",[681,5716,5717,5718],{},"학습 영역의 ",[597,5719,5721],{"href":5720},"\u002Fko\u002Fdocs\u002FLearn_web_development\u002FExtensions\u002FForms","Web forms",[5723,5724,5725],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":1050,"searchDepth":1073,"depth":1073,"links":5727},[5728,5729,5730,5731,5739,5740,5741,5742],{"id":646,"depth":1073,"text":646},{"id":839,"depth":1073,"text":675},{"id":910,"depth":1073,"text":910},{"id":1018,"depth":1073,"text":1018,"children":5732},[5733,5734,5735,5736,5737,5738],{"id":1022,"depth":1088,"text":1023},{"id":1169,"depth":1088,"text":1170},{"id":1551,"depth":1088,"text":1552},{"id":2285,"depth":1088,"text":2286},{"id":2770,"depth":1088,"text":2771},{"id":3806,"depth":1088,"text":3807},{"id":5570,"depth":1073,"text":5571},{"id":5662,"depth":1073,"text":5662},{"id":5665,"depth":1073,"text":5666},{"id":5669,"depth":1073,"text":5670},"\u003Cdialog> HTML 요소는 모달 또는 비모달 대화 상자나 닫을 수 있는 알림창, 검사기, 하위 창과 같은 상호작용 가능한 컴포넌트를 나타냅니다.","md",{"slug":5746,"l10n":5747},"develop\u002Fhtml\u002Felements\u002Fdialog",{"sourceCommit":5748},"2dfac351d5f732bb9b61ec3b506d725e01fcc1bf",{"title":148,"description":5743},"hY5qD9saDsdkPvoncsStiFCYPliwmWoxSubk9ntsHcU",[5752,5755,5758,5869,5877,5902],{"title":5,"icon":6,"path":7,"stem":8,"children":5753,"page":15},[5754],{"title":11,"path":12,"stem":13,"icon":14},{"title":17,"icon":18,"path":19,"stem":20,"children":5756,"page":15},[5757],{"title":23,"path":24,"stem":25,"icon":26},{"title":28,"icon":29,"path":30,"stem":31,"children":5759,"page":15},[5760,5763,5861],{"title":34,"redirect":35,"icon":36,"path":37,"stem":38,"children":5761,"page":15},[5762],{"title":41,"path":35,"stem":42,"icon":36},{"title":44,"path":45,"stem":46,"children":5764,"page":15},[5765,5860],{"title":49,"path":50,"stem":51,"children":5766,"icon":54},[5767,5768,5769,5770,5771,5772,5773,5774,5775,5776,5777,5778,5779,5780,5781,5782,5783,5784,5785,5786,5787,5788,5789,5790,5791,5792,5793,5794,5795,5796,5797,5798,5799,5800,5801,5802,5803,5804,5805,5806,5807,5808,5809,5810,5811,5812,5813,5814,5815,5816,5817,5818,5819,5820,5821,5822,5823,5824,5825,5826,5827,5828,5829,5830,5831,5832,5833,5834,5835,5836,5837,5838,5839,5840,5841,5842,5843,5844,5845,5846,5847,5848,5849,5850,5851,5852,5853,5854,5855,5856,5857,5858,5859],{"title":49,"path":50,"stem":51,"icon":54},{"title":56,"path":57,"stem":58},{"title":60,"path":61,"stem":62},{"title":64,"path":65,"stem":66},{"title":68,"path":69,"stem":70},{"title":72,"path":73,"stem":74},{"title":76,"path":77,"stem":78},{"title":80,"path":81,"stem":82},{"title":84,"path":85,"stem":86},{"title":88,"path":89,"stem":90},{"title":92,"path":93,"stem":94},{"title":96,"path":97,"stem":98},{"title":100,"path":101,"stem":102},{"title":104,"path":105,"stem":106},{"title":108,"path":109,"stem":110},{"title":112,"path":113,"stem":114},{"title":116,"path":117,"stem":118},{"title":120,"path":121,"stem":122},{"title":124,"path":125,"stem":126},{"title":128,"path":129,"stem":130},{"title":132,"path":133,"stem":134},{"title":136,"path":137,"stem":138},{"title":140,"path":141,"stem":142},{"title":144,"path":145,"stem":146},{"title":148,"path":149,"stem":150},{"title":152,"path":153,"stem":154},{"title":156,"path":157,"stem":158},{"title":160,"path":161,"stem":162},{"title":164,"path":165,"stem":166},{"title":168,"path":169,"stem":170},{"title":172,"path":173,"stem":174},{"title":176,"path":177,"stem":178},{"title":180,"path":181,"stem":182},{"title":184,"path":185,"stem":186},{"title":188,"path":189,"stem":190},{"title":192,"path":193,"stem":194},{"title":196,"path":197,"stem":198},{"title":200,"path":201,"stem":202},{"title":204,"path":205,"stem":206},{"title":208,"path":209,"stem":210},{"title":212,"path":213,"stem":214},{"title":216,"path":217,"stem":218},{"title":220,"path":221,"stem":222},{"title":224,"path":225,"stem":226},{"title":228,"path":229,"stem":230},{"title":232,"path":233,"stem":234},{"title":236,"path":237,"stem":238},{"title":240,"path":241,"stem":242},{"title":244,"path":245,"stem":246},{"title":248,"path":249,"stem":250},{"title":252,"path":253,"stem":254},{"title":256,"path":257,"stem":258},{"title":260,"path":261,"stem":262},{"title":264,"path":265,"stem":266},{"title":268,"path":269,"stem":270},{"title":272,"path":273,"stem":274},{"title":276,"path":277,"stem":278},{"title":280,"path":281,"stem":282},{"title":284,"path":285,"stem":286},{"title":288,"path":289,"stem":290},{"title":292,"path":293,"stem":294},{"title":296,"path":297,"stem":298},{"title":300,"path":301,"stem":302},{"title":304,"path":305,"stem":306},{"title":308,"path":309,"stem":310},{"title":312,"path":313,"stem":314},{"title":316,"path":317,"stem":318},{"title":320,"path":321,"stem":322},{"title":324,"path":325,"stem":326},{"title":328,"path":329,"stem":330},{"title":332,"path":333,"stem":334},{"title":336,"path":337,"stem":338},{"title":340,"path":341,"stem":342},{"title":344,"path":345,"stem":346},{"title":348,"path":349,"stem":350},{"title":352,"path":353,"stem":354},{"title":356,"path":357,"stem":358},{"title":360,"path":361,"stem":362},{"title":364,"path":365,"stem":366},{"title":368,"path":369,"stem":370},{"title":372,"path":373,"stem":374},{"title":376,"path":377,"stem":378},{"title":380,"path":381,"stem":382},{"title":384,"path":385,"stem":386},{"title":388,"path":389,"stem":390},{"title":392,"path":393,"stem":394},{"title":396,"path":397,"stem":398},{"title":400,"path":401,"stem":402},{"title":404,"path":405,"stem":406},{"title":408,"path":409,"stem":410},{"title":412,"path":413,"stem":414},{"title":416,"path":417,"stem":418},{"title":420,"path":421,"stem":422},{"title":424,"path":425,"stem":426,"icon":54},{"title":428,"icon":29,"path":429,"stem":430,"children":5862,"page":15},[5863,5866],{"title":433,"icon":434,"path":435,"stem":436,"children":5864,"page":15},[5865],{"title":439,"path":440,"stem":441,"icon":434},{"title":443,"icon":444,"path":445,"stem":446,"children":5867,"page":15},[5868],{"title":449,"path":450,"stem":451,"icon":452},{"title":454,"icon":455,"path":456,"stem":457,"children":5870,"page":15},[5871],{"title":460,"icon":455,"path":461,"stem":462,"children":5872},[5873,5874],{"title":465,"path":461,"stem":462,"icon":466},{"title":468,"path":469,"stem":470,"children":5875,"page":15},[5876],{"title":473,"path":474,"stem":475,"icon":476},{"title":478,"icon":479,"path":480,"stem":481,"children":5878,"page":15},[5879,5882,5889],{"title":428,"icon":484,"path":485,"stem":486,"children":5880,"page":15},[5881],{"title":489,"path":490,"stem":491,"icon":484},{"title":493,"path":494,"stem":495,"children":5883,"page":15},[5884],{"title":498,"path":499,"stem":500,"children":5885,"page":15},[5886],{"title":503,"redirect":504,"icon":505,"path":504,"stem":506,"children":5887,"page":15},[5888],{"title":509,"path":510,"stem":511,"icon":512},{"title":514,"redirect":515,"icon":516,"path":517,"stem":518,"children":5890,"page":15},[5891,5892,5893,5894,5895,5896,5897,5898,5899,5900,5901],{"title":521,"path":515,"stem":522},{"title":524,"path":525,"stem":526},{"title":528,"path":529,"stem":530},{"title":532,"path":533,"stem":534},{"title":536,"path":537,"stem":538},{"title":540,"path":541,"stem":542},{"title":544,"path":545,"stem":546},{"title":548,"path":549,"stem":550},{"title":552,"path":553,"stem":554},{"title":556,"path":557,"stem":558},{"title":560,"path":561,"stem":562},{"title":564,"icon":565,"path":566,"stem":567,"children":5903,"page":15},[5904],{"title":570,"path":571,"stem":572,"children":5905,"page":15},[5906],{"title":575,"path":576,"stem":577,"icon":578},[5908,5909],{"title":144,"path":145,"stem":146,"children":-1},{"title":152,"path":153,"stem":154,"children":-1},1775726369944]