$$config title: 웹2 수업페이지(초안) keywords: - 개강 22.11.05 토요일 - 종강 22.11.27 일요일 - D강의장 $$ # 수업종료
## 강사정보 - 김혜지 - 01043721301
## 만족도 조사 - [열기](http://st.koreaedugroup.com/2019/login.asp)
## 수업일정 | 11.05(토_1일차) | 11.06(일_2일차) | 11.12(토_3일차) | 11.13(일_4일차) | 11.19(토)_5일차 | 11.20(일)_6일차 | 11.26(토)_7일차 | 11.27(일)_8일차 | | -- | -- | -- | -- | -- | -- | -- | -- | | | | | | | | | |
## 관련링크 - 이미지 호스팅 : [이동](https://postimages.org/) - 주소 줄이기: [이동](https://to2.kr/) - 새 펜 열기 : [이동](https://codepen.io/pen) - 모작 기록 : [이동](https://slog.gg/) - vscode : [이동](https://code.visualstudio.com/) - 폰트어썸 : [이동](https://to2.kr/dPB) - 영문폰트 : [이동](https://fonts.google.com/) - 한글폰트 : [이동](https://noonnu.cc/) - cdnjs : [이동](https://cdnjs.com/) - 디비컷 : [이동](https://www.dbcut.com/)
## 01강 : flex 미리보기 - 개념 : [웹2 display: flex 미리보기](https://kimhyeji324.tistory.com/244)
## 02강 : 레이아웃을 구성할 수 있는 속성 값 - block 예제 : [열기](https://codepen.io/kimhyeji324/pen/ZEROJRY?editors=1100)
- inline-block 예제 : [열기](https://codepen.io/kimhyeji324/pen/zYaBdVo?editors=1100)
## 03강 : inline-block과 flex - inline-block 단점 예제 : [열기](https://codepen.io/kimhyeji324/pen/vYrKegV?editors=1100) - flex 장점 예제 : [열기](https://codepen.io/kimhyeji324/pen/XWYKqwK)
## 04강 : flex - 개념 : [열기](https://codepen.io/kimhyeji324/pen/VwdjxJQ?editors=1100)
## 05강 : flex-item [높이상속] - 예제 : [열기](https://codepen.io/kimhyeji324/pen/PoazQoX)
## 06강 : flex-item [자동 box-sizing] - 예제 : [열기](https://codepen.io/kimhyeji324/pen/KKeMQyM?editors=1010)
## 07강 : flex-item [무시받는 px과 %] - 예제 : [열기](https://codepen.io/kimhyeji324/pen/wvXWmoo?editors=1010)
## 08강 : flex-item [반응형] - 예제 : [열기](https://codepen.io/kimhyeji324/pen/RwJRMxr?editors=1100)
## 09강 : flex-item [가로 정렬] - 블로그 예제 : [열기](https://codepen.io/kimhyeji324/pen/NWzrMPM?editors=1100) - 개념 예제 : [열기](https://codepen.io/khjsbs324/pen/PoeQwaP?editors=1100)
## 10강 : flex-item [세로 정렬] - 블로그 예제 : [열기](https://codepen.io/kimhyeji324/pen/gOKMzQj) - 개념 예제 : [열기](https://codepen.io/khjsbs324/pen/RwyQNew?editors=1100)
## 11강 : flex-item [유연함 제거] - 예제 : [열기](https://codepen.io/kimhyeji324/pen/VwdjGam?editors=1100) - 수업영상 : [flex-item 유연함 제거](https://youtu.be/nMLyqNCfEsI)
## 12강 : flex-item [줄바꿈] - 티스토리 블로그 : [웹2 햇갈리는 줄바꿈 최종정리](https://kimhyeji324.tistory.com/245) - 부모 고정px - 블로그 예제 : [고정px inline-block](https://codepen.io/kimhyeji324/pen/OJERLgG) - 블로그 예제 : [% px inline-block](https://codepen.io/kimhyeji324/pen/qBKaWXx) - 블로그 예제 : [고정 px flex](https://codepen.io/kimhyeji324/pen/ExRgYEw?editors=1100) - 블로그 예제 : [% px flex](https://codepen.io/kimhyeji324/pen/jOKMNKq) - 부모 % - 블로그 예제 : [고정 px inline-block](https://codepen.io/kimhyeji324/pen/NWzRKmx?editors=1100) - 블로그 예제 : [% px inline-block](https://codepen.io/kimhyeji324/pen/JjZRPqB?editors=1100) - 블로그 예제 : [고정 px flex](https://codepen.io/kimhyeji324/pen/rNKMBQz?editors=1100) - 블로그 예제 : [% px flex](https://codepen.io/kimhyeji324/pen/YzvGKdB)
- 예제 : [열기](https://codepen.io/khjsbs324/pen/mdLpgYV?editors=1100) - 예제 : [flex-wrap: wrap 적용 조건](https://codepen.io/khjsbs324/pen/NWMyqRw) - 예제 : [줄바꿈 됐을때](https://codepen.io/khjsbs324/pen/jOxZPzp)
## 13강 : 플렉스 개구리 - 예제 : [이동](https://flexboxfroggy.com/#ko) - 정답 : [확인](https://codepen.io/khjsbs324/pen/YzLaqZP?editors=1000)
## 14강 : 마켓컬리 네비바(flex로 수정해주세요.) - 예제 : [inline-block 사용](https://codepen.io/kimhyeji324/pen/abGMPop?editors=1100)
- 예제 : [flex 사용](https://codepen.io/kimhyeji324/pen/VwdKarB)
- 예제 : [샛별.낮 배송안내 구현](https://codepen.io/kimhyeji324/pen/ExRgKdb?editors=1100) ![원본이미지](https://i.postimg.cc/5tyLWs53/7.jpg)
## 15강 : flex-shrink 사용 예제 - 문제 : [고정되어야 하는 텍스트가 줄바꿈 되고있습니다. 줄바꿈이 되지 않도록 코드를 수정해주세요.](https://codepen.io/kimhyeji324/pen/KKeMBaX?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/ZEROMGP) - 풀이 : [확인](https://codepen.io/kimhyeji324/pen/NWzrLaO?editors=1100)
## 16강 : flex-item [반응형 그리드] - 예제 : [열기](https://codepen.io/khjsbs324/pen/MWGQayg?editors=1100)
- 티스토리 블로그 : [웹2 flex-grow](https://kimhyeji324.tistory.com/247) - 블로그 예제 : [flex-grow 기본](https://codepen.io/kimhyeji324/pen/NWzRxXL) - 블로그 예제 : [flex-grow margin](https://codepen.io/kimhyeji324/pen/NWzRxXL) - 블로그 예제 : [flex-grow 다른 요소로 인한 여백](https://codepen.io/kimhyeji324/pen/WNyGwxV) - 블로그 예제 : [flex-grow flex-item 안에 요소](https://codepen.io/kimhyeji324/pen/PoaGNPx) - 블로그 예제 : [flex-grow flex-item 안에 요소 넓이 제외](https://codepen.io/kimhyeji324/pen/PoaGNPx) - 블로그 예제 : [flex-grow: 0 ~ n;](https://codepen.io/kimhyeji324/pen/xxzEVgL)
## 17강 : flex-item [상하좌우 위치 정렬] - 예제 : [열기](https://codepen.io/kimhyeji324/pen/RwJGwqa?editors=1100)
- 티스토리 블로그 : [웹2 flex-direction](https://kimhyeji324.tistory.com/246) - 블로그 예제 : [flex-direction: row](https://codepen.io/kimhyeji324/pen/MWXjWLq) - 블로그 예제 : [flex-direction: row-reverse](https://codepen.io/kimhyeji324/pen/wvXzvZq) - 블로그 예제 : [flex-direction: column](https://codepen.io/kimhyeji324/pen/yLEaLrq) - 블로그 예제 : [flex-direction: column-reverse](https://codepen.io/kimhyeji324/pen/xxzExev) - 블로그 예제 : [flex-direction: column 세로 정렬](https://codepen.io/kimhyeji324/pen/zYaKYQX) - 블로그 예제 : [flex-direction: column 가로 정렬](https://codepen.io/kimhyeji324/pen/ExRgxzz)
## 18강 : flex 그리드 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/RwyEVzx?editors=1100) - 수업 영상1 : [이동](https://youtu.be/eSeU1JhnCWg) - 수업 영상2 : [이동](https://youtu.be/5HxiS9Hc2Pw)
## 19강 : position - 개념 : [열기](https://codepen.io/khjsbs324/pen/MWGJLdq?editors=1000) - 예제 : [absolute](https://codepen.io/khjsbs324/pen/VwxPRvj?editors=1100)
## 20강 : position속성으로 넓이,높이 100% - 예제 : [열기](https://codepen.io/khjsbs324/pen/qBYRvrb)
## 21강 : display: none - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/rNvjbeL)
## 22강 : 넓이 기본값(width: auto)일때 absolute 또는 fixed 적용 - 예제 : [열기](https://codepen.io/khjsbs324/pen/mdLWwXw)
## 23강 : 넓이 % 또는 px 일때 absolute 또는 fixed 적용 - 예제 : [열기](https://codepen.io/khjsbs324/pen/GRdWExM)
## 29강 : 마켓컬리 2차메뉴 연습1 - 문제 : [nav에 마우스를 올렸을때만 box-2가 화면에 보이도록 만들어주세요.](https://codepen.io/khjsbs324/pen/MWGpvWW?editors=1100) - 정답 : [display:none 확인](https://codepen.io/khjsbs324/pen/bGMqrbQ)
## 30강 : 마켓컬리 2차메뉴 연습2 - 문제 : [box-2가 화면에 보일때 section-2가 밀려나지 않도록 만들어주세요.](https://codepen.io/khjsbs324/pen/bGMqrbQ) - 정답 : [position:absolut 확인](https://codepen.io/kimhyeji324/pen/jOKMBVv?editors=1100)
## 31강 : 2차 메뉴 과정1 1차메뉴 제작 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/GRGmPKz?editors=1000)
## 32강 : 2차 메뉴 과정2 [오답] 1차메뉴리스트(li) 인접동생 2차메뉴목록(ul) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/jOKmXqW?editors=1100)
## 33강 : 2차 메뉴 과정3 [오답] 1차메뉴목록(ul) flex-item - 예제 : [열기](https://codepen.io/kimhyeji324/pen/WNyjLNb?editors=1100)
## 34강 : 2차 메뉴 과정4 [정답] text만 선택 했을때 이동 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/eYKWbdW)
## 35강 : 2차 메뉴 과정5 [정답] 1차메뉴리스트(li) 아무곳이나 클릭해도 이동 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/vYrmvXv?editors=1100)
## 36강 : 2차 메뉴 과정6 [정답] 2차메뉴목록(커스텀) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/yLEbGVV)
## 37강 : 2차 메뉴 과정7 [정답] HOVER - 예제 : [열기](https://codepen.io/kimhyeji324/pen/dyKWwOg?editors=1100)
## 38강 : 2차 풀다운 메뉴 제작 후 제출 전원 정답시 3차 풀다운 메뉴 진도 - codepen 열기 : [이동](https://codepen.io/pen)
## 00강 : fixed - 예제 : [열기](https://codepen.io/khjsbs324/pen/abGpMwO?editors=1100)
## 00강 : z-index - 예제 : [열기](https://codepen.io/khjsbs324/pen/vYjgPpZ?editors=1100)
## 00강 : visibility - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/gOzgygZ)
## 00강 : opacity - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/WNJRWEN)
## 87강 : font-famail - 한글 폰트 : [눈누](https://noonnu.cc/) - 사이트 버벅거림, 로딩안됨 오류가 가끔씩 있습니다. - 영문 폰트 : [구글폰트](https://fonts.google.com/earlyaccess) - 개념 : [눈누 한글폰트 적용](https://codepen.io/khjsbs324/pen/gOzOMmo?editors=1100) - 개념 : [구글 한글폰트 적용](https://codepen.io/khjsbs324/pen/JjvjRKO?editors=1100) - 개념 : [구글 영문 폰트 적용](https://codepen.io/khjsbs324/pen/vYjYXgV?editors=1100) - 개념 : [한글폰트가 안될때 영문폰트도 안되면 기본폰트](https://codepen.io/khjsbs324/pen/OJZJRge) - 개념 : [포인트 폰트 적용](https://codepen.io/khjsbs324/pen/bGMGwoG?editors=1100)
## 89강 : font-weight 값 종류 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/KKRwyKo?editors=1010)
## 90강 : 웹폰트에 font-weight 속성 적용 - 한글 폰트 : [눈누](https://noonnu.cc/) - 사이트 버벅거림, 로딩안됨 오류가 가끔씩 있습니다. - 개념 : [열기](https://codepen.io/kimhyeji324/pen/MWGYENX)