$$config title: 매일 11시 웹3 keywords: - 개강 23.03.14(화) - 종강 23.04.07(금) $$
# 강사정보 **김혜지**
010 4372 1301
# 만족도 조사 [st.koreaedugroup.com/2019/](http://st.koreaedugroup.com/2019/)
# 수업영상 및 수업페이지 타인 공유 금지 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다.
수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다.
녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
# 수업일정 | 03.14.화(1일차) | 03.15.수(2일차) | 03.16.목(3일차) | 03.17.금(4일차) | | -- | -- | -- | -- | | o | o | o | o | | vscode 사용법 1부 | vscode 사용법 2부 | li마다 나오는 화면넓이대비 2차메뉴 | li마다 나오는 화면넓이대비 2차메뉴(완료) | | -- | 2차메뉴 hover | -- | consoloe창 용도, log | | -- | display: none | -- | 숫자와 문자 | | -- | -- | -- | 변수 | 03.20.월(5일차) | 03.21.화(6일차) | 03.22.수(7일차) | 03.23.목(8일차) | 03.24.금(9일차) | | -- | -- | -- | -- | -- | | o | o | o | o | o | | 연산자와 피연산자 | else | 함수 | 제이쿼리 복습 | addClass | | if | -- | 제이쿼리 | 클릭이벤트 | removeClass | 03.27.월(10일차) | 03.28.화(휴강) | 03.29.수(11일차) | 03.30.목(12일차) | 03.31.금(13일차) | | -- | -- | -- | -- | -- | | o | o | o | o | o | | html,css 모작 | 휴강 | html,css 팝업구현 | 팝업 복습 | absolute 중앙정렬 | | 팝업 구현 | -- | js 팝업구현 | -- | calc | | -- | -- | -- | -- | transform: translate | 04.03.월(14일차) | 04.04.화(휴강) | 04.05.수(15일차) | 04.06.목(16일차) | 04.07.금(17일차) | 04.07.금(18일차) | | -- | -- | -- | -- | -- | -- | | o | o | o | o | -- | -- | | vh | 휴강 | 함수 매개변수 | return false | -- | -- | | fixed | -- | 팝업 2개 매개변수 적용 | addClass 스크롤 응용 | -- | -- |
# 수업영상 ## 23.03.16(목_저녁영상) **[문자와 숫자, 연산자와 피연산자, 변수, if, else, 함수]**
[수업영상 1부 : 19:00 - 19:50](https://youtu.be/saiKG8t5CPI)
[수업영상 2부 : 20:00 - 20:50](https://youtu.be/Wwthsiakfjs)
[수업영상 3부 : 21:00 - 21:50](https://youtu.be/PVo8sR9Plcg)
## 23.03.17(금_4일차) **[li마다 나오는 화면넓이대비 2차메뉴(완료)]** **[consoloe 창 용도, log, 문자와 숫자, 변수]**

[수업영상 1부 : 11:00 - 11:50](https://youtu.be/ELLCVnuwPHw)
[수업영상 1부 : 12:00 - 12:50](https://youtu.be/VojCZZUqql8)
# 수업 ## 문자부호 | 마침표 | 반점 | 콜론 | 세미콜론 | 큰따옴표 | 작은따옴표 | 빗금, 슬래시 | 역슬래시 | 소괄호 | 중괄호 | 대괄호 | 물결 | 별표 | 대시 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | . | , | : | ; | " | ' | / | \ | () | {} | [] | ~ | * | - |
## 01강 : console창 용도 | console.log | console.clere - 수업코드펜 : [열기](https://codepen.io/kimhyeji324/pen/OJoEQZX) ```html [console창 용도] 보이지 않는 프로그램 내부정보(진행여부)를 확인할 수 있도록 도와주는 창 ``` ```js [console 불필요한 기록 삭제] console.clear(); ``` ```js [console창에서 결과 확인] console.log(); ``` ```html [문자] [숫자] "문자" 10 ```
## 02강 : 변수 - 수업코드펜 : [let, =, ==](https://codepen.io/kimhyeji324/pen/PodaQeN?editors=0010) ```js [사용방법] //기본 형태 변수선언 변수명; 변수명 = 데이터; //생략 형태 변수선언 변수명 = 데이터; [예시] let box_1 = 10; ``` ```js [주의사항] 같은 변수명은 사용 할 수 없다. ```
## 03강 : 1강 ~ 2강 복습 - 수업 코드펜 : [숫자와 문자](https://codepen.io/kimhyeji324/pen/bGxxpBb?editors=0010) - 수업 코드펜 : [변수](https://codepen.io/kimhyeji324/pen/mdGGPWv)
## 04강 : 연산자와 피연산자 - 수업 코드펜 : [메모](https://codepen.io/kimhyeji324/pen/ZEMMOGr)
## 05강 : if - 수업 코드펜 : [예제](https://codepen.io/kimhyeji324/pen/dyqqXzy)
## 06강 : 연산자 적응문제 - 문제 : [실행되는 출력문에는 참 그렇지 않으면 거짓 이라고 적어주세요.](https://codepen.io/jangka44/pen/rNamKJP?editors=0012) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/JjaaQrz)
## 07강 : else - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/JjaaQrz?editors=1011)
## 08강 : 함수 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/QWVZBRO?editors=0111)
## 09강 : 제이쿼리 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/abaRavr?editors=1011) - 복습 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/eYLQEVx)
## 10강 : 클릭이벤트 - 복습 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/bGxQrQv) - 복습 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/YzOdwyK?editors=1111)
## 11강 : addClass - 수업 코드펜 : [css이벤트 구현방식](https://codepen.io/kimhyeji324/pen/zYJyrvJ?editors=1111) - 수업 코드펜 : [addClass 구현방식](https://codepen.io/kimhyeji324/pen/YzOdwJq?editors=1111)
## 12강 : removeClass - 수업 코드펜 : [html클래스 제거하기](https://codepen.io/kimhyeji324/pen/OJorMBg?editors=1011)
## 13강 : 23.03.29(수) 팝업 간단 구현 vscode **[vscode로 옮겨서 사용 해주세요, 제이쿼리 설치파일 반드시 추가]** - 수업 vscode : [열기](https://codepen.io/kimhyeji324/pen/BaOEQbw)
## 14강 : 23.03.30(목) 팝업 간단 재구현 vscode **[vscode로 옮겨서 사용 해주세요, 제이쿼리 설치파일 반드시 추가]** - 수업 vscode : [열기](https://codepen.io/kimhyeji324/pen/xxaNRxz)
## 15강 : position: absolute, fixed 중앙정렬 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/GRXaBWm?editors=1100)
## 16강 : 화면 높이만큼 차지하는 배너와 스크롤을 따라다니는 탑바(vh와 fixed) - 모작 사이트 : [easynetworks](http://www.easynetworks.kr/) - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/dyqxpON?editors=1010)
## 17강 : 함수 매개변수 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/YzJKYbr?editors=1010)
## 18강 : 23.04.05(수) 팝업 2개 매개변수 적용 - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/abRoqKL?editors=1000) ```html [풀이 순서] 1.팝업 간단 재구현 위↑ 파일 다운로드 받기 2.생략되어있지 않은 removeClass 생략 형태로 만들기 3.HTML에서 content와 button 추가해서 팝업 2개 만들기 - css는 수정할 수 없기 때문에 content라는 클래스는 유지 -

- content-1 텍스트로는 첫번째 팝업 - content-2 텍스트로는 두번째 팝업 - 버튼도 마찬가지로 기존 클래스는 유지하면서 아래와 같은 형식으로 작성 - - 4.JS에서 열기1번 버튼을 누르면 첫번째 팝업 열기, 열기2번 버튼을 누르면 두번째 팝업 열기 구현 5.실행문에 작성된 숫자를 변수명으로 변경 - 같은 변수명은 사용할 수 없다는 점 주의 - 숫자와 문자를 연결할때는 +기호 필요! - ""안에 들어있는 매개변수는 문자로 작동하는 점 주의 6.변수명 삭제 후 매개변수로 구현 - 함수 선언문에 있는 소괄호에 매개변수 - 함수 호출식에 있는 소괄호에 매개변수 값 ```
## 19강 : 23.04.06(목) 팝업 디테일 커스텀 **[vscode로 옮겨서 사용 해주세요, 제이쿼리 설치파일 반드시 추가]** ```html 팝업에 불투명한 배경 적용 불투명한 배경 클릭시 팝업 닫힘 class="content"클릭하면 닫히는 오류 수정 팝업 on → html / 팝업off html 스크롤 = on 평소에 떠있는 팝업 ```
- 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/ExdxKqw?editors=0110)
## 20강 : 23.04.07(금) 열려있는 팝업에 닫기버튼을 누르면 한번에 닫히는 오류 수정 - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/LYgYMaG?editors=1000)
## 21강 : 23.04.10(월) 팝업 마무리 - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/KKGpVRZ?editors=1000)
## 22강 : 23.04.10(월) toggle HTML, CSS레이아웃 잡기1 - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/poxJgVa?editors=1000)
## 23강 : 23.04.11(화) toggle HTML, CSS레이아웃 잡기 마무리 - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/poxJgVa?editors=1000)