$$config title: 웹1 수업페이지 keywords: - 개강 22.01.12 목요일 - 종강 22.02.09 목요일 - D강의장 $$ ## 녹본예정
## 휴강정보
## 강사정보 - 김혜지 - 01043721301
## 만족도 조사 - [열기](http://st.koreaedugroup.com/2019/login.asp)
## 수업영상 및 수업페이지 타인 공유 금지 - 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다. - 수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다. - 녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
## 공지사항 ![원본이미지](https://i.postimg.cc/ZKL3jrvS/Frame-2.jpg)
## 디스코드 주소 - 만료시 말씀 주세요
## 관련링크 - 주소 줄이기: [이동](https://to2.kr/)
## 1강 : Tstory 가입 - [티스토리 이동](https://www.tistory.com/) - 카카오계정 가입
## 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/체크
## HTML 칸 내에서 생성기능 - Tab키
## codepen에서 텍스트 여러개 쓰기 - {텍스트}*n + Tab
## 4강 : 키보드 단축키 - 개념 : [블로그 이동](https://slog.gg/p/10745)
## 5강 : 주석 63p - 65p - 개념 : [열기](https://codepen.io/kimhyeji324/pen/vYjVLNN) - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/QWBqGpr?editors=1000)
## 태그 자동생성 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/xxzgvWe) - 수업 codepen : [열기](https://codepen.io/kimhyeji324/pen/mdjBOLw)
## 6강 : HTML 태그와 엘리먼트 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/RwyerwW?editors=1000) - 수업 codepen : [열기](https://codepen.io/kimhyeji324/pen/KKeWxVa)
## 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/xxzgvWe) - 수업 codepen : [열기](https://codepen.io/kimhyeji324/pen/LYBzbMR)
## 9강 : css - 개념 : [열기](https://codepen.io/kimhyeji324/pen/zYjmrZX?editors=1100) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/poVxgPZ)
## 10강 : color속성과 속성값 - 수업 codepen : [color 속성값 종류](https://codepen.io/kimhyeji324/pen/KKeWxxy)
## 11강 : 태그 기본 개념 정리 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/YzjrNdO?editors=1100)
## 12강 : inline 태그 개념과 예시 - 수업 codepen : [열기](https://codepen.io/kimhyeji324/pen/BaPwWPL) - 추가자료 : [열기](https://codepen.io/kimhyeji324/pen/KKeqgyg)
수업예정 ## 13강 : html 문서 구조 - 추가자료 : [열기](https://codepen.io/kimhyeji324/pen/eYrPWqg?editors=1010)
## 14강 : body 태그 기본값 - 추가자료 : [열기](https://codepen.io/kimhyeji324/pen/VwxEboB)
## 15강 : display: block - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/GRdYmGX?editors=1100)
## 16강 : display: inline - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/bGMmRpN)
## 17강 : display: inline-block - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/bGMmRBd)
## 18강 span → display: inline-block - 수업 codepen : [열기](https://codepen.io/kimhyeji324/pen/KKeqgyg)
## 19강 inline태그에 텍스트를 적었을때 배경색이 나오는이유 - 수업 codepen : [열기](https://codepen.io/kimhyeji324/pen/WNKXzYB)
## display 태그 분류 - inlne - 태그 → a, span, img, ::after, ::before - inline-block - 태그 → X - block - 태그 → inline 속성을 가진 태그를 제외한 전부
## display 넓이 - inlne - 부모 넓이를 상속받지 않는다. - inline-block - 부모 넓이를 상속받지 않는다. - block - 부모 넓이를 상속받는다.
## display 높이 - inlne - 부모 높이를 상속받지 않는다. - inline-block - 부모 높이를 상속받지 않는다. - block - 부모 높이를 상속받지 않는다.
## 19강 : background-color 속성값
## 20강 : css선택자 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/XWBzqOE)
- 개념과 예제 : [자식선택자](https://codepen.io/kimhyeji324/pen/YzLJObN) - 개념과 예제 : [후손선택자](https://codepen.io/kimhyeji324/pen/PoeydvO) - 추가자료 : [열기](https://codepen.io/kimhyeji324/pen/yLEXaPg)
- 개념과 예제 : [인접동생선택자](https://codepen.io/kimhyeji324/pen/rNvqZXX?editors=1100) - 추가자료 : [열기](https://codepen.io/kimhyeji324/pen/MWXojOp)
- 개념과 예제 : [전체선택자](https://codepen.io/kimhyeji324/pen/QWrZZWZ) - 추가자료 : [열기](https://codepen.io/kimhyeji324/pen/ZERypaK)
## 수업영상 23.01.19(목) - 23.01.19(목) : [19:00 - 19:50 수업영상1](https://youtu.be/3TRy816Q798) - 23.01.19(목) : [19:00 - 19:50 수업영상2](https://youtu.be/nBlgeNSMe6w) - 23.01.19(목) : [19:00 - 19:50 수업영상3](https://youtu.be/eNiz95peRKE)
## 21강 : 자식엘리먼트에 따른 부모엘리먼트 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/YzjELxd)
## 23강 : 상속되는 color 속성 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/eYjrMKL)
## 22강 : 선택자 문제풀이 - 문제 : [확인](https://codepen.io/kimhyeji324/pen/jOxNLxy?editors=1000) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/rNrvvBR?editors=1000)
## 23강 : class 선택자 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/GRdKRrd?editors=1000) - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/XWBqqar) - 추가자료 : [열기](https://codepen.io/kimhyeji324/pen/JjZJQKY?editors=1100)
## 24강 : 젠코딩 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/eYjrrXN) - * → 여러개 - $ → 1~n - . → class - {} → 텍스트 - [] → 속성 - () → 그룹 - + → 인접동생 - > → 자식
## 25강 : 힘이 강한 css - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/qByYKWm?editors=1100)
## 26강 : css코드가 같을때 - 수업codepen : [태그](https://codepen.io/kimhyeji324/pen/MWBGXKa) - 수업codepen : [선택자](https://codepen.io/kimhyeji324/pen/VwBxdQB?editors=1100)
## 27강 : 하이퍼링크 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/OJwZEeJ) - 개념 : [열기](https://codepen.io/kimhyeji324/pen/RwyeeYJ?editors=1000)
## 28강 : margin, padding 맛보기 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/GRBdBqR)
## 29강 : class선택자 복습 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/PoByoOV)
## 30강 : margin, padding 개념과 예제 - 수업codepen : [수업codepen](https://codepen.io/kimhyeji324/pen/JjBmojZ?editors=1100)
## 브라우저 태그 인식 - 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를 사용하면 적용한 식의 태그가 직접 움직인다.
## 31강 : block요소 정렬 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/zYLmGYb)
## 32강 : block태그 안에 텍스트 정렬 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/YzjJXXq)
## 33강 : block태그 안에 텍스트 요소 정렬 - 수업 codepen : [열기](https://codepen.io/kimhyeji324/pen/VwBELKa)
## 34강 : inline태그 안에 텍스트 정렬 - 수업 codepen : [열기](https://codepen.io/kimhyeji324/pen/mdjzJJO)
## 35강 : 상속되는 text-align - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/xxJywLr?editors=0100)
## 36강 : 중앙정렬 문제1 - 문제 : [이미지와 텍스트를 중앙정렬 해주세요.](https://codepen.io/kimhyeji324/pen/oNyXyPb?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/jOKPKvp?editors=1100) - 풀이 : [확인](https://codepen.io/kimhyeji324/pen/MWXwBgd)
## 37강 : 1080px 그리드 잡기 - 문제 : [조건에 맞춰 아래 이미지처럼 코드를 짜주세요.](https://codepen.io/kimhyeji324/pen/QWropxE?editors=1000) - 정답 : [수업codepen 열기](https://codepen.io/kimhyeji324/pen/PoBXPBB) ![원본이미지](https://i.postimg.cc/g2g67hsH/1.jpg)
- 추가자료 : [기본 버전](https://codepen.io/kimhyeji324/pen/BaVJVKv?editors=1100) - 추가자료 : [container 버전](https://codepen.io/kimhyeji324/pen/Vwdyday?editors=1100) - 추가자료 : [container 버전 풀이](https://codepen.io/kimhyeji324/pen/vYrprgj?editors=1100)
## 38강 : inline-block 여백 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/rNvRyqY?editors=1100) - 추가자료 : [열기](https://codepen.io/kimhyeji324/pen/PoaEajX?editors=1100)
- 문제 : [조건에 맞춰 아래 이미지처럼 코드를 짜주세요](https://codepen.io/kimhyeji324/pen/GRdeWwV?editors=1000) - 정답 : [수업codepen 열기](https://codepen.io/kimhyeji324/pen/poZqjOM?editors=1100) ![원본이미지](https://i.postimg.cc/qMtYqchz/2.jpg)
## 39강 : 520안에서 그리드, a태그 추가, padding적용 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/GRBPpbX?editors=1100)
## 40강 : 네비바 단계별 제작 - 추가자료 : [1단계 1080전체 그리드 잡기](https://codepen.io/kimhyeji324/pen/oNyEBaR?editors=1100) - 추가자료 : [2단계 1080그리드 안에서 레이아웃 잡기](https://codepen.io/kimhyeji324/pen/PoaQbrv?editors=1100)
- 추가자료 : [3단계 520안에서 레이아웃 잡기](https://codepen.io/kimhyeji324/pen/dyKdNgB?editors=0100) - 추가자료 : [4단계 520안에서 정확한 수치로 레이아웃 잡기](https://codepen.io/kimhyeji324/pen/vYrdgXP?editors=1100)
- 추가자료 : [5단계 a태그와 span태그 추가하기](https://codepen.io/kimhyeji324/pen/GRGQrdg?editors=1100) - 추가자료 : [6단계 a태그 노멀라이즈, 상하padding](https://codepen.io/kimhyeji324/pen/ExRQZee?editors=1100) ## 노멀라이즈 주의사항 - 개념 : [열기](https://codepen.io/khjsbs324/pen/rNvNNJV)
## 41강 : 속성값 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)
## 42강 : a 노멀라이즈 - 예시 : [열기](https://codepen.io/kimhyeji324/pen/GRxeRzW?editors=1100)
## 43강 : 속성 text-deocration - 개념 : [열기](https://codepen.io/kimhyeji324/pen/zYWbYQV)
## 44강 : display속성값에 따라 달라지는 text-decoration - 개념 : [inline | inline | inline-block 비교](https://codepen.io/kimhyeji324/pen/ZEozLXG?editors=1100)
## 45강 : 텍스트태그 특징 정리 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/bGjzGXO?editors=1000) - 수업codepen : [p태그와 span태그 예시](https://codepen.io/kimhyeji324/pen/xxJMbqr)
## 46강 : h1, h2, h3, h4, h5, h6 태그 노멀라이즈 - 개념: [열기](https://codepen.io/kimhyeji324/pen/wvmOBVO?editors=1000) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/dyKqMYr?editors=1100)
## 47강 : p태그 노멀라이즈 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/eYMXmWO?editors=1000) - 예시 : [열기](https://codepen.io/kimhyeji324/pen/xxWBGaj?editors=1100)
- 개념 : [수업 codepen](https://codepen.io/kimhyeji324/pen/mdKGPBe) ## 48강 : 폰트어썸 아이콘 적용하기 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/jOpdPWV?editors=1000) - Font Awesome : [열기](https://fontawesome.com/icons/bars?s=solid&f=classic) - cdnjs : [열기](https://cdnjs.com/)
## 49강 : border-box : box-sizing - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/dyjLqNp)
## 50강 : 마켓컬리 상단 팝업과 로그인 section 제작 - 수업codepen : [팝업](https://codepen.io/kimhyeji324/pen/ZEjZMKN) - 수업codepen : [로그인](https://codepen.io/kimhyeji324/pen/MWBMaLr)
## 51강 : vertical-align - 개념 : [열기](https://codepen.io/kimhyeji324/pen/jOpjWba)
## 52강 : body 노멀라이즈 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/KKBjVNo)
## 53강 : border - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/ZEjdQJm?editors=1100)
## 54강 :box-sizing : content-box, border-box - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/poZXgxQ?editors=1100)
## 55강 : img태그 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/VwBJeop?editors=1000)
## 56강 : 개발자모드 사용하기 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/vYaqGGe?editors=1000)
## 57강 : img태그 여백 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/VwBJapM?editors=1100)
## 58강 : 이미지 사이즈 조절 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/Yzjoqja?editors=1100)
## 59강 : object-fit: cover - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/bGjPpmy?editors=1100)
## 60강 : 마켓컬리 상품리스트 제작 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/BaPgzxo)
## 23.01.31(화) 보강 영상 - 수업영상1 : [19:00 - 19:50](https://youtu.be/bqnrSS5BLcM) - 수업영상2 : [20:00 - 20:50](https://youtu.be/TCraDxLmhxQ) - 수업영상3 : [21:00 - 21:40](https://youtu.be/VF8gm7AElNc)
## 23.02.02(목) 수업 영상 - 수업영상1 : [19:00 - 19:50](https://youtu.be/3eXn1uTTplE) - 수업영상2 : [20:00 - 20:50](https://youtu.be/XEeHZ043jK0) - 수업영상3 : [21:00 - 21:40](https://youtu.be/NeKJ9Pb3eYA)
## 23.02.03(금) 수업 영상 - 수업영상1 : [20:00 - 20:50](https://youtu.be/jaEBTHK90Zk) - 수업영상2 : [21:00 - 21:50](https://youtu.be/VY7J1dhtJW4)
## 23.02.07(화) 수업 영상 - 수업영상1 : [19:00 - 19:50](https://youtu.be/wKTMVr_4JHg) - 수업영상2 : [20:00 - 20:50](https://youtu.be/QIIZBavq9YQ) - 수업영상3 : [21:00 - 21:40](https://youtu.be/KzKcn4iDuCU)
## 23.02.09(목) 수업 영상 - 수업영상1 : [19:00 - 19:50](https://youtu.be/M-C683KVbcU) - 수업영상2 : [20:00 - 20:50](https://youtu.be/pslh5K2_UBY) - 수업영상3 : [21:00 - 21:40](https://youtu.be/ZsAmaPs9Yvk)
## 7일차 중간점검 | 이도현씨 | 황예림씨 | 오혜진씨 | 조서화씨 | 안효진씨 | 김예림씨 | 김혜영씨 | 문소리씨 | 송영주씨 | 이도영씨 | 전예진씨 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | 00 : 00 | [to2.kr/ehk](https://to2.kr/ehk) 19 : 51 | 00 : 00 | 00 : 00 | 00 : 00 | 00 : 00 | 00 : 00 | 00 : 00 | 00 : 00 | 00 : 00 | 19 : 25 | | 미제출 | [to2.kr/ehe](https://to2.kr/ehe) | [to2.kr/ehf](https://to2.kr/ehf) | 미제출 | [to2.kr/eha](https://to2.kr/eha) | [to2.kr/eg4](https://to2.kr/eg4) | 미제출 | [to2.kr/eg7](https://to2.kr/eg7) | [to2.kr/eg8](https://to2.kr/eg8) | 미제출 | [to2.kr/eg3](https://to2.kr/eg3) | 정혜민씨 | 정민지씨 | 심재희씨 | 진유진씨 | 박진주씨 | 송민아씨 | 유정현씨 | 유준선씨 | 정지영씨 | 하슬씨 | 김수현씨 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | 00 : 00 | 19 : 24 | 00 : 00 | [to2.kr/ehg](https://to2.kr/ehg) 19 : 57 | 00 : 00 | 00 : 00 | 00 : 00 | [to2.kr/ehm](https://to2.kr/ehm) | 00 : 00 | [to2.kr/ehj](https://to2.kr/ehj) 20 : 00 | 00 : 00 | | [to2.kr/ehc](https://to2.kr/ehc) | [to2.kr/eg2](https://to2.kr/eg2) | 미제출 | [to2.kr/ehg](https://to2.kr/ehg) | [to2.kr/ehh](https://to2.kr/ehh) | [to2.kr/ehd](https://to2.kr/ehd) | [to2.kr/abx](https://to2.kr/abx) | [to2.kr/eg9](https://to2.kr/eg9) | 미제출 | [to2.kr/eg6](https://to2.kr/eg6) | [to2.kr/ehb](https://to2.kr/ehb) |

게시글 상세