$$config title: 월수19시 웹3 keywords: - 개강 23-05-12 - 종강 23-06-07 $$
# 강사정보 **김혜지**
010 4372 1301
# 만족도 조사 [st.koreaedugroup.com/2019/](http://st.koreaedugroup.com/2019/)
# 수업영상 및 수업페이지 타인 공유 금지 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다.
수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다.
녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
# 수업 ## 문자부호 | 마침표 | 반점 | 콜론 | 세미콜론 | vvv큰따옴표 | 작은따옴표 | 빗금, 슬래시 | 역슬래시 | 소괄호 | 중괄호 | 대괄호 | 물결 | 별표 | 대시 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | . | , | : | ; | " | ' | / | \ | () | {} | [] | ~ | * | - |
## 1강 : console창 용도, 숫자와 문자 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/yLRRBzv?editors=1111)
## 2강 : 변수 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/NWOOWKy?editors=1011)
## 3강 : 연산자와 피연산자 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/bGmmGeM?editors=1011)
## 4강 : if - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/RweewGV?editors=1011)
## 5강 : 연산자 적응문제 - 문제 : [실행되는 출력문에는 참 그렇지 않으면 거짓 이라고 적어주세요.](https://codepen.io/jangka44/pen/rNamKJP?editors=0012)
## 6강 : else - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/NWOOPaW?editors=1011)
## 7강 : 함수 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/vYVvWmO?editors=1011)
## 8강 : 제이쿼리와 변수활용 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/BaqvmGw)
## 9강 : 버튼 클릭했을때 body 배경색 변경 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/PoyXEKe)
## 10강 : addClass - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ExdGoRy)
## 11강 : removeClass - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/mdzaXwo?editors=0010)
## 12강 : 버튼 하나로 body 배경색 추가/삭제 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/bGmOLrN?editors=1010)
## 13강 : 팝업 간단 구현 - 수업 코드펜 : [풀이버전](https://codepen.io/kimhyeji324/pen/XWxwmbj) - 수업 코드펜 : [정답버전](https://codepen.io/kimhyeji324/pen/poxmyjx)
## 14강 : 팝업 재구현 - 수업 코드펜 : [팝업 addClass, removeClass](https://codepen.io/kimhyeji324/pen/qBJzaEK?editors=1111) - 수업 코드펜 : [함수 매개변수 개념](https://codepen.io/kimhyeji324/pen/LYgKbWV?editors=1011) - 수업 코드펜 : [팝업에 함수 매개변수 적용](https://codepen.io/kimhyeji324/pen/jOejVap) - 수업 코드펜 : [검은배경을 클릭했을때 닫히는 팝업](https://codepen.io/kimhyeji324/pen/zYmVoPg?editors=1010)
## 15강 : stopPropagation - 개념 : [stopPropagation](https://codepen.io/jangka44/pen/QWpxEJv?editors=0011)
## 16강 : return false - 어두운 부분을 클릭하면 꺼지지만 컨텐츠 부분을 클릭해도 꺼지는 오류가 있다. - 문제 : [팝업의 배경(어두운 부분)을 클릭해도 꺼지도록 해주세요.](https://codepen.io/jangka44/pen/BaWrPYp) - 예시 : [보기](https://cdpn.io/pen/debug/poeKEWO)
- 어두운 부분을 클릭하면 꺼지고 컨텐츠 부분을 클릭해도 꺼지는 오류 수정 - 문제 : [팝업의 콘텐츠 부분을 클릭해도 꺼지지 않게 해주세요.](https://codepen.io/jangka44/pen/poeKEWO?editors=1010) - 예시 : [보기](https://cdpn.io/pen/debug/KKWegBG) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/QWBJYOa?editors=1010)
![원본이미지](https://i.postimg.cc/tJtJ2t2v/Frame-4.jpg) ![원본이미지](https://i.postimg.cc/FzsXXyhB/Frame-5.jpg)
## 17강 : 팝업 스크롤 - 문제 : [열기](https://codepen.io/jangka44/pen/jOBKgGZ) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/rNQBYjE)
## 18강 : 팝업에 on/off 스크롤 적용 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/MWzgORW)
## 19강 : 브라우저에 접속했을때 떠있는 팝업 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/poQzdGX)
## 20강 : 아코디언 HTM, CSS 구현 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/BaGBYyN?editors=1100)
- 수업 코드펜 : [열기]() ## 21강 : hasClass - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/poQoVBg?editors=1111) ```html 문제 - 네모박스를 클릭했을때 각각 배경색이 채워지도록 구현해주세요. - 색상은 다시 빠지지 않아도 됩니다. ```
## 22강 : this - 수업 코드펜 : [this 적용 전](https://codepen.io/kimhyeji324/pen/wvQvXWB?editors=1010) - 수업 코드펜 : [this 적용 후](https://codepen.io/kimhyeji324/pen/ExOxRyo) - 수업 코드펜 : [this와 hasClass활용](https://codepen.io/kimhyeji324/pen/JjejZEZ) ```html 문제2 - addClass, removeClass, hasClass, this를 활용하여 배경색 추가/제거 형태를 구현 해주세요. ```
## 23강 : siblings - 수업 코드펜 : [siblings](https://codepen.io/kimhyeji324/pen/yLQLqYj?editors=1111) ```html 형제들 : siblings ```
## 24강 : next, prev - 수업 코드펜 : [next, prev](https://codepen.io/kimhyeji324/pen/GRwRGep) ```html next : 인접 형 선택 prev : 인접 동생 선택 ```
## 25강 : parent, children - 수업 코드펜 : [parent, children](https://codepen.io/kimhyeji324/pen/MWzWXMV?editors=1010) ```html parent : 부모 children : 자식들 ```
## 26강 : 아코디언 제이쿼리 구현 - 수업 코드펜 : [아코디언 제이쿼리 구현](https://codepen.io/kimhyeji324/pen/oNQNMzN?editors=1011) ```html 문제3 - if, else, click, add, remove, has, this 활용 - css에 적용되어있는 hover제거 문제4 - 닫힌 질문을 클릭하면 열려있는 질문이 닫히도록 만들어주세요. ```
## 27강 : 반응형 이미지 레이아웃 - 수업 코드펜 : [열기](https://codepen.io/khjsbs324/pen/bGmMNOL?editors=1100)