{"id":1150,"date":"2025-02-20T18:30:00","date_gmt":"2025-02-20T09:30:00","guid":{"rendered":"https:\/\/seuheu.com\/?p=1150"},"modified":"2025-02-16T16:31:49","modified_gmt":"2025-02-16T07:31:49","slug":"html-css-font-awesome-%ec%82%ac%ec%9a%a9%eb%b2%95","status":"publish","type":"post","link":"https:\/\/seuheu.com\/?p=1150","title":{"rendered":"[HTML &amp; CSS ] Font Awesome \uc0ac\uc6a9\ubc95!"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p><br><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\ubaa9\ucc28<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\ubaa9\ucc28 \ud1a0\uae00\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/seuheu.com\/?p=1150\/#1_%EB%82%B4%EC%9A%A9\">1. \ub0b4\uc6a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/seuheu.com\/?p=1150\/#2_Font_Awesome_%EC%A3%BC%EC%9A%94_%ED%8A%B9%EC%A7%95\">2. Font Awesome \uc8fc\uc694 \ud2b9\uc9d5<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/seuheu.com\/?p=1150\/#2-1_%EB%B0%A9%EB%8C%80%ED%95%9C_%EC%95%84%EC%9D%B4%EC%BD%98_%EC%BB%AC%EB%A0%89%EC%85%98\">2-1. \ubc29\ub300\ud55c \uc544\uc774\ucf58 \uceec\ub809\uc158<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/seuheu.com\/?p=1150\/#2-2_%EB%B2%A1%ED%84%B0_%EA%B8%B0%EB%B0%98_SVG_Web_Font\">2-2. \ubca1\ud130 \uae30\ubc18 (SVG &amp; Web Font)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/seuheu.com\/?p=1150\/#2-3_%EA%B0%84%ED%8E%B8%ED%95%9C_%EC%82%AC%EC%9A%A9%EB%B2%95\">2-3. \uac04\ud3b8\ud55c \uc0ac\uc6a9\ubc95<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/seuheu.com\/?p=1150\/#2-4_%EB%8B%A4%EC%96%91%ED%95%9C_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC_%EC%A7%80%EC%9B%90\">2-4. \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c \uc9c0\uc6d0<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/seuheu.com\/?p=1150\/#3_Font_Awesome\">3. Font Awesome<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/seuheu.com\/?p=1150\/#3-1_%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85\">3-1. \ud68c\uc6d0\uac00\uc785<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/seuheu.com\/?p=1150\/#3-2_%EC%84%A4%EC%A0%95\">3-2. \uc124\uc815<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/seuheu.com\/?p=1150\/#3-3_%EC%82%AC%EC%9A%A9\">3-3. \uc0ac\uc6a9<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%EB%82%B4%EC%9A%A9\"><\/span>1. \ub0b4\uc6a9<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p><a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\">Font Awesome<\/a><\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<p>\uc6f9\uc0ac\uc774\ud2b8\ub97c \uac1c\ubc1c\ud558\ub2e4 \ubcf4\uba74 \uc544\uc774\ucf58\uc744 \uc790\uc8fc \uc0ac\uc6a9\ud558\uac8c \ub429\ub2c8\ub2e4.<br>\ubc84\ud2bc, \ub124\ube44\uac8c\uc774\uc158 \ubc14, \uc18c\uc15c \ubbf8\ub514\uc5b4 \ub9c1\ud06c \ub4f1 \ub2e4\uc591\ud55c \uc694\uc18c\uc5d0\uc11c \uc544\uc774\ucf58\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\ub294 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<br>\ud558\uc9c0\ub9cc \uc9c1\uc811 \uc544\uc774\ucf58\uc744 \ub9cc\ub4e4\uac70\ub098 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \ubc88\uac70\ub86d\uace0 \uc720\uc9c0\ubcf4\uc218\uac00 \uc5b4\ub835\uc2b5\ub2c8\ub2e4.<br>\uc774\ub54c\u00a0<strong>Font Awesome<\/strong>\uc774 \ub4f1\uc7a5\ud569\ub2c8\ub2e4!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Font Awesome\uc740 \uc6f9\uc0ac\uc774\ud2b8\uc5d0\uc11c \uc544\uc774\ucf58\uc744 \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uc81c\uacf5\ud558\ub294 \uc624\ud508\uc18c\uc2a4 \uc544\uc774\ucf58 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uac04\ud3b8\ud55c \uc0ac\uc6a9\ubc95\uacfc \ub2e4\uc591\ud55c \uae30\ub2a5 \ub355\ubd84\uc5d0 \ub9ce\uc740 \uac1c\ubc1c\uc790\uac00 \uc560\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Font_Awesome_%EC%A3%BC%EC%9A%94_%ED%8A%B9%EC%A7%95\"><\/span>2. Font Awesome \uc8fc\uc694 \ud2b9\uc9d5<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p><br><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2-1_%EB%B0%A9%EB%8C%80%ED%95%9C_%EC%95%84%EC%9D%B4%EC%BD%98_%EC%BB%AC%EB%A0%89%EC%85%98\"><\/span>2-1. \ubc29\ub300\ud55c \uc544\uc774\ucf58 \uceec\ub809\uc158<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Font Awesome\uc740 \uc218\ucc9c \uac1c\uc758 \uc544\uc774\ucf58\uc744 \uc81c\uacf5\ud558\uba70,\u00a0<strong>\ubb34\ub8cc(FREE)<\/strong>\u00a0\ubc0f\u00a0<strong>\uc720\ub8cc(PRO)<\/strong>\u00a0\ubc84\uc804\uc73c\ub85c \ub098\ub269\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc18c\uc15c \ubbf8\ub514\uc5b4, UI \uc694\uc18c, \ube0c\ub79c\ub4dc \ub85c\uace0 \ub4f1 \ub2e4\uc591\ud55c \uce74\ud14c\uace0\ub9ac\uc758 \uc544\uc774\ucf58\uc744 \uc27d\uac8c \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2-2_%EB%B2%A1%ED%84%B0_%EA%B8%B0%EB%B0%98_SVG_Web_Font\"><\/span>2-2. \ubca1\ud130 \uae30\ubc18 (SVG &amp; Web Font)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc774\ubbf8\uc9c0 \ud30c\uc77c\uc774 \uc544\ub2cc \ubca1\ud130 \ud615\uc2dd\uc73c\ub85c \uc81c\uacf5\ub418\uae30 \ub54c\ubb38\uc5d0\u00a0<strong>\ud655\ub300\/\ucd95\uc18c\ub97c \ud574\ub3c4 \uae68\uc9c0\uc9c0 \uc54a\uc73c\uba70<\/strong>, CSS\ub97c \uc774\uc6a9\ud574 \ud06c\uae30, \uc0c9\uc0c1 \ub4f1\uc744 \uc790\uc720\ub86d\uac8c \uc870\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2-3_%EA%B0%84%ED%8E%B8%ED%95%9C_%EC%82%AC%EC%9A%A9%EB%B2%95\"><\/span>2-3. \uac04\ud3b8\ud55c \uc0ac\uc6a9\ubc95<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML, CSS, JavaScript\ub97c \uc774\uc6a9\ud574\u00a0<strong>\uac04\ub2e8\ud55c \ucf54\ub4dc\ub9cc\uc73c\ub85c \uc544\uc774\ucf58\uc744 \uc0bd\uc785<\/strong>\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li>CDN, npm, \uc9c1\uc811 \ub2e4\uc6b4\ub85c\ub4dc \ub4f1 \ub2e4\uc591\ud55c \ubc29\uc2dd\uc73c\ub85c \ud504\ub85c\uc81d\ud2b8\uc5d0 \uc801\uc6a9\ud560 \uc218 \uc788\uc5b4 \uc720\uc5f0\uc131\uc774 \ub6f0\uc5b4\ub0a9\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2-4_%EB%8B%A4%EC%96%91%ED%95%9C_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC_%EC%A7%80%EC%9B%90\"><\/span>2-4. \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c \uc9c0\uc6d0<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Font Awesome\uc740\u00a0<strong>Bootstrap, React, Vue.js, Angular<\/strong>\u00a0\ub4f1 \ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc640 \ud638\ud658\ub429\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc5b4\ub5a4 \ud658\uacbd\uc5d0\uc11c\ub4e0 \uc27d\uac8c \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Font_Awesome\"><\/span>3. Font Awesome<span class=\"ez-toc-section-end\"><\/span><\/h1>\n\n\n\n<p><br><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3-1_%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85\"><\/span>3-1. \ud68c\uc6d0\uac00\uc785<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/1-1024x551.png\" alt=\"\" class=\"wp-image-1156\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Start for Free\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/2-1024x563.png\" alt=\"\" class=\"wp-image-1157\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uc774\uba54\uc77c \uc8fc\uc18c\ub97c \uc785\ub825\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc11c\ube44\uc2a4 \uc57d\uad00 \ubc0f \uac1c\uc778 \uc815\ubcf4 \ubcf4\ud638 \uc815\ucc45\uc5d0 \ub3d9\uc758\ub97c \ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>Send Kit Embed Code\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/3-1024x563.png\" alt=\"\" class=\"wp-image-1158\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uba54\uc77c\uc774 \ubc1c\uc1a1\ub41c \uac83\uc744 \ud655\uc778\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/4-783x1024.png\" alt=\"\" class=\"wp-image-1159\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\ubc1c\uc1a1\ub41c \uba54\uc77c\uc5d0\uc11c Finish Setting Up Your Account\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/5-1024x740.png\" alt=\"\" class=\"wp-image-1160\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Password\ub97c \uc785\ub825\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>Password \ud655\uc778\uc744 \uc785\ub825\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>Start Password &amp; Continue\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/6-1024x963.png\" alt=\"\" class=\"wp-image-1161\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uc774\ub984\uc744 \uc785\ub825\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\uc131\uc744 \uc785\ub825\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>All set Let\u2019s go\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/8-1024x963.png\" alt=\"\" class=\"wp-image-1162\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uc0ac\uc6a9\ud558\uc2dc\ub824\ub294 Style\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>Next\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/9-1024x805.png\" alt=\"\" class=\"wp-image-1163\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uc544\uc774\ucf58\uc744 \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud560\uc9c0\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>Next\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/10-1024x805.png\" alt=\"\" class=\"wp-image-1164\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Make My Kit\uc744 \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3-2_%EC%84%A4%EC%A0%95\"><\/span>3-2. \uc124\uc815<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/11-1024x805.png\" alt=\"\" class=\"wp-image-1165\"\/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uc0dd\uc131\ub41c \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(234, 191, 191, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;script\n      src=&quot;&lt;https:\/\/kit.fontawesome.com\/XXXXXXXXX.js&gt;&quot;\n      crossorigin=&quot;anonymous&quot;\n    &gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;!<\/span><span style=\"color: #569CD6\">DOCTYPE<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">html<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">html<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">lang<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;en&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">charset<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;UTF-8&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">name<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;viewport&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">Document<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">body<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;&lt;https:\/\/kit.fontawesome.com\/XXXXXXXXX.js&gt;&quot;<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #9CDCFE\">crossorigin<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;anonymous&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">body<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">html<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;body> \uc81c\uc77c \uc544\ub798 \ubcf5\uc0ac\ud55c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3-3_%EC%82%AC%EC%9A%A9\"><\/span>3-3. \uc0ac\uc6a9<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/12-1024x679.png\" alt=\"\" class=\"wp-image-1166\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc0ac\uc6a9\ud558\uc2dc\ub824\ub294 icon\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/13-1024x679.png\" alt=\"\" class=\"wp-image-1167\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud574\ub2f9 \ubb38\uad6c\ub97c \ud074\ub9ad\ud558\uc5ec \ubcf5\uc0ac\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-start:9;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(234, 191, 191, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;i class=&quot;fa-solid fa-user&quot;&gt;&lt;\/i&gt;\n    &lt;script\n      src=&quot;&lt;https:\/\/kit.fontawesome.com\/XXXXXXXXX.js&gt;&quot;\n      crossorigin=&quot;anonymous&quot;\n    &gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;!<\/span><span style=\"color: #569CD6\">DOCTYPE<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">html<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">html<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">lang<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;en&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">charset<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;UTF-8&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">name<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;viewport&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">Document<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">body<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">i<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">class<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;fa-solid fa-user&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">i<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;&lt;https:\/\/kit.fontawesome.com\/XXXXXXXXX.js&gt;&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">      <\/span><span style=\"color: #9CDCFE\">crossorigin<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;anonymous&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">body<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">html<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ubcf5\uc0ac\ud55c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img decoding=\"async\" src=\"https:\/\/seuheu.com\/wp-content\/uploads\/2025\/02\/image.png\" alt=\"\" class=\"wp-image-1155\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>icon\uc774 \ucd94\uac00\ub41c \uac83\uc744 \ud655\uc778\ud558\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. \ub0b4\uc6a9 Font Awesome \uc6f9\uc0ac\uc774\ud2b8\ub97c \uac1c\ubc1c\ud558\ub2e4 \ubcf4\uba74 \uc544\uc774\ucf58\uc744 \uc790\uc8fc \uc0ac\uc6a9\ud558\uac8c \ub429\ub2c8\ub2e4.\ubc84\ud2bc, \ub124\ube44\uac8c\uc774\uc158 \ubc14, \uc18c\uc15c \ubbf8\ub514\uc5b4 \ub9c1\ud06c \ub4f1 \ub2e4\uc591\ud55c \uc694\uc18c\uc5d0\uc11c \uc544\uc774\ucf58\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \ud5a5\uc0c1\uc2dc\ud0a4\ub294 \uc911\uc694\ud55c \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.\ud558\uc9c0\ub9cc \uc9c1\uc811 \uc544\uc774\ucf58\uc744 \ub9cc\ub4e4\uac70\ub098 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \ubc88\uac70\ub86d\uace0 \uc720\uc9c0\ubcf4\uc218\uac00 \uc5b4\ub835\uc2b5\ub2c8\ub2e4.\uc774\ub54c\u00a0Font Awesome\uc774 \ub4f1\uc7a5\ud569\ub2c8\ub2e4! Font Awesome\uc740 \uc6f9\uc0ac\uc774\ud2b8\uc5d0\uc11c \uc544\uc774\ucf58\uc744 \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uc81c\uacf5\ud558\ub294 \uc624\ud508\uc18c\uc2a4 \uc544\uc774\ucf58 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uac04\ud3b8\ud55c \uc0ac\uc6a9\ubc95\uacfc \ub2e4\uc591\ud55c \uae30\ub2a5 \ub355\ubd84\uc5d0 &#8230; <a title=\"[HTML &amp; CSS ] Font Awesome \uc0ac\uc6a9\ubc95!\" class=\"read-more\" href=\"https:\/\/seuheu.com\/?p=1150\" aria-label=\"[HTML &amp; CSS ] Font Awesome \uc0ac\uc6a9\ubc95!\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,25],"tags":[],"class_list":["post-1150","post","type-post","status-publish","format-standard","hentry","category-programming","category-html"],"_links":{"self":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1150"}],"version-history":[{"count":6,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1150\/revisions"}],"predecessor-version":[{"id":1169,"href":"https:\/\/seuheu.com\/index.php?rest_route=\/wp\/v2\/posts\/1150\/revisions\/1169"}],"wp:attachment":[{"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seuheu.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}