$$config title: 화목 19시 웹3 keywords: - 개강 23.03.14(화) - 종강 23.04.07(금) $$
# 강사정보 **김혜지**
010 4372 1301
# 만족도 조사 [st.koreaedugroup.com/2019/](http://st.koreaedugroup.com/2019/)
# 수업영상 및 수업페이지 타인 공유 금지 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다.
수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다.
녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
# 수업일정 | 03.14.화(1일차) | 03.16.목(2일차) | 03.21.화(3일차) | 03.23.목(4일차) | 03.24.금(5일차) | 03.28.화(휴강) | 03.30.목(6일차) | 04.04.화(휴강) | 04.06.목(7일차) | 04.07.금(8일차) | 04.10.월(9일차) | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | vscode 사용법 1부 | 문자와 숫자 | background-image | addClass | 탑바모작 | @rows=3:휴강 | 팝업 구현 | 휴강 | -- | -- | 보강 | | -- | 연산자와 피연산자 | 제이쿼리 | removeClass | 2차메뉴 모작 | -- | -- | -- | -- | -- | -- | | -- | 변수, if, else, 함수 | 클릭 이벤트 | if문 else문 활용예제 | 팝업 모작 후 구현 | -- | -- | -- | -- | -- | -- |
# 수업영상 중단, 개인 카톡 주세요. ## 23.03.14(화_1일차) **[vscode 사용법 1부]**
[수업영상 1부 : 19:00 - 19:50](https://youtu.be/e50yEi55CrY)
[수업영상 2부 : 20:00 - 20:50](https://youtu.be/_W7EfEsep-g)
[수업영상 3부 : 21:00 - 21:50](https://youtu.be/0ehgr_WA2KQ)
## 23.03.16(목_2일차) **[문자와 숫자, 연산자와 피연산자, 변수, 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)
# 수업 ## 문자부호 | 마침표 | 반점 | 콜론 | 세미콜론 | 큰따옴표 | 작은따옴표 | 빗금, 슬래시 | 역슬래시 | 소괄호 | 중괄호 | 대괄호 | 물결 | 별표 | 대시 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | . | , | : | ; | " | ' | / | \ | () | {} | [] | ~ | * | - |
## VSCODE 사용방법 ```html 1. 바탕화면에 폴더생성 2. vscode에서 폴더열기 3. 폴더안에 index.html파일 생성하기 4. html파일에서 DOCTYPE 선언하기 5. style.css파일 생성하기 6. html문서와 css파일 연결하기(head 안에 넣기!) - link + Tab → href="" 안에 연결할 css파일 넣기! ```
## 01강 : vscode 기본셋팅 - 블로그 : [열기](https://slog.gg/p/10232)
## 02강 : vscode 코드 정리 확장 프로그램 ### 코드정리 - 텍스트 복사하기 : [열기](https://codepen.io/khjsbs324/pen/gOzLgJq?editors=1000) - 단축키 : Shift+Alt+F - 블로그 : [Window](https://slog.gg/p/10234)
## 03강 : Tab오류 - F1 → Emmet: Expand Abbreviation - Emmet이 안되는 코드 전체선택 후 기능사용!
## 04강 : HTML5 DOCTYPE - VSCODE에서 선언하기 : ! + Tab - 언어설정 : lang="en" - 한글 : ko - title : ![원본이미지](https://i.postimg.cc/fbkfQ5DN/Group-17.jpg)
## 05강 : Metadata Content(메타 데이터 콘텐츠) - 개념 : [열기](https://codepen.io/khjsbs324/pen/oNdYNdp)
## 2차메뉴 2단계 - 붙여넣을 코드 : [2단계 : 1440그리드 안에서 ul태그에 140적용 후 a태그 중앙정렬](https://codepen.io/kimhyeji324/pen/zYJpvga?editors=0010)
## 06강 : 문자와 숫자 - 수업codepen : [console, 문자 숫자](https://codepen.io/kimhyeji324/pen/mdGKyjv?editors=0010) ```html [console창 용도] 보이지 않는 프로그램 내부정보(진행여부)를 확인할 수 있도록 도와주는 창 ``` ```js [console 불필요한 기록 삭제] console.clear(); ``` ```js [console창에서 결과 확인] console.log(); ``` ```html [문자] [숫자] "문자" 10 ```
## 07강 : 변수 - 수업codepen : [변수](https://codepen.io/kimhyeji324/pen/oNPyvLV) ```js [사용방법] //기본 형태 변수선언 변수명; 변수명 = 데이터; //생략 형태 변수선언 변수명 = 데이터; [예시] let box_1 = 10; ``` ```js [주의사항] 같은 변수명은 사용 할 수 없다. ```
## 08강 : 연산자와 피연산자 - 수업codepen : [연산자 메모](https://codepen.io/kimhyeji324/pen/xxazKBo?editors=1010)
## 09강 : if - 수업codepen : [조건문](https://codepen.io/kimhyeji324/pen/poOKzNr) ```js if ( true ) { 실행문 실행 } ``` ```js if ( false ) { 실행문 실행X } ```
## 10강 : else - 수업codepen : [반복문](https://codepen.io/kimhyeji324/details/zYJaxBo) ```js if ( true ) { 실행문 실행 } else { 실행문 실행x } ``` ```js if ( false ) { 실행문 실행x } else { 실행문 실행 } ```
## 11강 : 함수 - 수업codepen : [function](https://codepen.io/kimhyeji324/pen/OJoEPxG) ```js function 함수명() { 실행문 } ``` ```html 함수는 선언 후 호출하기 전까지 실행되지 않는다. ```
## 12강 : 연산자 적응문제 - 문제 : [실행되는 출력문에는 참 그렇지 않으면 거짓 이라고 적어주세요.](https://codepen.io/jangka44/pen/rNamKJP?editors=0012)
## 13강 : 제이쿼리와 변수활용 - 수업 코드펜 : [제이쿼리 링크 불러오기, 변수 활용하기](https://codepen.io/kimhyeji324/pen/GRXYZqX?editors=1011)
## 14강 : click 이벤트 - 수업 코드펜 : [함수와 클릭이벤트 활용해보기](https://codepen.io/kimhyeji324/pen/VwGEjdZ?editors=1011) ```js $("태그 or class or id").click(함수명); $(변수명).click(함수명); ```
## [HTML,CSS] : background-image - 수업 코드펜 : [img태그와 background-image 차이점](https://codepen.io/kimhyeji324/pen/vYzVNrO)
## 15강 : 클릭이벤트 복습 - 수업 코드펜 : [목적을 메모하는 방식](https://codepen.io/kimhyeji324/pen/OJoaZQg?editors=1010) ```html 자바스크립트 식을 작성하기 전에 만들어야 하는 코드를 문장으로 미리 정리 해두면 햇갈리지 않고 정확하게 만들어낼 수 있다. ```
## addClass와 removeClass 주의사항 ```html C는 대문자로 작성 ```
## 16강 : addClass - 수업 코드펜 : [button 클릭하면 body 배경색 변경, 순서 메모](https://codepen.io/kimhyeji324/pen/mdGQKzj) ```html 태그에 class추가 ``` ```js $().addClass("클래스명"); ``` ```html 왼쪽 ()안에는 변수명,태그, class, id 다양하게 들어올 수 있다. 변수명 : 영문 태그 : "영문" class : ".영문" id : "#영문" ``` ```html 클래스명은 마침표(.)를 제외하고 사용해야한다. ```
## 17강 : removeClass - 수업 코드펜 : [button 클릭하면 body 배경색 변경 취소](https://codepen.io/kimhyeji324/pen/XWPyYyN) ```html 태그 들어있는 class 삭제 ``` ```js $().removeClass("클래스명"); ```
## 19강 : if, else 예제 - 수업 코드펜 : [조건문 활용 예제](https://codepen.io/kimhyeji324/pen/NWLEBBr?editors=1010) ```html 0 : 짝수 1 : 홀수 짝수 % 2 : 0 홀수 % 2 : 1 ``` ```js [let] 재선언x 재할당o ``` ```js [재할당] 변수안에 데이터를 변경 ```
## 20강 : 팝업 간단 재구현 vscode **[vscode로 옮겨서 사용 해주세요, 제이쿼리 설치파일 반드시 추가]** - 수업 vscode : [열기](https://codepen.io/kimhyeji324/pen/xxaNRxz)
## 21강 : 함수 매개변수 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/YzJKYbr?editors=1010)
## 22강 : 팝업 디테일 구현 **[vscode로 옮겨서 사용 해주세요, 제이쿼리 설치파일 반드시 추가]** - 팝업에 불투명한 배경 적용
- 불투명한 배경 클릭시 팝업 닫힘
- class="content"클릭하면 닫히는 오류 수정 - 팝업 on → html / 팝업off html 스크롤 = on - 평소에 떠있는 팝업 - 떠있는 팝업에 close-btn 클릭시 팝업이 한번에 닫히는 오류 수정
- 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/YzJzawR?editors=1000)
## 23강 : 열려있는 팝업에 닫기버튼을 누르면 한번에 닫히는 오류 수정 - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/LYgYMaG?editors=1000)
## 24강 : 팝업 마무리 - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/KKGpVRZ?editors=1000)
## 25강 : fixed팝업과 화면 너비.높이 비례 배너 - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/xxyGejQ?editors=1100)
## 26강 : toggle 아코디언메뉴 HTML,CSS - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/XWxbQEY)
## 27강 : hasClass - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/XWxmbor)
## 28강 : this - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/abRvOPO)
## 29강 : siblings - 수업 코드펜 : [vscode파일은 밴드에서 다운로드 받아주세요.](https://codepen.io/kimhyeji324/pen/xxywGmw)
## 30강 : 반응형 이미지 여백 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/jOeGZea)
## 31강 : 원하는 px값을 가진 반응형 이미지 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/poxWaYL)
## 32강 : 가로세로가 고정된 반응형 이미지 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/yLRzKBq)
## 33강 : 반응형 이미지 레이아웃 width: 100%;(높이고정X) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/XWxeEmQ?editors=1100)
## 34강 : 반응형 이미지 레이아웃 flex-grow: 1;(높이고정X) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/VwEMXyP)
## 35강 : 여백이 줄어드는 반응형 이미지 레이아웃(justify-content:) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/rNqGdpX?editors=1100)
## 36강 : 미디어쿼리 기초 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/bGmovKj)
## 37강 : 반응형 레이아웃 연습(width: 100%) **[특정한 사이즈에서 줄바꿈]** - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/xxyXjBY?editors=0110) ```css section > .flex-item { width: 0; height: 250px; flex-grow: 1 } ``` ``` section > .flex-item { width: 100%; } ```
## 38강 : 반응형 레이아웃(flex-direction: column) **[특정한 사이즈에서 줄바꿈]** - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/gOBGKOV?editors=0100) ```css section > .flex-item { width: 0; height: 250px; flex-grow: 1 } ``` ```css section > .flex-item { width: 100%; } ```
## 39강 : 반응형 레이아웃(max-width: 248px) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/KKGXewN?editors=0100)
## 40강 : 반응형 레이아웃(max-width: 248px) **[특정한 사이즈에서 줄바꿈]** - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/XWxzozd?editors=1100)
## 41강 : 반응형 레이아웃(max-width: 248px) **[특정한 사이즈에서 마지막요소 삭제]** - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/Baqmvqb)
## 42강 : 반응형 레이아웃(flex-grow: 1) **[특정한 사이즈에서 마지막요소 삭제]** - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/XWxeYgq?editors=0110)
## 43강 : 폰트두께 - 코드펜 : [코드펜 이동](https://codepen.io/kimhyeji324/pen/KKRwyKo?editors=1010)
## 44강 : 눈누 한글폰트 적용 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/vYVWMxW?editors=1100)
## 45강 : 구글 영문폰트 적용 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/wvYPZRZ)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ExdEmjP)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/KKGomdL)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/YzJaVwr)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/PoyRmGB?editors=1100)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/xxyWdWr)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/poxLPZJ)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ZEqxyEe)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ExdEXjb?editors=1100)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/dygmRMg?editors=1100)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/rNqdwwp?editors=1100)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/zYmWzPj?editors=1100)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/eYPMRjM?editors=1100)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/RweMgYw)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/wvYmqGe)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/VwEXzKv)
## 00강 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/KKGovrr)

게시글 상세