$$config title: 웹4 수업페이지 keywords: - 개강 23.02.13(월) - 종강 23.03.10(금) $$ ## 휴강정보(방학특강 제외_자세한 정보는 멘토님께 문의)
## 강사정보 - 김혜지 - 01043721301
## 만족도 조사 - [열기](http://st.koreaedugroup.com/2019/login.asp)
## 디스코드 주소 - 만료시 말씀 주세요
## 만족도 조사 - [열기](http://st.koreaedugroup.com/2019/)
## 관련링크 - 주소 줄이기: [이동](https://to2.kr/)
## 해상도 - 해상도 통계 확인 사이트 : [gs.statcounter](https://gs.statcounter.com/) ```html 눈 앞에 보이는 실물 모니터 사이즈 ``` ## 01강 : body이 부모인 태그 - 개념과 예제 : [열기](https://codepen.io/kimhyeji324/pen/qBMWqYZ)
## 02강 : body 크기 - 수업 codepen : [열기](https://codepen.io/kimhyeji324/pen/LYJPbmZ)
## 03강 : block 특징 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/oNPvYdz?editors=1100)
## 04강 : inline-block 특징 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/dyqbOeO)
## 05강 : 부모엘리먼트와 자식엘리먼트 크기관계 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/VwGZmxP?editors=1100)
## 06강 : 자식엘리먼트와 부모엘리먼트 높이 - 수업codepen : [부모 높이 auto](https://codepen.io/kimhyeji324/pen/VwGZmxP?editors=1100) - 수업codepen : [부모 높이 > 자식높이](https://codepen.io/kimhyeji324/pen/YzOKpLZ?editors=1100)
## 07강 : 자식엘리먼트와 부모엘리먼트 크기가 같을때 - 수업codepen : [부모 높이 = 자식높이](https://codepen.io/kimhyeji324/pen/RwYboyg?editors=1100)
## 08강 : block 정렬 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/XWPrNVv)
## 09강 : 텍스트와 텍스트취급 정렬 - 수업codepen : [텍스트와 텍스트취급 정렬](https://codepen.io/kimhyeji324/pen/KKxPNeb?editors=1100)
## 10강 : line-height와 position을 사용하는 이유 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/MWqWgeB?editors=1100)
## 11강 : body에 flex사용금지, body 높이 상속받기 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/ZEMEzym?editors=1100)
## position 기본값 ```css /*아무 효과도 없다.*/ position: static; ```
## position: fixed [화면 원하는 위치에 고정 시켜주는 역할] ```css /* absolute와 전부 동일하지만 스크롤을 따라다니는 태그로 만들어준다. 특징과 사용방법은 absolute와 전부 동일하다. */ position: fixed; ```
## 12강 : absolute복습 - 수업codepen : [absolute적용 전](https://codepen.io/kimhyeji324/pen/YzOzKoV?editors=1100) - 수업codepen : [absolute 적용 후, 넓이가 사라지는 이유](https://codepen.io/kimhyeji324/pen/vYzYBag) - 수업codepen : [absolute 적용 후, relative 적용전 body넓이 상속](https://codepen.io/kimhyeji324/pen/JjajPzG?editors=1100) - 수업codepen : [absolute 적용 후, relative 적용전 위치속성적용](https://codepen.io/kimhyeji324/pen/BaOaBgx?editors=1100) - 수업codepen : [absolute 적용 후, relative 적용](https://codepen.io/kimhyeji324/pen/LYJYYPb?editors=1100)
## 13강 : absolute 복습(z축) - 수업codepen : [absolute적용 전](https://codepen.io/kimhyeji324/pen/gOdOBxL?editors=1100) - 수업codepen : [absolute적용 후, z축 순서](https://codepen.io/kimhyeji324/pen/QWVWZMa?editors=1100) - 수업codepen : [relative적용과 특징](https://codepen.io/kimhyeji324/pen/KKxKGGB?editors=1100)
## float을 사용하는 이유 ```html 1. flex를 사용하지 못하는 경우가 많다. 2. flex를 사용해도 되지만 float을 선호하는 경우도 많다. ```
## float 기본값 ``` float: none; ```
## float 적용전 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/jOvOQwJ?editors=1100)
## float 문제점 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/poOoQwm?editors=0100)
## float 문제 해결방법 - 수업codepen : [해결방법예시](https://codepen.io/kimhyeji324/pen/yLxLQXd?editors=0100)
## float 개념 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/KKxKrmY?editors=1100)
## float 문제점 해결 - 수업codepen : [인접동생이 float형과 높이가 같을때](https://codepen.io/kimhyeji324/pen/BaOywwQ?editors=1100) - 수업codepen : [인접동생이 float형과 높이가 다를때](https://codepen.io/kimhyeji324/pen/ExeawMz?editors=1100) - 수업codepen : [인접동생에 clear속성을 적용했을때](https://codepen.io/kimhyeji324/pen/abazLMg?editors=1100) - 수업codepen : [인접동생이 inline인 상황에 clear속성을 적용했을때](https://codepen.io/kimhyeji324/pen/xxabXBv?editors=1100) - 수업codepen : [마지막 동생이 block인 상황에 clear속성을 적용했을때](https://codepen.io/kimhyeji324/pen/gOdbGEm?editors=1100) - 수업codepen : [가상요소 활용하여 clear속성을 적용했을때](https://codepen.io/kimhyeji324/pen/JjaorVP)
## float 중앙정렬 - 수업codepen : [block](https://codepen.io/kimhyeji324/pen/yLxyPvW) - 수업codepen : [article태그에 absolute 적용](https://codepen.io/kimhyeji324/pen/yLxyPvW) - 수업codepen : [article태그에 absolute 적용 후 top: 0](https://codepen.io/kimhyeji324/pen/yLxyPvW?editors=1100) - 수업codepen : [article태그에 absolute 적용 후 left: 50%](https://codepen.io/kimhyeji324/pen/ExejNyL?editors=1100) - 수업codepen : [absolute 중앙정렬 원리](https://codepen.io/kimhyeji324/pen/ExejgBo?editors=1100)
## 멀티미디어 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/PodqbWq?editors=1010)
## 마켓컬리 float으로 코드 작성하기 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/GRXoQQe)
## 마켓컬리 탑바 제작 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/vYzGyJr)
## calc 활용 반응형 제작 - 수업codepen : [100vh calc 활용](https://codepen.io/kimhyeji324/pen/PodzoPr?editors=1100) - 수업codepen : [위로 올라오는 자식](https://codepen.io/kimhyeji324/pen/wvEWvMv) - 수업codepen : [반응형 이미지 레이아웃](https://codepen.io/kimhyeji324/pen/MWqeWep?editors=1100)
## 스와이퍼 - [1단계](https://codepen.io/khjsbs324/pen/mdGWbQR) - [2단계](https://codepen.io/khjsbs324/pen/NWLpKEy) - [3단계](https://codepen.io/khjsbs324/pen/XWPMWzm) - [4단계](https://codepen.io/khjsbs324/pen/YzOZzjY)
## 스와이퍼 마켓컬리 배너 - [페이지 이동하기](https://codepen.io/khjsbs324/pen/xxarezg)
## 스와이퍼 마켓컬리 상품리스트 - [고정형 swiper-slide 1개 > 이미지4장](https://codepen.io/kimhyeji324/pen/jOvLxad)
## 스와이퍼 반응형 상품리스트 - [반응형 swiper-slide 1개 > 이미지1장](https://codepen.io/kimhyeji324/pen/YzOrVBR)
## 23.02.13(월) 수업영상 - 수업영상1 : [09:00 - 09:50](https://youtu.be/ySnrkEWDLYk) - 수업영상2 : [09:50 - 10:50](https://youtu.be/OS0XO9WGQjs)
## 23.02.14(화) 수업영상 - 수업영상1 : [09:50 - 10:50](https://youtu.be/yBOB5UOVh5A)
## 23.02.15(수) 수업영상 - 수업영상1 : [09:00 - 09:50](https://youtu.be/dF9nt_Aagew) - 수업영상2 : [10:00 - 10:50](https://youtu.be/ANzH43N9DdQ)
## 23.02.16(목) 수업영상 - 수업영상1 : [09:00 - 09:50](https://youtu.be/sDIUvJ8OL6M) - 수업영상2 : [10:00 - 10:50](https://youtu.be/gh6cxwuUKmw)
## 23.02.17(금) 수업영상 - 수업영상1 : [09:00 - 09:50](https://youtu.be/X8QUROWkGqI) - 수업영상2 : [10:00 - 10:50](https://youtu.be/241-7AF6xp8)
## 23.02.21(화) 수업영상 - 수업영상1 : [09:00 - 09:50](https://youtu.be/bCLAWNzus4U) - 수업영상2 : [10:00 - 10:50](https://youtu.be/O_qE0GSxmK8)
## 23.02.22(수) 수업영상 - 수업영상1 : [09:00 - 09:50](https://youtu.be/0kL78t3wptA) - 수업영상2 : [10:00 - 10:50](https://youtu.be/-Bh9Q3QTRus)
## 23.02.23(목) 수업영상 - 수업영상1 : [09:00 - 09:50](https://youtu.be/8_HdQxGwhwE) - 수업영상2 : [10:00 - 10:50](https://youtu.be/JhrcjIRH4nU)
## 23.03.06(월) 수업영상 - 수업영상1 : [09:00 - 09:50](https://youtu.be/dHoLg9GRjTg) - 수업영상2 : [10:00 - 10:50](https://youtu.be/qjWi6TJ4I6U)
## 23.03.08(수) 수업영상 - 수업영상1 : [09:00 - 09:50](https://youtu.be/OjGVXqavruE) - 수업영상2 : [10:00 - 10:50](https://youtu.be/BYmw2sc0c94)

게시글 상세