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

# 만족도 조사 [st.koreaedugroup.com/2019/](http://st.koreaedugroup.com/2019/)
# 수업영상 및 수업페이지 타인 공유 금지 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다.
수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다.
녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
수업페이지는 삭제되지 않습니다.
# 유용한 사이트 - 언스플래쉬 : [사이트 이동](https://unsplash.com/ko) - hax컬러 : [구글 페이지 이동](https://www.google.com/search?q=color+picker&oq=color+pi&aqs=chrome.0.0i131i433i512j69i57j0i512l8.3016j0j15&sourceid=chrome&ie=UTF-8)
# 수업 ## 문자부호 | 마침표 | 반점 | 콜론 | 세미콜론 | 큰따옴표 | 작은따옴표 | 빗금, 슬래시 | 역슬래시 | 소괄호 | 중괄호 | 대괄호 | 물결 | 별표 | 대시 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | . | , | : | ; | " | ' | / | \ | () | {} | [] | ~ | * | - |
## 1강 : absolute 맛보기 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/OJaYoqo) ```html [position] -> 절대위치 static(기본상태) -> 일반적인 태그 ㄴ라이브러리에서 커스텀되어있는 태그를 기본상태로 돌려줄때 많이 사용 absolute(z축으로 나온 상태) ㄴ스크롤을 따라다니지 않음 1.absolute를 적용하기 전 그자리 그대로 남아있으려는 특징이 있다. ㄴ위치속성을 통해 반드시 고정해줘야 한다. ㄴrelative로 부모역할을 지정해주지 않으면 body가 부모역할을 한다. (부모역할) -> 크기 제공, 움직일 수 있는 공간 제공 (위치속성) -> left, right, top, bottom(0, px, %단위 등.. 사용가능) 2.absolute나 fixed를 적용하게되면 부모엘리먼트를 벗어난다. ㄴrelative로 부모역할을 지정해주지 않으면 body가 부모역할을 한다. ㄴrelative로 상위엘리먼트를 부모엘리먼트로 지정할 수 있다. (특징) -> 상위엘리먼트에 겹겹으로 relative가 적용되어 있을 경우 가장 가까운 상위엘리먼트가 부모역할을 한다. fixed(z축으로 나온 상태) ㄴ스크롤을 따라다님 relative(z축으로 나온 태그 가둬놓기_부모엘리먼트 역할) ```
## 2강 : relative 적용전 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/mdabrdb)
## 3강 : position: absolute 부모역할 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/GRPKjRR?editors=1100)
## 4강 : absolute와 relative 겹겹이 쌓여있을때 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/vYvBXGB)
## 5강 : 너비가 최소화되는 absolute - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/GRPKXGZ)
## 6강 : 여백을 무시하는 left: 0; right: 0; top: 0; bottom: 0; - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/bGObxKW)
## 7강 : body에 커스텀, body 높이 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/bGObxJo?editors=0100)
## 8강 : absolute 중앙정렬 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/NWeKONY?editors=1100)
## 9강 : 형제들끼리 겹치는 absolute와 fixed - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/PoXozRL)
## 10강 : 2차메뉴 원리 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/abPbZRV)
## 11강 : Z-index - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/ZEVEybY)
## 12강 : width: auto = 0이되는 absolute - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/PoXojzd)
## 13강 : hover 형제와 부모 차이점 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/poqvxoW)
## 14강 : opacity와 none 차이 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/MWZYPWr)
## 2차 메뉴 - 수업페이지 : [정답버전](https://codepen.io/kimhyeji324/pen/NWePmVR) - 수업페이지 : [오답버전](https://codepen.io/kimhyeji324/pen/xxmbNbQ) - 수업페이지 : [li마다 나오는 2차메뉴](https://codepen.io/kimhyeji324/pen/oNJgRgO) - 수업페이지 : [2차 메뉴 정답](https://codepen.io/kimhyeji324/pen/xxmboEZ)
## nav태그에 마우스를 올리면 나오는 2차 메뉴 단계별 제작 ```html 1단계 ``` - 1단계 : [HTML에 menu-2-section을 적절한곳에 배치](https://codepen.io/kimhyeji324/pen/XWobxOO?editors=1000) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/rNoVqPo?editors=1000) ```html 2단계 : 위치조정X ``` - 2단계 : [menu-2-section을 화면 너비 100% 높이 300px로 커스텀](https://codepen.io/kimhyeji324/pen/GRPJYVr?editors=0100) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/JjwdePP) ```html 3단계 : 위치조정 ``` - 3단계 : [menu-2-section이 탑바 왼쪽과 하단에 붙어있도록 커스텀](https://codepen.io/kimhyeji324/pen/JjwdePP) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/zYyGMxQ?editors=1100) ```html 4단계 : 그리드 잡기 ``` - 4단계 : [2차메뉴는 1440px안에 요소가 배치, 중앙정렬](https://codepen.io/kimhyeji324/pen/zYyGMxQ?editors=1100) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/rNoVQVb?editors=1100) ```html 5단계 : html구조 잡기 - html적절한 곳에 네비바 생성 - 2차메뉴 안에 네비바는 초록색 선이 나올 수 있도록 만들어주세요 ``` - 5단계 : [5단계 문제 : 2차메뉴안에 nav바는 왼쪽에 280px에 여백을 두고 시작](https://codepen.io/kimhyeji324/pen/wvRaQMp?editors=1100) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/LYMVXZG?editors=1100) ```html 6단계 만들어진 네비바 정렬 ``` - 6단계 : [ul태그를 한줄에 같이 배치 후 140px을 가지도록 커스텀](https://codepen.io/kimhyeji324/pen/WNLvYGy?editors=1100) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/ZEVGmpP?editors=1000) ```html 7단계 - li한테는 텍스트속성을 사용할 수 없습니다 - html구조는 추가할 수 없습니다. - 텍스트를 기준으로 상하에 7px씩 여백이 생기도록 만들어주세요. ``` - 7단계 : [2차메뉴 안에 있는 텍스트 중앙정렬](https://codepen.io/kimhyeji324/pen/wvRaQoy?editors=1100) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/mdaJQRw?editors=1100) ```html 8단계 ``` - 8단계 : [8단계 문제 : 1차메뉴 네비바와 2차메뉴 네비바를 동일한 위치로 커스텀](https://codepen.io/kimhyeji324/pen/WNLvYRK) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/RwEPqpV?editors=1100) ```html 9단계 ``` - 9단계 : [9단계 문제: 마우스를 올리면 2차메뉴가 나오도록 커스텀](https://codepen.io/kimhyeji324/pen/eYbNQva) - 정답 : [display: none;](https://codepen.io/kimhyeji324/pen/LYMVXyN?editors=1100) - 정답 : [opacity: 0; visibility: hidden;](https://codepen.io/kimhyeji324/pen/abPOQeB?editors=0100)
## 반응형 - 수업 페이지 : [반응형 이미지](https://codepen.io/kimhyeji324/pen/mdaeOze?editors=1100) - 수업 페이지 : [원하는 사이즈를 가진 반응형 이미지](https://codepen.io/kimhyeji324/pen/RwEWoeP?editors=1100) - 수업 페이지 : [max와 min](https://codepen.io/kimhyeji324/pen/yLGYVQK) - 수업 페이지 : [너비를 상속받지 못하는 엘리먼트에 max-width](https://codepen.io/kimhyeji324/pen/WNLQoPE?editors=1100) - 수업 페이지 : [높이가 고정 되어있는 반응형 이미지](https://codepen.io/kimhyeji324/pen/XWomNGy?editors=1100) - 수업 페이지 : [반응형 미디어쿼리](https://codepen.io/kimhyeji324/pen/bGOVBXr)
## 가변 그리드 - 1단계 : [flex-item들을 한줄에 같이 배치해주세요](https://codepen.io/kimhyeji324/pen/abPdJqp?editors=1100) - 정답 : [1단계 정답 열기](https://codepen.io/kimhyeji324/pen/RwErpQy?editors=1100) - 2단계 : [container를 반응형으로 커스텀](https://codepen.io/kimhyeji324/pen/yLGeMKy) - 정답 : [2단계 정답 열기](https://codepen.io/kimhyeji324/pen/mdaVWxK) - 3단계 : [3단계 문제 : 1440px이하로 떨어졌을때 핑크색 flex-item삭제](https://codepen.io/kimhyeji324/pen/MWZKpGw) - 정답 : [3단계 정답 열기](https://codepen.io/kimhyeji324/pen/dywGveZ) - 4단계 : [4단계 문제 : flex-item줄바꿈 셋팅](https://codepen.io/kimhyeji324/pen/mdaVWjj) - 5단계 : [5단계 문제 : flex-item이max-width일때 줄바꿈](https://codepen.io/kimhyeji324/pen/rNoxPZp) - 정답 : [5단계 정답 열기](https://codepen.io/kimhyeji324/pen/abPdXRK) - 6단계 : [6단계 문제 : 줄바꿈 되었을때 나머지 flex-item이 남은 공간을 전부 차지하게 커스텀](https://codepen.io/kimhyeji324/pen/abPdXXj) - 정답 : [6단계 정답 열기](https://codepen.io/kimhyeji324/pen/VwqeggN)
## 반응형 탑바 ```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) - 정답 : [8단계 정답 열기](https://codepen.io/kimhyeji324/pen/poqywda) ![원본이미지](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/bGOpJOQ?editors=1100)
```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/VwqjbRE) - 예시 : [미리보기](https://cdpn.io/pen/debug/xxmOdBY) - 정답 : [12단계 정답 열기](https://codepen.io/kimhyeji324/professor/dywXRLy/5d17f1d4f8e5c9973550d439583fb5f7)
```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/professor/LYMZjpY/67456a70d68669843f9a0c3345ba71bb)
```html 14단계 (목적) 100vh를 사용할 경우 화면 높이를 그대로 상속받기 때문에 생각하지 못한 형태로 나오는것을 확인하고 fixed를 사용해서 탑바를 커스텀 할 경우 움직이기 때문에 위치속성으로 고정 시켜놓아야한다. (조건) 배경색이 빠진 상태로 제출 ``` - 14단계 : [fixed를 유지한 상태로 탑바가 끝난 후 이미지가 나오도록 커스텀](https://codepen.io/kimhyeji324/pen/wvRWeJG/7d14f751c4e1a140d64ade93837d80b4) - 예시 : [미리보기](https://cdpn.io/pen/debug/ExGyXWR/4b70da6b25d7dbdcfd067e5755e0b805) - 정답 : [14단계 정답 열기](https://codepen.io/kimhyeji324/professor/KKbMvVe/0f8d54dc4b70804444c516699a1f0147)
## 가상요소 - 수업 코드펜: [열기](https://codepen.io/kimhyeji324/professor/zYyBdNV/8a246283f67a4edf625f453df8c8d766)
```html 15단계 (조건) 1.absolute사용 x 2.텍스트 정렬은 flex를 사용 3.커스텀은 예시 미리보기 화면과 동일하게 제작 ``` - 15단계 : [배경이미지 위에 background-image텍스트 작성 후 중앙정렬 해주세요](https://codepen.io/kimhyeji324/pen/KKbMqqm/e03d5140d80985b61bd6bedd99ce16c2) - 예시 : [미리보기](https://cdpn.io/pen/debug/dywXRRL/f7d0c03e5a322d6219bcf8d4d4cca321) - 정답 : [15단계 정답 열기](https://codepen.io/kimhyeji324/pen/PoXzKZm/d2369cce71d554e496472d3d496ba654)
## 한글폰트 적용하기 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/professor/XWojQQL/1d8cdcc756cbee909c23a944122d867a)
## 영문폰트 적용하기 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/XWojwdW/1be45bfc7613d409058b49c89a734d92?editors=1100)
## 한글영문폰트 적용하기 - 수업페이지 : [열기](https://codepen.io/kimhyeji324/pen/rNoMgLB/d02c4db0b956492693cca84e60b4e41e)
```html 16단계 ``` - 16단계 : [color속성 라이브러리 생성 후 적용](https://codepen.io/kimhyeji324/pen/MWZjdjd/3df50517b5b3bc14855a54c8ef224acd) - 정답예시 : [열기](https://cdpn.io/pen/debug/YzdGbpQ/e148f8d41638f54e3d9953689b180eb4) - 정답 : [16단계 정답 열기](https://codepen.io/kimhyeji324/pen/YzdGbpQ/e148f8d41638f54e3d9953689b180eb4)
```html 17단계 ``` - 17단계 : [화면이 800px이하로 떨어지면 메뉴바 아이콘이 삭제 되도록 만들어주세요](https://codepen.io/kimhyeji324/pen/gOZwJWe/c0381c295c3a9f283a8d108918b02b6e) - 정답예시 : [열기](https://cdpn.io/pen/debug/ExGgzXP/4441f639895bb0a4eace5dfc843db69d) - 정답 : [17단계 정답 열기](https://codepen.io/kimhyeji324/professor/ExGgzXP/4441f639895bb0a4eace5dfc843db69d)
```html 18단계 [중요메모] 500px로 설정했을때 텍스트가 좀 끼는 디자인이 나온다. 반응형 적용할때 조금씩 적용해보고 적절한 사이즈로 조금씩 조정하면 된다. 아래 사이즈에서는 500px보다는 580px이 조금 더 적절하다. @media screen and (max-width: 580px) -> 적절한 사이즈 ``` - 18단계 : [화면이 500px이하로 떨어지면 1차메뉴 네비바에 텍스트를 13px로 만들어주세요](https://codepen.io/kimhyeji324/pen/QWzKRMY/922eb2ec399188e13f81e2c89da312c6) - 정답예시 : [열기](https://cdpn.io/pen/debug/ExGgzwK/ed4245e7ce1f7fa30ae8fbbc6d6921d5) - 정답 : [18단계 정답 열기](https://codepen.io/kimhyeji324/professor/ExGgzwK/ed4245e7ce1f7fa30ae8fbbc6d6921d5)
```html 19단계 ``` - 19단계 : [화면이 줄었을때 네비가 가운데배치되지 않는 현상을 해결해주세요](https://codepen.io/kimhyeji324/pen/OJrRYZo/40d2426351a56fb61356bd0c292c9a96) - 정답예시 : [열기](https://cdpn.io/pen/debug/bGOwyMO/ec47b60f342c287ac9788b5a230d27b6) - 정답 : [19단계 정답 열기](https://codepen.io/kimhyeji324/professor/bGOwyMO/ec47b60f342c287ac9788b5a230d27b6)
```html 20단계 ``` - 20단계 : [화면이 줄었을때 flex관련 속성을 사용해서 아이콘이 줄바꿈되는 현상을 해결해주세요](https://codepen.io/kimhyeji324/pen/jOXMoKj/1e14336b0fd11d3b0049e02a22a7960d) - 정답 : [20단계 정답 열기](https://codepen.io/kimhyeji324/professor/qBLaGMm/4331b884e89667cbbadef99971780714)
```html 21단계 ``` - 21단계 : [화면이 460px이하로 내려가면 1차메뉴 네비바를 삭제 해주세요.](https://codepen.io/kimhyeji324/pen/KKbgLrP/3139009b9f7eb6a5b1a84538d3bc9f26?editors=1100) - 정답예시 : [열기](https://cdpn.io/pen/debug/dywpEQZ/72433307bcebce5e43be0541506a939c) - 정답 : [21단계 정답 열기](https://codepen.io/kimhyeji324/pen/dywpEQZ/72433307bcebce5e43be0541506a939c)
```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/OJrbOPr/ea51ea620e4973be58197d7460a27228?editors=1100)
```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단계 [중요메모] 커스텀할때 1차, 2차, 모바일사이즈에서 나오는 탑바 클래스가 비슷하기 때문에 코드가 작동하지 않을때는 클래스네임을 제대로 작성했는지 확인 ``` - 24단계 : [flex없이 모바일사이즈에 나오는 네비바를 중앙정렬 해주세요.](https://codepen.io/kimhyeji324/pen/bGOBdRx/a839438f799c42ce4c310eb595f46318) - 정답예시 : [열기](https://cdpn.io/pen/debug/MWZbwvN/d918a6089cac26df1fd38655d7c248d1)
```html 25단계 [조건] 1차 탑바안에 있는 네비바 css는 커스텀X ``` - 25단계 : [모바일사이즈에 나오는 네비바를 반응형으로 만들어주세요.](https://codepen.io/kimhyeji324/pen/jOXVPzR/3ca65389a88df2c1fa8c9b5fc4f60772?editors=1100) - 정답예시 : [열기](https://cdpn.io/pen/debug/poqNJqz/2d308e2a74cb2f4caa8fb5b427fe65f2)
```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)
```html 29단계 ``` - 29단계 : [화면이 460px이하에서 배너 위 모든 텍스트들이 화면안에 들어오도록 만들어주세요.](https://codepen.io/kimhyeji324/pen/jOXVbZr/1ee71e786f39cfc0e4e539480e225493) - 정답예시 : [열기](https://cdpn.io/pen/debug/rNoWOJz/6497e7cc6c9e3bd6f8a8decd55282fa6)
```html 30단계 1.클래스명 : flex-row-section 2.선 두께와 색상도 동일하게 만들어주세요 ``` - 30단계 : [1440*600 사이즈 그리드를 잡아주세요](https://codepen.io/kimhyeji324/pen/mdaOezZ/00821b5cf89f8292b5e5b705b075e496) - 정답예시 : [열기](https://cdpn.io/pen/debug/xxmRwyz/a957a78cec7269f66944f0a00f8ec98e) - 정답 : [30단계 정답 열기](https://codepen.io/kimhyeji324/pen/OJrbyaP/39c085600f5a9393983bfbc2b3ec97b7)
```html 31단계 [조건] - 클래스네임 -> color-back-box color-back-box-$ - flex-grow를 활용해서 레이아웃 커스텀 - M -> 20px, G -> 40px - border-radius: 20px; ``` - 31단계 : [가변그리드 레이아웃을 예시화면과 동일하게 잡아주세요.](https://codepen.io/kimhyeji324/pen/wvRoKLG/eed3dc7efbb0563efbfbdab31d67cbef) - 정답예시 : [열기](https://cdpn.io/pen/debug/dywOYBr/db9d643c215f22f560929f151f746a60) - 정답 : [31단계 정답 열기](https://codepen.io/kimhyeji324/pen/xxmRwoa/93fc60db5f6fdae8d3076c52070a253e)
```html 32단계 ``` - 32단계 : [flex-direction을 활용하여 레이아웃을 구성해주세요.](https://codepen.io/kimhyeji324/pen/ExGNPae/2812513cbc5b7bff9b7e63fbba9a5e9c) - 정답예시 : [열기](https://cdpn.io/pen/debug/OJrbMVN/470ea1cde7c8647e98e1e05c4b7cbc8e) - 정답 : [32단계 정답 열기](https://codepen.io/kimhyeji324/pen/vYvyLOB/7253e2aedfca38b5812cdd8b0b183f5c)
```html 33단계 ``` - 33단계 : [문제예시처럼 사각형을 만든 후 중앙정렬 해주세요.](https://codepen.io/kimhyeji324/pen/oNJYozE/58a22bcf47da9ca3f050dfa7c8c5beae) - 정답예시 : [열기](https://cdpn.io/pen/debug/NWebwRQ/d86a3e75e6c3d3b8b49c9fa2966d2ba0) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/NWebwRQ/d86a3e75e6c3d3b8b49c9fa2966d2ba0) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/mdaOqrz/390441f6484055a4bb83e772d21d74cb?editors=1100)
```html 34단계 ``` - 34단계 : [color-picker창에서 원하는 컬러를 활용해서 예시와 비슷하게 만들어주세요.](https://codepen.io/kimhyeji324/pen/rNojaqq/c0215a931ffa0b36e64b424e2bdfb642) - 정답예시 : [열기](https://cdpn.io/pen/debug/gOZgbjM/85a0edb0e518ee05c438c8222fa52d2c) - 정답 : [35단계 정답 열기](https://codepen.io/kimhyeji324/pen/gOZgbjM/85a0edb0e518ee05c438c8222fa52d2c) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/NWedPEv/e31f97ada522bc3f225049b02e2aefdc)
```html 35단계 ``` - 35단계 : [폰트어썸 아이콘을 활용하여 예시와 비슷하게 만들어주세요.](https://codepen.io/kimhyeji324/pen/KKbawJQ/d134c1f4df80678cf31ba58d064623a3) - 정답예시 : [열기](https://cdpn.io/pen/debug/GRPrgej/d884bfe6119dbb7660291b0a9ba865fe) - 정답 : [35단계 정답 열기](https://codepen.io/kimhyeji324/pen/GRPrgej/d884bfe6119dbb7660291b0a9ba865fe) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/vYvgEPL/97e4db8af562a84d9a2593a03e9ab725)
```html 36단계 ``` - 36단계 : [타이핑 없이 복사 붙여넣기로 나머지 .color-back-box도 예시와 동일하게 만들어주세요.](https://codepen.io/kimhyeji324/pen/OJrWPYp/444dfcb1afccb76b40795b0bbe35ec95?editors=1100) - 정답예시 : [열기](https://cdpn.io/pen/debug/WNLRbBX/a9338c6abe8033929e4c9e21f7445060) - 정답 : [36단계 정답 열기](https://codepen.io/kimhyeji324/pen/WNLRbBX/a9338c6abe8033929e4c9e21f7445060?editors=1100) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/wvRgBbe/a1071cfdbb0d5678f23d1548dca4eadc)
```html 37단계 [조건] .color-back-box당 h2태그는 한개만 사용 해주세요. ``` - 37단계 : [적절한 텍스트 태그를 활용하여 예시이미지와 동일하게 만들어주세요.](https://codepen.io/kimhyeji324/pen/MWZJYMq/113321f73ce33289c48bc33e183be31f) - 정답예시 : [열기](https://cdpn.io/pen/debug/QWzdweQ/62567f15939694748b5e97e1e8917463) - 정답 : [37단계 정답 열기](https://codepen.io/kimhyeji324/pen/QWzdweQ/62567f15939694748b5e97e1e8917463) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/wvRgBVq/85b396334e6d515cdbdd44500f8584f7) ```html h2{WEB2}+p{Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae possimus inventore veniam eum sint in, nam amet repellat consequatur impedit fugiat vitae, atque, aspernatur exercitationem magnam incidunt hic animi aut!}+p{.}+p{Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae possimus inventore veniam eum sint in, nam amet repellat consequatur impedit fugia t vitae, atque, aspernatur exercitationem magnam incidunt hic animi aut!}+p{.}+p{Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae possimus inventore veniam eum sint in, nam amet repellat consequatur impedit fugiat vitae, atque, aspernatur exercitationem magnam incidunt hic animi aut!} ```
```html 38단계 [조건] 1. .text-box안에 텍스트는 Josefin Sans폰트를 사용해주세요. 2. 사이즈 지정이 없다면 커스텀X 3. p태그 커스텀 -> font-weight: 300; line-height: 1.5; font-size: 14px; 4. 양 옆 마진 값 -> 20px*2 ``` - 38단계 : [조건에 맞춰서 예시와 동일하게 만들어주세요.](https://codepen.io/kimhyeji324/pen/eYbgBEa/fb01bb9ae063812aa707d11b9edce54c) - 정답예시 : [열기](https://codepen.io/kimhyeji324/live/QWzdbGx/2bb8247cfe761683971278e53c7641f2) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/NWedbaz/9e3790bda01c2f82aef0343c195c8f16)
```html 39단계 ``` - 39단계 : [타이핑없이 정답예시와 동일하게 만들어주세요.](https://codepen.io/kimhyeji324/pen/wvRgoyj/618be658c53b184e3559c0edea6188a4) - 정답예시 : [열기](https://codepen.io/kimhyeji324/live/RwEKoMg/4629050d127b683b636572f95c33bf8a) - 정답 : [39단계 정답 열기](https://codepen.io/kimhyeji324/pen/RwEKoMg/4629050d127b683b636572f95c33bf8a) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/VwqPmXP/0b2106a0d391b3b31ad7c8fbf3493d8c)
```html 40단계 ``` - 40단계 : [1300px이하 사이즈에서 .color-back-box가 한줄에 하나씩 나오도록 커스텀 해주세요.](https://codepen.io/kimhyeji324/pen/qBLRqyN/7741e63afc07ccabd98985dce38b44df) - 정답예시 : [열기](https://cdpn.io/pen/debug/NWedbMB/7139ea86affdeae61992c498d6136695) - 정답 : [40단계 정답 열기](https://codepen.io/kimhyeji324/pen/NWedbMB/7139ea86affdeae61992c498d6136695?editors=0100) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/mdaROjB/fcc0f3f3297bbe2b6840c9416edfa49b?editors=1100)
```html 41단계 ``` - 41단계 : [.color-back-box가 정답예시 화면과 동일하게 만들어주세요.](https://codepen.io/kimhyeji324/pen/ZEVLBdE/2004a74ab1dbd2acbd0c7bf8e822ba06) - 정답예시 : [열기](https://cdpn.io/pen/debug/OJrWbYw/b8f51a4eb0bd557e31661947d0012b0b) - 정답 : [41단계 정답 열기](https://codepen.io/kimhyeji324/pen/OJrWbYw/b8f51a4eb0bd557e31661947d0012b0b) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/JjwEbQb/214d6ae330dc5088359d4bf88d1348b7)
```html 42단계 ``` - 42단계 : [화면 아래쪽에 스크롤이 생기는 원인을 찾고 @media {1300px}에서 해결해주세요.](https://codepen.io/kimhyeji324/pen/mdaRRbx/979af36638506035b939f380201fd8e4?editors=1100) - 정답예시 : [열기](https://codepen.io/kimhyeji324/full/wvRggwQ/0484d8cdd3f65feb5575456dee9219e5) - 정답 : [42단계 정답 열기](https://codepen.io/kimhyeji324/pen/wvRggwQ/0484d8cdd3f65feb5575456dee9219e5?editors=1100) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/PoXWWYB/12e7949c4c012819d666f8d93aca7321)
```html 43단계 ``` - 43단계 : [flex-direction을 활용하여 정답예시와 동일하게 레이아웃을 구성해주세요.](https://codepen.io/kimhyeji324/pen/LYMxrdN/8c9de6e5a665e17ae06f537a6a365844) - 정답예시 : [열기](https://codepen.io/kimhyeji324/live/abPpKGz/cf75420ce2f806be8cb6da73e9c82aeb) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/bGOgKvM/5435d09c6b1cc1bf6ab0dad9406dee72)
```html 44단계 ``` - 수업 코드펜 : [모바일 팝업 메뉴 만들기](https://codepen.io/kimhyeji324/pen/oNJGpXx/a3228e130e3235c36a6c87f1bc22e818)
```html 45단계 ``` - 수업 코드펜 : [45단계 : 모바일 팝업 메뉴와 여러개 팝업](https://codepen.io/kimhyeji324/pen/ExGbjYg/7c29da40c3609c126df3226bcdf91760?editors=1010)
```html 46단계 ``` - 수업 코드펜 : [46단계 : 반응형 레이아웃 마무리](https://codepen.io/kimhyeji324/pen/gOZXpMB/6c805add0ceb7ed7532a64ecdeb3ca98)
## 마켓컬리 상품리스트 이미지 위에 레이아웃 구성 - 문제 : [absolute없이 예시이미지와 동일하게 제작](https://codepen.io/kimhyeji324/pen/OJrRgKX/5129b9407777cca41af109b19e163e62) - 예시 이미지 : [예시 이미지 열기](https://codepen.io/kimhyeji324/professor/YzdGbpQ/e148f8d41638f54e3d9953689b180eb4)
## position 복습 메모 ```html [position] (속성값 종류) 1.static 2.relative 3.absolute 4.fixed (position 기본값) -> static 1.일반적인 태그 2.위치속성을 사용하여 위치이동이 불가능하다. 3.자바스크립트 라이브러리에서 많이 활용하는 속성값 ㄴ이미 커스텀되어있는 코드를 기본값으로 바꿀때 사용 (absolute와 fixed공통적인 특징) 1.속성값을 적용하게되면 z축으로 나온다. ㄴ부모엘리먼트로 부터 벗어나게된다. 2.위치속성으로 위치이동이 가능하다.(좌표 설정 가능) 3.속성값을 적용하면 width: auto = 0으로 작동한다. 4.위치속성을 적용하기 전까지는 속성값을 적용하기 전 자리에 남아있으려는 특징을 가지고 있다. 5.구조가 복잡할수록 순서가 뒤바뀌거나 겹치기 때문에 display로 레이아웃을 구성할 수 없는 경우에 사용한다. 6.적용하게되면 형제엘리먼트끼리 겹친다. ㄴ겹친 형제들끼리는 순서가 있다. z-index라는 속성으로 순서를 바꿀 수 있다. (z-index) -> static 제외 순서 결정 ㄴ사용할 수 있는 값 : 음수 or 양수 ㄴz-index: n; or z-index: -n; 예시)z-index: 1; or z-index: -1; ㄴ음수 -> 한칸 아래로 ㄴ양수 -> 최상단으로 (absolute와 fixed 차이점) absolute -> 스크롤을 따라다지 않는다. fixed -> 스크롤을 따라다닌다. ㄴ상단에 늘 고정되어있는 탑바 ㄴ따라다니는 팝업 (relative 특징) 1.위치속성을 사용할 수 있다. 2.Z축으로 튀어나오지 않는다. 3.적용된 엘리먼트는 absolute, fixed요소를 가두어 놓을 수 있다. ㄴ부모역할을 할 수 있다. 4.Z축으로 나오지 않지만 Z축 순서에는 영향을 미친다. (위치속성) left, right, top, bottom ㄴ사용할 수 있는 단위 : 0, px, % ㄴ%수치는 부모역할을 하는 엘리먼트 크기에 비례한다. ㄴ시작점을 결정하는 속성 -> 기준은 부모역할을하는 엘리먼트 ㄴ속성값 역할 -> 얼마만큼 움직일것이지 결정하는 역할 (부모역할) 1.이동할 수 있는 공간을 제공해준다. 2.사용할 수 있는 크기 제공 3.absolute나 fixed 가두기 4.relative, absolute, fixed는 부모역할을 할 수 있다. 5.상위엘리먼트에 relative, absolute, fixed가 없으면 부모역할을 body가 하게된다. (absolute와 fixed 중앙정렬) 1.calc ㄴ단점: 너비나 높이 수치를 바꾸면 calc수치값도 바꿔줘야한다. ㄴ장점: 개념이 쉽다. 2.transform ㄴ장점: 너비나 높이 수치를 바꾸어도 translate수치값을 바꾸지 않아도 된다. ㄴ단점: 개념(원리)이 어렵다. (calc) -> 속성값에서 사칙연산을 사용할 수 있는 속성값 ㄴ사용방법 -> 속성: calc(수치값 부호 수치값); ㄴ사용할 수 있는 부호 -> 마이너스(-), 플러스(+), 곱하기(*), 나누기(/), 괄호() ㄴ주의사항 -> 마이너스(-)와 플러스(+)를 사용할때 양 옆에 띄어쓰기를 해줘야한다. (transform) -> 속성이 적용된 엘리먼트 변형 1.rotate -> 돌리기 2.scale -> 크기 키우기 3.translate -> 위치 이동 - transform: translateX(가로축이동값); - transform: translateY(세로축이동값); - transform: translate(가로축이동값, 세로축이동값); ```
## transform속성 ```html transform [Rotate] -> 각도 변형 [Scale] -> 크기 변형 [Translate] -> 위치 강제 이동 TranslateY : 세로축에서 강제이동 -> TranslateY(); TranslateX : 가로축에서 강제이동 -> TranslateX(); Translate : 세로가로축에서 강제이동 -> Translate(X,Y); ```

게시글 상세