{"id":12269,"date":"2022-05-10T17:12:00","date_gmt":"2022-05-10T08:12:00","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=12269"},"modified":"2022-05-10T17:50:20","modified_gmt":"2022-05-10T08:50:20","slug":"gwc-resizable-panel-gwc-vscrollview-%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=12269","title":{"rendered":"gwc-resizable-panel + gwc-vscrollview \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\uba74 \uc774 \ud328\ub110 \uc548\uc5d0 \ub0b4\uc6a9\uc774 \ub9ce\uc544 \uc218\uc9c1\uc73c\ub85c \uc2a4\ud06c\ub864\ud574\uc57c \ud560 \uacbd\uc6b0 gwc-vscrollview \ud0dc\uadf8\ub97c \uc790\uc2dd\uc73c\ub85c \ub450\ub294 \uacbd\uc6b0\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2022\/05\/gwc-resize-vscroll-pannel.jpg\" alt=\"\" width=\"900\" class=\"aligncenter size-full wp-image-12272\" \/><\/p>\n<p>\uc704\uc758 \ud654\uba74 \uc911 \ub178\ub780\uc0c9 \uc601\uc5ed\uc774 gwc-resizable-panel\uc774\uace0 \ucd08\ub85d \uc601\uc5ed\uc774 \uc790\uc2dd\uc778 gwc-vscrollview \uc785\ub2c8\ub2e4.<\/p>\n<p>\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 class=\"roads\">0<\/div>\r\n                    <div class=\"admins\">0<\/div>\r\n                    <div class=\"addrs\">0<\/div>\r\n                    <gwc-toolbutton class=\"remove\" icon=\"images\/delete.svg\"><\/gwc-toolbutton>\r\n                    <gwc-toolbutton class=\"close\" icon=\"images\/close.svg\"><\/gwc-toolbutton>\r\n                <\/div>\r\n                <gwc-vscrollview>\r\n                    <content>\r\n                        <div class=\"search-result-content\"><\/div>\r\n                    <\/content>\r\n                <gwc-vscrollview>\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\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); \/* width \uac12\ub9cc\ud07c \ube7c\uc918\uc57c \ud568 *\/\r\n    right: 0;\r\n    top: 3em;\r\n    width: 20em;\r\n    height: calc(100vh - 3em); \/* \ud328\ub110 \uc704\uc5d0 \uacf5\uac04\uc774 3em \uc784 *\/\r\n    _opacity: 0.8;\r\n}\r\n\r\n.search-result-ui > gwc-resizable-panel > .search-result-header {\r\n    height: 2.6em;\r\n    ...\r\n}\r\n\r\n...\r\n\r\n.search-result-ui > gwc-resizable-panel gwc-vscrollview {\r\n    width: 100%;\r\n    background: rgba(20,20,20,1);\r\n    height: calc(100% - 2.6em); \/* \uc2a4\ud06c\ub864 \uc601\uc5ed \uc704\uc758 \uacf5\uac04\uc774 2.6em \uc784 *\/\r\n}\r\n\r\n.search-result-ui > gwc-resizable-panel .search-result-content {\r\n    padding: 0.4em;\r\n    min-height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0.2em;\r\n}\r\n<\/pre>\n<p>\uc544\ub798\uc758 \uc601\uc0c1\uc740 \uc704\uc758 UI\uac00 \ubc18\uc601\ub41c \uc2e4\uc81c \uad6c\ub3d9 \uc601\uc0c1\uc785\ub2c8\ub2e4. \ud328\ub110\uc5d0 \ub300\ud55c \ud06c\uae30 \uc870\uc808 \ub4f1\uc758 \uc0ac\uc6a9\uc790 \uc778\ud130\ub809\uc158\uc744 \ud30c\uc545\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><center><video controls=\"controls\" width=\"900\" ><source src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2022\/05\/gwc-panel-vscroll.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>\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\uba74 \uc774 \ud328\ub110 \uc548\uc5d0 \ub0b4\uc6a9\uc774 \ub9ce\uc544 \uc218\uc9c1\uc73c\ub85c \uc2a4\ud06c\ub864\ud574\uc57c \ud560 \uacbd\uc6b0 gwc-vscrollview \ud0dc\uadf8\ub97c \uc790\uc2dd\uc73c\ub85c \ub450\ub294 \uacbd\uc6b0\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4. \uc704\uc758 \ud654\uba74 \uc911 \ub178\ub780\uc0c9 \uc601\uc5ed\uc774 gwc-resizable-panel\uc774\uace0 \ucd08\ub85d \uc601\uc5ed\uc774 \uc790\uc2dd\uc778 gwc-vscrollview \uc785\ub2c8\ub2e4. \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 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=12269\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;gwc-resizable-panel + gwc-vscrollview \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":[1],"tags":[],"class_list":["post-12269","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\/12269","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=12269"}],"version-history":[{"count":9,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12269\/revisions"}],"predecessor-version":[{"id":12271,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/12269\/revisions\/12271"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12269"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}