{"id":16131,"date":"2025-07-11T18:08:53","date_gmt":"2025-07-11T09:08:53","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16131"},"modified":"2025-07-14T20:51:54","modified_gmt":"2025-07-14T11:51:54","slug":"web-component%eb%a1%9c-%eb%a7%8c%eb%93%a4%ec%96%b4%ec%a7%84-%ec%82%ac%ec%9a%a9%ec%9e%90-%ec%a0%95%ec%9d%98-tag%ec%97%90-%ec%8a%a4%ed%83%80%ec%9d%bc-%ec%a7%80%ec%a0%95%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16131","title":{"rendered":"Web Component\ub85c \ub9cc\ub4e4\uc5b4\uc9c4 \uc0ac\uc6a9\uc790 \uc815\uc758 Tag\uc5d0 \uc2a4\ud0c0\uc77c \uc9c0\uc815\ud558\uae30"},"content":{"rendered":"<p>AI\uc5d0\uac8c \ubb3c\uc5b4\ubd24\ub354\ub2c8 \ubc29\ubc95\uc740 3\uac00\uc9c0\ub79c\ub2e4. (AI\uc758 \ub2f5\ubcc0\uc744 \uc774\ub807\uac8c \uae30\ub85d\ud574 \ub454 \uc774\uc720\ub294 \ub2f5\ubcc0\uc744 \uc5bb\uae30 \uc704\ud55c \uacfc\uc815\uc774 \ub2e8\uc21c\ud788 \uba87\ubc88\uc758 \ud504\ub86c\ud504\ud2b8 \uc785\ub825\uc744 \ud1b5\ud574 \uc5bb\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc774\ub2e4.)<\/p>\n<p><h3>\uccab\uc9f8, \ud638\uc2a4\ud2b8 \uc694\uc18c(:host) \uc2a4\ud0c0\uc77c\ub85c \ud754\ud788 \ud558\ub4ef \uc0ac\uc6a9\uc790 \uc815\uc758 Tag\uc5d0 \ub300\ud574 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uba74 \ub41c\ub2e4.<\/h3>\n<p> \uc989, \uc544\ub798\ucc98\ub7fc.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\r\n\/* style.css *\/\r\nmy-counter {\r\n  display: block; \/* \ud575\uc2ec! *\/\r\n  margin: 20px;\r\n  border: 1px solid red;\r\n  width: 300px;}\r\n<\/pre>\n<p>\uc0ac\uc2e4, \ucc98\uc74c\uc5d4 \uc81c\ub300\ub85c \uc791\ub3d9\ud558\uc9c0 \uc54a\uc558\ub2e4. \uadf8 \uc774\uc720\ub294 display\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c \uac12\uc744 \uc9c0\uc815\ud558\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc774\ub2e4. \uc0ac\uc6a9\uc790 \uc815\uc758 Tag\uc758 display \uc2a4\ud0c0\uc77c\uc5d0 \ub300\ud55c \uae30\ubcf8\uac12\uc740 \ubbf8\uc9c0\uc815\uc774\ub2e4. \uc774 display\ub97c \uc9c0\uc815\ud558\uc9c0 \uc54a\uc73c\uba74 padding \uc774\ub4e0 margin\uc774\ub4e0 width\ub4e0 \ubaa8\ub450 \uc5c9\ub9dd\uc9c4\ucc3d\uc73c\ub85c \uacc4\uc0b0\ub418\uc5b4 \ubc18\uc601\ub41c\ub2e4. \uc774 \uccab\ubc88\uc9f8\uac00 \ub0b4\uac00 \uc6d0\ud588\ub358 \ub2f5\uc548\uc774\ub2e4. \uadf8\ub7f0\ub370 AI\ub294 2\uac00\uc9c0\ub97c \ub354 \uc81c\uc2dc\ud574\uc92c\uace0 \ub0b4\uac00 \uc6d0\ud588\ub358 \uc774 \uac83\ubcf4\ub2e4 \ub354 \ub098\uc740 \ubc29\uc548\uc774\ub77c\uba70 \uc81c\uc2dc\ud588\ub2e4. \uc815\ub9d0 \ub354 \ub098\uc740 \ubc29\uc548\uc778\uc9c0 \ud655\uc778\uc740 \ud574\ubcf4\uc9c0 \uc54a\uc558\uc73c\ub098 \uc77c\ub2e8 \uc815\ub9ac\ud574 \ub454\ub2e4.<\/p>\n<p><h3>\ub450\ubc88\uc9f8\ub294 CSS \ucee4\uc2a4\ud140 \ud504\ub85c\ud37c\ud2f0\uc758 \uc0ac\uc6a9\uc774\ub2e4.<\/h3>\n<p> \uc989, CSS \ubcc0\uc218\ub97c \uc0ac\uc6a9\ud558\ub77c\ub294 \uac74\ub370&#8230; \uc774 \ubc29\uc2dd\uc774 \uac00\uc7a5 \uad8c\uc7a5\ub418\ub294 \ubc29\uc2dd\uc774\ub77c\uace0 \ud55c\ub2e4. AI\uac00 \uc54c\ub824\uc900 \uac83\uc744 \ub098\uc5f4\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<p>\ucef4\ud3ec\ub10c\ud2b8 \uc81c\uc791\uc790\uac00 \ub0b4\ubd80 \uc2a4\ud0c0\uc77c\uc758 \ud2b9\uc815 \uac12\uc744 CSS \ubcc0\uc218(Custom Property)\ub85c \ub178\ucd9c\uc2dc\ucf1c\uc8fc\uba74, \uc0ac\uc6a9\uc790\ub294 \uc678\ubd80\uc5d0\uc11c \uc774 \ubcc0\uc218 \uac12\uc744 \ubc14\uafd4\uc11c \ub0b4\ubd80 \uc2a4\ud0c0\uc77c\uc744 \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uac83\uc774 \uac00\uc7a5 \uc720\uc5f0\ud558\uace0 \uad8c\uc7a5\ub418\ub294 &#8220;\uc2a4\ud0c0\uc77c\ub9c1 API&#8221; \uc124\uacc4 \ubc29\uc2dd\uc785\ub2c8\ub2e4.<\/p>\n<p>\ucef4\ud3ec\ub10c\ud2b8 \uc81c\uc791\uc790 (MyCounter.js): \ub0b4\ubd80 \uc2a4\ud0c0\uc77c\uc5d0\uc11c CSS \ubcc0\uc218\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. var(&#8211;\ubcc0\uc218\uba85, \uae30\ubcf8\uac12) \ud615\ud0dc\ub85c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n\/\/ src\/MyCounter.js\r\nconst templateStyleMyCounter = document.createElement('template');\r\ntemplateStyleMyCounter.innerHTML = \/*html*\/ `\r\n  <style>\r\n    button {\r\n      \/* background-color\ub97c CSS \ubcc0\uc218\ub85c \uc9c0\uc815 *\/\r\n      background-color: var(--my-counter-button-bg, #007bff);\r\n      color: var(--my-counter-button-color, white);\r\n      \/* ... *\/\r\n    }\r\n\r\n    span {\r\n      \/* \ud3f0\ud2b8 \uc0c9\uc0c1\uc744 CSS \ubcc0\uc218\ub85c \uc9c0\uc815 *\/\r\n      color: var(--my-counter-span-color, #333);\r\n      \/* ... *\/\r\n   }\r\n <\/style>\r\n `;\r\n<\/pre>\n<p>\ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9\uc790 (style.css): \uc678\ubd80 CSS\uc5d0\uc11c \ud574\ub2f9 \ubcc0\uc218\uc758 \uac12\uc744 \uc7ac\uc815\uc758\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\r\n\/* style.css *\/\r\nmy-counter {\r\n  \/* MyCounter \ub0b4\ubd80\uc758 \ubc84\ud2bc \ubc30\uacbd\uc0c9\uc744 \ucd08\ub85d\uc0c9\uc73c\ub85c \ubcc0\uacbd *\/\r\n  --my-counter-button-bg: green;\r\n  \r\n  \/* MyCounter \ub0b4\ubd80\uc758 span \uae00\uc790\uc0c9\uc744 \ubcf4\ub77c\uc0c9\uc73c\ub85c \ubcc0\uacbd *\/\r\n  --my-counter-span-color: purple;\r\n}\r\n<\/pre>\n<p><h3>\uc138\ubc88\uc9f8\ub294 ::part \uc758\uc0ac \uc694\uc18c\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc774\ub77c\uace0 \ud55c\ub2e4.<\/h3>\n<p> \ucef4\ud3ec\ub10c\ud2b8 \ub0b4\ubd80 \uc694\uc18c\ub97c \uc9c1\uc811\uc801\uc778 \ub300\uc0c1\uc73c\ub85c \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\ub2e4. AI\uac00 \uc124\uba85\ud574\uc900 \ub0b4\uc6a9 \uadf8\ub300\ub85c\ub97c \uc5b8\uae09\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<p> \ucef4\ud3ec\ub10c\ud2b8 \uc81c\uc791\uc790\uac00 \ub0b4\ubd80\uc758 \ud2b9\uc815 \uc694\uc18c\uc5d0 part \uc18d\uc131\uc744 \ubd80\uc5ec\ud558\uc5ec \uc678\ubd80\uc5d0 \ub178\ucd9c\uc2dc\ud0a4\uba74, \uc0ac\uc6a9\uc790\ub294 ::part() \uc758\uc0ac\uc694\uc18c\ub97c \uc0ac\uc6a9\ud574 \ud574\ub2f9 \ubd80\ubd84\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc9c1\uc811 \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ucef4\ud3ec\ub10c\ud2b8 \uc81c\uc791\uc790 (MyCounter.js): \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uace0 \uc2f6\uc740 \ub0b4\ubd80 \uc694\uc18c\uc5d0 part \uc18d\uc131\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n\/\/ src\/MyCounter.js\r\nconst templateDOMMyCounter = document.createElement('template');\r\ntemplateDOMMyCounter.innerHTML = \/*html*\/ `\r\n  &lt;div>\r\n    &lt;span part=\"count-display\">&lt;\/span>  <!-- part \uc18d\uc131 \ucd94\uac00 -->\r\n    &lt;button id=\"incrementButton\" part=\"increment-button\">Increment&lt;\/button> <!-- part \uc18d\uc131 \ucd94\uac00 -->\r\n  &lt;\/div>\r\n`;\r\n<\/pre>\n<p>\ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9\uc790 (style.css): ::part() \uc120\ud0dd\uc790\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud574\ub2f9 \ud30c\ud2b8\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\r\n\/* style.css *\/\r\n\/* my-counter \ub0b4\ubd80\uc758 increment-button \ud30c\ud2b8\uc758 \uc2a4\ud0c0\uc77c \uc9c0\uc815 *\/\r\nmy-counter::part(increment-button) {\r\n  background-color: orange;\r\n  border-radius: 0;\r\n}\r\n\r\n\/* my-counter \ub0b4\ubd80\uc758 count-display \ud30c\ud2b8\uc758 \uc2a4\ud0c0\uc77c \uc9c0\uc815 *\/\r\nmy-counter::part(count-display) {\r\n  font-style: italic;\r\n  color: red;\r\n}\r\n<\/pre>\n<p>\uacfc\uc5f0 \ubbf8\ub798\uc758 \uc18c\ud504\ud2b8\uc6e8\uc5b4 \uac1c\ubc1c\uc740 AI\ub85c \uc778\ud574 \uc5bc\ub9c8\ub098 \uadf8 \uc218\uc900\uc774 \uc5c5\uadf8\ub808\uc774\ub4dc \ub420 \uac83\uc774\uba70 \uac1c\ubc1c \ubcf5\uc7a1\ub3c4\ub294 \uc5bc\ub9c8\ub098 \uc62c\ub77c\uac08\uae4c&#8230;&#8230; \ud5a5\uc0c1\ub41c \uc218\uc900\uacfc \ubcf5\uc7a1\ub3c4\ub97c AI \uc5c6\uc774 \uc624\uc9c1 \uc0ac\ub78c\ub9cc\uc73c\ub85c \uc218\uc6a9\ud560\uc218 \uc788\uc744\uae4c?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AI\uc5d0\uac8c \ubb3c\uc5b4\ubd24\ub354\ub2c8 \ubc29\ubc95\uc740 3\uac00\uc9c0\ub79c\ub2e4. (AI\uc758 \ub2f5\ubcc0\uc744 \uc774\ub807\uac8c \uae30\ub85d\ud574 \ub454 \uc774\uc720\ub294 \ub2f5\ubcc0\uc744 \uc5bb\uae30 \uc704\ud55c \uacfc\uc815\uc774 \ub2e8\uc21c\ud788 \uba87\ubc88\uc758 \ud504\ub86c\ud504\ud2b8 \uc785\ub825\uc744 \ud1b5\ud574 \uc5bb\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc774\ub2e4.) \uccab\uc9f8, \ud638\uc2a4\ud2b8 \uc694\uc18c(:host) \uc2a4\ud0c0\uc77c\ub85c \ud754\ud788 \ud558\ub4ef \uc0ac\uc6a9\uc790 \uc815\uc758 Tag\uc5d0 \ub300\ud574 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uba74 \ub41c\ub2e4. \uc989, \uc544\ub798\ucc98\ub7fc. \/* style.css *\/ my-counter { display: block; \/* \ud575\uc2ec! *\/ margin: 20px; border: 1px solid red; width: 300px;} &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=16131\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Web Component\ub85c \ub9cc\ub4e4\uc5b4\uc9c4 \uc0ac\uc6a9\uc790 \uc815\uc758 Tag\uc5d0 \uc2a4\ud0c0\uc77c \uc9c0\uc815\ud558\uae30&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-16131","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16131"}],"version-history":[{"count":9,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16131\/revisions"}],"predecessor-version":[{"id":16140,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16131\/revisions\/16140"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16131"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}