-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathch8.html
More file actions
1442 lines (1337 loc) · 84.7 KB
/
ch8.html
File metadata and controls
1442 lines (1337 loc) · 84.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ch.8 네트워크 | CS Visualizer</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
/* ===== PACKET JOURNEY ===== */
.packet-canvas-wrap{background:var(--surface2);border-radius:8px;overflow:hidden;position:relative;}
.traceroute{font-family:'JetBrains Mono',monospace;font-size:0.78rem;background:var(--surface2);border-radius:8px;padding:16px;margin-top:16px;}
.traceroute-row{display:flex;gap:16px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.tr-hop{color:var(--text-dim);min-width:20px;}
.tr-ip{color:var(--accent3);flex:1;}
.tr-desc{color:var(--text-dim);font-size:0.72rem;min-width:90px;}
.tr-ms{color:var(--accent);}
.traceroute-row.tr-active{background:rgba(0,255,170,0.05);border-radius:4px;}
.node-info-box{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--text-dim);min-height:50px;transition:all 0.3s;}
.node-info-box.active{border-color:var(--accent3);background:rgba(107,138,255,0.06);}
/* ===== IP ADDRESS ===== */
.ip-bit-row{display:flex;gap:2px;margin:8px 0;flex-wrap:nowrap;overflow-x:auto;}
.ip-bit{width:22px;height:28px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:0.72rem;border-radius:3px;border:1px solid var(--border);background:var(--surface2);flex-shrink:0;}
.ip-bit.net{background:rgba(107,138,255,0.2);border-color:var(--accent3);color:var(--accent3);}
.ip-bit.host{background:rgba(255,170,0,0.15);border-color:var(--accent4);color:var(--accent4);}
.ip-bit-sep{width:8px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:0.8rem;flex-shrink:0;}
.ip-input{background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:1rem;padding:8px 14px;width:180px;outline:none;}
.ip-input:focus{border-color:#22d3ee;}
.ip-result-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-family:'JetBrains Mono',monospace;font-size:0.82rem;}
.ip-result-label{color:var(--text-dim);}
.ip-result-val{color:var(--text);}
.cidr-label{font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:var(--accent2);margin-left:8px;min-width:40px;}
.nat-box{display:flex;gap:0;align-items:stretch;margin-top:20px;flex-wrap:wrap;gap:12px;}
.nat-side{flex:1;min-width:180px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px;}
.nat-side-title{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);margin-bottom:10px;letter-spacing:1px;}
.nat-ip-item{font-family:'JetBrains Mono',monospace;font-size:0.8rem;padding:5px 8px;border-radius:4px;margin-bottom:4px;}
.nat-ip-private{color:var(--accent4);background:rgba(255,170,0,0.08);border:1px solid rgba(255,170,0,0.2);}
.nat-ip-public{color:var(--accent);background:rgba(0,255,170,0.08);border:1px solid rgba(0,255,170,0.2);}
.nat-arrow{display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--text-dim);padding:8px;}
/* ===== OSI ENHANCED ===== */
.osi-encap-wrap{margin-top:20px;}
.encap-label{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);margin-bottom:8px;letter-spacing:1px;}
.encap-row{display:flex;align-items:center;gap:0;margin-bottom:4px;min-height:34px;}
.encap-block{display:flex;align-items:center;justify-content:center;height:34px;font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:600;border-radius:4px;white-space:nowrap;padding:0 6px;transition:all 0.3s;cursor:pointer;border:1px solid transparent;}
.encap-l7{background:rgba(0,255,170,0.12);border-color:rgba(0,255,170,0.3);color:var(--accent);}
.encap-l4{background:rgba(255,107,157,0.12);border-color:rgba(255,107,157,0.3);color:var(--accent2);}
.encap-l3{background:rgba(0,204,136,0.12);border-color:rgba(0,204,136,0.3);color:var(--success);}
.encap-l2{background:rgba(255,68,102,0.12);border-color:rgba(255,68,102,0.3);color:var(--danger);}
.encap-l1{background:rgba(136,136,170,0.12);border-color:rgba(136,136,170,0.3);color:var(--text-dim);}
.encap-block:hover{transform:scale(1.04);}
.header-detail{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-top:12px;font-family:'JetBrains Mono',monospace;font-size:0.78rem;animation:fadeSlideIn 0.3s;display:none;}
.header-detail.show{display:block;}
.header-fields{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.hf{padding:4px 8px;border-radius:4px;font-size:0.68rem;border:1px solid;}
.hf-tcp{color:var(--accent2);border-color:rgba(255,107,157,0.3);background:rgba(255,107,157,0.06);}
.hf-ip{color:var(--success);border-color:rgba(0,204,136,0.3);background:rgba(0,204,136,0.06);}
.hf-eth{color:var(--danger);border-color:rgba(255,68,102,0.3);background:rgba(255,68,102,0.06);}
/* ===== TCP SEQUENCE DIAGRAM ===== */
.tcp-seq-diagram{display:grid;grid-template-columns:120px 1fr 120px;gap:0;margin-top:16px;font-family:'JetBrains Mono',monospace;}
.tcp-seq-col{display:flex;flex-direction:column;align-items:center;gap:0;}
.tcp-seq-node{background:var(--surface2);border:2px solid var(--border);border-radius:8px;padding:8px 12px;text-align:center;font-size:0.78rem;font-weight:700;width:100%;}
.tcp-seq-timeline{width:2px;background:var(--border);flex:1;margin-top:0;}
.tcp-seq-arrows{position:relative;padding-top:10px;}
.tcp-seq-msg{display:flex;align-items:center;padding:6px 0;position:relative;font-size:0.75rem;}
.tcp-seq-msg .arrow-line{flex:1;height:2px;position:relative;}
.tcp-seq-msg .arrow-line::after{content:'';position:absolute;top:-4px;width:8px;height:8px;border-top:2px solid;border-right:2px solid;}
.tcp-seq-msg.c2s .arrow-line{background:var(--accent);}
.tcp-seq-msg.c2s .arrow-line::after{right:-1px;border-color:var(--accent);transform:rotate(45deg);}
.tcp-seq-msg.s2c .arrow-line{background:var(--accent2);}
.tcp-seq-msg.s2c .arrow-line::after{left:-1px;border-color:var(--accent2);transform:rotate(-135deg);}
.tcp-seq-msg .msg-label{font-family:'JetBrains Mono',monospace;font-size:0.68rem;padding:2px 6px;border-radius:4px;white-space:nowrap;}
.tcp-seq-msg.c2s .msg-label{color:var(--accent);background:rgba(0,255,170,0.1);}
.tcp-seq-msg.s2c .msg-label{color:var(--accent2);background:rgba(255,107,157,0.1);}
.tcp-seq-msg.info-msg{justify-content:center;}
.tcp-seq-msg.info-msg .msg-label{color:var(--accent);background:rgba(0,255,170,0.08);border:1px solid rgba(0,255,170,0.2);width:100%;text-align:center;}
.tcp-state-label{font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--text-dim);margin-top:2px;}
/* ===== TLS ===== */
.tls-step{display:flex;align-items:flex-start;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.tls-step-num{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);min-width:28px;padding-top:2px;}
.tls-step-content{flex:1;}
.tls-step-title{font-family:'JetBrains Mono',monospace;font-size:0.85rem;font-weight:700;margin-bottom:4px;color:var(--text-dim);}
.tls-step.tls-active .tls-step-title{color:var(--accent);}
.tls-step.tls-done .tls-step-title{color:var(--success);opacity:0.65;}
.tls-step-desc{font-size:0.82rem;color:var(--text-dim);line-height:1.6;}
.tls-packet{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:0.72rem;padding:2px 8px;border-radius:4px;margin-top:4px;}
.tls-packet.client{background:rgba(0,255,170,0.1);border:1px solid rgba(0,255,170,0.25);color:var(--accent);}
.tls-packet.server{background:rgba(255,107,157,0.1);border:1px solid rgba(255,107,157,0.25);color:var(--accent2);}
.tls-locked{font-size:1.5rem;text-align:center;margin:20px 0;}
.http-vs-https{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;}
.hvh-box{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px;}
.hvh-title{font-family:'JetBrains Mono',monospace;font-size:0.82rem;font-weight:700;margin-bottom:10px;}
.hvh-packet{font-family:'JetBrains Mono',monospace;font-size:0.72rem;padding:8px 12px;border-radius:4px;word-break:break-all;line-height:1.8;}
/* ===== DNS TREE ===== */
.dns-tree{display:flex;flex-direction:column;align-items:center;gap:0;margin:20px 0;position:relative;}
.dns-tree-level{display:flex;gap:12px;justify-content:center;position:relative;padding:4px 0;}
.dns-tree-node{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:0.78rem;text-align:center;position:relative;transition:all 0.3s;}
.dns-tree-node.root{border-color:var(--accent);color:var(--accent);background:rgba(0,255,170,0.06);}
.dns-tree-node.tld{border-color:var(--accent3);color:var(--accent3);background:rgba(107,138,255,0.06);}
.dns-tree-node.sld{border-color:var(--accent4);color:var(--accent4);background:rgba(255,170,0,0.06);}
.dns-tree-node.host{border-color:var(--accent2);color:var(--accent2);background:rgba(255,107,157,0.06);}
.dns-tree-connector{width:1px;height:20px;background:var(--border);margin:0 auto;}
.dns-tree-branch{display:flex;gap:0;justify-content:center;}
.dns-tree-branch-line{height:1px;background:var(--border);flex:1;margin-top:10px;}
.dns-rec-vs-iter{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;}
.rvi-box{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:14px;}
.rvi-title{font-family:'JetBrains Mono',monospace;font-size:0.8rem;font-weight:700;margin-bottom:8px;}
.rvi-step{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);padding:3px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.rvi-step span{color:var(--text);}
/* ===== HTTP/2 ===== */
.http2-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
.h2-panel{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:14px;}
.h2-title{font-family:'JetBrains Mono',monospace;font-size:0.78rem;font-weight:700;margin-bottom:10px;}
.h2-stream{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-family:'JetBrains Mono',monospace;font-size:0.72rem;}
.h2-stream-id{color:var(--text-dim);min-width:60px;}
.h2-stream-bar{height:16px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:0.6rem;color:rgba(0,0,0,0.7);font-weight:700;}
/* ===== MISC ===== */
.sec-desc{color:var(--text-dim);font-size:0.95rem;line-height:1.8;margin-bottom:8px;max-width:760px;}
@media(max-width:640px){
.ip-bit{width:16px;height:24px;font-size:0.6rem;}
.http-vs-https{grid-template-columns:1fr;}
.dns-rec-vs-iter{grid-template-columns:1fr;}
.http2-compare{grid-template-columns:1fr;}
.tcp-seq-diagram{grid-template-columns:80px 1fr 80px;}
.nat-box{flex-direction:column;}
}
</style>
</head>
<body class="page-body">
<nav class="page-nav">
<a href="index.html" class="nav-back">← 홈</a>
<div class="nav-chapter-title" style="color:#22d3ee">Ch.8 — 네트워크</div>
<div class="nav-sections">
<a href="#packet" class="nav-sec-link">패킷 여정</a>
<a href="#ip" class="nav-sec-link">IP 주소</a>
<a href="#osi" class="nav-sec-link">OSI 7계층</a>
<a href="#tcp" class="nav-sec-link">TCP 핸드셰이크</a>
<a href="#tls" class="nav-sec-link">HTTPS/TLS</a>
<a href="#http" class="nav-sec-link">HTTP</a>
<a href="#dns" class="nav-sec-link">DNS</a>
<a href="#web" class="nav-sec-link">웹 기초</a>
<a href="#tcpudp" class="nav-sec-link">TCP vs UDP</a>
</div>
</nav>
<div class="chapter-banner cb8" style="--cb8-color:#22d3ee;">
<div class="ch-num">CHAPTER 08</div>
<h2 style="color:#22d3ee">네트워크</h2>
<p class="ch-desc">패킷 여정, IP 주소/서브넷, OSI 7계층 캡슐화, TCP 핸드셰이크, HTTPS/TLS, HTTP, DNS를 시각적으로 탐험합니다.</p>
<div class="ch-pills">
<span>패킷 여정</span><span>IP/서브넷</span><span>OSI 캡슐화</span><span>TCP</span><span>TLS</span><span>HTTP/2</span><span>DNS</span>
</div>
</div>
<!-- ===== SECTION 1: 패킷 여정 ===== -->
<section id="packet">
<div class="section-header">
<div class="tag" style="background:rgba(34,211,238,0.12);color:#22d3ee;">PACKET</div>
<h2>패킷의 여행 (How Packets Travel)</h2>
<p class="sec-desc">여러분이 google.com을 열면, 데이터는 '패킷'으로 쪼개져 여러 라우터를 거쳐 목적지에 도달합니다. 각 라우터는 '다음에 어디로 보낼지'만 결정합니다 — 마치 우편물이 중간 우체국을 경유하듯. TTL(Time to Live)은 매 홉마다 1씩 감소합니다.</p>
</div>
<div class="viz-box">
<div class="controls">
<button class="btn active" onclick="packetSend()">패킷 전송 시작 ▶</button>
<button class="btn" onclick="packetLoss()">패킷 손실 시뮬레이션</button>
<button class="btn danger" onclick="packetReset()">초기화</button>
</div>
<div class="packet-canvas-wrap">
<canvas id="packetCanvas" height="200"></canvas>
</div>
<div class="node-info-box" id="nodeInfoBox">노드를 클릭하거나 패킷 전송을 시작하세요.</div>
<div class="traceroute" id="tracerouteBox">
<div style="color:var(--text-dim);font-size:0.72rem;margin-bottom:8px;letter-spacing:1px;">TRACEROUTE 시뮬레이션</div>
<div class="traceroute-row" id="tr0" style="opacity:0.3"><span class="tr-hop">1</span><span class="tr-ip">192.168.1.1</span><span class="tr-desc">(공유기)</span><span class="tr-ms">— ms</span></div>
<div class="traceroute-row" id="tr1" style="opacity:0.3"><span class="tr-hop">2</span><span class="tr-ip">210.100.45.1</span><span class="tr-desc">(ISP)</span><span class="tr-ms">— ms</span></div>
<div class="traceroute-row" id="tr2" style="opacity:0.3"><span class="tr-hop">3</span><span class="tr-ip">72.14.197.2</span><span class="tr-desc">(백본 A)</span><span class="tr-ms">— ms</span></div>
<div class="traceroute-row" id="tr3" style="opacity:0.3"><span class="tr-hop">4</span><span class="tr-ip">108.170.246.3</span><span class="tr-desc">(백본 B)</span><span class="tr-ms">— ms</span></div>
<div class="traceroute-row" id="tr4" style="opacity:0.3"><span class="tr-hop">5</span><span class="tr-ip">142.250.80.46</span><span class="tr-desc">(Google)</span><span class="tr-ms">— ms</span></div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ===== SECTION 2: IP 주소와 서브넷 ===== -->
<section id="ip">
<div class="section-header">
<div class="tag" style="background:rgba(34,211,238,0.12);color:#22d3ee;">IP</div>
<h2>IP 주소와 서브넷 (IP Addressing)</h2>
<p class="sec-desc">IP 주소는 인터넷의 '집 주소'입니다. IPv4는 32비트 = 4개의 숫자(0-255). 서브넷 마스크는 '어디까지가 네트워크 주소인가'를 정의합니다. /24(255.255.255.0)는 마지막 8비트만 호스트 주소로 씁니다 = 254개의 주소.</p>
</div>
<div class="viz-box">
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px;">
<div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);margin-bottom:6px;">IP 주소</div>
<input class="ip-input" id="ipInput" value="192.168.1.100" oninput="updateIP()">
</div>
<div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);margin-bottom:6px;">서브넷 CIDR</div>
<div style="display:flex;align-items:center;gap:8px;">
<input type="range" id="cidrSlider" min="8" max="30" value="24" oninput="updateIP()" style="-webkit-appearance:none;width:140px;height:4px;background:var(--border);border-radius:2px;outline:none;">
<span class="cidr-label" id="cidrLabel">/24</span>
</div>
</div>
</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);margin-bottom:4px;">32비트 이진수 표현 (파란색=네트워크, 주황색=호스트)</div>
<div class="ip-bit-row" id="ipBitRow"></div>
<div style="margin-top:16px;background:var(--surface2);border-radius:8px;padding:14px;border:1px solid var(--border);">
<div class="ip-result-row"><span class="ip-result-label">네트워크 주소</span><span class="ip-result-val" id="ipNetwork" style="color:var(--accent3);">—</span></div>
<div class="ip-result-row"><span class="ip-result-label">브로드캐스트</span><span class="ip-result-val" id="ipBroadcast" style="color:var(--accent4);">—</span></div>
<div class="ip-result-row"><span class="ip-result-label">서브넷 마스크</span><span class="ip-result-val" id="ipMask">—</span></div>
<div class="ip-result-row" style="border-bottom:none;"><span class="ip-result-label">사용 가능한 호스트 수</span><span class="ip-result-val" id="ipHostCount" style="color:var(--accent);">—</span></div>
</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;font-weight:700;margin:20px 0 8px;color:var(--text-dim);">공인 IP vs 사설 IP — NAT 변환</div>
<div class="nat-box">
<div class="nat-side">
<div class="nat-side-title">사설 IP 대역 (인트라넷)</div>
<div class="nat-ip-item nat-ip-private">10.0.0.0 /8</div>
<div class="nat-ip-item nat-ip-private">172.16.0.0 /12</div>
<div class="nat-ip-item nat-ip-private">192.168.0.0 /16</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--text-dim);margin-top:8px;">인터넷에서 라우팅 불가. 내부 네트워크 전용.</div>
</div>
<div class="nat-arrow">NAT →</div>
<div class="nat-side" style="flex:0.6;min-width:140px;background:rgba(0,204,136,0.04);border-color:rgba(0,204,136,0.2);">
<div class="nat-side-title">NAT 공유기</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);line-height:1.7;">사설 IP + 포트 ↔ 공인 IP + 포트 매핑 테이블 유지</div>
</div>
<div class="nat-arrow">→</div>
<div class="nat-side" style="background:rgba(0,255,170,0.04);border-color:rgba(0,255,170,0.2);">
<div class="nat-side-title">공인 IP (인터넷)</div>
<div class="nat-ip-item nat-ip-public">203.0.113.45</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--text-dim);margin-top:8px;">ISP가 할당. 인터넷에서 라우팅 가능.</div>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ===== SECTION 3: OSI 7계층 ===== -->
<section id="osi">
<div class="section-header">
<div class="tag" style="background:rgba(34,211,238,0.12);color:#22d3ee;">OSI</div>
<h2>OSI 7계층 모델 + 캡슐화</h2>
<p class="sec-desc">각 계층을 클릭하면 실제 헤더 필드를 확인할 수 있습니다. 데이터는 송신 측에서 7→1계층으로 내려가며 헤더가 추가(캡슐화)되고, 수신 측에서 1→7계층으로 올라가며 헤더가 제거됩니다.</p>
</div>
<div class="viz-box">
<div class="controls">
<button class="btn active" onclick="runEncapAnim()">캡슐화 애니메이션 ▶</button>
<button class="btn danger" onclick="resetEncap()">초기화</button>
</div>
<div class="osi-stack" id="osiStack"></div>
<div class="osi-encap-wrap">
<div class="encap-label">캡슐화 구조 (클릭하면 헤더 필드 표시)</div>
<div id="encapRows"></div>
<div class="header-detail" id="headerDetail"></div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ===== SECTION 4: TCP 핸드셰이크 ===== -->
<section id="tcp">
<div class="section-header">
<div class="tag" style="background:rgba(34,211,238,0.12);color:#22d3ee;">TCP</div>
<h2>TCP 3-way 핸드셰이크 + 4-way 종료</h2>
<p class="sec-desc">TCP는 신뢰성 있는 연결을 위해 통신 전 3단계 핸드셰이크를 수행합니다. 시퀀스 번호(SEQ)와 확인 번호(ACK)로 패킷 순서와 손실을 추적합니다. 연결 종료는 4단계로 이뤄집니다.</p>
</div>
<div class="viz-box">
<div class="controls">
<button class="btn active" onclick="tcpSeqNext()" id="tcpSeqNextBtn">다음 단계 →</button>
<button class="btn danger" onclick="tcpSeqReset()">초기화</button>
</div>
<div class="tcp-seq-diagram">
<div class="tcp-seq-col">
<div class="tcp-seq-node" style="border-color:var(--accent);color:var(--accent);">CLIENT</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--text-dim);margin-top:4px;text-align:center;" id="tcpClientState">CLOSED</div>
<div class="tcp-seq-timeline" id="clientTimeline"></div>
</div>
<div style="padding-top:50px;" id="tcpSeqArrows"></div>
<div class="tcp-seq-col">
<div class="tcp-seq-node" style="border-color:var(--accent2);color:var(--accent2);">SERVER</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--text-dim);margin-top:4px;text-align:center;" id="tcpServerState">LISTEN</div>
<div class="tcp-seq-timeline" id="serverTimeline"></div>
</div>
</div>
<div class="tcp-step-desc" id="tcpSeqDesc" style="margin-top:12px;">다음 단계 버튼을 눌러 TCP 핸드셰이크를 시작하세요.</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ===== SECTION 5: HTTPS / TLS ===== -->
<section id="tls">
<div class="section-header">
<div class="tag" style="background:rgba(34,211,238,0.12);color:#22d3ee;">TLS</div>
<h2>HTTPS와 TLS 핸드셰이크</h2>
<p class="sec-desc">HTTP는 평문(암호화 없음)이라 중간에서 도청 가능합니다. HTTPS는 TLS(Transport Layer Security)로 암호화합니다. TLS 1.3 핸드셰이크는 안전한 채널을 만드는 과정입니다.</p>
</div>
<div class="viz-box">
<div class="controls">
<button class="btn active" onclick="tlsNext()" id="tlsNextBtn">다음 단계 →</button>
<button class="btn danger" onclick="tlsReset()">초기화</button>
</div>
<div id="tlsSteps"></div>
<div class="tls-locked" id="tlsLocked">🔓 핸드셰이크 대기 중...</div>
<div class="http-vs-https">
<div class="hvh-box" style="border-color:rgba(255,68,102,0.3);">
<div class="hvh-title" style="color:var(--danger);">HTTP (평문)</div>
<div class="hvh-packet" style="background:rgba(255,68,102,0.06);color:var(--danger);">GET /login HTTP/1.1<br>Host: bank.com<br>Authorization: password=1234<br><span style="color:var(--text-dim)">← 스니핑 시 그대로 노출!</span></div>
</div>
<div class="hvh-box" style="border-color:rgba(0,255,170,0.3);">
<div class="hvh-title" style="color:var(--accent);">HTTPS (TLS 암호화)</div>
<div class="hvh-packet" style="background:rgba(0,255,170,0.06);color:var(--accent);">17 03 03 00 28 8f a3 2c<br>e1 b4 7d 91 0a 55 cf 2b<br>3e 84 ...<br><span style="color:var(--text-dim)">← 스니핑해도 암호문만!</span></div>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- ===== SECTION 6: HTTP ===== -->
<section id="http">
<div class="section-header">
<div class="tag" style="background:rgba(34,211,238,0.12);color:#22d3ee;">HTTP</div>
<h2>HTTP 요청 / 응답</h2>
<p class="sec-desc">메서드와 상태코드를 선택하여 HTTP 메시지 구조를 확인하세요. HTTP/1.1은 요청당 하나의 응답(HOL 블로킹), HTTP/2는 스트림 멀티플렉싱으로 여러 요청을 동시 처리합니다.</p>
</div>
<div class="viz-box">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
<div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);margin-bottom:6px;">HTTP 메서드</div>
<select class="http-select" id="httpMethod" onchange="updateHTTP()">
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
</select>
</div>
<div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);margin-bottom:6px;">응답 상태코드</div>
<select class="http-select" id="httpStatus" onchange="updateHTTP()">
<option value="200">200 OK</option>
<option value="201">201 Created</option>
<option value="204">204 No Content</option>
<option value="301">301 Moved Permanently</option>
<option value="304">304 Not Modified</option>
<option value="400">400 Bad Request</option>
<option value="401">401 Unauthorized</option>
<option value="403">403 Forbidden</option>
<option value="404">404 Not Found</option>
<option value="500">500 Internal Server Error</option>
<option value="502">502 Bad Gateway</option>
<option value="503">503 Service Unavailable</option>
</select>
</div>
</div>
<div class="http-layout">
<div class="http-panel">
<div class="http-panel-title">REQUEST →</div>
<div id="httpReqPanel"></div>
</div>
<div class="http-panel">
<div class="http-panel-title">← RESPONSE</div>
<div id="httpResPanel"></div>
</div>
</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;font-weight:700;margin:24px 0 8px;color:var(--text-dim);">HTTP/1.1 vs HTTP/2 — 멀티플렉싱</div>
<div class="http2-compare">
<div class="h2-panel" style="border-color:rgba(255,170,0,0.3);">
<div class="h2-title" style="color:var(--accent4);">HTTP/1.1 (순차 처리)</div>
<div class="h2-stream"><span class="h2-stream-id" style="color:var(--accent4);">req1</span><div class="h2-stream-bar" style="width:100%;background:var(--accent4);">HTML</div></div>
<div class="h2-stream"><span class="h2-stream-id" style="color:var(--accent4);">req2</span><div class="h2-stream-bar" style="width:100%;background:rgba(255,170,0,0.4);">CSS (대기)</div></div>
<div class="h2-stream"><span class="h2-stream-id" style="color:var(--accent4);">req3</span><div class="h2-stream-bar" style="width:100%;background:rgba(255,170,0,0.2);">JS (대기)</div></div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--text-dim);margin-top:6px;">HOL 블로킹: 앞 요청이 완료될 때까지 대기</div>
</div>
<div class="h2-panel" style="border-color:rgba(0,255,170,0.3);">
<div class="h2-title" style="color:var(--accent);">HTTP/2 (스트림 멀티플렉싱)</div>
<div class="h2-stream"><span class="h2-stream-id" style="color:var(--accent);">stream 1</span><div class="h2-stream-bar" style="width:80%;background:var(--accent);">HTML</div></div>
<div class="h2-stream"><span class="h2-stream-id" style="color:var(--accent);">stream 3</span><div class="h2-stream-bar" style="width:60%;background:var(--accent3);">CSS</div></div>
<div class="h2-stream"><span class="h2-stream-id" style="color:var(--accent);">stream 5</span><div class="h2-stream-bar" style="width:70%;background:var(--accent2);">JS</div></div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--text-dim);margin-top:6px;">단일 TCP 연결로 동시 다중 스트림 처리</div>
</div>
</div>
<table class="status-table" style="margin-top:24px;">
<thead><tr><th>코드</th><th>의미</th><th>설명</th></tr></thead>
<tbody>
<tr><td class="http-status-2">1xx</td><td>정보</td><td>요청 수신, 처리 중</td></tr>
<tr><td class="http-status-2">2xx</td><td>성공</td><td>요청 성공적으로 처리됨</td></tr>
<tr><td class="http-status-3">3xx</td><td>리다이렉션</td><td>추가 동작 필요</td></tr>
<tr><td class="http-status-4">4xx</td><td>클라이언트 오류</td><td>잘못된 요청</td></tr>
<tr><td class="http-status-5">5xx</td><td>서버 오류</td><td>서버 처리 실패</td></tr>
</tbody>
</table>
</div>
</section>
<div class="section-divider"></div>
<!-- ===== SECTION 7: DNS ===== -->
<section id="dns">
<div class="section-header">
<div class="tag" style="background:rgba(34,211,238,0.12);color:#22d3ee;">DNS</div>
<h2>DNS 조회 과정</h2>
<p class="sec-desc">도메인 이름이 IP 주소로 변환되는 과정입니다. DNS는 계층적 분산 데이터베이스입니다. Root → TLD → Authoritative 순으로 질의합니다. Recursive Resolver(통상 ISP 또는 8.8.8.8)가 대신 조회해 줍니다.</p>
</div>
<div class="viz-box">
<div class="controls">
<button class="btn active" onclick="dnsNext()" id="dnsNextBtn">다음 단계 →</button>
<button class="btn danger" onclick="dnsReset()">초기화</button>
</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:var(--text-dim);margin-bottom:16px;">
조회 도메인: <span style="color:#22d3ee">www.example.com</span>
</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);margin-bottom:8px;letter-spacing:1px;">DNS 계층 구조</div>
<div class="dns-tree">
<div class="dns-tree-level">
<div class="dns-tree-node root">. (Root)</div>
</div>
<div class="dns-tree-connector"></div>
<div class="dns-tree-level">
<div class="dns-tree-node tld">.com</div>
<div class="dns-tree-node tld">.net</div>
<div class="dns-tree-node tld">.org</div>
<div class="dns-tree-node tld">.kr</div>
</div>
<div class="dns-tree-connector"></div>
<div class="dns-tree-level">
<div class="dns-tree-node sld">example.com</div>
<div class="dns-tree-node sld">google.com</div>
<div class="dns-tree-node sld">github.com</div>
</div>
<div class="dns-tree-connector"></div>
<div class="dns-tree-level">
<div class="dns-tree-node host">www</div>
<div class="dns-tree-node host">mail</div>
<div class="dns-tree-node host">api</div>
</div>
</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--text-dim);margin:16px 0 8px;letter-spacing:1px;">조회 과정 시뮬레이션</div>
<div class="dns-nodes" id="dnsNodes"></div>
<div class="info-text" id="dnsInfo" style="margin-top:16px;">다음 단계 버튼을 눌러 DNS 조회를 시작하세요.</div>
<div class="dns-rec-vs-iter">
<div class="rvi-box" style="border-color:rgba(0,255,170,0.25);">
<div class="rvi-title" style="color:var(--accent);">재귀 질의 (Recursive)</div>
<div class="rvi-step"><span>클라이언트</span> → Resolver</div>
<div class="rvi-step">Resolver → Root → .com → Auth</div>
<div class="rvi-step">Resolver <span>→ 클라이언트</span> (최종 IP)</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--text-dim);margin-top:6px;">Resolver가 모든 작업 대신 수행. 일반적 방식.</div>
</div>
<div class="rvi-box" style="border-color:rgba(107,138,255,0.25);">
<div class="rvi-title" style="color:var(--accent3);">반복 질의 (Iterative)</div>
<div class="rvi-step"><span>클라이언트</span> → Root (referral)</div>
<div class="rvi-step"><span>클라이언트</span> → .com TLD (referral)</div>
<div class="rvi-step"><span>클라이언트</span> → Auth (최종 IP)</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--text-dim);margin-top:6px;">클라이언트가 직접 각 서버에 질의. 서버 간 통신에 사용.</div>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- SECTION 8: 웹 기초 -->
<section id="web">
<div class="section-header">
<div class="tag tag-ch8">08 — WEB BASICS</div>
<h2>웹 기초 — 쿠키/세션/JWT & CORS</h2>
<p>웹 인증 방식과 브라우저 보안 정책의 핵심 개념입니다. 면접에서 가장 자주 나오는 웹 지식입니다.</p>
</div>
<div class="viz-box">
<!-- Cookie vs Session vs JWT -->
<div style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;font-weight:700;margin-bottom:14px;color:#22d3ee">① 인증 방식 비교: Cookie vs Session vs JWT</div>
<!-- 탭 선택 -->
<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">
<button class="btn active" id="authTabCookie" onclick="showAuthTab('cookie')">Cookie</button>
<button class="btn" id="authTabSession" onclick="showAuthTab('session')">Session</button>
<button class="btn" id="authTabJWT" onclick="showAuthTab('jwt')">JWT</button>
</div>
<!-- Cookie Panel -->
<div id="panelCookie">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;font-family:'JetBrains Mono',monospace;font-size:0.78rem;">
<div style="background:var(--surface2);border-radius:8px;padding:14px;">
<div style="color:#22d3ee;font-weight:700;margin-bottom:8px;">클라이언트 (브라우저)</div>
<div style="background:var(--bg);border-radius:4px;padding:8px;font-size:0.72rem;line-height:1.8;color:var(--text-dim);">
Set-Cookie 수신 후 저장<br>
<span style="color:var(--accent4)">user=alice</span><br>
<span style="color:var(--accent4)">token=xyz123</span><br>
<br>요청마다 자동으로 전송
</div>
</div>
<div style="background:var(--surface2);border-radius:8px;padding:14px;">
<div style="color:#22d3ee;font-weight:700;margin-bottom:8px;">서버</div>
<div style="background:var(--bg);border-radius:4px;padding:8px;font-size:0.72rem;line-height:1.8;color:var(--text-dim);">
응답 시 Set-Cookie 헤더<br>
쿠키 값으로 사용자 식별<br>
<span style="color:var(--danger)">⚠ XSS/CSRF 취약점 주의</span><br>
HttpOnly, Secure 옵션 필수
</div>
</div>
</div>
<div class="info-text" style="margin-top:12px;">
쿠키: 브라우저에 저장되는 작은 데이터(≤4KB). 만료일, 도메인, 경로, HttpOnly, Secure, SameSite 속성으로 제어. 서버 상태를 클라이언트에 저장 → <strong style="color:var(--accent4)">Stateless 서버</strong> 가능.
</div>
</div>
<!-- Session Panel -->
<div id="panelSession" style="display:none;">
<div style="display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;font-family:'JetBrains Mono',monospace;font-size:0.75rem;margin-bottom:12px;">
<div style="background:var(--surface2);border-radius:8px;padding:12px;">
<div style="color:#22d3ee;font-weight:700;margin-bottom:6px;">브라우저</div>
<div style="background:var(--bg);border-radius:4px;padding:6px;color:var(--text-dim);font-size:0.7rem;line-height:1.7;">
쿠키: <span style="color:var(--accent4)">sessionId=abc</span><br>
(세션 ID만 저장)
</div>
</div>
<div style="text-align:center;color:var(--text-dim);">⟷</div>
<div style="background:var(--surface2);border-radius:8px;padding:12px;">
<div style="color:#22d3ee;font-weight:700;margin-bottom:6px;">서버 메모리/Redis</div>
<div style="background:var(--bg);border-radius:4px;padding:6px;color:var(--text-dim);font-size:0.7rem;line-height:1.7;">
<span style="color:var(--accent4)">abc</span> → {user: alice, role: admin, ...}<br>
<span style="color:var(--accent2)">xyz</span> → {user: bob, ...}
</div>
</div>
</div>
<div class="info-text">
세션: 실제 데이터는 서버에, 브라우저는 ID만 보유. <strong style="color:var(--accent)">보안↑</strong> (데이터 서버 저장). 단점: 서버 메모리 사용, <strong style="color:var(--danger)">수평 확장 어려움</strong> (세션 공유 필요 → Redis 사용).
</div>
</div>
<!-- JWT Panel -->
<div id="panelJWT" style="display:none;">
<div style="font-family:'JetBrains Mono',monospace;font-size:0.76rem;margin-bottom:12px;">
<div style="margin-bottom:8px;color:var(--text-dim);">JWT = Header.Payload.Signature (Base64 인코딩)</div>
<div style="display:flex;gap:0;flex-wrap:wrap;border-radius:8px;overflow:hidden;font-size:0.72rem;">
<div style="background:rgba(255,107,157,0.2);border:1px solid var(--accent2);padding:10px 14px;flex:1;">
<div style="color:var(--accent2);font-weight:700;margin-bottom:4px;">Header</div>
<div style="color:var(--text-dim);">알고리즘 & 타입<br>{"alg":"HS256","typ":"JWT"}</div>
</div>
<div style="background:rgba(107,138,255,0.2);border:1px solid var(--accent3);padding:10px 14px;flex:1;">
<div style="color:var(--accent3);font-weight:700;margin-bottom:4px;">Payload</div>
<div style="color:var(--text-dim);">{"sub":"alice","role":"admin","exp":1234567}</div>
</div>
<div style="background:rgba(0,255,170,0.12);border:1px solid var(--accent);padding:10px 14px;flex:1;">
<div style="color:var(--accent);font-weight:700;margin-bottom:4px;">Signature</div>
<div style="color:var(--text-dim);">HMACSHA256(b64(H)+"."+b64(P), secret)</div>
</div>
</div>
</div>
<div class="info-text">
JWT: <strong style="color:var(--accent)">Stateless</strong> 인증 (서버가 상태 저장 불필요). 서명으로 위변조 감지. <strong style="color:var(--danger)">단점</strong>: 토큰 무효화 어려움(만료 전까지 유효), Payload는 암호화 아님(Base64 디코딩 가능). 보통 Access Token(15분) + Refresh Token(7일) 조합 사용.
</div>
</div>
<!-- CORS -->
<div style="border-top:1px solid var(--border);padding-top:24px;margin-top:24px;">
<div style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;font-weight:700;margin-bottom:12px;color:#22d3ee">② CORS (Cross-Origin Resource Sharing)</div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.76rem;color:var(--text-dim);margin-bottom:14px;">
브라우저의 <strong style="color:var(--accent4)">Same-Origin Policy</strong>: 다른 출처(도메인/포트/프로토콜)의 리소스 접근 차단. CORS는 서버가 명시적으로 허용하는 메커니즘.
</div>
<div class="controls">
<button class="btn" onclick="corsDemo('same')">같은 출처 요청</button>
<button class="btn danger" onclick="corsDemo('cross-block')">다른 출처 차단</button>
<button class="btn" onclick="corsDemo('cross-allow')">CORS 허용 요청</button>
<button class="btn" onclick="corsDemo('preflight')">Preflight 요청</button>
</div>
<div id="corsViz" style="font-family:'JetBrains Mono',monospace;font-size:0.78rem;background:var(--surface2);border-radius:8px;padding:16px;margin-top:12px;min-height:90px;line-height:2;"></div>
</div>
<!-- REST -->
<div style="border-top:1px solid var(--border);padding-top:24px;margin-top:24px;">
<div style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;font-weight:700;margin-bottom:12px;color:#22d3ee">③ REST API 설계 원칙</div>
<table style="width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:0.76rem;">
<tr>
<th style="padding:8px 12px;background:var(--surface2);color:var(--text-dim);text-align:left;border-bottom:1px solid var(--border);font-size:0.68rem;">HTTP 메서드</th>
<th style="padding:8px 12px;background:var(--surface2);color:var(--text-dim);text-align:left;border-bottom:1px solid var(--border);">URI 예시</th>
<th style="padding:8px 12px;background:var(--surface2);color:var(--text-dim);text-align:left;border-bottom:1px solid var(--border);">동작</th>
<th style="padding:8px 12px;background:var(--surface2);color:var(--text-dim);text-align:left;border-bottom:1px solid var(--border);">멱등성</th>
</tr>
<tr><td style="padding:7px 12px;color:var(--accent);border-bottom:1px solid var(--border);">GET</td><td style="padding:7px 12px;color:var(--text-dim);border-bottom:1px solid var(--border);">/users /users/1</td><td style="padding:7px 12px;color:var(--text);border-bottom:1px solid var(--border);">조회</td><td style="padding:7px 12px;color:var(--accent);border-bottom:1px solid var(--border);">✓ 멱등</td></tr>
<tr><td style="padding:7px 12px;color:var(--accent3);border-bottom:1px solid var(--border);">POST</td><td style="padding:7px 12px;color:var(--text-dim);border-bottom:1px solid var(--border);">/users</td><td style="padding:7px 12px;color:var(--text);border-bottom:1px solid var(--border);">생성</td><td style="padding:7px 12px;color:var(--danger);border-bottom:1px solid var(--border);">✗ 비멱등</td></tr>
<tr><td style="padding:7px 12px;color:var(--accent4);border-bottom:1px solid var(--border);">PUT</td><td style="padding:7px 12px;color:var(--text-dim);border-bottom:1px solid var(--border);">/users/1</td><td style="padding:7px 12px;color:var(--text);border-bottom:1px solid var(--border);">전체 수정</td><td style="padding:7px 12px;color:var(--accent);border-bottom:1px solid var(--border);">✓ 멱등</td></tr>
<tr><td style="padding:7px 12px;color:var(--accent2);border-bottom:1px solid var(--border);">PATCH</td><td style="padding:7px 12px;color:var(--text-dim);border-bottom:1px solid var(--border);">/users/1</td><td style="padding:7px 12px;color:var(--text);border-bottom:1px solid var(--border);">부분 수정</td><td style="padding:7px 12px;color:var(--accent4);border-bottom:1px solid var(--border);">△ 경우에 따라</td></tr>
<tr><td style="padding:7px 12px;color:var(--danger);">DELETE</td><td style="padding:7px 12px;color:var(--text-dim);">/users/1</td><td style="padding:7px 12px;color:var(--text);">삭제</td><td style="padding:7px 12px;color:var(--accent);">✓ 멱등</td></tr>
</table>
<div class="info-text" style="margin-top:12px;">
REST 6원칙: <strong style="color:var(--accent)">Stateless</strong>(서버 상태 미보존) · <strong style="color:var(--accent3)">Uniform Interface</strong>(표준 HTTP) · <strong style="color:var(--accent4)">Cacheable</strong> · Client-Server · Layered System · Code on Demand(선택).
URI는 명사 사용, 동사 금지. 버전은 /v1/users 형식.
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- SECTION 9: TCP vs UDP -->
<section id="tcpudp">
<div class="section-header">
<div class="tag tag-ch8">09 — TCP vs UDP</div>
<h2>TCP vs UDP</h2>
<p>두 전송 계층 프로토콜의 핵심 차이입니다. 신뢰성이 필요하면 TCP, 속도가 중요하면 UDP를 선택합니다.</p>
</div>
<div class="viz-box">
<!-- 비교 표 -->
<table style="width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:0.78rem;margin-bottom:24px;">
<tr>
<th style="padding:10px 14px;background:var(--surface2);color:var(--text-dim);text-align:left;border-bottom:1px solid var(--border);font-size:0.7rem;letter-spacing:1px;">항목</th>
<th style="padding:10px 14px;background:rgba(0,255,170,0.06);color:var(--accent);text-align:center;border-bottom:1px solid var(--border);">TCP</th>
<th style="padding:10px 14px;background:rgba(107,138,255,0.06);color:var(--accent3);text-align:center;border-bottom:1px solid var(--border);">UDP</th>
</tr>
<tr><td style="padding:8px 14px;color:var(--text-dim);border-bottom:1px solid var(--border);">연결 방식</td><td style="padding:8px 14px;text-align:center;color:var(--accent);border-bottom:1px solid var(--border);">연결지향 (3-way handshake)</td><td style="padding:8px 14px;text-align:center;color:var(--accent3);border-bottom:1px solid var(--border);">비연결 (connectionless)</td></tr>
<tr><td style="padding:8px 14px;color:var(--text-dim);border-bottom:1px solid var(--border);">신뢰성</td><td style="padding:8px 14px;text-align:center;color:var(--accent);border-bottom:1px solid var(--border);">✓ 보장 (ACK, 재전송)</td><td style="padding:8px 14px;text-align:center;color:var(--danger);border-bottom:1px solid var(--border);">✗ 보장 안됨</td></tr>
<tr><td style="padding:8px 14px;color:var(--text-dim);border-bottom:1px solid var(--border);">순서 보장</td><td style="padding:8px 14px;text-align:center;color:var(--accent);border-bottom:1px solid var(--border);">✓ 순서 보장</td><td style="padding:8px 14px;text-align:center;color:var(--danger);border-bottom:1px solid var(--border);">✗ 순서 보장 안됨</td></tr>
<tr><td style="padding:8px 14px;color:var(--text-dim);border-bottom:1px solid var(--border);">속도</td><td style="padding:8px 14px;text-align:center;color:var(--accent4);border-bottom:1px solid var(--border);">느림 (오버헤드 있음)</td><td style="padding:8px 14px;text-align:center;color:var(--accent);border-bottom:1px solid var(--border);">빠름 (오버헤드 없음)</td></tr>
<tr><td style="padding:8px 14px;color:var(--text-dim);border-bottom:1px solid var(--border);">헤더 크기</td><td style="padding:8px 14px;text-align:center;color:var(--text);border-bottom:1px solid var(--border);">20~60 bytes</td><td style="padding:8px 14px;text-align:center;color:var(--accent);border-bottom:1px solid var(--border);">8 bytes</td></tr>
<tr><td style="padding:8px 14px;color:var(--text-dim);border-bottom:1px solid var(--border);">흐름/혼잡 제어</td><td style="padding:8px 14px;text-align:center;color:var(--accent);border-bottom:1px solid var(--border);">✓ 있음</td><td style="padding:8px 14px;text-align:center;color:var(--text-dim);border-bottom:1px solid var(--border);">✗ 없음</td></tr>
<tr><td style="padding:8px 14px;color:var(--text-dim);">주요 사용처</td><td style="padding:8px 14px;text-align:center;color:var(--text);">HTTP/S, 이메일, 파일전송</td><td style="padding:8px 14px;text-align:center;color:var(--text);">DNS, 스트리밍, 게임, VoIP</td></tr>
</table>
<!-- 전송 시뮬레이션 -->
<div style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;font-weight:700;margin-bottom:12px;">전송 시뮬레이션</div>
<div class="controls">
<button class="btn" onclick="simTCP()">TCP 전송</button>
<button class="btn" onclick="simUDP()">UDP 전송</button>
<button class="btn danger" onclick="simReset()">초기화</button>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;">
<div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--accent);margin-bottom:6px;">TCP</div>
<div id="tcpLog" style="background:var(--surface2);border-radius:8px;padding:12px;font-family:'JetBrains Mono',monospace;font-size:0.72rem;min-height:120px;line-height:1.9;color:var(--text-dim);"></div>
</div>
<div>
<div style="font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--accent3);margin-bottom:6px;">UDP</div>
<div id="udpLog" style="background:var(--surface2);border-radius:8px;padding:12px;font-family:'JetBrains Mono',monospace;font-size:0.72rem;min-height:120px;line-height:1.9;color:var(--text-dim);"></div>
</div>
</div>
<!-- 흐름 제어 / 혼잡 제어 -->
<div style="border-top:1px solid var(--border);padding-top:20px;margin-top:20px;">
<div style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;font-weight:700;margin-bottom:10px;">TCP 흐름/혼잡 제어</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;font-family:'JetBrains Mono',monospace;font-size:0.76rem;">
<div style="background:var(--surface2);border-radius:8px;padding:14px;">
<div style="color:var(--accent);font-weight:700;margin-bottom:8px;">흐름 제어 (Flow Control)</div>
<div style="color:var(--text-dim);line-height:1.8;font-size:0.72rem;">
· 수신자 처리 속도에 맞게 전송 속도 조절<br>
· 슬라이딩 윈도우 (Sliding Window) 방식<br>
· 수신자가 rwnd(수신 윈도우 크기) 알림<br>
· rwnd=0이면 전송 중단
</div>
</div>
<div style="background:var(--surface2);border-radius:8px;padding:14px;">
<div style="color:var(--accent3);font-weight:700;margin-bottom:8px;">혼잡 제어 (Congestion Control)</div>
<div style="color:var(--text-dim);line-height:1.8;font-size:0.72rem;">
· 네트워크 혼잡 감지 및 전송량 조절<br>
· Slow Start: cwnd 1부터 지수 증가<br>
· Congestion Avoidance: 선형 증가<br>
· 패킷 손실 시 cwnd 감소
</div>
</div>
</div>
</div>
<div class="info-text" style="margin-top:16px;">
<strong style="color:var(--accent4)">QUIC</strong>: Google이 개발한 UDP 기반 프로토콜. TCP의 신뢰성 + UDP의 속도. HTTP/3의 기반. 연결 설정이 0-RTT로 가능.
</div>
</div>
</section>
<footer>CS Visualizer · <a href="index.html" style="color:var(--accent);text-decoration:none;">목차로 돌아가기</a></footer>
<script>
/* ============================================================
SECTION 1: PACKET JOURNEY
============================================================ */
const NODES = [
{ id: 0, label: '내 컴퓨터 💻', color: '#6b8aff', x: 0.06 },
{ id: 1, label: '공유기/모뎀', color: '#ffaa00', x: 0.24 },
{ id: 2, label: 'ISP 라우터', color: '#ff9944', x: 0.42 },
{ id: 3, label: '백본 A', color: '#8888aa', x: 0.60 },
{ id: 4, label: '백본 B', color: '#8888aa', x: 0.76 },
{ id: 5, label: '목적지 🖥️', color: '#00ffaa', x: 0.94 },
];
const TR_MS = [2, 15, 28, 38, 55];
const EDGES = [[0,1],[1,2],[2,3],[3,4],[4,5]];
let packetAnimId = null;
let packetPos = -1;
let packetLossMode = false;
let packetPhase = 0; // 0=idle 1=sending 2=lost 3=done
const pCanvas = document.getElementById('packetCanvas');
const pCtx = pCanvas.getContext('2d');
function getNodeY() { return pCanvas.height / 2; }
function drawPacketScene(packetFrac, lostAt) {
pCtx.clearRect(0, 0, pCanvas.width, pCanvas.height);
const W = pCanvas.width, H = pCanvas.height;
// Edges
pCtx.lineWidth = 2;
pCtx.strokeStyle = '#2a2a3a';
NODES.forEach((n, i) => {
if (i < NODES.length - 1) {
pCtx.beginPath();
pCtx.moveTo(n.x * W, H / 2);
pCtx.lineTo(NODES[i + 1].x * W, H / 2);
pCtx.stroke();
}
});
// Nodes
NODES.forEach((n, i) => {
const x = n.x * W, y = H / 2;
pCtx.beginPath();
pCtx.arc(x, y, 18, 0, Math.PI * 2);
pCtx.fillStyle = n.color + '22';
pCtx.fill();
pCtx.strokeStyle = n.color;
pCtx.lineWidth = 2;
pCtx.stroke();
pCtx.fillStyle = n.color;
pCtx.font = '600 11px JetBrains Mono, monospace';
pCtx.textAlign = 'center';
pCtx.fillText(n.label, x, y + 34);
// TTL indicator
if (packetFrac >= 0) {
const ttl = 64 - Math.floor(packetFrac * 5);
if (i <= Math.floor(packetFrac * 5)) {
pCtx.fillStyle = '#888';
pCtx.font = '10px JetBrains Mono, monospace';
pCtx.fillText('TTL ' + ttl, x, y - 26);
}
}
});
// Packet
if (packetFrac >= 0 && packetFrac <= 1) {
const startX = NODES[0].x * W;
const endX = NODES[NODES.length - 1].x * W;
const px = startX + (endX - startX) * packetFrac;
const py = H / 2;
if (lostAt !== null && packetFrac >= lostAt) {
// Lost - draw fragments
pCtx.fillStyle = '#ff4466';
pCtx.font = '14px monospace';
pCtx.fillText('✗', px, py - 8);
pCtx.fillStyle = 'rgba(255,68,102,0.3)';
pCtx.beginPath(); pCtx.arc(px, py, 10, 0, Math.PI*2); pCtx.fill();
} else {
pCtx.beginPath();
pCtx.arc(px, py, 8, 0, Math.PI * 2);
pCtx.fillStyle = '#00ffaa';
pCtx.fill();
pCtx.strokeStyle = '#fff';
pCtx.lineWidth = 1.5;
pCtx.stroke();
// Glow
pCtx.beginPath();
pCtx.arc(px, py, 16, 0, Math.PI * 2);
pCtx.fillStyle = 'rgba(0,255,170,0.1)';
pCtx.fill();
}
}
}
function resizePacketCanvas() {
const wrap = pCanvas.parentElement;
pCanvas.width = wrap.clientWidth;
pCanvas.height = 200;
drawPacketScene(packetPos < 0 ? -1 : packetPos / 5, null);
}
function packetSend() {
if (packetAnimId) cancelAnimationFrame(packetAnimId);
packetLossMode = false;
packetPos = -1;
// Reset traceroute
for (let i = 0; i < 5; i++) {
const r = document.getElementById('tr' + i);
r.style.opacity = '0.3';
r.classList.remove('tr-active');
r.querySelector('.tr-ms').textContent = '— ms';
}
document.getElementById('nodeInfoBox').className = 'node-info-box';
document.getElementById('nodeInfoBox').textContent = '패킷 전송 중...';
let frac = 0;
let lastHop = -1;
function step() {
frac += 0.005;
if (frac > 1) frac = 1;
drawPacketScene(frac, null);
const hopIdx = Math.floor(frac * 5);
if (hopIdx !== lastHop && hopIdx > 0 && hopIdx <= 5) {
lastHop = hopIdx;
const trEl = document.getElementById('tr' + (hopIdx - 1));
if (trEl) {
trEl.style.opacity = '1';
trEl.classList.add('tr-active');
setTimeout(() => trEl.classList.remove('tr-active'), 800);
trEl.querySelector('.tr-ms').textContent = TR_MS[hopIdx - 1] + ' ms';
}
const node = NODES[hopIdx];
document.getElementById('nodeInfoBox').className = 'node-info-box active';
document.getElementById('nodeInfoBox').innerHTML =
'<b style="color:' + node.color + '">' + node.label + '</b> | ' +
'목적지: 142.250.80.46 → 다음 홉 결정 중... | TTL: ' + (64 - hopIdx);
}
if (frac < 1) {
packetAnimId = requestAnimationFrame(step);
} else {
document.getElementById('nodeInfoBox').innerHTML = '<b style="color:var(--accent)">✓ 패킷 도착!</b> 142.250.80.46 (Google) | 총 지연: 55ms | TTL: 59';
}
}
packetAnimId = requestAnimationFrame(step);
}
function packetLoss() {
if (packetAnimId) cancelAnimationFrame(packetAnimId);
for (let i = 0; i < 5; i++) {
const r = document.getElementById('tr' + i);
r.style.opacity = '0.3';
r.querySelector('.tr-ms').textContent = '— ms';
}
document.getElementById('nodeInfoBox').className = 'node-info-box active';
document.getElementById('nodeInfoBox').textContent = '패킷 손실 시뮬레이션 중... TCP가 재전송합니다.';
const lossAt = 0.5;
let frac = 0;
function step() {
frac += 0.005;
if (frac > lossAt + 0.05) {
drawPacketScene(frac, lossAt);
// After loss, show retransmit note
if (frac > lossAt + 0.2) {
document.getElementById('nodeInfoBox').innerHTML =
'<b style="color:var(--danger)">✗ 패킷 손실 감지!</b> TCP RTO(Retransmission Timeout) 후 재전송 시작...';
return;
}
} else {
drawPacketScene(frac, null);
}
packetAnimId = requestAnimationFrame(step);
}
packetAnimId = requestAnimationFrame(step);
}
function packetReset() {
if (packetAnimId) cancelAnimationFrame(packetAnimId);
packetPos = -1;
for (let i = 0; i < 5; i++) {
const r = document.getElementById('tr' + i);
r.style.opacity = '0.3';
r.querySelector('.tr-ms').textContent = '— ms';
}
document.getElementById('nodeInfoBox').className = 'node-info-box';
document.getElementById('nodeInfoBox').textContent = '노드를 클릭하거나 패킷 전송을 시작하세요.';
drawPacketScene(-1, null);
}
window.addEventListener('resize', resizePacketCanvas);
resizePacketCanvas();
/* ============================================================
SECTION 2: IP ADDRESS
============================================================ */
function ipToInt(ip) {
return ip.split('.').reduce((acc, oct) => (acc << 8) + parseInt(oct), 0) >>> 0;
}
function intToIp(n) {
return [(n >>> 24) & 255, (n >>> 16) & 255, (n >>> 8) & 255, n & 255].join('.');
}
function updateIP() {
const ipStr = document.getElementById('ipInput').value.trim();
const cidr = parseInt(document.getElementById('cidrSlider').value);
document.getElementById('cidrLabel').textContent = '/' + cidr;
const ipParts = ipStr.split('.').map(Number);
if (ipParts.length !== 4 || ipParts.some(p => isNaN(p) || p < 0 || p > 255)) {
document.getElementById('ipBitRow').innerHTML = '<span style="color:var(--danger);font-family:JetBrains Mono,monospace;font-size:0.8rem;">유효하지 않은 IP 주소</span>';
return;
}
const ipInt = ipToInt(ipStr);
const maskInt = cidr === 0 ? 0 : (0xFFFFFFFF << (32 - cidr)) >>> 0;
const netInt = (ipInt & maskInt) >>> 0;
const broadInt = (netInt | (~maskInt >>> 0)) >>> 0;
const hostCount = Math.pow(2, 32 - cidr) - 2;
// Render bit row
let bitsHtml = '';
const bits = [];
for (let i = 31; i >= 0; i--) bits.push((ipInt >>> i) & 1);
for (let i = 0; i < 32; i++) {
if (i > 0 && i % 8 === 0) bitsHtml += '<span class="ip-bit-sep">.</span>';
const isNet = i < cidr;
bitsHtml += `<span class="ip-bit ${isNet ? 'net' : 'host'}">${bits[i]}</span>`;
}
document.getElementById('ipBitRow').innerHTML = bitsHtml;
document.getElementById('ipNetwork').textContent = intToIp(netInt);
document.getElementById('ipBroadcast').textContent = intToIp(broadInt);
document.getElementById('ipMask').textContent = intToIp(maskInt);
document.getElementById('ipHostCount').textContent = hostCount > 0 ? hostCount.toLocaleString() + '개' : '불가';
}
updateIP();
/* ============================================================
SECTION 3: OSI 7-LAYER
============================================================ */
const OSI_LAYERS = [
{ num:7, name:'응용 계층', en:'Application', unit:'데이터', color:'var(--accent)',
desc:'사용자와 직접 상호작용. 네트워크 서비스를 응용 프로그램에 제공합니다.',
examples:'HTTP, HTTPS, FTP, SMTP, DNS, SSH, Telnet',
headers: null },
{ num:6, name:'표현 계층', en:'Presentation', unit:'데이터', color:'var(--accent3)',
desc:'데이터 형식 변환, 암호화(TLS), 압축. 서로 다른 시스템 간 데이터 표현 통일.',
examples:'SSL/TLS, JPEG, PNG, ASCII, Unicode, MPEG',
headers: null },
{ num:5, name:'세션 계층', en:'Session', unit:'데이터', color:'#a855f7',
desc:'통신 세션 설정·유지·종료. 대화 제어 및 동기화 관리.',
examples:'NetBIOS, RPC, NFS, SQL, SIP',
headers: null },
{ num:4, name:'전송 계층', en:'Transport', unit:'세그먼트', color:'var(--accent2)',
desc:'종단 간(end-to-end) 신뢰성 있는 데이터 전송. 포트 번호로 프로세스를 구분합니다.',
examples:'TCP, UDP — 포트: HTTP(80), HTTPS(443), SSH(22)',
headers: ['Source Port (16b)', 'Dest Port (16b)', 'Seq Num (32b)', 'Ack Num (32b)', 'Flags', 'Window Size'] },
{ num:3, name:'네트워크 계층', en:'Network', unit:'패킷', color:'var(--success)',
desc:'경로 선택(라우팅)과 논리 주소(IP) 지정을 담당합니다.',
examples:'IP(v4/v6), ICMP, ARP, OSPF, BGP, 라우터',
headers: ['Version', 'TTL', 'Protocol', 'Source IP (32b)', 'Dest IP (32b)', 'Checksum'] },
{ num:2, name:'데이터링크 계층', en:'Data Link', unit:'프레임', color:'var(--danger)',
desc:'물리적으로 연결된 두 노드 간의 신뢰성 있는 전송. MAC 주소로 장치를 식별합니다.',
examples:'Ethernet, Wi-Fi(802.11), PPP, MAC 주소, 스위치',
headers: ['Dest MAC (48b)', 'Src MAC (48b)', 'EtherType', 'Payload', 'CRC (32b)'] },
{ num:1, name:'물리 계층', en:'Physical', unit:'비트', color:'var(--text-dim)',
desc:'물리적 매체를 통한 비트 스트림 전송. 전기적·광학적 신호를 정의합니다.',
examples:'USB, RJ45, 광케이블, 허브, 리피터, RS-232',
headers: null },
];
let osiOpen = new Set();
let encapStep = 0;
let encapAnimId = null;
function renderOSI() {
const stack = document.getElementById('osiStack');
stack.innerHTML = OSI_LAYERS.map(layer => {
const isOpen = osiOpen.has(layer.num);
return `<div class="osi-layer" onclick="toggleOSI(${layer.num})" style="${isOpen ? 'border-color:'+layer.color+';background:rgba(0,0,0,0.15)' : ''}">
<div class="osi-layer-header">
<span class="osi-num" style="color:${layer.color}">${layer.num}</span>
<span class="osi-name" style="color:${layer.color}">${layer.name}</span>
<span class="osi-en">${layer.en}</span>
<span class="osi-unit" style="border-color:${layer.color}33;color:${layer.color}">${layer.unit}</span>
<span style="font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--text-dim);margin-left:8px;">${isOpen ? '▲' : '▼'}</span>
</div>
${isOpen ? `<div class="osi-detail">
<p>${layer.desc}</p>
<div class="osi-examples" style="color:${layer.color}">프로토콜/예시: ${layer.examples}</div>
${layer.headers ? `<div class="header-fields" style="margin-top:8px;">${layer.headers.map(h => {
const cls = layer.num === 4 ? 'hf hf-tcp' : layer.num === 3 ? 'hf hf-ip' : 'hf hf-eth';
return `<span class="${cls}">${h}</span>`;
}).join('')}</div>` : ''}
</div>` : ''}
</div>`;
}).join('');
}
function toggleOSI(num) {
if (osiOpen.has(num)) osiOpen.delete(num);
else osiOpen.add(num);
renderOSI();
}
renderOSI();
const ENCAP_CONFIGS = [
{ label: 'L7 데이터 (HTTP)', cls: 'encap-l7', width: 40 },
{ label: 'L4 세그먼트 (TCP Header + 데이터)', cls: 'encap-l4', width: 55 },
{ label: 'L3 패킷 (IP Header + TCP)', cls: 'encap-l3', width: 65 },
{ label: 'L2 프레임 (ETH Header + IP + FCS)', cls: 'encap-l2', width: 78 },
{ label: 'L1 비트 (0101 1100...)', cls: 'encap-l1', width: 100 },
];
const HEADER_DETAILS = {
0: { title: 'L7 Application Data', cls: 'hf-tcp', fields: ['GET /index.html HTTP/1.1', 'Host: example.com', 'Accept: text/html'] },
1: { title: 'L4 TCP Segment Header', cls: 'hf-tcp', fields: ['Source Port: 54321', 'Dest Port: 80 (HTTP)', 'Seq Num: 0x00A1B2C3', 'Ack Num: 0x00000000', 'Flags: SYN|ACK', 'Window: 65535'] },
2: { title: 'L3 IP Packet Header', cls: 'hf-ip', fields: ['Version: 4 (IPv4)', 'TTL: 64', 'Protocol: 6 (TCP)', 'Src IP: 192.168.1.100', 'Dst IP: 93.184.216.34', 'Checksum: 0x3A1B'] },
3: { title: 'L2 Ethernet Frame Header', cls: 'hf-eth', fields: ['Dst MAC: AA:BB:CC:DD:EE:FF', 'Src MAC: 11:22:33:44:55:66', 'EtherType: 0x0800 (IPv4)', 'FCS (CRC-32): 0x1A2B3C4D'] },