$$config title: 웹1 수업페이지 keywords: - 개강 22.10.08 토요일 - 종강 22.10.30 일요일 - D강의장 $$ # 수업종료
## 강사정보 - 김혜지 - 01043721301
## 만족도 조사 - [열기](http://st.koreaedugroup.com/2019/login.asp)
## 수업일정 | 10.08(토_1일차) | 10.09(일_2일차) | 10.15(토_3일차) | 10.16(일_4일차) | 10.22(토)_5일차 | 10.23(일)_6일차 | 10.29(토)_7일차 | 10.30(일)_8일차 | | -- | -- | -- | -- | -- | -- | -- | -- | | o | o | o | o | o | o | o | o |
## 관련링크 - 이미지 호스팅 : [이동](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/)
## 웹1 목표 - 고정형 홈페이지 제작 - 고정형 : [마켓컬리](https://www.kurly.com/main)
## 1강 : HTML | CSS | JavaScript 역할 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/BaxqoZN)
## 2강 : codepen 회원가입 - CodePen : [이동](https://codepen.io) - GitHub : [이동](https://github.com/) - 깃허브 가입방법 : [블로그 이동](https://slog.gg/p/10744)
## 3강 : codepen 툴셋팅 - CodePen : [이동](https://codepen.io/pen) - Settings → Editor Prefernces - Syntax Highlighting → 어두운테마/High Contrast Dark, 밝은테마/High Contrast Light - Fonts → Code Font Family/Hack, Code Font Size/시력에 맞게 - Editor Options → Autocomplete/체크
## 4강 : 키보드 단축키 - 개념 : [블로그 이동](https://slog.gg/p/10745)
## 5강 : 주석 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/vYjVLNN)
## 6강 : HTML 태그와 엘리먼트 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/RwyerwW?editors=1000)
## 7강 : 시멘틱 구조 - 이미지 : [블로그 열기](https://slog.gg/p/10746) - 개념 : [마켓컬리 시멘틱 구조](https://codepen.io/kimhyeji324/pen/zYjmveJ?editors=1000) - 개념 : [태그 용도](https://codepen.io/kimhyeji324/pen/qBYJOww?editors=1010)
## 8강 : 엘리먼트 관계 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/WNJarEz?editors=1010)
## 9강 : TEXT태그 - 개념 : [span, b, i, p](https://codepen.io/kimhyeji324/pen/MWGPKbq) - 개념 : [h태그](https://codepen.io/kimhyeji324/pen/xxjywjy?editors=1100) - 주의점 - h태그 안에 p태그 사용 금지, p태그 안에 h태그 사용 금지 - 한줄에 나오는 텍스트태그 끼리는 부모형제가 될 수 없습니다. - span, b, i, p태그 안에 p태그, span태그 사용금지
## 10강 : css - 개념 : [열기](https://codepen.io/kimhyeji324/pen/zYjmrZX?editors=1100) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/poVxgPZ)
## 11강 : background-color속성과 속성값 - 개념과 예시 : [열기](https://codepen.io/kimhyeji324/pen/poVxgVQ?editors=1100) - background-color는 상속받지 못합니다.
## 12강 : color속성과 속성값 - 개념과 예시 : [열기](https://codepen.io/kimhyeji324/pen/OJZBMwO)
## 13강 : 상속받는 color값 - 개념과 예시 : [열기](https://codepen.io/kimhyeji324/pen/eYrPJaq) - color속성은 부모엘리먼트에 적용하면 자식엘리먼트에게도 적용됩니다.
## 14강 : width, height속성과 속성값 - 개념과 예시 : [열기](https://codepen.io/kimhyeji324/pen/mdLzVvM?editors=1100)
## 15강 : div태그 - 예시 : [열기](https://codepen.io/kimhyeji324/pen/YzLJqzQ)
## 16강 : 자식엘리먼트에 영향받는 부모엘리먼트 - 예시 : [열기](https://codepen.io/kimhyeji324/pen/VwxEaYW)
## 17강 : 엘리먼트 높이 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/BaxqRdG)
## 18강 : 엘리먼트 넓이 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/BaxqRmv) - 문제 : [width속성을 사용하지 않고 엘리먼트가 화면에 나타나도록 코드를 작성 해주세요.](https://codepen.io/kimhyeji324/pen/PoeymEy) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/PoeymEy)
## 19강 : border속성 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/abGRWPw?editors=1100)
## 20강 : html5문서 구조 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/eYrPWqg?editors=1010)
## 21강 : body넓이와 높이 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/VwxEboB)
## 22강 : display: block - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/GRdYmGX?editors=1100)
## 23강 : display: inline - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/bGMmRpN)
## 24강 : display: inline-block - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/bGMmRBd)
## 25강 : display 응용문제 - 문제 : [div 엘리먼트가 한줄에 나올 수 있도록 커스텀 해주세요.](https://codepen.io/kimhyeji324/pen/bGMmRRV) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/bGMmRRV)
## 26강 : 선택자 - 개념과 예제 : [자식선택자](https://codepen.io/kimhyeji324/pen/YzLJObN) - 개념과 예제 : [후손선택자](https://codepen.io/kimhyeji324/pen/PoeydvO) - 개념과 예제 : [인접동생선택자](https://codepen.io/kimhyeji324/pen/rNvqZXX?editors=1100) - 개념과 예제 : [전체선택자](https://codepen.io/kimhyeji324/pen/QWrZZWZ) - 문제 : [확인](https://codepen.io/kimhyeji324/pen/jOxNLxy?editors=1000) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/XWqraxE?editors=1100)
## 27강 : class선택자 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/GRdKRrd?editors=1000) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/wvjYYbb)
## 28강 : 젠코딩 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/poVxxWM?editors=1010) - * → 여러개 - $ → 1~n - . → class - {} → 텍스트 - [] → 속성 - () → 그룹 - + → 인접동생 - > → 자식
## 29강 : 힘이 강한 css - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/poVxxNm?editors=1100)
## 30강 : css코드 같을때 - 개념과 예제 : [태그만](https://codepen.io/kimhyeji324/pen/ExLddXK) - 개념과 예제 : [선택자](https://codepen.io/kimhyeji324/pen/xxjyydE?editors=1100)
## 31강 : 중첩되는 엘리먼트 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/poVxxrM)
## 32강 : 부모 엘리먼트보다 자식 엘리먼트가 클때 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/MWGPPVY)
## 33강 : 부모 엘리먼트보다 자식 엘리먼트가 작을때 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/zYjmmWB)
## 34강 : 하이퍼링크 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/RwyeeYJ?editors=1000) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/RwyeeeJ?editors=1000) - 문제 : [젠코딩을 활용하여 예시와 동일하게 만들어주세요.](https://codepen.io/jangka44/pen/ZEEMPpy) - 예시 : [보기](https://cdpn.io/pen/debug/mddGorY) - 정답 : [확인](https://codepen.io/jangka44/pen/mddGorY)
## 35강 : margin, paddig - 개념 : [열기](https://codepen.io/kimhyeji324/pen/KKRGGEw) - 문제 : [조건에 맞게 코드를 완성 해주세요.](https://codepen.io/kimhyeji324/pen/vYjVVwa) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/mdLzzoG?editors=1010)
## 37강 : 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/jOzJOvz) - 주의사항 : [열기](https://codepen.io/khjsbs324/pen/rNvNNJV) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/GRxeRzW?editors=1100) - 수업영상 : [이동](https://youtu.be/OOd7dHDEvW0)
## 38강 : body 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/jOzJEbe) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/MWVxYyR?editors=1100)
## 39강 : 1080그리드 ![원본이미지](https://i.postimg.cc/Cxp6zJWp/Group-1.jpg)
## 40강 : 그리드 기준 - 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
## 41강 : block요소 정렬 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/yLjwMaO?editors=1100) - 문제 : [조건에 맞춰 아래 이미지처럼 코드를 짜주세요.](https://codepen.io/kimhyeji324/pen/QWropxE?editors=1000) ![원본이미지](https://i.postimg.cc/g2g67hsH/1.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/vYjPxRb?editors=1100) - 수업영상 : [block요소 정렬](https://youtu.be/-Z57_OgoB_U) - 수업영상 : [block요소 정렬 개념과 예제](https://youtu.be/ufMKxT2VgS0) - 수업영상 : [block요소 정렬 문제 정답](https://youtu.be/v9wEXkD83WQ) - 수업영상 : [block요소 그리드 여백 1부](https://youtu.be/jO-84dzD0TQ) - 수업영상 : [block요소 그리드 여백 2부](https://youtu.be/lTC4eYIbXtY)
## 42강 : inline-block 여백 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/rNvRyqY?editors=1100) - 문제 : [조건에 맞춰 아래 이미지처럼 코드를 짜주세요](https://codepen.io/kimhyeji324/pen/GRdeWwV?editors=1000) ![원본이미지](https://i.postimg.cc/qMtYqchz/2.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/LYmayYq) - 수업영상 : [이동](https://youtu.be/aDmpLoLKOtc)
## 43강 : inline-block 여백제거 후 텍스트 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/ExLMWqp?editors=1100) - 문제 : [조건에 맞춰 아래 이미지처럼 코드를 짜주세요](https://codepen.io/kimhyeji324/pen/bGMZqOE?editors=1100) ![원본이미지](https://i.postimg.cc/ZnJZ637w/3.jpg) - 정답-1 : [확인](https://codepen.io/kimhyeji324/pen/vYjPxoo?editors=1100) - 정답-2 : [확인](https://codepen.io/kimhyeji324/pen/bGMZqJp?editors=1100)
## 41강 - 43강 복습 - 수업영상 : [이동](https://youtu.be/81fvliS2zA8)
## 양 옆 여백을 만드는 이유 - 수업영상 : [이동](https://youtu.be/MZe5-d2ATlY)
## 44강 : text-align - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/JjvzWjy?editors=1100) ![원본이미지](https://i.postimg.cc/HkBW4BCQ/4.jpg) - 문제 : [조건에 맞춰 아래 이미지처럼 코드를 짜주세요](https://codepen.io/kimhyeji324/pen/NWMJjWb) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/MWGxmgO?editors=1100) - 수업영상 : [1부](https://youtu.be/3Lv4PCp4N00) - 수업영상 : [2부](https://youtu.be/EyCmMT3LZQM) - 수업영상 : [3부](https://youtu.be/4RqAeAABDqE)
## 45강 : text-align 사용 조건 - text-align는 당연하게도 text만 정렬할 수 있다. - 남는 공간에서 움직이기 때문에 남는공간을 가지고 있는 엘리먼트에 text-align 사용하여 텍스트요소를 정렬해야 한다. - block요소는 텍스트로 인식하지 않기 때문에 text-align을 사용할 수 없다. | 형태 | 텍스트 취급 | text-align | | -- | -- | -- | | block | x | x | | inline | o | o | | inline-block | o | o | | text | o | o |
## 46강 : 속성값 inherit - 개념 : [열기](https://codepen.io/kimhyeji324/pen/JjLzjZg?editors=1000) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/Yzagzvw?editors=1100) - 주의 : [열기](https://codepen.io/kimhyeji324/pen/rNdRNJQ?editors=1100)
## 47강 : a 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/yLKwyNZ) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/GRxeRzW?editors=1100) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/bGvZaPz) - 문제 : [각 텍스트를 클릭하면 이동할 수 있도록 만들어주세요.](https://codepen.io/kimhyeji324/pen/xxjBQrZ?editors=1010) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/MWGxzmR?editors=1100) - 수업영상 : [46강 47강 개념](https://youtu.be/UZ723lBGRCE) - 수업영상 : [문제풀이](https://youtu.be/tZoorC4Q1O8)
## 48강 : display속성값에 따라 달라지는 text-decoration - 개념 : [inline | inline | inline-block 비교](https://codepen.io/kimhyeji324/pen/ZEozLXG?editors=1100)
## 49강 : 리스트 만들때 사용하는 태그 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/OJZqaxv?editors=1000) - 수업영상 : [이동](https://youtu.be/XpbFoDkVKAE)
## 50강 : ul, li 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/QWmobVE) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/mdxoJKY?editors=1100) - 문제 : [웹 표준에 맞게 코드를 수정 해주세요](https://codepen.io/kimhyeji324/pen/MWGxzmR?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/dyerQmW?editors=1100) - 수업영상 : [개념](https://youtu.be/VpCM2LM-6_k) - 수업영상 : [예제](https://youtu.be/Uj8zaYQzf0s) - 수업영상 : [문제풀이](https://youtu.be/2weBj46weY8)
## 51강 : 최상위 엘리먼트 ![원본이미지](https://i.postimg.cc/gk7LDTG1/Group-1.jpg) - 많은 section을 폴더처럼 정리 해주기도 하면서, 다른 영역에서 유용하게 쓰이기 때문에 프로젝트 시작 전 생성 추천 - 수업영상 : [이동](https://youtu.be/qRPv_jkORiw)
## 52강 : 1차 메뉴 단계별 제작 1단계 정답 : [확인](https://codepen.io/kimhyeji324/pen/ZEoPmgb?editors=1100) ![원본이미지](https://i.postimg.cc/g2g67hsH/1.jpg) 2단계 정답 : [확인](https://codepen.io/kimhyeji324/pen/JjvzegN?editors=1100) ![원본이미지](https://i.postimg.cc/qMtYqchz/2.jpg) 3단계 정답 : [확인](https://codepen.io/kimhyeji324/pen/yLjwGBy?editors=1100) ![원본이미지](https://i.postimg.cc/ZnJZ637w/3.jpg) 4단계 정답 : [확인](https://codepen.io/kimhyeji324/pen/abGMPop?editors=1100) ![원본이미지](https://i.postimg.cc/HkBW4BCQ/4.jpg) 수업영상 : [1부 이동](https://youtu.be/RL4L2c30BOM) 수업영상 : [2부 이동](https://youtu.be/SmqO_V6qPJQ) - a노멀라이즈 하는 부분을 보여드리기 위해 노멀라이즈를 하지않고 시작했더니 텍스트컬러와 배경컬러가 같아 보이지 않는 실수가 생겼습니다^^~ - 하단에 1차 메뉴 제작 보시면 됩니다ㅎㅎ
## 1차 메뉴 제작 - 예제 : [이동](https://codepen.io/kimhyeji324/pen/eYrqKWZ?editors=1100) - 수업영상 : [유튜브 이동](https://youtu.be/ytpcgjDlMDc)
## 53강 : background: linear-gradient - 언스플래쉬 : [이동](https://unsplash.com/) - css 관련 사이트: [이동](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) - 개념 : [열기](https://codepen.io/kimhyeji324/pen/bGMPowX?editors=1100) - 수업영상 : [유튜브 이동](https://youtu.be/rk5uhbJQed4)
## 54강 : border-radius - 개념 : [열기](https://codepen.io/kimhyeji324/pen/dymLVdm) - 디테일 커스텀 방향 : [확인](https://slog.gg/p/9887)
## 56강 : g마켓 이벤트배너 - 큰 태블릿 : 1224그리드 - 가로 사이즈 : 1224px - Column : 12 - Gutter : 30 - Margin : 20 - 문제 : [아래 이미지처럼 제작해주세요](https://codepen.io/kimhyeji324/pen/bGMXKmb) ![원본이미지](https://i.postimg.cc/1RqcNwLb/Frame-14.jpg) - 수업영상 : [유튜브 이동](https://youtu.be/Zjwk9F4WphE)
## 57강 : g마켓 미니배너 텍스트 추가 - 문제 : [아래 이미지처럼 제작해주세요](https://codepen.io/kimhyeji324/pen/xxjopxb) ![원본이미지](https://i.postimg.cc/L4kVrRY6/Frame-15.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/poVXpoQ)
- 문제 : [아래 이미지처럼 제작해주세요](https://codepen.io/kimhyeji324/pen/poVXpoQ) ![원본이미지](https://i.postimg.cc/GpkBH314/Frame-16.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/qBYebvR)
## 58강 : img태그 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/MWVMLrd?editors=1000) - 예제 : [열기](https://codepen.io/kimhyeji324/pen/Bargvoo) - 수업영상 : [58강 - 61강 이미지 개념](https://youtu.be/EqUOaFi6MW0)
## 59강 : 이미지 특성 - 이미지 넓이 또는 높이 중 하나만 조절하면 비율이 고정된 상태로 줄어든다. - 예제 : [넓이](https://codepen.io/kimhyeji324/pen/PoeMJGx?editors=1100) - 예제 : [높이](https://codepen.io/kimhyeji324/pen/rNvXGwM)
## 60강 : 이미지 특성2 - 이미지 넓이 높이 모두 커스텀할 경우 이미지가 찌그러진다. - 예제 : [확인](https://codepen.io/kimhyeji324/pen/yLjmzmg)
## 61강 : 이미지 정렬 object-fit 속성 - object-fit: cover를 가장 많이 사용한다. - 개념 : [열기](https://codepen.io/kimhyeji324/pen/VwXoGEo?editors=1100)
## 62강 : 1920px 그리드 - 문제 : [아래 이미지처럼 제작해주세요](https://codepen.io/kimhyeji324/pen/XWqvYeN) ![원본이미지](https://i.postimg.cc/Y0B4g4zZ/8.jpg) - 수업영상 : [유튜브 이동](https://youtu.be/1YONwDLnokA)
## 63강 : 1920px 그리드에 배너 이미지 적용 - 마켓컬리 : [이동](https://www.kurly.com/main) - 문제 : [배너 이미지를 적용 해주세요.](https://codepen.io/kimhyeji324/pen/LYmwrzO) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/JjvgZOr) - 수업영상 : [유튜브 이동](https://youtu.be/JxJG1Ho1qTI)
## 64강 : 배너와 상품리스트 여백 - 문제 : [아래 이미지처럼 제작해주세요](https://codepen.io/kimhyeji324/pen/JjvgZOr) ![원본이미지](https://i.postimg.cc/sgf9N8Cx/10.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/WNJVyde?editors=1100) - 수업영상 : [유튜브 이동](https://youtu.be/ny-vUuOaMi0)
## 65강 : 상품리스트 1080xp 그리드 2단계 - 문제 : [아래 이미지처럼 제작해주세요](https://codepen.io/kimhyeji324/pen/WNJVyde?editors=1100) ![원본이미지](https://i.postimg.cc/sDx5PWYG/11.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/eYrqKrB) - 수업영상 : [유튜브 이동](https://youtu.be/5SGwb9N2kW0)
### 66강 : 상품리스트 이미지 적용 - 문제 : [상품 이미지를 적용 해주세요.](https://codepen.io/kimhyeji324/pen/eYrqKrB) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/poVMKKg?editors=1100) - 수업영상 : [유튜브 이동](https://youtu.be/nfe1YfwOBZg)
## 67강 h1, h2, h3, h4, h5, h6 | 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/wvmOBVO?editors=1000) - 노멀라이즈 예시 : [열기](https://codepen.io/kimhyeji324/pen/RwMdPem)
## 68강 상품 목록 제목 추가 - 문제 : [태그 사용 아래 이미지처럼 제작해주세요.(h2태그 사용)](https://codepen.io/kimhyeji324/pen/poVMKKg?editors=1100) ![원본이미지](https://i.postimg.cc/W4tWvKRY/12.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/QWxLwKQ?editors=1100) - 수업영상 : [유튜브 이동](https://youtu.be/pDu8tdF0yAA)
## 69강 : box-sizing: border-box - 개념과 예제 : [열기](https://codepen.io/khjsbs324/pen/MWGOroV?editors=1100) - 수업영상 : [유튜브 이동](https://youtu.be/4r1xjC6y9FA)
## 70강 : 속성 text-deocration - 개념 : [열기](https://codepen.io/kimhyeji324/pen/zYWbYQV)
## 71강 : vertical-align - 개념 : [열기](https://codepen.io/kimhyeji324/pen/qBogqBx) - 예제 : [보기](https://codepen.io/kimhyeji324/pen/xxWMzpj?editors=1100) - 수업영상 : [유튜브 이동](https://youtu.be/BTwKKDT10u0)
## 72강 상품 리스트 텍스트 추가 - 문제 : [마켓컬리 상품 리스트 텍스트와 동일하게 만들어주세요.](https://codepen.io/kimhyeji324/pen/QWxLwKQ?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/GRGKgWr?editors=1100) - 수업영상 : [유튜브 이동](https://youtu.be/8tCmKvorfxI)
## display 태그 분류 - inlne - 태그 → a, span, img, ::after, ::before - inline-block - 태그 → X - block - 태그 → inline 속성을 가진 태그를 제외한 전부
## display 넓이 - inlne - 부모 넓이를 상속받지 않는다. - inline-block - 부모 넓이를 상속받지 않는다. - block - 부모 넓이를 상속받는다.
## display 높이 - inlne - 부모 넓이를 상속받지 않는다. - inline-block - 부모 넓이를 상속받지 않는다. - block - 부모 넓이를 상속받지 않는다.
## 브라우저 태그 인식 - inlne - text - inline-block - text - block - 도형
## 중앙정렬 주의사항 - 공간이 충분한 상태에서 정렬해야 한다. - 요소를 정렬하고 싶다면 부모엘리먼트 공간이 충분한지 background-color나 border로 꼭 확인 해야한다.
## 중앙정렬 특이사항 - a, span, img, ::after, ::before 제외한 모든 태그는 block요소이다. - block요소를 정렬하기 위해서는 두가지 조건이 충족해야한다. - 첫번째 → 부모엘리먼트 넓이가 충분해야한다. - 두번째 → 부모엘리먼트보다 자식 엘리먼트 넓이가 작아야한다. - 위 두가지 조건을 충족했을때 정렬이 가능하지만 block은 브라우저에서 text로 인식되지 않기 때문에 text-align을 사용할 수 없다. - 도형은 margin: 0 auto라는 코드를 사용해서 중앙정렬이 가능한데, 부모한테 적용하면 작동하지 않는다. - 움직이고 싶은 block도형에 직접 margin: auto를 적용하여 정렬해야한다. - 움직이고 싶은 요소가 inine-block일때는 block요소를 정렬 시킬때와 정반대이다. - inline과 inline-blcok요소는 스스로 움직일 수 없기 때문에 요소를 품고있는 부모 엘리먼트에 코드를 적용시켜 움직이게 해줘야한다. - 직접 움직일때 사용하는 margin: 0 auto는 당연히 사용할 수 없다. - 우선 부모엘리먼트 공간이 충분한지 체크 후, 움직여야 할 요소가 브라우저에서 text로 인식하는 display인지 확인 후에 - text로 인식한다면 text-align, 도형으로 인식한다면 margin: auto로 사용하면 된다. - text-align을 사용하면 적용한 식의 태그가 움직이는것이 아닌, 적용한 태그의 자식이 정렬되고 - margin: auto를 사용하면 적용한 식의 태그가 직접 움직인다.
## block인 요소를 중앙정렬(부모 크기 > 자식 크기) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/ZERzbeJ)
## block인 요소를 중앙정렬(부모 크기 = 자식 크기) - 예제 : [확인](https://codepen.io/kimhyeji324/pen/bGKbVWE?editors=1100)
## block, inline, inline-block 정렬 - 예제 : [확인](https://codepen.io/kimhyeji324/pen/ExRYPbq?editors=1100)
## text-align(inline, inline-block 정렬) ![원본이미지](https://i.postimg.cc/hvx7xJzT/Frame-33.jpg)
## margin: 0 auto;(block 정렬) ![원본이미지](https://i.postimg.cc/Qdnx88V3/Frame-34.jpg)
## 복습 문제 **문제를 풀면서 2분이상 고민되면 바로 질문!! - 문제 : [css 작성 방법](https://codepen.io/kimhyeji324/pen/BaVyOwK) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/KKewxXq)
- 문제 : [display속성에 속성값](https://codepen.io/kimhyeji324/pen/dyKPqZE) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/zYaxJpL)
- 문제 : [inline 요소로 태어난 태그](https://codepen.io/kimhyeji324/pen/RwJNYMw) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/zYaxJRL)
- 문제 : [inline-block 요소로 태어난 태그](https://codepen.io/kimhyeji324/pen/OJEPovN) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/bGKNxvB)
- 문제 : [block 요소로 태어난 태그](https://codepen.io/kimhyeji324/pen/VwdYGXo) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/oNygPqR)
- 문제 : [브라우저에서 text 취급](https://codepen.io/kimhyeji324/pen/LYrEJJo) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/ExRaeeO)
- 문제 : [텍스트를 중앙으로 이동시켜 주세요.](https://codepen.io/kimhyeji324/pen/RwJNYwO?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/yLEyxMo) - 풀이 : [확인](https://codepen.io/kimhyeji324/pen/dyKPgoo)
- 문제 : [동그라미가 중앙으로 오도록 만들어주세요.](https://codepen.io/kimhyeji324/pen/eYKmPJb) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/KKewGze) - 풀이 : [확인](https://codepen.io/kimhyeji324/pen/gOKbNgd)
## 복습 예제 - 문제 : [아래 이미지를 구현 해주세요.](https://codepen.io/kimhyeji324/pen/zYaGwob?editors=1000) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/VwdLdvw?editors=1100) - 수업영상 : [유튜브 이동](https://youtu.be/Obck63ZvE50) ![원본이미지](https://i.postimg.cc/TwwSxFrf/Frame-1.jpg)
- 문제 : [이미지와 텍스트를 중앙정렬 해주세요.](https://codepen.io/kimhyeji324/pen/oNyXyPb?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/jOKPKvp?editors=1100) - 수업영상 : [유튜브 이동](https://youtu.be/SM2tnSby0RI) - 풀이 : [확인](https://codepen.io/kimhyeji324/pen/MWXwBgd)
## 정렬해야 하는 대상이 block이라면 → margin: 0 auto ## 정렬해야 하는 대상이 inline, inline-block, 텍스트라면 → text-align: ;

게시글 상세