[{"data":1,"prerenderedAt":1388},["ShallowReactive",2],{"nav-global":3,"doc-\u002Fdevelop\u002Fhtml\u002Felements\u002Fcanvas":579,"nav":1229,"surround-\u002Fdevelop\u002Fhtml\u002Felements\u002Fcanvas":1385},[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":104,"authors":581,"body":582,"description":1222,"draft":15,"extension":1223,"head":581,"icon":581,"image":581,"meta":1224,"navigation":1226,"path":105,"publishedAt":581,"seo":1227,"stem":106,"tags":581,"updatedAt":581,"__hash__":1228},"docs\u002F3.develop\u002F1.html\u002F1.elements\u002Fcanvas.md",null,{"type":583,"value":584,"toc":1202},"minimark",[585,609,730,734,742,781,785,790,795,799,812,816,819,831,835,847,917,927,930,934,937,1002,1006,1013,1110,1113,1117,1120,1125,1161,1164,1168,1172,1198],[586,587,588,597,598,603,604,608],"p",{},[589,590,591,592,596],"strong",{},"HTML ",[593,594,595],"code",{},"\u003Ccanvas>"," 요소","는 ",[599,600,602],"a",{"href":601},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FCanvas_API","캔버스 스크립팅 API"," 또는 ",[599,605,607],{"href":606},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FWebGL_API","WebGL API","와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.",[610,611,614,615],"table",{"className":612},[613],"properties","\n  ",[616,617,618,619,618,649,618,696,618,704,618,714,618,722,614],"tbody",{},"\n    ",[620,621,622,623,622,632,618],"tr",{},"\n      ",[624,625,627,628,622],"th",{"scope":626},"row","\n        ",[599,629,631],{"href":630},"\u002Fko\u002Fdocs\u002FWeb\u002FGuide\u002FHTML\u002FContent_categories","콘텐츠 카테고리",[633,634,627,635,639,640,639,644,648],"td",{},[599,636,638],{"href":637},"\u002Fko\u002Fdocs\u002FWeb\u002FGuide\u002FHTML\u002FContent_categories#플로우_콘텐츠","플로우 콘텐츠",",\n        ",[599,641,643],{"href":642},"\u002Fko\u002Fdocs\u002FWeb\u002FGuide\u002FHTML\u002FContent_categories#구문_콘텐츠","구문 콘텐츠",[599,645,647],{"href":646},"\u002Fko\u002Fdocs\u002FWeb\u002FGuide\u002FHTML\u002FContent_categories#내장_콘텐츠","내장 콘텐츠",", 뚜렷한 콘텐츠.\n      ",[620,650,622,651,622,654,618],{},[624,652,653],{"scope":626},"가능한 콘텐츠",[633,655,627,656,660,661,665,666,669],{},[599,657,659],{"href":658},"\u002Fko\u002Fdocs\u002FWeb\u002FGuide\u002FHTML\u002FContent_categories#투명_콘텐츠_모델","투명","하지만\n        ",[599,662,664],{"href":663},"\u002Fko\u002Fdocs\u002FWeb\u002FGuide\u002FHTML\u002FContent_categories#대화형_콘텐츠","대화형 콘텐츠","가 아닌 요소. 단, `",[599,667,668],{},"`,\n        `",[670,671,672,679,685,686,689,690,689,693,695],"button",{},[599,673,674,675,678],{},"`, 그리고\n        `",[676,677],"input",{},"` 중\n        ",[599,680,682],{"href":681},"\u002Fdevelop\u002Fhtml\u002Felements\u002Finput#type",[593,683,684],{},"type"," 특성이\n        ",[593,687,688],{},"checkbox",", ",[593,691,692],{},"radio",[593,694,670],{},"인 요소는\n        가능\n      ",[620,697,622,698,622,701,618],{},[624,699,700],{"scope":626},"태그 생략",[633,702,703],{},"불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.",[620,705,622,706,622,709,618],{},[624,707,708],{"scope":626},"가능한 부모 요소",[633,710,627,711,713],{},[599,712,643],{"href":642},"를 허용하는 모든 요소.\n      ",[620,715,622,716,622,719,618],{},[624,717,718],{"scope":626},"가능한 ARIA 역할",[633,720,721],{},"모두",[620,723,622,724,622,727,618],{},[624,725,726],{"scope":626},"DOM 인터페이스",[633,728,729],{},"`HTMLCanvasElement`",[731,732,733],"h2",{"id":733},"특성",[586,735,736,737,741],{},"이 요소는 ",[599,738,740],{"href":739},"\u002Fko\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes","전역 특성","을 포함합니다.",[743,744,745,756,771],"ul",{},[746,747,748,751],"li",{},[593,749,750],{},"height",[743,752,753],{},[746,754,755],{},": 좌표 공간의 높이입니다. CSS 픽셀 단위로, 기본값은 150입니다.",[746,757,758,761],{},[593,759,760],{},"moz-opaque",[743,762,763],{},[746,764,765,766,770],{},": 투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 표준 ",[767,768],"binding",{"value":769},"domxref(\"HTMLCanvasElement.getContext()\", \"canvas.getContext('2d', { alpha: false })\")"," 를 대신 사용하세요.",[746,772,773,776],{},[593,774,775],{},"width",[743,777,778],{},[746,779,780],{},": 좌표 공간의 너비입니다. CSS 픽셀 단위로, 기본값은 300입니다.",[731,782,784],{"id":783},"사용-일람","사용 일람",[786,787,789],"h3",{"id":788},"대체-콘텐츠","대체 콘텐츠",[586,791,792,794],{},[593,793,595],{}," 블록 안에 콘텐츠를 추가해 대체 콘텐츠로서 사용할 수 있습니다. 대체 콘텐츠는 캔버스를 지원하지 않는 구형 브라우저와, JavaScript를 비활성화한 브라우저에서 표시됩니다. 유용한 대체 텍스트, 혹은 하위 DOM을 제공하면 캔버스의 접근성을 향상할 수 있습니다.",[786,796,798],{"id":797},"닫는-태그-필수","닫는 태그 필수",[586,800,801,804,805,807,808,811],{},[593,802,803],{},"\u003Cimg>"," 요소와 달리, ",[593,806,595],{}," 요소는 닫는 태그(",[593,809,810],{},"\u003C\u002Fcanvas>",")를 필요로 합니다.",[786,813,815],{"id":814},"캔버스-크기-조절-css-vs-html","캔버스 크기 조절: CSS vs. HTML",[586,817,818],{},"캔버스의 표시 크기는 CSS로도 수정할 수 있습니다. 그러나, CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로, 최종 그래픽이 변형될 수 있습니다.",[586,820,821,822,824,825,827,828,830],{},"따라서 ",[593,823,595],{}," 요소의 ",[593,826,775],{},"와 ",[593,829,750],{}," 특성을 통해 직접 크기를 바꾸는 것이 좋습니다. HTML에서 직접 할 수도 있고, JavaScript를 사용할 수도 있습니다.",[786,832,834],{"id":833},"최대-캔버스-크기","최대 캔버스 크기",[586,836,837,839,840,846],{},[593,838,595],{}," 요소의 최대 크기는 매우 크지만, 정확한 최대 크기는 브라우저마다 다릅니다. 다음 표는 다양한 테스트와 여러 출처(",[599,841,845],{"href":842,"rel":843},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F6081483\u002Fmaximum-size-of-a-canvas-element",[844],"nofollow","Stack Overflow"," 등)에서 수집한 값입니다.",[610,848,849,866],{},[850,851,852],"thead",{},[620,853,854,857,860,863],{},[624,855,856],{},"브라우저",[624,858,859],{},"최대 높이",[624,861,862],{},"최대 너비",[624,864,865],{},"최대 크기",[616,867,868,881,893,904],{},[620,869,870,873,876,878],{},[633,871,872],{},"Chrome",[633,874,875],{},"32,767 픽셀",[633,877,875],{},[633,879,880],{},"268,435,456 픽셀 (i.e., 16,384 x 16,384)",[620,882,883,886,888,890],{},[633,884,885],{},"Firefox",[633,887,875],{},[633,889,875],{},[633,891,892],{},"472,907,776 픽셀 (i.e., 22,528 x 20,992)",[620,894,895,898,900,902],{},[633,896,897],{},"Safari",[633,899,875],{},[633,901,875],{},[633,903,880],{},[620,905,906,909,912,914],{},[633,907,908],{},"IE",[633,910,911],{},"8,192 픽셀",[633,913,911],{},[633,915,916],{},"?",[918,919,920],"blockquote",{},[586,921,922,926],{},[923,924,925],"span",{},"!NOTE","\n최대 면적 또는 영역을 초과하면 그리기 명령이 동작하지 않으므로, 캔버스를 사용할 수 없습니다.",[731,928,929],{"id":929},"예제",[786,931,933],{"id":932},"html","HTML",[586,935,936],{},"이 코드 조각은 HTML 문서에 캔버스를 추가합니다. 대체 텍스트를 추가해서 브라우저가 캔버스를 렌더링 할 수 없거나, 캔버스를 읽을 수 없는 경우에 대비했습니다.",[938,939,943],"pre",{"className":940,"code":941,"language":932,"meta":942,"style":942},"language-html shiki shiki-themes github-light github-dark","\u003Ccanvas id=\"canvas\" width=\"300\" height=\"300\">\n  캔버스의 내용을 설명하는 대체 텍스트\n\u003C\u002Fcanvas>\n","",[593,944,945,986,992],{"__ignoreMap":942},[923,946,949,953,957,961,964,968,971,973,976,979,981,983],{"class":947,"line":948},"line",1,[923,950,952],{"class":951},"sVt8B","\u003C",[923,954,956],{"class":955},"s9eBZ","canvas",[923,958,960],{"class":959},"sScJk"," id",[923,962,963],{"class":951},"=",[923,965,967],{"class":966},"sZZnC","\"canvas\"",[923,969,970],{"class":959}," width",[923,972,963],{"class":951},[923,974,975],{"class":966},"\"300\"",[923,977,978],{"class":959}," height",[923,980,963],{"class":951},[923,982,975],{"class":966},[923,984,985],{"class":951},">\n",[923,987,989],{"class":947,"line":988},2,[923,990,991],{"class":951},"  캔버스의 내용을 설명하는 대체 텍스트\n",[923,993,995,998,1000],{"class":947,"line":994},3,[923,996,997],{"class":951},"\u003C\u002F",[923,999,956],{"class":955},[923,1001,985],{"class":951},[786,1003,1005],{"id":1004},"javascript","JavaScript",[586,1007,1008,1009,1012],{},"그 다음, JavaScript 코드 내에서 ",[593,1010,1011],{},"HTMLCanvasElement.getContext()","를 호출해 그리기 맥락을 얻어서 캔버스 위에 그립니다.",[938,1014,1018],{"className":1015,"code":1016,"language":1017,"meta":942,"style":942},"language-js shiki shiki-themes github-light github-dark","var canvas = document.getElementById(\"canvas\");\nvar ctx = canvas.getContext(\"2d\");\nctx.fillStyle = \"green\";\nctx.fillRect(10, 10, 100, 100);\n","js",[593,1019,1020,1045,1067,1080],{"__ignoreMap":942},[923,1021,1022,1026,1029,1031,1034,1037,1040,1042],{"class":947,"line":948},[923,1023,1025],{"class":1024},"szBVR","var",[923,1027,1028],{"class":951}," canvas ",[923,1030,963],{"class":1024},[923,1032,1033],{"class":951}," document.",[923,1035,1036],{"class":959},"getElementById",[923,1038,1039],{"class":951},"(",[923,1041,967],{"class":966},[923,1043,1044],{"class":951},");\n",[923,1046,1047,1049,1052,1054,1057,1060,1062,1065],{"class":947,"line":988},[923,1048,1025],{"class":1024},[923,1050,1051],{"class":951}," ctx ",[923,1053,963],{"class":1024},[923,1055,1056],{"class":951}," canvas.",[923,1058,1059],{"class":959},"getContext",[923,1061,1039],{"class":951},[923,1063,1064],{"class":966},"\"2d\"",[923,1066,1044],{"class":951},[923,1068,1069,1072,1074,1077],{"class":947,"line":994},[923,1070,1071],{"class":951},"ctx.fillStyle ",[923,1073,963],{"class":1024},[923,1075,1076],{"class":966}," \"green\"",[923,1078,1079],{"class":951},";\n",[923,1081,1083,1086,1089,1091,1095,1097,1099,1101,1104,1106,1108],{"class":947,"line":1082},4,[923,1084,1085],{"class":951},"ctx.",[923,1087,1088],{"class":959},"fillRect",[923,1090,1039],{"class":951},[923,1092,1094],{"class":1093},"sj4cs","10",[923,1096,689],{"class":951},[923,1098,1094],{"class":1093},[923,1100,689],{"class":951},[923,1102,1103],{"class":1093},"100",[923,1105,689],{"class":951},[923,1107,1103],{"class":1093},[923,1109,1044],{"class":951},[786,1111,1112],{"id":1112},"결과",[731,1114,1116],{"id":1115},"접근성-문제","접근성 문제",[786,1118,789],{"id":1119},"대체-콘텐츠-1",[586,1121,1122,1124],{},[593,1123,595],{}," 요소 자체는 비트맵에 불과하며 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 캔버스 콘텐츠는 시맨틱 HTML 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹 사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 안내서는 캔버스를 보다 쉽게 접근 가능한 형태로 사용하는 법을 설명합니다.",[743,1126,1127,1133,1140,1147,1154],{},[746,1128,1129],{},[599,1130,1132],{"href":1131},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FCanvas_API\u002FTutorial\u002FHit_regions_and_accessibility","MDN Hit regions and accessability",[746,1134,1135],{},[599,1136,1139],{"href":1137,"rel":1138},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FPF\u002FHTML\u002Fwiki\u002FCanvas_Accessibility_Use_Cases",[844],"Canvas 접근성 유즈 케이스",[746,1141,1142],{},[599,1143,1146],{"href":1144,"rel":1145},"https:\u002F\u002Fwww.w3.org\u002Fhtml\u002Fwg\u002Fwiki\u002FAddedElementCanvas",[844],"Canvas 엘리먼트 접근성 문제",[746,1148,1149],{},[599,1150,1153],{"href":1151,"rel":1152},"http:\u002F\u002Fwww.paciellogroup.com\u002Fblog\u002F2012\u002F06\u002Fhtml5-canvas-accessibility-in-firefox-13\u002F",[844],"Firefox 13 의 HTML5 Canvas 접근성 – by Steve Faulkner",[746,1155,1156],{},[599,1157,1160],{"href":1158,"rel":1159},"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fscripting.html#best-practices",[844],"대화형 캔버스 엘리먼트의 모범 사례",[731,1162,1163],{"id":1163},"명세",[731,1165,1167],{"id":1166},"브라우저-호환성","브라우저 호환성",[731,1169,1171],{"id":1170},"같이-보기","같이 보기",[743,1173,1174,1179,1185,1192],{},[746,1175,1176],{},[599,1177,1178],{"href":601},"Canvas API",[746,1180,1181],{},[599,1182,1184],{"href":1183},"\u002Fko\u002Fdocs\u002FWeb\u002FAPI\u002FCanvas_API\u002FTutorial","캔버스 자습서",[746,1186,1187],{},[599,1188,1191],{"href":1189,"rel":1190},"https:\u002F\u002Fsimon.html5.org\u002Fdump\u002Fhtml5-canvas-cheat-sheet.html",[844],"캔버스 치트 시트",[746,1193,1194],{},[599,1195,1197],{"href":1196},"\u002Fko\u002Fdocs\u002FWeb\u002FDemos_of_open_web_technologies","캔버스 관련 데모",[1199,1200,1201],"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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":942,"searchDepth":988,"depth":988,"links":1203},[1204,1205,1211,1216,1219,1220,1221],{"id":733,"depth":988,"text":733},{"id":783,"depth":988,"text":784,"children":1206},[1207,1208,1209,1210],{"id":788,"depth":994,"text":789},{"id":797,"depth":994,"text":798},{"id":814,"depth":994,"text":815},{"id":833,"depth":994,"text":834},{"id":929,"depth":988,"text":929,"children":1212},[1213,1214,1215],{"id":932,"depth":994,"text":933},{"id":1004,"depth":994,"text":1005},{"id":1112,"depth":994,"text":1112},{"id":1115,"depth":988,"text":1116,"children":1217},[1218],{"id":1119,"depth":994,"text":789},{"id":1163,"depth":988,"text":1163},{"id":1166,"depth":988,"text":1167},{"id":1170,"depth":988,"text":1171},"HTML \u003Ccanvas> 요소는 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.","md",{"slug":1225,"original_slug":1225},"develop\u002Fhtml\u002Felements\u002Fcanvas",true,{"title":104,"description":1222},"4pDsSpxBMsG9GuJcmC2JADiwZNl-9NmrEfbaRnTbYxQ",[1230,1233,1236,1347,1355,1380],{"title":5,"icon":6,"path":7,"stem":8,"children":1231,"page":15},[1232],{"title":11,"path":12,"stem":13,"icon":14},{"title":17,"icon":18,"path":19,"stem":20,"children":1234,"page":15},[1235],{"title":23,"path":24,"stem":25,"icon":26},{"title":28,"icon":29,"path":30,"stem":31,"children":1237,"page":15},[1238,1241,1339],{"title":34,"redirect":35,"icon":36,"path":37,"stem":38,"children":1239,"page":15},[1240],{"title":41,"path":35,"stem":42,"icon":36},{"title":44,"path":45,"stem":46,"children":1242,"page":15},[1243,1338],{"title":49,"path":50,"stem":51,"children":1244,"icon":54},[1245,1246,1247,1248,1249,1250,1251,1252,1253,1254,1255,1256,1257,1258,1259,1260,1261,1262,1263,1264,1265,1266,1267,1268,1269,1270,1271,1272,1273,1274,1275,1276,1277,1278,1279,1280,1281,1282,1283,1284,1285,1286,1287,1288,1289,1290,1291,1292,1293,1294,1295,1296,1297,1298,1299,1300,1301,1302,1303,1304,1305,1306,1307,1308,1309,1310,1311,1312,1313,1314,1315,1316,1317,1318,1319,1320,1321,1322,1323,1324,1325,1326,1327,1328,1329,1330,1331,1332,1333,1334,1335,1336,1337],{"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":1340,"page":15},[1341,1344],{"title":433,"icon":434,"path":435,"stem":436,"children":1342,"page":15},[1343],{"title":439,"path":440,"stem":441,"icon":434},{"title":443,"icon":444,"path":445,"stem":446,"children":1345,"page":15},[1346],{"title":449,"path":450,"stem":451,"icon":452},{"title":454,"icon":455,"path":456,"stem":457,"children":1348,"page":15},[1349],{"title":460,"icon":455,"path":461,"stem":462,"children":1350},[1351,1352],{"title":465,"path":461,"stem":462,"icon":466},{"title":468,"path":469,"stem":470,"children":1353,"page":15},[1354],{"title":473,"path":474,"stem":475,"icon":476},{"title":478,"icon":479,"path":480,"stem":481,"children":1356,"page":15},[1357,1360,1367],{"title":428,"icon":484,"path":485,"stem":486,"children":1358,"page":15},[1359],{"title":489,"path":490,"stem":491,"icon":484},{"title":493,"path":494,"stem":495,"children":1361,"page":15},[1362],{"title":498,"path":499,"stem":500,"children":1363,"page":15},[1364],{"title":503,"redirect":504,"icon":505,"path":504,"stem":506,"children":1365,"page":15},[1366],{"title":509,"path":510,"stem":511,"icon":512},{"title":514,"redirect":515,"icon":516,"path":517,"stem":518,"children":1368,"page":15},[1369,1370,1371,1372,1373,1374,1375,1376,1377,1378,1379],{"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":1381,"page":15},[1382],{"title":570,"path":571,"stem":572,"children":1383,"page":15},[1384],{"title":575,"path":576,"stem":577,"icon":578},[1386,1387],{"title":100,"path":101,"stem":102,"children":-1},{"title":108,"path":109,"stem":110,"children":-1},1775726368531]