[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"i-lucide:search":3,"global-navigation":8,"global-category":9,"global-series":68,"global-tag":75,"i-mdi:email":103,"i-mdi:github":105,"i-mdi:instagram":107,"i-mdi:home":109,"i-mdi:rss":111,"i-lucide:archive":113,"i-mdi:cog":115,"i-mdi:react":117,"i-simple-icons:spring":119,"i-mdi:code-braces":121,"i-simple-icons:cplusplus":123,"i-mdi:tools":125,"i-simple-icons:github":127,"i-lucide:search-code":129,"i-lucide:chevron-down":131,"i-mdi:language-java":133,"i-mdi:bookmark":135,"post-detail-1":137,"i-lucide:arrow-left":3388,"i-lucide:user":3390,"i-lucide:calendar-days":3392,"i-lucide:layers":3394,"i-lucide:external-link":3396,"i-lucide:copy":3398,"i-lucide:link":3400},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m21 21l-4.34-4.34\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"8\"\u002F>\u003C\u002Fg>",[],{"categories":10,"total":60},[11,31,43,55],{"id":12,"blogId":13,"parentId":14,"name":15,"icon":16,"slug":17,"postCount":4,"children":18},"73410c90-a216-4244-bb8a-d3e505f05f90","798e87d5-8f6e-4871-8fa8-b93954b247da",null,"프레임워크 - Framework","mdi:cog","프레임워크---framework",[19,25],{"id":20,"blogId":13,"parentId":12,"name":21,"icon":22,"slug":23,"postCount":4,"children":24},"498e6268-c80f-4296-80d7-d838760b8596","React","mdi:react","react",[],{"id":26,"blogId":13,"parentId":12,"name":27,"icon":28,"slug":29,"postCount":4,"children":30},"38456e03-f63c-4f53-9e54-411fe40f638f","Spring","simple-icons:spring","spring",[],{"id":32,"blogId":13,"parentId":14,"name":33,"icon":34,"slug":35,"postCount":4,"children":36},"e28d9aae-ab85-4119-9013-2757965f59ba","언어 - Language","mdi:code-braces","언어---language",[37],{"id":38,"blogId":13,"parentId":32,"name":39,"icon":40,"slug":41,"postCount":4,"children":42},"ecf5cd4e-2d19-47b3-829e-4c64963ae766","C | C++","simple-icons:cplusplus","c-c",[],{"id":44,"blogId":13,"parentId":14,"name":45,"icon":46,"slug":47,"postCount":4,"children":48},"99672cf0-0350-47cc-b104-de223528ee54","개발툴 - Dev Tools","mdi:tools","개발툴---dev-tools",[49],{"id":50,"blogId":13,"parentId":44,"name":51,"icon":52,"slug":53,"postCount":4,"children":54},"99d9ef39-9517-4b18-8871-981b18ef2033","Git & Github","simple-icons:github","git-github",[],{"id":56,"blogId":13,"parentId":14,"name":57,"icon":58,"slug":59,"postCount":60,"children":61},"72075c98-cda2-4489-8c60-c81c1b1f1fa2","공부 | 연구 - Studies","lucide:search-code","공부-연구---studies",1,[62],{"id":63,"blogId":13,"parentId":56,"name":64,"icon":65,"slug":66,"postCount":60,"children":67},"84893dc0-174d-4d8c-815e-436a5569d092","Java 풀스택 아카데미","mdi:language-java","java-풀스택-아카데미",[],{"series":69,"total":60},[70],{"id":71,"blogId":13,"name":72,"slug":73,"description":74,"thumbnail":14,"postCount":60},"82e6737d-0055-40b7-8e48-8f766f6efac8","멀티캠퍼스 JAVA 풀스택 개발자 아카데미 6회차","멀티캠퍼스-java-풀스택-개발자-아카데미-6회차","멀티캠퍼스 JAVA 풀스택 개발자 아카데미 6회차에서 배운 내용을 기록합니다.",{"tags":76,"total":102},[77,80,83,87,91,95,99],{"id":78,"blogId":13,"name":79,"slug":79,"postCount":60},"f5358dbb-ef0b-4b4c-90c4-d6b12f242f56","부트캠프후기",{"id":81,"blogId":13,"name":82,"slug":14,"postCount":4},"a8282b2a-2782-4b2f-9451-ee6930605f38","자바스크립트",{"id":84,"blogId":13,"name":85,"slug":86,"postCount":60},"74ec2a8f-f485-4c09-b3b3-36d50fa11e24","기본 태그","기본-태그",{"id":88,"blogId":13,"name":89,"slug":90,"postCount":60},"a9f37c08-3fe7-4278-9cb2-f1aa62303391","HTML","html",{"id":92,"blogId":13,"name":93,"slug":94,"postCount":60},"9d919bf5-c858-423c-bb58-f8f66535e3f4","멀티캠퍼스IT부트캠프","멀티캠퍼스it부트캠프",{"id":96,"blogId":13,"name":97,"slug":98,"postCount":60},"fa3d5a4d-31a2-4abb-b610-8a393fbeb1bb","[현대이지웰] JAVA 풀스택 개발자 아카데미 6회차","현대이지웰-java-풀스택-개발자-아카데미-6회차",{"id":100,"blogId":13,"name":101,"slug":14,"postCount":4},"4ddef322-cd1b-4852-afb3-53c2ddf86d9d","JavaScript",5,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":104},"\u003Cpath fill=\"currentColor\" d=\"m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":106},"\u003Cpath fill=\"currentColor\" d=\"M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":108},"\u003Cpath fill=\"currentColor\" d=\"M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":110},"\u003Cpath fill=\"currentColor\" d=\"M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":112},"\u003Cpath fill=\"currentColor\" d=\"M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27zm0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":114},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"20\" height=\"5\" x=\"2\" y=\"3\" rx=\"1\"\u002F>\u003Cpath d=\"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8m-10 4h4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":116},"\u003Cpath fill=\"currentColor\" d=\"M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":118},"\u003Cpath fill=\"currentColor\" d=\"M12 10.11c1.03 0 1.87.84 1.87 1.89c0 1-.84 1.85-1.87 1.85S10.13 13 10.13 12c0-1.05.84-1.89 1.87-1.89M7.37 20c.63.38 2.01-.2 3.6-1.7c-.52-.59-1.03-1.23-1.51-1.9a23 23 0 0 1-2.4-.36c-.51 2.14-.32 3.61.31 3.96m.71-5.74l-.29-.51c-.11.29-.22.58-.29.86c.27.06.57.11.88.16zm6.54-.76l.81-1.5l-.81-1.5c-.3-.53-.62-1-.91-1.47C13.17 9 12.6 9 12 9s-1.17 0-1.71.03c-.29.47-.61.94-.91 1.47L8.57 12l.81 1.5c.3.53.62 1 .91 1.47c.54.03 1.11.03 1.71.03s1.17 0 1.71-.03c.29-.47.61-.94.91-1.47M12 6.78c-.19.22-.39.45-.59.72h1.18c-.2-.27-.4-.5-.59-.72m0 10.44c.19-.22.39-.45.59-.72h-1.18c.2.27.4.5.59.72M16.62 4c-.62-.38-2 .2-3.59 1.7c.52.59 1.03 1.23 1.51 1.9c.82.08 1.63.2 2.4.36c.51-2.14.32-3.61-.32-3.96m-.7 5.74l.29.51c.11-.29.22-.58.29-.86c-.27-.06-.57-.11-.88-.16zm1.45-7.05c1.47.84 1.63 3.05 1.01 5.63c2.54.75 4.37 1.99 4.37 3.68s-1.83 2.93-4.37 3.68c.62 2.58.46 4.79-1.01 5.63c-1.46.84-3.45-.12-5.37-1.95c-1.92 1.83-3.91 2.79-5.38 1.95c-1.46-.84-1.62-3.05-1-5.63c-2.54-.75-4.37-1.99-4.37-3.68s1.83-2.93 4.37-3.68c-.62-2.58-.46-4.79 1-5.63c1.47-.84 3.46.12 5.38 1.95c1.92-1.83 3.91-2.79 5.37-1.95M17.08 12c.34.75.64 1.5.89 2.26c2.1-.63 3.28-1.53 3.28-2.26s-1.18-1.63-3.28-2.26c-.25.76-.55 1.51-.89 2.26M6.92 12c-.34-.75-.64-1.5-.89-2.26c-2.1.63-3.28 1.53-3.28 2.26s1.18 1.63 3.28 2.26c.25-.76.55-1.51.89-2.26m9 2.26l-.3.51c.31-.05.61-.1.88-.16c-.07-.28-.18-.57-.29-.86zm-2.89 4.04c1.59 1.5 2.97 2.08 3.59 1.7c.64-.35.83-1.82.32-3.96c-.77.16-1.58.28-2.4.36c-.48.67-.99 1.31-1.51 1.9M8.08 9.74l.3-.51c-.31.05-.61.1-.88.16c.07.28.18.57.29.86zm2.89-4.04C9.38 4.2 8 3.62 7.37 4c-.63.35-.82 1.82-.31 3.96a23 23 0 0 1 2.4-.36c.48-.67.99-1.31 1.51-1.9\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":120},"\u003Cpath fill=\"currentColor\" d=\"M21.854 1.416a10.5 10.5 0 0 1-1.284 2.247A11.967 11.967 0 1 0 3.852 20.776l.444.395a11.954 11.954 0 0 0 19.632-8.297c.346-3.013-.568-6.865-2.074-11.458M5.58 20.875a1.017 1.017 0 1 1-.149-1.433a1.04 1.04 0 0 1 .149 1.432m16.199-3.581c-2.939 3.926-9.26 2.593-13.286 2.79c0 0-.716.05-1.432.148c0 0 .272-.123.618-.247c2.84-.987 4.173-1.185 5.901-2.074c3.235-1.654 6.47-5.284 7.112-9.038c-1.235 3.606-4.988 6.717-8.396 7.976c-2.346.865-6.568 1.704-6.568 1.704l-.173-.099c-2.865-1.407-2.963-7.63 2.272-9.63c2.296-.89 4.47-.395 6.963-.988c2.643-.617 5.705-2.593 6.94-5.186c1.382 4.174 3.061 10.643.049 14.644\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":122},"\u003Cpath fill=\"currentColor\" d=\"M8 3a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2H3v2h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2v-2H8v-5a2 2 0 0 0-2-2a2 2 0 0 0 2-2V5h2V3m6 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2a2 2 0 0 1-2-2V5h-2V3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":124},"\u003Cpath fill=\"currentColor\" d=\"M22.394 6c-.167-.29-.398-.543-.652-.69L12.926.22c-.509-.294-1.34-.294-1.848 0L2.26 5.31c-.508.293-.923 1.013-.923 1.6v10.18c0 .294.104.62.271.91s.398.543.652.69l8.816 5.09c.508.293 1.34.293 1.848 0l8.816-5.09c.254-.147.485-.4.652-.69s.27-.616.27-.91V6.91c.003-.294-.1-.62-.268-.91M12 19.11c-3.92 0-7.109-3.19-7.109-7.11s3.19-7.11 7.11-7.11a7.13 7.13 0 0 1 6.156 3.553l-3.076 1.78a3.57 3.57 0 0 0-3.08-1.78A3.56 3.56 0 0 0 8.444 12A3.56 3.56 0 0 0 12 15.555a3.57 3.57 0 0 0 3.08-1.778l3.078 1.78A7.14 7.14 0 0 1 12 19.11m7.11-6.715h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79zm2.962 0h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":126},"\u003Cpath fill=\"currentColor\" d=\"m21.71 20.29l-1.42 1.42a1 1 0 0 1-1.41 0L7 9.85A3.8 3.8 0 0 1 6 10a4 4 0 0 1-3.78-5.3l2.54 2.54l.53-.53l1.42-1.42l.53-.53L4.7 2.22A4 4 0 0 1 10 6a3.8 3.8 0 0 1-.15 1l11.86 11.88a1 1 0 0 1 0 1.41M2.29 18.88a1 1 0 0 0 0 1.41l1.42 1.42a1 1 0 0 0 1.41 0l5.47-5.46l-2.83-2.83M20 2l-4 2v2l-2.17 2.17l2 2L18 8h2l2-4Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":128},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":130},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m13 13.5l2-2.5l-2-2.5M21 21l-4.3-4.3M9 8.5L7 11l2 2.5\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":132},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":134},"\u003Cpath fill=\"currentColor\" d=\"M16.5 6.08s-6.84 1.71-3.56 5.48c.97 1.11-.25 2.11-.25 2.11s2.45-1.25 1.31-2.85c-1.06-1.47-1.86-2.2 2.5-4.74m-4.47 1.2C16.08 4.08 14 2 14 2c.84 3.3-2.96 4.3-4.33 6.36c-.94 1.4.46 2.91 2.33 4.64c-.71-1.7-3.22-3.16.03-5.72M9.37 17.47c-3.08.86 1.88 2.63 5.79.96c-.38-.15-.75-.33-1.1-.54c-1.36.31-2.76.37-4.14.18c-1.31-.16-.55-.6-.55-.6m5.32-1.68c-1.75.38-3.56.47-5.34.26c-1.31-.13-.45-.77-.45-.77c-3.4 1.13 1.88 2.4 6.6 1.02c-.29-.11-.57-.3-.81-.51m3.42 3.3s.57.47-.61.83c-2.28.68-9.43.89-11.41.03c-.71-.31.63-.74 1.05-.83c.23-.06.46-.08.69-.08c-.79-.54-5.13 1.1-2.19 1.56c7.97 1.3 14.54-.6 12.47-1.51m-2.74-4.86c.29-.19.6-.35.92-.49c0 0-1.51.26-3.02.4c-1.6.16-3.21.18-4.81.06c-2.35-.31 1.29-1.2 1.29-1.2c-1.1 0-2.18.26-3.16.75c-2.05 1 5.1 1.45 8.78.48m.9 2.42c-.02.04-.04.07-.08.1c5.01-1.31 3.17-4.64.77-3.81c-.13.06-.24.14-.31.25c.14-.05.28-.09.43-.12c1.2-.24 2.92 1.63-.81 3.58m.13 4.61c-3.01.52-6.09.56-9.12.14c0 0 .46.38 2.81.53c3.6.23 9.13-.13 9.26-1.83c.03.01-.23.65-2.95 1.16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":136},"\u003Cpath fill=\"currentColor\" d=\"M17 3H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2\"\u002F>",{"post":138,"seriesPosts":3378},{"id":139,"blogId":-1,"author":-1,"postIdx":60,"title":140,"slug":141,"summary":142,"thumbnail":143,"status":-1,"visibility":-1,"passwordHash":-1,"publishedAt":144,"updatedAt":145,"categories":146,"tags":148,"series":154,"content":156},"b2536c6f-2319-451e-8104-26d41bad6026","풀스택 개발자 아카데미 (1) - HTML\u002FCSS","풀스택-개발자-아카데미-1---htmlcss","HTML은 웹 페이지의 뼈대를 만드는 마크업 언어로, 시멘틱 태그를 활용해 문서의 구조와 정보를 의미 있고 명확하게 정의합니다. CSS는 HTML로 구조화된 화면에 스타일을 입히는 기술로, 박스 모델과 Flexbox를 통해 요소를 자유롭게 배치하고 정렬합니다. 나아가 뷰포트와 미디어 쿼리 등의 반응형 기술을 적용하여 모바일부터 데스크톱까지 다양한 기기에 최적화된 화면을 구현할 수 있습니다.","6f585b3b-0ed8-4129-8d3d-da9ea4f27ba2","2025-07-14T21:22:00","2026-07-16T03:02:47",[147],{"name":64,"slug":66},[149,150,151,152,153],{"name":89,"slug":90},{"name":85,"slug":86},{"name":79,"slug":79},{"name":97,"slug":98},{"name":93,"slug":94},[155],{"id":71,"name":72,"slug":73},{"data":157,"body":159,"toc":3360},{"title":158,"description":158},"",{"type":160,"children":161},"root",[162,171,177,190,195,204,223,230,235,240,245,251,256,506,512,588,602,607,632,638,645,750,756,887,893,912,932,939,1192,1204,1214,1290,1296,1315,1504,1508,1552,1558,1751,1756,1760,1765,1769,2144,2155,2243,2255,2263,2267,2273,2278,2600,2610,2614,2620,2646,2651,2734,2740,2787,2802,2808,2821,2834,2840,2845,2850,2864,2877,2882,2977,2983,2988,2996,3019,3023,3036,3042,3047,3051,3056,3064,3070,3075,3081,3101,3311,3317,3335,3341,3354],{"type":163,"tag":164,"props":165,"children":167},"element","h2",{"id":166},"_1-html",[168],{"type":169,"value":170},"text","1. HTML",{"type":163,"tag":172,"props":173,"children":174},"p",{},[175],{"type":169,"value":176},"오늘날, 우리가 보는 다채로운 웹 페이지들은 단순한 텍스트나 이미지의 나열이 아니다. 이들은 모두 HTML, CSS, Javascript의 요소로 이루어져있고, 이 기술들이 유기적으로 결합되어 만들어진 것이다.",{"type":163,"tag":172,"props":178,"children":179},{},[180,182,188],{"type":169,"value":181},"이러한 웹 페이지의 기틀, 뼈대가 되는 핵심 요소가 바로 HTML(Hyper Text Markup Language)이다. HTML은 Hyper Text Markup Language의 약자로, ",{"type":163,"tag":183,"props":184,"children":185},"strong",{},[186],{"type":169,"value":187},"웹 페이지의 뼈대와 구조를 만드는 마크업 언어",{"type":169,"value":189},"다.",{"type":163,"tag":172,"props":191,"children":192},{},[193],{"type":169,"value":194},"즉, 문서 간에 서로 링크가 설정되어 있어, 링크된 부분을 클릭하면 해당 문서로 이동할 수 있는 기능을 제공한다.",{"type":163,"tag":196,"props":197,"children":198},"blockquote",{},[199],{"type":163,"tag":172,"props":200,"children":201},{},[202],{"type":169,"value":203},"Hyper Text: 참조(하이퍼링크)를 통해 한 문서에서 다른 문서로 즉시 이동할 수 있는 텍스트\nMarkup Language: 문서의 구조나 서식을 정의하기 위해 사용되는 언어.",{"type":163,"tag":172,"props":205,"children":206},{},[207,209,214,216,221],{"type":169,"value":208},"HTML은 프로그래밍 언어는 아니지만, 브라우저가 텍스트, 이미지, 비디오 등 다양한 컨텐츠를 구조화하고 표시할 수 있도록 표준화된 ",{"type":163,"tag":183,"props":210,"children":211},{},[212],{"type":169,"value":213},"마크업",{"type":169,"value":215}," 언어이며, 문서의 각 부분이 어떤 역할을 하는지 알려주기 위해 \"",{"type":163,"tag":183,"props":217,"children":218},{},[219],{"type":169,"value":220},"태그",{"type":169,"value":222},"\"를 사용한다.",{"type":163,"tag":224,"props":225,"children":227},"h3",{"id":226},"_11-html의-역할-정보의-나열",[228],{"type":169,"value":229},"1.1. HTML의 역할: 정보의 나열",{"type":163,"tag":172,"props":231,"children":232},{},[233],{"type":169,"value":234},"HTML만으로 구성된 웹 페이지는 정보를 단순히 나열하는 역할을 한다.\n마치 책의 목차처럼 어떤 정보가 있는지 보여주지만, 디자인이나 동적인 기능은 없다.\n종종 웹 페이지에서 CSS 로드가 되지 않아 다음과 같은 화면을 본적이 있을 것이다.",{"type":163,"tag":236,"props":237,"children":239},"img",{"alt":158,"src":238},"https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002F5cc41fa4-6325-49f6-b3cc-822433bce9a7",[],{"type":163,"tag":172,"props":241,"children":242},{},[243],{"type":169,"value":244},"이처럼, HTML은 우리에게 예쁘게 보여주거나, 기능을 제공하는 것이 아니라,\n그저 정보를 나열하고, 정보를 나열할 구조를 지정하는 것 뿐이다.",{"type":163,"tag":224,"props":246,"children":248},{"id":247},"_12-html의-구조",[249],{"type":169,"value":250},"1.2. HTML의 구조",{"type":163,"tag":172,"props":252,"children":253},{},[254],{"type":169,"value":255},"모든 HTML 문서는 다음과 같은 골격으로 구성된다.",{"type":163,"tag":257,"props":258,"children":261},"pre",{"className":259,"code":260,"language":90,"meta":158,"style":158},"language-html shiki shiki-themes one-dark-pro","\u003C!DOCTYPE html>\n\u003Chtml>\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Ctitle>My First Web Page\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cp>Hello World\u003C\u002Fp>\n    \u003Cp>안녕하세요\u003C\u002Fp>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[262],{"type":163,"tag":263,"props":264,"children":265},"code",{"__ignoreMap":158},[266,294,311,329,364,389,406,423,448,473,489],{"type":163,"tag":267,"props":268,"children":270},"span",{"class":269,"line":60},"line",[271,277,283,289],{"type":163,"tag":267,"props":272,"children":274},{"style":273},"--shiki-default:#ABB2BF",[275],{"type":169,"value":276},"\u003C!",{"type":163,"tag":267,"props":278,"children":280},{"style":279},"--shiki-default:#E06C75",[281],{"type":169,"value":282},"DOCTYPE",{"type":163,"tag":267,"props":284,"children":286},{"style":285},"--shiki-default:#D19A66",[287],{"type":169,"value":288}," html",{"type":163,"tag":267,"props":290,"children":291},{"style":273},[292],{"type":169,"value":293},">\n",{"type":163,"tag":267,"props":295,"children":297},{"class":269,"line":296},2,[298,303,307],{"type":163,"tag":267,"props":299,"children":300},{"style":273},[301],{"type":169,"value":302},"\u003C",{"type":163,"tag":267,"props":304,"children":305},{"style":279},[306],{"type":169,"value":90},{"type":163,"tag":267,"props":308,"children":309},{"style":273},[310],{"type":169,"value":293},{"type":163,"tag":267,"props":312,"children":314},{"class":269,"line":313},3,[315,320,325],{"type":163,"tag":267,"props":316,"children":317},{"style":273},[318],{"type":169,"value":319},"  \u003C",{"type":163,"tag":267,"props":321,"children":322},{"style":279},[323],{"type":169,"value":324},"head",{"type":163,"tag":267,"props":326,"children":327},{"style":273},[328],{"type":169,"value":293},{"type":163,"tag":267,"props":330,"children":332},{"class":269,"line":331},4,[333,338,343,348,353,359],{"type":163,"tag":267,"props":334,"children":335},{"style":273},[336],{"type":169,"value":337},"    \u003C",{"type":163,"tag":267,"props":339,"children":340},{"style":279},[341],{"type":169,"value":342},"meta",{"type":163,"tag":267,"props":344,"children":345},{"style":285},[346],{"type":169,"value":347}," charset",{"type":163,"tag":267,"props":349,"children":350},{"style":273},[351],{"type":169,"value":352},"=",{"type":163,"tag":267,"props":354,"children":356},{"style":355},"--shiki-default:#98C379",[357],{"type":169,"value":358},"\"UTF-8\"",{"type":163,"tag":267,"props":360,"children":361},{"style":273},[362],{"type":169,"value":363}," \u002F>\n",{"type":163,"tag":267,"props":365,"children":366},{"class":269,"line":102},[367,371,376,381,385],{"type":163,"tag":267,"props":368,"children":369},{"style":273},[370],{"type":169,"value":337},{"type":163,"tag":267,"props":372,"children":373},{"style":279},[374],{"type":169,"value":375},"title",{"type":163,"tag":267,"props":377,"children":378},{"style":273},[379],{"type":169,"value":380},">My First Web Page\u003C\u002F",{"type":163,"tag":267,"props":382,"children":383},{"style":279},[384],{"type":169,"value":375},{"type":163,"tag":267,"props":386,"children":387},{"style":273},[388],{"type":169,"value":293},{"type":163,"tag":267,"props":390,"children":392},{"class":269,"line":391},6,[393,398,402],{"type":163,"tag":267,"props":394,"children":395},{"style":273},[396],{"type":169,"value":397},"  \u003C\u002F",{"type":163,"tag":267,"props":399,"children":400},{"style":279},[401],{"type":169,"value":324},{"type":163,"tag":267,"props":403,"children":404},{"style":273},[405],{"type":169,"value":293},{"type":163,"tag":267,"props":407,"children":409},{"class":269,"line":408},7,[410,414,419],{"type":163,"tag":267,"props":411,"children":412},{"style":273},[413],{"type":169,"value":319},{"type":163,"tag":267,"props":415,"children":416},{"style":279},[417],{"type":169,"value":418},"body",{"type":163,"tag":267,"props":420,"children":421},{"style":273},[422],{"type":169,"value":293},{"type":163,"tag":267,"props":424,"children":426},{"class":269,"line":425},8,[427,431,435,440,444],{"type":163,"tag":267,"props":428,"children":429},{"style":273},[430],{"type":169,"value":337},{"type":163,"tag":267,"props":432,"children":433},{"style":279},[434],{"type":169,"value":172},{"type":163,"tag":267,"props":436,"children":437},{"style":273},[438],{"type":169,"value":439},">Hello World\u003C\u002F",{"type":163,"tag":267,"props":441,"children":442},{"style":279},[443],{"type":169,"value":172},{"type":163,"tag":267,"props":445,"children":446},{"style":273},[447],{"type":169,"value":293},{"type":163,"tag":267,"props":449,"children":451},{"class":269,"line":450},9,[452,456,460,465,469],{"type":163,"tag":267,"props":453,"children":454},{"style":273},[455],{"type":169,"value":337},{"type":163,"tag":267,"props":457,"children":458},{"style":279},[459],{"type":169,"value":172},{"type":163,"tag":267,"props":461,"children":462},{"style":273},[463],{"type":169,"value":464},">안녕하세요\u003C\u002F",{"type":163,"tag":267,"props":466,"children":467},{"style":279},[468],{"type":169,"value":172},{"type":163,"tag":267,"props":470,"children":471},{"style":273},[472],{"type":169,"value":293},{"type":163,"tag":267,"props":474,"children":476},{"class":269,"line":475},10,[477,481,485],{"type":163,"tag":267,"props":478,"children":479},{"style":273},[480],{"type":169,"value":397},{"type":163,"tag":267,"props":482,"children":483},{"style":279},[484],{"type":169,"value":418},{"type":163,"tag":267,"props":486,"children":487},{"style":273},[488],{"type":169,"value":293},{"type":163,"tag":267,"props":490,"children":492},{"class":269,"line":491},11,[493,498,502],{"type":163,"tag":267,"props":494,"children":495},{"style":273},[496],{"type":169,"value":497},"\u003C\u002F",{"type":163,"tag":267,"props":499,"children":500},{"style":279},[501],{"type":169,"value":90},{"type":163,"tag":267,"props":503,"children":504},{"style":273},[505],{"type":169,"value":293},{"type":163,"tag":164,"props":507,"children":509},{"id":508},"_2-태그-tag",[510],{"type":169,"value":511},"2. 태그 - Tag",{"type":163,"tag":513,"props":514,"children":515},"ul",{},[516,572,583],{"type":163,"tag":517,"props":518,"children":519},"li",{},[520,522,528,530,536,538],{"type":169,"value":521},"시작 태그(",{"type":163,"tag":263,"props":523,"children":525},{"className":524},[],[526],{"type":169,"value":527},"\u003Ctag>",{"type":169,"value":529},")와 종료 태그(",{"type":163,"tag":263,"props":531,"children":533},{"className":532},[],[534],{"type":169,"value":535},"\u003C\u002Ftag>",{"type":169,"value":537},")가 있다",{"type":163,"tag":513,"props":539,"children":540},{},[541,546],{"type":163,"tag":517,"props":542,"children":543},{},[544],{"type":169,"value":545},"시작 태그와 종료 태그 사이에 태그가 포함하고자 하는 내용을 넣는다.",{"type":163,"tag":517,"props":547,"children":548},{},[549,555,557,563,564,570],{"type":163,"tag":263,"props":550,"children":552},{"className":551},[],[553],{"type":169,"value":554},"\u003Cbr>",{"type":169,"value":556},", ",{"type":163,"tag":263,"props":558,"children":560},{"className":559},[],[561],{"type":169,"value":562},"\u003Cimg>",{"type":169,"value":556},{"type":163,"tag":263,"props":565,"children":567},{"className":566},[],[568],{"type":169,"value":569},"\u003Chr>",{"type":169,"value":571},"과 같이 종료 태그 없이 사용가능한 단독 태그도 있다.",{"type":163,"tag":517,"props":573,"children":574},{},[575,581],{"type":163,"tag":263,"props":576,"children":578},{"className":577},[],[579],{"type":169,"value":580},"\u003Ctag 속성=\"속성값\">",{"type":169,"value":582},"의 형태로 속성과 속성 값을 기입할 수 있다.",{"type":163,"tag":517,"props":584,"children":585},{},[586],{"type":169,"value":587},"태그는 대소문자를 구분하지 않지만, 웹 표준에서는 소문자로 작성하는 것을 권장한다.",{"type":163,"tag":224,"props":589,"children":591},{"id":590},"_21-head-기본-태그",[592,594,600],{"type":169,"value":593},"2.1. ",{"type":163,"tag":263,"props":595,"children":597},{"className":596},[],[598],{"type":169,"value":599},"\u003Chead>",{"type":169,"value":601}," 기본 태그",{"type":163,"tag":172,"props":603,"children":604},{},[605],{"type":169,"value":606},"head 태그에는 문서의 정보를 작성한다.\n웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 문서 정보를 포함한다.\n이는 문서의 제목, Charset(문자셋)을 지정하거나, 외부 파일을 연결할 수 있다.",{"type":163,"tag":513,"props":608,"children":609},{},[610,621],{"type":163,"tag":517,"props":611,"children":612},{},[613,619],{"type":163,"tag":263,"props":614,"children":616},{"className":615},[],[617],{"type":169,"value":618},"\u003Ctitle>",{"type":169,"value":620}," 태그를 사용해 문서의 제목을 설정할 수 있다.",{"type":163,"tag":517,"props":622,"children":623},{},[624,630],{"type":163,"tag":263,"props":625,"children":627},{"className":626},[],[628],{"type":169,"value":629},"\u003Clink rel=\"\" href=\"\">",{"type":169,"value":631}," 태그를 통해 외부 파일을 링크할 수 있다.",{"type":163,"tag":224,"props":633,"children":635},{"id":634},"_22-핵심-기본-태그",[636],{"type":169,"value":637},"2.2. 핵심 기본 태그",{"type":163,"tag":639,"props":640,"children":642},"h4",{"id":641},"_221-텍스트-관련-태그",[643],{"type":169,"value":644},"2.2.1. 텍스트 관련 태그",{"type":163,"tag":513,"props":646,"children":647},{},[648,689,716,733],{"type":163,"tag":517,"props":649,"children":650},{},[651,657,659,665],{"type":163,"tag":263,"props":652,"children":654},{"className":653},[],[655],{"type":169,"value":656},"\u003Ch1> \u003C\u002Fh1>",{"type":169,"value":658},"~",{"type":163,"tag":263,"props":660,"children":662},{"className":661},[],[663],{"type":169,"value":664},"\u003Ch6> \u003C\u002Fh6>",{"type":163,"tag":513,"props":666,"children":667},{},[668],{"type":163,"tag":517,"props":669,"children":670},{},[671,673,679,681,687],{"type":169,"value":672},"제목 태그: ",{"type":163,"tag":263,"props":674,"children":676},{"className":675},[],[677],{"type":169,"value":678},"h1",{"type":169,"value":680},"이 가장 크고, ",{"type":163,"tag":263,"props":682,"children":684},{"className":683},[],[685],{"type":169,"value":686},"h6",{"type":169,"value":688},"이 가장 작다. 줄 바꿈하여 출력된다.",{"type":163,"tag":517,"props":690,"children":691},{},[692,698],{"type":163,"tag":263,"props":693,"children":695},{"className":694},[],[696],{"type":169,"value":697},"\u003Cp> \u003C\u002Fp>",{"type":163,"tag":513,"props":699,"children":700},{},[701,706,711],{"type":163,"tag":517,"props":702,"children":703},{},[704],{"type":169,"value":705},"문단 태그: 문단을 나눌 때 사용한다.",{"type":163,"tag":517,"props":707,"children":708},{},[709],{"type":169,"value":710},"브라우저의 기본 스타일에 따라 문단 위아래로 여백이 생긴다.",{"type":163,"tag":517,"props":712,"children":713},{},[714],{"type":169,"value":715},"여러 번 사용해도 행 간격이 더 벌어지지 않는다.",{"type":163,"tag":517,"props":717,"children":718},{},[719,725],{"type":163,"tag":263,"props":720,"children":722},{"className":721},[],[723],{"type":169,"value":724},"\u003Cbr \u002F>",{"type":163,"tag":513,"props":726,"children":727},{},[728],{"type":163,"tag":517,"props":729,"children":730},{},[731],{"type":169,"value":732},"줄바꿈 태그: 강제로 줄을 바꿀 때 사용하며, 여러 번 사용하여 여러 줄을 바꿀 수 있다.",{"type":163,"tag":517,"props":734,"children":735},{},[736,742],{"type":163,"tag":263,"props":737,"children":739},{"className":738},[],[740],{"type":169,"value":741},"\u003Chr \u002F>",{"type":163,"tag":513,"props":743,"children":744},{},[745],{"type":163,"tag":517,"props":746,"children":747},{},[748],{"type":169,"value":749},"수평선 태그: 수평선을 삽입한다.",{"type":163,"tag":639,"props":751,"children":753},{"id":752},"_222-텍스트-강조-및-장식-태그",[754],{"type":169,"value":755},"2.2.2. 텍스트 강조 및 장식 태그",{"type":163,"tag":513,"props":757,"children":758},{},[759,792,823,839,855,871],{"type":163,"tag":517,"props":760,"children":761},{},[762,768,770,776,778,783,785,790],{"type":163,"tag":263,"props":763,"children":765},{"className":764},[],[766],{"type":169,"value":767},"\u003Cb>",{"type":169,"value":769},"\u002F",{"type":163,"tag":263,"props":771,"children":773},{"className":772},[],[774],{"type":169,"value":775},"\u003Cstrong>",{"type":169,"value":777},": ",{"type":163,"tag":183,"props":779,"children":780},{},[781],{"type":169,"value":782},"굵은 글씨(Bold)",{"type":169,"value":784},". ",{"type":163,"tag":263,"props":786,"children":788},{"className":787},[],[789],{"type":169,"value":775},{"type":169,"value":791},"은 의미적으로 더 중요할 때 사용한다.",{"type":163,"tag":517,"props":793,"children":794},{},[795,801,802,808,809,815,816,821],{"type":163,"tag":263,"props":796,"children":798},{"className":797},[],[799],{"type":169,"value":800},"\u003Ci>",{"type":169,"value":769},{"type":163,"tag":263,"props":803,"children":805},{"className":804},[],[806],{"type":169,"value":807},"\u003Cem>",{"type":169,"value":777},{"type":163,"tag":810,"props":811,"children":812},"em",{},[813],{"type":169,"value":814},"이탤릭체",{"type":169,"value":784},{"type":163,"tag":263,"props":817,"children":819},{"className":818},[],[820],{"type":169,"value":807},{"type":169,"value":822},"은 의미적으로 강조할 때 사용",{"type":163,"tag":517,"props":824,"children":825},{},[826,832,833],{"type":163,"tag":263,"props":827,"children":829},{"className":828},[],[830],{"type":169,"value":831},"\u003Csub>",{"type":169,"value":777},{"type":163,"tag":834,"props":835,"children":836},"sub",{},[837],{"type":169,"value":838},"아래 첨자",{"type":163,"tag":517,"props":840,"children":841},{},[842,848,849],{"type":163,"tag":263,"props":843,"children":845},{"className":844},[],[846],{"type":169,"value":847},"\u003Csup>",{"type":169,"value":777},{"type":163,"tag":850,"props":851,"children":852},"sup",{},[853],{"type":169,"value":854},"윗 첨자",{"type":163,"tag":517,"props":856,"children":857},{},[858,864,865],{"type":163,"tag":263,"props":859,"children":861},{"className":860},[],[862],{"type":169,"value":863},"\u003Cins>",{"type":169,"value":777},{"type":163,"tag":866,"props":867,"children":868},"ins",{},[869],{"type":169,"value":870},"밑줄",{"type":163,"tag":517,"props":872,"children":873},{},[874,880,881],{"type":163,"tag":263,"props":875,"children":877},{"className":876},[],[878],{"type":169,"value":879},"\u003Cdel>",{"type":169,"value":777},{"type":163,"tag":882,"props":883,"children":884},"del",{},[885],{"type":169,"value":886},"취소선",{"type":163,"tag":639,"props":888,"children":890},{"id":889},"_223-특수-문자-엔티티-special-character-entities",[891],{"type":169,"value":892},"2.2.3. 특수 문자 엔티티 (Special Character Entities)",{"type":163,"tag":172,"props":894,"children":895},{},[896,898,903,905,910],{"type":169,"value":897},"HTML에서 꺾쇠(\u003C, >) 같은 문자들은 태그를 정의하는 데 사용된다.\n즉, 이러한 문자들을 웹 페이지에 일반 텍스트로 표시하는 경우, HTML의 정의로 받아들일 수 있기 때문에, 특수한 방법으로 삽입해야 하는데, 이를 ",{"type":163,"tag":183,"props":899,"children":900},{},[901],{"type":169,"value":902},"HTML 엔티티",{"type":169,"value":904}," 또는 ",{"type":163,"tag":183,"props":906,"children":907},{},[908],{"type":169,"value":909},"특수 문자 엔티티",{"type":169,"value":911},"라고 부른다.",{"type":163,"tag":172,"props":913,"children":914},{},[915,917,923,924,930],{"type":169,"value":916},"특수 문자 엔티티는 ",{"type":163,"tag":263,"props":918,"children":920},{"className":919},[],[921],{"type":169,"value":922},"&문자;",{"type":169,"value":904},{"type":163,"tag":263,"props":925,"children":927},{"className":926},[],[928],{"type":169,"value":929},"&#숫자;",{"type":169,"value":931},"의 형태로 작성하며,\n이는 브라우저에서 해당 특수 문자로 변환되어 보여진다.",{"type":163,"tag":933,"props":934,"children":936},"h5",{"id":935},"_2231-자주-사용되는-엔티티",[937],{"type":169,"value":938},"2.2.3.1. 자주 사용되는 엔티티",{"type":163,"tag":940,"props":941,"children":942},"table",{},[943,973],{"type":163,"tag":944,"props":945,"children":946},"thead",{},[947],{"type":163,"tag":948,"props":949,"children":950},"tr",{},[951,958,963,968],{"type":163,"tag":952,"props":953,"children":955},"th",{"align":954},"center",[956],{"type":169,"value":957},"문자",{"type":163,"tag":952,"props":959,"children":960},{"align":954},[961],{"type":169,"value":962},"숫자 코드",{"type":163,"tag":952,"props":964,"children":965},{"align":954},[966],{"type":169,"value":967},"엔티티 이름",{"type":163,"tag":952,"props":969,"children":970},{"align":954},[971],{"type":169,"value":972},"설명",{"type":163,"tag":974,"props":975,"children":976},"tbody",{},[977,1007,1037,1068,1099,1130,1161],{"type":163,"tag":948,"props":978,"children":979},{},[980,984,993,1002],{"type":163,"tag":981,"props":982,"children":983},"td",{"align":954},[],{"type":163,"tag":981,"props":985,"children":986},{"align":954},[987],{"type":163,"tag":263,"props":988,"children":990},{"className":989},[],[991],{"type":169,"value":992}," ",{"type":163,"tag":981,"props":994,"children":995},{"align":954},[996],{"type":163,"tag":263,"props":997,"children":999},{"className":998},[],[1000],{"type":169,"value":1001}," ",{"type":163,"tag":981,"props":1003,"children":1004},{"align":954},[1005],{"type":169,"value":1006},"non-breaking space. 줄바꿈이 없는 공백",{"type":163,"tag":948,"props":1008,"children":1009},{},[1010,1014,1023,1032],{"type":163,"tag":981,"props":1011,"children":1012},{"align":954},[1013],{"type":169,"value":302},{"type":163,"tag":981,"props":1015,"children":1016},{"align":954},[1017],{"type":163,"tag":263,"props":1018,"children":1020},{"className":1019},[],[1021],{"type":169,"value":1022},"<",{"type":163,"tag":981,"props":1024,"children":1025},{"align":954},[1026],{"type":163,"tag":263,"props":1027,"children":1029},{"className":1028},[],[1030],{"type":169,"value":1031},"<",{"type":163,"tag":981,"props":1033,"children":1034},{"align":954},[1035],{"type":169,"value":1036},"less-than 부등호 (\u003C)",{"type":163,"tag":948,"props":1038,"children":1039},{},[1040,1045,1054,1063],{"type":163,"tag":981,"props":1041,"children":1042},{"align":954},[1043],{"type":169,"value":1044},">",{"type":163,"tag":981,"props":1046,"children":1047},{"align":954},[1048],{"type":163,"tag":263,"props":1049,"children":1051},{"className":1050},[],[1052],{"type":169,"value":1053},">",{"type":163,"tag":981,"props":1055,"children":1056},{"align":954},[1057],{"type":163,"tag":263,"props":1058,"children":1060},{"className":1059},[],[1061],{"type":169,"value":1062},">",{"type":163,"tag":981,"props":1064,"children":1065},{"align":954},[1066],{"type":169,"value":1067},"greater-than 부등호 (>)",{"type":163,"tag":948,"props":1069,"children":1070},{},[1071,1076,1085,1094],{"type":163,"tag":981,"props":1072,"children":1073},{"align":954},[1074],{"type":169,"value":1075},"\"",{"type":163,"tag":981,"props":1077,"children":1078},{"align":954},[1079],{"type":163,"tag":263,"props":1080,"children":1082},{"className":1081},[],[1083],{"type":169,"value":1084},""",{"type":163,"tag":981,"props":1086,"children":1087},{"align":954},[1088],{"type":163,"tag":263,"props":1089,"children":1091},{"className":1090},[],[1092],{"type":169,"value":1093},""",{"type":163,"tag":981,"props":1095,"children":1096},{"align":954},[1097],{"type":169,"value":1098},"쌍따옴표(\")",{"type":163,"tag":948,"props":1100,"children":1101},{},[1102,1107,1116,1125],{"type":163,"tag":981,"props":1103,"children":1104},{"align":954},[1105],{"type":169,"value":1106},"'",{"type":163,"tag":981,"props":1108,"children":1109},{"align":954},[1110],{"type":163,"tag":263,"props":1111,"children":1113},{"className":1112},[],[1114],{"type":169,"value":1115},"'",{"type":163,"tag":981,"props":1117,"children":1118},{"align":954},[1119],{"type":163,"tag":263,"props":1120,"children":1122},{"className":1121},[],[1123],{"type":169,"value":1124},"'",{"type":163,"tag":981,"props":1126,"children":1127},{"align":954},[1128],{"type":169,"value":1129},"따옴표(')",{"type":163,"tag":948,"props":1131,"children":1132},{},[1133,1138,1147,1156],{"type":163,"tag":981,"props":1134,"children":1135},{"align":954},[1136],{"type":169,"value":1137},"&",{"type":163,"tag":981,"props":1139,"children":1140},{"align":954},[1141],{"type":163,"tag":263,"props":1142,"children":1144},{"className":1143},[],[1145],{"type":169,"value":1146},"&",{"type":163,"tag":981,"props":1148,"children":1149},{"align":954},[1150],{"type":163,"tag":263,"props":1151,"children":1153},{"className":1152},[],[1154],{"type":169,"value":1155},"&",{"type":163,"tag":981,"props":1157,"children":1158},{"align":954},[1159],{"type":169,"value":1160},"앰퍼샌드(&) 기호",{"type":163,"tag":948,"props":1162,"children":1163},{},[1164,1169,1178,1187],{"type":163,"tag":981,"props":1165,"children":1166},{"align":954},[1167],{"type":169,"value":1168},"©",{"type":163,"tag":981,"props":1170,"children":1171},{"align":954},[1172],{"type":163,"tag":263,"props":1173,"children":1175},{"className":1174},[],[1176],{"type":169,"value":1177},"©",{"type":163,"tag":981,"props":1179,"children":1180},{"align":954},[1181],{"type":163,"tag":263,"props":1182,"children":1184},{"className":1183},[],[1185],{"type":169,"value":1186},"©",{"type":163,"tag":981,"props":1188,"children":1189},{"align":954},[1190],{"type":169,"value":1191},"© Copyright. 저작권 표시 기호",{"type":163,"tag":639,"props":1193,"children":1195},{"id":1194},"_224-하이퍼링크-태그-a",[1196,1198],{"type":169,"value":1197},"2.2.4. 하이퍼링크 태그: ",{"type":163,"tag":263,"props":1199,"children":1201},{"className":1200},[],[1202],{"type":169,"value":1203},"\u003Ca>",{"type":163,"tag":172,"props":1205,"children":1206},{},[1207,1212],{"type":163,"tag":263,"props":1208,"children":1210},{"className":1209},[],[1211],{"type":169,"value":1203},{"type":169,"value":1213},"는 웹 페이지의 핵심 기능 중 하나로, 문서나 사이트를 연결해 준다.",{"type":163,"tag":513,"props":1215,"children":1216},{},[1217,1254],{"type":163,"tag":517,"props":1218,"children":1219},{},[1220,1226,1228],{"type":163,"tag":263,"props":1221,"children":1223},{"className":1222},[],[1224],{"type":169,"value":1225},"href",{"type":169,"value":1227},"속성: 이동하고자 하는 곳의 위치(경로)를 지정한다.",{"type":163,"tag":513,"props":1229,"children":1230},{},[1231,1242],{"type":163,"tag":517,"props":1232,"children":1233},{},[1234,1236],{"type":169,"value":1235},"예시: ",{"type":163,"tag":263,"props":1237,"children":1239},{"className":1238},[],[1240],{"type":169,"value":1241},"\u003Ca href=\"https:\u002F\u002Fgoogle.com\u002F\">구글로 이동\u003C\u002Fa>",{"type":163,"tag":517,"props":1243,"children":1244},{},[1245,1247],{"type":169,"value":1246},"결과: ",{"type":163,"tag":1248,"props":1249,"children":1251},"a",{"href":1250},"https:\u002F\u002Fgoogle.com\u002F",[1252],{"type":169,"value":1253},"구글로 이동",{"type":163,"tag":517,"props":1255,"children":1256},{},[1257,1263,1265],{"type":163,"tag":263,"props":1258,"children":1260},{"className":1259},[],[1261],{"type":169,"value":1262},"target",{"type":169,"value":1264},"속성: 연결된 문서를 보여줄 위치를 지정한다.",{"type":163,"tag":513,"props":1266,"children":1267},{},[1268,1279],{"type":163,"tag":517,"props":1269,"children":1270},{},[1271,1277],{"type":163,"tag":263,"props":1272,"children":1274},{"className":1273},[],[1275],{"type":169,"value":1276},"_self",{"type":169,"value":1278},": 현재 화면에서 이동한다(기본 값).",{"type":163,"tag":517,"props":1280,"children":1281},{},[1282,1288],{"type":163,"tag":263,"props":1283,"children":1285},{"className":1284},[],[1286],{"type":169,"value":1287},"_blank",{"type":169,"value":1289},": 새 탭 또는 새 창에서 보여준다.",{"type":163,"tag":639,"props":1291,"children":1293},{"id":1292},"_225-목록-태그",[1294],{"type":169,"value":1295},"2.2.5. 목록 태그",{"type":163,"tag":172,"props":1297,"children":1298},{},[1299,1305,1307,1313],{"type":163,"tag":263,"props":1300,"children":1302},{"className":1301},[],[1303],{"type":169,"value":1304},"start",{"type":169,"value":1306}," 속성: 시작 숫자를 지정\n",{"type":163,"tag":263,"props":1308,"children":1310},{"className":1309},[],[1311],{"type":169,"value":1312},"reversed",{"type":169,"value":1314}," 속성: 역순으로 표시",{"type":163,"tag":513,"props":1316,"children":1317},{},[1318,1402],{"type":163,"tag":517,"props":1319,"children":1320},{},[1321,1327,1329],{"type":163,"tag":263,"props":1322,"children":1324},{"className":1323},[],[1325],{"type":169,"value":1326},"\u003Cul>",{"type":169,"value":1328}," (Unordered List)",{"type":163,"tag":513,"props":1330,"children":1331},{},[1332,1342,1355],{"type":163,"tag":517,"props":1333,"children":1334},{},[1335,1340],{"type":163,"tag":183,"props":1336,"children":1337},{},[1338],{"type":169,"value":1339},"순서가 없는",{"type":169,"value":1341}," 목록",{"type":163,"tag":517,"props":1343,"children":1344},{},[1345,1347,1353],{"type":169,"value":1346},"각 항목은 ",{"type":163,"tag":263,"props":1348,"children":1350},{"className":1349},[],[1351],{"type":169,"value":1352},"\u003Cli>",{"type":169,"value":1354}," (List Item) 태그로 표현",{"type":163,"tag":517,"props":1356,"children":1357},{},[1358,1364,1366],{"type":163,"tag":263,"props":1359,"children":1361},{"className":1360},[],[1362],{"type":169,"value":1363},"type",{"type":169,"value":1365}," 속성을 사용하여 목록의 마커를 변경할 수 있다.\n",{"type":163,"tag":513,"props":1367,"children":1368},{},[1369,1380,1391],{"type":163,"tag":517,"props":1370,"children":1371},{},[1372,1378],{"type":163,"tag":263,"props":1373,"children":1375},{"className":1374},[],[1376],{"type":169,"value":1377},"disc",{"type":169,"value":1379}," (검은 원)",{"type":163,"tag":517,"props":1381,"children":1382},{},[1383,1389],{"type":163,"tag":263,"props":1384,"children":1386},{"className":1385},[],[1387],{"type":169,"value":1388},"circle",{"type":169,"value":1390}," (흰 원)",{"type":163,"tag":517,"props":1392,"children":1393},{},[1394,1400],{"type":163,"tag":263,"props":1395,"children":1397},{"className":1396},[],[1398],{"type":169,"value":1399},"square",{"type":169,"value":1401}," (사각형)",{"type":163,"tag":517,"props":1403,"children":1404},{},[1405,1411,1413],{"type":163,"tag":263,"props":1406,"children":1408},{"className":1407},[],[1409],{"type":169,"value":1410},"\u003Col>",{"type":169,"value":1412}," (Ordered List)",{"type":163,"tag":513,"props":1414,"children":1415},{},[1416,1426,1437],{"type":163,"tag":517,"props":1417,"children":1418},{},[1419,1424],{"type":163,"tag":183,"props":1420,"children":1421},{},[1422],{"type":169,"value":1423},"순서가 있는",{"type":169,"value":1425}," 목록.",{"type":163,"tag":517,"props":1427,"children":1428},{},[1429,1430,1435],{"type":169,"value":1346},{"type":163,"tag":263,"props":1431,"children":1433},{"className":1432},[],[1434],{"type":169,"value":1352},{"type":169,"value":1436}," 태그로 표현",{"type":163,"tag":517,"props":1438,"children":1439},{},[1440,1445,1447],{"type":163,"tag":263,"props":1441,"children":1443},{"className":1442},[],[1444],{"type":169,"value":1363},{"type":169,"value":1446}," 속성을 사용하여 숫자의 종류를 변경할 수 있다.\n",{"type":163,"tag":513,"props":1448,"children":1449},{},[1450,1461,1471,1482,1493],{"type":163,"tag":517,"props":1451,"children":1452},{},[1453,1459],{"type":163,"tag":263,"props":1454,"children":1456},{"className":1455},[],[1457],{"type":169,"value":1458},"1",{"type":169,"value":1460}," (숫자)",{"type":163,"tag":517,"props":1462,"children":1463},{},[1464,1469],{"type":163,"tag":263,"props":1465,"children":1467},{"className":1466},[],[1468],{"type":169,"value":1248},{"type":169,"value":1470}," (소문자 영어)",{"type":163,"tag":517,"props":1472,"children":1473},{},[1474,1480],{"type":163,"tag":263,"props":1475,"children":1477},{"className":1476},[],[1478],{"type":169,"value":1479},"A",{"type":169,"value":1481}," (대문자 영어)",{"type":163,"tag":517,"props":1483,"children":1484},{},[1485,1491],{"type":163,"tag":263,"props":1486,"children":1488},{"className":1487},[],[1489],{"type":169,"value":1490},"i",{"type":169,"value":1492}," (소문자 로마 숫자)",{"type":163,"tag":517,"props":1494,"children":1495},{},[1496,1502],{"type":163,"tag":263,"props":1497,"children":1499},{"className":1498},[],[1500],{"type":169,"value":1501},"I",{"type":169,"value":1503}," (대문자 로마 숫자)",{"type":163,"tag":236,"props":1505,"children":1507},{"alt":158,"src":1506},"https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002F498453fe-6ffb-4490-9570-4c86b94a3763",[],{"type":163,"tag":513,"props":1509,"children":1510},{},[1511],{"type":163,"tag":517,"props":1512,"children":1513},{},[1514,1520,1522],{"type":163,"tag":263,"props":1515,"children":1517},{"className":1516},[],[1518],{"type":169,"value":1519},"\u003Cdl>",{"type":169,"value":1521}," (Definition List): 정의목록 태그\n",{"type":163,"tag":513,"props":1523,"children":1524},{},[1525,1536,1547],{"type":163,"tag":517,"props":1526,"children":1527},{},[1528,1534],{"type":163,"tag":263,"props":1529,"children":1531},{"className":1530},[],[1532],{"type":169,"value":1533},"\u003Cdt>",{"type":169,"value":1535}," (Definition Term) : 정의할 용어",{"type":163,"tag":517,"props":1537,"children":1538},{},[1539,1545],{"type":163,"tag":263,"props":1540,"children":1542},{"className":1541},[],[1543],{"type":169,"value":1544},"\u003Cdd>",{"type":169,"value":1546}," (Definition Description): 용어 설명",{"type":163,"tag":517,"props":1548,"children":1549},{},[1550],{"type":169,"value":1551},"이 태그들 또한 Semantic. 의미적인 강조를 위해 사용한다.",{"type":163,"tag":639,"props":1553,"children":1555},{"id":1554},"_226-테이블-태그",[1556],{"type":169,"value":1557},"2.2.6. 테이블 태그",{"type":163,"tag":513,"props":1559,"children":1560},{},[1561,1652,1663,1674,1710],{"type":163,"tag":517,"props":1562,"children":1563},{},[1564,1570,1572],{"type":163,"tag":263,"props":1565,"children":1567},{"className":1566},[],[1568],{"type":169,"value":1569},"\u003Ctable>",{"type":169,"value":1571},": 테이블을 선언하는 태그\n",{"type":163,"tag":513,"props":1573,"children":1574},{},[1575,1620],{"type":163,"tag":517,"props":1576,"children":1577},{},[1578,1583,1585,1591,1592,1598,1599,1605,1607,1613,1618],{"type":163,"tag":263,"props":1579,"children":1581},{"className":1580},[],[1582],{"type":169,"value":1569},{"type":169,"value":1584},"에는 ",{"type":163,"tag":263,"props":1586,"children":1588},{"className":1587},[],[1589],{"type":169,"value":1590},"border",{"type":169,"value":556},{"type":163,"tag":263,"props":1593,"children":1595},{"className":1594},[],[1596],{"type":169,"value":1597},"width",{"type":169,"value":556},{"type":163,"tag":263,"props":1600,"children":1602},{"className":1601},[],[1603],{"type":169,"value":1604},"height와",{"type":169,"value":1606}," 같은 속성을 정의하는 경우도 있다. 하지만, 이 속성들은 모두 ",{"type":163,"tag":263,"props":1608,"children":1610},{"className":1609},[],[1611],{"type":169,"value":1612},"HTML4",{"type":163,"tag":183,"props":1614,"children":1615},{},[1616],{"type":169,"value":1617},"에서 사용하던 것",{"type":169,"value":1619},"으로, 현재는 **Deprecated(사용하지 않음)**을 권장한다.",{"type":163,"tag":517,"props":1621,"children":1622},{},[1623,1625,1630,1631,1636,1637,1643,1645,1650],{"type":169,"value":1624},"만약 ",{"type":163,"tag":263,"props":1626,"children":1628},{"className":1627},[],[1629],{"type":169,"value":1590},{"type":169,"value":556},{"type":163,"tag":263,"props":1632,"children":1634},{"className":1633},[],[1635],{"type":169,"value":1597},{"type":169,"value":556},{"type":163,"tag":263,"props":1638,"children":1640},{"className":1639},[],[1641],{"type":169,"value":1642},"height",{"type":169,"value":1644}," 등의 속성을 정의하고 싶다면, ",{"type":163,"tag":183,"props":1646,"children":1647},{},[1648],{"type":169,"value":1649},"CSS의 사용을 강력히 권장",{"type":169,"value":1651},"한다.",{"type":163,"tag":517,"props":1653,"children":1654},{},[1655,1661],{"type":163,"tag":263,"props":1656,"children":1658},{"className":1657},[],[1659],{"type":169,"value":1660},"\u003Ccaption>",{"type":169,"value":1662},": 테이블의 제목을 표시",{"type":163,"tag":517,"props":1664,"children":1665},{},[1666,1672],{"type":163,"tag":263,"props":1667,"children":1669},{"className":1668},[],[1670],{"type":169,"value":1671},"\u003Ctr>",{"type":169,"value":1673},": 테이블 내에 한 행을 정의하는 태그",{"type":163,"tag":517,"props":1675,"children":1676},{},[1677,1683,1685],{"type":163,"tag":263,"props":1678,"children":1680},{"className":1679},[],[1681],{"type":169,"value":1682},"\u003Ctd>",{"type":169,"value":1684},": 테이블 내의 한 열, 즉 셀을 만들 때 사용되는 태그\n",{"type":163,"tag":513,"props":1686,"children":1687},{},[1688,1699],{"type":163,"tag":517,"props":1689,"children":1690},{},[1691,1697],{"type":163,"tag":263,"props":1692,"children":1694},{"className":1693},[],[1695],{"type":169,"value":1696},"rowspan",{"type":169,"value":1698},": 여러 행을 합칠 때 사용",{"type":163,"tag":517,"props":1700,"children":1701},{},[1702,1708],{"type":163,"tag":263,"props":1703,"children":1705},{"className":1704},[],[1706],{"type":169,"value":1707},"colspan",{"type":169,"value":1709},": 여러 열을 합칠 때 사용",{"type":163,"tag":517,"props":1711,"children":1712},{},[1713,1719,1720,1726,1727,1733],{"type":163,"tag":263,"props":1714,"children":1716},{"className":1715},[],[1717],{"type":169,"value":1718},"\u003Cthead>",{"type":169,"value":556},{"type":163,"tag":263,"props":1721,"children":1723},{"className":1722},[],[1724],{"type":169,"value":1725},"\u003Ctbody>",{"type":169,"value":556},{"type":163,"tag":263,"props":1728,"children":1730},{"className":1729},[],[1731],{"type":169,"value":1732},"\u003Ctfoot>",{"type":163,"tag":513,"props":1734,"children":1735},{},[1736,1741,1746],{"type":163,"tag":517,"props":1737,"children":1738},{},[1739],{"type":169,"value":1740},"표의 제목, 본문, 바닥글 부분을 구분",{"type":163,"tag":517,"props":1742,"children":1743},{},[1744],{"type":169,"value":1745},"시각 장애인을 위한 접근성을 높일 수 있음",{"type":163,"tag":517,"props":1747,"children":1748},{},[1749],{"type":169,"value":1750},"CSS를 사용하여 각 부분에 다른 스타일을 적용할 수 있도록 함",{"type":163,"tag":172,"props":1752,"children":1753},{},[1754],{"type":169,"value":1755},"다음 사진은 rowspan과 colspan에 대해 보여준다.",{"type":163,"tag":236,"props":1757,"children":1759},{"alt":158,"src":1758},"https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002Fd8484a5d-0e10-4e12-a7e3-7231e24d40d9",[],{"type":163,"tag":172,"props":1761,"children":1762},{},[1763],{"type":169,"value":1764},"다음 사진과 HTML을 통해 rowspan과 colspan을 다시 한 번 확인해 보자.",{"type":163,"tag":236,"props":1766,"children":1768},{"alt":158,"src":1767},"https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002F53cacc85-8989-42a8-8bff-16ee4105eb10",[],{"type":163,"tag":257,"props":1770,"children":1772},{"className":259,"code":1771,"language":90,"meta":158,"style":158},"\u003Ctable>\n  \u003Ctr>\n    \u003Ctd>1\u003C\u002Ftd>\n    \u003Ctd>2\u003C\u002Ftd>\n    \u003Ctd rowspan=\"2\">3\u003C\u002Ftd>\n    \u003Ctd>4\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd colspan=\"2\">5\u003C\u002Ftd>\n    \u003Ctd rowspan=\"2\">6\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>7\u003C\u002Ftd>\n    \u003Ctd colspan=\"2\">8\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n",[1773],{"type":163,"tag":263,"props":1774,"children":1775},{"__ignoreMap":158},[1776,1791,1806,1830,1854,1892,1916,1931,1946,1983,2019,2034,2050,2075,2112,2128],{"type":163,"tag":267,"props":1777,"children":1778},{"class":269,"line":60},[1779,1783,1787],{"type":163,"tag":267,"props":1780,"children":1781},{"style":273},[1782],{"type":169,"value":302},{"type":163,"tag":267,"props":1784,"children":1785},{"style":279},[1786],{"type":169,"value":940},{"type":163,"tag":267,"props":1788,"children":1789},{"style":273},[1790],{"type":169,"value":293},{"type":163,"tag":267,"props":1792,"children":1793},{"class":269,"line":296},[1794,1798,1802],{"type":163,"tag":267,"props":1795,"children":1796},{"style":273},[1797],{"type":169,"value":319},{"type":163,"tag":267,"props":1799,"children":1800},{"style":279},[1801],{"type":169,"value":948},{"type":163,"tag":267,"props":1803,"children":1804},{"style":273},[1805],{"type":169,"value":293},{"type":163,"tag":267,"props":1807,"children":1808},{"class":269,"line":313},[1809,1813,1817,1822,1826],{"type":163,"tag":267,"props":1810,"children":1811},{"style":273},[1812],{"type":169,"value":337},{"type":163,"tag":267,"props":1814,"children":1815},{"style":279},[1816],{"type":169,"value":981},{"type":163,"tag":267,"props":1818,"children":1819},{"style":273},[1820],{"type":169,"value":1821},">1\u003C\u002F",{"type":163,"tag":267,"props":1823,"children":1824},{"style":279},[1825],{"type":169,"value":981},{"type":163,"tag":267,"props":1827,"children":1828},{"style":273},[1829],{"type":169,"value":293},{"type":163,"tag":267,"props":1831,"children":1832},{"class":269,"line":331},[1833,1837,1841,1846,1850],{"type":163,"tag":267,"props":1834,"children":1835},{"style":273},[1836],{"type":169,"value":337},{"type":163,"tag":267,"props":1838,"children":1839},{"style":279},[1840],{"type":169,"value":981},{"type":163,"tag":267,"props":1842,"children":1843},{"style":273},[1844],{"type":169,"value":1845},">2\u003C\u002F",{"type":163,"tag":267,"props":1847,"children":1848},{"style":279},[1849],{"type":169,"value":981},{"type":163,"tag":267,"props":1851,"children":1852},{"style":273},[1853],{"type":169,"value":293},{"type":163,"tag":267,"props":1855,"children":1856},{"class":269,"line":102},[1857,1861,1865,1870,1874,1879,1884,1888],{"type":163,"tag":267,"props":1858,"children":1859},{"style":273},[1860],{"type":169,"value":337},{"type":163,"tag":267,"props":1862,"children":1863},{"style":279},[1864],{"type":169,"value":981},{"type":163,"tag":267,"props":1866,"children":1867},{"style":285},[1868],{"type":169,"value":1869}," rowspan",{"type":163,"tag":267,"props":1871,"children":1872},{"style":273},[1873],{"type":169,"value":352},{"type":163,"tag":267,"props":1875,"children":1876},{"style":355},[1877],{"type":169,"value":1878},"\"2\"",{"type":163,"tag":267,"props":1880,"children":1881},{"style":273},[1882],{"type":169,"value":1883},">3\u003C\u002F",{"type":163,"tag":267,"props":1885,"children":1886},{"style":279},[1887],{"type":169,"value":981},{"type":163,"tag":267,"props":1889,"children":1890},{"style":273},[1891],{"type":169,"value":293},{"type":163,"tag":267,"props":1893,"children":1894},{"class":269,"line":391},[1895,1899,1903,1908,1912],{"type":163,"tag":267,"props":1896,"children":1897},{"style":273},[1898],{"type":169,"value":337},{"type":163,"tag":267,"props":1900,"children":1901},{"style":279},[1902],{"type":169,"value":981},{"type":163,"tag":267,"props":1904,"children":1905},{"style":273},[1906],{"type":169,"value":1907},">4\u003C\u002F",{"type":163,"tag":267,"props":1909,"children":1910},{"style":279},[1911],{"type":169,"value":981},{"type":163,"tag":267,"props":1913,"children":1914},{"style":273},[1915],{"type":169,"value":293},{"type":163,"tag":267,"props":1917,"children":1918},{"class":269,"line":408},[1919,1923,1927],{"type":163,"tag":267,"props":1920,"children":1921},{"style":273},[1922],{"type":169,"value":397},{"type":163,"tag":267,"props":1924,"children":1925},{"style":279},[1926],{"type":169,"value":948},{"type":163,"tag":267,"props":1928,"children":1929},{"style":273},[1930],{"type":169,"value":293},{"type":163,"tag":267,"props":1932,"children":1933},{"class":269,"line":425},[1934,1938,1942],{"type":163,"tag":267,"props":1935,"children":1936},{"style":273},[1937],{"type":169,"value":319},{"type":163,"tag":267,"props":1939,"children":1940},{"style":279},[1941],{"type":169,"value":948},{"type":163,"tag":267,"props":1943,"children":1944},{"style":273},[1945],{"type":169,"value":293},{"type":163,"tag":267,"props":1947,"children":1948},{"class":269,"line":450},[1949,1953,1957,1962,1966,1970,1975,1979],{"type":163,"tag":267,"props":1950,"children":1951},{"style":273},[1952],{"type":169,"value":337},{"type":163,"tag":267,"props":1954,"children":1955},{"style":279},[1956],{"type":169,"value":981},{"type":163,"tag":267,"props":1958,"children":1959},{"style":285},[1960],{"type":169,"value":1961}," colspan",{"type":163,"tag":267,"props":1963,"children":1964},{"style":273},[1965],{"type":169,"value":352},{"type":163,"tag":267,"props":1967,"children":1968},{"style":355},[1969],{"type":169,"value":1878},{"type":163,"tag":267,"props":1971,"children":1972},{"style":273},[1973],{"type":169,"value":1974},">5\u003C\u002F",{"type":163,"tag":267,"props":1976,"children":1977},{"style":279},[1978],{"type":169,"value":981},{"type":163,"tag":267,"props":1980,"children":1981},{"style":273},[1982],{"type":169,"value":293},{"type":163,"tag":267,"props":1984,"children":1985},{"class":269,"line":475},[1986,1990,1994,1998,2002,2006,2011,2015],{"type":163,"tag":267,"props":1987,"children":1988},{"style":273},[1989],{"type":169,"value":337},{"type":163,"tag":267,"props":1991,"children":1992},{"style":279},[1993],{"type":169,"value":981},{"type":163,"tag":267,"props":1995,"children":1996},{"style":285},[1997],{"type":169,"value":1869},{"type":163,"tag":267,"props":1999,"children":2000},{"style":273},[2001],{"type":169,"value":352},{"type":163,"tag":267,"props":2003,"children":2004},{"style":355},[2005],{"type":169,"value":1878},{"type":163,"tag":267,"props":2007,"children":2008},{"style":273},[2009],{"type":169,"value":2010},">6\u003C\u002F",{"type":163,"tag":267,"props":2012,"children":2013},{"style":279},[2014],{"type":169,"value":981},{"type":163,"tag":267,"props":2016,"children":2017},{"style":273},[2018],{"type":169,"value":293},{"type":163,"tag":267,"props":2020,"children":2021},{"class":269,"line":491},[2022,2026,2030],{"type":163,"tag":267,"props":2023,"children":2024},{"style":273},[2025],{"type":169,"value":397},{"type":163,"tag":267,"props":2027,"children":2028},{"style":279},[2029],{"type":169,"value":948},{"type":163,"tag":267,"props":2031,"children":2032},{"style":273},[2033],{"type":169,"value":293},{"type":163,"tag":267,"props":2035,"children":2037},{"class":269,"line":2036},12,[2038,2042,2046],{"type":163,"tag":267,"props":2039,"children":2040},{"style":273},[2041],{"type":169,"value":319},{"type":163,"tag":267,"props":2043,"children":2044},{"style":279},[2045],{"type":169,"value":948},{"type":163,"tag":267,"props":2047,"children":2048},{"style":273},[2049],{"type":169,"value":293},{"type":163,"tag":267,"props":2051,"children":2053},{"class":269,"line":2052},13,[2054,2058,2062,2067,2071],{"type":163,"tag":267,"props":2055,"children":2056},{"style":273},[2057],{"type":169,"value":337},{"type":163,"tag":267,"props":2059,"children":2060},{"style":279},[2061],{"type":169,"value":981},{"type":163,"tag":267,"props":2063,"children":2064},{"style":273},[2065],{"type":169,"value":2066},">7\u003C\u002F",{"type":163,"tag":267,"props":2068,"children":2069},{"style":279},[2070],{"type":169,"value":981},{"type":163,"tag":267,"props":2072,"children":2073},{"style":273},[2074],{"type":169,"value":293},{"type":163,"tag":267,"props":2076,"children":2078},{"class":269,"line":2077},14,[2079,2083,2087,2091,2095,2099,2104,2108],{"type":163,"tag":267,"props":2080,"children":2081},{"style":273},[2082],{"type":169,"value":337},{"type":163,"tag":267,"props":2084,"children":2085},{"style":279},[2086],{"type":169,"value":981},{"type":163,"tag":267,"props":2088,"children":2089},{"style":285},[2090],{"type":169,"value":1961},{"type":163,"tag":267,"props":2092,"children":2093},{"style":273},[2094],{"type":169,"value":352},{"type":163,"tag":267,"props":2096,"children":2097},{"style":355},[2098],{"type":169,"value":1878},{"type":163,"tag":267,"props":2100,"children":2101},{"style":273},[2102],{"type":169,"value":2103},">8\u003C\u002F",{"type":163,"tag":267,"props":2105,"children":2106},{"style":279},[2107],{"type":169,"value":981},{"type":163,"tag":267,"props":2109,"children":2110},{"style":273},[2111],{"type":169,"value":293},{"type":163,"tag":267,"props":2113,"children":2115},{"class":269,"line":2114},15,[2116,2120,2124],{"type":163,"tag":267,"props":2117,"children":2118},{"style":273},[2119],{"type":169,"value":397},{"type":163,"tag":267,"props":2121,"children":2122},{"style":279},[2123],{"type":169,"value":948},{"type":163,"tag":267,"props":2125,"children":2126},{"style":273},[2127],{"type":169,"value":293},{"type":163,"tag":267,"props":2129,"children":2131},{"class":269,"line":2130},16,[2132,2136,2140],{"type":163,"tag":267,"props":2133,"children":2134},{"style":273},[2135],{"type":169,"value":497},{"type":163,"tag":267,"props":2137,"children":2138},{"style":279},[2139],{"type":169,"value":940},{"type":163,"tag":267,"props":2141,"children":2142},{"style":273},[2143],{"type":169,"value":293},{"type":163,"tag":639,"props":2145,"children":2147},{"id":2146},"_227-이미지-태그-img",[2148,2150],{"type":169,"value":2149},"2.2.7. 이미지 태그 ",{"type":163,"tag":263,"props":2151,"children":2153},{"className":2152},[],[2154],{"type":169,"value":562},{"type":163,"tag":513,"props":2156,"children":2157},{},[2158,2163,2182,2193,2203,2219],{"type":163,"tag":517,"props":2159,"children":2160},{},[2161],{"type":169,"value":2162},"웹 페이지에 이미지 삽입 시 사용",{"type":163,"tag":517,"props":2164,"children":2165},{},[2166,2172,2174],{"type":163,"tag":263,"props":2167,"children":2169},{"className":2168},[],[2170],{"type":169,"value":2171},"src",{"type":169,"value":2173},": 이미지 파일의 결로를 지정하는 필수 속성\n",{"type":163,"tag":513,"props":2175,"children":2176},{},[2177],{"type":163,"tag":517,"props":2178,"children":2179},{},[2180],{"type":169,"value":2181},"상대경로, 절대경로, URI 모두 사용할 수 있음",{"type":163,"tag":517,"props":2183,"children":2184},{},[2185,2191],{"type":163,"tag":263,"props":2186,"children":2188},{"className":2187},[],[2189],{"type":169,"value":2190},"alt",{"type":169,"value":2192},": 이미지가 출력되지 않을 때 대신 표시되는 텍스트",{"type":163,"tag":517,"props":2194,"children":2195},{},[2196,2201],{"type":163,"tag":263,"props":2197,"children":2199},{"className":2198},[],[2200],{"type":169,"value":375},{"type":169,"value":2202},": 마우스를 이미지에 올리면 나타나는 설명",{"type":163,"tag":517,"props":2204,"children":2205},{},[2206,2211,2212,2217],{"type":163,"tag":263,"props":2207,"children":2209},{"className":2208},[],[2210],{"type":169,"value":1597},{"type":169,"value":556},{"type":163,"tag":263,"props":2213,"children":2215},{"className":2214},[],[2216],{"type":169,"value":1642},{"type":169,"value":2218},": 이미지의 가로, 세로 길이 지정",{"type":163,"tag":517,"props":2220,"children":2221},{},[2222,2228,2230],{"type":163,"tag":263,"props":2223,"children":2225},{"className":2224},[],[2226],{"type":169,"value":2227},"usemap",{"type":169,"value":2229},": 이미지 맵을 지정할 수 있으며, 하나의 이미지에 여려개의 링크 영역을 만들고, 각 영역마다 다른 링크를 지정할 수 있다.\n",{"type":163,"tag":513,"props":2231,"children":2232},{},[2233],{"type":163,"tag":517,"props":2234,"children":2235},{},[2236,2241],{"type":163,"tag":263,"props":2237,"children":2239},{"className":2238},[],[2240],{"type":169,"value":2227},{"type":169,"value":2242},"은 이미지 맵을 지정할 때 사용하며, 하나의 이미지에 여러 개의 링크 영역을 만들고, 각 영역마다 다른 링크를 지정할 수 있다.",{"type":163,"tag":639,"props":2244,"children":2246},{"id":2245},"_228-문서-삽입-태그-iframe",[2247,2249],{"type":169,"value":2248},"2.2.8. 문서 삽입 태그 ",{"type":163,"tag":263,"props":2250,"children":2252},{"className":2251},[],[2253],{"type":169,"value":2254},"\u003Ciframe>",{"type":163,"tag":513,"props":2256,"children":2257},{},[2258],{"type":163,"tag":517,"props":2259,"children":2260},{},[2261],{"type":169,"value":2262},"현재 HTML 문서 내에 다른 문사를 포함하고자 할 때 사용한다.",{"type":163,"tag":236,"props":2264,"children":2266},{"alt":158,"src":2265},"https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002Feceef9d6-3310-41fe-a15a-fe1c46d9ecd4",[],{"type":163,"tag":639,"props":2268,"children":2270},{"id":2269},"_229-입력-양식-태그",[2271],{"type":169,"value":2272},"2.2.9. 입력 양식 태그",{"type":163,"tag":172,"props":2274,"children":2275},{},[2276],{"type":169,"value":2277},"사용자로부터 데이터를 입력받을 때 사용한다.",{"type":163,"tag":513,"props":2279,"children":2280},{},[2281,2339,2372,2545,2556,2567],{"type":163,"tag":517,"props":2282,"children":2283},{},[2284,2290,2292],{"type":163,"tag":263,"props":2285,"children":2287},{"className":2286},[],[2288],{"type":169,"value":2289},"\u003Cform>",{"type":169,"value":2291},": 입력 양식을 구성하는 기본 골격이며, 입력된 데이터를 서버로 전송\n",{"type":163,"tag":513,"props":2293,"children":2294},{},[2295,2306],{"type":163,"tag":517,"props":2296,"children":2297},{},[2298,2304],{"type":163,"tag":263,"props":2299,"children":2301},{"className":2300},[],[2302],{"type":169,"value":2303},"action",{"type":169,"value":2305},": 폼의 내용을 전달할 문서의 URL을 지정",{"type":163,"tag":517,"props":2307,"children":2308},{},[2309,2315,2317],{"type":163,"tag":263,"props":2310,"children":2312},{"className":2311},[],[2313],{"type":169,"value":2314},"method",{"type":169,"value":2316},": 데이터를 전송하는 방식을 지정\n",{"type":163,"tag":513,"props":2318,"children":2319},{},[2320],{"type":163,"tag":517,"props":2321,"children":2322},{},[2323,2329,2331,2337],{"type":163,"tag":263,"props":2324,"children":2326},{"className":2325},[],[2327],{"type":169,"value":2328},"get은",{"type":169,"value":2330}," 주소 뒤에 붙어서 전송되고, ",{"type":163,"tag":263,"props":2332,"children":2334},{"className":2333},[],[2335],{"type":169,"value":2336},"post는",{"type":169,"value":2338}," 눈에 보이지 않게 전송",{"type":163,"tag":517,"props":2340,"children":2341},{},[2342,2348,2350],{"type":163,"tag":263,"props":2343,"children":2345},{"className":2344},[],[2346],{"type":169,"value":2347},"\u003Clabel>",{"type":169,"value":2349},": 폼 요소에 캡션을 붙여 클릭 범위를 넓혀 사용자 편의성을 높임\n",{"type":163,"tag":513,"props":2351,"children":2352},{},[2353],{"type":163,"tag":517,"props":2354,"children":2355},{},[2356,2362,2364,2370],{"type":163,"tag":263,"props":2357,"children":2359},{"className":2358},[],[2360],{"type":169,"value":2361},"for",{"type":169,"value":2363}," 속성을 통해 ",{"type":163,"tag":263,"props":2365,"children":2367},{"className":2366},[],[2368],{"type":169,"value":2369},"\u003Cinput>",{"type":169,"value":2371}," 태그와 연결",{"type":163,"tag":517,"props":2373,"children":2374},{},[2375,2380,2382],{"type":163,"tag":263,"props":2376,"children":2378},{"className":2377},[],[2379],{"type":169,"value":2369},{"type":169,"value":2381},": 다양한 유형의 데이터를 입력받기 위한 태그\n",{"type":163,"tag":513,"props":2383,"children":2384},{},[2385,2457,2468,2479,2490,2501,2512,2523,2534],{"type":163,"tag":517,"props":2386,"children":2387},{},[2388,2393,2395],{"type":163,"tag":263,"props":2389,"children":2391},{"className":2390},[],[2392],{"type":169,"value":1363},{"type":169,"value":2394},": 입력 유형을 지정\n",{"type":163,"tag":513,"props":2396,"children":2397},{},[2398],{"type":163,"tag":517,"props":2399,"children":2400},{},[2401,2406,2407,2413,2414,2420,2421,2427,2428,2434,2435,2441,2442,2448,2449,2455],{"type":163,"tag":263,"props":2402,"children":2404},{"className":2403},[],[2405],{"type":169,"value":169},{"type":169,"value":556},{"type":163,"tag":263,"props":2408,"children":2410},{"className":2409},[],[2411],{"type":169,"value":2412},"password",{"type":169,"value":556},{"type":163,"tag":263,"props":2415,"children":2417},{"className":2416},[],[2418],{"type":169,"value":2419},"checkbox",{"type":169,"value":556},{"type":163,"tag":263,"props":2422,"children":2424},{"className":2423},[],[2425],{"type":169,"value":2426},"radio",{"type":169,"value":556},{"type":163,"tag":263,"props":2429,"children":2431},{"className":2430},[],[2432],{"type":169,"value":2433},"button",{"type":169,"value":556},{"type":163,"tag":263,"props":2436,"children":2438},{"className":2437},[],[2439],{"type":169,"value":2440},"file",{"type":169,"value":556},{"type":163,"tag":263,"props":2443,"children":2445},{"className":2444},[],[2446],{"type":169,"value":2447},"submit",{"type":169,"value":556},{"type":163,"tag":263,"props":2450,"children":2452},{"className":2451},[],[2453],{"type":169,"value":2454},"reset",{"type":169,"value":2456}," 등",{"type":163,"tag":517,"props":2458,"children":2459},{},[2460,2466],{"type":163,"tag":263,"props":2461,"children":2463},{"className":2462},[],[2464],{"type":169,"value":2465},"name",{"type":169,"value":2467},": 입력 상자의 이름을 지정",{"type":163,"tag":517,"props":2469,"children":2470},{},[2471,2477],{"type":163,"tag":263,"props":2472,"children":2474},{"className":2473},[],[2475],{"type":169,"value":2476},"value",{"type":169,"value":2478},": 초기값이나 태그가 지닌 값을 지정",{"type":163,"tag":517,"props":2480,"children":2481},{},[2482,2488],{"type":163,"tag":263,"props":2483,"children":2485},{"className":2484},[],[2486],{"type":169,"value":2487},"placeholder",{"type":169,"value":2489},": 입력할 내용의 힌트를 표시",{"type":163,"tag":517,"props":2491,"children":2492},{},[2493,2499],{"type":163,"tag":263,"props":2494,"children":2496},{"className":2495},[],[2497],{"type":169,"value":2498},"maxlength",{"type":169,"value":2500},": 최대 입력 길이를 지정",{"type":163,"tag":517,"props":2502,"children":2503},{},[2504,2510],{"type":163,"tag":263,"props":2505,"children":2507},{"className":2506},[],[2508],{"type":169,"value":2509},"readonly",{"type":169,"value":2511},": 읽기 전용 필드로 만듦",{"type":163,"tag":517,"props":2513,"children":2514},{},[2515,2521],{"type":163,"tag":263,"props":2516,"children":2518},{"className":2517},[],[2519],{"type":169,"value":2520},"required",{"type":169,"value":2522},": 필수 입력 필드로 지정",{"type":163,"tag":517,"props":2524,"children":2525},{},[2526,2532],{"type":163,"tag":263,"props":2527,"children":2529},{"className":2528},[],[2530],{"type":169,"value":2531},"autofocus",{"type":169,"value":2533},": 페이지 로드 시 입력 커서를 표시",{"type":163,"tag":517,"props":2535,"children":2536},{},[2537,2543],{"type":163,"tag":263,"props":2538,"children":2540},{"className":2539},[],[2541],{"type":169,"value":2542},"hidden",{"type":169,"value":2544},": 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 갖는 필드",{"type":163,"tag":517,"props":2546,"children":2547},{},[2548,2554],{"type":163,"tag":263,"props":2549,"children":2551},{"className":2550},[],[2552],{"type":169,"value":2553},"\u003Cselect>",{"type":169,"value":2555},": 드롭다운 목록을 표시할 때 사용",{"type":163,"tag":517,"props":2557,"children":2558},{},[2559,2565],{"type":163,"tag":263,"props":2560,"children":2562},{"className":2561},[],[2563],{"type":169,"value":2564},"\u003Coption>",{"type":169,"value":2566}," 태그로 각 항목을 정의",{"type":163,"tag":517,"props":2568,"children":2569},{},[2570,2576,2578],{"type":163,"tag":263,"props":2571,"children":2573},{"className":2572},[],[2574],{"type":169,"value":2575},"\u003Ctextarea>",{"type":169,"value":2577},": 여러 줄의 텍스트를 입력받을 때 사용\n",{"type":163,"tag":513,"props":2579,"children":2580},{},[2581],{"type":163,"tag":517,"props":2582,"children":2583},{},[2584,2590,2592,2598],{"type":163,"tag":263,"props":2585,"children":2587},{"className":2586},[],[2588],{"type":169,"value":2589},"rows",{"type":169,"value":2591},"와 ",{"type":163,"tag":263,"props":2593,"children":2595},{"className":2594},[],[2596],{"type":169,"value":2597},"cols",{"type":169,"value":2599}," 속성으로 세로 및 가로 길이를 지정",{"type":163,"tag":257,"props":2601,"children":2605},{"className":2602,"code":2604,"language":169},[2603],"language-text","\u003Cdiv class=\"form-row vertical-align\">\n  \u003Clabel for=\"password-check\">Password Check:\u003C\u002Flabel> \u003Cinput\n    type=\"password\"\n    id=\"password-check\"\n    name=\"password-check\" placeholder=\"비밀번호 확인\"\n    required\n  \u002F>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"form-row\">\n  \u003Clabel>Gender: \u003C\u002Flabel> \u003Cinput type=\"radio\" id=\"gender-male\" value=\"male\" name=\"gender\" \u002F>\n  \u003Clabel for=\"gender-male\">Male\u003C\u002Flabel>\n  \u003Cinput type=\"radio\" id=\"gender-female\" value=\"female\" name=\"gender\" \u002F>\n  \u003Clabel for=\"gender-female\">Female\u003C\u002Flabel>\n  \u003Cinput type=\"radio\" id=\"gender-none\" value=\"none\" name=\"gender\" checked \u002F>\n  \u003Clabel for=\"gender-none\">None\u003C\u002Flabel>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"form-row\">\n  \u003Clabel>Favorite:\u003C\u002Flabel>\n  \u003Cinput type=\"checkbox\" id=\"fav-html\" value=\"html\" name=\"favorite\" checked \u002F>\n  \u003Clabel for=\"fav-html\">HTML\u003C\u002Flabel>\n  \u003Cinput type=\"checkbox\" id=\"fav-java\" value=\"java\" name=\"favorite\" \u002F>\n  \u003Clabel for=\"fav-java\">Java\u003C\u002Flabel> \u003Cinput type=\"checkbox\" id=\"fav-php\" value=\"php\" name=\"favorite\" \u002F>\n  \u003Clabel for=\"fav-php\">PHP\u003C\u002Flabel>\n\u003C\u002Fdiv>\n",[2606],{"type":163,"tag":263,"props":2607,"children":2608},{"__ignoreMap":158},[2609],{"type":169,"value":2604},{"type":163,"tag":236,"props":2611,"children":2613},{"alt":158,"src":2612},"https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002Fbb69959f-d293-4900-94cc-0f0edde7f9d3",[],{"type":163,"tag":224,"props":2615,"children":2617},{"id":2616},"_23-html5-시멘틱-구조-태그",[2618],{"type":169,"value":2619},"2.3. HTML5 시멘틱 구조 태그",{"type":163,"tag":172,"props":2621,"children":2622},{},[2623,2625,2630,2632,2637,2639,2644],{"type":169,"value":2624},"HTML5에서는 웹 문서의 구조를 더욱 명확하게 정의하기 위해 ",{"type":163,"tag":183,"props":2626,"children":2627},{},[2628],{"type":169,"value":2629},"시멘틱(Semantic)",{"type":169,"value":2631}," 태그를 도입했다. 시멘틱은 '",{"type":163,"tag":183,"props":2633,"children":2634},{},[2635],{"type":169,"value":2636},"의미의",{"type":169,"value":2638},"', '",{"type":163,"tag":183,"props":2640,"children":2641},{},[2642],{"type":169,"value":2643},"의미론적인",{"type":169,"value":2645},"'이라는 뜻으로, 각 요소가 역할과 기능에 맞는 의미를 갖도록 영역을 구분한다.",{"type":163,"tag":172,"props":2647,"children":2648},{},[2649],{"type":169,"value":2650},"HTML5 시멘틱 구조는 다음과 같은 이유로 사용한다.",{"type":163,"tag":513,"props":2652,"children":2653},{},[2654,2664,2714,2724],{"type":163,"tag":517,"props":2655,"children":2656},{},[2657,2662],{"type":163,"tag":183,"props":2658,"children":2659},{},[2660],{"type":169,"value":2661},"소스만으로도 문서 내용 쉽게 이해:",{"type":169,"value":2663}," 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 내용인지 쉽게 구분",{"type":163,"tag":517,"props":2665,"children":2666},{},[2667,2672,2674],{"type":163,"tag":183,"props":2668,"children":2669},{},[2670],{"type":169,"value":2671},"편리한 검색:",{"type":169,"value":2673}," 검색 엔진이 웹 페이지의 내용을 더 정확하게 파악하여 사용자에게 필요한 정보를 효율적으로 제공\n",{"type":163,"tag":513,"props":2675,"children":2676},{},[2677],{"type":163,"tag":517,"props":2678,"children":2679},{},[2680,2682,2688,2690,2696,2698,2704,2706,2712],{"type":169,"value":2681},"예를 들어, ",{"type":163,"tag":263,"props":2683,"children":2685},{"className":2684},[],[2686],{"type":169,"value":2687},"\u003Cheader>",{"type":169,"value":2689},"나 ",{"type":163,"tag":263,"props":2691,"children":2693},{"className":2692},[],[2694],{"type":169,"value":2695},"\u003Cnav>",{"type":169,"value":2697}," 부분은 검색하지 않고 ",{"type":163,"tag":263,"props":2699,"children":2701},{"className":2700},[],[2702],{"type":169,"value":2703},"\u003Csection>",{"type":169,"value":2705},"이나 ",{"type":163,"tag":263,"props":2707,"children":2709},{"className":2708},[],[2710],{"type":169,"value":2711},"\u003Carticle>",{"type":169,"value":2713}," 태그 부분만 찾아서 검색이 가능해진다.",{"type":163,"tag":517,"props":2715,"children":2716},{},[2717,2722],{"type":163,"tag":183,"props":2718,"children":2719},{},[2720],{"type":169,"value":2721},"뛰어난 웹 접근성:",{"type":169,"value":2723}," 시각 장애인들이 사용하는 화면 판독기에서 시멘틱 태그를 통해 제목과 내용을 구별하여 사용자에게 정확한 내용을 전달할 수 있음",{"type":163,"tag":517,"props":2725,"children":2726},{},[2727,2732],{"type":163,"tag":183,"props":2728,"children":2729},{},[2730],{"type":169,"value":2731},"다양한 장치에 통일된 결과 제공:",{"type":169,"value":2733}," 태그에 역할이 정해졌기 때문에 어떤 장치(데스크톱, 모바일 등)에서든 동일하게 문서를 해독\u002F표기가 가능",{"type":163,"tag":639,"props":2735,"children":2737},{"id":2736},"_231-주요-html5-시멘틱-태그",[2738],{"type":169,"value":2739},"2.3.1. 주요 HTML5 시멘틱 태그",{"type":163,"tag":172,"props":2741,"children":2742},{},[2743,2748,2750,2755,2757,2763,2765,2770,2772,2777,2779,2785],{"type":163,"tag":263,"props":2744,"children":2746},{"className":2745},[],[2747],{"type":169,"value":2687},{"type":169,"value":2749},": 웹 페이지의 헤더(제목, 로고 등) 부분\n",{"type":163,"tag":263,"props":2751,"children":2753},{"className":2752},[],[2754],{"type":169,"value":2695},{"type":169,"value":2756},": 내비게이션(메뉴) 부분\n",{"type":163,"tag":263,"props":2758,"children":2760},{"className":2759},[],[2761],{"type":169,"value":2762},"\u003Caside>",{"type":169,"value":2764},": 사이드 바와 같이 본문 외의 부가적인 내용\n",{"type":163,"tag":263,"props":2766,"children":2768},{"className":2767},[],[2769],{"type":169,"value":2703},{"type":169,"value":2771},": 문서의 독립적인 섹션. 콘텐츠의 주된 내용을 포함\n",{"type":163,"tag":263,"props":2773,"children":2775},{"className":2774},[],[2776],{"type":169,"value":2711},{"type":169,"value":2778},": 독립적으로 배포되거나 재사용될 수 있는 콘텐츠\n",{"type":163,"tag":263,"props":2780,"children":2782},{"className":2781},[],[2783],{"type":169,"value":2784},"\u003Cfooter>",{"type":169,"value":2786},": 웹 페이지의 푸터(주소, 연락처, 저작권 등) 부분",{"type":163,"tag":2788,"props":2789,"children":2791},"prose-img-grid",{"columns":2790},"2",[2792,2797],{"type":163,"tag":236,"props":2793,"children":2796},{"alt":2794,"src":2795},"시멘틱구조1","https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002F5cb06dbd-1c28-4afa-b7e6-e9a884b65ef0",[],{"type":163,"tag":236,"props":2798,"children":2801},{"alt":2799,"src":2800},"시멘틱 구조2","https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002F32d68da0-67d0-48ba-ba95-68f283e04403",[],{"type":163,"tag":164,"props":2803,"children":2805},{"id":2804},"_3-csscascading-style-sheets-계단식-스타일-시트",[2806],{"type":169,"value":2807},"3. CSS(Cascading Style Sheets; 계단식 스타일 시트)",{"type":163,"tag":2788,"props":2809,"children":2810},{"columns":2790},[2811,2816],{"type":163,"tag":236,"props":2812,"children":2815},{"alt":2813,"src":2814},"css 적용 전","https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002F6e34ec76-c27e-4a0a-a2fe-f2e5eb717b70",[],{"type":163,"tag":236,"props":2817,"children":2820},{"alt":2818,"src":2819},"css 적용 후","https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002F6747e442-78a0-40ca-8c61-9b41bf02c99b",[],{"type":163,"tag":172,"props":2822,"children":2823},{},[2824,2826,2832],{"type":169,"value":2825},"CSS 또한 웹 페이지의 기본 구성 요소 중 하나이다. ",{"type":163,"tag":263,"props":2827,"children":2829},{"className":2828},[],[2830],{"type":169,"value":2831},"1.",{"type":169,"value":2833},"에서 언급했던 것처럼,\nHTML은 정보를 나열하기만 하기 때문에, 이를 보기 쉽고, 가독성을 높이기 위해 CSS를 사용한다.",{"type":163,"tag":224,"props":2835,"children":2837},{"id":2836},"_31-css-모든-스타일의-시작",[2838],{"type":169,"value":2839},"3.1. CSS, 모든 스타일의 시작",{"type":163,"tag":172,"props":2841,"children":2842},{},[2843],{"type":169,"value":2844},"CSS는 이름처럼, 스타일이 위에서 아래로, 외부에서 내부로 적용되는 원리를 가진다.\n이 때문에, CSS를 사용하면 체계적으로 웹 문서 전체의 디자인 통일성을 유지하고, 편리하게 관리할 수 있다.",{"type":163,"tag":172,"props":2846,"children":2847},{},[2848],{"type":169,"value":2849},"CSS를 적용하는 방법은 3가지가 있다.",{"type":163,"tag":639,"props":2851,"children":2853},{"id":2852},"_311-외부-스타일-시트css-파일",[2854,2856,2862],{"type":169,"value":2855},"3.1.1. 외부 스타일 시트(",{"type":163,"tag":263,"props":2857,"children":2859},{"className":2858},[],[2860],{"type":169,"value":2861},".css",{"type":169,"value":2863}," 파일)",{"type":163,"tag":513,"props":2865,"children":2866},{},[2867,2872],{"type":163,"tag":517,"props":2868,"children":2869},{},[2870],{"type":169,"value":2871},"선택자(Selector): 스타일을 적용할 대상을 지정 (예: h1, .menu, #header)",{"type":163,"tag":517,"props":2873,"children":2874},{},[2875],{"type":169,"value":2876},"속성(Property) & 값(Value): 어떤 스타일을 어떻게 적용할지 정의 (예: color: red;)",{"type":163,"tag":172,"props":2878,"children":2879},{},[2880],{"type":169,"value":2881},"가장 구체적으로 대상을 명시한 스타일(인라인 스타일)이 가장 높은 우선순위를 가지며, 그 뒤로 ID, 클래스, 태그 선택자 순으로 적용된다.",{"type":163,"tag":257,"props":2883,"children":2887},{"className":2884,"code":2885,"language":2886,"meta":158,"style":158},"language-css shiki shiki-themes one-dark-pro","div#box.container > p {\n  display: flex;\n  flex-direction: column;\n  \u002F* ... *\u002F\n}\n","css",[2888],{"type":163,"tag":263,"props":2889,"children":2890},{"__ignoreMap":158},[2891,2925,2943,2960,2969],{"type":163,"tag":267,"props":2892,"children":2893},{"class":269,"line":60},[2894,2899,2905,2910,2915,2920],{"type":163,"tag":267,"props":2895,"children":2896},{"style":279},[2897],{"type":169,"value":2898},"div",{"type":163,"tag":267,"props":2900,"children":2902},{"style":2901},"--shiki-default:#61AFEF",[2903],{"type":169,"value":2904},"#box",{"type":163,"tag":267,"props":2906,"children":2907},{"style":285},[2908],{"type":169,"value":2909},".container",{"type":163,"tag":267,"props":2911,"children":2912},{"style":273},[2913],{"type":169,"value":2914}," >",{"type":163,"tag":267,"props":2916,"children":2917},{"style":279},[2918],{"type":169,"value":2919}," p",{"type":163,"tag":267,"props":2921,"children":2922},{"style":273},[2923],{"type":169,"value":2924}," {\n",{"type":163,"tag":267,"props":2926,"children":2927},{"class":269,"line":296},[2928,2933,2938],{"type":163,"tag":267,"props":2929,"children":2930},{"style":273},[2931],{"type":169,"value":2932},"  display: ",{"type":163,"tag":267,"props":2934,"children":2935},{"style":285},[2936],{"type":169,"value":2937},"flex",{"type":163,"tag":267,"props":2939,"children":2940},{"style":273},[2941],{"type":169,"value":2942},";\n",{"type":163,"tag":267,"props":2944,"children":2945},{"class":269,"line":313},[2946,2951,2956],{"type":163,"tag":267,"props":2947,"children":2948},{"style":273},[2949],{"type":169,"value":2950},"  flex-direction: ",{"type":163,"tag":267,"props":2952,"children":2953},{"style":285},[2954],{"type":169,"value":2955},"column",{"type":163,"tag":267,"props":2957,"children":2958},{"style":273},[2959],{"type":169,"value":2942},{"type":163,"tag":267,"props":2961,"children":2962},{"class":269,"line":331},[2963],{"type":163,"tag":267,"props":2964,"children":2966},{"style":2965},"--shiki-default:#7F848E;--shiki-default-font-style:italic",[2967],{"type":169,"value":2968},"  \u002F* ... *\u002F\n",{"type":163,"tag":267,"props":2970,"children":2971},{"class":269,"line":102},[2972],{"type":163,"tag":267,"props":2973,"children":2974},{"style":273},[2975],{"type":169,"value":2976},"}\n",{"type":163,"tag":224,"props":2978,"children":2980},{"id":2979},"_32-박스-모델-웹의-모든-요소는-박스",[2981],{"type":169,"value":2982},"3.2. 박스 모델: 웹의 모든 요소는 '박스'",{"type":163,"tag":172,"props":2984,"children":2985},{},[2986],{"type":169,"value":2987},"CSS의 박스 모델을 이해하는 것은 레이아웃의 첫걸음이라고 한다.\n웹 페이지의 모든 요소는 사각형의 '박스'로 이루어져 있기 때문이다.\n상하좌우로 여백이나 테두리를 설정하고, 이를 기준으로 위치를 잡는다.",{"type":163,"tag":196,"props":2989,"children":2990},{},[2991],{"type":163,"tag":172,"props":2992,"children":2993},{},[2994],{"type":169,"value":2995},"마치 다양한 물건들을 박스에 담고, 차곡차곡 쌓아 정리하는 것과 같다.",{"type":163,"tag":513,"props":2997,"children":2998},{},[2999,3004,3009,3014],{"type":163,"tag":517,"props":3000,"children":3001},{},[3002],{"type":169,"value":3003},"Content: 콘텐츠가 표시되는 실제 영역",{"type":163,"tag":517,"props":3005,"children":3006},{},[3007],{"type":169,"value":3008},"Padding: 콘텐츠와 테두리(border) 사이의 내부 여백",{"type":163,"tag":517,"props":3010,"children":3011},{},[3012],{"type":169,"value":3013},"Border: 박스의 테두리",{"type":163,"tag":517,"props":3015,"children":3016},{},[3017],{"type":169,"value":3018},"Margin: 박스와 다른 요소 사이의 외부 여백",{"type":163,"tag":236,"props":3020,"children":3022},{"alt":158,"src":3021},"https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002F87dc4914-3d93-4488-b667-7daf4ddcde0b",[],{"type":163,"tag":513,"props":3024,"children":3025},{},[3026,3031],{"type":163,"tag":517,"props":3027,"children":3028},{},[3029],{"type":169,"value":3030},"display 속성은 이 박스가 화면에 어떻게 배치될지를 결정하는 중요한 속성이다.",{"type":163,"tag":517,"props":3032,"children":3033},{},[3034],{"type":169,"value":3035},"한 줄을 모두 차지하는 block, 콘텐츠 크기만큼만 차지하며 옆으로 배치되는 inline, 그리고 이 둘의 특징을 합친 inline-block의 차이를 이해하는 것이 중요합니다.",{"type":163,"tag":224,"props":3037,"children":3039},{"id":3038},"_33-현대적-레이아웃의-핵심-flexbox",[3040],{"type":169,"value":3041},"3.3. 현대적 레이아웃의 핵심: Flexbox",{"type":163,"tag":172,"props":3043,"children":3044},{},[3045],{"type":169,"value":3046},"과거 float 등을 이용한 복잡한 레이아웃 방식의 시대를 끝내고, Flexbox(플렉서블 박스)를 통해 간결하고 강력한 1차원 레이아웃 시스템을 사용할 수 있게 되었다.\nFlexbox는 아이템들을 담는 **플렉스 컨테이너(부모 요소)**와 그 안의 **플렉스 아이템(자식 요소)**으로 구성된다.",{"type":163,"tag":236,"props":3048,"children":3050},{"alt":158,"src":3049},"https:\u002F\u002Fcms.croffledev.kr\u002Fassets\u002F2dd5215f-e119-47d4-b0e8-88f5558e4013",[],{"type":163,"tag":172,"props":3052,"children":3053},{},[3054],{"type":169,"value":3055},"Flexbox를 사용하려면 먼저 부모 요소에 display: flex;를 선언해야 한다.\n그 후, 아래와 같은 핵심 속성들로 아이템을 자유자재로 정렬할 수 있습니다.",{"type":163,"tag":196,"props":3057,"children":3058},{},[3059],{"type":163,"tag":172,"props":3060,"children":3061},{},[3062],{"type":169,"value":3063},"flex-direction: 아이템이 쌓일 주축의 방향을 결정합니다. (row, column 등)\njustify-content: 주축(main-axis) 방향으로 아이템을 정렬합니다. (예: flex-start, center, space-between)\nalign-items: 교차축(cross-axis) 방향으로 아이템을 정렬합니다. (예: stretch, center, flex-start)",{"type":163,"tag":224,"props":3065,"children":3067},{"id":3066},"_34-반응형-웹",[3068],{"type":169,"value":3069},"3.4. 반응형 웹",{"type":163,"tag":172,"props":3071,"children":3072},{},[3073],{"type":169,"value":3074},"PC, 태블릿, 모바일까지, 다양한 크기의 디바이스에서 웹사이트가 최적화된 모습으로 보여야 하는 것은 이제 선택이 아닌 필수이다.\n다양한 웹 프레임워크와 CSS 프레임워크에서도 반응형 웹을 위한 기능을 제공하고 있고, 이는 세 가지 핵심 기술로 구현된다.",{"type":163,"tag":639,"props":3076,"children":3078},{"id":3077},"_341-뷰포트-viewport",[3079],{"type":169,"value":3080},"3.4.1. 뷰포트 (Viewport)",{"type":163,"tag":513,"props":3082,"children":3083},{},[3084,3089],{"type":163,"tag":517,"props":3085,"children":3086},{},[3087],{"type":169,"value":3088},"모바일 기기에서 웹 페이지의 보이는 영역을 제어하는 기술",{"type":163,"tag":517,"props":3090,"children":3091},{},[3092,3094,3099],{"type":169,"value":3093},"HTML ",{"type":163,"tag":263,"props":3095,"children":3097},{"className":3096},[],[3098],{"type":169,"value":599},{"type":169,"value":3100}," 태그 안에 아래의 메타 태그를 추가하여, 기기의 화면 너비를 기준으로 페이지 너비를 설정하도록 브라우저에 알려주는 것이 반응형 웹의 시작",{"type":163,"tag":257,"props":3102,"children":3104},{"className":259,"code":3103,"language":90,"meta":158,"style":158},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003C!-- 바로 이 아래 부분 -->\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n    \u003Ctitle>Document\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  ...\n\u003C\u002Fhtml>\n",[3105],{"type":163,"tag":263,"props":3106,"children":3107},{"__ignoreMap":158},[3108,3127,3156,3171,3198,3206,3249,3273,3288,3296],{"type":163,"tag":267,"props":3109,"children":3110},{"class":269,"line":60},[3111,3115,3119,3123],{"type":163,"tag":267,"props":3112,"children":3113},{"style":273},[3114],{"type":169,"value":276},{"type":163,"tag":267,"props":3116,"children":3117},{"style":279},[3118],{"type":169,"value":282},{"type":163,"tag":267,"props":3120,"children":3121},{"style":285},[3122],{"type":169,"value":288},{"type":163,"tag":267,"props":3124,"children":3125},{"style":273},[3126],{"type":169,"value":293},{"type":163,"tag":267,"props":3128,"children":3129},{"class":269,"line":296},[3130,3134,3138,3143,3147,3152],{"type":163,"tag":267,"props":3131,"children":3132},{"style":273},[3133],{"type":169,"value":302},{"type":163,"tag":267,"props":3135,"children":3136},{"style":279},[3137],{"type":169,"value":90},{"type":163,"tag":267,"props":3139,"children":3140},{"style":285},[3141],{"type":169,"value":3142}," lang",{"type":163,"tag":267,"props":3144,"children":3145},{"style":273},[3146],{"type":169,"value":352},{"type":163,"tag":267,"props":3148,"children":3149},{"style":355},[3150],{"type":169,"value":3151},"\"en\"",{"type":163,"tag":267,"props":3153,"children":3154},{"style":273},[3155],{"type":169,"value":293},{"type":163,"tag":267,"props":3157,"children":3158},{"class":269,"line":313},[3159,3163,3167],{"type":163,"tag":267,"props":3160,"children":3161},{"style":273},[3162],{"type":169,"value":319},{"type":163,"tag":267,"props":3164,"children":3165},{"style":279},[3166],{"type":169,"value":324},{"type":163,"tag":267,"props":3168,"children":3169},{"style":273},[3170],{"type":169,"value":293},{"type":163,"tag":267,"props":3172,"children":3173},{"class":269,"line":331},[3174,3178,3182,3186,3190,3194],{"type":163,"tag":267,"props":3175,"children":3176},{"style":273},[3177],{"type":169,"value":337},{"type":163,"tag":267,"props":3179,"children":3180},{"style":279},[3181],{"type":169,"value":342},{"type":163,"tag":267,"props":3183,"children":3184},{"style":285},[3185],{"type":169,"value":347},{"type":163,"tag":267,"props":3187,"children":3188},{"style":273},[3189],{"type":169,"value":352},{"type":163,"tag":267,"props":3191,"children":3192},{"style":355},[3193],{"type":169,"value":358},{"type":163,"tag":267,"props":3195,"children":3196},{"style":273},[3197],{"type":169,"value":363},{"type":163,"tag":267,"props":3199,"children":3200},{"class":269,"line":102},[3201],{"type":163,"tag":267,"props":3202,"children":3203},{"style":2965},[3204],{"type":169,"value":3205},"    \u003C!-- 바로 이 아래 부분 -->\n",{"type":163,"tag":267,"props":3207,"children":3208},{"class":269,"line":391},[3209,3213,3217,3222,3226,3231,3236,3240,3245],{"type":163,"tag":267,"props":3210,"children":3211},{"style":273},[3212],{"type":169,"value":337},{"type":163,"tag":267,"props":3214,"children":3215},{"style":279},[3216],{"type":169,"value":342},{"type":163,"tag":267,"props":3218,"children":3219},{"style":285},[3220],{"type":169,"value":3221}," name",{"type":163,"tag":267,"props":3223,"children":3224},{"style":273},[3225],{"type":169,"value":352},{"type":163,"tag":267,"props":3227,"children":3228},{"style":355},[3229],{"type":169,"value":3230},"\"viewport\"",{"type":163,"tag":267,"props":3232,"children":3233},{"style":285},[3234],{"type":169,"value":3235}," content",{"type":163,"tag":267,"props":3237,"children":3238},{"style":273},[3239],{"type":169,"value":352},{"type":163,"tag":267,"props":3241,"children":3242},{"style":355},[3243],{"type":169,"value":3244},"\"width=device-width, initial-scale=1.0\"",{"type":163,"tag":267,"props":3246,"children":3247},{"style":273},[3248],{"type":169,"value":363},{"type":163,"tag":267,"props":3250,"children":3251},{"class":269,"line":408},[3252,3256,3260,3265,3269],{"type":163,"tag":267,"props":3253,"children":3254},{"style":273},[3255],{"type":169,"value":337},{"type":163,"tag":267,"props":3257,"children":3258},{"style":279},[3259],{"type":169,"value":375},{"type":163,"tag":267,"props":3261,"children":3262},{"style":273},[3263],{"type":169,"value":3264},">Document\u003C\u002F",{"type":163,"tag":267,"props":3266,"children":3267},{"style":279},[3268],{"type":169,"value":375},{"type":163,"tag":267,"props":3270,"children":3271},{"style":273},[3272],{"type":169,"value":293},{"type":163,"tag":267,"props":3274,"children":3275},{"class":269,"line":425},[3276,3280,3284],{"type":163,"tag":267,"props":3277,"children":3278},{"style":273},[3279],{"type":169,"value":397},{"type":163,"tag":267,"props":3281,"children":3282},{"style":279},[3283],{"type":169,"value":324},{"type":163,"tag":267,"props":3285,"children":3286},{"style":273},[3287],{"type":169,"value":293},{"type":163,"tag":267,"props":3289,"children":3290},{"class":269,"line":450},[3291],{"type":163,"tag":267,"props":3292,"children":3293},{"style":273},[3294],{"type":169,"value":3295},"  ...\n",{"type":163,"tag":267,"props":3297,"children":3298},{"class":269,"line":475},[3299,3303,3307],{"type":163,"tag":267,"props":3300,"children":3301},{"style":273},[3302],{"type":169,"value":497},{"type":163,"tag":267,"props":3304,"children":3305},{"style":279},[3306],{"type":169,"value":90},{"type":163,"tag":267,"props":3308,"children":3309},{"style":273},[3310],{"type":169,"value":293},{"type":163,"tag":639,"props":3312,"children":3314},{"id":3313},"_342-유동형-그리드-fluid-grid",[3315],{"type":169,"value":3316},"3.4.2. 유동형 그리드 (Fluid Grid)",{"type":163,"tag":513,"props":3318,"children":3319},{},[3320,3325,3330],{"type":163,"tag":517,"props":3321,"children":3322},{},[3323],{"type":169,"value":3324},"px 같은 고정 단위 대신 % 같은 상대 단위를 사용하여 레이아웃을 만드는 기술",{"type":163,"tag":517,"props":3326,"children":3327},{},[3328],{"type":169,"value":3329},"이를 통해 브라우저 창 크기에 따라 요소의 너비가 유연하게 변함",{"type":163,"tag":517,"props":3331,"children":3332},{},[3333],{"type":169,"value":3334},"vw(뷰포트 너비), vh(뷰포트 높이) 같은 뷰포트 기준 단위 사용 시 글자 크기나 여백 등도 화면 크기에 비례하여 조절됨.",{"type":163,"tag":639,"props":3336,"children":3338},{"id":3337},"_343-미디어-쿼리-media-query",[3339],{"type":169,"value":3340},"3.4.3. 미디어 쿼리 (Media Query)",{"type":163,"tag":513,"props":3342,"children":3343},{},[3344,3349],{"type":163,"tag":517,"props":3345,"children":3346},{},[3347],{"type":169,"value":3348},"화면의 크기나 환경을 감지하여 특정 조건에서만 다른 CSS 스타일을 적용하게 하는 기술",{"type":163,"tag":517,"props":3350,"children":3351},{},[3352],{"type":169,"value":3353},"예를 들어 '화면의 최소 너비가 768px일 때'와 같이 조건을 지정하여 태블릿이나 데스크톱 환경에 맞는 레이아웃을 별도로 정의할 수 있다.",{"type":163,"tag":3355,"props":3356,"children":3357},"style",{},[3358],{"type":169,"value":3359},"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);}",{"title":158,"searchDepth":296,"depth":296,"links":3361},[3362,3366,3372],{"id":166,"depth":296,"text":170,"children":3363},[3364,3365],{"id":226,"depth":313,"text":229},{"id":247,"depth":313,"text":250},{"id":508,"depth":296,"text":511,"children":3367},[3368,3370,3371],{"id":590,"depth":313,"text":3369},"2.1. \u003Chead> 기본 태그",{"id":634,"depth":313,"text":637},{"id":2616,"depth":313,"text":2619},{"id":2804,"depth":296,"text":2807,"children":3373},[3374,3375,3376,3377],{"id":2836,"depth":313,"text":2839},{"id":2979,"depth":313,"text":2982},{"id":3038,"depth":313,"text":3041},{"id":3066,"depth":313,"text":3069},[3379],{"id":139,"blogId":-1,"author":-1,"postIdx":60,"title":140,"slug":141,"summary":142,"thumbnail":143,"status":-1,"visibility":-1,"passwordHash":-1,"publishedAt":144,"updatedAt":145,"categories":3380,"tags":3382,"series":14},[3381],{"name":64,"slug":-1},[3383,3384,3385,3386,3387],{"name":89,"slug":-1},{"name":85,"slug":-1},{"name":79,"slug":-1},{"name":97,"slug":-1},{"name":93,"slug":-1},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":3389},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":3391},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\u002F>\u003Ccircle cx=\"12\" cy=\"7\" r=\"4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":3393},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M8 2v4m8-4v4\"\u002F>\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"\u002F>\u003Cpath d=\"M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":3395},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z\"\u002F>\u003Cpath d=\"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12\"\u002F>\u003Cpath d=\"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":3397},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":3399},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\u002F>\u003Cpath d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":3401},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\u002F>\u003Cpath d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\u002F>\u003C\u002Fg>"]