-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1051 lines (862 loc) · 45.8 KB
/
index.html
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" dir="ltr">
<!-- Reference code - responsive portfolio website - from CodingNepal -->
<!-- Reference code - carousel cards - https://codepen.io/dev_loop -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flipped Learning Thyroid Gland</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="carousel.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet">
<link rel="stylesheet" href="css_cards.css" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!--FontAwesome CNN Link for Icons-->
<script src="https://kit.fontawesome.com/a076d05399,js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<link rel="stylesheet" type="text/css" href="js/slick-1.8.1/slick-1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="js/slick-1.8.1/slick-1.8.1/slick/slick-theme.css"/>
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
<link rel="stylesheet" href="magnific-popup.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="/css/common.css" />
<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/css/subpage2.css" /> -->
<style>
</style>
<style type="text/css">
.slider {
max-width: 100%;
align-content: left;
padding-top: 2vw;
}
.slider img{
display: block;
width: 100%;
max-width: 100vw;
height: auto;
}
.slick-dots {
display: flex;
justify-content: center;
margin: 0;
padding: 3rem 0;
z-index: 600;
list-style-type: none;
}
.slick-dots li {
margin: 0 0.25rem;
z-index: 700;
}
.slick-dots button {
display: block;
width: 0.3vw;
height: 0.5vw;
padding: 0;
border: none;
border-radius: 100%;
background-color: rgba(255,255,255, 0.5);
z-index: 800;
text-indent: -9999px;
cursor: pointer;
}
.slick-dots li.slick-active button {
background-color: rgba(252, 252, 252, 0.829);
}
.slick-arrow{
display: inline-block;
position: relative;
padding-top: 45rem;
z-index: 500;
color: #fff;
font-size: 2rem;
}
.slick-prev,
.slick-next {
font-size:0;
position: absolute;
padding-bottom: 46rem;
color: rgb(255, 255, 255);;
border: 0;
background: none;
z-index: 1;
cursor: pointer;
}
.slick-prev {
left: 30px;
}
/* .slick-prev:after {
content: "\f104";
font: 40px/1 'FontAwesome';
} */
.slick-next {
right: 40px;
text-align: right;
}
/* .slick-next:after {
content: "\f105";
font: 40px/1 'FontAwesome';
} */
.slick-prev:hover:after,
.slick-next:hover:after {
color: #4f1063;
}
</style>
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon_io/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
<div class="max-width">
<div class="logo">
<a href="#home">
<span style= "color:#fa8072;">
<i class="fas fa-university " ></i></span>
<!-- <img alt="brand" src="images/logo_img-02.png"> -->
e-<span>flearn</span>ing</a></div>
<ul class="menu">
<li ><a href="#section2" class="menu-btn">갑상샘의 생리해부학</a></li>
<li ><a href="#section4" class="menu-btn">갑상샘 호르몬</a></li>
<li ><a href="#section9" class="menu-btn">환자의 진료과정</a></li>
<li ><a href="#section10" class="menu-btn">갑상샘 질환</a></li>
<li ><a href="#section7" class="menu-btn">About</a></li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$('.btn').click(function(){
$('.items').toggleClass("show");
$('ul li').toggleClass("hide");
});
});
</script>
<!-- video autoplay and overlay -->
<div class="overlay">
</div>
<video
src="./video/hormone_video.mp4" muted loop autoplay>
</video>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width" >
<div class="home-content">
<!-- <div style="position: absolute; z-index: -99; width: 100%; height: 65%">
<iframe id="2ae2b52e-2369-4705-9b12-fc22dd00f194"
src="https://app.vectary.com/viewer/v1/?model=2ae2b52e-2369-4705-9b12-fc22dd00f194&env=studio1"
frameborder="0" width="100%" height="480"></iframe>
</div> -->
<div class="text1">주입식 교육을 거꾸로!</div>
<div class="text2">학습자 중심의</div>
<div class="text3" >학습 콘텐츠 <span class="typing"></span></div>
<a href="#section1">학습 시작</a>
</div>
</div>
</section>
<!-- section1 학습목표 파트 start -->
<section class="section1" id="section1">
<div class="max-width" data-aos="fade-up">
<div class="section1-content">
<div class="left-column ">
<h2 class="title">학습목표</h2>
</div>
<div class="right-column ">
<div class="text1" data-aos="fade-up">갑상샘의 해부학적 구조,
호르몬 합성과정을 기반으로 호르몬 이상을 검사하고 결과를 해석할 수 있다.</i>
</div>
<div class="text2" data-aos="fade-up"> ① 갑상샘의 해부학적 구조에 대해 설명할 수 있다.
<br> ② 갑상샘호르몬의 생성과 분비과정을 설명할 수 있다.
<br> ③ 갑상샘호르몬의 기능을 설명할 수 있다.
<br> ④ 갑상샘 환자의 문진과 이학적 검사를 진행할 수 있다.
<br> ⑤ 갑상샘호르몬 검사의 종류를 설명할 수 있다.
<br> ⑥ 갑상샘 질환을 분류할 수 있다.
</div>
</div>
</div>
<!-- <div class="section1-content" data-aos="fade-up"> -->
<!-- <div class="left-column"> -->
<!-- </div> -->
<!-- <div class="right-column"> -->
<!-- <div class="text2">7. 증상에 따라 갑상샘 기능 이상을 추론하고 검사를 진행할 수 있다.</div> -->
<!-- </div> -->
</div>
</section>
<!-- section2 start -->
<section class="section2" id="section2">
<div class="max-width" data-aos="fade-up">
<h2 class="title">갑상샘</h2>
<div class="section2-content" data-aos="fade-up">
<!-- <div class="column left"> -->
<a class="img1" href="images/thyroid_1029.jpg"><img src="images/thyroid_1029.jpg" alt="thyroid"></a>
<!-- <img src="images/thyroid_1019.jpg" alt="thyroid2"> -->
<!-- <img src="images/thyroid_1019-2.jpg" alt="thyroid3"> -->
<!-- </div> -->
<!-- <div class="column right"> -->
<div class="text1">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i> -->
</span>갑상샘은 <span class="typing-2"></span>
</div>
</div>
<div class="section2-content-2" data-aos="fade-up">
<div class="left-column">
<div class="text3" data-aos="fade-up">우리 몸에서 <b>가장 큰 내분비샘</b>으로, 후두와 기관 앞가쪽에서 다섯째 목뼈(C5) ~ 첫째 등뼈(T1) 높이에 위치합니다.
</div>
</div>
<div class="right-column">
<div class="text3" data-aos="fade-up">우리 몸의 <b>신진대사를 조절하는 갑상샘 호르몬 T3, T4를 생산, 저장하였다가 혈액내로 분비</b>합니다. 또한, 칼슘 대사를 조절하는 칼시토닌(Calcitonin)을 생산하는 기관입니다.
</div>
</div>
</div>
</div>
</section>
<hr style="margin:auto;" width="75%" size="1" noshade="noshade"
style="background-color: #5e5477;" />
<!-- section3 start -->
<section class="section3" id="section3">
<div class="max-width" data-aos="fade-up">
<h2 class="title">해부학적 구조 <i style="padding: 30px 0 0; font-size: xx-large;" class="fas fa-dice-d6 fa-xs"></i>
<i style="padding: 30px 0 0; font-size: xx-large;" class="fas fa-sync-alt fa-xs"></i></h2>
<div class="section3-content" >
<div class="iframebox">
<iframe width=80% height=80% frameborder="0" allowfullscreen
src="./webplayer/webplayer1.html?load=../thyroid-part2-desktop3.json&autorotate"
>
</iframe>
</div>
<div class="text1">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i></span> -->
갑상샘 해부학적 설명 </div>
<div class="section3-content-2" data-aos="fade-up">
<div class="left-column">
<div class="text3">보통 성인의 갑상샘 무게는 15~20g 이며, 좌엽(Left lobe)과 우엽(Right lobe) 그리고 그 사이를 연결하는 협부(Isthmus)로 구성됩니다.
</div>
</div>
<div class="right-column">
<div class="text3">협부는 보통 기관(Trachea)의 2~4번째 연골고리 앞에 위치하며, Pyramidal lobe의 경우 인구의 50%에서 발견됩니다.</div>
</div>
</div>
<!-- <p align="left"style="line-height: 1.68; font-size: 1.15em;"></p> -->
</div>
</div>
</section>
<hr style="margin:auto;" width="75%" size="1" noshade="noshade"
style="background-color: #5e5477;" />
<!-- section3-2 갑상샘의 생리 start -->
<section class="section3-2" id="section3-2">
<div class="max-width" data-aos="fade-up">
<h2 class="title">갑상샘의 생리</h2>
<div class="section3-2-content">
<div class="left-column">
<div class="img-container">
<a class="img3" href="images/iodine.gif"><img src="images/iodine.gif" alt="thyroid physiology"></a>
</div>
</div>
<div class="right-column" data-aos="fade-up">
<div class="text1" data-aos="fade-up">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i></span> -->
요오드의 대사</div>
<div class="text3">
(1) 요오드는 해조류 (다시마, 미역, 톳, 파래, 청각, 김)에 풍부하게 들어 있고, 어패류에도 소량 포함되어 있습니다.
<br>ex) 마른미역 1g에는 77ug의 요오드가 함유되어 있습니다.
</div>
<div class="text3">
(2) 요오드의 성인 일인 권장 섭취량은 150ug 입니다.
<br>ex) 마른미역 20g
(임신중 - 200ug / 어린이 - 90~120ug)
</div>
<div class="text3">
(3) 요오드는 주로 소장에서 전량 흡수되며, 혈액내에서는 I-로 존재합니다.
</div>
<div class="text3">
(4) 섭취된 요오드의 약 1/4은 갑상샘으로 들어가고, 나머지는 신장으로 배설됩니다. 갑상샘의 요오드 저장양은 약 8mg에 이릅니다.
</div>
</div>
<!-- <p align="left"style="line-height: 1.68; font-size: 1.15em;"></p> -->
</div>
</div>
</section>
<!-- section4 start -->
<section class="section4" id="section4">
<div class="max-width" data-aos="fade-up">
<h2 class="title">미세구조와 호르몬 <i style="padding: 30px 0 0; font-size: xx-large;" class="fas fa-dice-d6 fa-xs"></i>
<i style="padding: 30px 0 0; font-size: xx-large;" class="fas fa-sync-alt fa-xs"></i></h2>
<div class="section4-content">
<div class="iframebox">
<iframe width=80% height=80% frameborder="0" allowfullscreen
src="./webplayer/webplayer.html?load=../0830_thyroid_microstructure.json"
>
</iframe>
</div>
</div>
<!-- <img src="images/thyroid histology.JPG" alt="thyroid histology"> -->
<div class="section4-content-2" data-aos="fade-up">
<div class="left-column">
<div class="text1" data-aos="fade-up">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i></span> -->
갑상샘 미세구조</div>
<div class="text3" data-aos="fade-up">
갑상샘의 구조적 기본 단위는 갑상샘 소포(Follicle)이며,
이들이 약 40개 모여서 갑상샘의 소엽(Lobule)을 형성합니다. 소포는 0.05~0.5mm 크기의 포도알 모양이며 속공간은 교질(Colloid)
로 차 있습니다. 교질 내에는 갑상샘글로불린(thyroglobulin)이 꽉 차 있고, 갑상샘글로불린 안에 갑상샘 호르몬 T4와 T3가 저장되어 있습니다.
</div>
</div>
<div class="right-column">
<div class="text1" data-aos="fade-up">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i></span> -->
호르몬이란? </div>
<div class="text3"data-aos="fade-up">
특정한 내분비샘에서 생성, 저장되어 있다가 관류하는 혈액 중으로
분비되어 멀리 떨어져있는 표적세포 (target cell) 에 이르러 특정한 기능을 발휘하는 물질을 말합니다.
갑상샘 호르몬의 생성, 분비는 <b>요오드의 포획 > 산화와 유기화 > 운반 > 방출 </b>의 단계를 통해 이루어집니다.
</div>
<div class="text1" data-aos="fade-up">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i></span> -->
갑상샘의 기능</div>
<div class="text3" data-aos="fade-up">
(1) 갑상샘 호르몬 T3, T4를 생산, 저장하였다가 혈액 내로 분비합니다.
<br> (2) Parafollicular C cell에서는 Calcitonin을 생산합니다.
</div>
</div>
</div>
</div>
</section>
<hr style="margin:auto;" width="100%" size="1" noshade="noshade"
style="color:#5e5477; background-color:white; " />
<!-- section5 start -->
<section class="section5" id="section5">
<div class="max-width" data-aos="fade-up">
<h2 class="title">갑상샘 호르몬 분비</h2>
<div class="section5-content">
<div class="iframebox">
<iframe width="560" height="315" src="https://www.youtube.com/embed/bCa-HSyRyJA?rel=0" frameborder="0" allowfullscreen
></iframe>
</div>
<div class="left-column" data-aos="fade-up">
<div class="text1"data-aos="fade-up">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i></span> -->
혈액 내의 갑상샘 호르몬</div>
<div class="text3"data-aos="fade-up">
혈액 내 갑상샘 호르몬의 80%는 T4이며 나머지가 T3에 해당됩니다.
혈액 내의 T4의 경우 오직 갑상샘에서만 생성됩니다.
혈액 내의 T3의 20%는 갑상샘에서 생성된 것이며 나머지 80%는 말초부위(근육, 간, 신장, 뇌하수체 등)에서
T4로부터 T3로 전환된 것입니다.
</div>
</div>
<div class="right-column" data-aos="fade-up">
<div class="text1" data-aos="fade-up">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i></span> -->
갑상샘 호르몬의 기능</div>
<div class="text3" data-aos="fade-up">
광범위하게 몸을 구성하는 세포의 대사산물을 조절하는 기능을 합니다.
특히, 갑상샘 호르몬은 세포내의 미토콘드리아에 작용하여
산소 소비를 증가시켜 기초대사율(basal metabolic rate BMR)을 올리고 열을 발생시킵니다.
</div>
<div class="text3" data-aos="fade-up">
갑상샘 호르몬은 신체의 거의 전조직에 효과를 나타내며, 특히 대사와 성장발달에 영향을 줍니다.
신생아나 소아에서는 뼈의 성장과 중추신경의 발육에 중요한 역할을 합니다. 그 외에도
정신발육에도 영향을 줍니다.
</div>
<div class="text3" data-aos="fade-up">
갑상샘호르몬은 catecholamine effect에 대한 synergic action에 의하여
심장박동(heart rate), 심박출량(cardiac output)을 증가시킵니다.
</div>
<div class="text3" data-aos="fade-up">
당대사, 단백질 대사, 지질대사, 비타민 대사의 기능도 합니다.
</div>
</div>
</div>
</div>
</section>
<hr style="margin:auto;" width="100%" size="1" noshade="noshade"
style="color:#5e5477; background-color:white; " />
<!-- section12 갑상샘 호르몬의 조절기전 start -->
<section class="section12" id="section12">
<div class="max-width" data-aos="fade-up">
<h2 class="title">갑상샘 호르몬의 조절기전 <i style="padding: 30px 0 0; font-size: xx-large;" class="fas fa-dice-d6 fa-xs"></i>
<i style="padding: 30px 0 0; font-size: xx-large;" class="fas fa-sync-alt fa-xs"></i></h2>
<div class="section12-content" data-aos="fade-up">
<div class="iframebox">
<iframe width=80% height=80% frameborder="0" allowfullscreen
src="./webplayer/webplayer.html?load=../TEST_thyroid_axis.json"
>
</iframe>
</div>
<div class="left-column" data-aos="fade-up">
<div class="text1" data-aos="fade-up">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i></span> -->
시상하부-뇌하수체-갑상샘 축</div>
<div class="text3" data-aos="fade-up">
(1) 갑상샘에서의 T4, T3의 생산과 분비는 정상적으로 뇌하수체에서 분비되는 TSH에 의해 주로 조절됩니다.
</div>
<div class="text3" data-aos="fade-up">
(2) 뇌하수체에서 생산, 분비되는 TSH는 시상하부에서 분비되는 TRH와 somatostatin에 의해 조절됩니다.
</div>
<div class="text3" data-aos="fade-up">
(3) 혈중 free form의 갑상샘호르몬의 감소는 뇌하수체에서의 TSH분비를 촉진시키며,
반대로 혈중 free form의 갑상샘 호르몬의 증가는 뇌하수체에서 TSH분비를 감소시킵니다.
</div>
<div class="text3"data-aos="fade-up">
(4) TSH는 갑상샘으로의 요오드의 유입을 증가시키고, 갑상샘호르몬의 생산과 분비를 촉진시키며, 갑상샘의 성장을 자극합니다.
</div>
</div>
<div class="right-column"data-aos="fade-up">
<div class="text1"data-aos="fade-up">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i></span> -->
갑상샘의 자가조절기능 (Autoregulation)</div>
<div class="text3"data-aos="fade-up">
: 요오드 섭취량이 변화하여도 뇌하수체-갑상샘축과 상관없이 갑상샘 기능을 정상으로 유지하려는 현상입니다.
</div>
<div class="text3"data-aos="fade-up">
(1) 과량의 요오드 섭취시, 갑상샘 내에서의 요오드 유입 및 유기화를 억제(Wolff-Chaikoff 효과)하고 혈액내로의 갑상샘 호르몬 분비를 억제합니다.
그러나, 이런 현상은 일시적이며 계속 과량 섭취시, 이탈현상에 의해 오히려 갑상샘 호르몬 생산이 증가합니다.
</div>
<div class="text3"data-aos="fade-up">
(2) 갑상샘 내의 요오드화 물질이 많아지면 갑상샘 내로의 요오드 유입을 스스로 억제합니다. 또한, 갑상샘 내에 호르몬이 충분한 상태라면 갑상샘
내로 유입된 요오드가 호르몬을 만드는데 사용되지 않고 그대로 밖으로 유출됩니다.
</div>
<div class="text3"data-aos="fade-up">
(3) T3, T4 생산비를 조절합니다. - 요오드 부족으로 갑상샘 기능저하가 생겨 TSH가 증가되면 좀 더 역가가 강한 T3의 생산이 증가합니다.
</div>
</div>
</div>
</div>
</section>
<!-- section9 start -->
<section class="section9" id="section9">
<div class="max-width" data-aos="fade-up">
<h2 class="title">갑상샘 환자의 진단과정</h2>
<div class="section9-content" data-aos="fade-up">
<!-- <img src="images/thyroid histology.JPG" alt="thyroid histology"> -->
<!-- <div class="text1">갑상샘의 시진 및 촉진</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;">1. 앞에서 환자의 목을 관찰합니다.
2. 턱을 젖히고 침을 삼키면서 관찰합니다. 3. 엄지손가락으로 눌러봅니다.
4. 환자의 턱을 젖히고 침을 삼키게 하여 촉진합니다. 5.
</p>
<div class="text1">갑상샘 기능검사의 시행</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;">1. 먼저, 증상에 대한 병력청취와 검진을 시행하고 CBC, admission battery
등의 일반적인 검사를 시행한 이후에 갑상샘 기능검사를 시행합니다.
</p>
<div class="text1">1. 스크리닝을 위한 검사 : TSH, 혹은 TSH와 free T4를 측정</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;">1) </p>
<div class="text1">2. 스크리닝에서 이상이 발견된 경우</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;">1) TSH가 억제된 경우 2) 갑상샘기능저하증이 있는 환장의 경우
</p>
<div class="text1">3. 갑상샘 스캔</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;">1) TSH가 억제된 경우 2) 갑상샘기능저하증이 있는 환장의 경우
</p> -->
<!-- vertical timeline format test-->
<div class="wrapper-timeline" data-aos="fade-up">
<div class="center-line">
<a href="#" class="scroll-icon"><i class="fas fa-caret-up"></i></a>
</div>
<div class="row row-1"data-aos="fade-up">
<section>
<i class="icon fas fa-user-md"></i>
<div class="details" >
<span class="title2">갑상샘의 시진 및 촉진</span>
<!-- <span>1st Jan 2021</span> -->
</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;">1. 증상에 대한 병력청취와 검진을 시행합니다.
</p>
<p align="left" style="line-height: 1.68; font-size:1.15em;">2. 앞에서 환자의 목을 관찰합니다.
</p>
<p align="left" style="line-height: 1.68; font-size:1.15em;">
3. 환자의 턱을 젖히고 침을 삼키게 하고 관찰합니다.
</p>
<p align="left" style="line-height: 1.68; font-size:1.15em;">
4. 엄지손가락으로 갑상샘을 눌러봅니다.
</p>
<p align="left" style="line-height: 1.68; font-size:1.15em;">
5. 환자의 턱을 젖히고 침을 삼키게 하여 촉진합니다.
</p>
<!-- <div class="bottom">
<a href="#">Read more</a>
<i>- Someone famous</i>
</div> -->
</section>
</div>
<div class="row row-2"data-aos="fade-up">
<section>
<i class="icon fas fa-vial"></i>
<div class="details">
<span class="title2">갑상샘 기능검사의 시행</span>
<!-- <span>2nd Jan 2021</span> -->
</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;">CBC, admission battery
등의 일반적인 검사를 시행한 이후에 갑상샘 기능검사를 시행합니다.
</p>
<!-- <div class="bottom">
<a href="#">Read more</a>
<i>- Someone famous</i>
</div> -->
</section>
</div>
<div class="row row-1"data-aos="fade-up">
<section>
<i class="icon fas fa-vials"></i>
<div class="details">
<span class="title2">스크리닝을 위한 검사 <br> : TSH, 혹은 TSH와 free T4를 측정</span>
<!-- <span>3rd Jan 2021</span> -->
</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;">갑상샘 중독증 의심시, 검사를 진행합니다.
</p>
<!-- <div class="bottom">
<a href="#">Read more</a>
<i>- Someone famous</i>
</div> -->
</section>
</div>
<div class="row row-2"data-aos="fade-up">
<section>
<i class="icon fas fa-exclamation-triangle"></i>
<div class="details">
<span class="title2">스크리닝에서 이상이 발견된 경우</span>
<!-- <span>4th Jan 2021</span> -->
</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;">1) TSH가 억제된 경우
</p>
<p align="left" style="line-height: 1.68; font-size:1.15em;">
2) 갑상샘기능저하증이 있는 환자의 경우
</p>
<!-- <div class="bottom">
<a href="#">Read more</a>
<i>- Someone famous</i>
</div> -->
</section>
</div>
<div class="row row-1"data-aos="fade-up">
<section>
<i class="icon fas fa-radiation"></i>
<div class="details">
<span class="title2">갑상샘 스캔</span>
<!-- <span>5th Jan 2021</span> -->
</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;">1) I- 131/123 요오드 스캔 : 갑상샘의 기능 확인
</p>
<p align="left" style="line-height: 1.68; font-size:1.15em;">2) technicium 99M : 갑상샘 mass 및 형태 확인
</p>
<!-- <div class="bottom">
<a href="#">Read more</a>
<i>- Someone famous</i>
</div> -->
</section>
</div>
<div class="row row-2"data-aos="fade-up">
<section>
<i class="icon fas fa-map-marker-alt"></i>
<div class="details">
<span class="title2"> 추가 검사 진행</span>
<!-- <span>6th Jan 2021</span> -->
</div>
<p align="left" style="line-height: 1.68; font-size:1.15em;"> 이로써 감별진단의 과정이 끝이 납니다.
<br> 이후, 혈액검사, 항체검사, 염증 검사 등의 추가 검사를 진행합니다.
</p>
<!-- <div class="bottom">
<a href="#">Read more</a>
<i>- Someone famous</i>
</div> -->
</section>
</div>
</div>
</div>
</div>
</section>
<hr style="margin:auto;" width="75%" size="1" noshade="noshade"
style="background-color: #5e5477;" />
<!-- section8 갑상샘 기능검사 종류 start -->
<section class="section8" id="section8">
<div class="max-width" data-aos="fade-up">
<h2 class="title">갑상샘 기능검사</h2>
<div class="section8-content" data-aos="fade-up">
<!-- <img src="images/thyroid histology.JPG" alt="thyroid histology"> -->
<div class="text1" data-aos="fade-up">
<!-- <span style="color : #fa8072;"><i class="fas fa-arrow-circle-right"></i></span> -->
갑상샘 기능검사의 종류</div>
<div class="text3" data-aos="fade-up">갑상샘 질환이 의심되는 환자의 갑상샘 기능 상태를
정확히 평가하는 목적의 검사입니다.
갑상샘 기능검사에서는 주로 4가지 방사성 핵종을 사용하는데
체내 검사에는 131i, 123i, 99mTc 그리고 체외검사에서는 125i를 이용합니다.
이 파트에서는 임상에서 활용되는 기능검사 총 6가지를 소개합니다.
</div>
</div>
<div class="section8-content" data-aos="fade-up"></div>
<!-- horizontal card code starts -->
<div class="slider" data-aos="fade-up">
<div><a class="img2" href="slides/01.jpg"><img src="slides/01.jpg" ></a></div>
<div><a class="img2" href="slides/02.jpg"><img src="slides/02.jpg" ></a></div>
<div><a class="img2" href="slides/03.jpg"><img src="slides/03.jpg" ></a></div>
<div><a class="img2" href="slides/04.jpg"><img src="slides/04.jpg" ></a></div>
<div><a class="img2" href="slides/05.jpg"><img src="slides/05.jpg" ></a></div>
</div>
<!-- horizontal card code ends -->
</div>
</div>
</section>
<hr style="margin:auto;" width="75%" size="1" noshade="noshade"
style="background-color: #5e5477;" />
<!-- section10 갑상샘 질환 파트 start -->
<section class="section10" id="section10">
<div class="max-width" data-aos="fade-up">
<h2 class="title">갑상샘 질환</h2>
<div class="wrapper" data-aos="fade-up">
<header></header>
<input type="radio" name="slider2" checked id="disease">
<input type="radio" name="slider2" id="blog">
<input type="radio" name="slider2" id="code">
<input type="radio" name="slider2" id="help">
<nav>
<label for="disease" class="disease"><i class="fas fa-diagnoses"></i>기능이상</label>
<label for="blog" class="blog"><i class="fas fa-exclamation-triangle"></i>기능이상+모양이상</label>
<label for="code" class="code"><i class="fas fa-disease"></i>모양이상</label>
<label for="help" class="help"><i class="fas fa-bahai"></i>기능정상+모양이상</label>
<div class="slider2"></div>
</nav>
<section class="section20" id="section20">
<div class="content content-1" data-aos="fade-up">
<div class="title2">갑상샘기능항진증, 갑상샘기능저하증, 불현성</div>
<p>▶ 혈액검사를 통해 진단하며, 검사 이상과 증상이 동반한다. </p>
<p><br></p>
<p style="line-height: 190%;"><b>* 갑상샘기능항진증</b> : 검사는 TSH 측정으로 시작하는 경우가 많으며,
갑상샘이 과활성인 경우 TSH 수치가 낮다. 반면 뇌하수체가 과활성인 경우 TSH 수치가 정상이거나 높다.
호르몬의 과다 분비로 인하여 체력소모가 심해지고 쉽게 피로를 느낀다.
왕성한 식욕으로 잘 먹지만 체중이 감소한다. 땀이 많이 나며 숨이 많이 찬다. </p>
<p><br></p>
<p style="line-height: 190%;"><b>* 갑상샘기능저하증</b> : 갑상샘 호르몬(T4 또는 T3)의 농도가 정상보다 낮고,
TSH가 정상보다 높게 나온다. 호르몬 부족으로 에너지 대사가 떨어져
얼굴이 붓고 추위를 잘 느끼며 피로하고 집중력이 저하되며 체중이 증가한다. </p>
<p><br></p>
<p style="line-height: 190%;"><b>* 불현성 갑상샘기능저하증</b> : 갑상샘에서 분비하는 호르몬 수치는 정상이나 뇌에서 갑상샘을 자극하는 TSH의 수치가
높은 상태로 '무증상 갑상샘기능저하증'으로도 불린다. 우울과 만성피로 등의 증상이 경미하여 잘 느끼지 못한다. </p>
</div>
<div class="content content-2">
<div class="title2">열결절, 다발성 중독성 결절, 갑상샘염(급성, 아급성, 만성)</div>
<p>▶ 혈액검사를 통해 진단하며, 검사 이상과 갑상샘 모양이상이 동반한다. </p>
<p><br></p>
<p style="line-height: 190%;"><b>* 열결절</b> : TSH가 낮으며, 갑상샘 스캔을 통해 진단한다.
열결절의 경우 악성의 가능성이 낮아 세침흡인 검사를 생랼할 수 있다.</p>
<p><br></p>
<p style="line-height: 190%;"><b>* 다발성 중독성 결절</b> : 갑상샘의 종양은 거의 양성종양이지만 약 5%는 암이다.
갑상샘이 비정상적으로 커져있으며,
여러 개의 결절이 발견된다. 경우에 따라 비대해진 갑상샘이 주변 조직 및 기관을 압박하여 증상이 나타난다.
식도나 기도를 압박할 경우 음식물을 삼키기 어렵다.
혈액검사를 통해 갑상샘 호르몬과 TSH를 측정하면 갑상샘 호르몬은 높고 TSH는 낮다.
세침흡인 검사를 통한 조직검사로 암을 진단한다.</p>
<p><br></p>
<p style="line-height: 190%;"><b>* 갑상샘염(급성, 아급성, 만성)</b> : 갑상샘에 염증이 생겨 붓고 만지면 통증을 느낀다.
원인으로는 자가면역 반응이 있으며, 바이러스에 의한 감염 혹은 특정 약물 복용, 방사선 치료로 인해 발생할 수도 있다.
갑상샘 기능이 정상, 저하, 항진의 경우가 있으며 대체로 기능저하증이 나타난다. 진단과정에서 갑상샘 스캔과 방사성 요오드 섭취율 검사도 진행한다. </p>
</div>
<div class="content content-3">
<div class="title2">비대, 결절, 다발성 결절</div>
<p>▶ 초음파 검사를 통해 모양의 이상을 확인하며 기능에 문제가 있는 경우 / 문제가 없는 경우로 나뉜다.</p>
<p><br></p>
<p style="line-height: 190%;"><b>* 비대</b> : 갑상샘의 크기가 비대해진 경우로 갑상샘 결절, 갑상샘염, 갑상샘중독증으로 인한
비대증이 발생할 수 있다. </p>
<p><br></p>
<p style="line-height: 190%;"><b>* 결절</b> : 갑상샘 결절은 대부분 양성이며 5% 정도만 암으로 발견된다.
양성 갑상샘 결절의 경우 대체로 기능에 문제가 없으며, 주변 조직을 압박하여 생기는 문제가 없는 이상 큰 문제는 없다.
대한갑상선학회 진료 권고안에 따르면 초음파 검사상 악성일 수 있거나 0.5cm보다 큰 경우 세침흡인검사를 고려해야 한다.</p>
<p><br></p>
<p style="line-height: 190%;"><b>* 다발성 결절</b> : 여러 개의 결절이 발생한 경우로 모양 이상 이외의
증상이 크게 발생하지 않는 경우가 많다. 1cm보다 큰 결절이 발견되면 혈중TSH를 측정하여 TSH가 낮게 나오면 갑상샘스캔을
통해 열결절인지 아닌지 감별한다. 열결절의 경우 악성의 가능성이 낮아 세침흡인검사가 필요하지 않다.</p>
</div>
<div class="content content-4">
<div class="title2">양성종양, 악성종양, 낭종</div>
<p>▶ 초음파 검사를 통해 모양의 이상을 확인한다. 대체로 모양에만 이상이 있을뿐, 기능에는 문제가 없다.</p>
<p><br></p>
<p style="line-height: 190%;"><b>* 양성종양</b> : 양성종양은 크게 이상하지 않은 세포가 뭉쳐서 혹이나 물혹의 형태가 된 것이다.
주변으로 퍼지지 않지만, 불편하거나 아픈 경우 치료가 필요하다. 크기가 큰 경우에는 암의 가능성이 있으므로 조직검사를 진행한다.</p>
<p><br></p>
<p style="line-height: 190%;"><b>* 악성종양</b> : 악성종양은 양성종양과 달리 몸의 다른 곳으로 퍼져서
생명을 잃을 수도 있다. 세침흡인검사를 통해 악성종양으로 진단되면, 암을 포함한 조직을
제거하는 갑상샘 절제술을 해야할 수 있다.</p>
<p><br></p>
<p style="line-height: 190%;"><b>* 낭종</b> : 결절의 40% 정도는 낭종으로 대부분 치료하지 않아도 되는 물혹이다.
대체로 특별한 이유없이 발생하며 가족력, 스트레스, 피로와 연관있을 수 있다. 악성이 의심될 때는 세침흡인검사를 진행한다.</p>
</div>
<!-- <div class="content content-5">
<div class="title">This is a About content</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia sequi aliquam. Voluptatem distinctio nemo culpa veritatis nostrum fugit rem adipisci ea ipsam, non veniam ut aspernatur aperiam assumenda quis esse soluta vitae, placeat quasi. Iste dolorum asperiores hic impedit nesciunt atqu, officia magnam commodi iusto aliquid eaque, libero.</p>
</div> -->
</section>
</div>
</div>
</section>
<hr style="margin:auto;" width="75%" size="1" noshade="noshade"
style="background-color: #5e5477;" />
<!-- section7 start -->
<section class="section7" id="section7">
<div class="max-width" data-aos="fade-up">
<h2 class="title">About</h2>
<div class="section7-content">
<!-- <div class="left-column" data-aos="fade-up"> -->
<div class="text1" data-aos="fade-up">프로젝트 소개
</div>
<div class="text3" data-aos="fade-up">본 프로젝트는 의과대학 본과 1학년 2학기 임상내분비학
영양 및 내분비대사학 파트에서 사용되는 Flipped learning (예습용) ppt 시각자료의 개선 및 보완을 위해 기획되었습니다.
교육 철학에서 학습자들이 그들 스스로 지식을 구성한다는 구성주의적 관점을 토대로 학생 중심의 Flipped learning용
학습 콘텐츠를 제작하고자 하였습니다.
</div>
<!-- </div> -->
<!-- <div class="right-column" data-aos="fade-up"> -->
<div class="text1" data-aos="fade-up">프로젝트 목적</div>
<div class="text3" data-aos="fade-up">
기존의 ppt 자료보다 다양하고 재미있는 시각적 콘텐츠의 제작을 통해 학생들의 흥미 증진을 유도하고자 하였습니다.
웹을 기반으로 콘텐츠를 제작한 이유는, 언제 어디서든 다양한 디바이스를 통해 학습이 가능한 편의성과
3d WebGL 기반의 인터렉티브 3d 모델, 2d 이미지, 동영상 등 다양한 미디어 혹은 포맷의
콘텐츠를 모두 담아서 전달할 수 있는 가장 적절한 포맷이기 때문입니다.
</div>
<!-- </div> -->
<div class="text1" data-aos="fade-up">Credit</div>
<div class="text4" data-aos="fade-up">
<b>임소영</b> Lim Soyoung <br>
인천가톨릭대학교대학원 바이오메디컬아트 전공<br>
<p>Incheon Catholic University Graduate School Biomedical Art</p><br>
<i class="fas fa-envelope"></i> syl942511@gmail.com
<!-- <i class="fab fa-instagram"></i> <a href= 'https://www.instagram.com/imsso_bmed/' target='blank'>imsso_bmed</a> -->
<br><br><br>
<span><b>지도 교수 Supervision</b> <br></span>
<b>윤관현</b> Kwanhyun Youn Ph.D. <br>
<p>Biomedical Art<br>
Incheon Catholic University Graduate School</p><br><br>
<span><b>기술 자문 Technical advisory</b></span><br>
<b>김민주</b> Minjoo Kim <br>
<p>Biomedical Art<br>
<p>Incheon Catholic University Graduate School</p> <br><br>
<b>박사범</b> Park Sabeom <br>
<p>Center of Biohealth Convergence and Open Sharing System<br>
Hongik University</p><br><br>
<b>윤태원</b> Taewon Youn<br>
<p>BioArtLab</p> <br> <br>
<span><b>내용 자문 Content advisory</b></span> <br>
<b>원영준</b> Young Jun Won <br>
<p>MD. Ph.D Catholic Kwandong University College of Medicine</p> <br><br>
<b>김혜진</b> Hyejin Kim <br>
<p>Biomedical Art<br>
Catholic University Graduate School</p> <br><br>
<b>손동휘</b> Felix Donghwi Son<br>
<p>Felixvis</p> <br><br><br><br>
copyright 2021. 임소영 All rights reserved.
</div>
<!-- </div> -->
</div> <!-- section7-content -->
</div> <!-- max width -->
</section>
<script type="text/javascript">
$('.img1').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: true,
fixedContentPos: true,
image: { verticalFit: true },
gallery: { enabled: true }, // 좌우로 사진 돌려보기 생성
zoom: { enabled: true, duration: 400 }
});
$('.img2').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: true,
fixedContentPos: true,
image: { verticalFit: true },
gallery: { enabled: true }, // 좌우로 사진 돌려보기 생성
zoom: { enabled: true, duration: 400 }
});
$('.img3').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: true,
fixedContentPos: true,
image: { verticalFit: true },
gallery: { enabled: true }, // 좌우로 사진 돌려보기 생성
zoom: { enabled: true, duration: 400 }
});
</script>
<script src="script.js"> </script>
<!-- <script type="text/javascript" src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script>
<script type="text/javascript" src="css_cards.js"></script> -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/slick-1.8.1/slick-1.8.1/slick/slick.min.js"></script>
<!-- 스크롤 fade in 스크립트 -->
<script>
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
</script>
<!-- 비디오 자동재생 스크립트 -->
<script> document.getElementById('vid').play();
</script>