1+ <!DOCTYPE html>
2+ < html lang ="ko ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < link rel ="icon " href ="html/day01/favicon2.jpg " />
8+ < link rel ="stylesheet " href ="datas/03.css " />
9+ < title > Dmain</ title >
10+ < style >
11+ h2 {
12+ margin : 20px ;
13+ color : blue;
14+ }
15+ </ style >
16+ </ head >
17+
18+ < body >
19+ < div id ="headpts "> </ div >
20+ < details >
21+ < summary class ="h2font "> 1. 외부 서버로 링크 연결</ summary >
22+ < div class ="icontrans ">
23+ <!-- 실제 url[웹주소] : -->
24+ < a title ="네이버 현재 창에서 오픈 " href ="https://www.naver.com ">
25+ < img width ="64px " height ="64px " src ="html/day01/naver.png " alt ="" />
26+ </ a >
27+ < a title ="네이버 새 창에서 오픈 " href ="https://www.naver.com " target ="_blank ">
28+ < img width ="64px " height ="64px " src ="html/day01/navernew.png " alt ="" />
29+ </ a >
30+ </ div >
31+ </ details >
32+ < h2 class ="h2font "> 2. 내부 페이지 링크 연결</ h2 >
33+ < article >
34+ <!-- 실제 url[웹주소] : http://127.0.0.1:5500/day02/02Multimedia.html
35+ 현재 페이지와 http://127.0.0.1:5500/day02/부분이 같으므로 웹문서 파일명만 작성 -->
36+ < ol >
37+ < details class ="pointer ">
38+ < summary > WEEK 1st</ summary >
39+ < li > < a title ="첫 수업에서 vscode 문서 만들어보기 " href ="/day01/test.html "> < img width ="16px; "
40+ src ="html/day01/favicon.ico "> 테스트</ a > </ li >
41+ < li > < a title ="태그별 기능 알아보기 " href ="html/day01/01start.html "> < img width ="16px; "
42+ src ="html/day01/namucss.svg "> 스타트</ a > </ li >
43+ < li > < a title ="1일차에서 배운 기능을 복습 " href ="html/day01/day01review.html "> < img width ="16px; "
44+ src ="html/day01/favicon.ico "> REVIEW</ a > </ li >
45+ < li > < a title ="네이버뮤직 아이유의 네모의 꿈 정보 글씨만 띄워보기 " href ="html/day01/IU.html "> < img src ="html/day01/iu.jpg "
46+ width ="16px; "> 아이유 - 네모의꿈</ a > </ li >
47+ < div class ="hr-sect "> 2025.06.16</ div >
48+ < li > < a title ="이미지,동영상등 미디어 띄워보기 " href ="02Multimedia.html "> < img src ="html/day01/favicon.ico "
49+ width ="16px; "> 페이지2</ a > </ li >
50+ < li > < a title ="목록 만들어보기 " href ="04listup.html "> < img src ="html/day02/datas/list.png " width ="16px; "> 목록 만들기</ a >
51+ </ li >
52+ < li > < a title ="배운 기능들로 2일차 복습 및 단어 용어집 제작 " href ="day02words.html "> < img src ="html/day02/datas/httpsicon.png "
53+ width ="16px; "> 2일차 수업 용어집</ a > </ li >
54+ < li > < a title ="블록에 대한 이해를 위한 실습 " href ="html/day03/05block.html "> < img src ="html/day02/datas/block.webp "
55+ width ="16px; "> 블록에 관한 실습과 테스트</ a > </ li >
56+ < div class ="hr-sect "> 2025.06.17</ div >
57+ < li > < a title ="CSS 활용하는 법을 연습하고 자식요소 선택 예시를 따라해보기 " href ="html/day03/06css.html "> < img
58+ src ="html/day01/namucss.svg " width ="16px; "> CSS실습</ a > </ li >
59+ < li > < a title ="표를 만들고 CSS로 꾸미고 Class로 따로 적용해보기 " href ="html/day03/07classproperty.html "> < img
60+ src ="html/day02/datas/list.png " width ="16px; "> 표만들기 및 Class실습</ a > </ li >
61+ < li > < a title ="나무위키 CSS, HTML문서를 배운내용을 이용해 따라만들기 " href ="html/day03/08DIVEX1.html "> < img
62+ src ="html/day02/datas/namuicon.png " width ="16px; "> 꺼무위키 따라해보기</ a > </ li >
63+ < li > < a title ="Position과 Relative/Static 차이를 알아보자 " href ="html/day03/09Position.html "> < img
64+ src ="html/day03/assets/imgs/spamimg.jpg " width ="16px; "> Positions</ a > </ li >
65+ < li > < a title ="Form에 대한 설명을 듣고 따라만들기 " href ="html/day03/10Userform.html "> < img src ="html/day02/datas/list.png "
66+ width ="16px; "> 사용자입력폼</ a > </ li >
67+ < div class ="hr-sect "> 2025.06.18</ div >
68+ < li > < a title ="table(표)만들기를 연습하고 및 복습하기 " href ="html/day03/11Label.html "> < img src ="html/day02/datas/list.png "
69+ width ="16px; "> Label과 form 연습</ a > </ li >
70+ < li > < a title ="Flexbox에 대해 설명을 듣고 따라만들기 " href ="html/day04/12Flexbox.html "> < img
71+ src ="html/day04/assets/icon/flexicon.svg " width ="16px; "> Flexbox 연습</ a > </ li >
72+ < li > < a title ="NC다이노스 사이트 따라 만들어보기 " href ="html/day04/13NcDinosItems.html "> < img
73+ src ="html/day04/assets/icon/ncdinos.svg " width ="16px; "> ncdinos 쇼핑몰</ a > </ li >
74+ < li > < a title ="부트스트랩을 사용해보자 " href ="html/day04/14Bootstrap.html "> < img
75+ src ="html/day04/assets/icon/Bootstrap.png " width ="16px; "> 부트스트랩사용기</ a > </ li >
76+ < div class ="hr-sect "> 2025.06.19</ div >
77+ < li > < a title ="자바 스크립트를 이용해보자 " href ="JS/day05/01JsStart.html "> < img
78+ src ="html/day04/assets/icon/js.svg " width ="16px; "> Java script시작!</ a > </ li >
79+ < li > < a title ="자바 스크립트를 이용해보자 " href ="JS/day05/02Event.html "> < img src ="html/day04/assets/icon/js.svg "
80+ width ="16px; "> Js: Event처리</ a > </ li >
81+ < li > < a title ="자바 스크립트를 이용해보자 " href ="JS/day05/03EventProperty.html "> < img
82+ src ="html/day04/assets/icon/js.svg " width ="16px; "> Js: Event속성</ a > </ li >
83+ < div class ="hr-sect "> 2025.06.20</ div >
84+ </ details >
85+ < li > < a title ="주말동안 NC다이노스 사이트 따라 만들어보기2 " href ="homework/dinos.html "> < img
86+ src ="homework/img/favicon.svg " width ="16px; "> 숙제 : NC Dinos 홈페이지 상단 따라하기</ a > </ li >
87+ < li > < a title ="자바 스크립트를 이용해보자 " href ="JS/day06/04EventReview.html "> < img
88+ src ="html/day04/assets/icon/js.svg " width ="16px; "> Event기능 복습!</ a > </ li >
89+ < li > < a title ="이벤트 예제를 통해 숙달해보자 " href ="JS/day06/05EventEX2.html "> < img src ="html/day04/assets/icon/js.svg "
90+ width ="16px; "> Event예제2</ a > </ li >
91+ < li > < a title ="IF문 예정를 풀어보며 익숙해져보자 " href ="JS/day06/06IFProbelms.html "> < img
92+ src ="html/day04/assets/icon/js.svg " width ="16px; "> IF문 연습문제</ a > </ li >
93+
94+ < li > < a title ="IF문과 Event를 섞어 전등이 켰다 껏다하게끔 만들어보자. " href ="JS/day06/07Refactoring.html "> < img
95+ src ="JS/day05/assets/imgs/pic_bulbon.gif " width ="12px; "> 전등키기+파비콘 적용 테스트</ a > </ li >
96+ < div class ="hr-sect "> 2025.06.23</ div >
97+ < li > < a title ="Array로 아이돌 그룹 이름을 변수에 저장하고 추가도 해보자. " href ="JS/day07/08Array.html "> < img
98+ src ="html/day02/datas/list.png " width ="16px; "> 배열 실습</ a > </ li >
99+ < li > < a title ="배열메소드 연습을 해보자, 콘솔창으로도 봐야한다. " href ="JS/day07/09ArrayMethod.html "> < img
100+ src ="html/day02/datas/list.png " width ="16px; "> 배열 메소드 실습</ a > </ li >
101+ < li > < a title ="반복문 시작! " href ="JS/day07/10Repeator.html "> < img src ="html/day02/datas/list.png "
102+ width ="16px; "> for반복문</ a > </ li >
103+ < li > < a title ="트와이스 맴버를 이요해서 반복문과 IF문 연습하기 " href ="JS/day07/11ArrayNrepeating.html "> < img
104+ src ="JS/day07/assets/icons/gear.png " width ="16px; "> 배열과 반복문</ a > </ li >
105+ < li > < a title ="Li요소를 명령어로 만드는 방법을 연습해보자 " href ="JS/day07/12ElementMaking.html "> < img
106+ src ="html/day02/datas/list.png " width ="16px; "> 요소 만들기</ a > </ li >
107+ < li > < a title ="함수유형과 호이스팅에 대해 익숙하게끔 연습을 해보자 " href ="JS/day07/13Function.html "> < img
108+ src ="JS/day07/assets/icons/gear.png " width ="16px; "> 함수와 함수 호이스팅 알아보자</ a > </ li >
109+ < li > < a title ="함수 활용 및 연습 " href ="JS/day07/14FuncPractice.html "> < img
110+ src ="JS/day07/assets/icons/calc.png " width ="16px; "> 함수 연습</ a > </ li >
111+ < li > < a title ="계산기랑 표만들기 " href ="JS/day07/15calc.html "> < img src ="JS/day07/assets/icons/exel.png "
112+ width ="16px; "> 계산기+표</ a > </ li >
113+ < div class ="hr-sect "> 2025.06.24</ div >
114+ < li > < a title ="시간표 다음날꺼 불러오기 " href ="JS/day08/15-1timeTable.html "> < img
115+ src ="JS/day07/assets/icons/exel.png " width ="16px; "> 내일 시간표</ a > </ li >
116+ < li > < a title ="내일과 오늘 시간표를 불러와보자 " href ="JS/day08/16-1timeTable_function.html "> < img
117+ src ="JS/day07/assets/icons/exel.png " width ="16px; "> 시간표 연습 </ a > </ li >
118+ < li > < a title ="선생님께서 만든 코드를 분석해보자 " href ="JS/day07/16TeacherSample.html "> < img
119+ src ="JS/day07/assets/icons/exel.png " width ="16px; "> 시간표 함수 예제구경</ a > </ li >
120+ < li > < a title ="객체 구성 요소에 대해 알아보자 " href ="JS/day08/17Object.html "> < img
121+ src ="JS/day08/assets/icons/objectbox.png " width ="16px; "> 객체 구성요소</ a > </ li >
122+ < li > < a title ="객체 배열에 이름,주소,국적과 같은 여러 데이터를 저장해 출력해보자 " href ="JS/day08/18ObjectArray.html "> < img
123+ src ="JS/day08/assets/icons/objectbox.png " width ="16px; "> 객체 배열 실습</ a > </ li >
124+ < li > < a title ="객체 배열에 이름,주소,국적과 같은 여러 데이터를 저장해 UI도 추가해보자 " href ="JS/day08/19ex.html "> < img
125+ src ="JS/day08/assets/icons/objectbox.png " width ="16px; "> 객체배열표 제작</ a > </ li >
126+ < li > < a title ="15~16에서 고생해서 만든 표를 이번엔 forEach문을 이용해 가로배치로 만들어 보자 " href ="JS/day08/20ex.html "> < img
127+ src ="JS/day08/assets/icons/objectbox.png " width ="16px; "> 시간표 가로배열표 제작</ a > </ li >
128+ < div class ="hr-sect "> 2025.06.25</ div >
129+ < li > < a title ="콜백함수가 어떤 것이 있는지 직접 실습하며 익혀보자 " href ="JS/day09/21Callback.html "> < img
130+ src ="JS/day08/assets/icons/objectbox.png " width ="16px; "> 콜백 함수 시작</ a > </ li >
131+ < li > < a title ="window.setTimeout 테스트를 해보면서 함수를 익혀보자 " href ="JS/day09/22Timeout.html "> < img
132+ src ="JS/day08/assets/icons/objectbox.png " width ="16px; "> 브라우저를 통해 시간 받기</ a > </ li >
133+ < li > < a title ="타이머를 제작해보자! " href ="JS/day09/23timer.html "> < img
134+ src ="JS/day08/assets/icons/objectbox.png " width ="16px; "> 타이머 제작</ a > </ li >
135+ < div class ="hr-sect "> 2025.06.26</ div >
136+
137+ < div class ="hr-sect "> 2025.06.27</ div >
138+ < div class ="hr-sect "> 2025.06.30</ div >
139+ < div class ="hr-sect "> 2025.07.01</ div >
140+ < div class ="hr-sect "> 2025.07.02</ div >
141+ < div class ="hr-sect "> 2025.07.03</ div >
142+ < div class ="hr-sect "> 2025.07.04</ div >
143+ < div class ="hr-sect "> 2025.07.07</ div >
144+ < div class ="hr-sect "> 2025.07.08</ div >
145+ < div class ="hr-sect "> 2025.07.09</ div >
146+ < div class ="hr-sect "> 2025.07.10</ div >
147+ < div class ="hr-sect "> 2025.07.11</ div >
148+
149+ </ ol >
150+ </ article >
151+ < hr />
152+
153+
154+ < details class ="pointer ">
155+ < summary class ="h2font "> 3. 연습</ summary >
156+ < div >
157+ < ul >
158+ < li >
159+ < p >
160+ 스타일 시트 언어이므로 일반적인 프로그래밍 언어와는 다른 종류의 기능을 하지만 < a style ="color: brown; "
161+ href ="https://namu.wiki/w/HTML " target ="_blank "> HTML</ a > 과 완전히 분리시켜 구조화된 < a
162+ style ="color: brown; " href ="https://namu.wiki/w/HTML " target ="_blank "> HTML</ a > 과 연결시키면
163+ 다음 코드로 < u > < b > < a href ="https://namu.wiki/w/Hello%2C%20world! " target ="_blank "> Hello
164+ World</ a > </ b > </ u > 를 출력할 수 있기도 하다.
165+ </ p >
166+ </ li >
167+ < li >
168+ < p > 이에 따라 W3C에서는 < em > "디자인적 요소를 < a style ="color: brown; " href ="https://namu.wiki/w/HTML "
169+ target ="_blank "> HTML</ a > 과 완전히 분리시켜 구조화된 < a style ="color: brown; "
170+ href ="https://namu.wiki/w/HTML " target ="_blank "> HTML</ a > 을 만들어보자!"</ em > 라는 목적으로 CSS를 발표했다.
171+ 거기에
172+ 따라 bgcolor 등과 같이
173+ < a style ="color: brown; " href ="https://namu.wiki/w/HTML " target ="_blank "> HTML</ a > 에서
174+ < strong > 디자인에 관련된 요소들은 전부 사용하지 말 것</ strong > 을 권고하고 있다. CSS 발표 이후로 < a style ="color: brown; "
175+ href ="https://namu.wiki/w/HTML " target ="_blank "> HTML</ a > 문서의 구조화를 도와주는 div, span, section 등의
176+ 새로운 태그가 도입되고 strike, font등의 스타일 태그는 비권장 태그로 전환되다가 HTML5에서는 아예 삭제되었다.
177+ table은 표 형태의 데이터를 표현하는 용도에만 쓰도록 권고하면서 표의 구조화를 도와줄 thead, tbody 태그가 새로 소개되었다.
178+ </ p >
179+ </ li >
180+ </ ul >
181+ </ div >
182+ </ details >
183+ < hr >
184+ < footer >
185+ < ul class ="fontstp ">
186+ < div id ="1stline ">
187+ < li > < a title ="실습 중 발생한 버그를 기록했다. " href ="html/day03/buglist.html "> Bug report</ a > </ li >
188+ < li > < a title ="HTML 작성시 필요한 태그가 정리된 문서이다. (새 창에서 열기) "
189+ href ="html/ClassReferences/TalkFile_2_HTML&CSS.pdf.pdf " target ="_blank "> HTML&CSS 정리</ a >
190+ </ li >
191+ < li > < a title ="수업에 앞서 기본적인 이론이 정리된 문서이다. (새 창에서 열기) " href ="html/ClassReferences/시작하기.pdf "
192+ target ="_blank "> 컴퓨터 프로그래밍 시작/기초</ a > </ li >
193+ </ div >
194+ < div id ="2ndline ">
195+ < li > < a title ="JS 작성시 필요한 태그가 정리된 문서이다. (새 창에서 열기) " href ="html/ClassReferences/3_자바스크립트.pdf "
196+ target ="_blank "> 자바스크립트 정리</ a > </ li >
197+ < li > < a title ="flowchart에 대한 drawio를 이용해 정리한 문서이다. (새 창에서 열기) " href ="html/ClassReferences/IF문 수업내용.pdf "
198+ target ="_blank "> 플로우차트 정리</ a > </ li >
199+ < li > < a title ="깃 설치하는 방법을 정리한 문서이다. " href ="html/ClassReferences/git 과 github.pdf " target ="_blank "> git과
200+ github 설치 및 이용방법</ a > </ li >
201+ </ div >
202+ < div id ="3rdline ">
203+ < li > < a title ="16일 첫 수업때 기록한 내용의 문서이다. (새 창에서 열기) " href ="html/ClassReferences/20250616_수업노트.pdf "
204+ target ="_blank "> 20250616수업노트</ a > </ li >
205+ < li > < a title ="20일 수업때 기록한 내용의 문서이다. (새 창에서 열기) " href ="html/ClassReferences/20250620_수업노트.pdf "
206+ target ="_blank "> 20250620수업노트</ a > </ li >
207+ < li > < a title ="23일~24일 둘째주 수업때 기록한 내용의 문서이다. (새 창에서 열기) " href ="html/ClassReferences/20250624_수업노트.pdf "
208+ target ="_blank "> 20250624수업노트</ a > </ li >
209+ < li > < a title ="25일 둘째주 수업때 기록한 내용의 문서이다. (새 창에서 열기) " href ="html/ClassReferences/20250625_수업노트.pdf "
210+ target ="_blank "> 20250625수업노트</ a > </ li >
211+
212+ </ div >
213+
214+ </ ul >
215+ </ footer >
216+
217+ </ body >
218+
219+ </ html >
0 commit comments