$$config title: 월수 19시 웹2 keywords: - 개강 23.04.12(수) - 종강 23.05.10(수) $$
# 강사정보 **김혜지**
010 4372 1301
# 만족도 조사 [st.koreaedugroup.com/2019/](http://st.koreaedugroup.com/2019/) [후기](https://sbsart.com/community/post.asp)
# 수업영상 및 수업페이지 타인 공유 금지 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다.
수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다.
녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
# 수업일정 | 04.12.수(1일차) | 04.14.금(휴강) | 04.17.월(2일차) | 04.19.수(3일차) | 04.24.월(4일차) | 04.26.수(5일차) | 04.28.금(6일차) | 05.01.월(휴강) | 05.03.수(7일차) | | -- | -- | -- | -- | -- | -- | -- | -- | -- | | o | o | o | -- | -- | -- | -- | -- | -- |
# 수업영상 ## 23.04.12(수_수업영상) **[vscode 사용방법, inline-block 활용 마켓컬리 상품리스트 제작1]**
[수업영상 1부 : 19:00 - 19:50](https://youtu.be/GWO7OTkoCGc)
[수업영상 2부 : 20:00 - 20:50](https://youtu.be/k6w0qf46aY0)
[수업영상 3부 : 21:00 - 21:50](https://youtu.be/iG9zm0F9rtA) [수업영상 4부 : 21:00 - 21:50](https://youtu.be/OEtckoffC3I)
# 수업 ## 문자부호 | 마침표 | 반점 | 콜론 | 세미콜론 | 큰따옴표 | 작은따옴표 | 빗금, 슬래시 | 역슬래시 | 소괄호 | 중괄호 | 대괄호 | 물결 | 별표 | 대시 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | . | , | : | ; | " | ' | / | \ | () | {} | [] | ~ | * | - |
## 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)
## 06강 : inline-block 활용 마켓컬리 상품리스트 제작 - 1차 : [파일은 밴드에서 다운로드 해주세요.](https://codepen.io/kimhyeji324/pen/gOBMgPL?editors=1000) - 마무리 : [파일은 밴드에서 다운로드 해주세요.](https://codepen.io/kimhyeji324/pen/jOerLzN)
## 07강 : flex 미리보기 - 개념 : [웹2 display: flex 미리보기](https://kimhyeji324.tistory.com/244)
## 08강 : flex와 inline-block - 수업 코드펜 : [block](https://codepen.io/kimhyeji324/pen/OJBXpaq) - 수업 코드펜 : [inline-block](https://codepen.io/kimhyeji324/pen/vYVKxMV?editors=1100) - 수업 코드펜 : [flex](https://codepen.io/kimhyeji324/pen/VwEjpJB?editors=1100)
## 09강 : flex와 inline-block 차이점(줄바꿈) **같은 조건에서 줄바꿈되는 inline-block과 줄바꿈 되지않는 flex를 비교** - 수업 코드펜 : [inline-block](https://codepen.io/kimhyeji324/pen/dygpeRv) - 수업 코드펜 : [flex](https://codepen.io/kimhyeji324/pen/yLRajxB)
## 10강 : flex 가로정렬속성 - 수업 코드펜 : [justify-content](https://codepen.io/kimhyeji324/pen/poxEVmo?editors=1100)
## 11강 : flex-container 높이를 상속받는 flex-item - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/XWxjYWN)
## 12강 : flex-item 세로정렬과 상속받은 높이 최소화 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/WNaGyZv)
## 13강 : flex-item 높이공유 예제 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/RweGJJd)
## 14강 : flex-grow 개념 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/mdzWENd)
## 15강 : flex-basis와 width: 0 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/eYPvddj)
## flex개구리 - 관련사이트 : [flex개구리 사이트 이동하기](https://flexboxfroggy.com/#ko)
## 16강 : absolute 너비 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/LYgLaXO)
## 17강 : 직접 hover - 수업 코드펜 : : [열기](https://codepen.io/kimhyeji324/pen/XWxZywo?editors=1100)
## 18강 : hover(선택자 활용) - 수업 코드펜: [열기](https://codepen.io/kimhyeji324/pen/WNaMLbd?editors=1100)
## 19강 : hover(선택자 활용_인접형제) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ExdQGjz?editors=1100)
## 20강 : display : none - 수업 코드펜 : [개념과 예제](https://codepen.io/kimhyeji324/pen/BaOxazx?editors=1100)
## 21강 : background-image - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/qBJxLYZ?editors=1100)
## 22강 : 폰트두께 종류 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/KKRwyKo?editors=1010)
## 23강 : 가상요소(::before, ::after) - 수업 코드펜 : [열기](https://codepen.io/khjsbs324/pen/rNqvBPM)
## 24강 : 눈누 한글폰트 적용하기 - 눈누 : [사이트 이동](https://noonnu.cc/) - 수업 코드펜 : [열기](https://codepen.io/khjsbs324/pen/RweywYX?editors=1100)
## 25강 : 구글폰트 영문폰트 적용하기 - 구글 폰트 : [사이트 이동](https://fonts.google.com/) - 수업 코드펜 : [열기](https://codepen.io/khjsbs324/pen/QWZrWev)
## 26강 : Tranform, Translate, Transition ```html Tranform : 변형 - 돌리기(rotate), 크기키우기(Scale) - 이동시키기(translate_Y.X) Transition : 변형이 일어나는 시간 ```
## 27강 : transform: translate(); - 수업 코드펜 : [열기](https://codepen.io/khjsbs324/pen/yLRjyXE)
## 28강 : transform: scale(); - 수업 코드펜 : [열기](https://codepen.io/khjsbs324/pen/XWxqJaO)
## 29강 : transition을 사용할 수 있는 속성 - 코드펜: [열기](https://codepen.io/kimhyeji324/pen/BaxMbLV)
## 30강 : transform: Scale과 transition: ; 응용 - 수업 코드펜 : [열기](https://codepen.io/khjsbs324/pen/bGmMNOL?editors=1000)
## 31강 : absolute 중앙정렬 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/GRYGWmJ)

게시글 상세