{"id":12258,"date":"2022-05-05T12:16:37","date_gmt":"2022-05-05T03:16:37","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=12258"},"modified":"2022-05-10T17:23:59","modified_gmt":"2022-05-10T08:23:59","slug":"gwc-resizable-panel%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%b4-%ec%82%ac%ec%9d%b4%eb%93%9c-%ed%8c%a8%eb%84%90-%ea%b5%ac%ec%84%b1","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=12258","title":{"rendered":"gwc-resizable-panel\ub97c \uc774\uc6a9\ud574 \uc0ac\uc774\ub4dc \ud328\ub110 \uad6c\uc131"},"content":{"rendered":"<p>\ud06c\uae30 \uc870\uc808\uc774 \uac00\ub2a5\ud55c gwc-resizable-panel \ud0dc\uadf8\ub97c \uc774\uc6a9\ud55c \uc0ac\uc774\ub4dc \ud328\ub110\uc744 \uad6c\uc131\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \uc774\ubbf8\uc9c0\uc5d0\uc11c \uc6b0\uce21\uc758 \ucd08\ub85d\uc0c9\uacfc \ube68\uac04\uc0c9 \uc678\uacfd\uc120\uc744 \ub0b4\uc6a9\uc73c\ub85c \uac00\uc9c0\ub294 \uac83\uc774 \uc774 \uae00\uc758 \uc8fc\uc778\uacf5\uc785\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2022\/05\/gwc-side-panel.png\" alt=\"\" width=\"1365\" height=\"886\" class=\"aligncenter size-full wp-image-12259\" \/><\/p>\n<p>\uc774\uc81c \uc6f9 \uac1c\ubc1c\ub3c4 \ud074\ub798\uc2a4 \uae30\ubc18\uc73c\ub85c \uac1c\ubc1c\uc744 \ud558\ub294\uac8c \ub2f9\uc5f0\ud55c\ub370\uc694. \uc0ac\uc774\ub4dc \ud328\ub110\uc5d0 \ub300\ud55c JS \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nclass SearchResultUI {\r\n    constructor() {\r\n        const domLayout = document.createElement(\"div\");\r\n        domLayout.classList.add(\"search-result-ui\");\r\n\r\n        domLayout.innerHTML = `\r\n            <gwc-resizable-panel resizable-left=\"true\" min-width=\"200\">\r\n                <div class=\"search-result-header\">  \r\n                <\/div>\r\n                <div class=\"search-result-content\">\r\n                <\/div>\r\n            <\/gwc-resizable-panel>\r\n        `;\r\n\r\n        document.body.appendChild(domLayout);\r\n\r\n        GeoServiceWebComponentManager.instance.update();\r\n    }\r\n}\r\n<\/pre>\n<p>7\ubc88\uc758 gwc-resizable-panel\uc758 resizable-left\uc640 min-width\ub294 \uac01\uac01 \ud328\ub110\uc758 \uc67c\ucabd \ubaa8\uc11c\ub9ac\ub97c \uc774\uc6a9\ud574 \ud06c\uae30\ub97c \uc870\uc808\ud560 \uc218 \uc788\uace0, \ud328\ub110\uc758 \uac00\ub85c \ud06c\uae30\ub294 \ucd5c\uc18c 200px\ub97c \uc720\uc9c0\ud574\uc57c \ud55c\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4. min-width \uac12\uc758 \ub2e8\uc704\ub294 px\uc774\uba70 \uac12\uc744 \uc9c0\uc815\ud560 \ub54c\ub294 \ub2e8\uc704\ub97c \uc9c0\uc815\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\/p><\/p>\n<p>\ud574\ub2f9\ub418\ub294 CSS\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n.search-result-ui > gwc-resizable-panel {\r\n    box-shadow:  0 0 2px rgb(0 0 0 \/ 50%), 0 0 10px rgb(0 0 0 \/ 50%);;\r\n    left: calc(100% - 20em);\r\n    right: 0;\r\n    top: 3em;\r\n    width: 20em;\r\n    height: calc(100vh - 3em);\r\n}\r\n\r\n.search-result-ui > gwc-resizable-panel > .search-result-header {\r\n    border: 2px solid green;\r\n    background-color: #202020;\r\n    height: 2.6em;\r\n    display: flex;\r\n}\r\n\r\n.search-result-ui > gwc-resizable-panel > .search-result-content {\r\n    border: 2px solid red;\r\n    min-height: calc(100% - 2.6em);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0.1em;\r\n    background: #0f0f0f;\r\n}\r\n<\/pre>\n<p>\uc911\uc694\ud55c \ubd80\ubd84\uc740 gwc-resizable-panel\uc758 \ucc98\uc74c \ud06c\uae30\ub97c \uc9c0\uc815\ud558\uae30 \uc704\ud574 width\ub97c 20em\uc73c\ub85c \uc9c0\uc815\ud588\ub2e4\uba74 left\uc758 \uac12\uc744 \uc9c0\uc815\ud560 \ub54c \ucd08\uae30 \ud06c\uae30\uc758 width \ub9cc\ud07c \ube7c\uc918\uc57c \ud55c\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4. \ud06c\uae30 \uc870\uc815\uc744 \uc704\ud574 \ubc18\ub4dc\uc2dc \uace0\ub824\ud574\uc57c \ud560 \ubd80\ubd84\uc785\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud06c\uae30 \uc870\uc808\uc774 \uac00\ub2a5\ud55c gwc-resizable-panel \ud0dc\uadf8\ub97c \uc774\uc6a9\ud55c \uc0ac\uc774\ub4dc \ud328\ub110\uc744 \uad6c\uc131\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \uc774\ubbf8\uc9c0\uc5d0\uc11c \uc6b0\uce21\uc758 \ucd08\ub85d\uc0c9\uacfc \ube68\uac04\uc0c9 \uc678\uacfd\uc120\uc744 \ub0b4\uc6a9\uc73c\ub85c \uac00\uc9c0\ub294 \uac83\uc774 \uc774 \uae00\uc758 \uc8fc\uc778\uacf5\uc785\ub2c8\ub2e4. \uc774\uc81c \uc6f9 \uac1c\ubc1c\ub3c4 \ud074\ub798\uc2a4 \uae30\ubc18\uc73c\ub85c \uac1c\ubc1c\uc744 \ud558\ub294\uac8c \ub2f9\uc5f0\ud55c\ub370\uc694. \uc0ac\uc774\ub4dc \ud328\ub110\uc5d0 \ub300\ud55c JS \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. class SearchResultUI { constructor() { const domLayout = document.createElement(&#8220;div&#8221;); domLayout.classList.add(&#8220;search-result-ui&#8221;); domLayout.innerHTML = ` `; document.body.appendChild(domLayout); GeoServiceWebComponentManager.instance.update(); &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=12258\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;gwc-resizable-panel\ub97c \uc774\uc6a9\ud574 \uc0ac\uc774\ub4dc \ud328\ub110 \uad6c\uc131&#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-12258","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\/12258","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=12258"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12258\/revisions"}],"predecessor-version":[{"id":12264,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12258\/revisions\/12264"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12258"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}