{"id":10985,"date":"2021-03-18T04:23:53","date_gmt":"2021-03-17T19:23:53","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=10985"},"modified":"2021-03-18T04:36:18","modified_gmt":"2021-03-17T19:36:18","slug":"%ec%97%b0%ea%b8%b0%ec%b2%98%eb%9f%bc-%ec%82%ac%eb%9d%bc%ec%a7%80%eb%8a%94-%ed%85%8d%ec%8a%a4%ed%8a%b8-%ed%9a%a8%ea%b3%bc","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=10985","title":{"rendered":"\uc5f0\uae30\ucc98\ub7fc \uc0ac\ub77c\uc9c0\ub294 \ud14d\uc2a4\ud2b8 \ud6a8\uacfc"},"content":{"rendered":"

\uba3c\uc800 \uc774 \uae00\uc758 \ub0b4\uc6a9\uc740 Online Tutorials<\/a>\ub77c\ub294 \uc720\ud29c\ube0c \ucc44\ub110\uc5d0 \uc62c\ub77c\uc628 \ub0b4\uc6a9\uc744 \ubcf4\uace0 \uc791\uc131\ud55c \uae00\uc785\ub2c8\ub2e4. \uc644\uc804\uc774 \uac19\uc9c0\ub294 \uc54a\uc73c\ub098 \uac70\uc758 \ub300\ubd80\ubd84\uc758 \uae30\uc220\uc801\uc778 \ub0b4\uc6a9\uc740 \uc774 \ucc44\ub110\uc758 \ub0b4\uc6a9\uc744 \ud1a0\ub300\ub85c \ud569\ub2c8\ub2e4. \ub9e4\uc6b0 \uc88b\uc740 \ucc44\ub110\uc774\ubbc0\ub85c \uc6f9 \uac1c\ubc1c\uc790\ub77c\uba74 \ucc38\uace0\ud574 \ubcf4\uc2dc\uba74 \uc88b\uc744 \uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\ub9cc\ub4e4\uc5b4\uc9c4 \ucd5c\uc885 \uacb0\uacfc\ub294 \uc544\ub798 \uc601\uc0c1\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n        <link rel=\"stylesheet\" href=\"_style.css\">\r\n        <script type=\"module\" src=\"_app.js\" defer><\/script>\r\n    <\/head>\r\n    <body>\r\n        <div>\r\n            <p class=text>\uc0b0\ubaa8\ud241\uc774\ub97c \ub3cc\uc544 \ub17c\uac00 \uc678\ub534 \uc6b0\ubb3c\uc744 \ud640\ub85c \ucc3e\uc544\uac00\uc120 \uac00\ub9cc\ud788 \ub4e4\uc5ec\ub2e4\ubd05\ub2c8\ub2e4.\uc6b0\ubb3c \uc18d\uc5d0\ub294 \ub2ec\uc774 \ubc1d\uace0 \uad6c\ub984\uc774 \ud750\ub974\uace0 \ud558\ub298\uc774 \ud3bc\uce58\uace0 \ud30c\uc544\ub780 \ubc14\ub78c\uc774 \ubd88\uace0 \uac00\uc744\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ud55c \uc0ac\ub098\uc774\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc5b4\uca50\uc9c0 \uadf8 \uc0ac\ub098\uc774\uac00 \ubbf8\uc6cc\uc838 \ub3cc\uc544\uac11\ub2c8\ub2e4. \ub3cc\uc544\uac00\ub2e4 \uc0dd\uac01\ud558\ub2c8 \uadf8 \uc0ac\ub098\uc774\uac00 \uac00\uc5fe\uc5b4\uc9d1\ub2c8\ub2e4. \ub3c4\ub85c \uac00 \ub4e4\uc5ec\ub2e4\ubcf4\ub2c8 \uc0ac\ub098\uc774\ub294 \uadf8\ub300\ub85c \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc2dc \uadf8 \uc0ac\ub098\uc774\uac00 \ubbf8\uc6cc\uc838 \ub3cc\uc544\uac11\ub2c8\ub2e4. \ub3cc\uc544\uac00\ub2e4 \uc0dd\uac01\ud558\ub2c8 \uadf8 \uc0ac\ub098\uc774\uac00 \uadf8\ub9ac\uc6cc\uc9d1\ub2c8\ub2e4. \uc6b0\ubb3c \uc18d\uc5d0\ub294 \ub2ec\uc774 \ubc1d\uace0 \uad6c\ub984\uc774 \ud750\ub974\uace0 \ud558\ub298\uc774 \ud3bc\uce58\uace0 \ud30c\uc544\ub780 \ubc14\ub78c\uc774 \ubd88\uace0 \uac00\uc744\uc774 \uc788\uace0 \ucd94\uc5b5\ucc98\ub7fc \uc0ac\ub098\uc774\uac00 \uc788\uc2b5\ub2c8\ub2e4.| \uc724\ub3d9\uc8fc\uc758 \uc790\ud654\uc0c1<\/p>\r\n        <\/div>\r\n    <\/body>\r\n<\/html> \r\n<\/pre>\n
\ub2e4\uc74c\uc740 CSS\uc758 \uc77c\ubd80\uc785\ub2c8\ub2e4.<\/p>\n
\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n}\r\n\r\ndiv {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    min-height: 100vh;\r\n    background: #000;\r\n}\r\n\r\ndiv .text {\r\n    color: #fff;\r\n    margin: 100px;\r\n    user-select: none;\r\n    font-size: 1.5em;\r\n}\r\n\r\n<\/pre>\n
\uc774\uc81c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \uc791\uc131\ud558\ub294\ub370\uc694. \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nconst text = document.querySelector(\"div .text\");\r\ntext.innerHTML = text.textContent.replace(\/\\S\/g, \"$&<\/span>\");\r\n\r\ndocument.querySelectorAll(\"div .text span\").forEach((letter) => {\r\n    letter.addEventListener(\"mouseover\", () => {\r\n        letter.classList.add(\"active\");\r\n    });\r\n});\r\n<\/pre>\n
\ucf54\ub4dc\uc758 \ucee8\uc149\uc740.. \uba3c\uc800 \uae00\uc790 \ud558\ub098\ud558\ub098\ub97c span \uc694\uc18c\ub85c \ub9cc\ub4e4\uace0, \ub9c8\uc6b0\uc2a4\uc758 \ucee4\uc11c\uac00 span \uc694\uc18c\uc5d0 \uc62c\ub77c\uac00\uba74 \ud574\ub2f9 \uc694\uc18c\uc5d0 active \ud074\ub798\uc2a4\ub97c \uc9c0\uc815\ud558\ub294 \uac83\uc774 \uc804\ubd80\uc785\ub2c8\ub2e4. \uc774\uc81c span \uc694\uc18c\uc640 active \ud074\ub798\uc2a4\uc5d0 \ub300\ud55c CSS\ub97c \uc0b4\ud3b4\ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\ndiv .text span {\r\n    padding: 2px;\r\n    display: inline-block;\r\n}\r\n\r\ndiv .text span.active {\r\n    animation: smoke 5s linear forwards;\r\n    transform-origin: bottom;\r\n}\r\n\r\n@keyframes smoke {\r\n    0% {\r\n        pointer-events: none;\r\n        opacity: 1;\r\n        z-index: -1;\r\n    }\r\n    50% {\r\n        opacity: 1;\r\n    }\r\n    100% {\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        filter: blur(20px);\r\n        transform: translateX(100px) translateY(-300px) rotate(720deg) scale(6);\r\n    }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
\uba3c\uc800 \uc774 \uae00\uc758 \ub0b4\uc6a9\uc740 Online Tutorials\ub77c\ub294 \uc720\ud29c\ube0c \ucc44\ub110\uc5d0 \uc62c\ub77c\uc628 \ub0b4\uc6a9\uc744 \ubcf4\uace0 \uc791\uc131\ud55c \uae00\uc785\ub2c8\ub2e4. \uc644\uc804\uc774 \uac19\uc9c0\ub294 \uc54a\uc73c\ub098 \uac70\uc758 \ub300\ubd80\ubd84\uc758 \uae30\uc220\uc801\uc778 \ub0b4\uc6a9\uc740 \uc774 \ucc44\ub110\uc758 \ub0b4\uc6a9\uc744 \ud1a0\ub300\ub85c \ud569\ub2c8\ub2e4. \ub9e4\uc6b0 \uc88b\uc740 \ucc44\ub110\uc774\ubbc0\ub85c \uc6f9 \uac1c\ubc1c\uc790\ub77c\uba74 \ucc38\uace0\ud574 \ubcf4\uc2dc\uba74 \uc88b\uc744 \uac83 \uac19\uc2b5\ub2c8\ub2e4. \ub9cc\ub4e4\uc5b4\uc9c4 \ucd5c\uc885 \uacb0\uacfc\ub294 \uc544\ub798 \uc601\uc0c1\uacfc \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uc704\uc758 \uacb0\uacfc\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uba74.. \uba3c\uc800 \uc544\ub798\ucc98\ub7fc HTML\ub85c \uad6c\uc870\ub97c \uc7a1\uc2b5\ub2c8\ub2e4. … <\/p>\n
\ub354 \ubcf4\uae30 “\uc5f0\uae30\ucc98\ub7fc \uc0ac\ub77c\uc9c0\ub294 \ud14d\uc2a4\ud2b8 \ud6a8\uacfc”<\/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-10985","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\/10985","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=10985"}],"version-history":[{"count":5,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10985\/revisions"}],"predecessor-version":[{"id":10991,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10985\/revisions\/10991"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10985"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}