-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
715 lines (713 loc) · 28.3 KB
/
index.html
File metadata and controls
715 lines (713 loc) · 28.3 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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:type" content="website" />
<meta
property="og:title"
content="(산대특) 클라우드 기반 자바/파이썬 활용 AI융합 풀스택개발자 과정 육성 개발 기록 블로그"
/>
<meta property="og:description" content="Git Page서비스로 만들어봄" />
<meta
property="og:image"
content="https://gamgo.github.io/lmsgithub/HTML/day02/datas/thumb.webp"
/>
<meta property="og:url" content="https://gamgo.github.io/lmsgithub/" />
<link rel="icon" href="HTML/day01/favicon2.jpg" />
<link rel="stylesheet" href="HTML/day02/datas/03.css" />
<title>D main - 메인페이지</title>
</head>
<body>
<div id="headpts"></div>
<details>
<summary class="h2font">1. 외부 서버로 링크 연결</summary>
<div class="icontrans">
<!-- 실제 url[웹주소] : -->
<a title="네이버 현재 창에서 오픈" href="https://www.naver.com">
<img width="64px" height="64px" src="HTML/day01/naver.png" alt="" />
</a>
<a
title="네이버 새 창에서 오픈"
href="https://www.naver.com"
target="_blank"
>
<img
width="64px"
height="64px"
src="HTML/day01/navernew.png"
alt=""
/>
</a>
</div>
</details>
<h2 class="h2font">2. 내부 페이지 링크 연결</h2>
<article>
<!-- 실제 url[웹주소] : http://127.0.0.1:5500/day02/02Multimedia.html
현재 페이지와 http://127.0.0.1:5500/day02/부분이 같으므로 웹문서 파일명만 작성 -->
<ol>
<details>
<summary class="pointer">WEEK 1st</summary>
<li>
<a
title="첫 수업에서 vscode 문서 만들어보기 "
href="HTML/day01/test.html"
><img width="16px;" src="HTML/day01/favicon.ico" />테스트</a
>
</li>
<li>
<a title="태그별 기능 알아보기 " href="HTML/day01/01start.html"
><img width="16px;" src="HTML/day01/namucss.svg" />스타트</a
>
</li>
<li>
<a
title="1일차에서 배운 기능을 복습"
href="HTML/day01/day01review.html"
><img width="16px;" src="HTML/day01/favicon.ico" />REVIEW</a
>
</li>
<li>
<a
title="네이버뮤직 아이유의 네모의 꿈 정보 글씨만 띄워보기"
href="HTML/day01/IU.html"
><img src="HTML/day01/iu.jpg" width="16px;" />아이유 - 네모의꿈</a
>
</li>
<div class="hr-sect">2025.06.16</div>
<li>
<a
title="이미지,동영상등 미디어 띄워보기"
href="HTML/day02/02Multimedia.html"
><img src="HTML/day01/favicon.ico" width="16px;" />페이지2</a
>
</li>
<li>
<a title="목록 만들어보기" href="HTML/day02/04listup.html"
><img src="HTML/day02/datas/list.png" width="16px;" />목록
만들기</a
>
</li>
<li>
<a
title="배운 기능들로 2일차 복습 및 단어 용어집 제작"
href="HTML/day02/day02words.html"
><img src="HTML/day02/datas/httpsicon.png" width="16px;" />2일차
수업 용어집</a
>
</li>
<li>
<a
title="블록에 대한 이해를 위한 실습"
href="HTML/day03/05block.html"
><img src="HTML/day02/datas/block.webp" width="16px;" />블록에
관한 실습과 테스트</a
>
</li>
<div class="hr-sect">2025.06.17</div>
<li>
<a
title="CSS 활용하는 법을 연습하고 자식요소 선택 예시를 따라해보기"
href="HTML/day03/06CSS.html"
><img src="HTML/day01/namucss.svg" width="16px;" />CSS실습</a
>
</li>
<li>
<a
title="표를 만들고 CSS로 꾸미고 Class로 따로 적용해보기"
href="HTML/day03/07ClassProperty.html"
><img src="HTML/day02/datas/list.png" width="16px;" />표만들기 및
Class실습</a
>
</li>
<li>
<a
title="나무위키 CSS, HTML문서를 배운내용을 이용해 따라만들기"
href="HTML/day03/08DIVEX1.html"
><img src="HTML/day02/datas/namuicon.png" width="16px;" />꺼무위키
따라해보기</a
>
</li>
<li>
<a
title="Position과 Relative/Static 차이를 알아보자"
href="HTML/day03/09Position.html"
><img
src="HTML/day03/assets/imgs/spamimg.jpg"
width="16px;"
/>Positions</a
>
</li>
<li>
<a
title="Form에 대한 설명을 듣고 따라만들기"
href="HTML/day03/10Userform.html"
><img
src="HTML/day02/datas/list.png"
width="16px;"
/>사용자입력폼</a
>
</li>
<div class="hr-sect">2025.06.18</div>
<li>
<a
title="table(표)만들기를 연습하고 및 복습하기"
href="HTML/day03/11Label.html"
><img src="HTML/day02/datas/list.png" width="16px;" />Label과 form
연습</a
>
</li>
<li>
<a
title="Flexbox에 대해 설명을 듣고 따라만들기"
href="HTML/day04/12Flexbox.html"
><img
src="HTML/day04/assets/icon/flexicon.svg"
width="16px;"
/>Flexbox 연습</a
>
</li>
<li>
<a
title="NC다이노스 사이트 따라 만들어보기"
href="HTML/day04/13NcDinosItems.html"
><img
src="HTML/day04/assets/icon/ncdinos.svg"
width="16px;"
/>ncdinos 쇼핑몰</a
>
</li>
<li>
<a
title="부트스트랩을 사용해보자"
href="HTML/day04/14Bootstrap.html"
><img
src="HTML/day04/assets/icon/Bootstrap.png"
width="16px;"
/>부트스트랩사용기</a
>
</li>
<div class="hr-sect">2025.06.19</div>
<li>
<a title="자바 스크립트를 이용해보자" href="JS/day05/01JsStart.html"
><img src="HTML/day04/assets/icon/js.svg" width="16px;" />Java
script시작!</a
>
</li>
<li>
<a title="자바 스크립트를 이용해보자" href="JS/day05/02Event.html"
><img src="HTML/day04/assets/icon/js.svg" width="16px;" />Js:
Event처리</a
>
</li>
<li>
<a
title="자바 스크립트를 이용해보자"
href="JS/day05/03EventProperty.html"
><img src="HTML/day04/assets/icon/js.svg" width="16px;" />Js:
Event속성</a
>
</li>
<div class="hr-sect">2025.06.20</div>
</details>
<details class="pointer">
<summary>WEEK 2nd</summary>
<li>
<a
title="주말동안 NC다이노스 사이트 따라 만들어보기2"
href="homework/dinos.html"
><img src="homework/img/favicon.svg" width="16px;" />숙제 : NC
Dinos 홈페이지 상단 따라하기</a
>
</li>
<li>
<a
title="자바 스크립트를 이용해보자"
href="JS/day06/04EventReview.html"
><img
src="HTML/day04/assets/icon/js.svg"
width="16px;"
/>Event기능 복습!</a
>
</li>
<li>
<a
title="이벤트 예제를 통해 숙달해보자"
href="JS/day06/05EventEX2.html"
><img
src="HTML/day04/assets/icon/js.svg"
width="16px;"
/>Event예제2</a
>
</li>
<li>
<a
title="IF문 예정를 풀어보며 익숙해져보자"
href="JS/day06/06IFProbelms.html"
><img src="HTML/day04/assets/icon/js.svg" width="16px;" />IF문
연습문제</a
>
</li>
<li>
<a
title="IF문과 Event를 섞어 전등이 켰다 껏다하게끔 만들어보자."
href="JS/day06/07Refactoring.html"
><img
src="JS/day05/assets/imgs/pic_bulbon.gif"
width="12px;"
/>전등키기+파비콘 적용 테스트</a
>
</li>
<div class="hr-sect">2025.06.23</div>
<li>
<a
title="Array로 아이돌 그룹 이름을 변수에 저장하고 추가도 해보자."
href="JS/day07/08Array.html"
><img src="HTML/day02/datas/list.png" width="16px;" />배열 실습</a
>
</li>
<li>
<a
title="배열메소드 연습을 해보자, 콘솔창으로도 봐야한다."
href="JS/day07/09ArrayMethod.html"
><img src="HTML/day02/datas/list.png" width="16px;" />배열 메소드
실습</a
>
</li>
<li>
<a title="반복문 시작!" href="JS/day07/10Repeator.html"
><img src="HTML/day02/datas/list.png" width="16px;" />for반복문</a
>
</li>
<li>
<a
title="트와이스 맴버를 이요해서 반복문과 IF문 연습하기"
href="JS/day07/11ArrayNrepeating.html"
><img src="JS/day07/assets/icons/gear.png" width="16px;" />배열과
반복문</a
>
</li>
<li>
<a
title="Li요소를 명령어로 만드는 방법을 연습해보자"
href="JS/day07/12ElementMaking.html"
><img src="HTML/day02/datas/list.png" width="16px;" />요소
만들기</a
>
</li>
<li>
<a
title="함수유형과 호이스팅에 대해 익숙하게끔 연습을 해보자"
href="JS/day07/13Function.html"
><img src="JS/day07/assets/icons/gear.png" width="16px;" />함수와
함수 호이스팅 알아보자</a
>
</li>
<li>
<a title="함수 활용 및 연습" href="JS/day07/14FuncPractice.html"
><img src="JS/day07/assets/icons/calc.png" width="16px;" />함수
연습</a
>
</li>
<li>
<a title="계산기랑 표만들기" href="JS/day07/15calc.html"
><img
src="JS/day07/assets/icons/exel.png"
width="16px;"
/>계산기+표</a
>
</li>
<div class="hr-sect">2025.06.24</div>
<li>
<a
title="시간표 다음날꺼 불러오기"
href="JS/day08/15-1timeTable.html"
><img src="JS/day07/assets/icons/exel.png" width="16px;" />내일
시간표</a
>
</li>
<li>
<a
title="내일과 오늘 시간표를 불러와보자"
href="JS/day08/16-1timeTable_function.html"
><img src="JS/day07/assets/icons/exel.png" width="16px;" />시간표
연습
</a>
</li>
<li>
<a
title="선생님께서 만든 코드를 분석해보자"
href="JS/day07/16TeacherSample.html"
><img src="JS/day07/assets/icons/exel.png" width="16px;" />시간표
함수 예제구경</a
>
</li>
<li>
<a
title="객체 구성 요소에 대해 알아보자"
href="JS/day08/17Object.html"
><img
src="JS/day08/assets/icons/objectbox.png"
width="16px;"
/>객체 구성요소</a
>
</li>
<li>
<a
title="객체 배열에 이름,주소,국적과 같은 여러 데이터를 저장해 출력해보자"
href="JS/day08/18ObjectArray.html"
><img
src="JS/day08/assets/icons/objectbox.png"
width="16px;"
/>객체 배열 실습</a
>
</li>
<li>
<a
title="객체 배열에 이름,주소,국적과 같은 여러 데이터를 저장해 UI도 추가해보자"
href="JS/day08/19ex.html"
><img
src="JS/day08/assets/icons/objectbox.png"
width="16px;"
/>객체배열표 제작</a
>
</li>
<li>
<a
title="15~16에서 고생해서 만든 표를 이번엔 forEach문을 이용해 가로배치로 만들어 보자"
href="JS/day08/20ex.html"
><img
src="JS/day08/assets/icons/objectbox.png"
width="16px;"
/>시간표 가로배열표 제작</a
>
</li>
<div class="hr-sect">2025.06.25</div>
<li>
<a
title="콜백함수가 어떤 것이 있는지 직접 실습하며 익혀보자"
href="JS/day09/21Callback.html"
><img
src="JS/day09/assets/icons/callback.png"
width="16px;"
/>콜백 함수 시작</a
>
</li>
<li>
<a
title="window.setTimeout 테스트를 해보면서 함수를 익혀보자"
href="JS/day09/22Timeout.html"
><img
src="JS/day09/assets/icons/watch.png"
width="16px;"
/>브라우저를 통해 시간 받기</a
>
</li>
<li>
<a title="타이머를 제작해보자!" href="JS/day09/23Timer.html"
><img src="JS/day09/assets/icons/watch.png" width="16px;" />타이머
제작</a
>
</li>
<li>
<a
title="메소드 몇 개 더 테스트해보기"
href="JS/day09/24Arraymethod2.html"
><img
src="JS/day08/assets/icons/objectbox.png"
width="16px;"
/>메소드JS실습</a
>
</li>
<div class="hr-sect">2025.06.26</div>
<li>
<a
title="날짜 데이터를 가져와서 화면에 띄워보자"
href="JS/day09/27date.html"
><img
src="JS/day09/assets/icons/date.png"
width="16px;"
/>예약날짜</a
>
</li>
<li>
<a
title="카카오 API를 가져와서 이미지를 띄워보자"
href="JS/day09/28Kakao.html"
><img
src="JS/day09/assets/icons/kakao.png"
width="16px;"
/>RESTAPI</a
>
</li>
<li>
<a
title="데이터를 로드하여 어웨트와 어싱크를 이해해보자"
href="JS/day09/29loaddata.html"
><img
src="JS/day08/assets/icons/objectbox.png"
width="16px;"
/>then & await/async</a
>
</li>
<div class="hr-sect">2025.06.27</div>
</details>
<details>
<summary class="pointer">WEEK 3rd</summary>
<li>React 시작</li>
<div class="hr-sect">2025.06.30</div>
<li>useState 연습 시작</li>
<li>useState 연습 - 불빛 켰다 끄기를 콜백함수를 이용하여 구현하기</li>
<li>useState + 유효성 검사와 정규식 이용하기</li>
<div class="hr-sect">2025.07.01</div>
<li>리액트 실습</li>
<div class="hr-sect">2025.07.02</div>
<li>몽고DB를 활용한 서버에서 데이터 저장 및 받아오기</li>
<div class="hr-sect">2025.07.03</div>
<li>할일 목록, 시간표 만들기</li>
<div class="hr-sect">2025.07.04</div>
</details>
<details>
<summary class="pointer">WEEK 4th</summary>
<li>2주차 과제 - 박스 움직이기 HTML을 리액트로 변환작업</li>
<div class="hr-sect">2025.07.07</div>
<li>useState 익숙해지기 위한 추가 실습</li>
<div class="hr-sect">2025.07.08</div>
<li>자바 시작!</li>
<li>JAVA의 데이터 타입 (기본타입과 객체타입)</li>
<li>HTML과 리액트 활용 시험</li>
<div class="hr-sect">2025.07.09</div>
<li>자바 연습 문제</li>
<div class="hr-sect">2025.07.10</div>
<li>자바 pulbic, default, private에 대해</li>
<li>3주차 숙제 - 문제 맞추는 페이지 리엑트로 제작해보자</li>
<div class="hr-sect">2025.07.11</div>
</details>
<details>
<summary class="pointer">WEEK 5th</summary>
<li>JAVA - 커스텀 생성자 실습</li>
<div class="hr-sect">2025.07.14</div>
<li>
콘솔 입력, static 메소드 정의, 계산기 기능 메소드 예제, 데이터의
overflow , 변수 scope, switch 와 while
</li>
<li>추상 클래스, 인터페이스 기본 형식(🔥다형성)</li>
<div class="hr-sect">2025.07.15</div>
<li>Collection 자료구조</li>
<li>Cloneable, Comparable 자바 인터페이스 테스트</li>
<div class="hr-sect">2025.07.16</div>
<li>Math.random()으로 로또만들기</li>
<div class="hr-sect">2025.07.17</div>
<li>회원관리 프로그램 만들어보기</li>
<li>Math.random으로 스무고개 숫자게임 만들기 숙제</li>
<div class="hr-sect">2025.07.18</div>
</details>
<details>
<summary class="pointer">WEEK 6th</summary>
<li>객체의 참조값, 불변 객체, toString() 재정의</li>
<div class="hr-sect">2025.07.21</div>
<li>2진수 비트 연산</li>
<div class="hr-sect">2025.07.22</div>
<li>롬복 lombok 라이브러리 활용</li>
<li>자바 주간평가 - 회원관리 프로그램 코드 빈칸 작성</li>
<div class="hr-sect">2025.07.23</div>
<li>자바 Map에 대한 모든 것</li>
<div class="hr-sect">2025.07.24</div>
<li>리눅스와 깃 사용방법을 연습하다.</li>
<div class="hr-sect">2025.07.25</div>
</details>
<details>
<summary class="pointer">WEEK 7th</summary>
<li>구글 클라우드 기본적인 세팅과 CLI활용에 대해 배웠다.</li>
<li>git사용법을 연습했다.</li>
<div class="hr-sect">2025.07.28</div>
<li>Oracle 시작</li>
<div class="hr-sect">2025.07.29</div>
<li>Oracle과 프로그래머스 코딩테스트로 문제 풀기</li>
<li>자바 활용 시험</li>
<div class="hr-sect">2025.07.30</div>
<li>Oracle Select,Delete,Drop등 각 명령어를 연습</li>
<div class="hr-sect">2025.07.31</div>
<li>Oracle과 자바 연결해서 데이터 접근하는 방법을 배웠다.</li>
<li>자바로 데이터를 수정,저장,조회,삭제를 구현</li>
<div class="hr-sect">2025.08.01</div>
</details>
<details>
<summary class="pointer">WEEK 8th</summary>
<li>Vs code에서 sql 연결을 위한 Mybatis를 설치하고 활용했다.</li>
<li>자바와 sql연결하여 데이터 관리 앱을 구현</li>
<div class="hr-sect">2025.08.04</div>
<li>Oracle에서 Join, left join에 대한 것을 배웠다.</li>
<div class="hr-sect">2025.08.05</div>
<li>SQL 데이터 활용 시험</li>
<li>git과 구글 클라우드 cli 활용 시험</li>
<div class="hr-sect">2025.08.06</div>
<li>이클립스 설치 및 세팅</li>
<div class="hr-sect">2025.08.07</div>
<li>이클립스를 이용한 HTML 페이지 만들기</li>
<li>이클립스로 tomcat 서버를 연결해보다.</li>
<div class="hr-sect">2025.08.08</div>
</details>
<details>
<summary class="pointer">WEEK 9th</summary>
<li>이클립스로 sql데이터를 웹페이지에서 조회할 수 있게 구현</li>
<li>
<a
title="데이터를 로드하여 어웨트와 어싱크를 이해해보자"
href="2506_Jsp-main/src/main/webapp/index.jsp"
>
<img
src="HTML/day02/datas/httpsicon.png"
width="16px;"
/>톰캣INDEX
</a>
</li>
<li>스프링 부트 개념 - BEAN, DI 학습</li>
<div class="hr-sect">2025.08.11</div>
<li>Mybatis - spring</li>
<li>단위테스트 junit 사용방법 학습</li>
<div class="hr-sect">2025.08.12</div>
<li>REST API 구현하기 브라우저에서 JS로 화면 만들기</li>
<div class="hr-sect">2025.08.13</div>
<li>Talend API를 이용한 회원 관리 시스템 활용</li>
<div class="hr-sect">2025.08.14</div>
</details>
<details>
<summary class="pointer">WEEK 10th</summary>
<li>MVC패턴 기초 및 활용</li>
<li>MVC로 파일 업로드기능 구현하여 Query log.info에 찍어보기</li>
<div class="hr-sect">2025.08.18</div>
<li>MVC패턴 만들어서 product,customer 리스트 화면출력하기</li>
<li>
<a
title="스프링 부트에서 MVC패턴을 이용한 사이트 만들기실습"
href="spring_workspace/spring_5webmvc/src/main/resources/templates/index.html"
>
<img src="HTML/day02/datas/on.svg" width="16px;" />MVC패턴을
이용한 사이트제작 INDEX</a
>
</li>
<div class="hr-sect">2025.08.19</div>
<li>Controller -> Service -> Dao에 대한 내용을 학습하다.</li>
<li>Car list를 조건검색, 조회하는 반응형 웹페이지 제작해보기</li>
<div class="hr-sect_birthday">2025.08.20 생일</div>
<li>게시판 웹 페이지를 만들어보았다.</li>
<div class="hr-sect">2025.08.21</div>
<li>게시판 웹 페이지에서 덧글 기능을 JavaScript로 구현해보았다.</li>
<li>enum에 대해 학습하다.</li>
<div class="hr-sect">2025.08.22</div>
</details>
<li>JPA 입문 및 기초이론 배웠다.</li>
<div class="hr-sect">2025.08.25</div>
<li>Spring Security에 기초이론 배우고 로그인과 회원가입을 구현했다.</li>
<li>JPA실습에서 Entity와 Dto연결을 해보다</li>
<div class="hr-sect">2025.08.26</div>
<li>Spring Security로 인증없이 접속 가능한 페이지를 설정해보았다.</li>
<li>Spring Security과 JWT로 로그인과 권한부여가 있는 게시판의 기초를 세웠다.</li>
<div class="hr-sect">2025.08.27</div>
<li>지난번에 이어서 게시판을 연동하고 완성하다.</li>
<li>중간프로젝트 팀 구성 및 아이디어 브레인스토밍</li>
<div class="hr-sect">2025.08.28</div>
<div class="hr-sect">2025.08.29</div>
<div class="hr-sect">2025.09.01</div>
<div class="hr-sect">2025.09.02</div>
<div class="hr-sect">2025.09.03</div>
<div class="hr-sect">2025.09.04</div>
<div class="hr-sect">2025.09.05</div>
<div class="hr-sect">2025.09.08</div>
<div class="hr-sect">2025.09.09</div>
<div class="hr-sect">2025.09.10</div>
<div class="hr-sect">2025.09.11</div>
<div class="hr-sect">2025.09.12</div>
</ol>
</article>
<hr />
<details>
<summary class="h2font pointer">3. 연습</summary>
<div>
<ul>
<li>
<p>
스타일 시트 언어이므로 일반적인 프로그래밍 언어와는 다른 종류의
기능을 하지만
<a
style="color: brown"
href="https://namu.wiki/w/HTML"
target="_blank"
>HTML</a
>과 완전히 분리시켜 구조화된
<a
style="color: brown"
href="https://namu.wiki/w/HTML"
target="_blank"
>HTML</a
>과 연결시키면 다음 코드로
<u
><b
><a
href="https://namu.wiki/w/Hello%2C%20world!"
target="_blank"
>Hello World</a
></b
></u
>를 출력할 수 있기도 하다.
</p>
</li>
<li>
<p>
이에 따라 W3C에서는
<em
>"디자인적 요소를
<a
style="color: brown"
href="https://namu.wiki/w/HTML"
target="_blank"
>HTML</a
>과 완전히 분리시켜 구조화된
<a
style="color: brown"
href="https://namu.wiki/w/HTML"
target="_blank"
>HTML</a
>을 만들어보자!"</em
>라는 목적으로 CSS를 발표했다. 거기에 따라 bgcolor 등과 같이
<a
style="color: brown"
href="https://namu.wiki/w/HTML"
target="_blank"
>HTML</a
>에서
<strong>디자인에 관련된 요소들은 전부 사용하지 말 것</strong>을
권고하고 있다. CSS 발표 이후로
<a
style="color: brown"
href="https://namu.wiki/w/HTML"
target="_blank"
>HTML</a
>
문서의 구조화를 도와주는 div, span, section 등의 새로운 태그가
도입되고 strike, font등의 스타일 태그는 비권장 태그로 전환되다가
HTML5에서는 아예 삭제되었다. table은 표 형태의 데이터를 표현하는
용도에만 쓰도록 권고하면서 표의 구조화를 도와줄 thead, tbody
태그가 새로 소개되었다.
</p>
</li>
</ul>
</div>
</details>
<hr />
<footer>
<ul class="fontstp">
<div id="1stline">
<li>
<a
title="실습 중 발생한 버그를 기록했다."
href="HTML/day03/buglist.html"
>Bug report</a
>
</li>
</div>
</ul>
</footer>
</body>
</html>