{"id":16019,"date":"2025-05-12T10:39:56","date_gmt":"2025-05-12T01:39:56","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16019"},"modified":"2025-05-12T10:41:15","modified_gmt":"2025-05-12T01:41:15","slug":"css%ec%97%90%ec%84%9c%ec%9d%98-%ea%b4%91%ec%9b%90-%ed%9a%a8%ea%b3%bc","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16019","title":{"rendered":"CSS\uc5d0\uc11c\uc758 \uad11\uc6d0 \ud6a8\uacfc"},"content":{"rendered":"<p>DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\n<div class=\"loader\">\r\n  <div class=\"circle\"><span><\/span><\/div>\r\n<\/div>\r\n<\/pre>\n<p>CSS\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\r\nbody {\r\n  background: #bdcddb;\r\n}\r\n\r\n.loader {\r\n  position: relative;\r\n  width: 300px;\r\n  height: 300px;\r\n}\r\n\r\n.circle {\r\n  position: absolute;\r\n  inset: 35px;\r\n  background-color: #acbaca;\r\n  border-radius: 50%;\r\n  box-shadow: 5px 5px 15px 0 #152b4a66,\r\n    inset 5px 5px 5px rgba(255,255,255,0.55),\r\n    -6px -6px 10px rgba(255,255,255,1);\r\n}\r\n\r\n.circle::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 4px;\r\n  background: linear-gradient(#2196f3, #e91e63);\r\n  border-radius: 50%;\r\n  animation: animate 2s linear infinite;\r\n}\r\n\r\n@keyframes animate {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n\r\n  100% {\r\n    transform: rotate(350deg);\r\n  }\r\n}\r\n\r\n.circle::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 35px;\r\n  background: #acbaca;\r\n  border-radius: 50%;\r\n}\r\n\r\n.circle span {\r\n  position: absolute;\r\n  inset: 4px;\r\n  background: linear-gradient(#2196f3, #e91e63);\r\n  border-radius: 50%;\r\n  animation: animate 2s linear infinite;\r\n  filter: blur(20px);\r\n  z-index: 1000;\r\n  \/* mix-blend-mode: color-dodge; *\/\r\n  mix-blend-mode: plus-lighter;\r\n}\r\n\r\n.circle span::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 40px;\r\n  background: #bdcbdb;\r\n  border-radius: 50%;\r\n  animation: animate 2s linear infinite;\r\n  z-index: 1000;\r\n}\r\n<\/pre>\n<p>\uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/05\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2025-05-12-10.37.19.png\" alt=\"\" width=\"500\" class=\"aligncenter size-full wp-image-16022\" \/><\/p>\n<p>CSS\uc758 67\ubc88\uc9f8 \uc904\uc774 \ud575\uc2ec\uc778\ub370, \ub9cc\uc57d \ud574\ub2f9 \ucf54\ub4dc\ub97c \uc81c\uac70\ud558\uba74 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/05\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2025-05-12-10.38.18.png\" alt=\"\" width=\"500\" class=\"aligncenter size-full wp-image-16024\" \/><\/p>\n<p>mix-blend-mode\uc758 \uac12\uc778 plus-lighter\ub294 \uc544\uc9c1 \uacf5\uc2dd\uc801\uc73c\ub85c \ubb38\uc11c\ud654\uac00 \ub418\uc9c0 \uc54a\uc558\uace0 \ub9cc\uc57d \uc791\ub3d9\ud558\uc9c0 \uc54a\ub294\ub2e4\uba74 color-dodge\ub97c \uc0ac\uc6a9\ud558\uae30 \ubc14\ub780\ub2e4. \ucc38\uace0\ub85c color-dodge\ubcf4\ub2e4 plus-lighter\uac00 \uad11\uc6d0\uc758 \ud45c\ud604\uc5d0 \ub354\uc6b1 \uc801\ud569\ud558\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>DOM \uad6c\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4. CSS\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4. body { background: #bdcddb; } .loader { position: relative; width: 300px; height: 300px; } .circle { position: absolute; inset: 35px; background-color: #acbaca; border-radius: 50%; box-shadow: 5px 5px 15px 0 #152b4a66, inset 5px 5px 5px rgba(255,255,255,0.55), -6px -6px 10px rgba(255,255,255,1); } .circle::before { content: &#8221;; position: absolute; inset: 4px; &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=16019\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;CSS\uc5d0\uc11c\uc758 \uad11\uc6d0 \ud6a8\uacfc&#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-16019","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\/16019","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=16019"}],"version-history":[{"count":6,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16019\/revisions"}],"predecessor-version":[{"id":16028,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16019\/revisions\/16028"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16019"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}