{"id":1127,"date":"2024-08-29T13:10:22","date_gmt":"2024-08-29T04:10:22","guid":{"rendered":"https:\/\/youngrihan.com\/?p=1127"},"modified":"2024-08-29T17:27:26","modified_gmt":"2024-08-29T08:27:26","slug":"%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90","status":"publish","type":"post","link":"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/","title":{"rendered":"\uad6c\uae00 \ud3f0\ud2b8 \uc801\uc6a9 \ubc29\ubc95 (\uc6f9 \ud3f0\ud2b8, \ub85c\uceec \ud3f0\ud2b8, CDN \uc7a5\ub2e8\uc810)"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_68_1 ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >\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=\"Toggle Table of Content\"><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-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#1_%EA%B5%AC%EA%B8%80_%ED%8F%B0%ED%8A%B8_%EC%82%AC%EC%9D%B4%ED%8A%B8_Google_Fonts\" title=\"1. \uad6c\uae00 \ud3f0\ud2b8 \uc0ac\uc774\ud2b8 (Google Fonts)\">1. \uad6c\uae00 \ud3f0\ud2b8 \uc0ac\uc774\ud2b8 (Google Fonts)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#2_Get_embed_code_%EC%9B%B9_%ED%8F%B0%ED%8A%B8_%EC%A0%81%EC%9A%A9_%EB%B0%A9%EB%B2%95\" title=\"2. Get embed code (\uc6f9 \ud3f0\ud2b8 \uc801\uc6a9 \ubc29\ubc95)\">2. Get embed code (\uc6f9 \ud3f0\ud2b8 \uc801\uc6a9 \ubc29\ubc95)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#2-1_html_%ED%97%A4%EB%8D%94%EC%97%90_%EC%B6%94%EA%B0%80_css_%ED%8C%8C%EC%9D%BC%EC%97%90_class_%EC%83%9D%EC%84%B1\" title=\"2-1. html \ud5e4\ub354\uc5d0 &lt;link&gt; \ucd94\uac00 + css \ud30c\uc77c\uc5d0 class \uc0dd\uc131\">2-1. html \ud5e4\ub354\uc5d0 &lt;link> \ucd94\uac00 + css \ud30c\uc77c\uc5d0 class \uc0dd\uc131<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#2-2_html_%ED%97%A4%EB%8D%94%EC%97%90_import_%EC%B6%94%EA%B0%80_css_%ED%8C%8C%EC%9D%BC%EC%97%90_class_%EC%83%9D%EC%84%B1\" title=\"2-2. html \ud5e4\ub354\uc5d0 &lt;style&gt; @import \ucd94\uac00 + css \ud30c\uc77c\uc5d0 class \uc0dd\uc131\">2-2. html \ud5e4\ub354\uc5d0 &lt;style> @import \ucd94\uac00 + css \ud30c\uc77c\uc5d0 class \uc0dd\uc131<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#3_Download_%EB%A1%9C%EC%BB%AC_%ED%8F%B0%ED%8A%B8_%EC%A0%81%EC%9A%A9_%EB%B0%A9%EB%B2%95\" title=\"3. Download (\ub85c\uceec \ud3f0\ud2b8 \uc801\uc6a9 \ubc29\ubc95)\">3. Download (\ub85c\uceec \ud3f0\ud2b8 \uc801\uc6a9 \ubc29\ubc95)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#3-1_%ED%8F%B0%ED%8A%B8_%ED%8C%8C%EC%9D%BC%EC%9D%98_%EC%A2%85%EB%A5%98\" title=\"3-1. \ud3f0\ud2b8 \ud30c\uc77c\uc758 \uc885\ub958\">3-1. \ud3f0\ud2b8 \ud30c\uc77c\uc758 \uc885\ub958<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#3-2_%EB%A1%9C%EC%BB%AC_%ED%8F%B0%ED%8A%B8_%EC%A0%81%EC%9A%A9\" title=\"3-2. \ub85c\uceec \ud3f0\ud2b8 \uc801\uc6a9\">3-2. \ub85c\uceec \ud3f0\ud2b8 \uc801\uc6a9<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#4_CDN_%EC%82%AC%EC%9A%A9\" title=\"4. CDN \uc0ac\uc6a9\">4. CDN \uc0ac\uc6a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#5_%EC%9B%B9%ED%8F%B0%ED%8A%B8_%EB%A1%9C%EC%BB%AC%ED%8F%B0%ED%8A%B8_CDN_%EB%B0%A9%EC%8B%9D%EC%9D%98_%EC%9E%A5%EB%8B%A8%EC%A0%90\" title=\"5. \uc6f9\ud3f0\ud2b8, \ub85c\uceec\ud3f0\ud2b8, CDN \ubc29\uc2dd\uc758 \uc7a5\ub2e8\uc810\">5. \uc6f9\ud3f0\ud2b8, \ub85c\uceec\ud3f0\ud2b8, CDN \ubc29\uc2dd\uc758 \uc7a5\ub2e8\uc810<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#%EC%9B%B9%ED%8F%B0%ED%8A%B8_Web_Font\" title=\"\uc6f9\ud3f0\ud2b8 (Web Font)\">\uc6f9\ud3f0\ud2b8 (Web Font)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#%EB%A1%9C%EC%BB%AC%ED%8F%B0%ED%8A%B8_Local_Font\" title=\"\ub85c\uceec\ud3f0\ud2b8 (Local Font)\">\ub85c\uceec\ud3f0\ud2b8 (Local Font)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/#CDN_Content_Delivery_Network_%EB%B0%A9%EC%8B%9D\" title=\"CDN (Content Delivery Network) \ubc29\uc2dd\">CDN (Content Delivery Network) \ubc29\uc2dd<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_%EA%B5%AC%EA%B8%80_%ED%8F%B0%ED%8A%B8_%EC%82%AC%EC%9D%B4%ED%8A%B8_Google_Fonts\"><\/span>1. \uad6c\uae00 \ud3f0\ud2b8 \uc0ac\uc774\ud2b8 (Google Fonts)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/fonts.google.com\/\" rel=\"noreferrer noopener\">https:\/\/fonts.google.com\/<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"699\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-4-1024x699.png\" alt=\"\" class=\"wp-image-1128\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-4-1024x699.png 1024w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-4-300x205.png 300w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-4-768x524.png 768w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-4-1536x1048.png 1536w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-4-2048x1398.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\uad6c\uae00 \ud3f0\ud2b8 \uc0ac\uc774\ud2b8\ub294 \ubb34\ub8cc\ub85c \ub2e4\uc591\ud55c \ud3f0\ud2b8\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc88c\uce21\uc758 Filter \ub97c \uc0ac\uc6a9\ud558\uc5ec \uc5b8\uc5b4\uc640 \uae00\uc790 \ubaa8\uc591 \ub4f1\uc744 \uc124\uc815\ud558\uc5ec \uac80\uc0c9\ud558\uba74 \ub354 \ucc3e\uae30 \uc27d\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-5-1024x573.png\" alt=\"\" class=\"wp-image-1129\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-5-1024x573.png 1024w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-5-300x168.png 300w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-5-768x429.png 768w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-5-1536x859.png 1536w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-5-2048x1145.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\uc6d0\ud558\ub294 \ud3f0\ud2b8 \ud074\ub9ad \ud6c4 \uc6b0\uce21 \uc0c1\ub2e8\uc5d0 Get font \ubc84\ud2bc\uc744 \ub20c\ub7ec\uc90d\ub2c8\ub2e4<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-7-1024x467.png\" alt=\"\" class=\"wp-image-1131\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-7-1024x467.png 1024w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-7-300x137.png 300w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-7-768x350.png 768w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-7-1536x700.png 1536w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-7-2048x933.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\uadf8\ub7ec\uba74 \uc6b0\uce21\uc5d0 <code>Get embed code<\/code>\uc640 <code>Download all<\/code> \ubc84\ud2bc\uc774 \uc0dd\uae41\ub2c8\ub2e4<\/p>\n\n\n\n<p>\uc774\ub54c, \uc88c\uce21\uc744 \ubcf4\uc2dc\uba74 Noto Sans Korean \uacfc Hahmlet \ub450\uac00\uc9c0\uc758 \ud3f0\ud2b8\uac00 \uc120\ud0dd\ub418\uc5b4 \uc788\ub294\ub370\uc694<\/p>\n\n\n\n<p>\uc6d0\ud558\uc9c0 \uc54a\ub294 \ud3f0\ud2b8\ub294 <code>Remove<\/code> \ubc84\ud2bc\uc744 \ub20c\ub7ec\uc11c \uc0ad\uc81c\ud574\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Get_embed_code_%EC%9B%B9_%ED%8F%B0%ED%8A%B8_%EC%A0%81%EC%9A%A9_%EB%B0%A9%EB%B2%95\"><\/span>2. Get embed code (\uc6f9 \ud3f0\ud2b8 \uc801\uc6a9 \ubc29\ubc95)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\ud3f0\ud2b8\ub97c \ub2e4\uc6b4 \ubc1b\uc9c0 \uc54a\uace0 html \uacfc css \ud30c\uc77c\uc5d0 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ubc14\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"638\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-9-1024x638.png\" alt=\"\" class=\"wp-image-1133\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-9-1024x638.png 1024w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-9-300x187.png 300w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-9-768x478.png 768w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-9-1536x957.png 1536w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-9-2048x1275.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\uc81c\uac00 \uc120\ud0dd\ud55c Hahmlet \ud3f0\ud2b8\ub294 Weight \uac00 100 \ubd80\ud130 900\uae4c\uc9c0 \uc9c0\uc6d0\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc801\uc6a9 \ubc29\ubc95\uc740 &lt;link&gt; \ub610\ub294 @import \uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2-1_html_%ED%97%A4%EB%8D%94%EC%97%90_%EC%B6%94%EA%B0%80_css_%ED%8C%8C%EC%9D%BC%EC%97%90_class_%EC%83%9D%EC%84%B1\"><\/span><strong>2-1. html \ud5e4\ub354\uc5d0 &lt;link> \ucd94\uac00 + css \ud30c\uc77c\uc5d0 class \uc0dd\uc131<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\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;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:#2e3440ff\"><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;ko&quot;&gt;\n\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;\uc6f9\ud3f0\ud2b8&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;\/css\/font.css&quot;&gt;\n    \n    &lt;!-- \uc6f9\ud3f0\ud2b8 link \ud0dc\uadf8 \uc2dc\uc791 --&gt;\n    &lt;link rel=&quot;preconnect&quot; href=&quot;https:\/\/fonts.googleapis.com&quot;&gt;\n    &lt;link rel=&quot;preconnect&quot; href=&quot;https:\/\/fonts.gstatic.com&quot; crossorigin&gt;\n    &lt;link href=&quot;https:\/\/fonts.googleapis.com\/css2             family=Hahmlet:wght@100..900&amp;family=Noto+Sans+KR:wght@100..900&amp;display=swap&quot;\n        rel=&quot;stylesheet&quot;&gt;\n    &lt;!-- \uc6f9\ud3f0\ud2b8 link \ud0dc\uadf8 \ub05d --&gt;\n    \n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;h1&gt;\uacb0\uacfc\ubb3c&lt;\/h1&gt;\n    &lt;ul&gt;\n        &lt;li&gt;\uc801\uc6a9\uc548\ud568&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-100&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 100&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-200&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 200&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-300&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 300&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-400&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 400&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-500&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 500&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-600&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 600&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-700&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 700&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-800&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 800&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-900&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 900&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/body&gt;\n\n&lt;\/html&gt;\" style=\"color:#d8dee9ff;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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!<\/span><span style=\"color: #D8DEE9\">DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">lang<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">ko<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">UTF-8<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">viewport<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">width=device-width, initial-scale=1.0<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">\uc6f9\ud3f0\ud2b8<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\/css\/font.css<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    &lt;!-- \uc6f9\ud3f0\ud2b8 link \ud0dc\uadf8 \uc2dc\uc791 --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">preconnect<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/fonts.googleapis.com<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">preconnect<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/fonts.gstatic.com<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">crossorigin<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/fonts.googleapis.com\/css2             family=Hahmlet:wght@100..900&amp;family=Noto+Sans+KR:wght@100..900&amp;display=swap<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    &lt;!-- \uc6f9\ud3f0\ud2b8 link \ud0dc\uadf8 \ub05d --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;h1&gt;<\/span><span style=\"color: #D8DEE9FF\">\uacb0\uacfc\ubb3c<\/span><span style=\"color: #81A1C1\">&lt;\/h1&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;ul&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li&gt;<\/span><span style=\"color: #D8DEE9FF\">\uc801\uc6a9\uc548\ud568<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-100<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 100<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-200<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 200<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-300<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 300<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-400<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 400<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-500<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 500<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-600<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 600<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-700<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 700<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-800<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 800<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-900<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 900<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/ul&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p> <strong>&#8220;Embed code in the &lt;head> of your html&#8221;<\/strong> \ubd80\ubd84\uc5d0 \uc801\ud78c \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc5ec html \ud5e4\ub354\ud0dc\uadf8 \uc0ac\uc774\uc5d0 \ub123\uc5b4\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<p><\/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;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:#2e3440ff\"><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;uniquifier&gt;: Use a unique and descriptive class name *\/\n\/* &lt;weight&gt;: Use a value from 100 to 900 *\/\n\n.hahmlet-100 {\n  font-family: &quot;Hahmlet&quot;, serif;\n  font-optical-sizing: auto;\n  font-weight: 100;\n  font-style: normal;\n}\n.hahmlet-200 {\n    font-family: &quot;Hahmlet&quot;, serif;\n    font-optical-sizing: auto;\n    font-weight: 200;\n    font-style: normal;\n  }\n  .hahmlet-300 {\n    font-family: &quot;Hahmlet&quot;, serif;\n    font-optical-sizing: auto;\n    font-weight: 300;\n    font-style: normal;\n  }\n  .hahmlet-400 {\n    font-family: &quot;Hahmlet&quot;, serif;\n    font-optical-sizing: auto;\n    font-weight: 400;\n    font-style: normal;\n  }\n  .hahmlet-500 {\n    font-family: &quot;Hahmlet&quot;, serif;\n    font-optical-sizing: auto;\n    font-weight: 500;\n    font-style: normal;\n  }\n  .hahmlet-600 {\n    font-family: &quot;Hahmlet&quot;, serif;\n    font-optical-sizing: auto;\n    font-weight: 600;\n    font-style: normal;\n  }\n  .hahmlet-700 {\n    font-family: &quot;Hahmlet&quot;, serif;\n    font-optical-sizing: auto;\n    font-weight: 700;\n    font-style: normal;\n  }\n  .hahmlet-800 {\n    font-family: &quot;Hahmlet&quot;, serif;\n    font-optical-sizing: auto;\n    font-weight: 800;\n    font-style: normal;\n  }\n  .hahmlet-900 {\n    font-family: &quot;Hahmlet&quot;, serif;\n    font-optical-sizing: auto;\n    font-weight: 900;\n    font-style: normal;\n  }\" style=\"color:#d8dee9ff;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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #616E88\">\/* &lt;uniquifier&gt;: Use a unique and descriptive class name *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/* &lt;weight&gt;: Use a value from 100 to 900 *\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">200<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">200<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">300<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">300<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">400<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">400<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">500<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">600<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">600<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">700<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">700<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">800<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">800<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">900<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">900<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>&#8220;Hahmlet: CSS class for a variable style&#8221;<\/strong> \ubd80\ubd84\uc5d0 \uc801\ud78c \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc5ec css \ud30c\uc77c\uc5d0 \ub123\uc5b4\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub54c \uc800\ub294 <code>&lt;uniquifier&gt;<\/code> \ubd80\ubd84\uc5d0 <code>weight<\/code> \ub97c \uc801\uc5b4\uc8fc\uc5b4 \ud074\ub798\uc2a4 \uc0ac\uc6a9 \uc2dc \ud3f0\ud2b8 \ub450\uaed8\ub97c \uad6c\ubb38 \ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"463\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-11.png\" alt=\"\" class=\"wp-image-1136\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-11.png 795w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-11-300x175.png 300w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-11-768x447.png 768w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2-2_html_%ED%97%A4%EB%8D%94%EC%97%90_import_%EC%B6%94%EA%B0%80_css_%ED%8C%8C%EC%9D%BC%EC%97%90_class_%EC%83%9D%EC%84%B1\"><\/span>2-2<strong>. html \ud5e4\ub354\uc5d0 &lt;style> @import \ucd94\uac00 + css \ud30c\uc77c\uc5d0 class \uc0dd\uc131<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-12-1024x612.png\" alt=\"\" class=\"wp-image-1139\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-12-1024x612.png 1024w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-12-300x179.png 300w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-12-768x459.png 768w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-12.png 1395w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>@import \ub97c \uccb4\ud06c\ud558\uba74 html \ud5e4\ub4dc \ud0dc\uadf8\uc5d0 \ub123\uc744 \uc2a4\ud0c0\uc77c \ud0dc\uadf8\uac00 \ub098\uc635\ub2c8\ub2e4<\/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;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:#2e3440ff\"><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;ko&quot;&gt;\n\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;\uc6f9\ud3f0\ud2b8&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;\/css\/font.css&quot;&gt;\n    \n    &lt;!-- \uc6f9\ud3f0\ud2b8 style \ud0dc\uadf8 \uc2dc\uc791 --&gt;\n    &lt;style&gt;\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Hahmlet:wght@100..900&amp;display=swap');\n    &lt;\/style&gt;\n    &lt;!-- \uc6f9\ud3f0\ud2b8 style \ud0dc\uadf8 \ub05d --&gt;\n    \n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;h1&gt;\uacb0\uacfc\ubb3c&lt;\/h1&gt;\n    &lt;ul&gt;\n        &lt;li&gt;\uc801\uc6a9\uc548\ud568&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-100&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 100&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-200&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 200&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-300&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 300&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-400&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 400&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-500&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 500&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-600&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 600&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-700&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 700&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-800&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 800&lt;\/li&gt;\n        &lt;li class=&quot;hahmlet-900&quot;&gt;\ud074\ub798\uc2a4\uba85: font-weight 900&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/body&gt;\n\n&lt;\/html&gt;\" style=\"color:#d8dee9ff;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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!<\/span><span style=\"color: #D8DEE9\">DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">lang<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">ko<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">UTF-8<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">viewport<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">width=device-width, initial-scale=1.0<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">\uc6f9\ud3f0\ud2b8<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">\/css\/font.css<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    &lt;!-- \uc6f9\ud3f0\ud2b8 style \ud0dc\uadf8 \uc2dc\uc791 --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        @import url(&#39;https:\/\/fonts.googleapis.com\/css2?family=Hahmlet:wght@100..900&amp;display=swap&#39;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    &lt;!-- \uc6f9\ud3f0\ud2b8 style \ud0dc\uadf8 \ub05d --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;h1&gt;<\/span><span style=\"color: #D8DEE9FF\">\uacb0\uacfc\ubb3c<\/span><span style=\"color: #81A1C1\">&lt;\/h1&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;ul&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li&gt;<\/span><span style=\"color: #D8DEE9FF\">\uc801\uc6a9\uc548\ud568<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-100<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 100<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-200<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 200<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-300<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 300<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-400<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 400<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-500<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 500<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-600<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 600<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-700<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 700<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-800<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 800<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">&lt;li<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">hahmlet-900<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\ud074\ub798\uc2a4\uba85: font-weight 900<\/span><span style=\"color: #81A1C1\">&lt;\/li&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/ul&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\uc544\uae4c\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c <strong>&#8220;Embed code in the &lt;head> of your html&#8221;<\/strong> \ubd80\ubd84\uc5d0 \uc801\ud78c \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc5ec html \ud5e4\ub354\ud0dc\uadf8 \uc0ac\uc774\uc5d0 \ub123\uc5b4\uc90d\ub2c8\ub2e4.<\/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;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:#2e3440ff\"><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;uniquifier&gt;: Use a unique and descriptive class name *\/\n\/* &lt;weight&gt;: Use a value from 100 to 900 *\/\n\n.hahmlet-100 {\n    font-family: &quot;Hahmlet&quot;, serif;\n    font-optical-sizing: auto;\n    font-weight: 100;\n    font-style: normal;\n  }\n  .hahmlet-200 {\n      font-family: &quot;Hahmlet&quot;, serif;\n      font-optical-sizing: auto;\n      font-weight: 200;\n      font-style: normal;\n    }\n    .hahmlet-300 {\n      font-family: &quot;Hahmlet&quot;, serif;\n      font-optical-sizing: auto;\n      font-weight: 300;\n      font-style: normal;\n    }\n    .hahmlet-400 {\n      font-family: &quot;Hahmlet&quot;, serif;\n      font-optical-sizing: auto;\n      font-weight: 400;\n      font-style: normal;\n    }\n    .hahmlet-500 {\n      font-family: &quot;Hahmlet&quot;, serif;\n      font-optical-sizing: auto;\n      font-weight: 500;\n      font-style: normal;\n    }\n    .hahmlet-600 {\n      font-family: &quot;Hahmlet&quot;, serif;\n      font-optical-sizing: auto;\n      font-weight: 600;\n      font-style: normal;\n    }\n    .hahmlet-700 {\n      font-family: &quot;Hahmlet&quot;, serif;\n      font-optical-sizing: auto;\n      font-weight: 700;\n      font-style: normal;\n    }\n    .hahmlet-800 {\n      font-family: &quot;Hahmlet&quot;, serif;\n      font-optical-sizing: auto;\n      font-weight: 800;\n      font-style: normal;\n    }\n    .hahmlet-900 {\n      font-family: &quot;Hahmlet&quot;, serif;\n      font-optical-sizing: auto;\n      font-weight: 900;\n      font-style: normal;\n    }\" style=\"color:#d8dee9ff;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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #616E88\">\/* &lt;uniquifier&gt;: Use a unique and descriptive class name *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/* &lt;weight&gt;: Use a value from 100 to 900 *\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">200<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">200<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">300<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">300<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">400<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">400<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">500<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">600<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">600<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">700<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">700<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">800<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">800<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">hahmlet<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">900<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">serif<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">optical<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">sizing<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">auto<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">900<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>css \ud30c\uc77c\uc5d0\ub3c4 \uc544\uae4c\uc640 \ub3d9\uc77c\ud558\uac8c<\/p>\n\n\n\n<p><strong>&#8220;Hahmlet: CSS class for a variable style&#8221;<\/strong> \ubd80\ubd84\uc5d0 \uc801\ud78c \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc5ec css \ud30c\uc77c\uc5d0 \ub123\uc5b4\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"731\" height=\"451\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-13.png\" alt=\"\" class=\"wp-image-1140\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-13.png 731w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-13-300x185.png 300w\" sizes=\"(max-width: 731px) 100vw, 731px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Download_%EB%A1%9C%EC%BB%AC_%ED%8F%B0%ED%8A%B8_%EC%A0%81%EC%9A%A9_%EB%B0%A9%EB%B2%95\"><\/span>3. Download (\ub85c\uceec \ud3f0\ud2b8 \uc801\uc6a9 \ubc29\ubc95)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\ub2e4\uc6b4\ub85c\ub4dc \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \uc120\ud0dd\ud55c \ud3f0\ud2b8\ub97c \ub2e4\uc6b4 \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc6f9\ud3f0\ud2b8 \ud30c\uc77c \ud655\uc7a5\uc790\ub85c\ub294 .woff(\uc6f9\uc624\ud508\ud3f0\ud2b8) .ttf(\ud2b8\ub8e8\ud0c0\uc785\ud3f0\ud2b8) .otf(\uc624\ud508\ud0c0\uc785\ud3f0\ud2b8) \ub4f1\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p>\uc800\uc758 \uacbd\uc6b0 \uc555\ucd95\uc744 \ud574\uc81c\ud558\ub2c8 \ub450\uaed8\ubcc4\ub85c ttf \ud30c\uc77c\uc774 \uc788\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"330\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-14-1024x330.png\" alt=\"\" class=\"wp-image-1142\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-14-1024x330.png 1024w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-14-300x97.png 300w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-14-768x247.png 768w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-14.png 1084w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3-1_%ED%8F%B0%ED%8A%B8_%ED%8C%8C%EC%9D%BC%EC%9D%98_%EC%A2%85%EB%A5%98\"><\/span>3-1. \ud3f0\ud2b8 \ud30c\uc77c\uc758 \uc885\ub958<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\ud3f0\ud2b8 \ud30c\uc77c\uc740 \uae00\uaf34\uc744 \ub514\uc9c0\ud138 \uc7a5\uce58\uc5d0\uc11c \ud45c\uc2dc\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub418\ub294 \ud30c\uc77c \ud615\uc2dd\uc785\ub2c8\ub2e4. \uac01\uac01\uc758 \ud30c\uc77c \ud615\uc2dd\uc740 \ud2b9\uc815\ud55c \uc7a5\uc810\uacfc \uc6a9\ub3c4\ub85c \uc0ac\uc6a9\ub418\uba70, \uc544\ub798\uc5d0 \uc8fc\uc694\ud55c \ud3f0\ud2b8 \ud30c\uc77c \ud615\uc2dd\uc5d0 \ub300\ud55c \uc124\uba85\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>TTF (TrueType Font)<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\uc124\uba85<\/strong>: TTF\ub294 1980\ub144\ub300 \ud6c4\ubc18\uc5d0 Apple\uacfc Microsoft\uac00 \uacf5\ub3d9 \uac1c\ubc1c\ud55c \ud3f0\ud2b8 \ud30c\uc77c \ud615\uc2dd\uc785\ub2c8\ub2e4. \uac00\uc7a5 \ub110\ub9ac \uc0ac\uc6a9\ub418\ub294 \ud3ec\ub9f7 \uc911 \ud558\ub098\ub85c, \ub2e8\uc21c\ud558\uba74\uc11c\ub3c4 \ub192\uc740 \ud638\ud658\uc131\uc744 \uc790\ub791\ud569\ub2c8\ub2e4. TTF \ud30c\uc77c\uc740 \uae00\uaf34\uc758 \uc2a4\ud06c\ub9b0\uacfc \uc778\uc1c4 \ud488\uc9c8\uc744 \uc720\uc9c0\ud558\uae30 \uc704\ud574 \ube44\ud2b8\ub9f5 \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uc7a5\uc810<\/strong>: \ub300\ubd80\ubd84\uc758 \uc6b4\uc601 \uccb4\uc81c\uc640 \ud638\ud658\ub418\uba70, \uac04\ub2e8\ud55c \uad6c\uc870\ub85c \uc778\ud574 \ube60\ub978 \ub80c\ub354\ub9c1 \uc18d\ub3c4\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>OTF (OpenType Font)<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\uc124\uba85<\/strong>: OTF\ub294 TrueType\uc758 \ubc1c\uc804\ub41c \ubc84\uc804\uc73c\ub85c, Adobe\uc640 Microsoft\uac00 \uacf5\ub3d9 \uac1c\ubc1c\ud55c \ud3ec\ub9f7\uc785\ub2c8\ub2e4. OTF\ub294 TTF\uc640\ub294 \ub2ec\ub9ac \ube44\ud2b8\ub9f5 \ub300\uc2e0 \uace1\uc120 \ub370\uc774\ud130\ub97c \uae30\ubc18\uc73c\ub85c \ud558\uba70, \ub354 \ub9ce\uc740 \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \uae30\ub2a5\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ub2e4\uc591\ud55c \uc5b8\uc5b4\uc758 \uae00\uc790 \ud615\ud0dc, \uc11c\uccb4 \uc2a4\ud0c0\uc77c, \ub9ac\uac00\ucc98(ligatures) \ub4f1\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uc7a5\uc810<\/strong>: \ub2e4\uc591\ud55c \uae00\uaf34 \uae30\ub2a5\uacfc \ub192\uc740 \ud655\uc7a5\uc131\uc744 \uc81c\uacf5\ud558\uba70, \uc778\uc1c4\uc640 \ub514\uc9c0\ud138 \ub514\uc2a4\ud50c\ub808\uc774 \ubaa8\ub450\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>WOFF (Web Open Font Format)<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\uc124\uba85<\/strong>: WOFF\ub294 \uc6f9\uc5d0\uc11c \ud3f0\ud2b8\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \uac1c\ubc1c\ub41c \ud30c\uc77c \ud615\uc2dd\uc785\ub2c8\ub2e4. TTF\ub098 OTF\uc640 \uac19\uc740 \ud3f0\ud2b8\ub97c \uc555\ucd95\ud558\uc5ec \uc6f9 \ud398\uc774\uc9c0\uc5d0 \ud3ec\ud568\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4. \uc774\ub294 \uc6f9 \ud398\uc774\uc9c0 \ub85c\ub529 \uc2dc\uac04\uc744 \ub2e8\ucd95\ud558\uace0, \ud3f0\ud2b8\ub97c \ubcf4\ud638\ud558\ub294 \ub370 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uc7a5\uc810<\/strong>: \uc6f9\uc5d0\uc11c \uc0ac\uc6a9\ud558\uae30\uc5d0 \uc801\ud569\ud558\uba70, \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc5ec \ub85c\ub529 \uc18d\ub3c4\ub97c \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>WOFF2 (Web Open Font Format 2)<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\uc124\uba85<\/strong>: WOFF2\ub294 WOFF\uc758 \ud6c4\uc18d \ubc84\uc804\uc73c\ub85c, \ub354 \ub192\uc740 \uc555\ucd95\ub960\uc744 \uc81c\uacf5\ud558\uc5ec \ud30c\uc77c \ud06c\uae30\ub97c \ub354\uc6b1 \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. Google\uc774 \uc8fc\ub3c4\ud558\uc5ec \uac1c\ubc1c\ud55c \uc774 \ud3ec\ub9f7\uc740 \ub354\uc6b1 \ucd5c\uc801\ud654\ub41c \uc6f9 \ud3f0\ud2b8 \ub80c\ub354\ub9c1\uc744 \uac00\ub2a5\ud558\uac8c \ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uc7a5\uc810<\/strong>: WOFF\ubcf4\ub2e4 \ub354 \uc791\uc740 \ud30c\uc77c \ud06c\uae30\ub97c \uc81c\uacf5\ud558\uba70, \uc6f9\uc5d0\uc11c \ud3f0\ud2b8 \ud30c\uc77c\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \uc804\uc1a1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\uc774\uc640 \uac19\uc740 \ud3f0\ud2b8 \ud30c\uc77c \ud615\uc2dd\uc740 \uac01\uae30 \ub2e4\ub978 \uc6a9\ub3c4\uc640 \ud50c\ub7ab\ud3fc\uc5d0\uc11c \ucd5c\uc801\uc758 \uc131\ub2a5\uc744 \ubc1c\ud718\ud558\uba70, \ub514\uc790\uc774\ub108\uc640 \uac1c\ubc1c\uc790\ub294 \uc774\ub4e4 \uc911 \uc801\uc808\ud55c \ud30c\uc77c \ud615\uc2dd\uc744 \uc120\ud0dd\ud558\uc5ec \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3-2_%EB%A1%9C%EC%BB%AC_%ED%8F%B0%ED%8A%B8_%EC%A0%81%EC%9A%A9\"><\/span>3-2. \ub85c\uceec \ud3f0\ud2b8 \uc801\uc6a9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\ub2e4\uc6b4 \ubc1b\uc740 \ud3f0\ud2b8\ub97c <code>fonts<\/code> \ud3f4\ub354\uc5d0 \ub123\uace0 <code>font.css<\/code> \ud30c\uc77c\uc5d0 \ub0b4\uc6a9\uc744 \ucd94\uac00 \ud574\uc90d\ub2c8\ub2e4.<\/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;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:#2e3440ff\"><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=\"@font-face {\n    font-family: &quot;Hahmlet&quot;;\n    font-weight: 100;\n    font-style: normal;\n    src: url('\/fonts\/Hahmlet\/Hahmlet-Thin.ttf') format('truetype');\n}\n@font-face {\n  font-family: &quot;Hahmlet&quot;;\n  font-weight: 200;\n  font-style: normal;\n  src: url('\/fonts\/Hahmlet\/Hahmlet-ExtraLight.ttf') format('truetype');\n}\n@font-face {\n  font-family: &quot;Hahmlet&quot;;\n  font-weight: 300;\n  font-style: normal;\n  src: url('\/fonts\/Hahmlet\/Hahmlet-Light.ttf') format('truetype');\n}\n@font-face {\n  font-family: &quot;Hahmlet&quot;;\n  font-weight: 400;\n  font-style: normal;\n  src: url('\/fonts\/Hahmlet\/Hahmlet-Regular.ttf') format('truetype');\n}\n@font-face {\n  font-family: &quot;Hahmlet&quot;;\n  font-weight: 500;\n  font-style: normal;\n  src: url('\/fonts\/Hahmlet\/Hahmlet-Medium.ttf') format('truetype');\n}\n@font-face {\n  font-family: &quot;Hahmlet&quot;;\n  font-weight: 600;\n  font-style: normal;\n  src: url('\/fonts\/Hahmlet\/Hahmlet-SemiBold.ttf') format('truetype');\n}\n@font-face {\n  font-family: &quot;Hahmlet&quot;;\n  font-weight: 700;\n  font-style: normal;\n  src: url('\/fonts\/Hahmlet\/Hahmlet-Bold.ttf') format('truetype');\n}\n@font-face {\n  font-family: &quot;Hahmlet&quot;;\n  font-weight: 800;\n  font-style: normal;\n  src: url('\/fonts\/Hahmlet\/Hahmlet-ExtraBold.ttf') format('truetype');\n}\n@font-face {\n  font-family: &quot;Hahmlet&quot;;\n  font-weight: 900;\n  font-style: normal;\n  src: url('\/fonts\/Hahmlet\/Hahmlet-Black.ttf') format('truetype');\n}\n\n\n\/* \uc0ac\uc6a9\ud560 \ubd80\ubd84\uc5d0 \ud3f0\ud2b8 \uc801\uc6a9 *\/\nbody{\n  font-family: &quot;Hahmlet&quot;;\n}\n\" style=\"color:#d8dee9ff;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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet\/Hahmlet-Thin.ttf<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">truetype<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">200<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet\/Hahmlet-ExtraLight.ttf<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">truetype<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">300<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet\/Hahmlet-Light.ttf<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">truetype<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">400<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet\/Hahmlet-Regular.ttf<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">truetype<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">500<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet\/Hahmlet-Medium.ttf<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">truetype<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">600<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet\/Hahmlet-SemiBold.ttf<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">truetype<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">700<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet\/Hahmlet-Bold.ttf<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">truetype<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">800<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet\/Hahmlet-ExtraBold.ttf<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">truetype<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">900<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet\/Hahmlet-Black.ttf<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">truetype<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/* \uc0ac\uc6a9\ud560 \ubd80\ubd84\uc5d0 \ud3f0\ud2b8 \uc801\uc6a9 *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">body<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>font-family :<\/strong> <code>\"Hahmlet\"<\/code>\ub294 \uc0ac\uc6a9\uc790\uac00 \uc9c0\uc815\ud55c \ud3f0\ud2b8\uc758 \uc774\ub984\uc785\ub2c8\ub2e4. CSS\uc5d0\uc11c \uc774 \uc774\ub984\uc73c\ub85c \ud3f0\ud2b8\ub97c \ucc38\uc870\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>src <\/strong>: \ud3f0\ud2b8 \ud30c\uc77c\uc758 \uacbd\ub85c\ub97c \uc9c0\uc815\ud569\ub2c8\ub2e4. \uc704\uc758 \uc608\uc2dc\uc5d0\uc11c\ub294 .ttf \ub9cc \uc788\uc9c0\ub9cc<code> .woff2<\/code>, <code>.woff<\/code>, <code>.ttf<\/code> \ud30c\uc77c \ub4f1\uc744 \uc5ec\ub7ec \uac1c \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\ube0c\ub77c\uc6b0\uc800\ub294 \uac00\ub2a5\ud55c \uccab \ubc88\uc9f8 \ud30c\uc77c\uc744 \uc0ac\uc6a9\ud558\uba70, \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uacbd\uc6b0 \ub2e4\uc74c \ud30c\uc77c\uc744 \uc2dc\ub3c4\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc5ec\ub7ec \uac1c\uc758 \ud3f0\ud2b8 \ud30c\uc77c\uc744 \ubd88\ub7ec\uc62c \uacbd\uc6b0 \uac00\uc7a5 \ud06c\uae30\uac00 \uc791\uc740 \ud30c\uc77c\ubd80\ud130 \uc21c\uc11c\ub300\ub85c \uc4f0\ub294 \uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. (\uc608\uc2dc, woff2 &#8211; woff &#8211; ttf)\n<ul class=\"wp-block-list\">\n<li><code>local()<\/code> : \uc0ac\uc6a9\uc790\uc758 \ub85c\uceec\ud658\uacbd\uc5d0 \uc124\uce58\ub41c \ud3f0\ud2b8\ub294 local() \uc774\ub77c\ub294 \uad6c\ubb38\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc9c0\uc815\uac00\ub2a5<\/li>\n\n\n\n<li><code>url()<\/code> : \ud30c\uc77c\uc758 \uc704\uce58\ub97c \ub098\ud0c0\ub0b4\ub294 URL \uac12<\/li>\n\n\n\n<li><code>format()<\/code> : \ud30c\uc77c \ud615\uc2dd\uc744 \uc9c0\uc815 <code>woff<\/code>,  <code>woff2<\/code>, <code>truetype<\/code>, <code>opentype<\/code>, <code>embedded-opentype<\/code>, <code>svg<\/code> \uc911\uc5d0 \uc120\ud0dd<\/li>\n<\/ul>\n<\/li>\n<\/ul>\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;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:#2e3440ff\"><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=\"\/* \uc5ec\ub7ec\uac1c\uc758 src \uc608\uc2dc *\/\n@font-face {\n    font-family: &quot;Hahmlet&quot;;\n    src: local('Hahmlet-Medium'),\n        url('\/fonts\/Hahmlet-Medium.woff2') format('woff2'),\n        url('\/fonts\/Hahmlet-Medium.woff') format('woff'),\n        url('\/fonts\/Hahmlet-Medium.ttf') format('truetype');\n    font-weight: 500;\n    font-style: normal;\n}\" style=\"color:#d8dee9ff;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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #616E88\">\/* \uc5ec\ub7ec\uac1c\uc758 src \uc608\uc2dc *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Hahmlet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">local<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Hahmlet-Medium<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet-Medium.woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet-Medium.woff<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/fonts\/Hahmlet-Medium.ttf<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">truetype<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">500<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>font-weight<\/strong> \ubc0f <strong>font-style<\/strong>: \ud3f0\ud2b8\uc758 \uad75\uae30\uc640 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud569\ub2c8\ub2e4. \ud544\uc694\uc5d0 \ub530\ub77c <code>bold<\/code>, <code>italic<\/code> \ub4f1\uc758 \uac12\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"432\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-15.png\" alt=\"\" class=\"wp-image-1145\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-15.png 740w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-15-300x175.png 300w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_CDN_%EC%82%AC%EC%9A%A9\"><\/span>4. CDN \uc0ac\uc6a9 <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Content Delivery Network \uc758 \uc57d\uc790\ub85c \uc815\uc801\uc778 \ud30c\uc77c\ub4e4\uc744 \uc804\uc138\uacc4\uc5d0 \ubd84\uc0b0\ub41c \uc5ec\ub7ec \uc11c\ubc84\uc5d0 \uc800\uc7a5\ud574 \ub450\uace0, \uc0ac\uc6a9\uc790\uac00 \ud574\ub2f9 \ud30c\uc77c\uc5d0 \uc811\uadfc\ud560 \ub54c \uc790\ub3d9\uc73c\ub85c \uac00\uc7a5 \uac00\uae4c\uc6b4 \uc11c\ubc84\uc5d0\uc11c \ud30c\uc77c\uc744 \uc81c\uacf5\ud558\ub294 \uae30\uc220\uc785\ub2c8\ub2e4. <\/p>\n\n\n\n<p>\uc790\uc8fc \uc0ac\uc6a9\ud558\ub294 \ub208\ub204 \uc0ac\uc774\ud2b8(https:\/\/noonnu.cc\/)\uc5d0\uc11c\ub3c4 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"814\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-18-1024x814.png\" alt=\"\" class=\"wp-image-1149\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-18-1024x814.png 1024w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-18-300x238.png 300w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-18-768x610.png 768w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-18-1536x1221.png 1536w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-18.png 1603w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\uc6f9\ud3f0\ud2b8\ub97c CDN \uc73c\ub85c \uc81c\uacf5\ud560 \uacbd\uc6b0 HTML \ud30c\uc77c\uc758 \ud5e4\ub354\uc5d0 \ubcc4\ub2e4\ub978 \ucca8\ubd80 \uc5c6\uc774<\/p>\n\n\n\n<p>CSS \ud30c\uc77c\uc5d0 \uc18c\uc2a4\ub97c \ucd94\uac00\ud558\uba74 \ubc14\ub85c \uc801\uc6a9\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/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;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:#2e3440ff\"><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=\"\/* \uc6f9\ud3f0\ud2b8 CDN\uc73c\ub85c \ucca8\ubd80 *\/\n@font-face {\n    font-family: 'Paperlogy';\n    src: url('https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-1Thin.woff2')   \n         format('woff2');\n    font-weight: 100;\n    font-style: normal;\n}\n@font-face {\n  font-family: 'Paperlogy';\n  src: url('https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-2ExtraLight.woff2') \n       format('woff2');\n  font-weight: 200;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'Paperlogy';\n  src: url('https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-3Light.woff2') \n      format('woff2');\n  font-weight: 300;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'Paperlogy';\n  src: url('https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-4Regular.woff2') \n       format('woff2');\n  font-weight: 400;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'Paperlogy';\n  src: url('https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-5Medium.woff2') \n       format('woff2');\n  font-weight: 500;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'Paperlogy';\n  src: url('https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-6SemiBold.woff2') \n       format('woff2');\n  font-weight: 600;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'Paperlogy';\n  src: url('https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-7Bold.woff2') \n       format('woff2');\n  font-weight: 700;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'Paperlogy';\n  src: url('https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-8ExtraBold.woff2') \n       format('woff2');\n  font-weight: 800;\n  font-style: normal;\n}\n@font-face {\n  font-family: 'Paperlogy';\n  src: url('https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-9Black.woff2') \n       format('woff2');\n  font-weight: 900;\n  font-style: normal;\n}\n\nbody{\n  font-family: 'Paperlogy';\n}\" style=\"color:#d8dee9ff;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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #616E88\">\/* \uc6f9\ud3f0\ud2b8 CDN\uc73c\ub85c \ucca8\ubd80 *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Paperlogy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-1Thin.woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)   <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">         <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Paperlogy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-2ExtraLight.woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">       <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">200<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Paperlogy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-3Light.woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">300<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Paperlogy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-4Regular.woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">       <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">400<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Paperlogy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-5Medium.woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">       <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">500<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Paperlogy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-6SemiBold.woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">       <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">600<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Paperlogy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-7Bold.woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">       <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">700<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Paperlogy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-8ExtraBold.woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">       <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">800<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D08770\">@font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D08770\">face<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Paperlogy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  src<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/fastly.jsdelivr.net\/gh\/projectnoonnu\/2408-3@1.0\/Paperlogy-9Black.woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">) <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">       <\/span><span style=\"color: #88C0D0\">format<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">woff2<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">weight<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">900<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">style<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">normal<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">body<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Paperlogy<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"369\" src=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-17.png\" alt=\"\" class=\"wp-image-1147\" srcset=\"https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-17.png 955w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-17-300x116.png 300w, https:\/\/youngrihan.com\/wp-content\/uploads\/2024\/08\/image-17-768x297.png 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_%EC%9B%B9%ED%8F%B0%ED%8A%B8_%EB%A1%9C%EC%BB%AC%ED%8F%B0%ED%8A%B8_CDN_%EB%B0%A9%EC%8B%9D%EC%9D%98_%EC%9E%A5%EB%8B%A8%EC%A0%90\"><\/span>5. \uc6f9\ud3f0\ud2b8, \ub85c\uceec\ud3f0\ud2b8, CDN \ubc29\uc2dd\uc758 \uc7a5\ub2e8\uc810<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%EC%9B%B9%ED%8F%B0%ED%8A%B8_Web_Font\"><\/span><strong>\uc6f9\ud3f0\ud2b8 (Web Font)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc815\uc758<\/strong>: \uc6f9\uc5d0\uc11c \uc9c1\uc811 URL\uc744 \ud1b5\ud574 \ubd88\ub7ec\uc624\ub294 \ud3f0\ud2b8. Google Fonts \uac19\uc740 \uc678\ubd80 \ud3f0\ud2b8 \uc81c\uacf5 \uc11c\ube44\uc2a4\uc5d0\uc11c \ub9c1\ud06c\ub97c \ud1b5\ud574 \ubd88\ub7ec\uc640 \uc0ac\uc6a9.<\/li>\n<\/ul>\n\n\n\n<p><strong>\uc7a5\uc810<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uac04\ud3b8\ud568<\/strong>: \uc678\ubd80 \uc11c\ube44\uc2a4\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ud3f0\ud2b8\ub97c \ub9c1\ud06c\ub85c \uac04\ub2e8\ud558\uac8c \ubd88\ub7ec\uc640 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uc790\ub3d9 \uc5c5\ub370\uc774\ud2b8<\/strong>: \ud3f0\ud2b8 \uc81c\uacf5 \uc11c\ube44\uc2a4\uc5d0\uc11c \ud3f0\ud2b8\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uba74, \uc790\ub3d9\uc73c\ub85c \ucd5c\uc2e0 \ubc84\uc804\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ub2e4\uc591\ud55c \uc120\ud0dd<\/strong>: \uc5ec\ub7ec \uc2a4\ud0c0\uc77c\uacfc \uc5b8\uc5b4\ub97c \uc9c0\uc6d0\ud558\ub294 \ub2e4\uc591\ud55c \ud3f0\ud2b8\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><strong>\ub2e8\uc810<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc758\uc874\uc131<\/strong>: \uc678\ubd80 \uc11c\ube44\uc2a4\uc5d0 \uc758\uc874\ud558\uac8c \ub418\ubbc0\ub85c, \uc11c\ube44\uc2a4 \uc81c\uacf5\uc790\uac00 \ub2e4\uc6b4\ub418\uac70\ub098 \ub290\ub824\uc9c0\uba74 \uc6f9\uc0ac\uc774\ud2b8\uc758 \ud3f0\ud2b8 \ub85c\ub529\uc5d0 \ubb38\uc81c\uac00 \uc0dd\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uc18d\ub3c4 \uc800\ud558<\/strong>: \uc678\ubd80 \ub9ac\uc18c\uc2a4\ub97c \ubd88\ub7ec\uc624\uae30 \ub54c\ubb38\uc5d0 \ud398\uc774\uc9c0 \ub85c\ub529 \uc18d\ub3c4\uc5d0 \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ub77c\uc774\uc120\uc2a4 \ubb38\uc81c<\/strong>: \ubb34\ub8cc\ub85c \uc81c\uacf5\ub418\ub294 \ud3f0\ud2b8\ub3c4 \ub77c\uc774\uc120\uc2a4 \uc870\uac74\uc744 \uc8fc\uc758 \uae4a\uac8c \ud655\uc778\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%EB%A1%9C%EC%BB%AC%ED%8F%B0%ED%8A%B8_Local_Font\"><\/span><strong>\ub85c\uceec\ud3f0\ud2b8 (Local Font)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc815\uc758<\/strong>: \ud3f0\ud2b8 \ud30c\uc77c\uc744 \uc6f9 \uc11c\ubc84\uc5d0 \uc9c1\uc811 \uc5c5\ub85c\ub4dc\ud558\uace0, CSS\uc758 <code>@font-face<\/code>\ub97c \ud1b5\ud574 \uc6f9\uc0ac\uc774\ud2b8\uc5d0 \uc801\uc6a9\ud558\ub294 \ubc29\uc2dd.<\/li>\n<\/ul>\n\n\n\n<p><strong>\uc7a5\uc810<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc81c\uc5b4 \uac00\ub2a5\uc131<\/strong>: \ud3f0\ud2b8 \ud30c\uc77c\uc744 \uc9c1\uc811 \uad00\ub9ac\ud560 \uc218 \uc788\uc5b4, \ud30c\uc77c\uc758 \ubc84\uc804\uc774\ub098 \uc2a4\ud0c0\uc77c\uc744 \uc644\uc804\ud788 \uc81c\uc5b4\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uc548\uc815\uc131<\/strong>: \uc678\ubd80 \uc11c\ube44\uc2a4\uc5d0 \uc758\uc874\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0, \uc11c\ubc84\uc758 \uc0c1\ud0dc\uac00 \uc548\uc815\uc801\uc774\ub77c\uba74 \ud3f0\ud2b8 \ub85c\ub529 \ubb38\uc81c\ub97c \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ub9de\ucda4\ud654<\/strong>: \ud3f0\ud2b8\uc758 \uc11c\ube0c\uc14b(subset)\uc744 \ub9cc\ub4e4\uc5b4 \ud544\uc694\ud55c \ubb38\uc790\ub9cc \ud3ec\ud568\ud55c \ud3f0\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud30c\uc77c \ud06c\uae30\ub97c \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><strong>\ub2e8\uc810<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc11c\ubc84 \ubd80\ud558<\/strong>: \ud3f0\ud2b8 \ud30c\uc77c\uc774 \uc11c\ubc84\uc5d0 \uc800\uc7a5\ub418\uc5b4 \uc788\uc5b4, \uc11c\ubc84\uc5d0 \ucd94\uac00\uc801\uc778 \ubd80\ud558\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uad00\ub9ac \ubd80\ub2f4<\/strong>: \ud3f0\ud2b8 \ud30c\uc77c\uc758 \uc124\uce58, \uc720\uc9c0\ubcf4\uc218 \ubc0f \ub77c\uc774\uc120\uc2a4 \uad00\ub9ac\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uce90\uc2f1 \ubd80\uc871<\/strong>: \uc6f9\ud3f0\ud2b8\ub098 CDN \ud3f0\ud2b8\uc5d0 \ube44\ud574, \ub2e4\ub978 \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc774 \ud3f0\ud2b8\uac00 \uce90\uc2dc\ub418\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 \uccab \ub85c\ub529 \uc2dc \ub290\ub9b4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CDN_Content_Delivery_Network_%EB%B0%A9%EC%8B%9D\"><\/span><strong>CDN (Content Delivery Network) \ubc29\uc2dd<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc815\uc758<\/strong>: \uc804 \uc138\uacc4\uc5d0 \ubd84\uc0b0\ub41c \uc11c\ubc84 \ub124\ud2b8\uc6cc\ud06c\ub97c \ud1b5\ud574 \ud3f0\ud2b8 \ud30c\uc77c\uc744 \uc81c\uacf5\ud558\ub294 \ubc29\uc2dd. \uc608\ub97c \ub4e4\uc5b4, Google Fonts, Adobe Fonts \ub4f1\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><strong>\uc7a5\uc810<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\ube60\ub978 \ub85c\ub529 \uc18d\ub3c4<\/strong>: \uc0ac\uc6a9\uc790\uc640 \uac00\uae4c\uc6b4 \uc11c\ubc84\uc5d0\uc11c \ud3f0\ud2b8\ub97c \ubd88\ub7ec\uc624\uae30 \ub54c\ubb38\uc5d0 \ub85c\ub529 \uc18d\ub3c4\uac00 \ube60\ub974\uace0 \uc548\uc815\uc801\uc785\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uad11\ubc94\uc704\ud55c \uce90\uc2f1<\/strong>: \uc778\uae30 \uc788\ub294 CDN \uc11c\ube44\uc2a4\uc758 \ud3f0\ud2b8\ub294 \uc774\ubbf8 \ub9ce\uc740 \uc0ac\uc6a9\uc790\uc758 \ube0c\ub77c\uc6b0\uc800\uc5d0 \uce90\uc2dc\ub418\uc5b4 \uc788\uc744 \uac00\ub2a5\uc131\uc774 \ub192\uc544, \ub354 \ube60\ub978 \ub85c\ub529\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uac04\ud3b8\ud568<\/strong>: \uc124\uc815\uc774 \uac04\ub2e8\ud558\uace0 \uc720\uc9c0\ubcf4\uc218 \ubd80\ub2f4\uc774 \uc801\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><strong>\ub2e8\uc810<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc81c\uc5b4 \ubd88\uac00<\/strong>: \ud3f0\ud2b8 \ud30c\uc77c\uc5d0 \ub300\ud55c \uc9c1\uc811\uc801\uc778 \uc81c\uc5b4\uac00 \ubd88\uac00\ub2a5\ud558\uba70, \ud3f0\ud2b8 \uc2a4\ud0c0\uc77c\uc774\ub098 \ubc84\uc804\uc744 \uc790\uc720\ub86d\uac8c \ubcc0\uacbd\ud558\uae30 \uc5b4\ub835\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\uc758\uc874\uc131<\/strong>: CDN \uc11c\ube44\uc2a4\uac00 \uc911\ub2e8\ub418\uac70\ub098 \ubb38\uc81c\uac00 \uc0dd\uae30\uba74 \ud3f0\ud2b8 \ub85c\ub529\uc5d0 \uc601\ud5a5\uc744 \ubbf8\uce60 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ud504\ub77c\uc774\ubc84\uc2dc \uc6b0\ub824<\/strong>: CDN\uc744 \uc0ac\uc6a9\ud560 \ub54c \uc0ac\uc6a9\uc790 \uc815\ubcf4\uac00 \ud574\ub2f9 \uc11c\ube44\uc2a4 \uc81c\uacf5\uc790\uc5d0\uac8c \ub178\ucd9c\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p><strong>\uc694\uc57d<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc6f9\ud3f0\ud2b8<\/strong>: \uc0ac\uc6a9\uc774 \uac04\ud3b8\ud558\uace0 \ub2e4\uc591\ud55c \uc120\ud0dd\uc9c0\uac00 \uc788\uc9c0\ub9cc, \uc678\ubd80 \uc11c\ube44\uc2a4\uc5d0 \uc758\uc874\ud574\uc57c \ud558\uba70 \uc18d\ub3c4 \uc800\ud558\uac00 \uc788\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>\ub85c\uceec\ud3f0\ud2b8<\/strong>: \ud3f0\ud2b8\ub97c \uc644\uc804\ud788 \uc81c\uc5b4\ud560 \uc218 \uc788\uace0 \uc548\uc815\uc801\uc774\uc9c0\ub9cc, \uc11c\ubc84 \ubd80\ud558\uc640 \uad00\ub9ac\uc758 \ubd80\ub2f4\uc774 \ub530\ub985\ub2c8\ub2e4.<\/li>\n\n\n\n<li><strong>CDN<\/strong>: \ube60\ub974\uace0 \uad11\ubc94\uc704\ud55c \uce90\uc2f1\uc774 \uac00\ub2a5\ud558\uc9c0\ub9cc, \uc81c\uc5b4\uad8c\uc774 \ubd80\uc871\ud558\uace0 \uc678\ubd80 \uc11c\ube44\uc2a4\uc5d0 \uc758\uc874\ud558\uac8c \ub429\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<p>\uac01 \ubc29\uc2dd\uc740 \uc6f9\uc0ac\uc774\ud2b8\uc758 \ud2b9\uc131\uacfc \uc694\uad6c\uc0ac\ud56d\uc5d0 \ub530\ub77c \uc801\uc808\ud558\uac8c \uc120\ud0dd\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. \uad6c\uae00 \ud3f0\ud2b8 \uc0ac\uc774\ud2b8 (Google Fonts) https:\/\/fonts.google.com\/ \uad6c\uae00 \ud3f0\ud2b8 \uc0ac\uc774\ud2b8\ub294 \ubb34\ub8cc\ub85c \ub2e4\uc591\ud55c \ud3f0\ud2b8\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc88c\uce21\uc758 Filter \ub97c \uc0ac\uc6a9\ud558\uc5ec \uc5b8\uc5b4\uc640 \uae00\uc790 \ubaa8\uc591 \ub4f1\uc744 \uc124\uc815\ud558\uc5ec \uac80\uc0c9\ud558\uba74 \ub354 \ucc3e\uae30 \uc27d\uc2b5\ub2c8\ub2e4. \uc6d0\ud558\ub294 \ud3f0\ud2b8 \ud074\ub9ad \ud6c4 \uc6b0\uce21 \uc0c1\ub2e8\uc5d0 Get font \ubc84\ud2bc\uc744 \ub20c\ub7ec\uc90d\ub2c8\ub2e4 \uadf8\ub7ec\uba74 \uc6b0\uce21\uc5d0 Get embed code\uc640 Download all \ubc84\ud2bc\uc774 \uc0dd\uae41\ub2c8\ub2e4 \uc774\ub54c, \uc88c\uce21\uc744 \ubcf4\uc2dc\uba74 Noto Sans Korean \uacfc&hellip;&nbsp;<a href=\"https:\/\/youngrihan.com\/%ea%b5%ac%ea%b8%80-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9-%eb%b0%a9%eb%b2%95-%ec%9b%b9-%ed%8f%b0%ed%8a%b8-%eb%a1%9c%ec%bb%ac-%ed%8f%b0%ed%8a%b8-cdn-%ec%9e%a5%eb%8b%a8%ec%a0%90\/\" class=\"\" rel=\"bookmark\">\ub354 \ubcf4\uae30 &raquo;<span class=\"screen-reader-text\">\uad6c\uae00 \ud3f0\ud2b8 \uc801\uc6a9 \ubc29\ubc95 (\uc6f9 \ud3f0\ud2b8, \ub85c\uceec \ud3f0\ud2b8, CDN \uc7a5\ub2e8\uc810)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1157,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[128],"tags":[155,157,156,151,150,154,152,147,149,153,148],"class_list":["post-1127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-style","tag-font-face","tag-oft-ttf-woff-","tag-ttf-woff-","tag-151","tag-150","tag-154","tag-152","tag-147","tag-149","tag-cdn","tag-148"],"_links":{"self":[{"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/posts\/1127"}],"collection":[{"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/comments?post=1127"}],"version-history":[{"count":8,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/posts\/1127\/revisions"}],"predecessor-version":[{"id":1151,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/posts\/1127\/revisions\/1151"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/media\/1157"}],"wp:attachment":[{"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/media?parent=1127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/categories?post=1127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/youngrihan.com\/wp-json\/wp\/v2\/tags?post=1127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}