$$config title: 22.09.14 평일 웹2 (초안) keywords: - 반응형 $$ ## 수업일정 | 09.14(수_1일차) | 09.16(금_2일차) | 09.19(월_3일차) | 09.21(수_4일차) | 09.26(월)_5일차 | 09.28(수)_6일차 | 09.30(금)_7일차 | 10.05(수)_8일차 | 10.07(금)_9일차 | 10.12(수)_10일차 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | vscode | position | 2차메뉴 | 2차메뉴 | float | flex/반응형개념 | 반응형 3차 메뉴/반응형 이미지 그리드 | box-shadow/transform/transition/애니메이션 | hover이미지/스프라이트이미지 | git수업 | | o | o | o | o | o | o | -- | -- | -- | -- |
## 웹1 목표 - 고정형 홈페이지 제작 - 고정형 : [마켓컬리](https://www.shinhancard.com/pconts/html/main.html?_refer=https://www.dbcut.com/)
## 웹2 목표 - 반응형 홈페이지 제작 - 깃허브 페이지 제작 - Visual Studio Code 사용 - 반응형 : [신한카드](https://www.shinhancard.com/pconts/html/main.html?_refer=https://www.dbcut.com/)
## 01강 : vscode 설치 - 블로그 : [이동](https://slog.gg/p/10206) - Mac 구글 블로그 : [열기](https://www.lainyzine.com/ko/article/how-to-install-visual-studio-code-on-macos/)
## 02강 : vscode 작업파일 생성 - 블로그 : [이동](https://slog.gg/p/10222)
## 03강 : 파일 확작명 안보일때 - codepen : [개념열기](https://codepen.io/khjsbs324/pen/ZEobJgb?editors=1000) - 블로그 : [이동](https://slog.gg/p/10204)
## 04강 : 메모장으로 html문서 만들기 - **19p - 20p** - 블로그 : [이동](https://slog.gg/p/10205)
## 05강 : vscode안에서 html문서 만들기 - 블로그 : [이동](https://slog.gg/p/10223)
## 06강 : vscode밖에서 html문서 만들기 - 블로그 : [이동](https://slog.gg/p/10225)
## 07강 : vscode 세팅 - 블로그 : [열기](https://slog.gg/p/10232) - Mac 구글 블로그 : [열기](https://eunhee-programming.tistory.com/162)
## 08강 : vscode 확장프로그램 ### VSCODE에서 크롬으로 열기 - 블로그 : [열기](https://slog.gg/p/10233) ### 코드정리 - 텍스트 복사하기 : [열기](https://codepen.io/khjsbs324/pen/gOzLgJq?editors=1000) - 단축키 : Shift+Alt+F - 블로그 : [Window](https://slog.gg/p/10234) - 구글 블로그 : [Mac](https://allonsyit.tistory.com/66) ### 한국어 - 확장 프로그램명 : Korean Language Pack for Visual Studio Code
## 09강 : Tab오류 - F1 → Emmet: Expand Abbreviation
## 10강 : HTML5 DOCTYPE - **17p - 19p** - VSCODE에서 선언하기 : ! + Tab - 언어설정 : lang="en" - 한글 : ko - title : ![원본이미지](https://i.postimg.cc/fbkfQ5DN/Group-17.jpg)
## 11강 Metadata Content(메타 데이터 콘텐츠) - **22p - 24p** - 개념 : [열기](https://codepen.io/khjsbs324/pen/oNdYNdp)
## 12강 : css파일 생성 후 연결 - **77p** - 블로그 : [열기](https://slog.gg/p/10327)
## 13강 : vscode 실습 - 문제 : 단계별로 html코드 적용까지 완료 해주세요. - 결과물 예시 : [열기](https://slog.gg/p/10235) - 마켓컬리 코드 : [열기](https://codepen.io/khjsbs324/pen/eYrNoJq?editors=1100) - 1단계 : vscode 설치 - 2단계 : 파일 확장명 세팅 - 3단계 : 바탕화면폴더 > vscode폴더 > 메모장으로 html확장자파일 생성 → 빈공간에서 vscode로 열기 - 4단계 : vscode 세팅 - 5단계 : vscode 확장프로그램 설치 및 세팅 - 6단계 : ! + Tab으로 DOCTYPE 생성 - 7단계 : body안에 마켓컬리 html코드 붙여넣기 - 8단계 : 메타 데이터 콘텐츠 head로 이동 - 9단계 : css파일 생성 - 10단계 : css파일안에 마켓컬리 css코드 붙여넣기 - 11단계 : html,css파일 저장 - 최종 : Open with Live Server로 정상작동 확인
## Ver.맥북 | 파일에서 vscode로 열기 - 구글 블로그 : [열기](https://velog.io/@deborah91298/%EB%A7%A5%EB%B6%81-Finder%EC%97%90%EC%84%9C-VS-Code-%EB%B0%94%EB%A1%9C-%EC%97%B4%EA%B8%B0)
## Ver.맥북 | 단축키 - 구글 블로그 : [열기](https://zuyo.tistory.com/902)
## 새파일 만들기 단축키 등록 - 맥북 : [열기](https://codepen.io/khjsbs324/pen/KKRmQzz?editors=1000) - 윈도우 : [열기](https://codepen.io/khjsbs324/pen/qBYmxbo?editors=1010)
## 14강 : 로고 이미지에 svg를 사용하면 좋은점 - 블로그 : [열기](https://slog.gg/p/10328) - 예시 : [freewill](https://freewill.cc/)
## 15강 : 이미지 경로 - **72p - 77p** - 개념 : [열기](https://codepen.io/khjsbs324/pen/xxjRwyL?editors=1100) - 블로그 : [이동](https://slog.gg/p/10329)
## 16강 : 햇갈리는 현재폴더 상위폴더 - 블로그 : [이동](https://slog.gg/p/10330)
## 17강 : position - **66-80** - 개념 : [열기](https://codepen.io/khjsbs324/pen/MWGJLdq?editors=1000) - 예제 : [absolute](https://codepen.io/khjsbs324/pen/VwxPRvj?editors=1100)
## 18강 : position속성으로 넓이,높이 100% - 예제 : [열기](https://codepen.io/khjsbs324/pen/qBYRvrb)
## 19강 : fixed - **72-74** - 예제 : [열기](https://codepen.io/khjsbs324/pen/abGpMwO?editors=1100)
## 20강 : z-index - **74-76** - 예제 : [열기](https://codepen.io/khjsbs324/pen/vYjgPpZ?editors=1100)
## 21강 : 1440그리드 ### 상위 엘리먼트 그리드 ![원본이미지](https://i.postimg.cc/7ZjfzpTm/Frame-9.jpg) - 문제 : [위 이미지와 동일하게 만들어주세요. 단, body자식인 div에는 커스텀할 수 없습니다.](https://codepen.io/pen) - 정답 : [확인](https://codepen.io/khjsbs324/pen/wvjgZyV?editors=1100) ### 하위 엘리먼트 그리드 ![원본이미지](https://i.postimg.cc/vHHz262C/Frame-10.jpg) - 문제 : [열기](https://codepen.io/khjsbs324/pen/wvjgZyV?editors=1100) - 정답 : [확인](https://codepen.io/khjsbs324/pen/jOxyRdr?editors=1100)
## 22강 : 스크롤을 따라다니는 네비바 - 문제 : [네비바가 스크롤을 따라다니도록 코드를 수정해주세요.](https://codepen.io/khjsbs324/pen/ExLZJwX?editors=1100) - 정답 : [열기](https://codepen.io/khjsbs324/pen/yLjgwQm?editors=1100)
## 23강 : display: none - **웹1 138-139** - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/rNvjbeL)
## 24강 : visibility - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/gOzgygZ)
## 25강 : opacity - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/WNJRWEN)
## 26강 : 넓이 기본값(width: auto)일때 absolute 또는 fixed 적용 - 예제 : [열기](https://codepen.io/khjsbs324/pen/mdLWwXw)
## 27강 : 넓이 % 또는 px 일때 absolute 또는 fixed 적용 - 예제 : [열기](https://codepen.io/khjsbs324/pen/GRdWExM)
## 28강 : 마켓컬리 2차메뉴 연습1 - 문제 : [nav에 마우스를 올렸을때만 box-2가 화면에 보이도록 만들어주세요.](https://codepen.io/khjsbs324/pen/MWGpvWW?editors=1100) - 정답 : [display:none 확인](https://codepen.io/khjsbs324/pen/bGMqrbQ)
## 29강 : 마켓컬리 2차메뉴 연습2 - 문제 : [box-2가 화면에 보일때 section-2가 밀려나지 않도록 만들어주세요.](https://codepen.io/khjsbs324/pen/bGMqrbQ) - 정답 : [position:absolut 확인](https://codepen.io/khjsbs324/pen/yLjMoyB?editors=1100)
## 30강 : 마켓컬리 2차메뉴 연습 4 - 예제1 : [2차메뉴 원리](https://codepen.io/khjsbs324/pen/oNdWBqj) - 예제2 : [2차메뉴 원리](https://codepen.io/khjsbs324/pen/qBYmRKd)
## 31강 : 마켓컬리 2차메뉴 연습5 - 문제 : [width를 사용하지 않고 2차메뉴인 ul이 320px만큼 넓이를 가지도록 코드를 수정해주세요.](https://codepen.io/khjsbs324/pen/bGMWgoY?editors=1100) - 정답 : [position: relative 확인](https://codepen.io/khjsbs324/pen/BaxRpdd?editors=1100)
## 32강 : 마켓컬리 2차메뉴 제작 - 1단계 : [확인](https://codepen.io/khjsbs324/pen/mdLmWJq?editors=1100)
## 33강 : 2차 메뉴 생성 원리 - 예제 : [열기](https://codepen.io/khjsbs324/pen/MWGvWrQ?editors=1100)
## 34강 : Ver.간단 마켓컬리 2차메뉴 제작 ![원본이미지](https://i.postimg.cc/g2g67hsH/1.jpg) ![원본이미지](https://i.postimg.cc/qMtYqchz/2.jpg) ![원본이미지](https://i.postimg.cc/KcMzSPn2/3.jpg) ![원본이미지](https://i.postimg.cc/HkBW4BCQ/4.jpg) ![원본이미지](https://i.postimg.cc/8zD3Zg6b/2.jpg) 정답 : [열기](https://codepen.io/khjsbs324/pen/mdLmpgz?editors=1100)
![원본이미지](https://i.postimg.cc/7P2WDZ1V/3.jpg) ![원본이미지](https://i.postimg.cc/v8f3kSM2/4.jpg) 정답 : [열기](https://codepen.io/khjsbs324/pen/mdLmpJB?editors=1100) ★★ - 우측 버전 : [열기](https://codepen.io/kimhyeji324/pen/QWrOoRE?editors=1100) - 화면 넓이 버전 : [열기](https://codepen.io/khjsbs324/pen/BaxJqRw?editors=1100)
## 35강 : 고정형 이미지 여백제거 - 예제 : [열기](https://codepen.io/khjsbs324/pen/OJZmWyb)
## 36강 : 고정형 이미지 세로 중앙정렬 - 문제 : [이미지와 텍스트가 정확하게 중앙정렬이 되도록 만들어주세요.](https://codepen.io/kimhyeji324/pen/JjvyYda?editors=1100) - 정답 : [vertical, line-hight 확인](https://codepen.io/khjsbs324/pen/VwxbmoZ?editors=1100)
## 37강 : Ver.복잡 - 정답 : [확인](https://codepen.io/khjsbs324/pen/KKRaJGQ?editors=1100)
## 38강 : input태그 - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/qBYjeQq?editors=1000)
## 39강 : select태그 - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/bGMrbeJ?editors=1100)
## 40강 : textarea태그 - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/vYjJBpV?editors=1000)
## 41강 : 입력 양식 태그 옵션 - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/OJZjLYJ?editors=1000)
## 42강 : background-color: transparent - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/xxjLxwJ?editors=1100) - 배경색 투명
## 43강 : button태그 - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/RwyZwbm?editors=1100)
## 44강 : form태그 - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/LYmjYWa?editors=1100)
## 45강 : svg아이콘에 마우스를 올리면 컬러가 바뀌도록 - 예제 : [확인](https://codepen.io/khjsbs324/pen/PoejxQG?editors=1100)
## 46강 : 마켓컬리 검색창 제작 ![원본이미지](https://i.postimg.cc/vHS3Jkdg/1.jpg) ![원본이미지](https://i.postimg.cc/tC7zNkVX/2.jpg) 1단계 : [확인](https://codepen.io/khjsbs324/pen/KKRqbMG?editors=1100) ![원본이미지](https://i.postimg.cc/g0yy2B1K/3.jpg) 2단계 : [확인](https://codepen.io/khjsbs324/pen/VwxWqxb?editors=1100) 문제 : [확인](https://codepen.io/khjsbs324/pen/LYmOJzo?editors=1100) 최종 : [확인](https://codepen.io/khjsbs324/pen/qBYjgdX?editors=1100)
## 47강 : 마진과 패딩 - 예제 : [열기](https://codepen.io/khjsbs324/pen/xxjPPBz?editors=1100)
## 48강 : a태그 마진과 패딩 - 예제 : [열기](https://codepen.io/khjsbs324/pen/PoeOOMw?editors=1100)
## 49강 : a태그 width: 100%일때 텍스트 왼쪽 여백 - 예제 : [열기](https://codepen.io/khjsbs324/pen/gOzXopp?editors=1100)
## 50강 : article, section 태그에 커스텀 없이 넓이와 높이를 가지게 만들어주세요.(*div커스텀 가능) - 문제 : [열기](https://codepen.io/khjsbs324/pen/OJZOzMM?editors=1100) - 정답 : [확인](https://codepen.io/khjsbs324/pen/gOzXora)
## 51강 : box-sizing: border-box - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/MWGOroV?editors=1100)
## 52강 : 가상요소 - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/poVdZgJ?editors=1100)
## 53강 : float속성 - 개념 : [열기](https://codepen.io/khjsbs324/pen/ExLbRdK?editors=1000) - 개념과 예제 : [inline-block 차이점](https://codepen.io/khjsbs324/pen/WNJXyqB?editors=1000) - 개념과 예제 : [float요소 부모크기에 포함시키기](https://codepen.io/khjsbs324/pen/vYjWaOj?editors=1100) - 개념과 예제 : [left와 right 열기](https://codepen.io/khjsbs324/pen/yLjPEjd?editors=1100) - 문제 : [열기](https://codepen.io/khjsbs324/pen/OJZOwOe?editors=1100) - 예시 : [보기](https://slog.gg/p/10548) - 정답 : [확인](https://codepen.io/khjsbs324/pen/QWrOBxy?editors=1100)
## 54강 : 줄바꿈 조건 - 개념과 예제 : [부모 엘리먼트 px](https://codepen.io/khjsbs324/pen/rNvpqXa?editors=1100) - 개념과 예제 : [부모 엘리먼트 %](https://codepen.io/khjsbs324/pen/gOzXjdN?editors=1100) | | 자식px | 자식% | | -- | -- | -- | | 부모px | 줄바꿈x, 줄어듬x | 줄바꿈x, 줄어듬x | | 부모% | 줄바꿈o, 줄어듬x | 줄바꿈x, 줄어듬o |
## 55강 : 레이아웃 속성 | | 넓이 | 높이 | 정렬형태 | 여백 | 겹침 | 적용 | | -- | -- | -- | -- | -- | -- | -- | | block | 최대 | 최소 | 세로 | X | X | 본인 | | inline | 최소 | 최소 | 가로 | X | X | 본인 | | inline-block | 최소 | 최소 | 가로 | O | X | 본인 | | flex | 최소 | 최소 | 가로 | X | X | 부모 | | float | 최소 | 최소 | 가로 | X | O | 본인 | | absolute | 최소 | 최소 | 가로 | X | O | 본인 |
## 56강 : flex - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/rNvpQoy?editors=1100)
## 57강 : flex [높이 상속] - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/dyedoZG?editors=1100) | | 높이 상속 | | -- | -- | | inline-block | X | | float | X | | flex | O |
## 58강 : flex [인접 형제 관계와 자식이 px일때 줄바꿈 여부] - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/OJZzadY) | | 인접 형제 높이 | | -- | -- | | inline-block | 함께 높아지지 않는다 | | float | 함께 높아지지 않는다 | | flex | 함께 높아진다 |
## 59강 : flex [상하좌우 위치 정렬] - 예제 : [열기](https://codepen.io/kimhyeji324/pen/wvjmWZO?editors=1000)
## 60강 : flex [가로정렬] - 예제 : [열기](https://codepen.io/khjsbs324/pen/PoeQwaP?editors=1100)
## 61강 : flex [세로정렬] - 예제 : [열기](https://codepen.io/khjsbs324/pen/RwyQNew?editors=1100)
## 62강 : flex [줄바꿈] - 예제 : [열기](https://codepen.io/khjsbs324/pen/mdLpgYV?editors=1100) - 예제 : [flex-wrap: wrap 적용 조건](https://codepen.io/khjsbs324/pen/NWMyqRw) - 예제 : [줄바꿈 됐을때](https://codepen.io/khjsbs324/pen/jOxZPzp)
## 63강 : flex [중앙정렬] - 예제 : [열기](https://codepen.io/khjsbs324/pen/MWGQYLQ?editors=1100)
## 64강 : flex [줄바꿈 조건] - 예제 : [부모 엘리먼트 px](https://codepen.io/khjsbs324/pen/wvjyaGe) - 예제 : [부모 엘리먼트 %](https://codepen.io/khjsbs324/pen/mdLXJEE?editors=1100) | | 자식px | 자식% | | -- | -- | -- | | 부모px | 줄바꿈X, 줄어듬X, 넘침X | 줄바꿈X, 줄어듬X, 넘침X | | 부모% | 줄바꿈X, 줄어듬O, 넘침O | 줄바꿈X, 줄어듬O, 넘침X |
## 65강 : flex [찌그러짐 방지] - 예제 : [열기](https://codepen.io/khjsbs324/pen/MWGQwRd?editors=1100)
## 66강 : flex [반응형 그리드] - 예제 : [열기](https://codepen.io/khjsbs324/pen/MWGQayg?editors=1100)
## 67강 : 100vh, 100vw - 예제 : [열기](https://codepen.io/khjsbs324/pen/abGqzxP?editors=1100)
## 68강 : max-witdh - 예제 : [열기](https://codepen.io/khjsbs324/pen/OJZQVpg?editors=1100)
## 69강 : 신한카드 nav-bar 반응형 제작 ![원본이미지](https://i.postimg.cc/fLKKW6GV/1.jpg) 문제 : [열기](https://codepen.io/khjsbs324/pen/mdLXeGz?editors=1100) 정답 : [확인](https://codepen.io/khjsbs324/pen/NWMyGMZ?editors=1100) ![원본이미지](https://i.postimg.cc/gkrDdtN0/2.jpg) 정답 : [확인](https://codepen.io/khjsbs324/pen/qBYxOoX?editors=1100) ![원본이미지](https://i.postimg.cc/P5wQvpGs/3.jpg) 정답 : [확인](https://codepen.io/kimhyeji324/pen/RwyYedE?editors=1100)
## 70강 : flex [연습] - 플렉스 개구리 : [이동](https://flexboxfroggy.com/#ko) - 정답 : [확인](https://codepen.io/khjsbs324/pen/YzLaqZP?editors=1000)
## 71강 : 3차 메뉴 [기본] - 1차메뉴 : [열기](https://codepen.io/kimhyeji324/pen/BaxrYVR?editors=1100) - 수업영상 : [열기](https://youtu.be/l-v4hnsXXjE) - 2차메뉴 : [열기](https://codepen.io/kimhyeji324/pen/MWGVQGB?editors=0100) - 수업영상 : [열기](https://youtu.be/o3nOfStg8s0) - 3차메뉴 : [열기](https://codepen.io/kimhyeji324/pen/gOzevLP?editors=0100) - 수업영상 : [열기](https://youtu.be/GH5617-Jin8)
## 72강 : 3차 메뉴 - 1차메뉴 : [열기](https://codepen.io/khjsbs324/pen/qBYxEbK?editors=1100) - 수업영상 : []() - 2차메뉴 : [열기](https://codepen.io/kimhyeji324/pen/RwyMMWp?editors=1000) - 수업영상 : []() - 3차메뉴 : [열기](https://codepen.io/kimhyeji324/pen/vYjRRgm?editors=1100) - 수업영상 : []() - hover : [열기](https://codepen.io/kimhyeji324/pen/ExLEEXj?editors=1100) - 수업영상 : []() - 최종 : [열기](https://codepen.io/kimhyeji324/pen/JjvLEgJ?editors=1100)
## 73강 : 이미지 여백 - 예제 : [block](https://codepen.io/kimhyeji324/pen/dyejyKY?editors=1100) - 예제 :[inline-block](https://codepen.io/kimhyeji324/pen/vYjaNzK?editors=1100) - 문제 : [이미지 여백을 제거 해주세요](https://codepen.io/kimhyeji324/pen/xxjJwxQ?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/gOzjaRw)
## 74강 : 반응형 이미지 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/jOxpbpx) - 문제 : [반응형 이미지로 바꿔주세요](https://codepen.io/kimhyeji324/pen/mdLjeBP?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/GRdBpJJ?editors=1100)
## 75강 : img와 max-width - 예제 : [열기](https://codepen.io/kimhyeji324/pen/rNvrOqR?editors=1100) - 문제 : [반응형을 유지하면서, 이미지 넓이가 최대 400px이 되도록 바꿔주세요](https://codepen.io/kimhyeji324/pen/GRdBpJJ?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/rNvrOxK?editors=1100)
## 76강 : img-box - 예제 : [열기](https://codepen.io/kimhyeji324/pen/poVZjQO?editors=1100)
## 77강 : 반응형 이미지(높이 고정) - 문제 : [이미지 세로 사이즈를 고정시켜주세요, 단 이미지가 찌그러지지 않아야 합니다.](https://codepen.io/kimhyeji324/pen/vYjaNpL?editors=1100) - 힌트 : [object-fit 속성](https://codepen.io/kimhyeji324/pen/VwXoGEo?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/yLjqYBz?editors=1100)
## 78강 : max-width 조건 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/QWrByKJ) - 응용예제 : [열기](https://codepen.io/kimhyeji324/pen/MWGByae) - 문제 : [반응형과 최대넓이600px을 유지하면서, 이미지가 section중앙으로 오도록 만들어 주세요.](https://codepen.io/kimhyeji324/pen/qBYyOvd) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/RwyBWOK)
## 79강 : 반응형 이미지(margin) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/XWqBdyZ?editors=1100)
## 80강 : 반응형 이미지(justify-content: space-between) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/WNJKwax?editors=1100)
## 81강 : 반응형 이미지(margin + justify-content: space-between) - 수업 : [열기](https://codepen.io/kimhyeji324/pen/yLjxRVL?editors=1100) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/OJZoEWa?editors=1100)
## %구하기 - 네이버 % 구하기 : [이동](https://to2.kr/d4p) - 네이버에 %계산기 검색 - 총 넓이 / 나누려는 수 = 값 * 100 / 총 넓이 - 예시 - 900 / 3 = 300 * 100 = 30,000 / 900 =33.33333333333333
## 82강 : flex와 box-sizing - 수업 : [이동](https://codepen.io/kimhyeji324/pen/YzLOjYm?editors=1100) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/YzLOjVb)
## 83강 : @media - 수업 : [열기](https://codepen.io/kimhyeji324/pen/MWGqqBR?editors=1100) - 개념 : [열기](https://codepen.io/kimhyeji324/pen/oNdPPwb?editors=1100) - 실습 예제 : [width: %](https://codepen.io/kimhyeji324/pen/vYjzaoN?editors=1100)
## 84강 : calc - 예제 수업 : [열기](https://codepen.io/kimhyeji324/pen/rNvZZvX) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/gOzddzG) - 실습 예제 수업 : [열기](https://codepen.io/kimhyeji324/pen/mdLGGzB?editors=1100) - 실습 예제 : [열기](https://codepen.io/kimhyeji324/pen/mdLjZpe?editors=1100)
## 85강 : 반응형 화면 사이즈 - stacounter : [사이트 이동](https://gs.statcounter.com/) - stacounter 이용방법 및 그리드 사이즈 확인하기 : [글 이동](https://slog.gg/p/9788)
## 그리드 기초 - 그리드 용어 - Gutter : 여백 - Margin : 양 옆 공간 - Column : 거터와 마진을 제외한 공간 - Columns : Column 수 - 모바일 - 대표 사이즈: 360 - 사용 그리드 : 360px, 412px - 세로 사이즈 : 유동적 - Column : 4 - Gutter : 8 - Margin : 16 - 작은 태블릿 - 대표 사이즈 : 768 - 사용 그리드 : 768px - 세로 사이즈 : 유동적 - Column : 8 - Gutter : 16 - Margin : 24 - 큰 태블릿 : 1024 - 가로 사이즈 : 1024px - 사용 그리드 : 1080px, 1224px, 1320px - 세로 사이즈 : 유동적 - Column : 12 - Gutter : 20 or 30 or 40 - Margin : 10 or 15 or 20 - PC : 1440px - 대표 사이즈 : 1920px - 사용 사이즈 : 1440px, 1920px - Column : 12 - Gutter : 40 - Margin : 20
## 86강 : 반응형 실습(이미지) - 문제 : [flex-grow를 조건에 맞게 반응형 홈페이지를 제작해주세요](https://codepen.io/kimhyeji324/pen/BaxOPNy?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/GRdXGwz?editors=1100)
## 87강 : 반응형 실습(Nav-Bar) - 문제 : [모바일 화면 사이즈에서는 햄버거바만 나오도록 만들어주세요](https://codepen.io/kimhyeji324/pen/RwyYedE?editors=1100) - 수업 : [열기](https://codepen.io/kimhyeji324/pen/GRdXwJb) - 정답 : [display:none](https://codepen.io/kimhyeji324/pen/Poedygv) - 정답 : [visibility: hidden](https://codepen.io/kimhyeji324/pen/Poedypy)
## 88강 : 반응형 실습(Text) - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/QWrVpPo?editors=1100) - 예제 : [px, em, rem 비교](https://codepen.io/kimhyeji324/pen/BaxOOeP) - 16px기준 rem단위표 : [열기](https://codepen.io/kimhyeji324/pen/gOzdbEz?editors=1000) - 문제 : [화면사이즈마다 텍스트 크기가 변하도록 만들어주세요](https://codepen.io/kimhyeji324/pen/Poedypy) - 수업 : [열기](https://codepen.io/kimhyeji324/pen/XWqPybz?editors=1100) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/xxjmYGv?editors=1100) - 영상 : [이동](https://youtu.be/5xJmB9TQrQ4) - rem구하기 - 원하는px / html = rem - 예제 - 16px / 16px = 1rem - 14px / 16px = 0.875rem
## 바탕화면으로 바로가기 - 단축키 : windows아이콘 + D
## 89강 : flex 그리드 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/RwyEVzx?editors=1100) - 영상1 : [이동](https://youtu.be/eSeU1JhnCWg) - 영상2 : [이동](https://youtu.be/5HxiS9Hc2Pw)
## 90강 : flex 가변 그리드 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/gOzZRrd?editors=1100) - 영상1 : [이동](https://youtu.be/bYHg3XHKWl4) - 영상2 : []()
## 91강 : flex 고정형반 그리드 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/YzLdQZL?editors=1100)
## 92강 : float 그리드 - 예제 : [열기](https://codepen.io/jangka44/pen/NwjLmR?editors=1100)
## 좌표 ![원본이미지](https://i.postimg.cc/FsPhc7YW/Frame-11.jpg)
## 93강 : transform ### translate - 예제 : [열기](https://codepen.io/kimhyeji324/pen/abGPyNK) ### transform 중앙정렬 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/gOzZXPj)
### scale - 예제 : [열기](https://codepen.io/kimhyeji324/pen/JjvwraX)
### transform-origin - 예제 : [열기](https://codepen.io/kimhyeji324/pen/ExLGbvW?editors=1100)
### rotate - 예제 : [열기](https://codepen.io/kimhyeji324/pen/YzLdEqe)
### rotate 중앙정렬 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/RwyEjNQ?editors=1100)
## 94강 : transitoin - 예제 : [열기](https://codepen.io/kimhyeji324/pen/wvjRPjL?editors=1100)
## 95강 : @keyframes - 예제 : [열기](https://codepen.io/kimhyeji324/pen/poVqdYE?editors=1100)
## 96강 : 화면넓이 2차 메뉴 transition 적용 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/KKRbZZv)
## 97강 : table 게시판
## 98강 : img와 가상요소
## 99강 : 애니메이션 활용 - 수업 : [열기](https://codepen.io/kimhyeji324/pen/qBYLxQa?editors=1010) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/PoeXQyQ?editors=0100)
## 질문코드 ### 고대호님 - 네이버 최상단 : [열기](https://codepen.io/kimhyeji324/pen/eYrBMeN?editors=1100)