{"id":10924,"date":"2021-03-01T08:07:30","date_gmt":"2021-02-28T23:07:30","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=10924"},"modified":"2021-03-01T08:08:45","modified_gmt":"2021-02-28T23:08:45","slug":"backdrop-filter%eb%a1%9c-%eb%b0%98%ed%88%ac%eb%aa%85-%ed%9a%a8%ea%b3%bc-%ec%a3%bc%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=10924","title":{"rendered":"backdrop-filter\ub85c \ubc18\ud22c\uba85 \ud6a8\uacfc \uc8fc\uae30"},"content":{"rendered":"<p>\uc720\ub9ac \ud6a8\uacfc\ub294 \ud604\ub300\uc801\uc778 UI\ub97c \uac1c\ubc1c\ud558\ub294\ub370 \uc0ac\uc6a9\ud558\ub294 \ud6a8\uacfc \uc911 \ub300\ud45c\uc801\uc778 \uae30\uc220 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc544\ub798\uc640 \uac19\uc740 \uacb0\uacfc\ub97c \uc5bb\uace0\uc790 \ud569\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2021\/03\/drop-filter.png\" alt=\"\" width=\"800\"  class=\"aligncenter size-full wp-image-10925\" \/><\/p>\n<p>\uba3c\uc800 DOM \uc694\uc18c\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<div class=\"container\">\r\n    <div class=\"left-circle\"><\/div>\r\n    <div class=\"center-box\"><\/div>\r\n    <div class=\"right-circle\"><\/div>\r\n<\/div>\r\n<\/pre>\n<p>\ub2e4\uc74c\uc740 \uc2a4\ud0c0\uc77c \uc694\uc18c\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\r\n* {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n    height: 100vh;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.container {\r\n    width: 700px;\r\n    height: 250px;\r\n    position: relative;\r\n}\r\n\r\ndiv div {\r\n    position: absolute;\r\n    display: inline-block;\r\n}\r\n\r\n.left-circle {\r\n    left: 0px;\r\n    width: 250px;\r\n    height: 250px;\r\n    border-radius: 50%;\r\n    background: linear-gradient(#f9d924, #ff2c24)\r\n}\r\n\r\n.right-circle {\r\n    right: 0px;\r\n    width: 250px;\r\n    height: 250px;\r\n    border-radius: 50%;\r\n    background: linear-gradient(#01d6ff, #0f24f9)\r\n}\r\n\r\n.center-box {\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 350px;\r\n    height: 250px;\r\n    border-radius: 45px;\r\n    z-index: 1;\r\n    backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(0,0,0,0.1);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\uc720\ub9ac \ud6a8\uacfc\ub294 \ud604\ub300\uc801\uc778 UI\ub97c \uac1c\ubc1c\ud558\ub294\ub370 \uc0ac\uc6a9\ud558\ub294 \ud6a8\uacfc \uc911 \ub300\ud45c\uc801\uc778 \uae30\uc220 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc544\ub798\uc640 \uac19\uc740 \uacb0\uacfc\ub97c \uc5bb\uace0\uc790 \ud569\ub2c8\ub2e4. \uba3c\uc800 DOM \uc694\uc18c\uc785\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc2a4\ud0c0\uc77c \uc694\uc18c\uc785\ub2c8\ub2e4. * { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; } .container { width: 700px; height: 250px; position: relative; } div div { &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=10924\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;backdrop-filter\ub85c \ubc18\ud22c\uba85 \ud6a8\uacfc \uc8fc\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":[138],"tags":[],"class_list":["post-10924","post","type-post","status-publish","format-standard","hentry","category-css-"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10924","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=10924"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10924\/revisions"}],"predecessor-version":[{"id":10929,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10924\/revisions\/10929"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10924"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}