Code - 2025_PROJECT/mjgo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="noindex, noarchive"> <meta name="format-detection" content="telephone=no"> <title>Transfonter demo</title> <link href="stylesheet.css" rel="stylesheet"> <style> /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* demo styles */ body { background: #f0f0f0; color: #000; } .page { background: #fff; width: 920px; margin: 0 auto; padding: 20px 20px 0 20px; overflow: hidden; } .font-container { overflow-x: auto; overflow-y: hidden; margin-bottom: 40px; line-height: 1.3; white-space: nowrap; padding-bottom: 5px; } h1 { position: relative; background: #444; font-size: 32px; color: #fff; padding: 10px 20px; margin: 0 -20px 12px -20px; } .letters { font-size: 25px; margin-bottom: 20px; } .s10:before { content: '10px'; } .s11:before { content: '11px'; } .s12:before { content: '12px'; } .s14:before { content: '14px'; } .s18:before { content: '18px'; } .s24:before { content: '24px'; } .s30:before { content: '30px'; } .s36:before { content: '36px'; } .s48:before { content: '48px'; } .s60:before { content: '60px'; } .s72:before { content: '72px'; } .s10:before, .s11:before, .s12:before, .s14:before, .s18:before, .s24:before, .s30:before, .s36:before, .s48:before, .s60:before, .s72:before { font-family: Arial, sans-serif; font-size: 10px; font-weight: normal; font-style: normal; color: #999; padding-right: 6px; } pre { display: block; padding: 9px; margin: 0 0 12px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.428571429; color: #333; font-weight: normal; font-style: normal; background-color: #f5f5f5; border: 1px solid #ccc; overflow-x: auto; border-radius: 4px; } /* responsive */ @media (max-width: 959px) { .page { width: auto; margin: 0; } } </style> </head> <body> <div class="page"> <div class="demo"> <h1 style="font-family: ''; font-weight: bold; font-style: normal;"></h1> <pre title="Usage">.your-style { font-family: ''; font-weight: bold; font-style: normal; }</pre> <pre title="Preload (optional)"> <link rel="preload" href="GmarketSansBold.woff2" as="font" type="font/woff2" crossorigin></pre> <div class="font-container" style="font-family: ''; font-weight: bold; font-style: normal;"> <p class="letters"> abcdefghijklmnopqrstuvwxyz<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 0123456789.:,;()*!?'@#<>$%&^+-=~ </p> <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> </div> </div> <div class="demo"> <h1 style="font-family: 'GmarketSansBold'; font-weight: bold; font-style: normal;">GmarketSansBold</h1> <pre title="Usage">.your-style { font-family: 'GmarketSansBold'; font-weight: bold; font-style: normal; }</pre> <pre title="Preload (optional)"> <link rel="preload" href="GmarketSansBold_1.woff2" as="font" type="font/woff2" crossorigin></pre> <div class="font-container" style="font-family: 'GmarketSansBold'; font-weight: bold; font-style: normal;"> <p class="letters"> abcdefghijklmnopqrstuvwxyz<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 0123456789.:,;()*!?'@#<>$%&^+-=~ </p> <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> </div> </div> <div class="demo"> <h1 style="font-family: ''; font-weight: 300; font-style: normal;"></h1> <pre title="Usage">.your-style { font-family: ''; font-weight: 300; font-style: normal; }</pre> <pre title="Preload (optional)"> <link rel="preload" href="NotoSansKR-Light-Alphabetic.woff2" as="font" type="font/woff2" crossorigin></pre> <div class="font-container" style="font-family: ''; font-weight: 300; font-style: normal;"> <p class="letters"> abcdefghijklmnopqrstuvwxyz<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 0123456789.:,;()*!?'@#<>$%&^+-=~ </p> <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> </div> </div> <div class="demo"> <h1 style="font-family: ''; font-weight: 500; font-style: normal;"></h1> <pre title="Usage">.your-style { font-family: ''; font-weight: 500; font-style: normal; }</pre> <pre title="Preload (optional)"> <link rel="preload" href="NotoSansKR-Medium-Alphabetic.woff2" as="font" type="font/woff2" crossorigin></pre> <div class="font-container" style="font-family: ''; font-weight: 500; font-style: normal;"> <p class="letters"> abcdefghijklmnopqrstuvwxyz<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 0123456789.:,;()*!?'@#<>$%&^+-=~ </p> <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> </div> </div> <div class="demo"> <h1 style="font-family: ''; font-weight: normal; font-style: normal;"></h1> <pre title="Usage">.your-style { font-family: ''; font-weight: normal; font-style: normal; }</pre> <pre title="Preload (optional)"> <link rel="preload" href="NotoSansKR-Regular-Alphabetic.woff2" as="font" type="font/woff2" crossorigin></pre> <div class="font-container" style="font-family: ''; font-weight: normal; font-style: normal;"> <p class="letters"> abcdefghijklmnopqrstuvwxyz<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 0123456789.:,;()*!?'@#<>$%&^+-=~ </p> <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> </div> </div> <div class="demo"> <h1 style="font-family: ''; font-weight: bold; font-style: normal;"></h1> <pre title="Usage">.your-style { font-family: ''; font-weight: bold; font-style: normal; }</pre> <pre title="Preload (optional)"> <link rel="preload" href="NotoSansKR-Bold-Alphabetic.woff2" as="font" type="font/woff2" crossorigin></pre> <div class="font-container" style="font-family: ''; font-weight: bold; font-style: normal;"> <p class="letters"> abcdefghijklmnopqrstuvwxyz<br> ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> 0123456789.:,;()*!?'@#<>$%&^+-=~ </p> <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p> <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p> <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p> <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p> <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p> <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p> <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p> <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p> <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p> <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p> <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p> </div> </div> </div> </body> </html>