{"id":11927,"date":"2022-01-14T10:09:28","date_gmt":"2022-01-14T01:09:28","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=11927"},"modified":"2022-01-13T10:16:04","modified_gmt":"2022-01-13T01:16:04","slug":"gwc-ui-library-tab","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=11927","title":{"rendered":"#GWC UI Library : Tab"},"content":{"rendered":"<p>\uc6f9 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 GWC\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Tab \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n&lt;div class=\"vcenter\">\r\n    &lt;gwc-label id=\"label\" content=\"Tab \ubcc0\uacbd \uc774\ubca4\ud2b8\">&lt;\/gwc-label>\r\n    &lt;gwc-tab id=\"tab\" selected-tab=4>\r\n        &lt;tabs>\r\n            &lt;tab title=\"\ud14d\uc2a4\ud2b8\">\r\n                &lt;div class=\"vcenter\">\r\n                    &lt;h2>\uc548\ub155\ud558\uc138\uc694. GWC \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4.&lt;\/h2>\r\n                    &lt;gwc-button id=\"button1\" title=\"\ub2e4\uc6b4\ub85c\ub4dc\">&lt;\/gwc-button>\r\n                &lt;\/div>\r\n            &lt;\/tab>\r\n            &lt;tab title=\"\ud234\ubc84\ud2bc\">\r\n                &lt;div class=\"center\">\r\n                    &lt;gwc-toolbutton class=\"toolbutton09\" icon=\"images\/icon2.png\">&lt;\/gwc-toolbutton>\r\n                    &lt;gwc-toolbutton icon=\"images\/icon3.png\">&lt;\/gwc-toolbutton>\r\n                    &lt;gwc-toolbutton icon=\"images\/icon1.png\">&lt;\/gwc-toolbutton>                            \r\n                &lt;\/div>\r\n            &lt;\/tab>\r\n            &lt;tab title=\"\ud0ed1\">\r\n                &lt;div class=\"vcenter\">\r\n                    &lt;div>\r\n                        &lt;gwc-checkbox title=\"\uc0ac\uacfc\">&lt;\/gwc-checkbox>\r\n                        &lt;gwc-checkbox title=\"\ud1a0\ub9c8\ud1a0\">&lt;\/gwc-checkbox>\r\n                        &lt;gwc-checkbox title=\"\uade4\">&lt;\/gwc-checkbox>\r\n                        &lt;gwc-checkbox title=\"\ub2f9\uadfc\">&lt;\/gwc-checkbox>\r\n                        &lt;gwc-checkbox title=\"\ubc14\ub098\ub098\">&lt;\/gwc-checkbox>\r\n                    &lt;\/div>\r\n                    &lt;gwc-slider label=\"\ubcfc\ub968\" unit=\"dB\" to-fixed=1 min=0 max=100 value=45>&lt;\/gwc-slider>\r\n                &lt;\/div>\r\n            &lt;\/tab>\r\n            &lt;tab title=\"\ud0ed2\">\r\n                &lt;div class=\"vcenter\">\r\n                    &lt;gwc-radiogroup>\r\n                        &lt;items>\r\n                            &lt;item>CSS&lt;\/item>\r\n                            &lt;item>JS&lt;\/item>\r\n                            &lt;item>HTML&lt;\/item>\r\n                        &lt;\/items>\r\n                    &lt;\/gwc-radiogroup>\r\n                    &lt;div>\r\n                        &lt;gwc-label content=\"DOWNLOADING\" outline-type=\"concave\">&lt;\/gwc-label>&lt;gwc-progress auto=\"true\">&lt;\/gwc-progress>\r\n                    &lt;\/div>\r\n                &lt;\/div>\r\n            &lt;\/tab>                    \r\n            &lt;tab title=\"\uc218\uc9c1\uc2a4\ud06c\ub864\ubdf0\">\r\n                &lt;div class=\"vcenter\">\r\n                    &lt;gwc-vscrollview>\r\n                        &lt;content>\r\n                            &lt;p>01. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>02. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>03. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>04. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>05. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>06. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>07. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>08. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>09. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>10. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>11. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>12. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>13. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>14. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>15. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>16. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>17. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>18. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>19. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                            &lt;p>20. \uc778\uac04\uc740 \ub9d0\uc774 \uc544\ub2cc \ud589\uc704\ub85c \uc815\uc758\ub41c\ub2e4.&lt;\/p>\r\n                        &lt;\/content>\r\n                    &lt;\/gwc-vscrollview>\r\n                &lt;\/div>\r\n            &lt;\/tab>                    \r\n        &lt;\/tabs>\r\n    &lt;\/gwc-tab>\r\n    &lt;gwc-button id=\"button2\" title=\"\uc138\ubc88\uc9f8 \ud0ed\uc73c\ub85c \ubcc0\uacbd\">&lt;\/gwc-button>\r\n&lt;\/div>\r\n<\/pre>\n<p>\uadf8\ub9ac\uace0 CSS \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uad6c\uc694.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\r\n.center {\r\n    display: flex;\r\n    width: 100%;\r\n    height: 100%;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 0.5em;\r\n}\r\n\r\n.vcenter {\r\n    display: flex;\r\n    width: 100%;\r\n    height: 100%;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-direction: column;\r\n    gap: 2em;\r\n}\r\n\r\ngwc-tab {\r\n    width: 35em;\r\n    height: 13em;\r\n}\r\n\r\ngwc-vscrollview {\r\n    width: 25em;\r\n    height: 9em;\r\n}\r\n\r\ngwc-slider {\r\n    width: 18em;\r\n}\r\n\r\ngwc-progress {\r\n    width: 20em;\r\n}\r\n\r\ngwc-label {\r\n    margin-right: 0.5em;\r\n}\r\n\r\ndiv, h2 {\r\n    color: white;\r\n}\r\n\r\np:nth-child(2n) {\r\n    color: greenyellow;\r\n    font-size: 1.2em;\r\n}\r\n\r\np:nth-child(2n+1) {\r\n    color: yellow;\r\n}\r\n<\/pre>\n<p>js \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nwindow.onload = () => {\r\n    button1.onclick = () => {\r\n        gwcMessage(\"GitHub\uc5d0\uc11c \ub2e4\uc6b4\ub85c\ub4dc \uac00\ub2a5\ud569\ub2c8\ub2e4.\");\r\n    }\r\n\r\n    tab.addEventListener(\"change\", (event) => {\r\n        label.content = `${event.detail.previousTab}\ubc88 \ud0ed\uc5d0\uc11c ${event.detail.currentTab}\ubc88 \ud0ed\uc73c\ub85c \ubcc0\uacbd \ub418\uc5c8\uc2b5\ub2c8\ub2e4.`; ;\r\n    });\r\n\r\n    button2.onclick = () => tab.selectedTab = 3;\r\n\r\n    GeoServiceWebComponentManager.instance.update();\r\n};\r\n<\/pre>\n<p>\uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><center><video controls=\"controls\" ><source src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2022\/01\/gwc-tab.mp4\" \/>\ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4.<\/video><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 GWC\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Tab \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uba3c\uc800 DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. &lt;div class=&#8221;vcenter&#8221;> &lt;gwc-label id=&#8221;label&#8221; content=&#8221;Tab \ubcc0\uacbd \uc774\ubca4\ud2b8&#8221;>&lt;\/gwc-label> &lt;gwc-tab id=&#8221;tab&#8221; selected-tab=4> &lt;tabs> &lt;tab title=&#8221;\ud14d\uc2a4\ud2b8&#8221;> &lt;div class=&#8221;vcenter&#8221;> &lt;h2>\uc548\ub155\ud558\uc138\uc694. GWC \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4.&lt;\/h2> &lt;gwc-button id=&#8221;button1&#8243; title=&#8221;\ub2e4\uc6b4\ub85c\ub4dc&#8221;>&lt;\/gwc-button> &lt;\/div> &lt;\/tab> &lt;tab title=&#8221;\ud234\ubc84\ud2bc&#8221;> &lt;div class=&#8221;center&#8221;> &lt;gwc-toolbutton class=&#8221;toolbutton09&#8243; icon=&#8221;images\/icon2.png&#8221;>&lt;\/gwc-toolbutton> &lt;gwc-toolbutton icon=&#8221;images\/icon3.png&#8221;>&lt;\/gwc-toolbutton> &lt;gwc-toolbutton icon=&#8221;images\/icon1.png&#8221;>&lt;\/gwc-toolbutton> &lt;\/div> &lt;\/tab> &lt;tab title=&#8221;\ud0ed1&#8243;> &lt;div class=&#8221;vcenter&#8221;> &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=11927\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;#GWC UI Library : Tab&#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":[140],"tags":[],"class_list":["post-11927","post","type-post","status-publish","format-standard","hentry","category-gwc"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11927","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=11927"}],"version-history":[{"count":5,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11927\/revisions"}],"predecessor-version":[{"id":11937,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11927\/revisions\/11937"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11927"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}