PageSourceSearch

https://kimtaja.com/typing-practice.php

html kimtaja.com collected 2026-10-02 00:17:08 UTC 50,010 bytes, 1,175 lines download raw bytes

1
2<html lang="ko">
3<head>
4
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=1280">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
9    <title>자리연습 - 김타자</title>
10
11    <link rel="icon" href="/img/favicon.ico" type="image/x-icon" />
12    
13    <link rel="manifest" href="/manifest.webmanifest">
14    <meta name="theme-color" content="#0b1220">
15    <link rel="apple-touch-icon" href="/img/pwa/apple-touch-icon.png">
16    <meta name="apple-mobile-web-app-capable" content="yes">
17    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
18    <meta name="apple-mobile-web-app-title" content="김타자">
19    
20    
21            <meta name="description" content="추억 속 타자 연습의 귀환! 낱말연습, 단문연습, 긴글연습, 한글·영어 타자연습까지 모두 가능합니다. 웹에서 무료로 즐기는 레트로 타자게임!">
22        <meta name="keywords" content="타자연습, 낱말연습, 단문연습, 긴글연습, 자리연습, 한글타자, 영어타자, AI타자연습, 온라인타자, 타자속도, 타자게임, 무료타자연습, 속담, 영어속담, 사자성어, 불교, 탈무드, 잠언, 성경, 광고카피, 숫자연습, 김타자">
23        <meta property="og:title" content="자리연습 - 김타자" />
24        <meta property="og:description" content="웹에서 다시 만나는 타자 연습! 낱말·단문·긴글·영어·한글 연습까지. 김타자에서 지금 시작하세요!" />
25        <meta property="og:type" content="website" />
26    
27        
28    <meta property="og:image" content="https://kimtaja.com/img/img.jpg" />
29    <meta property="og:url" content="https://kimtaja.com/" />
30    <meta name="robots" content="index, follow">
31    <link rel="canonical" href="https://kimtaja.com/" />
32    
33    <meta name="google-adsense-account" content="ca-pub-9766686538571280">
34
35    
36    
36<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
36
37    
37<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
37
38        
38<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
38
39    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
40   
41    
41<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
41
42    
43    
44    
45    
46    
47        
48    
49        
50    
51            <link rel="stylesheet" href="/css/style.css?q=9158">
52        
53        
54        
55    
56        
57    
58    
59            
59<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9766686538571280" crossorigin="anonymous"></script>
59
60        
61    
62        
63        
63<script src="https://adrianotiger.github.io/web-esheep/dist/esheep.min.js"></script>
63
64    
64<script>
65        function addSheep(){ 
66            var count = Math.floor(Math.random() * 10) + 2;
67
68            for (let i = 0; i < count; i++) {
69                setTimeout(function () {
70                    var esheep = new eSheep();
71                    esheep.Start();
72                }, i * 300); // 0.3초 간격
73            }
74        }
75        //addSheep();
76    </script>
76
77    
78    
79
80
81<!-- Google tag (gtag.js) 1-->
vendor: 64 bytes, lines 81-82
81
82<script async src="https://www.googletagmanager.com/gtag/js?id=
82G-1WPMZ857B9
vendor: 12 bytes, line 82
82"></script>
83<script>
84  
vendor: 134 bytes, lines 84-88
84window.dataLayer = window.dataLayer || [];
85  function gtag(){dataLayer.push(arguments);}
86  gtag('js', new Date());
87
88  gtag('config', '
88G-1WPMZ857B9
vendor: 4 bytes, line 88
88');
89</script>
89
90    
91<!-- Google Tag Manager 2-->
92<script>
vendor: 327 bytes, lines 92-96
92(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
93new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
94j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
95'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
96})(window,document,'script','dataLayer','
96GTM-P2HH7RZV
vendor: 3 bytes, line 96
96');
96</script>
96
97<!-- End Google Tag Manager -->
98    
99
100
101</head>
102
103<body>
104
105<style>
106
107
108.progress-container {
109    display: flex;
110    align-items: center;
111    margin-bottom: 0px;
112    background-color: #787878;
113    color: white;
114    padding: 0px;
115    border-radius: 0px;
116}
117
118.progress-label {
119    margin-right: 10px;
120}
121
122#progress_bar {
123    height: 26px;
124    background-color: #0A0090;
125    border-radius: 0px;
126    transition: width 0.3s ease;
127}
128
129.char-container {
130    display: flex;
131    flex-wrap: wrap;
132    justify-content: center;
133    margin: 20px 0 30px 0;
134    gap: 12px;
135}
136
137.char {
138    width: 90px;
139    height: 90px;
140    display: flex;
141    align-items: center;
142    justify-content: center;
143    font-size: 55px;
144    font-weight: bold;
145    border: 0px solid #ddd;
146    border-radius: 6px;
147    background-color: white;
148    transition: all 0.3s ease;
149}
150
151.char.on {
152    border: 5px solid #0A0090;
153    border-color: #0A0090;
154    color: #0A0090;
155    font-size: 65px;
156    transform: scale(1.1);
157}
158
159.char.ok {
160    background-color: #e0e0e0;
161    color: #777;
162    font-size: 55px;
163    border-color: #bbb;
164    transform: scale(1);
165    border: 0px solid #0A0090;
166}
167
168.keyboard {
169    border-radius: 8px;
170    padding: 10px;
171    margin: 20px 0 20px 0;
172}
173
174.key-row {
175    display: flex;
176    justify-content: center;
177    margin-bottom: 8px;
178}
179
180.key {
181    width: 70px;
182    height: 70px;
183    display: flex;
184    align-items: center;
185    justify-content: center;
186    margin: 0 2px;
187    background-color: white;
188    border: 0px solid #ccc;
189    border-radius: 4px;
190    font-size: 30px;
191    cursor: default;
192    user-select: none;
193    transition: all 0.2s ease;
194}
195
196.key.down {
197    background-color: #666;
198    color: white;
199    border-color: #333;
200    transform: translateY(2px);
201    font-size: 40px;
202}
203
204.setup-overlay {
205    position: absolute;
206    top: 0;
207    left: 0;
208    right: 0;
209    bottom: 0;
210    background-color: rgba(0, 0, 0, 0.15);
211    display: flex;
212    justify-content: center;
213    align-items: center;
214    z-index: 10;
215    border-radius: 8px;
216}
217
218.setup-box {
219    background-color: white;
220    padding: 20px 20px 10px 20px;
221    border-radius: 0px;
222    width: 100%;
223    max-width: 500px; 
224    border: 1px solid #000;
225    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
226}
227
228.setup-title {
229    font-size: 25px;
230    font-weight: bold;
231    margin: 10px 0 25px 0;
232    text-align: center;
233}
234
235.option-group {
236    display: flex;
237    gap: 12px; /* 버튼 사이 여백 */
238    margin-bottom: 16px; /* 그룹끼리 간격 */
239}
240
241.option-group label {
242    display: flex;
243    align-items: center;
244    gap: 4px; /* 체크박스(또는 라디오)와 텍스트 사이 간격 */
245    font-size: 21px;
246    cursor: pointer;
247}
248
249
250.option-group input {
251    margin-right: 8px;
252}
253
254.key-visual {
255    margin: 15px 0;
256    text-align: center;
257    font-family: monospace;
258    font-size: 25px;
259    line-height: 0.9;
260    letter-spacing:0.1em;
261}
262
263.btn {
264    display: block;
265    width: 100%;
266    height: 45px;
267    background-color: #0A0090;
268    color: white;
269    border: none;
270    border-radius: 0px;
271    font-size: 23px;
272    font-weight: bold;
273    cursor: pointer;
274    transition: background-color 0.3s ease;
275    font-family: 'DOSMyungjo';
276}
277
278.btn:hover {
279    background-color: #070064;
280}
281
282
283
284
285.foot {padding:15px 0 70px 0;float:left; font-size: 13px;color: #B2B2B2; letter-spacing:-0.04em;}
286.foot a{color: #595959;}
287</style>
288
289<input type="hidden" name="token" id="token" value="5c909b6a1efe91431f009ae30526c269">
290
291
292<article class="clearfix">
293    
294    
295
296
297    <section class="main260528" style="position:relative;">
298        <div style="position:relative;top:2px;left:-95px;width:100px;border:0px solid red;"><a href="/pay.php" title="광고 제거 이용권"><img src="/img/ic_ad.png" width="100" alt="광고 제거 이용권" style="transform:rotate(15deg);"></a></div>
299<!--        <div style="position:relative;top:-59px;left:500px;width:720px;z-index:1000;color:#fff;font-size:20px;text-align:right;border:0px solid red;"><iframe src="/simple_ticker.php" scrolling="no" frameborder="0" width="100%" height="28"></iframe></div>-->
300        <div style="position:relative;top:20px;left:-110px;width:130px;z-index: -100;border:0px solid red;"><a href="/login.php" title="신규 회원가입 광고 제거 1개월"><img src="/img/ic_login.png" width="130" alt="신규 회원가입 광고 제거 1개월" style="transform:rotate(9deg);"></a></div>
301                <table style="padding-top:48px;position:absolute;top:0px;left:0px">
302            <tr>
303                <td><a href="/lic.php" title="타자속도 자격증"><img src="/img/bin.png" alt="타자속도 자격증" style="width:132px;height:40px;border:0px solid red;"></td>
304                <td><a href="/typing-practice.php" title="자리연습"><img src="/img/bin.png" alt="자리연습" style="width:87px;height:40px;border:0px solid red;"></td>
305                <td class="nav">
306                    <ul class="nav-menu">
307                        <li class="nav-item has-submenu">
308                            <a href="/short.php"><img src="/img/bin.png" alt="낱말연습" style="width:90px;height:40px;border:0px solid red;"></a>
309                            <div class="submenu" style="width: 508px;">
310                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
311                                <tr>
312                                    <td>
313                                        <div style="padding:4px 0 0 -3px"><a href="/short.php"><img src="/img/submenu_1.png" alt="낱말연습" style="width:254px;"></a></div>
314                                        <div><a href="/keyword.php"><img src="/img/submenu_keyword3.png" alt="AI 키워드" style="width:254px;"></a></div>
315                                        <div><a href="/worde.php"><img src="/img/submenu_2.png" alt="초등영어단어" style="width:254px;"></a></div>
316                                        <div><a href="/wordm.php"><img src="/img/submenu_3.png" alt="중등영어단어" style="width:254px;"></a></div>
317                                        <div><a href="/wordh.php"><img src="/img/submenu_4.png" alt="고등영어단어" style="width:254px;"></a></div>
318                                        <div><a href="/food.php"><img src="/img/submenu_food.png" alt="음식" style="width:254px;"></a></div>
319                                        <div><a href="/animal.php"><img src="/img/submenu_animal.png" alt="동물" style="width:254px;"></a></div>
320                                        <div><a href="/job.php"><img src="/img/submenu_job.png" alt="작업" style="width:254px;"></a></div>
321                                        <div><a href="/flower.php"><img src="/img/submenu_flower.png" alt="꽃" style="width:254px;"></a></div>
322                                        <div><a href="/computer.php"><img src="/img/submenu_com.png" alt="컴퓨터" style="width:254px;"></a></div>
323                                        <div><a href="/nature.php"><img src="/img/submenu_nature.png" alt="자연" style="width:254px;"></a></div>
324                                        <div><a href="/education.php"><img src="/img/submenu_education.png" alt="교육&학습" style="width:254px;"></a></div>
325                                        <div><a href="/travel.php"><img src="/img/submenu_travel.png" alt="세계여행" style="width:254px;"></a></div>
326                                        <div><a href="/sudo.php"><img src="/img/submenu_sudo.png" alt="수도" style="width:254px;"></a></div>
327                                        <div><a href="/city.php"><img src="/img/submenu_city2.png" alt="CITY" style="width:254px;"></a></div>
328                                    </td>
329                                    <td>
330                                        <div style="padding:4px 0 0 -3px"><a href="/element.php"><img src="/img/submenu_element.png" alt="원소 118" style="width:254px;"></a></div>
331                                        <div><a href="/1988.php"><img src="/img/submenu_881.png" alt="응답하라 1988" style="width:254px;"></a></div>
332                                        <div><a href="/wildsing.php"><img src="/img/submenu_ws.png" alt="와일드 씽" style="width:254px;"></a></div>
333                                        <div><a href="/celebrity.php"><img src="/img/submenu_celebrity.png" alt="유명인" style="width:254px;"></a></div>
334                                        <div><a href="/subway.php"><img src="/img/submenu_subway.png" alt="지하철역" style="width:254px;"></a></div>
335                                        <div><a href="/jiyeog.php"><img src="/img/submenu_jiyeog.png" alt="행정구역" style="width:254px;"></a></div>
336                                        <div><a href="/sajaseongeo.php"><img src="/img/submenu_5.png" alt="사자성어" style="width:254px;"></a></div>
337                                        <div><a href="/thousand.php"><img src="/img/submenu_t.png" alt="천자문" style="width:254px;"></a></div>
338                                        <div><a href="/gugudan.php"><img src="/img/submenu_ggd.png" alt="구구단" style="width:254px;"></a></div>
339                                        <div><a href="/number.php"><img src="/img/submenu_num.png" alt="숫자" style="width:254px;"></a></div>
340                                        <div><a href="/constellation.php"><img src="/img/submenu_constellation.png" alt="CONSTELLATIONS" style="width:254px;"></a></div>
341                                        <div><a href="/symbol.php"><img src="/img/submenu_symbol.png" alt="특수문자" style="width:254px;"></a></div>
342                                        <div><a href="/uppercase.php"><img src="/img/submenu_upp.png" alt="UPPERCASE" style="width:254px;"></a></div>
343                                        <div><a href="/lowercase.php"><img src="/img/submenu_low1.png" alt="lowercase" style="width:254px;"></a></div>
344                                        <div><a href="/joseon.php"><img src="/img/submenu_king.png" alt="조선왕조" style="width:254px;"></a></div>
345<!--                                        <div><a href="/"><img src="/img/submenu_bin.png" alt="" style="width:254px;"></a></div>-->
346                                    </td>
347                                </tr>
348                                </table>
349                            </div>
350                        </li>
351                    </ul>
352                </td>
353                <td><a href="/?c=2007" title="속담2007"><img src="/img/bin.png" alt="속담2007" style="width:90px;height:40px;border:0px solid red;"></a></td>
354                <td><a href="/?c=enproverb" title="영어속담"><img src="/img/bin.png" alt="영어속담" style="width:133px;
354height:40px;border:0px solid red;"></a></td>
355                <td><a href="/?c=history" title="한국사"><img src="/img/bin.png" alt="한국사" style="width:115px;height:40px;border:0px solid red;"></a></td>
356                <td><a href="/?c=buddhism" title="불교"><img src="/img/bin.png" alt="불교" style="width:89px;height:40px;border:0px solid red;"></a></td>
357                <td><a href="/?c=jameon" title="잠언"><img src="/img/bin.png" alt="잠언" style="width:87px;height:40px;border:0px solid red;"></a></td>
358                <td><a href="/long.php" title="긴글연습"><img src="/img/bin.png" alt="긴글연습" style="width:88px;height:40px;border:0px solid red;"></a></td>
359                <td class="nav">
360                    <ul class="nav-menu">
361                        <li class="nav-item has-submenu">
362                            <a href="/game.php" title="산성비"><img src="/img/bin.png" alt="산성비" style="width:90px;height:40px;border:0px solid red;"></a>
363                            <div class="submenu">
364                                <div style="padding:4px 0 0 -4px"><a href="/chat.php"><img src="/img/submenu_chat.png" alt="대화창" style="width:254px;"></a></div>
365                                <div><a href="/chat-game.php" target="_blank"><img src="/img/submenu_chat_game.png" alt="채팅게임" style="width:254px;"></a></div>
366                                <div><a href="/balloon.php"><img src="/img/submenu_balloon.png" alt="열기구" style="width:254px;"></a></div>
367                                <div><a href="/balloone.php"><img src="/img/submenu_balloone.png" alt="BALLOON" style="width:254px;"></a></div>
368                                <div><a href="/game.php"><img src="/img/rain.png" alt="산성비" style="width:254px;"></a></div>
369                                <div><a href="/bible.php"><img src="/img/submenu_bible.png" alt="산성비-성경" style="width:254px;"></a></div>
370                                <div><a href="/buddhism.php"><img src="/img/submenu_buddhism.png" alt="산성비-불교" style="width:254px;"></a></div>
371                                <div><a href="/gamee.php"><img src="/img/submenu_acidrain.png" alt="ACIDRAIN" style="width:254px;"></a></div>
372                                <div><a href="/jawonkaegi.php"><img src="/img/submenu_resource_collecting.png" alt="자원캐기" style="width:254px;"></a></div>
373                                <div><a href="/resource-collecting.php"><img src="/img/submenu_resource_collecting1.png" alt="RESOURCE COLLECTING" style="width:254px;"></a></div>
374                                <div><a href="/dudeoji.php"><img src="/img/submenu_d.png" alt="두더지" style="width:254px;"></a></div>
375                                <div><a href="/num.php"><img src="/img/submenu_n.png" alt="숫자판 맞추기" style="width:254px;"></a></div>
376                                <div><a href="/air.php"><img src="/img/submenu_a1.png" alt="비행기" style="width:254px;"></a></div>
377                                <div><a href="/taegbae.php"><img src="/img/submenu_tb.png" alt="택배 분류" style="width:254px;"></a></div>
378                                <div><a href="/yeonseubjang.php"><img src="/img/submenu_y.png" alt="연습장" style="width:254px;"></a></div>
379                            </div>
380                        </li>
381                    </ul>
382                </td>
383                <td><a href="/record.php" title="통계"><img src="/img/bin.png" alt="통계" style="width:89px;height:40px;border:0px solid red;"></a></td>
384                <td><a href="/pay.php" title="광고 제거 이용권"><img src="/img/bin.png" alt="광고 제거 이용권" style="width:90px;height:40px;border:0px solid red;"></td>
385            </tr>
386        </table>
387    </section>
388
389
390
391
392    
393    <section class="bg">
394        
395        <section class="typing-area-t">
396            
397            
398            <section class=area-typing1-t>
399                <div style="float:right;padding: 15px 16px 0 0;text-align: right;"><a href="/typing-practice.php"><img src="/img/close.png"></a></div>
400            </section>
401            <section class="area-bg-t">
402                
403                <div class="container_" id="con_a">
404                    
405                    <div class="char-container" id="char_a">
406                        <div id="c_0" class="char on">A</div>
407                        <div id="c_1" class="char">S</div>
408                        <div id="c_2" class="char">D</div>
409                        <div id="c_3" class="char">F</div>
410                        <div id="c_4" class="char">H</div>
411                        <div id="c_5" class="char">G</div>
412                        <div id="c_6" class="char">L</div>
413                        <div id="c_7" class="char">K</div>
414                    </div>
415
416                    <div class="keyboard" id="kbd_a">
417                        <div class="key-row"><div class="key" id="k_1">1</div><div class="key" id="k_2">2</div><div class="key" id="k_3">3</div><div class="key" id="k_4">4</div><div class="key" id="k_5">5</div><div class="key" id="k_6">6</div><div class="key" id="k_7">7</div><div class="key" id="k_8">8</div><div class="key" id="k_9">9</div><div class="key" id="k_0">0</div><div class="key">-</div><div class="key">=</div><div class="key">\</div></div><div class="key-row"><div class="key" id="k_Q">ㅂ</div><div class="key" id="k_W">ㅈ</div><div class="key" id="k_E">ㄷ</div><div class="key" id="k_R">ㄱ</div><div class="key" id="k_T">ㅅ</div><div class="key" id="k_Y">ㅛ</div><div class="key" id="k_U">ㅕ</div><div class="key" id="k_I">ㅑ</div><div class="key" id="k_O">ㅐ</div><div class="key" id="k_P">ㅔ</div><div class="key">[</div><div class="key">]</div></div><div class="key-row"><div class="key" id="k_A">ㅁ</div><div class="key" id="k_S">ㄴ</div><div class="key" id="k_D">ㅇ</div><div class="key" id="k_F">ㄹ</div><div class="key" id="k_G">ㅎ</div><div class="key" id="k_H">ㅗ</div><div class="key" id="k_J">ㅓ</div><div class="key" id="k_K">ㅏ</div><div class="key" id="k_L">
417ㅣ</div><div class="key">;</div><div class="key">'</div></div><div class="key-row"><div class="key" id="k_Z">ㅋ</div><div class="key" id="k_X">ㅌ</div><div class="key" id="k_C">ㅊ</div><div class="key" id="k_V">ㅍ</div><div class="key" id="k_B">ㅠ</div><div class="key" id="k_N">ㅜ</div><div class="key" id="k_M">ㅡ</div><div class="key">,</div><div class="key">.</div><div class="key">/</div></div>
418                    </div>
419
420
421                    <div class="setup-overlay" id="setup_ct">
422                        <div class="setup-box">
423                            <form name="setup_f1" onsubmit="return false;">
424                                <p class="setup-title">연습할 언어와 자리를 선택하세요.</p>
425
426                                <div class="option-group">
427                                    <label><input type="radio" name="kl" value="0" checked onclick="typingApp.selKeyL(0)"/> 한글</label>
428                                    <label><input type="radio" name="kl" value="1" onclick="typingApp.selKeyL(1)"/> English</label>
429                                </div>
430
431                                <div class="option-group">
432                                    <label><input type="radio" name="kp" checked onclick="typingApp.selKeyP(0)"/> 중간</label>
433                                    <label><input type="radio" name="kp" onclick="typingApp.selKeyP(1)"/> 아래</label>
434                                    <label><input type="radio" name="kp" onclick="typingApp.selKeyP(2)"/> 위</label>
435                                    <label><input type="radio" name="kp" onclick="typingApp.selKeyP(3)"/> 모두</label>
436                                    <label><input type="radio" name="kp" onclick="typingApp.selKeyP(4)"/> 숫자</label>
437                                </div>
438
439                                <div class="key-visual" id="keyp_a">키보드자리</div>
440
441                                <button type="button" class="btn" onclick="typingApp.start()">시작</button>
442                            </form>
443                        </div>
444                    </div>
445                    
446                    <div class="progress-container">
447                        <span id="progress_bar" style="width: 0%"></span>
448                    </div>
449                </div>
450                
451            </section>
452            <section>
453                <img src="/img/typing4t.png">
454            </section>
455            
456
457        </section>
458    </section>
459    <section class="main2_">
460        <section style="float:left;padding: 4px 0 0 17px;width: 170px;font-size: 30px; border: 0px solid red;">
461            <span id="composing">한글-2</span>
462        </section>
463        <section style="float:right;padding:6px 18px 0 0;border:0px solid red">
464            <p id="clock"></p>
465        </section>
466    </section>
467</article>
468
469
470
471
472
473<script>
474    const typingApp = {
475        // 키보드 정보
476        keyInfo: [
477            { // 한글
478                keys: [
479                    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', "\\"],
480                    ['ㅂ', 'ㅈ', 'ㄷ', 'ㄱ', 'ㅅ', 'ㅛ', 'ㅕ', 'ㅑ', 'ㅐ', 'ㅔ', '[', ']'],
481                    ['ㅁ', 'ㄴ', 'ㅇ', 'ㄹ', 'ㅎ', 'ㅗ', 'ㅓ', 'ㅏ', 'ㅣ', ';', "'"],
482                    ['ㅋ', 'ㅌ', 'ㅊ', 'ㅍ', 'ㅠ', 'ㅜ', 'ㅡ', ',', '.', '/']
483                ],
484                levels: [
485                    'ㅁㄴㅇㄹㅎㅗㅓㅏㅣ', // 1단계
486                    'ㅋㅌㅊㅍㅠㅜㅡ',      // 2단계
487                    'ㅂㅈㄷㄱㅅㅛㅕㅑㅐㅔ', // 3단계
488                    'ㅁㄴㅇㄹㅎㅗㅓㅏㅣㅋㅌㅊㅍㅠㅜㅡㅂㅈㄷㄱㅅㅛㅕㅑㅐㅔ', // 4단계
489                    '1234567890'            // 5단계
490                ]
491            },
492            { // 영어
493                keys: [
494                    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', "\\"],
495                    ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']'],
496                    ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', "'"],
497                    ['Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/']
498                ],
499                levels: [
500                    'ASDFGHJKL',            // 1단계
501                    'ZXCVBNM',              // 2단계
502                    'QWERTYUIOP',           // 3단계
503                    'ASDFGHJKLZXCVBNMQWERTYUIOP', // 4단계
504                    '1234567890'            // 5단계
505                ]
506            }
507        ],
508
509        // 공통 레벨 정보 (키 비교용)
510        commonLevels: [
511            'ASDFGHJKL',            // 1단계
512            'ZXCVBNM',              // 2단계
513            'QWERTYUIOP',           // 3단계
514            'ASDFGHJKLZXCVBNMQWERTYUIOP', // 4단계
515            '1234567890'            // 5단계
516        ],
517
518        // 왼손으로 누르는 키들
519        leftHandKeys: 'QWERTASDFGZXCVB123456',
520
521        // 앱 상태
522        currentKeys: [],
523        currentChars: [],
524        currentKeyCodes: [],
525        currentCharIndex: -1,
526        isRunning: false,
527        language: 0, // 0: 한글, 1: 영어
528        level: 0,
529        levelCount: 0,
530        levelLimit: 8*6,
531
532        // 초기화
533        init() {
534            document.getElementById('keyp_a').innerHTML = this.drawKeyboardPosition(0);
535            this.showSetup();
536        },
537
538        // 키보드 생성
539        createKeyboard() {
540            const keyboardEl = document.getElementById('kbd_a');
541            const keys = this.keyInfo[this.language].keys;
542            const englishKeys = this.keyInfo[1].keys; // 영어 키 코드 참조용
543
544            let html = '';
545
546            // 키보드 행별로 생성
547            keys.forEach((row, rowIndex) => {
548                html += `<div class="key-row">`;
549
550                row.forEach((key, keyIndex) => {
551                    // 영어 키 코드를 ID로 사용 (한글/영어 공통)
552                    const keyCode = englishKeys[rowIndex][keyIndex];
553                    const keyId = keyIndex < (rowIndex === 0 ? 10 :
554                        rowIndex === 1 ? 10 :
555                            rowIndex === 2 ? 9 : 7) ? `id="k_${keyCode}"` : '';
556
557                    html += `<div class="key" ${keyId}>${key}</div>`;
558                });
559
560                html += `</div>`;
561            });
562
563            keyboardEl.innerHTML = html;
564        },
565
566        // 키 다운 이벤트 처리
567        handleKeyDown(event) {
568            
569            if (this.language === 0) {
570                document.getElementById("composing").innerHTML = "한글-2";
571            } else if (this.language === 1) {
572                document.getElementById("composing").innerHTML = "영문-미";
573            }
574            
575            if (!this.isRunning) return;
576            if (this.currentCharIndex > 7) {
577                this.start();
578                return;
579            }
580
581            const pressedKey = event.key.toUpperCase();
582            const expectedKey = this.currentKeyCodes[this.currentCharIndex];
583
584            if (pressedKey === expectedKey) {
585                // 정확한 키 입력
586                document.getElementById(`c_${this.currentCharIndex}`).classList.add('ok');
587                document.getElementById(`k_${pressedKey}`).classList.remove('down');
588
589                this.currentCharIndex++;
590                this.levelCount++;
591
592                if (this.currentCharIndex > 7) {
593                    if (this.levelCount >= this.levelLimit) {
594                        
595                        $.ajax({
596                            url: "./update_typing_practice.php",
597                            data: { 'token': $("#token").val() },
598                            type: "POST",
599                            dataType: 'json',
600                            async: false,
601                            cache: false,
602                            success: function(resp) {
603                                //console.log(resp);
604                                $("#token").val(resp.csrf_token);
605                                startCrazyFireworks();
606                            }
607                        });
608                        
609                        this.isRunning = false;
610                        this.showSetup();
611                        return;
612                    }
613                    this.start();
614                } else {
615                    document.getElementById(`c_${this.currentCharIndex}`).classList.add('on');
616                    this.highlightCurrentKey();
617                }
618
619                this.updateProgress();
620            }
621        },
622
623        // 시작 함수
624        start() {
625            this.createKeyboard();
626            document.getElementById('setup_ct').style.display = 'none';
627
628            // 선택된 레벨 확인
629            const levelInputs = document.forms['setup_f1'].elements['kp'];
630            let selectedLevel = 0;
631            for (let i = 0; i < levelInputs.length; i++) {
632                if (levelInputs[i].checked) {
633                    selectedLevel = i;
634                    break;
635                }
636            }
637            this.level = selectedLevel;
638
639            // 랜덤 문자 선택
640            const levelChars = this.keyInfo[this.language].levels[this.level];
641            const levelLength = levelChars.length;
642
643            this.currentChars = [];
644            this.currentKeyCodes = [];
645
646            for (let i = 0; i < 8; i++) {
647                const randomIndex = Math.floor(Math.random() * levelLength);
648                this.currentChars[i] = levelChars[randomIndex];
649                this.currentKeyCodes[i] = this.commonLevels[this.level][randomIndex];
650            }
651
652            // 문자 표시 업데이트
653            let charsHtml = '';
654            for (let i = 0; i < 8; i++) {
655                charsHtml += `<div id="c_${i}" class="char">${this.currentChars[i]}</div>`;
656            }
657            document.getElementById('char_a').innerHTML = charsHtml;
658
659            this.currentCharIndex = 0;
660            this.isRunning = true;
661
662            document.getElementById('c_0').classList.add('on');
663            this.highlightCurrentKey();
664            this.updateProgress();
665
666            // 키보드 이벤트 리스너 설정
667            document.onkeydown = (e) => this.handleKeyDown(e);
668        },
669
670        // 현재 키 하이라이트
671        highlightCurrentKey() {
672            const currentKey = this.currentKeyCodes[this.currentCharIndex];
673            document.getElementById(`k_${currentKey}
673`).classList.add('down');
674        },
675
676        // 진행률 업데이트
677        updateProgress() {
678            const progress = Math.min(Math.floor((this.levelCount / this.levelLimit) * 100), 100);
679            document.getElementById('progress_bar').style.width = `${progress}%`;
680        },
681
682        // 설정 화면 표시
683        showSetup() {
684            this.levelCount = 0;
685            document.getElementById('setup_ct').style.display = 'flex';
686            this.updateProgress();
687        },
688
689        // 키보드 위치 시각화
690        drawKeyboardPosition(level) {
691            let html = '<div class="key-visual">';
692
693            // 각 행별로 표시 (위에서 아래로)
694            html += '<div style="margin-left:-9px">';
695            html += level === 4 ? '■■■■■■■■■■■■' : '□□□□□□□□□□□□';
696            html += '</div>';
697
698            html += '<div>';
699            html += (level === 2 || level === 3) ? '■■■■■■■■■■■■' : '□□□□□□□□□□□□';
700            html += '</div>';
701
702            html += '<div>';
703            html += (level === 0 || level === 3) ? '■■■■■■■■■■■' : '□□□□□□□□□□□';
704            html += '</div>';
705
706            html += '<div>';
707            html += (level === 1 || level === 3) ? '■■■■■■■■■■' : '□□□□□□□□□□';
708            html += '</div>';
709
710            html += '</div>';
711            return html;
712        },
713
714        // 키보드 위치 선택
715        selKeyP(level) {
716            document.getElementById('keyp_a').innerHTML = this.drawKeyboardPosition(level);
717        },
718
719        // 언어 선택
720        selKeyL(language) {
721            this.language = language;
722        }
723    };
724
725
726    
727    
728    
729    function pushZero(t, e) {
730        let s = "";
731        t = t.toString();
732        if (t.length < e) {
733            for (let n = 0; n < e - t.length; n++) s += "0";
734        }
735        return s + t;
736    }
737
738    function twsClock() {
739        let t = new Date();
740        let e = t.getFullYear() + "-" + pushZero(t.getMonth() + 1, 2) + "-" + pushZero(t.getDate(), 2);
741        let s = pushZero(t.getHours(), 2) + ":" + pushZero(t.getMinutes(), 2) + ":" + pushZero(t.getSeconds(), 2);
742
743        $("#clock").html(s);
744    }
745
746    
747    
748    
749        // 앱 초기화
750    window.onload = function() {
751        typingApp.init();
752        
753        setInterval(twsClock, 1000);
754    };
755    
756    document.addEventListener("keydown", function (e) {
757        if (e.key === "Escape") {
758            //location.reload(); // 페이지 새로고침
759            setTimeout("document.location = '/typing-practice.php'", 200);
760        }
761    });
762</script>
762
763
764
765
766
767
768
769<footer>
770
771</footer>
772
773
774
775
776<div class="left-top-banner">
777    <button onclick="zoomOut()" class="zoom-buttons">축소 -</button>
778    <button onclick="zoomIn()" class="zoom-buttons">확대 +</button>
779    <button onclick="resetZoom()" class="zoom-buttons">초기화</button>
780    <button onclick="window.open('https://kimtaja.netlify.app', '_blank');" class="zoom-buttons">도스용 타자연습</button>
781    </div>
782
783
784
785
786<div id="ex1" class="modal" style="width:610px;max-width:610px;">
787    <div style="padding:20px; font-size:20px">
788        글꼴(폰트)로 도스샘물체(leedheo 제작)를 사용하였습니다. : <a target="_blank" href="https://github.com/hurss/fonts">https://github.com/hurss/fonts</a><br>
789        みふねたかし - いろいろな顔アイコン : <a target="_blank" href="https://www.irasutoya.com/2014/10/faceicons.html">https://www.irasutoya.com/2014/10/faceicons.html</a><br>
790        비타주리 - 개역한글 성경전서 : <a target="_blank" href="https://sir.kr/g5_plugin/13325">https://sir.kr/g5_plugin/13325</a><br>
791                고땅 - 교육부 필수 초등영단어 800 : <a target="_blank" href="https://blog.naver.com/tonya83/223880500959">https://blog.naver.com/tonya83/223880500959</a><br>
792        백쌤 - 중등 필수 영단어 1800 : <a target="_blank" href="https://blog.naver.com/song5552005/221324031747">https://blog.naver.com/song5552005/221324031747</a><br>
793        콕영어학원 - 2025 수능특강 영어 단어 : <a target="_blank" href="https://blog.naver.com/cog_english/223348782431">https://blog.naver.com/cog_english/223348782431</a><br>
794        긴글연습 :
795        <a target="_blank" href="https://gongu.copyright.or.kr/gongu/wrt/wrtCl/listWrtText.do?menuNo=200019&sortSe=popular&licenseCd=97">https://gongu.copyright.or.kr</a><br>
796        세종실록 1권 총서 : <a target="_blank" href="http://sillok.history.go.kr/id/kda_000">http://sillok.history.go.kr/</a><br>
797        월든호수 - '눈의 여왕' 등 5건 : <a target="_blank" href="https://blog.naver.com/thinkwalden/222690249231">https://blog.naver.com/thinkwalden</a><br>
798        한국말 발음 연습 : <a target="_blank" href="https://blog.naver.com/hamggeham_24/223024012312">https://blog.naver.com/hamggeham_24/223024012312</a><br>
799        오픈소스 가사 데이터베이스 및 API 서비스 : <a target="_blank" href="https://lrclib.net/docs">https://lrclib.net/docs</a>
800    </div>
801</div>
802
803
804
805
806
807
808
809<div style="position: absolute;bottom: 60px;right: 20px;z-index: -100"><iframe src="" width="0" height="0" id="iframe_download" name="iframe_download"></iframe></div>
810
811
812<div class="login-picker" style="">
813
814
815        <a href="/login.php">회원가입</a> | <a href="/login.php">로그인</a> | <a href="/excel.php">엑셀 테마</a>
816     |
817
818    <select id="typing_select" name="typing_select" style="width:80px">
819        <option value="proverb" >속담1997</option>
820        <option value="2007" >속담2007</option>
821        <option value="history" >한국사</option>
822        <option value="whistory" >세계사</option>
823        <option value="enproverb" >영어속담</option>
824        <option value="city" >도시</option>
825        <option value="buddhism" >불교</option>
826        <option value="bible" >성경</option>
827        <option value="jameon" >잠언</option>
828        <option value="talmud" >탈무드</option>
829        <option value="advert" >광고카피</option>
830        <option value="celebrity" >유명인</option>
831        <option value="word" >낱말연습</option>
832        <option value="car" >자동차</option>
833        <option value="jiyeog" >행정구역</option>
834        <option value="number" >숫자</option>
835        <option value="healing" >위로/힐링</option>
836        <option value="motivation" >동기부여</option>
837        <option value="love" >사랑</option>
838        <option value="literature" >문학</option>
839        <option value="uppercase" >UPPERCASE</option>
840        <option value="lowercase" >lowercase</option>
841        
842            </select>
843</div>
844
845
846<div class="left-bottom-banner">
847        <a href="chat.php">대화창 <span class="player-cnt">0</span></a> |
848    <a href="javascript:;" onclick="addSheep();">양</a> |
849    <!--<a href="https://maily.so/taja" target="_blank">뉴스레터</a> | --><a href="https://docs.google.com/forms/d/e/1FAIpQLSeBJ3OZ3b7h-SOsz9R81bjbftHIK99g-t9T6YahSMK2tG4rlw/viewform?usp=sharing&ouid=113866833174265193938" target="_blank">문의 및 오탈자 제보</a> |
850    <!--<a href="/video.php" target="_blank">화면녹화</a> | --><a href="#ex1" rel="modal:open" title="도움말">도움말</a>
851</div>
852
853<div class="color-picker">
854    <!--<div style="border-top:1px solid #000;border-left:1px solid #000; border-bottom:1px solid #000;
854width:95px;height:18px;float:left;background:#FAE100;text-align:center;padding-top:3px"><a id="kakaotalk-sharing-btn" style="color:#000" href="javascript:;">카카오톡 공유하기</a></div>-->
855    <div style="border-top:1px solid #000;border-left:1px solid #000; border-bottom:1px solid #000;width:18px;height:18px;float:left;background:#008080;cursor:pointer" onclick="changeColor('#008080')"></div>
856    <!--    <div style="border-top:1px solid #000;border-left:1px solid #000; border-bottom:1px solid #000;width:18px;height:18px;float:left;background:#000000;cursor:pointer" onclick="changeColor('#000000')"></div>-->
857    <div style="border-top:1px solid #000;border-left:1px solid #000; border-bottom:1px solid #000;width:18px;height:18px;float:left;background:#787878;cursor:pointer" onclick="changeColor('#787878')"></div>
858    <div style="border-top:1px solid #000;border-left:1px solid #000; border-bottom:1px solid #000;width:18px;height:18px;float:left;background:#0a3b76;cursor:pointer" onclick="changeColor('#0a3b76')"></div>
859    <div style="border-top:1px solid #000;border-left:1px solid #000; border-bottom:1px solid #000;width:18px;height:18px;float:left;background:#000090;cursor:pointer" onclick="changeColor('#000090')"></div>
860    <div style="border-top:1px solid #000;border-left:1px solid #000; border-bottom:1px solid #000;width:18px;height:18px;float:left;background:#0076a3;cursor:pointer" onclick="changeColor('#0076a3')"></div>
861    <!--    <div style="border-top:1px solid #000;border-left:1px solid #000; border-bottom:1px solid #000;width:20px;height:20px;float:left;background:#00a99d;" onclick="changeColor('#00a99d')"></div>-->
862    <div style="border-top:1px solid #000;border-left:1px solid #000; border-bottom:1px solid #000;width:18px;height:18px;float:left;background:#82ca9c;cursor:pointer" onclick="changeColor('#82ca9c')"></div>
863    <div style="border:1px solid #000;width:18px;height:18px;float:left;background:#ffffff;cursor:pointer" onclick="changeColor('#ffffff')"></div>
864</div>
865<div class="footer-info">
866        공대오빠 | 대표: 하예승 | 사업자등록번호: 511-25-94506<br>
867    통신판매업: 2025-인천부평-1990 | 010-6531-4874 | 인천 부평구 갈월동로 34
868</div>
869
870
871
872
873            
874
875    
876
877
878    
879
880
881        
882                    <div id="banner">
883                        
884
885        <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-9766686538571280" data-ad-slot="5197754610"></ins>
886        
886<script>
887            (adsbygoogle = window.adsbygoogle || []).push({});
888        </script>
888
889
890
891            </div>
892        
893
894    
895
896
897
898    
899    
900
901
902    
902<script type="module">
903    import { initializeApp } from "https://www.gstatic.com/firebasejs/12.14.0/firebase-app.js";
904
905    import {
906        getDatabase,
907        ref,
908        onValue
909    } from "https://www.gstatic.com/firebasejs/12.14.0/firebase-database.js";
910
911    import {
912        getAuth,
913        signInAnonymously,
914        onAuthStateChanged
915    } from "https://www.gstatic.com/firebasejs/12.14.0/firebase-auth.js";
916
917    const firebaseConfig = {
918        apiKey: "AIzaSyA6AfyEYWK0kTUDPGBo5x4wCBmdy3OkIi8",
919        authDomain: "kimtaja-1b64f.firebaseapp.com",
920        databaseURL: "https://kimtaja-1b64f-default-rtdb.firebaseio.com",
921        projectId: "kimtaja-1b64f",
922        storageBucket: "kimtaja-1b64f.firebasestorage.app",
923        messagingSenderId: "744544564676",
924        appId: "1:744544564676:web:a4892201761da01962a091"
925    };
926
927    const app = initializeApp(firebaseConfig);
928    const auth = getAuth(app);
929    const db = getDatabase(app);
930
931    const playerCnt = document.querySelector(".player-cnt");
932    const allPlayersRef = ref(db, "players");
933
934    signInAnonymously(auth)
935        .catch(error => {
936            console.error(error);
937        });
938
939    onAuthStateChanged(auth, (user) => {
940        if (!user) return;
941
942        onValue(allPlayersRef, (snapshot) => {
943            const players = snapshot.val() || {};
944            playerCnt.textContent = Object.keys(players).length;
945        });
946    });
947</script>
947
948
949    
949<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
949
950    
951    
951<script>
952        function startCrazyFireworks() {
953            const duration = 1000; // 1초간 폭죽 터지게
954            const animationEnd = Date.now() + duration;
955
956            const colors = ['#bb0000', '#ffffff', '#00bbff', '#ffee00', '#00ff88'];
957
958            const interval = setInterval(function() {
959                const timeLeft = animationEnd - Date.now();
960
961                if (timeLeft <= 0) {
962                    clearInterval(interval);
963                    return;
964                }
965
966                // 화면 전역에서 랜덤 위치에 폭죽 생성
967                confetti({
968                    particleCount: 50,
969                    startVelocity: 30,
970                    spread: 360,
971                    ticks: 60,
972                    origin: {
973                        x: Math.random(),
974                        y: Math.random() * 0.8
975                    },
976                    colors: colors,
977                    scalar: Math.random() * 1.2 + 0.8,
978                });
979            }, 100); // 0.1초마다 계속 터뜨림
980        }
981
982        
983
984                
985        
986
987        
988        function changeColor(color) {
989            $('body').css('background-color', color);
990            $.cookie('bgColor', color, {
991                expires: 365,
992                path: '/'
993            });
994        }
995
996        function changeTyping(str) {
997            //$('body').css('background-color', str);
998            $.cookie('typing', str, {
999                expires: 365,
1000                path: '/'
1001            });
1002            location.reload();
1003            //location.replace("/");
1004        }
1005
1006                    let zoomLevel = localStorage.getItem("zoomLevel")
1007                ? parseFloat(localStorage.getItem("zoomLevel"))
1008                : 1;
1009
1010            // 페이지 로드시 적용
1011            document.body.style.zoom = zoomLevel;
1012
1013            // 확대
1014            function zoomIn() {
1015                zoomLevel += 0.1;
1016                document.body.style.zoom = zoomLevel;
1017                localStorage.setItem("zoomLevel", zoomLevel);
1018            }
1019
1020            // 축소
1021            function zoomOut() {
1022                zoomLevel -= 0.1;
1023                document.body.style.zoom = zoomLevel;
1024                localStorage.setItem("zoomLevel", zoomLevel);
1025            }
1026
1027            // 초기화
1028            function resetZoom() {
1029                zoomLevel = 1;
1030                document.body.style.zoom = 1;
1031                localStorage.setItem("zoomLevel", zoomLevel);
1032            }
1033        
1034
1035
1036        // 페이지 로드 시 쿠키에서 색상 가져와서 적용
1037        $(document).ready(function() {
1038
1039            var savedColor = $.cookie('bgColor');
1040            if (savedColor) {
1041                $('body').css('background-color', savedColor);
1042            } else {
1043                $('body').css('background-color', '#008080');
1044            }
1045
1046//            setTimeout(function() {
1047//                $('.start').focus();
1048//            }, 1500);
1049
1050            //        $('#manual-ajax').click(function(event) {
1051            //            event.preventDefault();
1052            //            this.blur();
1053            //            $.get(this.href, function(html) {
1054            //                $(html).appendTo('body').modal();
1055            //            });
1056            //        });
1057
1058            $("select[name=typing_select]").change(function() {
1059                location.href = "./change_typing.php?q=" + $(this).val();
1060            });
1061
1062
1063            $('a[href="#ex0"]').click(function(event) {
1064                event.preventDefault();
1065                $(this).modal({
1066                    escapeClose: false,
1067                    clickClose: false,
1068                    showClose: true,
1069                    fadeDuration: 150,
1070                    //                onClose: function () {
1071                    //                    location.reload(); // 모달이 닫힐 때 새로고침
1072                    //                }
1073                });
1074            });
1075
1076            $(document).on('modal:close', '#ex0', function() {
1077                location.reload();
1078            });
1079
1080
1081            $(".ipt").on("paste", function(event) {
1082                event.preventDefault();
1083                console.log("붙여넣기는 사용할 수 없습니다.");
1084            });
1085
1086            $(".ipt").on("keydown", function(event) {
1087                if (event.ctrlKey && event.key.toLowerCase() === "v") {
1088                    event.preventDefault();
1089                    console.log("붙여넣기는 사용할 수 없습니다.");
1090                }
1091            });
1092
1093            $(".ipt").on("input", function(event) {
1094                const val = $(this).val();
1095                const lastChar = val.charAt(val.length - 1);
1096
1097                if (/[가-힣]/.test(lastChar)) {
1098                    document.getElementById("composing").innerHTML = "한글-2";
1099                } else if (/[a-zA-Z]/.test(lastChar)) {
1100                    document.getElementById("composing").innerHTML = "영문-미";
1101                }
1102            });
1103
1104
1105            $(document).on("selectstart", function(event) {
1106                event.preventDefault();
1107            });
1108
1109            //        $(document).on("mousedown", function (event) {
1110            //            event.preventDefault();
1111            //        });
1112
1113            $(document).on("contextmenu", function(event) {
1114                event.preventDefault();
1115            });
1116
1117
1118
1119            $('#btnCopy').on('click', function() {
1120                const text = $('#txtCopy').text();
1121
1122                if (!navigator.clipboard) {
1123                    // 구형 브라우저 fallback
1124                    const $tempInput = $('<input>');
1125                    $('body').append($tempInput);
1126                    $tempInput.val(text).select();
1127
1128                    const res = document.execCommand('copy');
1129                    $tempInput.remove();
1130
1131                    if (!res) {
1132                        alert('복사에 실패했습니다.');
1133                    } else {
1134                        console.log(text);
1135                        alert('주소가 복사되었습니다.\n원하는 곳에 붙여넣기(Ctrl+V)해주세요.');
1136                    }
1137                } else {
1138                    // 최신 브라우저
1139                    navigator.clipboard.writeText(text)
1140                        .then(function() {
1141                            console.log(text);
1142                            alert('주소가 복사되었습니다.\n원하는 곳에 붙여넣기(Ctrl+V)해주세요.');
1143                        })
1144                        .catch(function() {
1145                            alert('복사에 실패했습니다.');
1146                        });
1147                }
1148            });
1149
1150
1151        });
1152        
1153        $(window).on('load', function () {
1154            setTimeout(function () {
1155                $('.start').focus();
1156            }, 200);
1157        });
1158    </script>
1158
1159
1160
1161
1162
1163    <!-- Google Tag Manager (noscript) -->
vendor: 72 bytes, lines 1163-1164
1163
1164    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
1164GTM-P2HH7RZV
vendor: 87 bytes, lines 1164-1165
1164" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
1165    
1165<!-- End Google Tag Manager (noscript) -->
1166
1167
1168    </body>
1169
1170    </html>
1171
1172
1173
1174
1175    

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.