$$config title: 매일 09시 웹4 keywords: - 개강 23.08.09(수) - 종강 23.09.06(수) $$
강사정보 **김혜지**

# 만족도 조사 [st.koreaedugroup.com/2019/](http://st.koreaedugroup.com/2019/)
## 이미지 url주소 생성 사이트 - 사용방법 : [유튜브 이동](https://youtu.be/RcLyXc-FCzk) - 포스트이미지 : [이동](https://postimg.cc/68d1D6RP/12d5184e)
## 녹화 프로그램 - 오캠 : [이동](https://ohsoft.net/kor/)
## 위캔 사용방법 - 예시 블로그 : [이동](https://slog.gg/p/12910/edit)
## 추가 내용 ```html 2차메뉴 ㄴ문제 단계 풀이 풀페이지 ㄴ처음 셋팅 영상 + 응용 영상 ㄴ문제 단계 풀이 스와이퍼 ㄴ처음 셋팅 영상 + 응용 영상 ㄴ문제 단계 풀이 반응형 ㄴ문제 단계 풀이 탭 메뉴 ㄴ영상 제공 ㄴ문제 단계 풀이 스와이퍼 두개 ㄴ문제 단계 풀이 버튼누르면 상단으로 이동하기 ㄴ영상 제공 ㄴ문제 단계 풀이 반응형 ㄴ문제 단계 풀이 깃허브 수업() 스크롤트리거() ```
## 반응형 탑바 ```html [1단계] 1.클래스명 : top-bar-section 2.참고 이미지와 컬러를 비슷하게 ``` - 1단계 : [1440*70 원하는 노란색 hax컬러를 가진 탑바를 만들어주세요](https://codepen.io/kimhyeji324/pen/eYbJXpr) - 정답 : [1단계 정답 열기](https://codepen.io/kimhyeji324/pen/RwErdrN?editors=1100) ![원본이미지](https://i.postimg.cc/J7yS0Yx9/image.png)
```html [2단계] ``` - 2단계 : [body, ul, li, a 노멀라이즈](https://codepen.io/kimhyeji324/pen/RwErdZr?editors=1100) - 정답 : [2단계 정답 열기](https://codepen.io/kimhyeji324/pen/RwErdrN?editors=1100)
```html [3단계] (이름) .logo-box, nav, .icon-box (사이즈) .logo-box -> 250*70 nav -> width: 600*70 .icon-box -> 250*70 (여백) 1.margin 사용금지 2.동일한 수치 (선) 두께: 1px 색상:green ``` - 3단계 : [아래 이미지와 동일하게 형태를 잡아주세요](https://codepen.io/kimhyeji324/pen/QWzyoaa) - 정답 : [3단계 flex 열기](https://codepen.io/kimhyeji324/pen/wvRMOPe?editors=1100) - 정답 : [3단계 calc 열기](https://codepen.io/kimhyeji324/pen/wvRMbPB) - 정답 : [3단계 flaot 열기](https://codepen.io/kimhyeji324/pen/mdaPwVd) ![원본이미지](https://i.postimg.cc/gkcX37t2/image.png)
```html 4단계 (조건) .logo-box 사이즈가 250px을 넘어가지 않도록 커스텀 (흰색이 로고 확인 방법) body { background-color: green; } ``` - 4단계 : [로고 넣고 적절한 사이즈로 조절, 로고에 어울리는 색상으로 변경](https://codepen.io/kimhyeji324/pen/yLGOXJP) - 정답 : [4단계 정답 열기](https://codepen.io/kimhyeji324/pen/RwEagGw?editors=1100)
```html 5단계 (목적) - 정렬 전 형태 만들어두기 - nav태그에 따라서 세로중앙정렬 방법이 달라진다. (조건) 아이콘과 아이콘 사이에 여백 10px (주의사항) 위와같은 형태를 사용하지 않는 이유는 돋보기나 메뉴아이콘을 눌렀을때 특정한 페이지로 이동하지 않기 때문이다. ▼ 각각에 아이콘을 span태그로 감싸는 이유는 아이콘 색상이 각각 다를 수 있기 때문이다. ``` - 5단계 : [아래와 같은 형식으로 폰트어썸 아이콘을 배치(아이콘 모양은 자유)](https://codepen.io/kimhyeji324/pen/RwEagoN?editors=1100) - 정답 : [5단계 정답](https://codepen.io/kimhyeji324/pen/OJrNgbX?editors=1100) - 관련 링크 : [cdnjs](https://cdnjs.com/) - 관련 링크 : [폰트어썸](https://fontawesome.com/) ![원본이미지](https://i.postimg.cc/q7LCkJsV/image.png) ```html 6단계 (젠코딩) ul>li*4>a[href="#"]>span*2 (조건) 1.ul, li구조를 사용 해주세요 2.아이콘과 글자를 클릭하면 관련 사이트로 이동할 수 있는 태그를 사용해주세요 3.정해지지 않은 링크는 #으로 처리해주세요 ``` - 6단계 : [아래와 이미지와 같이 nav바 리스트 구조 마크업](https://codepen.io/kimhyeji324/pen/yLGOXbv) - 정답 : [6단계 정답 열기](https://codepen.io/kimhyeji324/pen/dywMRvx?editors=0100) ![원본이미지](https://i.postimg.cc/pVz7ZytJ/image.png) ```html 7단계 ``` - 7단계 : [li태그를 한줄에 같이 배치](https://codepen.io/kimhyeji324/pen/RwEaggP) - 정답 : [7단계 정답 열기](https://codepen.io/kimhyeji324/pen/ZEVWyJR?editors=1100) ![원본이미지](https://i.postimg.cc/zGbGtnDc/image.png)
```html 8단계 (조건) 1.li는 2차메뉴구조가 들어가기 때문에 높이를 탑바 높이와 동일하게 맞춰 커스텀 2.li태그는 전부 동일한 px수치를 가지도록 커스텀 ``` - 8단계 : [조건에 맞춰 이미지와 동일한 형태로 구현](https://codepen.io/kimhyeji324/pen/VwqaWyw) ![원본이미지](https://i.postimg.cc/nckn33t2/image.png) ```html 9단계 (목적) 텍스트속성은 상속된다는 개념을 알고, 2차메뉴에 영향이 갈 수 있어서 body ~ li까지 텍스트 관련 속성은 사용하지 않는다. (조건) 1.flex사용없이 텍스트 정렬 2.li에 텍스트속성 적용시 2차메뉴에도 영향이 가기 때문에 적용X 3.텍스트를 클릭했을때만 링크이동 ``` - 9단계 : [li안에 텍스트 가로세로 정렬](https://codepen.io/kimhyeji324/pen/vYvGMmx) - 정답 : [9단계 정답 열기](https://codepen.io/kimhyeji324/pen/qBLZwqO?editors=1100) ![원본이미지](https://i.postimg.cc/g2KBY0Pd/image.png) ```html 10단계 ``` - 10단계 : [아이콘 색상을 배경색과 어울리게 각각 커스텀](https://codepen.io/kimhyeji324/pen/dywMLzO) - 정답 : [10단계 정답 열기](https://codepen.io/kimhyeji324/pen/bGOpybz?editors=1100) ![원본이미지](https://i.postimg.cc/43xK0W5Z/image.png) ```html 11단계 ``` - 11단계 : [.icon-box안에 있는 아이콘을 세로중앙정렬 가로우측정렬](https://codepen.io/kimhyeji324/pen/NWeNVbZ) - 정답 : [11단계 정답 열기](https://codepen.io/kimhyeji324/pen/MWZydJK?editors=1100)
```html 12단계 (조건) 1.화면 너비높이에 따라 맞춰지는 이미지 ``` - 12단계 : [absolute없이 이미지위에 글자 배치](https://codepen.io/kimhyeji324/pen/PoXNvmV) - 정답 : [12단계 정답 열기](https://codepen.io/kimhyeji324/collab/xxmOdBY?editors=1100) - 예시 : [미리보기](https://cdpn.io/pen/debug/xxmOdBY)
```html 13단계 (필수) 예시 미리보기 화면에서 12단계 스크롤과 13단계 스크롤을 잘 확인 해주세요. ``` - 13단계 : [탑바를 fixed로 만든 후 예시와 동일하게 만들어 주세요](https://codepen.io/kimhyeji324/pen/YzdWQyg/6416d6fe12baaa14e4fde663e7119a11) - 예시 : [미리보기](https://cdpn.io/pen/debug/QWzEgyK/999785c2d287bf7adbd3bc95df7ecf07) - 정답 : [13단계 정답 열기](https://codepen.io/kimhyeji324/pen/QWzEgyK/999785c2d287bf7adbd3bc95df7ecf07?editors=1100)
```html 14단계 (목적) 100vh를 사용할 경우 화면 높이를 그대로 상속받기 때문에 생각하지 못한 형태로 나오는것을 확인하고 fixed를 사용해서 탑바를 커스텀 할 경우 움직이기 때문에 위치속성으로 고정 시켜놓 (조건) 1.배경색이 빠진 상태로 제출 ``` - 14단계 : [fixed를 유지한 상태로 탑바가 끝난 후 이미지가 나오도록 커스텀](https://codepen.io/kimhyeji324/pen/wvRWeJG/7d14f751c4e1a140d64ade93837d80b4) - 정답 : [14단계 정답 열기](https://codepen.io/kimhyeji324/pen/ExGyXWR/4b70da6b25d7dbdcfd067e5755e0b805?editors=1100) - 예시 : [미리보기](https://cdpn.io/pen/debug/ExGyXWR/4b70da6b25d7dbdcfd067e5755e0b805)
```html 15단계 (조건) 1.absolute사용 x 2.텍스트 정렬은 flex를 사용 3.커스텀은 예시 미리보기 화면과 동일하게 제작 ``` - 15단계 : [배경이미지 위에 background-image텍스트 작성 후 중앙정렬 해주세요](https://codepen.io/kimhyeji324/pen/KKbMqqm/e03d5140d80985b61bd6bedd99ce16c2) - 정답 : [15단계 정답 열기](https://codepen.io/kimhyeji324/pen/dywXRRL/f7d0c03e5a322d6219bcf8d4d4cca321?editors=1100) - 예시 : [미리보기](https://cdpn.io/pen/debug/dywXRRL/f7d0c03e5a322d6219bcf8d4d4cca321)
```html 16단계 ``` - 16단계 : [color속성 라이브러리 생성 후 적용](https://codepen.io/kimhyeji324/pen/MWZjdjd/3df50517b5b3bc14855a54c8ef224acd) - 정답예시 : [열기](https://cdpn.io/pen/debug/YzdGbpQ/e148f8d41638f54e3d9953689b180eb4) - 정답 : [16단계 정답 열기](https://codepen.io/kimhyeji324/professor/rNoWabb/101c9c42c550e2f49b52d85ab2815a41)
```html 17단계 [중요메모] /* 해상도부터 ~ 800px까지만 작동 */ /* 해상도부터 ~ 800px이상 = 해상도부터 ~ 800px이하 -> 일반적인 태그 상태에서 코드 작성 해상도부터 ~ 800px이하 = 800px까지만 실행 -> max 700px ~ 800px까지만 실행 -> 700px에서 실행되는 코드 작성, 800px 실행되는 코드 작성 -> 800px에 작성되어있는 코드 실행 @media screen and (max-width: 800px) { 태그 { background-color: red; } } @media screen and (max-width: 700px) { 태그 { background-color: orange; } } ``` - 17단계 : [화면이 800px이하로 떨어지면 메뉴바 아이콘이 삭제 되도록 만들어주세요](https://codepen.io/kimhyeji324/pen/gOZwJWe/c0381c295c3a9f283a8d108918b02b6e) - 정답예시 : [열기](https://cdpn.io/pen/debug/ExGgzXP/4441f639895bb0a4eace5dfc843db69d) - 정답 : [17단계 정답 열기](https://codepen.io/kimhyeji324/professor/VwqmYoK/097357d0e738dc0fcd6817a5d616abaa)
```html 18단계 [중요메모] 500px로 설정했을때 텍스트가 좀 끼는 디자인이 나온다. 반응형 적용할때 조금씩 적용해보고 적절한 사이즈로 조금씩 조정하면 된다. 아래 사이즈에서는 500px보다는 580px이 조금 더 적절하다. @media screen and (max-width: 580px) -> 적절한 사이즈 ``` - 18단계 : [18단계 문제 : 화면이 500px이하로 떨어지면 1차메뉴 네비바에 텍스트를 13px로 만들어주세요](https://codepen.io/kimhyeji324/pen/QWzKRMY/922eb2ec399188e13f81e2c89da312c6) - 정답예시 : [열기](https://cdpn.io/pen/debug/ExGgzwK/ed4245e7ce1f7fa30ae8fbbc6d6921d5) - 정답 : [18단계 정답 열기](https://codepen.io/kimhyeji324/pen/WNLovNy/15874f7e5e97eb5ffbb40ff8d98665bb)
```html 19단계 ``` - 19단계 : [화면이 줄었을때 네비가 가운데배치되지 않는 현상을 해결해주세요](https://codepen.io/kimhyeji324/pen/OJrRYZo/40d2426351a56fb61356bd0c292c9a96) - 정답예시 : [열기](https://cdpn.io/pen/debug/bGOwyMO/ec47b60f342c287ac9788b5a230d27b6) - 정답 : [19단계 정답 열기](https://codepen.io/kimhyeji324/professor/oNJYXYY/e64e6ce51299a81efa92962110355733)
```html 20단계 ``` - 20단계 : [화면이 줄었을때 flex관련 속성을 사용해서 아이콘이 줄바꿈되는 현상을 해결해주세요](https://codepen.io/kimhyeji324/pen/jOXMoKj/1e14336b0fd11d3b0049e02a22a7960d) - 정답 : [20단계 정답 열기](https://codepen.io/kimhyeji324/pen/MWZbwJM/b961f3fe0f17e3117c7fc8a48224a9c5)
```html 21단계 ``` - 21단계 : [화면이 460px이하로 내려가면 1차메뉴 네비바를 삭제 해주세요.](https://codepen.io/kimhyeji324/pen/KKbgLrP/3139009b9f7eb6a5b1a84538d3bc9f26?editors=1100) - 정답 : [21단계 정답 열기](https://codepen.io/kimhyeji324/pen/gOZLpXe/fe393ccb9a97a361f212e98d6452948c)
```html 22단계 [조건] 1. nav태그 부터 타이핑 금지, 복사 붙여넣기만 가능 2.정답예시와 선 형태까지 동일하게 커스텀 3.클래스네임은 -> .top-bar-visible-412 > nav ``` - 22단계 : [1차탑바 아래쪽에 네비바가 나오도록 만들어주세요](https://codepen.io/kimhyeji324/pen/VwqKOqy/125d9582120d82a54f599cf94320e7fc) - 정답예시 : [열기](https://cdpn.io/pen/debug/xxmENmq/64fc2fa39fe98776c16aac216e405494) - 정답 : [22단계 정답 열기](https://codepen.io/kimhyeji324/pen/QWzGbzX/4e53b6246da0b134155077e1a1db83a2)
```html 23단계 ``` - 23단계 : [클래스 추가없이 1차메뉴와 동일하게 커스텀 해주세요](https://codepen.io/kimhyeji324/pen/gOZwJEB/53f97bccf70ac03307e591fd5f9fb865?editors=1100) - 정답예시 : [열기](https://cdpn.io/pen/debug/yLGaWwN/f1eaccac0d911505deee13f0cc4d3cb1) - 정답 : [23단계 정답 열기](https://codepen.io/kimhyeji324/pen/yLGaWwN/f1eaccac0d911505deee13f0cc4d3cb1?editors=1100)
```html 24단계 ``` - 24단계 : [flex없이 모바일사이즈에 나오는 네비바를 중앙정렬 해주세요.](https://codepen.io/kimhyeji324/pen/bGOBdRx/a839438f799c42ce4c310eb595f46318) - 정답예시 : [열기](https://cdpn.io/pen/debug/MWZbwvN/d918a6089cac26df1fd38655d7c248d1) - 정답 : [24단계 정답 열기](https://codepen.io/kimhyeji324/pen/PoXbqgx/9e0a0527ae2256023aafded68b5832d4?editors=0100)
```html 25단계 [조건] 1차 탑바안에 있는 네비바 css는 커스텀X ``` - 25단계 : [모바일사이즈에 나오는 네비바를 반응형으로 만들어주세요.](https://codepen.io/kimhyeji324/pen/jOXVPzR/3ca65389a88df2c1fa8c9b5fc4f60772?editors=1100) - 정답예시 : [열기](https://cdpn.io/pen/debug/poqNJqz/2d308e2a74cb2f4caa8fb5b427fe65f2) - 정답 : [25단계 정답 열기](https://codepen.io/kimhyeji324/pen/WNLoQjv/368080ef93fb6b5df299dd2e30f32e3b)
```html 26단계 [중요메모] 해상도에서부터 조건까지 작동하는 코드들은 @media에서 코드를 작성하지 않고! 일반적인 코드에서 작성해줘야 한다. ``` - 26단계 : [모바일사이즈에 나오는 네비바를 460px이상에서는 보이지않게 만들어주세요.](https://codepen.io/kimhyeji324/pen/qBLqdLj/b1f3dfbfaac5e207bf5bd012311964f0) - 정답예시 : [열기](https://cdpn.io/pen/debug/yLGVYLY/8f92448e62fa3cade67baac0b5a3de46) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/PoXbPoX/327733c81ebfac20ce35d1adab9e1f19)
```html 27단계 ``` - 27단계 : [모바일사이즈에 나오는 네비바를 460px이하에서 나타나게 만들어주세요.](https://codepen.io/kimhyeji324/pen/LYMbppe/6255a5399439969308182ed098104317) - 정답예시 : [열기](https://cdpn.io/pen/debug/KKbNdVp/3c57e5c572091b65c4dbd788e9c1a2c3) - 정답 : [27단계 정답 열기](https://codepen.io/kimhyeji324/pen/Yzdpyyv/53e119062aba44a2c21b95037e50b120)
```html 28단계 [조건] - 일반적인 상태에서 개발자모드로 확인했을때 폰트사이즈가 70px유지 - 620px이하에서 작아지는 텍스트 사이즈는 40px - back-img-custom-text ``` - 28단계 : [화면이 620px이하에서 배너 위 텍스트를 정답예시 화면과 동일하게 커스텀 해주세요.](https://codepen.io/kimhyeji324/pen/bGOBVgb/d57a081ebc319a389cedcc864f2bdc69?editors=1100) - 정답예시 : [열기](https://cdpn.io/pen/debug/KKbNdaV/06892db153567dda4e915b7a9d579094) - 정답 : [28단계 정답 열기](https://codepen.io/kimhyeji324/pen/yLGVYpV/eb99a6f1e79b02f6784d3b09c6413a5e)
```html 29단계 ``` - 29단계 : [화면이 460px이하에서 배너 위 모든 텍스트들이 화면안에 들어오도록 만들어주세요.](https://codepen.io/kimhyeji324/pen/jOXVbZr/1ee71e786f39cfc0e4e539480e225493) - 정답예시 : [열기](https://cdpn.io/pen/debug/rNoWOJz/6497e7cc6c9e3bd6f8a8decd55282fa6) - 정답 : [29단계 정답 열기](https://codepen.io/kimhyeji324/pen/yLGVYvg/04629c0fe0557874c5888e081e21a199)
## 마켓컬리 상품리스트 이미지 위에 레이아웃 구성 - 문제 : [absolute없이 예시이미지와 동일하게 제작](https://codepen.io/kimhyeji324/pen/OJrRgKX/5129b9407777cca41af109b19e163e62) - 예시 이미지 : [예시 이미지 열기](https://cdpn.io/pen/debug/eYbzMOR/91b13891bfdf1ef31391086df4319774)
## background-image - background-size: contain - 문제 : [background-image - background-size: contain](https://codepen.io/kimhyeji324/pen/OJrRqeM/a90dd75a6c575738b38aae5a10e835b1)
## background-image 마우스호버(상속) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/poqNWyq/2d1ea2c31b1ef2431d59546110e5b362?editors=1100)
## background-image 마우스호버(이미지에 px적용) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/JjwbrKY/38ca738bd02c9029e07d5f4502091167?editors=1100)
## flex-basis없이 margin - 문제 : [flex-basis없이 margin](https://codepen.io/kimhyeji324/pen/bGOwJdg/dcc8512fc69604f0722c350652e9fb29?editors=1100)
## 가상요소 - 문제 : [가상요소](https://codepen.io/kimhyeji324/pen/jOXMRvx/689d5bd66519220495b26f61e178d8ec?editors=1100)

게시글 상세