-
Notifications
You must be signed in to change notification settings - Fork 0
/
05428faa.6fe7b203.js
1 lines (1 loc) · 22.2 KB
/
05428faa.6fe7b203.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{482:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return O}));var a=n(0),i=n.n(a);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var o=i.a.createContext({}),p=function(e){var t=i.a.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=p(e.components);return i.a.createElement(o.Provider,{value:t},e.children)},s={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},d=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,o=b(e,["components","mdxType","originalType","parentName"]),m=p(n),d=a,O=m["".concat(c,".").concat(d)]||m[d]||s[d]||r;return n?i.a.createElement(O,l(l({ref:t},o),{},{components:n})):i.a.createElement(O,l({ref:t},o))}));function O(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,c=new Array(r);c[0]=d;var l={};for(var b in t)hasOwnProperty.call(t,b)&&(l[b]=t[b]);l.originalType=e,l.mdxType="string"==typeof e?e:a,c[1]=l;for(var o=2;o<r;o++)c[o]=n[o];return i.a.createElement.apply(null,c)}return i.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},72:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return l})),n.d(t,"toc",(function(){return b})),n.d(t,"default",(function(){return p}));var a=n(3),i=n(7),r=(n(0),n(482)),c={title:"7-1 Semantic Web & CSS Query"},l={unversionedId:"css/css-rendering/semantic_web",id:"css/css-rendering/semantic_web",isDocsHomePage:!1,title:"7-1 Semantic Web & CSS Query",description:"semantic web \uc5d0\uc11c css \ub97c \uc5b4\ub5bb\uac8c \ucffc\ub9ac\ucc98\ub7fc \uc4f0\ub294\uc9c0\uc5d0 \ub300\ud574\uc11c \ub2e4\ub8ec\ub2e4.",source:"@site/docs/css/css-rendering/semantic_web.md",slug:"/css/css-rendering/semantic_web",permalink:"/docs/css/css-rendering/semantic_web",version:"current",lastUpdatedAt:1632642016,sidebar:"css",previous:{title:"6-4 \ub4dc\ub7fc\ud1b5 \uadf8\ub9ac\uae30",permalink:"/docs/css/css-rendering/draw_3d_drum"},next:{title:"7-2 HTML5 dataset",permalink:"/docs/css/css-rendering/dataset"}},b=[{value:"\uc758\ubbf8\ub860\uc801 \uc6f9\uc744 \uc0ac\uc6a9\ud558\ub294 \uc774\uc720",id:"\uc758\ubbf8\ub860\uc801-\uc6f9\uc744-\uc0ac\uc6a9\ud558\ub294-\uc774\uc720",children:[]},{value:"Semantic Web",id:"semantic-web",children:[{value:"DOM : \uc758\ubbf8\ub97c \uac16\ub3c4\ub85d \ud0dc\uae45",id:"dom--\uc758\ubbf8\ub97c-\uac16\ub3c4\ub85d-\ud0dc\uae45",children:[]},{value:"CSS Selector",id:"css-selector",children:[]},{value:"CSS",id:"css",children:[]}]},{value:"CSS Attribute Selector",id:"css-attribute-selector",children:[]},{value:"Query Style Selector",id:"query-style-selector",children:[]},{value:"HTML5 MICRODATA",id:"html5-microdata",children:[]},{value:"schema.org",id:"schemaorg",children:[]}],o={toc:b};function p(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},o,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(r.b)("div",{parentName:"div",className:"admonition-heading"},Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",{parentName:"h5",className:"admonition-icon"},Object(r.b)("svg",{parentName:"span",xmlns:"https://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},Object(r.b)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"tip")),Object(r.b)("div",{parentName:"div",className:"admonition-content"},Object(r.b)("p",{parentName:"div"},"semantic web \uc5d0\uc11c css \ub97c \uc5b4\ub5bb\uac8c \ucffc\ub9ac\ucc98\ub7fc \uc4f0\ub294\uc9c0\uc5d0 \ub300\ud574\uc11c \ub2e4\ub8ec\ub2e4."))),Object(r.b)("h2",{id:"\uc758\ubbf8\ub860\uc801-\uc6f9\uc744-\uc0ac\uc6a9\ud558\ub294-\uc774\uc720"},"\uc758\ubbf8\ub860\uc801 \uc6f9\uc744 \uc0ac\uc6a9\ud558\ub294 \uc774\uc720"),Object(r.b)("p",null,Object(r.b)("strong",{parentName:"p"},"\uac80\uc0c9\uc5d4\uc9c4"),"\uc774 HTML \uc6f9\uc744 \uc77d\uc5b4\ub4e4\uc600\uc744 \ub54c,"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"\ub2e4\uc591\ud55c \uac80\uc0c9\uacb0\uacfc"),"\ub97c \ub9cc\ub4e4\uc5b4 \ub0b4\uac8c\ub054 "),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"\uba38\uc2e0\uc5d0 \uce5c\ud654\uc801\uc778 \ubb38\uc11c"),"\ub97c \ub9cc\ub4e4\uae30 \uc704\ud568.")),Object(r.b)("h2",{id:"semantic-web"},"Semantic Web"),Object(r.b)("h3",{id:"dom--\uc758\ubbf8\ub97c-\uac16\ub3c4\ub85d-\ud0dc\uae45"},"DOM : \uc758\ubbf8\ub97c \uac16\ub3c4\ub85d \ud0dc\uae45"),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",{parentName:"div",className:"admonition-heading"},Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",{parentName:"h5",className:"admonition-icon"},Object(r.b)("svg",{parentName:"span",xmlns:"https://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(r.b)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"}))),"Anti \ub354\uc774\uc0c1 \ud654\uba74\uc758 \uad6c\uc131\uc694\uc18c\ub85c dom \uc744 \ud3c9\uac00\ud560 \uc218 \uc5c6\ub2e4")),Object(r.b)("div",{parentName:"div",className:"admonition-content"},Object(r.b)("ul",{parentName:"div"},Object(r.b)("li",{parentName:"ul"},"\uc904\uc744 \ub098\ub204\uae30 \uc704\ud574\uc11c div \ub098 p \ud0dc\uadf8\ub97c \uc0ac\uc6a9"),Object(r.b)("li",{parentName:"ul"},"\uc7a5\uc2dd\uc744 \ub123\uae30 \uc704\ud574 \uc774\ubbf8\uc9c0 \ud0dc\uadf8"),Object(r.b)("li",{parentName:"ul"},"\ub808\uc774\uc544\uc6c3\uc744 \uc704\ud55c \ud0dc\uadf8")))),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",{parentName:"div",className:"admonition-heading"},Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",{parentName:"h5",className:"admonition-icon"},Object(r.b)("svg",{parentName:"span",xmlns:"https://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(r.b)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"}))),"Semantic web")),Object(r.b)("div",{parentName:"div",className:"admonition-content"},Object(r.b)("p",{parentName:"div"},"\uc7a5\uc2dd\uc6a9 \ud0dc\uadf8\uac00 \uc544\ub2cc \uc758\ubbf8\ub860\uc801 \ud0dc\uadf8\ub97c \uc0ac\uc6a9\ud558\uba74 \ud0dc\uadf8\uc218\uac00 \uc904\uc5b4\ub4e4\uac8c \ub41c\ub2e4. "),Object(r.b)("ul",{parentName:"div"},Object(r.b)("li",{parentName:"ul"},"\uc2dc\uac04\uc744 \ud45c\ud604\ud558\uace0 \uc788\uc73c\uba74 time \uc774\ub77c\ub294 \ud0dc\uadf8\ub85c \uac10\uc2f8\uc918\uc57c \ud55c\ub2e4. "),Object(r.b)("li",{parentName:"ul"},"\uc81c\ubaa9\uc744 \ud45c\ud604\ud558\uace0 \uc788\uc73c\uba74 header"),Object(r.b)("li",{parentName:"ul"},"\uae00\uc740 article")),Object(r.b)("p",{parentName:"div"},"\uadf8\ub7ec\ub098 html5 \ub294 \ud0dc\uadf8\ub9cc\uc73c\ub85c \ubaa8\ub4e0 \uc758\ubbf8\ub97c \ud574\uacb0\ud560 \uc218 \uc5c6\ub2e4."),Object(r.b)("ul",{parentName:"div"},Object(r.b)("li",{parentName:"ul"},"\ud0dc\uadf8\uc0c1\uc73c\ub85c\ub294 \uc81c\uc77c\uba3c\uc800 \ub098\uc654\uc9c0\ub9cc \ud654\uba74\uc0c1\uc73c\ub85c\ub294 \uc81c\uc77c \ubc11\uc5d0 \ub098\uc62c \uc218 \uc788\ub2e4."),Object(r.b)("li",{parentName:"ul"},"\uc5b4\ub5a4 \uac83\ub4e4\uc740 \uc548\ubcf4\uc77c \uc218\ub3c4 \uc788\ub2e4.")))),Object(r.b)("h3",{id:"css-selector"},"CSS Selector"),Object(r.b)("p",null,"CSS Selector \ub294 DOM \uc758 \uad6c\uc870\uc5d0 \ubc00\uc811\ud558\uac8c \uc120\ud0dd\ud558\ub824\uace0 \ud55c\ub2e4."),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"div > p > img"),Object(r.b)("li",{parentName:"ul"},"\uc774 \uac15\uc758\ub97c \ub4e3\uae30 \uc804\uc5d0\ub294 \ubaa8\ub4e0 \uc758\ubbf8\ub97c ",Object(r.b)("em",{parentName:"li"},"\ud074\ub798\uc2a4 \uba85"),"\uc73c\ub85c \uad6c\ud604\ud558\ub824 \ud588\uc744 \uac83\uc774\ub2e4. ")),Object(r.b)("h3",{id:"css"},"CSS"),Object(r.b)("p",null,"\uc758\ubbf8\uc640 \ubb34\uad00\ud55c \uc2a4\ud0c0\uc77c "),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",{parentName:"div",className:"admonition-heading"},Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",{parentName:"h5",className:"admonition-icon"},Object(r.b)("svg",{parentName:"span",xmlns:"https://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},Object(r.b)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"}))),"\uc720\uc9c0\ubcf4\uc218 \ubd88\uac00\ub2a5\ud55c HTML \uacfc CSS(CSS \ub54c\ubb38\uc5d0 HTML \uc744 \uace0\uce60\uc218 \uc5c6\ub294 \uc0c1\ud669)")),Object(r.b)("div",{parentName:"div",className:"admonition-content"},Object(r.b)("p",{parentName:"div"},"CSS Selector \ub294 DOM \uacfc CSS \ub97c \uc5f0\uacb0\ud55c\ub2e4."),Object(r.b)("ul",{parentName:"div"},Object(r.b)("li",{parentName:"ul"},"CSS Selector \uc791\uc131\ubc95\uc5d0 \ub530\ub77c\uc11c \uc720\uc9c0\ubcf4\uc218\uac00 \uacb0\uc815\ub41c\ub2e4. ")),Object(r.b)("p",{parentName:"div"},"DOM \uc758 \uad6c\uc870\uc5d0 \ub530\ub77c Selector \ub97c \uc9c0\uc815\ud558\uba74 \uae68\uc9c0\uae30 \uc27d\ub2e4.\n\uc544\uc774\ucf58\uc744 \ud558\ub098\ub97c \uc911\uac04\ub123\uac70\ub098 \uc704\uce58\ub97c \ubc14\uafbc\ub2e4\uba74 \uae68\uc838\ubc84\ub9b4 \uac83\uc774\ub2e4. "),Object(r.b)("p",{parentName:"div"},"CSS Selector \ub97c \uc798\ubabb \uc120\ud0dd\ud588\uae30 \ub54c\ubb38\uc5d0 \uc758\ubbf8\ub860\uc801 DOM \uc744 \uac1c\uc870\ud560 \uc218 \uc5c6\uac8c \ub418\uc5c8\ub2e4. "),Object(r.b)("ol",{parentName:"div"},Object(r.b)("li",{parentName:"ol"},"DOM \uc744 \uc2a4\ud0c0\uc77c\uc5d0 \ub9de\ucdb0 \uc81c\uc791"),Object(r.b)("li",{parentName:"ol"},"\ud0dc\uadf8\uc758 \ubcc0\ud654\uac00 \uc2a4\ud0c0\uc77c\uc744 \uae68\uba39\uc74c ")),Object(r.b)("p",{parentName:"div"},"\uc774\uac83\uc758 \ud574\uacb0\ubc29\ubc95\uc740 Selector \ub3c4 Semantic Selector \ub97c \uc4f0\uba74 \ub41c\ub2e4."))),Object(r.b)("p",null,"DOM \uc758 \uad6c\uc870\uc5d0\uc11c \uac00\uc7a5 \uc27d\uac8c \ubc97\uc5b4\ub098\ub294 \ubc29\ubc95\uc740 Selector \ub97c \ud074\ub798\uc2a4\ub9cc \uc4f0\ub294 \ubc29\ubc95\uc774 \uc788\ub2e4."),Object(r.b)("h2",{id:"css-attribute-selector"},Object(r.b)("a",{parentName:"h2",href:"https://drafts.csswg.org/selectors-3/#attrubute-selectors"},"CSS Attribute Selector")),Object(r.b)("p",null,"Semantic Selector \ub97c \uc4f0\uae30 \uc704\ud55c \ubc29\ubc95\ub4e4\uc774\ub2e4."),Object(r.b)("p",null,"\ud574\ub2f9 Element \uc758 attribute \ub85c \uc120\ud0dd\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \uc2a4\ud399 "),Object(r.b)("ol",null,Object(r.b)("li",{parentName:"ol"},Object(r.b)("inlineCode",{parentName:"li"},"[attr]")," - \uc18d\uc131\uc774 \uc874\uc7ac\ud568"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("inlineCode",{parentName:"li"},"[attr=val]")," - \uac12\uacfc \uc77c\uce58"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("inlineCode",{parentName:"li"},"[attr~=val]")," - \uacf5\ubc31\uc73c\ub85c \uad6c\ubd84\ub41c \ub2e8\uc5b4\ub85c \ud3ec\ud568\ub418\uba74 \uc77c\uce58"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("inlineCode",{parentName:"li"},"[attr|=val]")," - \uc77c\uce58\ud558\uac70\ub098 \ub4a4\uc5d0 - \uac00 \ubd99\uc744 \ub54c"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("inlineCode",{parentName:"li"},"[attr*=val]")," - \uac12\uc774 \ud3ec\ud568\ub420 \ub54c"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("inlineCode",{parentName:"li"},"[attr^=val]")," - \uac12\uc73c\ub85c \uc2dc\uc791\ud560 \ub54c"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("inlineCode",{parentName:"li"},"[attr$=val]")," - \uac12\uc73c\ub85c \ub05d\ub0a0 \ub54c"),Object(r.b)("li",{parentName:"ol"},Object(r.b)("inlineCode",{parentName:"li"},"[(ex) i]")," - \ub300\uc18c\ubb38 \uad6c\ubd84\uc548\ud568")),Object(r.b)("h2",{id:"query-style-selector"},"Query Style Selector"),Object(r.b)("p",null,"select ",Object(r.b)("inlineCode",{parentName:"p"},"*")," from ",Object(r.b)("inlineCode",{parentName:"p"},"table")," from ",Object(r.b)("inlineCode",{parentName:"p"},"field conditions..")),Object(r.b)("p",null,"SQL \ubb38\uacfc \uc720\uc0ac\ud558\ub2e4"),Object(r.b)("p",null,Object(r.b)("inlineCode",{parentName:"p"},"base selector"),"[",Object(r.b)("inlineCode",{parentName:"p"},"field conditions"),"][`..`]","[",Object(r.b)("inlineCode",{parentName:"p"},".."),"]"),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-html"},'<form id="join">\n <input type="text" name="userid" />\n <input type="password" name="pw" />\n <input type="text" name="nick" />\n</form> \n')),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-scss"},'\x3c!-- SCSS \uc5d0\uc11c \uc911\ucca9 selector \ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. --\x3e\n#join {\n [name="userid"]{ border: 1px solid #f00 }\n [name="pw"]{ border: 1px solid #0f0 }\n [name="nick"]{ border: 1px solid #00f }\n}\n')),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"data \uad6c\uc870\uc5d0 \uadfc\uac70\ub97c \ub454 selecting"),Object(r.b)("li",{parentName:"ul"},"name \uc18d\uc131\uc740 \uc11c\ubc84\uc640 \ud569\uc758 \ub41c \uc18d\uc131\uc774\ub2e4."),Object(r.b)("li",{parentName:"ul"},"json \uc758 api \ub098 request \uac00 \ud569\uc758\ub41c \uc774\uc0c1, DOM \uc758 \uad6c\uc870\ub098 \ub514\uc790\uc778\uc5d0 \ub530\ub77c\uc11c \ubc14\ub00c\uc9c0 \uc54a\ub294\ub2e4. "),Object(r.b)("li",{parentName:"ul"},"\uc758\ubbf8\ub97c \uac16\ub294 \ud0dc\uadf8\uc5d0\uac8c \uc2a4\ud0c0\uc77c\uc744 \uc8fc\ub294 \uac83\uc774 \ud575\uc2ec\uc774\ub2e4. ")),Object(r.b)("h2",{id:"html5-microdata"},Object(r.b)("a",{parentName:"h2",href:"https://www.w3.org/TR/microdata/"},"HTML5 MICRODATA")),Object(r.b)("p",null,"HTML5 \uc5d0\uc11c\ub294 \uc911\uad6c\ub09c\ubc29\uc73c\ub85c \ub3cc\uc544\ub2e4\ub2c8\ub358 Sematic Web Spec \uc744 \uac04\ub2e8\ud558\uac8c \uc815\ub9ac\ud558\uc600\ub2e4."),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"itemscope")," \uc801\uc6a9\ubc94\uc704 \uc124\uc815",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"\ud604\uc7ac \uc5b4\ub5a4 \uc758\ubbf8\uac00 \uc801\uc6a9\ub418\ub294 \ud0dc\uadf8\uc758 \ubc94\uc704\ub294 HTML \ud0dc\uadf8\uc758 \uad6c\uc870\uc640 \uc77c\uce58\ud55c\ub2e4."))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"itemtype")," \uc2a4\ud0a4\ub9c8\uc124\uc815",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"\uc2a4\ucf54\ud504 \uc548\uc5d0\uc11c, \uc2a4\ucf54\ud504\uac00 \uc5b4\ub5a4 \ud0c0\uc785\uc778\uc9c0 \uacb0\uc815\ud55c\ub2e4. "))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"itemid")," "),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"itemprop")," \uc18d\uc131\uba85"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"content")," \ube44\uac00\uc2dc\uc801\uc77c \ub54c \uac12\uc744 \uc124\uc815"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"value")," \uac00\uc2dc\uc801\uc778 \uac12\uc774 \uc6d0\ud558\ub294 \uac12\uc774 \uc544\ub2d0 \ub54c"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"itemref")," scope \uacc4\uce35 \uad6c\uc870 \uc548\uc5d0 \uc5c6\uc744 \ub54c")),Object(r.b)("h2",{id:"schemaorg"},"schema.org"),Object(r.b)("p",null,"schema.org \uc5d0\uc11c\ub294 microdata \uc2a4\ud0a4\ub9c8 \ud3ec\ub9f7\uc73c\ub85c \uc788\ub294 \ub370\uc774\ud130\ub4e4\uc744 \uacf5\uc720\ud558\uace0 \uc788\ub2e4. "),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",{parentName:"li",href:"https://schema.org/BreadcrumbList"},"https://schema.org/BreadcrumbList")),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",{parentName:"li",href:"https://schema.org/WebPage"},"https://schema.org/WebPage"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"\ud558\ub098\uc758 \uc6f9\ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4 \ub54c \uc0ac\uc6a9\ud560 \ub9cc\ud55c \uc2a4\ud0a4\ub9c8\uac00 \uacf5\uc720\ub418\uc5b4 \uc788\ub2e4. "))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",{parentName:"li",href:"https://schema.org/CollegeOrUniversity"},"https://schema.org/CollegeOrUniversity"))),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-html",metastring:'title="\ud654\uba74\uc5d0 \uadf8\ub9ac\ub294 \ub514\uc790\uc778\uacfc \uac00\uae5d\ub2e4."',title:'"\ud654\uba74\uc5d0',"\uadf8\ub9ac\ub294":!0,"\ub514\uc790\uc778\uacfc":!0,'\uac00\uae5d\ub2e4."':!0},"<body>\n <h1>CodeSpitz76 - 5</h1>\n <nav>Home</nav>\n <p>\n \ucf54\ub4dc\uc2a4\ud53c\uce2076 5\ud68c\ucc28 \uc218\uc5c5\uc740 CSS \ub97c \ucffc\ub9ac\ud654\ud558\uc5ec \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \ub2e4\ub8f9\ub2c8\ub2e4.\n </p>\n <ul>\n <li>\n <h2>HTML5 MicroData</h2>\n <p>\ub9c8\uc774\ud06c\ub85c\ub370\uc774\ud130\uc5d0 \ub300\ud55c \uac1c\ub150\uacfc \uc608\uc81c</p>\n </li>\n <li>\n <h2>HTML5 DataSet</h2>\n <p>\ub370\uc774\ud130\uc14b\uc5d0 \ub300\ud55c \uac1c\ub150\uacfc \uc608\uc81c</p>\n </li>\n </ul>\n <footer>\n <div>MIT</div>\n <div>Bsidesoft co.</div>\n </footer>\n</body>\n")),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-html",metastring:'title="\ubd07\uc774\ub098 \uac80\uc0c9\ucffc\ub9ac\uc5d4\uc9c4\uc774 \ubd84\uc11d\ud560 \uc218 \uc788\ub294 \uc644\uc804\ud55c \ubb38\uc11c / DB \ud654 \uac00\ub2a5"',title:'"\ubd07\uc774\ub098',"\uac80\uc0c9\ucffc\ub9ac\uc5d4\uc9c4\uc774":!0,"\ubd84\uc11d\ud560":!0,"\uc218":!0,"\uc788\ub294":!0,"\uc644\uc804\ud55c":!0,"\ubb38\uc11c":!0,"/":!0,DB:!0,"\ud654":!0,'\uac00\ub2a5"':!0},'<body itemscope itemtype="https://schema.org/WebPage">\n <h1 itemprop="name">CodeSpitz76 - 5</h1>\n <nav itemprop="breadcrumb">Home</nav> \x3c!-- https://brunch.co.kr/@ebprux/45 --\x3e\n <p itemprop="description"> \n \ucf54\ub4dc\uc2a4\ud53c\uce2076 5\ud68c\ucc28 \uc218\uc5c5\uc740 CSS \ub97c \ucffc\ub9ac\ud654\ud558\uc5ec \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \ub2e4\ub8f9\ub2c8\ub2e4.\n </p>\n <ul>\n <li itemprop="mainEntity" itemscope itemtype="https://schema.org/CollegeOrUniversity">\n <h2 itemprop="name">HTML5 MicroData</h2>\n <p itemprop="description">\ub9c8\uc774\ud06c\ub85c\ub370\uc774\ud130\uc5d0 \ub300\ud55c \uac1c\ub150\uacfc \uc608\uc81c</p>\n </li>\n <li itemprop="mainEntity" itemscope itemtype="https://schema.org/CollegeOrUniversity">\n <h2 itemprop="name">HTML5 DataSet</h2>\n <p itemprop="description">\ub370\uc774\ud130\uc14b\uc5d0 \ub300\ud55c \uac1c\ub150\uacfc \uc608\uc81c</p>\n </li>\n </ul>\n <footer>\n <div itemprop="license">MIT</div>\n <div itemprop="publisher">Bsidesoft co.</div>\n </footer>\n</body>\n')),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-scss",metastring:'title="sementic query"',title:'"sementic','query"':!0},'[itemType$="WebPage"] { // itemType \uc774 WebPage \ub85c \ub05d\ub098\ub294 \u3153\n [itemprop="name"] { font-size: 20px; padding: 0; margin: 10px 0 }\n [itemprop="breadcrumb"] { font-size: 11px; margin: 0 10px; color: #234A7F }\n [itemprop="description"] { font-size: 14px; line=height: 20px; color: #444 }\n ul { list-style: none; padding: 0 }\n [itemprop="mainEntity"] { padding: 0 20px; margin: 10px; border: 1px solid #999; border-radius: 20px }\n [itemprop="license"] { font-size: 11px; color: #999 }\n [itemprop="publisher"] { font-size: 12px; font-weight: bold; font-family: sans-serif }\n}\n\n[itemtype$="CollegeOrUniversity"] {\n [itemprop="name"] { font-size: 15px }\n [itemprop="description"] { font-size: 12px; line-height: 15px }\n}\n')))}p.isMDXComponent=!0}}]);