[{"data":1,"prerenderedAt":1545},["ShallowReactive",2],{"nav-global":3,"doc-\u002Fdevelop\u002Fhtml\u002Felements\u002Fvideo":579,"nav":1386,"surround-\u002Fdevelop\u002Fhtml\u002Felements\u002Fvideo":1542},[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":416,"authors":581,"body":582,"description":1380,"draft":15,"extension":1381,"head":581,"icon":581,"image":581,"meta":1382,"navigation":675,"path":417,"publishedAt":581,"seo":1384,"stem":418,"tags":581,"updatedAt":581,"__hash__":1385},"docs\u002F3.develop\u002F1.html\u002F1.elements\u002Fvideo.md",null,{"type":583,"value":584,"toc":1371},"minimark",[585,602,775,792,801,805,813,1056,1059,1068,1071,1253,1256,1259,1263,1266,1269,1277,1280,1286,1289,1293,1302,1306,1309,1367],[586,587,588,597,598,601],"p",{},[589,590,591,592,596],"strong",{},"HTML ",[593,594,595],"code",{},"\u003Cvideo>"," 요소","는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, ",[593,599,600],{},"\u003Caudio>"," 요소가 사용자 경험에 좀 더 적합합니다.",[603,604,610],"pre",{"className":605,"code":606,"language":607,"meta":608,"style":609},"language-html shiki shiki-themes github-light github-dark","\u003Cvideo controls width=\"250\">\n  \u003Csource src=\"\u002Fshared-assets\u002Fvideos\u002Fflower.webm\" type=\"video\u002Fwebm\" \u002F>\n\n  \u003Csource src=\"\u002Fshared-assets\u002Fvideos\u002Fflower.mp4\" type=\"video\u002Fmp4\" \u002F>\n\n  Download the\n  \u003Ca href=\"\u002Fshared-assets\u002Fvideos\u002Fflower.webm\">WEBM\u003C\u002Fa>\n  or\n  \u003Ca href=\"\u002Fshared-assets\u002Fvideos\u002Fflower.mp4\">MP4\u003C\u002Fa>\n  video.\n\u003C\u002Fvideo>\n","html","interactive-example","",[593,611,612,642,670,677,700,705,711,733,739,759,765],{"__ignoreMap":609},[613,614,617,621,625,629,632,635,639],"span",{"class":615,"line":616},"line",1,[613,618,620],{"class":619},"sVt8B","\u003C",[613,622,624],{"class":623},"s9eBZ","video",[613,626,628],{"class":627},"sScJk"," controls",[613,630,631],{"class":627}," width",[613,633,634],{"class":619},"=",[613,636,638],{"class":637},"sZZnC","\"250\"",[613,640,641],{"class":619},">\n",[613,643,645,648,651,654,656,659,662,664,667],{"class":615,"line":644},2,[613,646,647],{"class":619},"  \u003C",[613,649,650],{"class":623},"source",[613,652,653],{"class":627}," src",[613,655,634],{"class":619},[613,657,658],{"class":637},"\"\u002Fshared-assets\u002Fvideos\u002Fflower.webm\"",[613,660,661],{"class":627}," type",[613,663,634],{"class":619},[613,665,666],{"class":637},"\"video\u002Fwebm\"",[613,668,669],{"class":619}," \u002F>\n",[613,671,673],{"class":615,"line":672},3,[613,674,676],{"emptyLinePlaceholder":675},true,"\n",[613,678,680,682,684,686,688,691,693,695,698],{"class":615,"line":679},4,[613,681,647],{"class":619},[613,683,650],{"class":623},[613,685,653],{"class":627},[613,687,634],{"class":619},[613,689,690],{"class":637},"\"\u002Fshared-assets\u002Fvideos\u002Fflower.mp4\"",[613,692,661],{"class":627},[613,694,634],{"class":619},[613,696,697],{"class":637},"\"video\u002Fmp4\"",[613,699,669],{"class":619},[613,701,703],{"class":615,"line":702},5,[613,704,676],{"emptyLinePlaceholder":675},[613,706,708],{"class":615,"line":707},6,[613,709,710],{"class":619},"  Download the\n",[613,712,714,716,719,722,724,726,729,731],{"class":615,"line":713},7,[613,715,647],{"class":619},[613,717,718],{"class":623},"a",[613,720,721],{"class":627}," href",[613,723,634],{"class":619},[613,725,658],{"class":637},[613,727,728],{"class":619},">WEBM\u003C\u002F",[613,730,718],{"class":623},[613,732,641],{"class":619},[613,734,736],{"class":615,"line":735},8,[613,737,738],{"class":619},"  or\n",[613,740,742,744,746,748,750,752,755,757],{"class":615,"line":741},9,[613,743,647],{"class":619},[613,745,718],{"class":623},[613,747,721],{"class":627},[613,749,634],{"class":619},[613,751,690],{"class":637},[613,753,754],{"class":619},">MP4\u003C\u002F",[613,756,718],{"class":623},[613,758,641],{"class":619},[613,760,762],{"class":615,"line":761},10,[613,763,764],{"class":619},"  video.\n",[613,766,768,771,773],{"class":615,"line":767},11,[613,769,770],{"class":619},"\u003C\u002F",[613,772,624],{"class":623},[613,774,641],{"class":619},[586,776,777,778,780,781,783,784,787,788,791],{},"위 예제는 ",[593,779,595],{}," 요소의 간단한 사용법을 보입니다. ",[593,782,595],{}," 또한 ",[593,785,786],{},"\u003Cimg>"," 요소와 비슷하게, 표시하고자 하는 미디어로의 경로를 ",[593,789,790],{},"src"," 특성에 제공합니다. 또한 비디오의 너비와 높이, 자동재생과 반복 여부, 브라우저 기본 컨트롤 노출 여부 등 다른 정보도 특성을 통해 지정할 수 있습니다.",[586,793,794,797,798,800],{},[593,795,796],{},"\u003Cvideo>\u003C\u002Fvideo>"," 태그 안의 콘텐츠는 브라우저가 ",[593,799,595],{}," 요소를 지원하지 않을 때 보여집니다.",[802,803,804],"h2",{"id":804},"특성",[586,806,807,808,812],{},"이 요소는 ",[718,809,811],{"href":810},"\u002Fko\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes","전역 특성","을 포함합니다.",[814,815,816,830,844,854,923,933,943,953,966,1023,1033,1046],"ul",{},[817,818,819,822],"li",{},[593,820,821],{},"autoplay",[814,823,824],{},[817,825,826,827,829],{},": 부울 속성(boolean); 해당 속성이 지정된 경우 비디오가 데이터 로드를 완료하기 위해 중지하지 않고 재생할 수 있는 가장 빠른 시점에 재생되기 시작합니다.\nautoplay를 비활성화시킬 때 autoplay=\"false\"는 동작하지 않습니다. ",[593,828,595],{},"태그 내부에 autoplay 속성이 존재한다면 비디오가 자동재생 됩니다. autoplay를 비활성화하려면 해당 속성을 완전히 제거해야 합니다.",[817,831,832,835],{},[593,833,834],{},"buffered",[814,836,837],{},[817,838,839,840,843],{},": 미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 ",[593,841,842],{},"TimeRanges"," 객체를 포함합니다.",[817,845,846,849],{},[593,847,848],{},"controls",[814,850,851],{},[817,852,853],{},": 이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)\u002F재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.",[817,855,856,859],{},[593,857,858],{},"crossorigin",[814,860,861],{},[817,862,863,864,868,869,872,873,904,907,908,910,911,913,914,917,918,922],{},": crossorigin 속성은 CORS를 사용해서 관련 이미지를 패치해야 하는지 여부를 나타냅니다. ",[718,865,867],{"href":866},"\u002Fko\u002Fdocs\u002FWeb\u002FHTML\u002FHow_to\u002FCORS_enabled_image","CORS-enabled resources"," 는 ",[593,870,871],{},"\u003Ccanvas>"," 요소에서 재사용 될 수 있으며 오염되지 않습니다. 허용되는 값은 다음과 같습니다:",[814,874,875,891],{},[817,876,877,878],{},"anonymous\n",[814,879,880],{},[817,881,882,883,886,887,890],{},": CORS(",[593,884,885],{},"Origin:"," HTTP 헤더 사용)를 수행 합니다. 하지만 credential가 전송되지 않습니다. (즉, cookie, X.509 certificate, HTTP 기본 인증이 전송되지 않습니다). 서버가 원본 사이트에 credentials를 제공하지 않는 경우 (즉, ",[593,888,889],{},"Access-Control-Allow-Origin:"," HTTP 헤더를 설정하지 않음으로써), 이미지가 오염되고 사용이 제한됩니다.",[817,892,893,894],{},"use-credentials\n",[814,895,896],{},[817,897,898,899,901,902,890],{},": credential을 포함한 CORS를 (",[593,900,885],{}," HTTP 헤더 사용) 수행 합니다. (즉, cookie, certificate, HTTP 기본 인증이 수행됩니다.) 서버가 원본 사이트에 credentials를 제공하지 않는 경우 (즉, ",[593,903,889],{},[905,906],"br",{},"crossorigin이 존재하지 않는 경우, CORS 요청 없이 (즉, ",[593,909,885],{}," HTTP 헤더를 사용 보내지 않고), 리소스를 가져와 ",[593,912,871],{}," 요소에 오염되는 것을 방지합니다. 값을 설정하지 않을 경우 ",[589,915,916],{},"anonymous","가 사용 됩니다. 추가 정보는 ",[718,919,921],{"href":920},"\u002Fko\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FAttributes\u002Fcrossorigin","CORS settings attributes"," 를 참조하십시오.",[817,924,925,928],{},[593,926,927],{},"height",[814,929,930],{},[817,931,932],{},": 비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.",[817,934,935,938],{},[593,936,937],{},"loop",[814,939,940],{},[817,941,942],{},": 부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.",[817,944,945,948],{},[593,946,947],{},"muted",[814,949,950],{},[817,951,952],{},": 비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.",[817,954,955,958],{},[593,956,957],{},"played",[814,959,960],{},[817,961,962,963,965],{},": 재생된 동영상 영역을 나타내는 ",[593,964,842],{}," 객체 입니다.",[817,967,968,971],{},[593,969,970],{},"preload",[814,972,973],{},[817,974,975,976,994,996,997],{},": 이 속성은 저작자가 생각하는 가장 좋은 사용자 경험이 어떠한 것인지 브라우저에 미리 정보를 알려주는 용도록 사용됩니다. 다음 값들 중 하나를 가질 수 있습니다:",[814,977,978,981,984,987],{},[817,979,980],{},"none: 저작자가 생각하기에 사용자가 비디오를 보지 않거나 서버가 최소한의 트래픽을 유지하고자 함을 의미합니다. 다시 말해서 비디오가 캐시되지 않아야 함을 의미합니다.",[817,982,983],{},"metadata: 저작자가 생각하기에 사용자가 비디오를 보지 않을 수도 있지만 메타데이터(예를 들어서 길이)를 미리 가져오는 것은 합리적임을 의미합니다.",[817,985,986],{},"auto: 사용자가 우선순위를 가지고 있음을 의미합니다. 다시 말해서 사용자가 이를 사용하지 않을 지라도 필요하다면 전체 비디오가 다운로드 될 수 있음을 의미합니다.",[817,988,989,993],{},[990,991,992],"em",{},"빈 문자열",": auto 와 동일합니다.",[905,995],{},"스펙에서는 기본값으로 metadata를 권장하지만 설정하지 않았다면 각 브라우저가 정한 기본값을 설정하게 됩니다.",[998,999,1000,1018],"blockquote",{},[586,1001,1002,1005,1008,1009,1011,1012,1014,1015,1017],{},[613,1003,1004],{},"!NOTE",[589,1006,1007],{},"사용 정보:","- 비디오를 자동으로 재생하려 한다면 브라우저가 이를 다운로드 해야 하기 때문에 ",[593,1010,821],{},"이 이 속성보다 우선시 됩니다. ",[593,1013,821],{}," 속성과 ",[593,1016,970],{}," 속성을 둘 다 설정하는 것은 스펙상 가능합니다.",[814,1019,1020],{},[817,1021,1022],{},"브라우저가 이 속성을 반드시 스팩대로 따라야 하는 것은 아닙니다. 단지 힌트일 뿐입니다.",[817,1024,1025,1028],{},[593,1026,1027],{},"poster",[814,1029,1030],{},[817,1031,1032],{},": 사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.",[817,1034,1035,1037],{},[593,1036,790],{},[814,1038,1039],{},[817,1040,1041,1042,1045],{},": 삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 ",[593,1043,1044],{},"\u003Csource>"," 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.",[817,1047,1048,1051],{},[593,1049,1050],{},"width",[814,1052,1053],{},[817,1054,1055],{},": 비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.",[802,1057,1058],{"id":1058},"이벤트",[586,1060,1061,1063,1064,1067],{},[593,1062,595],{}," 요소는 많은 ",[718,1065,1058],{"href":1066},"\u002Fko\u002Fdocs\u002FWeb\u002FEvents#media","를 발생시킬 수 있습니다.",[802,1069,1070],{"id":1070},"예제",[603,1072,1074],{"className":605,"code":1073,"language":607,"meta":609,"style":609},"\u003C!-- Simple video example -->\n\u003Cvideo src=\"videofile.ogg\" autoplay poster=\"posterimage.jpg\">\n  Sorry, your browser doesn't support embedded videos, but don't worry, you can\n  \u003Ca href=\"videofile.ogg\">download it\u003C\u002Fa>\n  and watch it with your favorite video player!\n\u003C\u002Fvideo>\n\n\u003C!-- Video with subtitles -->\n\u003Cvideo src=\"foo.ogg\">\n  \u003Ctrack kind=\"subtitles\" src=\"foo.en.vtt\" srclang=\"en\" label=\"English\" \u002F>\n  \u003Ctrack kind=\"subtitles\" src=\"foo.sv.vtt\" srclang=\"sv\" label=\"Svenska\" \u002F>\n\u003C\u002Fvideo>\n",[593,1075,1076,1082,1108,1113,1132,1137,1145,1149,1154,1169,1209,1244],{"__ignoreMap":609},[613,1077,1078],{"class":615,"line":616},[613,1079,1081],{"class":1080},"sJ8bj","\u003C!-- Simple video example -->\n",[613,1083,1084,1086,1088,1090,1092,1095,1098,1101,1103,1106],{"class":615,"line":644},[613,1085,620],{"class":619},[613,1087,624],{"class":623},[613,1089,653],{"class":627},[613,1091,634],{"class":619},[613,1093,1094],{"class":637},"\"videofile.ogg\"",[613,1096,1097],{"class":627}," autoplay",[613,1099,1100],{"class":627}," poster",[613,1102,634],{"class":619},[613,1104,1105],{"class":637},"\"posterimage.jpg\"",[613,1107,641],{"class":619},[613,1109,1110],{"class":615,"line":672},[613,1111,1112],{"class":619},"  Sorry, your browser doesn't support embedded videos, but don't worry, you can\n",[613,1114,1115,1117,1119,1121,1123,1125,1128,1130],{"class":615,"line":679},[613,1116,647],{"class":619},[613,1118,718],{"class":623},[613,1120,721],{"class":627},[613,1122,634],{"class":619},[613,1124,1094],{"class":637},[613,1126,1127],{"class":619},">download it\u003C\u002F",[613,1129,718],{"class":623},[613,1131,641],{"class":619},[613,1133,1134],{"class":615,"line":702},[613,1135,1136],{"class":619},"  and watch it with your favorite video player!\n",[613,1138,1139,1141,1143],{"class":615,"line":707},[613,1140,770],{"class":619},[613,1142,624],{"class":623},[613,1144,641],{"class":619},[613,1146,1147],{"class":615,"line":713},[613,1148,676],{"emptyLinePlaceholder":675},[613,1150,1151],{"class":615,"line":735},[613,1152,1153],{"class":1080},"\u003C!-- Video with subtitles -->\n",[613,1155,1156,1158,1160,1162,1164,1167],{"class":615,"line":741},[613,1157,620],{"class":619},[613,1159,624],{"class":623},[613,1161,653],{"class":627},[613,1163,634],{"class":619},[613,1165,1166],{"class":637},"\"foo.ogg\"",[613,1168,641],{"class":619},[613,1170,1171,1173,1176,1179,1181,1184,1186,1188,1191,1194,1196,1199,1202,1204,1207],{"class":615,"line":761},[613,1172,647],{"class":619},[613,1174,1175],{"class":623},"track",[613,1177,1178],{"class":627}," kind",[613,1180,634],{"class":619},[613,1182,1183],{"class":637},"\"subtitles\"",[613,1185,653],{"class":627},[613,1187,634],{"class":619},[613,1189,1190],{"class":637},"\"foo.en.vtt\"",[613,1192,1193],{"class":627}," srclang",[613,1195,634],{"class":619},[613,1197,1198],{"class":637},"\"en\"",[613,1200,1201],{"class":627}," label",[613,1203,634],{"class":619},[613,1205,1206],{"class":637},"\"English\"",[613,1208,669],{"class":619},[613,1210,1211,1213,1215,1217,1219,1221,1223,1225,1228,1230,1232,1235,1237,1239,1242],{"class":615,"line":767},[613,1212,647],{"class":619},[613,1214,1175],{"class":623},[613,1216,1178],{"class":627},[613,1218,634],{"class":619},[613,1220,1183],{"class":637},[613,1222,653],{"class":627},[613,1224,634],{"class":619},[613,1226,1227],{"class":637},"\"foo.sv.vtt\"",[613,1229,1193],{"class":627},[613,1231,634],{"class":619},[613,1233,1234],{"class":637},"\"sv\"",[613,1236,1201],{"class":627},[613,1238,634],{"class":619},[613,1240,1241],{"class":637},"\"Svenska\"",[613,1243,669],{"class":619},[613,1245,1247,1249,1251],{"class":615,"line":1246},12,[613,1248,770],{"class":619},[613,1250,624],{"class":623},[613,1252,641],{"class":619},[586,1254,1255],{},"첫번째 예제는 동영상을 더 다운받기 위해서 멈추지 않아도 될 정도로 영상이 다운로드 되면 바로 영상이 재생됩니다. 동영상이 재생되기 전까지 \"posterimage.jpg\" 이미지가 표현됩니다.",[586,1257,1258],{},"두번째 예제에서는 사용자가 서로다른 자막을 선택할 수 있습니다.",[802,1260,1262],{"id":1261},"서버-지원","서버 지원",[586,1264,1265],{},"동영상 MIME 타입이 올바르게 설정되어 있지 않다면 동영상이 보이지 않거나 X표시가 된 회색 박스가 나오게 됩니다(JavaScript가 활성화 된 경우).",[586,1267,1268],{},"Ogg Theora 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 \".ogm\", \".ogv\", \".ogg\"를 사용합니다)를 \"\u002Fetc\u002Fapache\"에 있는 \"mime.types\" 파일에 \"video\u002Fogg\" MIME 타입을 추가하거나 httpd.conf에 \"AddType\" 디렉티브를 이용해서 추가하면 해결됩니다.",[603,1270,1275],{"className":1271,"code":1273,"language":1274},[1272],"language-text","AddType video\u002Fogg .ogm\nAddType video\u002Fogg .ogv\nAddType video\u002Fogg .ogg\n","text",[593,1276,1273],{"__ignoreMap":609},[586,1278,1279],{},"WebM 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 \".webm\"을 사용합니다)를 \"\u002Fetc\u002Fapache\"에 있는 \"mime.types\" 파일에 \"video\u002Fwebm\" MIME 타입을 추가하거나 httpd.conf에 \"AddType\" 디렉티브를 이용해서 추가하면 해결됩니다.",[603,1281,1284],{"className":1282,"code":1283,"language":1274},[1272],"AddType video\u002Fwebm .webm\n",[593,1285,1283],{"__ignoreMap":609},[586,1287,1288],{},"여러분의 웹 호스트에서 새로운 기술이 범용적으로 적용되어 업데이트 되기 전까지 편하게 MIME 타입을 설정하는 인터페이스를 제공할지도 모릅니다.",[802,1290,1292],{"id":1291},"dom-인터페이스","DOM 인터페이스",[586,1294,807,1295,1301],{},[718,1296,1298],{"href":1297},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FHTMLVideoElement",[593,1299,1300],{},"HTMLVideoElement"," 인터페이스를 구현하고 있습니다.",[802,1303,1305],{"id":1304},"브라우저-호환성","브라우저 호환성",[802,1307,1308],{"id":1308},"참고",[814,1310,1311,1317,1321,1327,1333,1341,1350,1361],{},[817,1312,1313],{},[718,1314,1316],{"href":1315},"\u002Fko\u002Fdocs\u002FWeb\u002FMedia\u002FFormats","Media formats supported by the audio and video elements",[817,1318,1319],{},[593,1320,600],{},[817,1322,1323],{},[718,1324,1326],{"href":1325},"\u002Fko\u002Fdocs\u002FLearn\u002FHTML\u002FMultimedia_and_embedding\u002FVideo_and_audio_content","Using HTML5 audio and video",[817,1328,1329],{},[718,1330,1332],{"href":1331},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FCanvas_API\u002FManipulating_video_using_canvas","Manipulating video using canvas",[817,1334,1335],{},[718,1336,1338],{"href":1337},"\u002Fko\u002Fdocs\u002FXPCOM_Interface_Reference\u002FNsIDOMHTMLMediaElement",[593,1339,1340],{},"nsIDOMHTMLMediaElement",[817,1342,1343,1349],{},[718,1344,1348],{"href":1345,"rel":1346},"http:\u002F\u002Ftinyvid.tv\u002F",[1347],"nofollow","TinyVid"," - examples using ogg files in HTML5.",[817,1351,1352,1360],{},[718,1353,1356,1357,1359],{"href":1354,"rel":1355},"https:\u002F\u002Fwww.whatwg.org\u002Fspecs\u002Fweb-apps\u002Fcurrent-work\u002F#video",[1347],"The ",[593,1358,624],{}," element"," (HTML5 specification)",[817,1362,1363],{},[718,1364,1366],{"href":1365},"\u002Fko\u002Fdocs\u002FWeb\u002FMedia\u002FFormats\u002FConfiguring_servers_for_Ogg_media","Configuring servers for Ogg media",[1368,1369,1370],"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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":609,"searchDepth":644,"depth":644,"links":1372},[1373,1374,1375,1376,1377,1378,1379],{"id":804,"depth":644,"text":804},{"id":1058,"depth":644,"text":1058},{"id":1070,"depth":644,"text":1070},{"id":1261,"depth":644,"text":1262},{"id":1291,"depth":644,"text":1292},{"id":1304,"depth":644,"text":1305},{"id":1308,"depth":644,"text":1308},"HTML \u003Cvideo> 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, \u003Caudio> 요소가 사용자 경험에 좀 더 적합합니다.","md",{"slug":1383,"original_slug":1383},"develop\u002Fhtml\u002Felements\u002Fvideo",{"title":416,"description":1380},"whjGZ6mxnjt6cgjBXxQPkrmc2_BjLrDC5wAYtpFhUaE",[1387,1390,1393,1504,1512,1537],{"title":5,"icon":6,"path":7,"stem":8,"children":1388,"page":15},[1389],{"title":11,"path":12,"stem":13,"icon":14},{"title":17,"icon":18,"path":19,"stem":20,"children":1391,"page":15},[1392],{"title":23,"path":24,"stem":25,"icon":26},{"title":28,"icon":29,"path":30,"stem":31,"children":1394,"page":15},[1395,1398,1496],{"title":34,"redirect":35,"icon":36,"path":37,"stem":38,"children":1396,"page":15},[1397],{"title":41,"path":35,"stem":42,"icon":36},{"title":44,"path":45,"stem":46,"children":1399,"page":15},[1400,1495],{"title":49,"path":50,"stem":51,"children":1401,"icon":54},[1402,1403,1404,1405,1406,1407,1408,1409,1410,1411,1412,1413,1414,1415,1416,1417,1418,1419,1420,1421,1422,1423,1424,1425,1426,1427,1428,1429,1430,1431,1432,1433,1434,1435,1436,1437,1438,1439,1440,1441,1442,1443,1444,1445,1446,1447,1448,1449,1450,1451,1452,1453,1454,1455,1456,1457,1458,1459,1460,1461,1462,1463,1464,1465,1466,1467,1468,1469,1470,1471,1472,1473,1474,1475,1476,1477,1478,1479,1480,1481,1482,1483,1484,1485,1486,1487,1488,1489,1490,1491,1492,1493,1494],{"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":1497,"page":15},[1498,1501],{"title":433,"icon":434,"path":435,"stem":436,"children":1499,"page":15},[1500],{"title":439,"path":440,"stem":441,"icon":434},{"title":443,"icon":444,"path":445,"stem":446,"children":1502,"page":15},[1503],{"title":449,"path":450,"stem":451,"icon":452},{"title":454,"icon":455,"path":456,"stem":457,"children":1505,"page":15},[1506],{"title":460,"icon":455,"path":461,"stem":462,"children":1507},[1508,1509],{"title":465,"path":461,"stem":462,"icon":466},{"title":468,"path":469,"stem":470,"children":1510,"page":15},[1511],{"title":473,"path":474,"stem":475,"icon":476},{"title":478,"icon":479,"path":480,"stem":481,"children":1513,"page":15},[1514,1517,1524],{"title":428,"icon":484,"path":485,"stem":486,"children":1515,"page":15},[1516],{"title":489,"path":490,"stem":491,"icon":484},{"title":493,"path":494,"stem":495,"children":1518,"page":15},[1519],{"title":498,"path":499,"stem":500,"children":1520,"page":15},[1521],{"title":503,"redirect":504,"icon":505,"path":504,"stem":506,"children":1522,"page":15},[1523],{"title":509,"path":510,"stem":511,"icon":512},{"title":514,"redirect":515,"icon":516,"path":517,"stem":518,"children":1525,"page":15},[1526,1527,1528,1529,1530,1531,1532,1533,1534,1535,1536],{"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":1538,"page":15},[1539],{"title":570,"path":571,"stem":572,"children":1540,"page":15},[1541],{"title":575,"path":576,"stem":577,"icon":578},[1543,1544],{"title":412,"path":413,"stem":414,"children":-1},{"title":420,"path":421,"stem":422,"children":-1},1775726378380]