\uc790\uc8fc \uc0ac\uc6a9\ud558\uc9c0\ub294 \uc54a\uc9c0\ub9cc CSS\uc5d0\ub3c4 \ubcc0\uc218\ub97c \uc815\uc758\ud574 \uc7ac\ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \ubb38\ubc95\uc744 \uc81c\uacf5\ud558\ub294\ub370 :root\ub97c \uc815\uc758\ud558\uace0 \uc774 \uc548\uc5d0 \uc6d0\ud558\ub294 \uac12\uc744 \ub123\uc5b4 \uc815\uc758\ud558\uace4 \ud588\uc2b5\ub2c8\ub2e4. CSS\uc5d0 \ub300\ud55c \ub354 \ub192\uc740 \uc218\uc900\uc758 \uacbd\ud5d8 \ub9ce\uc740 \uac1c\ubc1c\uc790\ub294 \uc774\ub7f0 CSS\uc5d0\uc11c\uc758 \ubcc0\uc218 \uc815\uc758\ub97c \ubc18\ub4dc\uc2dc \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uc0c1\ud669\uc744 \ub9cc\ub098\uac8c \ub429\ub2c8\ub2e4. \uc774\ub7f0 CSS\uc5d0\uc11c\uc758 \ubcc0\uc218\ub97c \uc815\uc758\ud558\ub294 \uc880\ub354 \ud45c\uc900\ud654\ub41c \ubb38\ubc95\uc774 \uc788\ub294\ub370 \uadf8\uac83\uc740 @property\uc785\ub2c8\ub2e4. \ud45c\uc900\ud654\uc758 \uc758\ubbf8\ub294 \uc5c4\uaca9\ud568\uc774\ub77c\ub294 \uc870\uac74\uc744 \ub2ec\uc544 \uc2e4\uc218\ub97c \uc904\uc5ec \uacac\uace0\ud55c \ucf54\ub4dc\ub97c \uc791\uc131\ud558\ub3c4\ub85d \ud558\ub294 \uc7a5\uce58\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc5ec\ud2bc \uc800\ub294 –a\ub77c\ub294 \uc774\ub984\uc758 \ubcc0\uc218(\ud504\ub85c\ud37c\ud2f0)\ub97c \ub2e4\uc74c\ucc98\ub7fc \uc815\uc758\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n@property --a {\r\n syntax: \"<angle>\"; \/* https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@property\/syntax *\/\r\n inherits: false; \r\n initial-value: 0turn;\r\n}\r\n<\/pre>\n\ud504\ub85c\ud37c\ud2f0\uac00 \uac00\uc9c0\ub294 \ud0c0\uc785(syntax)\uc640 \ucd08\uae30\uac12\uc744 \uc9c0\uc815\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7fc \uc774 \ud504\ub85c\ud37c\ud2f0\ub97c \uc0ac\uc6a9\ud558\ub294 \ucf54\ub4dc\ub97c \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n.box::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-conic-gradient(from var(--a), #f00, #ff0, #fff, #0ff, #f0f, #f00);\r\n border-radius: 25px;\r\n animation: rotating 4s linear infinite;\r\n}\r\n\r\n@keyframes rotating {\r\n 0% {\r\n --a: 0turn;\r\n }\r\n 100% {\r\n --a: -4turn;\r\n }\r\n}\r\n<\/pre>\n\uba85\ud655\ud558\uace0 \uc9c1\uad00\uc801\uc785\ub2c8\ub2e4.<\/p>\n
\uc2e4\uc81c \uc704\uc758 \ucf54\ub4dc\uac00 \uc801\uc6a9\ud55c \uc608\uc81c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Document<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n background-color: #222;\r\n }\r\n\r\n .box {\r\n position: relative;\r\n width: 400px;\r\n height: 300px;\r\n }\r\n\r\n .box span {\r\n color: white;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 2.5rem;\r\n font-weight: bold;\r\n }\r\n\r\n .box::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-conic-gradient(from var(--a), #f00, #ff0, #fff, #0ff, #f0f, #f00);\r\n border-radius: 25px;\r\n animation: rotating 4s linear infinite;\r\n }\r\n\r\n .box::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-conic-gradient(from var(--a), #f00, #ff0, #fff, #0ff, #f0f, #f00);\r\n border-radius: 25px;\r\n animation: rotating 4s linear infinite;\r\n filter: blur(40px);\r\n opacity: 0.75;\r\n }\r\n\r\n .box span {\r\n position: absolute;\r\n inset: 4px;\r\n background: #222;\r\n border-radius: 22px;\r\n z-index: 1;\r\n }\r\n\r\n @property --a {\r\n syntax: '<angle>'; \/* https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@property\/syntax *\/\r\n inherits: false; \r\n initial-value: 0turn;\r\n }\r\n\r\n @keyframes rotating {\r\n 0% {\r\n --a: 0turn;\r\n }\r\n 100% {\r\n --a: -4turn;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"box\">\r\n <span>GIS DEVELOPER<\/span>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n\uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n