{"id":21957,"date":"2022-11-09T14:13:09","date_gmt":"2022-11-09T05:13:09","guid":{"rendered":"http:\/\/13.125.82.244\/?p=21957"},"modified":"2022-11-09T14:13:42","modified_gmt":"2022-11-09T05:13:42","slug":"css-checkboxes-examples","status":"publish","type":"post","link":"https:\/\/icunow.co.kr\/css-checkboxes-examples\/","title":{"rendered":"\ub2e4\uc591\ud55c \uc778\ud130\ub799\uc158\uc774 \ud3ec\ud568\ub41c \uccb4\ud06c\ubc15\uc2a4\uc640 \ud1a0\uae00 \ub4f1\uc744 \uc0b4\ud3b4\ubcfc \uc218 \uc788\ub294 \uacf3!"},"content":{"rendered":"\n<p style=\"font-size:16px\">&#8211;<\/p>\n\n\n\n<p style=\"font-size:16px\">\uc694\uc998\uc740 \ub514\uc790\uc778 \uad6c\uc131 \uc694\uc18c\ub97c \ud655\uc778\ud560 \ub54c, \ubb34\uc870\uac74 \ucc98\uc74c\ubd80\ud130 \uc9c1\uc811 \uc81c\uc791\ud558\uae30 \ubcf4\ub2e4 \uc798 \ub9cc\ub4e4\uc5b4\uc9c4 \uc0ac\ub840\ub97c \ucc3e\uc544 \ud65c\uc6a9 \uac00\ub2a5 \uc5ec\ubd80\ub97c \uc0b4\ud3b4\ubcf4\uac8c \ub418\ub294 \uac83 \uac19\uc544\uc694. \uadf8\ub9cc\ud07c \ub2e4\uc591\ud55c \uc0d8\ud50c\uc774 \uc81c\uacf5\ub418\uace0 \uc788\uace0, \uc870\uae08\ub9cc \uac80\uc0c9\ud574\ub3c4 \uadf8\ub7f4\ub4ef\ud55c \uacb0\uacfc\ub97c \uc27d\uac8c \ucc3e\uc544\ubcfc \uc218 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. <strong>\uc624\ub298 \uc18c\uac1c\ud560 \uc11c\ube44\uc2a4 \uc5ed\uc2dc \uac19\uc740 \ub9e5\ub77d\uc5d0\uc11c, \ub2e4\uc591\ud55c \uc11c\ube44\uc2a4\uc5d0 \uae30\ubcf8\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \uccb4\ud06c\ubc15\uc2a4\ub098 \ud1a0\uae00 \ub4f1\uc744 \uacb0\uacfc\ubb3c\uacfc CSS\ub85c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/strong> \uc6d0\ud558\ub294 \uc0d8\ud50c\uc774 \uc788\ub2e4\uba74 CSS\ub85c \ubcf5\uc0ac\ud574 \uc6f9\uc0ac\uc774\ud2b8 \ub0b4 \ubc14\ub85c \uc801\uc6a9\ud558\uac70\ub098 \uc785\ub9db\uc5d0 \ub530\ub77c \uc218\uc815\ud574 \ud65c\uc6a9\ud560 \uc218 \uc788\uc5b4\uc694. <\/p>\n\n\n\n<p style=\"font-size:16px\">&#8211;<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/drive.google.com\/uc?id=1dI5cfJ3O6QB_r5y3aFneAGiFymFuTttU\" alt=\"\"\/><\/figure>\n\n\n\n<p style=\"font-size:16px\">\uc11c\ube44\uc2a4\ub294 \ud558\ub098\uc758 \ud654\uba74\uc73c\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uc73c\uba70 CSS\ub85c \uc791\uc5c5\ud55c \ub2e4\uc591\ud55c \uc885\ub958\uc758 \ubc84\ud2bc, \ud1a0\uae00 \uc0d8\ud50c\uc774 \ub4f1\ub85d\ub418\uc5b4 \uc788\uc5b4\uc694. \uccb4\ud06c, ON\/OFF \ub4f1\uc774 \uc5b4\ub5bb\uac8c \uc791\ub3d9\ub418\ub294\uc9c0 \uc608\uc81c\ub97c \uc9c1\uc811 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. <span style=\"text-decoration: underline;\">\uac00\uc7a5 \ud070 \uc7a5\uc810\uc740 \uc77c\ubc18\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \uc0d8\ud50c\uc744 \uae30\uc900\uc73c\ub85c, \uac1c\uc131 \uc788\ub294 \uc0d8\ud50c\ub3c4 \ud568\uaed8 \uc81c\uacf5\ud574 \uc120\ud0dd\uc9c0\uac00 \ub2e4\ucc44\ub86d\uac8c \uc81c\uacf5\ub41c\ub2e4\ub294 \uc810<\/span>\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/drive.google.com\/uc?id=18tgL8BjzbaXTQ7u5YCEk9gh0WTC6nIWT\" alt=\"\"\/><\/figure>\n\n\n\n<p style=\"font-size:16px\">\uae30\ubcf8\uc801\uc778 \ub0b4\uc6a9\ub9cc \uc788\uc5b4\ub3c4 \ubcf5\uc0ac \ud6c4 \uc27d\uac8c \ud65c\uc6a9\ud560 \uc218 \uc788\uc5b4 \ud3b8\ub9ac\ud558\uc9c0 \uc54a\uc744\uae4c \uc2f6\uc5c8\ub294\ub370, \uc870\uae08\uc529 \ub2e4\ub974\uac8c \uad6c\ud604\ud574 \uacf5\uac1c\ub41c \ub0b4\uc6a9\ub4e4\uc774 \ub9ce\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\uc5b4 \uac19\uc740 \uad6c\uc131 \uc694\uc18c\ub77c \ud574\ub3c4 \ubcf4\uace0 \uc120\ud0dd\ud558\ub294 \uc990\uac70\uc6c0\uc774 \uc788\uc5b4\uc694. \ud2b9\uc815 \ub300\uc0c1\uc744 \uc120\ud0dd\ud558\uba74 \uc67c\ucabd\uc5d0 &#8216;Copy&#8217; \ubc84\ud2bc\uc774 \ub098\uc624\ub294\ub370, \ud074\ub9ad \uc2dc CSS\ub85c \ubc14\ub85c \ubcf5\uc0ac\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4. <\/p>\n\n\n\n<div class=\"checkbox-wrapper-12\">\n  <div class=\"cbx\">\n    <input id=\"cbx-12\" type=\"checkbox\"\/>\n    <label for=\"cbx-12\"><\/label>\n    <svg width=\"15\" height=\"14\" viewbox=\"0 0 15 14\" fill=\"none\">\n      <path d=\"M2 8.36364L6.23077 12L13 2\"><\/path>\n    <\/svg>\n  <\/div>\n  <!-- Gooey-->\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\">\n    <defs>\n      <filter id=\"goo-12\">\n        <fegaussianblur in=\"SourceGraphic\" stddeviation=\"4\" result=\"blur\"><\/fegaussianblur>\n        <fecolormatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -7\" result=\"goo-12\"><\/fecolormatrix>\n        <feblend in=\"SourceGraphic\" in2=\"goo-12\"><\/feblend>\n      <\/filter>\n    <\/defs>\n  <\/svg>\n<\/div>\n\n<style>\n  .checkbox-wrapper-12 {\n    position: relative;\n  }\n  .checkbox-wrapper-12 > svg {\n    position: absolute;\n    top: -130%;\n    left: -170%;\n    width: 110px;\n    pointer-events: none;\n  }\n  .checkbox-wrapper-12 * {\n    box-sizing: border-box;\n  }\n  .checkbox-wrapper-12 input[type=\"checkbox\"] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    -webkit-tap-highlight-color: transparent;\n    cursor: pointer;\n    margin: 0;\n  }\n  .checkbox-wrapper-12 input[type=\"checkbox\"]:focus {\n    outline: 0;\n  }\n  .checkbox-wrapper-12 .cbx {\n    width: 24px;\n    height: 24px;\n    top: calc(50vh - 12px);\n    left: calc(50vw - 12px);\n  }\n  .checkbox-wrapper-12 .cbx input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 24px;\n    height: 24px;\n    border: 2px solid #bfbfc0;\n    border-radius: 50%;\n  }\n  .checkbox-wrapper-12 .cbx label {\n    width: 24px;\n    height: 24px;\n    background: none;\n    border-radius: 50%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    -webkit-filter: url(\"#goo-12\");\n    filter: url(\"#goo-12\");\n    transform: trasnlate3d(0, 0, 0);\n    pointer-events: none;\n  }\n  .checkbox-wrapper-12 .cbx svg {\n    position: absolute;\n    top: 5px;\n    left: 4px;\n    z-index: 1;\n    pointer-events: none;\n  }\n  .checkbox-wrapper-12 .cbx svg path {\n    stroke: #fff;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 19;\n    stroke-dashoffset: 19;\n    transition: stroke-dashoffset 0.3s ease;\n    transition-delay: 0.2s;\n  }\n  .checkbox-wrapper-12 .cbx input:checked + label {\n    animation: splash-12 0.6s ease forwards;\n  }\n  .checkbox-wrapper-12 .cbx input:checked + label + svg path {\n    stroke-dashoffset: 0;\n  }\n  @-moz-keyframes splash-12 {\n    40% {\n      background: #866efb;\n      box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;\n    }\n    100% {\n      background: #866efb;\n      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n    }\n  }\n  @-webkit-keyframes splash-12 {\n    40% {\n      background: #866efb;\n      box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;\n    }\n    100% {\n      background: #866efb;\n      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n    }\n  }\n  @-o-keyframes splash-12 {\n    40% {\n      background: #866efb;\n      box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;\n    }\n    100% {\n      background: #866efb;\n      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n    }\n  }\n  @keyframes splash-12 {\n    40% {\n      background: #866efb;\n      box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb;\n    }\n    100% {\n      background: #866efb;\n      box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;\n    }\n  }\n<\/style>\n\n<div class=\"checkbox-wrapper-11\">\n  <input id=\"02-11\" type=\"checkbox\" name=\"r\" value=\"2\">\n  <label for=\"02-11\">To-do<\/label>\n<\/div>\n\n<style>\n  .checkbox-wrapper-11 {\n    --text: #414856;\n    --check: #4F29F0;\n    --disabled: #C3C8DE;\n    --border-radius: 10px;\n    border-radius: var(--border-radius);\n    position: relative;\n    padding: 5px;\n    display: grid;\n    grid-template-columns: 30px auto;\n    align-items: center;\n  }\n  .checkbox-wrapper-11 label {\n    color: var(--text);\n    position: relative;\n    cursor: pointer;\n    display: grid;\n    align-items: center;\n    width: -webkit-fit-content;\n    width: -moz-fit-content;\n    width: fit-content;\n    transition: color 0.3s ease;\n  }\n  .checkbox-wrapper-11 label::before,\n  .checkbox-wrapper-11 label::after {\n    content: \"\";\n    position: absolute;\n  }\n  .checkbox-wrapper-11 label::before {\n    height: 2px;\n    width: 8px;\n    left: -27px;\n    background: var(--check);\n    border-radius: 2px;\n    transition: background 0.3s ease;\n  }\n  .checkbox-wrapper-11 label:after {\n    height: 4px;\n    width: 4px;\n    top: 8px;\n    left: -25px;\n    border-radius: 50%;\n  }\n  .checkbox-wrapper-11 input[type=checkbox] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    position: relative;\n    height: 15px;\n    width: 15px;\n    outline: none;\n    border: 0;\n    margin: 0 15px 0 0;\n    cursor: pointer;\n    background: var(--background);\n    display: grid;\n    align-items: center;\n  }\n  .checkbox-wrapper-11 input[type=checkbox]::before, .checkbox-wrapper-11 input[type=checkbox]::after {\n    content: \"\";\n    position: absolute;\n    height: 2px;\n    top: auto;\n    background: var(--check);\n    border-radius: 2px;\n  }\n  .checkbox-wrapper-11 input[type=checkbox]::before {\n    width: 0px;\n    right: 60%;\n    transform-origin: right bottom;\n  }\n  .checkbox-wrapper-11 input[type=checkbox]::after {\n    width: 0px;\n    left: 40%;\n    transform-origin: left bottom;\n  }\n  .checkbox-wrapper-11 input[type=checkbox]:checked::before {\n    -webkit-animation: check-01-11 0.4s ease forwards;\n            animation: check-01-11 0.4s ease forwards;\n  }\n  .checkbox-wrapper-11 input[type=checkbox]:checked::after {\n    -webkit-animation: check-02-11 0.4s ease forwards;\n            animation: check-02-11 0.4s ease forwards;\n  }\n  .checkbox-wrapper-11 input[type=checkbox]:checked + label {\n    color: var(--disabled);\n    -webkit-animation: move-11 0.3s ease 0.1s forwards;\n            animation: move-11 0.3s ease 0.1s forwards;\n  }\n  .checkbox-wrapper-11 input[type=checkbox]:checked + label::before {\n    background: var(--disabled);\n    -webkit-animation: slice-11 0.4s ease forwards;\n            animation: slice-11 0.4s ease forwards;\n  }\n  .checkbox-wrapper-11 input[type=checkbox]:checked + label::after {\n    -webkit-animation: firework-11 0.5s ease forwards 0.1s;\n            animation: firework-11 0.5s ease forwards 0.1s;\n  }\n\n  @-webkit-keyframes move-11 {\n    50% {\n      padding-left: 8px;\n      padding-right: 0px;\n    }\n    100% {\n      padding-right: 4px;\n    }\n  }\n\n  @keyframes move-11 {\n    50% {\n      padding-left: 8px;\n      padding-right: 0px;\n    }\n    100% {\n      padding-right: 4px;\n    }\n  }\n  @-webkit-keyframes slice-11 {\n    60% {\n      width: 100%;\n      left: 4px;\n    }\n    100% {\n      width: 100%;\n      left: -2px;\n      padding-left: 0;\n    }\n  }\n  @keyframes slice-11 {\n    60% {\n      width: 100%;\n      left: 4px;\n    }\n    100% {\n      width: 100%;\n      left: -2px;\n      padding-left: 0;\n    }\n  }\n  @-webkit-keyframes check-01-11 {\n    0% {\n      width: 4px;\n      top: auto;\n      transform: rotate(0);\n    }\n    50% {\n      width: 0px;\n      top: auto;\n      transform: rotate(0);\n    }\n    51% {\n      width: 0px;\n      top: 8px;\n      transform: rotate(45deg);\n    }\n    100% {\n      width: 5px;\n      top: 8px;\n      transform: rotate(45deg);\n    }\n  }\n  @keyframes check-01-11 {\n    0% {\n      width: 4px;\n      top: auto;\n      transform: rotate(0);\n    }\n    50% {\n      width: 0px;\n      top: auto;\n      transform: rotate(0);\n    }\n    51% {\n      width: 0px;\n      top: 8px;\n      transform: rotate(45deg);\n    }\n    100% {\n      width: 5px;\n      top: 8px;\n      transform: rotate(45deg);\n    }\n  }\n  @-webkit-keyframes check-02-11 {\n    0% {\n      width: 4px;\n      top: auto;\n      transform: rotate(0);\n    }\n    50% {\n      width: 0px;\n      top: auto;\n      transform: rotate(0);\n    }\n    51% {\n      width: 0px;\n      top: 8px;\n      transform: rotate(-45deg);\n    }\n    100% {\n      width: 10px;\n      top: 8px;\n      transform: rotate(-45deg);\n    }\n  }\n  @keyframes check-02-11 {\n    0% {\n      width: 4px;\n      top: auto;\n      transform: rotate(0);\n    }\n    50% {\n      width: 0px;\n      top: auto;\n      transform: rotate(0);\n    }\n    51% {\n      width: 0px;\n      top: 8px;\n      transform: rotate(-45deg);\n    }\n    100% {\n      width: 10px;\n      top: 8px;\n      transform: rotate(-45deg);\n    }\n  }\n  @-webkit-keyframes firework-11 {\n    0% {\n      opacity: 1;\n      box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;\n    }\n    30% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;\n    }\n  }\n  @keyframes firework-11 {\n    0% {\n      opacity: 1;\n      box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;\n    }\n    30% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;\n    }\n  }\n<\/style>\n\n\n\n\n<p style=\"font-size:16px\">\uc704 \ub450 \uac00\uc9c0\ub294 \uc81c\uac00 \uc9c1\uc811 \ubcf5\uc0ac\ud574 \ubd99\uc5ec\ub123\uae30\ub9cc \ud574\uc11c \uc0b4\ud3b4\ubcf8 \ubaa8\uc2b5!<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/drive.google.com\/uc?id=1653vrWFsXzyUBKg-kRXPMd_w6j25dn8O\" alt=\"\"\/><\/figure>\n\n\n\n<p style=\"font-size:16px\">\ucd1d 64\uac1c\uc758 \uc0d8\ud50c\uc774 \ub4f1\ub85d\ub418\uc5b4 \uc788\uc73c\uba70, \ub300\ubd80\ubd84 \uc6b0\ub9ac\uac00 \uc11c\ube44\uc2a4\uc5d0\uc11c \uc790\uc8fc \uc0ac\uc6a9\ud558\ub294 \ub300\uc0c1\uc774\ub77c \ud55c \ubc88\ucbe4 \uc0b4\ud3b4\ubcf4\uace0 \ucc38\uace0\ud558\uac70\ub098  \ubcf5\uc0ac \ud6c4 \ubc14\ub85c \uc801\uc6a9\ud558\ub294 \ub4f1\uc758 \ubc29\ubc95\uc73c\ub85c \uac00\ubccd\uac8c \ud65c\uc6a9\ud558\uae30 \uc88b\uc740 \uacf3\uc774\ub77c\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4. <a rel=\"noreferrer noopener\" aria-label=\"\ub354 \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 '\ub9c1\ud06c'\ub97c \ud1b5\ud574 \ud655\uc778\ud574\uc8fc\uc138\uc694!  (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"https:\/\/getcssscan.com\/css-checkboxes-examples\" target=\"_blank\">\ub354 \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 &#8216;\ub9c1\ud06c&#8217;\ub97c \ud1b5\ud574 \ud655\uc778\ud574\uc8fc\uc138\uc694! <\/a><\/p>\n\n\n\n<p style=\"font-size:16px\">&#8211;<\/p>\n\n\n\n<p style=\"font-size:22px\">\ud83d\udc40 <strong>\ud568\uaed8 \ud65c\uc6a9\ud574\ubcf4\uc138\uc694!<\/strong><\/p>\n\n\n\n<ul><li><a rel=\"noreferrer noopener\" aria-label=\" (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"http:\/\/13.125.82.244\/boxshadowart\/\" target=\"_blank\">\uce74\ub4dc UI \uc18d \ubc15\uc2a4\uc640 \uadf8\ub9bc\uc790\ub97c \uc27d\uac8c \uc0dd\uc131\ud560 \uc218 \uc788\ub294 : Box Shadow Art<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\" (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"http:\/\/13.125.82.244\/copypastecss\/\" target=\"_blank\">\uc8fc\uc694 \uc11c\ube44\uc2a4\uc5d0\uc11c \uc0ac\uc6a9 \ub418\ub294 \ub2e4\uc591\ud55c \ubc84\ud2bc \uc0ac\ub840 \ud655\uc778\uc774 \uac00\ub2a5\ud55c : Copy &amp; Paste CSS<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\" (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"http:\/\/13.125.82.244\/buttonsgenerator\/\" target=\"_blank\">\uc5ec\ub7ec \uc885\ub958\uc758 \ubc84\ud2bc\uc744 \ud655\uc778, \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud574 \ubc14\ub85c \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 : Buttons Generator<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"http:\/\/13.125.82.244\/ui-button\/\" target=\"_blank\">\ub2e4\uc591\ud55c \uc885\ub958\uc758 \ub514\uc790\uc778 \ubc84\ud2bc\uacfc \uc801\uc6a9 \ubc29\ubc95\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub294 \uacf3!<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\" (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"http:\/\/13.125.82.244\/whirl\/\" target=\"_blank\">\uc885\ub958\uc5d0 \ub530\ub978 CSS \ub85c\ub529 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc0b4\ud3b4\ubcfc \uc218 \uc788\ub294 \uacf3! : Whirl<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\" (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"http:\/\/13.125.82.244\/loaders\/\" target=\"_blank\">24\uac1c \ub85c\ub529\uc560\ub2c8\uba54\uc774\uc158\uc744 \uc18c\uc2a4\uc640 \ud568\uaed8 \uc81c\uacf5\ud574\uc8fc\ub294 \uacf3!<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\" (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"http:\/\/13.125.82.244\/css-gui\/\" target=\"_blank\">\ucf54\ub529 \uc5c6\uc774, \ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9de\ucda4\ud615\uc73c\ub85c \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uacf3!<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\" (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"http:\/\/13.125.82.244\/uiverse\/\" target=\"_blank\">\ubb34\ub8cc\ub85c \uc0ac\uc6a9 \uac00\ub2a5\ud55c UI \uad6c\uc131\uc694\uc18c \uc81c\uacf5 \uc11c\ube44\uc2a4!<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\" (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"http:\/\/13.125.82.244\/tooltip7\/\" target=\"_blank\">\uc6f9\uc0ac\uc774\ud2b8 \uad6c\ucd95 \uc2dc \uc0ac\uc6a9 \uac00\ub2a5\ud55c \ubb34\ub8cc \ud234\ud301 \ub77c\uc774\ube0c\ub7ec\ub9ac \ubaa8\uc74c!<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\" (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"http:\/\/13.125.82.244\/layoutpatterns\/\" target=\"_blank\">\uc790\uc8fc \uc4f0\uc774\ub294 \ub808\uc774\uc544\uc6c3 \ud328\ud134\uc744 \uc790\uc138\ud788 \ud655\uc778\ud560 \uc218 \uc788\ub294 : Layout patterns<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\" (\uc0c8\ud0ed\uc73c\ub85c \uc5f4\uae30)\" href=\"http:\/\/13.125.82.244\/uiuidev\/\" target=\"_blank\">\ud5e4\ub4dc\ub77c\uc778, \ubc84\ud2bc \ub4f1 \ub2e4\uc591\ud55c UI \uad6c\uc131 \uc694\uc18c\ub97c \ud6a8\uacfc\uc640 \ud568\uaed8 \ud655\uc778\ud560 \uc218 \uc788\ub294 : UIUI.dev<\/a><\/li><\/ul>\n\n\n\n<p style=\"font-size:16px\">&#8211;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ub2e4\uc591\ud55c \uc11c\ube44\uc2a4\uc5d0 \uae30\ubcf8\uc801\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \uccb4\ud06c\ubc15\uc2a4\ub098 \ud1a0\uae00 \ub4f1\uc744 \uacb0\uacfc\ubb3c\uacfc CSS\ub85c \uc81c\uacf5\ud558\ub294 \uacf3. \uc6d0\ud558\ub294 \uc0d8\ud50c\uc774 \uc788\ub2e4\uba74 CSS\ub85c \ubcf5\uc0ac\ud574 \uc6f9\uc0ac\uc774\ud2b8 \ub0b4 \ubc14\ub85c \uc801\uc6a9\ud558\uac70\ub098 \uc785\ub9db\uc5d0 \ub530\ub77c \uc218\uc815\ud574 \ud65c\uc6a9 \uac00\ub2a5!<\/p>\n","protected":false},"author":2,"featured_media":21959,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[883,26],"tags":[2297,2291,2292,2294,2296,2293,2295],"_links":{"self":[{"href":"https:\/\/icunow.co.kr\/wp-json\/wp\/v2\/posts\/21957"}],"collection":[{"href":"https:\/\/icunow.co.kr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/icunow.co.kr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/icunow.co.kr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/icunow.co.kr\/wp-json\/wp\/v2\/comments?post=21957"}],"version-history":[{"count":0,"href":"https:\/\/icunow.co.kr\/wp-json\/wp\/v2\/posts\/21957\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/icunow.co.kr\/wp-json\/wp\/v2\/media\/21959"}],"wp:attachment":[{"href":"https:\/\/icunow.co.kr\/wp-json\/wp\/v2\/media?parent=21957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/icunow.co.kr\/wp-json\/wp\/v2\/categories?post=21957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/icunow.co.kr\/wp-json\/wp\/v2\/tags?post=21957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}