SNS \uc544\uc774\ucf58 \ub9c1\ud06c\uc640 \uc800\uc791\uad8c \uc815\ubcf4\uac00 \ub2f4\uae34 \ud478\ud130\ub97c \ub9cc\ub4ed\ub2c8\ub2e4.<\/p>\n
\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 \u2502\n\u2502 Thanks X IG YT LI \u2502\n\u2502 \u2502\n\u2502 copyright All right \u2502\n\u2502 \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n\ub192\uc774: 324px\n<\/code><\/pre>\n\n\n\n\uc694\uc18c<\/th>\n \uac12<\/th>\n<\/tr>\n<\/thead>\n \n\n"Thanks" \ud3f0\ud2b8<\/td>\n 20px, #1e1e1e<\/td>\n<\/tr>\n \nSNS \uc544\uc774\ucf58 \ud06c\uae30<\/td>\n 24px \u00d7 24px<\/td>\n<\/tr>\n \n\uc544\uc774\ucf58 \uc0c9\uc0c1<\/td>\n #1e1e1e<\/td>\n<\/tr>\n \ncopyright \ud3f0\ud2b8<\/td>\n 14px<\/td>\n<\/tr>\n \n\ubc30\uacbd\uc0c9<\/td>\n #ffffff<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\nSTEP 1 \u2014 Footer.jsx \uc791\uc131<\/h2>\n
SVG \uc544\uc774\ucf58\uc744 \uc9c1\uc811 \ucf54\ub4dc\uc5d0 \uc501\ub2c8\ub2e4.
\n\ubcf5\uc7a1\ud574 \ubcf4\uc774\uc9c0\ub9cc <svg><\/code> \ud0dc\uadf8 \uc548\uc758 <path><\/code> \ub9cc \uc218\uc815\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n\/\/ src\/components\/Footer.jsx\n\nconst Footer = () => {\n return (\n <footer className="footer">\n\n {\/* \uc0c1\ub2e8: Thanks + SNS \uc544\uc774\ucf58 *\/}\n <div className="footer-top">\n <span className="footer-thanks">Thanks<\/span>\n\n <div className="footer-sns">\n\n {\/* X (\uad6c \ud2b8\uc704\ud130) *\/}\n <a href="#" className="footer-sns__item" aria-label="X">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none">\n <path\n d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"\n fill="#1e1e1e"\n \/>\n <\/svg>\n <\/a>\n\n {\/* Instagram *\/}\n <a href="#" className="footer-sns__item" aria-label="Instagram">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none">\n <rect x="2" y="2" width="20" height="20" rx="5"\n stroke="#1e1e1e" strokeWidth="2"\/>\n <circle cx="12" cy="12" r="4"\n stroke="#1e1e1e" strokeWidth="2"\/>\n <circle cx="17.5" cy="6.5" r="1"\n fill="#1e1e1e"\/>\n <\/svg>\n <\/a>\n\n {\/* YouTube *\/}\n <a href="#" className="footer-sns__item" aria-label="YouTube">\n <svg width="24" height="18" viewBox="0 0 24 18" fill="none">\n <path\n d="M23.498 2.819a3.016 3.016 0 0 0-2.122-2.136C19.505 0 12 0 12 0S4.495 0 2.625.683A3.016 3.016 0 0 0 .502 2.82C0 4.697 0 9 0 9s0 4.303.502 6.181a2.973 2.973 0 0 0 2.123 2.1C4.495 18 12 18 12 18s7.505 0 9.376-.719a2.974 2.974 0 0 0 2.122-2.1C24 13.303 24 9 24 9s0-4.303-.502-6.181zM9.545 12.818V5.182L15.818 9l-6.273 3.818z"\n fill="#1e1e1e"\n \/>\n <\/svg>\n <\/a>\n\n {\/* LinkedIn *\/}\n <a href="#" className="footer-sns__item" aria-label="LinkedIn">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none">\n <rect x="2" y="2" width="20" height="20" rx="3"\n stroke="#1e1e1e" strokeWidth="2"\/>\n <path\n d="M7 10v7M7 7v.5M12 17v-4a2 2 0 0 1 4 0v4M12 10v7"\n stroke="#1e1e1e" strokeWidth="2" strokeLinecap="round"\n \/>\n <\/svg>\n <\/a>\n\n <\/div>\n <\/div>\n\n {\/* \ud558\ub2e8: \uc800\uc791\uad8c *\/}\n <p className="footer-copy">copyright All right<\/p>\n\n <\/footer>\n )\n}\n\nexport default Footer\n<\/code><\/pre>\n
\n\ucf54\ub4dc \uc124\uba85<\/h2>\nSVG\ub780?<\/h3>\n
\ubca1\ud130 \uc774\ubbf8\uc9c0<\/strong>\uc785\ub2c8\ub2e4. \uc544\ubb34\ub9ac \ud06c\uac8c \ud655\ub300\ud574\ub3c4 \uae68\uc9c0\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
\n\uc544\uc774\ucf58, \ub85c\uace0\uc5d0 \ub9ce\uc774 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<svg width="24" height="24" viewBox="0 0 24 24" fill="none">\n <path d="M..." fill="#1e1e1e" \/>\n<\/svg>\n<\/code><\/pre>\n\nwidth<\/code>\/height<\/code> : \ud45c\uc2dc \ud06c\uae30<\/li>\nviewBox<\/code> : SVG \ub0b4\ubd80 \uc88c\ud45c \ubc94\uc704 (\uac74\ub4dc\ub9ac\uc9c0 \uc54a\uc544\ub3c4 \ub428)<\/li>\npath d="..."<\/code> : \uc544\uc774\ucf58 \ubaa8\uc591\uc744 \uc218\ud559\uc801 \uc88c\ud45c\ub85c \ud45c\ud604\ud55c \uac83<\/li>\n<\/ul>\naria-label<\/code> \uc774\ub780?<\/h3>\n\uc2a4\ud06c\ub9b0\ub9ac\ub354(\uc2dc\uac01\uc7a5\uc560\uc778\uc6a9 \ub3c4\uad6c)\uac00 \uc77d\ub294 \ud14d\uc2a4\ud2b8\uc785\ub2c8\ub2e4.
\n\uc544\uc774\ucf58\ub9cc \uc788\ub294 \ubc84\ud2bc\/\ub9c1\ud06c\uc5d0\ub294 \ubc18\ub4dc\uc2dc \ubd99\uc5ec\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
<a href="#" aria-label="Instagram">\n <svg>...<\/svg>\n<\/a>\n\/\/ \uc2a4\ud06c\ub9b0\ub9ac\ub354: "Instagram, \ub9c1\ud06c"\n<\/code><\/pre>\n
\nSTEP 2 \u2014 CSS \ucd94\uac00<\/h2>\n\/* src\/index.css \uc5d0 \ucd94\uac00 *\/\n\n\/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.footer {\n padding: 60px 24px;\n border-top: 1px solid #f0f0f0;\n}\n\n\/* Thanks\uc640 SNS \uc544\uc774\ucf58\uc744 \uc591\ucabd \ub05d\uc5d0 \ubc30\uce58 *\/\n.footer-top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 40px;\n}\n\n.footer-thanks {\n font-size: 20px;\n font-weight: 500;\n color: #1e1e1e;\n}\n\n\/* SNS \uc544\uc774\ucf58 \ubaa9\ub85d *\/\n.footer-sns {\n display: flex;\n gap: 16px;\n align-items: center;\n}\n\n\/* \uac01 \uc544\uc774\ucf58 \ub9c1\ud06c *\/\n.footer-sns__item {\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0.7;\n transition: opacity 0.2s;\n}\n\n.footer-sns__item:hover {\n opacity: 1;\n}\n\n\/* \uc800\uc791\uad8c \ud14d\uc2a4\ud2b8 *\/\n.footer-copy {\n font-size: 14px;\n color: #1e1e1e;\n}\n<\/code><\/pre>\n
\n\ube0c\ub77c\uc6b0\uc800 \ud655\uc778<\/h2>\n
\uc800\uc7a5 \ud6c4 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c:<\/p>\n
\n- \ud398\uc774\uc9c0 \ud558\ub2e8\uc5d0 "Thanks" \uc640 SNS \uc544\uc774\ucf58 4\uac1c\uac00 \ubcf4\uc785\ub2c8\ub2e4<\/li>\n
- "copyright All right" \ud14d\uc2a4\ud2b8\uac00 \uc544\ub798\uc5d0 \uc788\uc2b5\ub2c8\ub2e4<\/li>\n
- \uc544\uc774\ucf58\uc5d0 \ub9c8\uc6b0\uc2a4\ub97c \uc62c\ub9ac\uba74 \uc9c4\ud574\uc9d1\ub2c8\ub2e4<\/li>\n<\/ul>\n
\n","protected":false},"excerpt":{"rendered":"08. Footer.jsx \u2014 \ud558\ub2e8 \ud478\ud130 \uc774\ubc88 \ub2e8\uacc4\uc5d0\uc11c \ud560 \uc77c SNS \uc544\uc774\ucf58 \ub9c1\ud06c\uc640 \uc800\uc791\uad8c \uc815\ubcf4\uac00 \ub2f4\uae34 \ud478\ud130\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. \ud53c\uadf8\ub9c8 \ub514\uc790\uc778 \ubd84\uc11d \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502 \u2502 Thanks X IG YT LI \u2502 \u2502 \u2502 \u2502 copyright All right \u2502 \u2502 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \ub192\uc774: 324px \uc694\uc18c \uac12 "Thanks" \ud3f0\ud2b8 20px, #1e1e1e SNS \uc544\uc774\ucf58 \ud06c\uae30 24px \u00d7 24px \uc544\uc774\ucf58 … \ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-88","post","type-post","status-publish","format-standard","hentry","category-react-resume"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=88"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/88\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}