{"id":718,"date":"2023-04-28T10:02:40","date_gmt":"2023-04-28T01:02:40","guid":{"rendered":"https:\/\/blog.mydepot.kr\/?p=718"},"modified":"2023-04-28T10:02:41","modified_gmt":"2023-04-28T01:02:41","slug":"scss-%eb%a7%88%ec%9a%b0%ec%8a%a4-%ec%98%a4%eb%b2%84-%ec%8b%9c-%ec%b1%84%ec%9b%8c%ec%a7%80%eb%8a%94-%ed%85%8c%eb%91%90%eb%a6%ac-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98-%ed%9a%a8%ea%b3%bc","status":"publish","type":"post","link":"https:\/\/blog.mydepot.kr\/?p=718","title":{"rendered":"[SCSS] \ub9c8\uc6b0\uc2a4 \uc624\ubc84 \uc2dc \ucc44\uc6cc\uc9c0\ub294 \ud14c\ub450\ub9ac \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc"},"content":{"rendered":"\n<p><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.hoverBtn {\n      $borderWid: 2px;\n      $btnBakColor: #23193b;\n\n      position: relative;\n      overflow: hidden;      \n      background-color: $btnBakColor;\n\n      &amp;:before {\n            content: &quot;&quot;;\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            top: 0;\n            left: 0;\n            border-width: $borderWid;\n            border-style: solid;\n            border-color: white;\n            box-sizing: border-box;\n      }\n\n      &amp;:after {\n            content: &quot;&quot;;\n            position: absolute;\n            top: calc(-1 * #{$borderWid});\n            left: calc(-1 * #{$borderWid});\n            bottom: calc(-1 * #{$borderWid});\n            right: calc(-1 * #{$borderWid});\n            display: inline-block;\n            background: radial-gradient(transparent 60%, $btnBakColor 40%);\n            clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%);\n            transition: all .2s ease-in-out;\n      }\n\n      &amp;:hover {\n            &amp;:after {\n                  clip-path: polygon(90% 0, 100% 0, 100% 10%, 10% 100%, 0 100%, 0 90%);\n            }\n      }\n}\n<\/pre><\/div>\n\n\n<p>\uac1c\ubc1c\ud558\ub294 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ub514\uc790\uc774\ub108\uac00 \uc694\uccad\ud574\uc11c \ub9cc\ub4e4\uac8c \ub418\uc5c8\ub294\ub370,<\/p>\n\n\n\n<p>\ucd94\uac00\ub85c \uc0dd\uae30\ub294 \uc694\uc18c\ub098 CSS \ub77c\uc778\uc744 \ucd5c\uc18c\ud654 \ud574\uc57c \ud588\ub2e4.<\/p>\n\n\n\n<p>\uadf8\ub798\uc11c \uc628\ub77c\uc778\uc5d0 \ub098\ub3c4\ub294 \ud301\ub4e4\uc744 \uc4f0\uc9c0 \uc54a\uace0 \uc57d\uac04 \uce58\ud2b8\uc131? \uc73c\ub85c \ub9cc\ub4e4\uc5c8\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>before\ub85c \ud14c\ub450\ub9ac \ub9cc\ub4e4\uae30<\/li>\n\n\n\n<li>after\ub85c \uc77c\ub2e8 \ub36e\uace0<\/li>\n\n\n\n<li>\uac00\uc6b4\ub370\ub294 \ubcf4\uc774\uac8c \ud558\uae30 \uc704\ud574 \ubc30\uacbd\uc0c9\uc744 gradient\ub85c \ucc44\uc6c0<\/li>\n\n\n\n<li>\uadf8\ub9ac\uace0 clip-path\ub85c \uc798\ub77c\ub0b4\uace0<\/li>\n\n\n\n<li>\ub9c8\uc6b0\uc2a4 \uc624\ubc84\uc2dc \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \uc8fc\uae30 \uc704\ud574 clip-path \uc0ac\uc774\uc988 \uc870\uc808<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\uac1c\ubc1c\ud558\ub294 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c \ub514\uc790\uc774\ub108\uac00 \uc694\uccad\ud574\uc11c \ub9cc\ub4e4\uac8c \ub418\uc5c8\ub294\ub370, \ucd94\uac00\ub85c \uc0dd\uae30\ub294 \uc694\uc18c\ub098 CSS \ub77c\uc778\uc744 \ucd5c\uc18c\ud654 \ud574\uc57c \ud588\ub2e4. \uadf8\ub798\uc11c \uc628\ub77c\uc778\uc5d0 \ub098\ub3c4\ub294 \ud301\ub4e4\uc744 \uc4f0\uc9c0 \uc54a\uace0 \uc57d\uac04 \uce58\ud2b8\uc131? \uc73c\ub85c \ub9cc\ub4e4\uc5c8\ub2e4.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[133],"tags":[134,135,369,370,371,372],"class_list":["post-718","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-scss","tag-369","tag-370","tag-371","tag-cllip"],"modified_by":"\ucc38\ube5b\ubc14\ub2e4","_links":{"self":[{"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/posts\/718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=718"}],"version-history":[{"count":1,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/posts\/718\/revisions"}],"predecessor-version":[{"id":719,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=\/wp\/v2\/posts\/718\/revisions\/719"}],"wp:attachment":[{"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mydepot.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}