$$config title: 화목금 19시 웹1 keywords: - 개강 23.07.13(목) - 종강 $$
강사정보 **김혜지**

# 만족도 조사 [st.koreaedugroup.com/2019/](http://st.koreaedugroup.com/2019/)
# 수업영상 및 수업페이지 타인 공유 금지 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다.
수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다.
녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
# 유용한 사이트 - 언스플래쉬 : [사이트 이동](https://unsplash.com/ko)
# 수업 ## 문자부호 | 마침표 | 반점 | 콜론 | 세미콜론 | 큰따옴표 | 작은따옴표 | 빗금, 슬래시 | 역슬래시 | 소괄호 | 중괄호 | 대괄호 | 물결 | 별표 | 대시 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | . | , | : | ; | " | ' | / | \ | () | {} | [] | ~ | * | - |
```html 화목금 19시 웹1 웹 학과 강사 김혜지 [교재] *수업내에서는 교재를 사용하지 않아요 *수업이 종료되기 전까지 웹1에서는 1권을 전부 읽어셔야 합니다. 2권은 웹2가 종료되기 전까지 전부 읽으셔야 합니다. *수업에서는 웹브라우저에서 사용하는 블로그로 수업을 진행합니다. *네이버 밴드를 통해 일정을 공유하고, 숙제를 내어드리고, 영상을 요청하시면 됩니다. [영상] *몸이 아파요, 예비군 가야해요, 특정한 일정이 있어요 수업 영상을 제공 해드립니다. ㄴ영상은 유포하시거나 공유하시면 저작권에 걸립니다. ㄴ제공 해드리는 수업페이지도 유포하시거나 공유하시면 안됩니다. [출결] *수업시작하면 바로 출석체크 합니다. ㄴ지각하시면 초반에 놓치기 때문에 지각하시면 안됩니다. [수업] *키보드 내려치기, 엔터 누를때 부슬 것 처럼 내려치기, 마우스 던지기, 화면 내려치기, 욕설 대화, 핸드폰을 던지시면 안됩니다. [블로그] *메모장 용도 *있으신 분들은 티스토리 가입 따로 안해주셔도 됩니다. [수업페이지] slog.gg/p/12603 [쉬는시간] 19:50 - 20:01 20:50 - 21:01 ```
## 01강 : Tstory 가입 - [티스토리 이동](https://www.tistory.com/) - 카카오계정 가입
## 02강 : codepen가입 - CodePen : [이동](https://codepen.io) - GitHub : [이동](https://github.com/) - 깃허브 가입방법 : [블로그 이동](https://slog.gg/p/10744)
## 03강 : 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/체크
## 04강 : 단축키 연습 - 수업 코드펜 : [단축키 연습](https://codepen.io/kimhyeji324/pen/OJBZxPz) - 관련 블로그 : [단축키 모음 블로그 이동](https://slog.gg/p/10745) ```html [작업 코드펜 열기] 1. 새 탭 열기 2. 주소창 선택(F6) 3. codepen.io/pen 주소창에 검색 ``` ``` [탭 단축키] 새 탭 열기 단축키 : ctrl + T 새 탭 닫기 단축키 : ctrl + W ```
## 05강 : 주석 - 수업코드펜 : [열기](https://codepen.io/kimhyeji324/pen/MWzrNEJ)
## 06강 : div - 수업코드펜 : [열기](https://codepen.io/kimhyeji324/pen/poQpMaE)
## 07강 : css작성방법 - 수업코드펜 : [열기](https://codepen.io/kimhyeji324/pen/yLQpmxM)
## 08강 : DOCTYPE ```html 1. HTML은 문서마다 DOCTYPE을 선언 해야한다. 2. codepen에는 DOCTYPE이 생략 되어있다. 3. 상위요소가 없는 codepen 태그는 부모가 body엘리먼트이다. ``` ![원본이미지](https://i.postimg.cc/7YLrWfKS/image.png)
## 09강 : body 너비높이 확인하기 - 수업코드펜 : [열기](https://codepen.io/kimhyeji324/pen/KKrQPpq?editors=1100) ```html [태그를 눈으로 확인하기 위해 필요한 3가지 조건] 1.넓이 2.높이 3.배경색 ``` ```html body 크기 = 화면 너비, 높이 ``` ```css [컬러값으로 들어올 수 있는 속성값] (색상이름) red, blue.. (RGB) 1.rgb(red,green,blue) 2.rgba(red,green,blue,opacity) ㄴopacity 0 ~ 1 0 -> 0% 0.1 -> 10% 0.5 -> 50% 1 -> 100% (HAX) #000000, #ffffff ㄴ6자리가 같을 경우 3자리로 생략할 수 있다. ㄴ#000000 -> #000 ㄴ#ffffff -> #fff ```
## 기본값 ```html 기본값은 속성값을 커스텀하지 않았을때만 유효한다. ```
## 너비 높이가 자동일때 작동되는 원리 ```html [auto 의미] 자동 ``` ```html [100% 의미] 상위요소 크기만큼 크기를 가진다. ``` ```html [0 의미] 하위요소 크기 만큼 크기를 가진다. ``` ```html [auto = 100% or 0] *auto안에 100%가 들어갈지 0이 들어갈지 결정하는 속성은 display이다. 100% → block 0 → inline, inline-block ``` ```html [width: 0] 너비가 없다. ``` ```html [auto = 0] 하위요소만큼 크기를 가진다. ```
## 10강 : 너비 속성 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/bGQMgWr)
## 11강 : 높이 속성 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/YzRLZdL?editors=1100)
## 12강 : block - 수업 코드펜 : [개념](https://codepen.io/kimhyeji324/pen/BaGxRpB?editors=1100) - 수업 코드펜 : [block특징](https://codepen.io/kimhyeji324/pen/BaGxRpB?editors=1100) ```html 1.block요소 대표 태그 div 2.width: auto = 100% 3.width가 아주아주 작아도 한줄에 하나만 나온다. 4. a, span, img, ::before, ::after 를 제외한 모든 태그는 display: block이다. (button 예외) ```
## 13강 : inline - 수업 코드펜 : [개념](https://codepen.io/kimhyeji324/pen/Poxembr) - 수업 코드펜 : [inline특징](https://codepen.io/kimhyeji324/pen/bGQMWgN) ```html 1.inline대표 태그 span 2.width, height 를 설정할 수 없다. 3.width: auto = 0 4.height: auto = 0 - auto = 0 → 하위요소만큼 크기를 가진다. 5.a, span, img, ::before, ::after ```
## 14강 : inline-block - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/WNYyEPm?editors=1100) ```html [inline-block은 요소를 한줄에 나란히 정렬하기 위해 나온 속성값이다.] 1.inline-block은 inline요소 장점과 block장점을 합쳐놓은 것이라고 생각하면 좋다. 2. inline-block끼리는 알 수 없는 여백이 생긴다.(좌우, 하단) - 여백값은 측정할 수 없다. 3. width: auto = 0 4. height: auto = 0 inline요소 장점 : 한줄에 요소가 나란히 나오는 장점 block장점 : width, height 값을 설정할 수 있는 장점 ```
## inline과 block ```html [기본값은 속성값을 커스텀하지 않았을때만 유효한다.] div -> width: auto = 100% -> 상위엘리먼트 너비만큼 100%상속 -> display: block span -> width: auto = 0 -> 하위엘리먼트 너비만큼 너비를 가진다. -> display: inline 모든태그 -> height: auto = 0 -> 하위엘리먼트 높이만큼 높이를 가진다. width: 100% -> 상위엘리먼트 너비만큼 100%상속 width: auto = 0 -> 하위엘리먼트 너비만큼 너비를 가진다. width: 0 -> 너비가 없다. height: auto = 0 -> 하위엘리먼트 높이만큼 높이를 가진다. height: 0 -> 하위엘리먼트 높이만큼 높이를 가진다. 레이아웃은 한줄에 같이 나오는 레이아웃도 있고, 한줄에 하나씩 배치되는 레이아웃도 있기 때문에 block과 inline처럼 나누어져 있는것이다. ```
## block, inline, inline-block 정리 ```html body [너비=화면너비, 높이=화면높이] [block] *한줄에 하나씩 배치 width: auto = 100% -> 상위엘리먼트 너비100%상속 height: auto = 0 -> 하위엘리먼트 높이만큼 높이상속 [inline] (너비.높이 커스텀X) *한줄에 같이 배치 width: auto = 0 -> 하위엘리먼트 너비만큼 너비상속 height: auto = 0 -> 하위엘리먼트 높이만큼 높이상속 [inline-block] (너비.높이 커스텀O) *한줄에 같이 배치 width: auto = 0 -> 하위엘리먼트 너비만큼 너비상속 height: auto = 0 -> 하위엘리먼트 높이만큼 높이상속 ------------------------------------------------------------- [block] inline태그를 제외한 모든태그 [inline태그] a, span, img, ::after, ::before button ``` ## 15강: 상위엘리먼트와 하위엘리먼트를 부르는 명칭 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/eYQKEXN?editors=1000)
## 16강: 선택자 활용해보기 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/KKreXpK?editors=1100)
## 17강: 부모엘리먼트 > 자식엘리먼트 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/yLQEzge)
## 18강: 부모엘리먼트 = 자식엘리먼트 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/jOQKGab)
## 19강: 부모엘리먼트 < 자식엘리먼트 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/zYMaEVR?editors=1100)
## 20강: class 선택자 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/wvQXPJz?editors=1100) - 추가 자료 : [열기](https://cdpn.io/pen/debug/GRdKRrd?authentication_hash=ZorBapjDqqdM)
## 21강: 줄바꿈되는 inline-block - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/KKreONx?editors=1100) ```html [inline-block] -> 여백 100px*3 + 알 수 없는 여백값 = ? 2개 이상일때 줄바꿈될 수 있는 조건이 만들어진다. inline-block요소 여러개 총 너비 > 부모엘리먼트 -> 줄바꿈 inline-block은 브라우저에서 텍스트 취급 당하기 때문에 font-size을 없애버려서 0으로 만들어주면 자간.행간도 전부 사라지기 때문에 여백이 사라지게된다.(정확한 정보x, 이해를 위한 예시일 뿐입니다.) ```
## 22강: 상속되는 텍스트 속성 - 수업 코드펜: [열기](https://codepen.io/kimhyeji324/pen/bGQKXMj)
## inline-block 여백을 제거하는 이유 ```html ▼inline과 inline-block은 브라우저에서 텍스트 취급을 당하기 때문에 기본적으로 여백을 가지고있다. 우리는 이것들은 없애놓고 레이아웃을 구성해야한다. 이유는 저 여백값은 측정할 수 없기 때문이다. ```
## 23강: 젠코딩 - 수업 코드펜: [열기](https://codepen.io/kimhyeji324/pen/OJaEKaZ?editors=1000)
## 24강: 힘이 강한 css - 수업 코드펜: [열기](https://codepen.io/kimhyeji324/pen/xxQJKyp)
## 25강: 앵커태그, 하이퍼링크 - 수업 코드펜: [열기](https://codepen.io/kimhyeji324/pen/mdQjbVK)
## 26강 : 너비 높이만큼 클릭되는 a태그 - 수업 코드펜: [열기](https://codepen.io/kimhyeji324/pen/zYMLOmd?editors=1100)
## 27강 : padding과 margin - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/abQRjvJ?editors=1100)
## 정렬 특징 ![원본이미지](https://i.postimg.cc/nh5FDhVg/image.png) ```html 뚱뚱한 고양이가 박스에 딱 맞으면 왼쪽 오른쪽으로 움직일 수 없다. 박스보다 작은 홀쭉한 고양이가 박스에 들어가있으면 왼쪽 오른쪽으로 움직일 수 있다. ```
## 28강 : 브라우저에서 도형취급 당하는 요소(가로 정렬) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/qBQJyGy?editors=1100)
## 29강 : 브라우저에서 텍스트취급 당하는 요소(가로정렬) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/oNyXyPb?editors=1100) - 추가자료 : [정답](https://codepen.io/kimhyeji324/pen/jOKPKvp?editors=1100) - 추가자료 : [풀이](https://codepen.io/kimhyeji324/pen/MWXwBgd?editors=1100)
## 가로 정렬 총 정리 ```html [정렬조건] 부모요소보다 자식요소가 1px이라도 작아야한다. 상위엘리먼트와 하위엘리먼트 크기가 같으면 정렬할 수 없다. ``` ```html [정렬특징] 텍스트요소를 정렬하는 속성은 도형요소를 정렬할 수 없다. 도형요소를 정렬하는 속성은 텍스트요소를 정렬할 수 없다. ``` ```css [가로 정렬] [가로정렬은 두가지로 나누어져있다.] 1.block 정렬 2.텍스트 정렬 [브라우저에서 텍스트취급을 당하는 3가지] 1.텍스트 2.inline요소 3.inlune-block요소 [block 정렬 태그] *움직이고 싶은 엘리먼트에 직접 코드 적용 1.margin-left: auto; -> 우측정렬 2.margin-right: auto; -> 좌측정렬 3.margin: 0 auto; -> 중앙정렬 [text 정렬 태그] *움직이고 싶은 엘리먼트를 감싸고있는 엘리먼트에 적용 text-align: left; -> 좌측정렬 text-align: center; -> 중앙정렬 text-align: right; -> 우측정렬 ```
## 30강 : 중앙정렬 문제 - 수업 코드펜 : [문제](https://codepen.io/kimhyeji324/pen/oNyXyPb?editors=1100) - 추가자료 : [정답](https://codepen.io/kimhyeji324/pen/jOKPKvp?editors=1100) - 추가자료 : [풀이](https://codepen.io/kimhyeji324/pen/MWXwBgd?editors=1100)
## 1080그리드(4개 레이아웃 기준) ```html [계산법] 그리드 전체 사이즈 - 마진값 - 거터값 / 4 1080px - 20px - 60px / 4 = 250px ``` ![원본이미지](https://i.postimg.cc/28bP1zzt/image-1.jpg)
## 31강 : 마켓컬리 상단바 제작 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/wvQRQdE?editors=1100)
## 32강 : 마켓컬리 상품리스트 제작 - 수업 코드펜 : [연습용 코드](https://codepen.io/kimhyeji324/pen/NWEeEjE?editors=1100) - 수업 코드펜 : [정확한 html 구조](https://codepen.io/kimhyeji324/pen/RwqvERJ?editors=1100)
## 33강 : img - 수업 코드펜 : [img태그](https://codepen.io/kimhyeji324/pen/PoxXXwV) - 수업 코드펜 : [비율이 망가지는 이미지](https://codepen.io/kimhyeji324/pen/bGQOOwb)
## 34강 : span용도 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/wvQNQLQ)
## flex메모 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/LYXMQvG?editors=1010) ```html 아래 메모는 수업 중 추가될 예정입니다. ``` ```html [float과 flex] float - 장점 : 개념이 적다. - 단점 : 코드 구현이 힘들다. flex - 장점 : 코드 구현이 쉽다. - 단점 : 개념이 엄청나게 많다. 조금 복잡하다. ``` ```html [flex-container] 1.flex-item을 관리하는 역할 2.display: flex를 적용하면 자식엘리먼트만 flex-item이 된다. 후손엘리먼트에는 전혀 영향가지 않는다. ㄴ(flex-item인 동시에 flex-container역할도 할 수 있다.) 3.브라우저에서 도형취급 당하기 때문에 가로중앙정렬은 margin-left: auto; margin-right: auto;를 사용해서 정렬한다. 4.움직이거나 정렬하거나 줄바꿈하는 명령은 주체인 flex-container가 담당한다. ``` ```html [flex-item] 1.flex-container크기에 맞춰서 유연하게 줄어든다. ㄴflex-shrink: 1;라는 코드가 기본적으로 들어가있다.(flex-item을 유연하게 만드는 코드) 2.정렬하는 속성은 flex-container에 사용한다. ㄴflex-wrap, align-items, justify-content, flex-direction 3.너비에 관련된 커스텀 속성은 flex-item에 사용한다. ㄴflex-grow, flex-basis, flex-shrink 4.text-align으로 정렬할 수 없다. ㄴ브라우저에서 flex-item취급 당한다. 5.flex-item이 height: auto일때 a.flex-container높이를 상속받는다.(height: auto = 100%) b.align-items로 높이가 최소화된다.(height: auto = 0) ㄴheight: auto = 0 -> 하위요소크기만큼 크기를 가진다. ``` ```html [flex-item 세로정렬] *flex는 생략가능 align-items: flex-start; align-items: center; align-items: flex-end; ``` ``` [flex-item 가로정렬] *flex는 생략가능 *left, right 사용가능 justify-content: flex-strat; justify-content: center; justify-content: flex-end; ``` ```html [flex-item이 높이가 자동일때] 1.상위 엘리먼트 높이를 상속받는다.(align-items를 사용하지 않았을때) -> height: auto -> 100% 2.align-items를 사용할 경우 하위요소 크기만큼 유연하게 줄어든다. -> height: auto -> 0 3.행간이나 여백(padding, margin) 등... 다른 요소가 flex-item에 적용되어 있을경우그 속성은 없어지지 않는다. ``` ```html [flex-item형제들이끼리 높이를 공유하는 원리] 1.flex-itme-2 높이를 가진다. ㄴ 150 2.flex-container 높이가 auto일때 flex-itme-2만큼 높이를 가진다. 3.flex-container가 flex-itme-2만큼 가진 높이를 flex-item-1이 다시 상속받는다. ``` ```html [flex-direction] 기본값(row) : 한줄에 같이 배치 - justify-content: 가로정렬 - align-items: 세로정렬 - flex-grow: 가로작동(너비) column : 한줄에 하나씩 배치 - justify-content: 세로정렬 - align-items: 가로정렬 - flex-grow: 세로작동(높이) ``` ```html [flex 줄바꿈] - 유연하게 줄어드는 속성이 기본값으로 들어있다.(flex-shrink: 0) - 유연하게 줄어드는 속성을 풀어주게되면 줄바꿈 되지 않고 부모엘리먼트를 벗어나게된다. (flex-wrap: nowrap 기본값) ↓ 줄바꿈 된다고 명령해주면 줄바꿈 된다.(flex-wrap) ↓ flex-item이 줄바꿈 되려면 flex-container너비를 100%만큼 가지고 있어야 줄바꿈 된다. ```
## 35강: flex 미리보기 - 개념 : [웹2 display: flex 미리보기](https://kimhyeji324.tistory.com/244)
## 36강 : flex와 inline-block - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/PoxVVNq?editors=1100)
## 39강 : flex와 inline-block 차이점 - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/PoxVVNq?editors=1100)
## 40강 : flex-item 세로정렬 - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/BaGMMzj)
## 41강 : flex-container높이에 영향받는 flex-item - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/JjexxvV)
## 42강 : flex-item형제들끼리 공유하는 높이 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/yLQZZwE?editors=1100) ```html [flex-item형제들이끼리 높이를 공유하는 원리] 1.flex-itme-2 높이를 가진다. ㄴ 150 2.flex-container 높이가 auto일때 flex-itme-2만큼 높이를 가진다. 3.flex-container가 flex-itme-2만큼 가진 높이를 flex-item-1이 다시 상속받는다. ```
## 43강 : flex-grow - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/wvQOoJG) ```html [flex-grow] 1.flex-container에 너비를 사용하는 속성이다. 2.하위요소 크기에 따라 비율이 달라진다. ㄴflex-basis: 0;을 함께 사용하면 하위요소크기에 영향받지않고 사용이 가능하다. ㄴwidth: 0; = flex-basis: 0; 역할이 같지만 반응형을 구현했을때 문제점이 많기 때문에 조심해서 사용하자. 3.flex-container에 남은 px을 사용하기 때문에 padding을 사용하거나 flex-item한테 margin을 사용하면 그 여백을 제외하고 너비를 나눠가진다. 4.flex-grow 속성값으로는 1 ~ n까지 사용 가능하다. 5.flex-grow 비율 계산법 ㄴflex-container너비 / flex-grow속성 총 값 -> flex-grow에 적용된 수치에 따라서 값을 나눠가진다. ``` ```html [속성값은 비율이라고 생각하자.] ``` ```html

``` ```css .flex-container > .flex-item-1 { background-color: red; flex-grow: 1; } .flex-container > .flex-item-2 { background-color: blue; flex-grow: 2; } .flex-container > .flex-item-3 { background-color: gray; flex-grow: 1; } ``` ```html ㄴ비율 -> 1 : 2 : 1 ㄴ계산방법 -> .flex-container 남은 px / flex-grow 속성값 총 값 ``` ```css 상단 예시 -> 300px / 4 -> 75px .flex-container > .flex-item-1 { flex-grow: 1; -> 75px } .flex-container > .flex-item-2 { flex-grow: 2; -> 75px + 75px } .flex-container > .flex-item-3 { flex-grow: 3; -> 75px } ```
## 44강 : 하위요소크기에 따라 달라지는 flex-grow(flex-basis) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/BaGbQZj) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/BaGbQZj)
## 45강 : flex개구리 - 관련사이트 : [flex개구리 사이트 이동하기](https://flexboxfroggy.com/#ko)
## 46강 : vscode ```html [vscode 설치] 모든 체크박스 체크 후 설치 (미체크시 폴더에서 code로 열기가 안됨) ```
```html [테마설정] 파일 - 기본설정 - 테마 - 색 테마 - monokai 흐릿한 ```
```html [한글판 설치] 1.확장아이콘 클릭 2.상단 검색창에 Korean Language Pack 설치 3.오른쪽하단 언어 바꾸기 버튼 클릭 ``` ![원본이미지](https://i.postimg.cc/vZK5p4bd/image.png) ```html [브라우저 설정] 검색창에 기본 앱 검색(띄어쓰기 꼭 하기) ↓ 웹 브라우저 설정 ↓ 크롬으로 변경 ``` ```html [HTML5 DOCTYPE] - VSCODE에서 선언하기 : ! + Tab - 언어설정 : lang="en" - 한글 : ko - title : ![원본이미지](https://i.postimg.cc/fbkfQ5DN/Group-17.jpg)
``` ```html [코딩 전] 1.html파일 생성 - 독타입 선언 - html파일과 css파일 연결 2.css파일 생성 - body{background-color: green;} 3.폴더에서 index.html파일 더블클릭 파일이 제대로 연결 되었는지 확인을 위해 배경색이 제대로 나오는지 확인 필수 ```
## 47강 : vscode 기본셋팅 - 블로그 : [열기](https://slog.gg/p/10232)
## 48강 : vscode 코드 정리 확장 프로그램 ### 코드정리 - 텍스트 복사하기 : [열기](https://codepen.io/khjsbs324/pen/gOzLgJq?editors=1000) - 단축키 : Shift+Alt+F - 블로그 : [Window](https://slog.gg/p/10234)
## 49강 : 삼성디자인 탑바 - svg코드 : [열기](https://codepen.io/kimhyeji324/pen/dyQEBWE?editors=1100) - 1단계 : [삼성디자인 탑바 left-box](https://codepen.io/kimhyeji324/pen/MWzRLLv) - 2단계 : [삼성디자인 탑바 right-box까지 마무리](https://codepen.io/kimhyeji324/pen/mdQYZWd)
## position 메모 ```html [position] static(기본값) ㄴ일반적인 태그 ㄴ★자바스크립트 라이브러리를 사용할때 유용하다. ㄴ위치속성을 사용할 수 없다. (위치속성) -> 0, px, % left, right, top, bottom ㄴ시작점을 결정하고, 얼마만큼 움직일 것인지 결정하는 속성이다. ㄴ시작점과 수치는 전부 부모역할을하는 엘리먼트한테 제공받는다. (그 외 속성값) -> 위치속성을 사용해서 원하는 구역에 배치할 수 있다. (부모역할) 1.움직일 수 있는 공간을 제공한다.(X와 Y좌표 제공) 2.크기를 제공한다. 3.absolute나 fixed를 가둘 수 있다. 4.absolute나 fixed도 부모역할을 할 수 있다. (absolute와 fixed에 공통적인 특징) 1.속성값을 적용하게되면 부모엘리먼트를 벗어난다. 2.relative를 설정하지 않는 한 부모역할을 body가 하게된다. 3.적용했을때 위치속성을 사용하지않는 이상, 속성값이 적용되기 전 자리에 남아있으려는 특징이 있다. 4.display로 구성할 수 있는 레이아웃은 display로 구성하고, 정말 꼭 필요한 상황에서만 사용해야한다. absolute -> z축으로 튀어나온다. ㄴ스크롤을 따라다니지 않는다. fixed -> z축으로 튀어나온다. ㄴ스크롤을 따라다닌다.(고정되어있는 탑바) relative -> 적용된 상위엘리먼트는 absolute나 fixed에 부모역할을 하게된다. ㄴ상위엘리먼트에 relative가 겹겹이 쌓여있는 구조에서는 absolute나 fixed와 가장 가까운 상위엘리먼트가 부모역할을 하게된다. ```
## 50강 : absolute - 수업 코드펜 : [수업 미리보기](https://codepen.io/kimhyeji324/pen/abQrgpa)
## 51강 : 부모엘리먼트를 벗어나는 absolute - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/wvRwZbq)
## 52강 : 부모를 지정하는 relative - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/KKbPLdB?editors=1100)
## 53강 : 위치속성에 %사용 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/RwEbmro?editors=1100)
## 54강 : 겹겹이 쌓여있는 relative - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/PoXYvXe?editors=0100)
## 55강 : absolute 중앙정렬 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/yLGBdNL?editors=1100) ```html 1.조금 불편한 방식 -> calc (calc) ㄴ속성값에서 사칙연산을 사용할 수 있는 속성값 ㄴ작성 방법 -> 속성: calc(사칙연산); ㄴ주의사항 -> 마이너스(-)나 플러스(+)를 사용할때는 부호 양 옆으로 띄어쓰기가 있어야한다. ㄴwidth: calc(100% - 20px); ``` ```html 2.정석 방식 -> transform:translate(); (transform) -> 변형 1.Rotate 돌리기 2.Scale 크기조절 3.Translate 위치 강제 이동 ㄴ작성 방법 translateY(); -> 세로 축 이동 translateX(); -> 가로 축 이동 translate(가로, 세로); -> 세로가로 이동 ```
## 56강 : 형제들끼리 겹치는 absolute와 fixed - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/qBLBmJN?editors=1100)
## 57강 : z-index - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/ZEVEybY?editors=1100)
## 58강 : width: auto = 0이되는 absolute - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/PoXojzd?editors=1100)
## 59강 : 2차 메뉴 원리 - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/RwEwgjB?editors=1100)
## 60강 : 2차메뉴 원리 정답 버전 - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/NWePmVR?editors=1100)
## 61강 : display: none과 opacity 차이점 - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/poqvBmw)
## 62강 : 2차메뉴 원리 틀린 버전 - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/xxmbNbQ?editors=1100)
## 63강 : li마다 나오는 2차메뉴 - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/oNJgRgO?editors=1100)
## nav태그에 마우스를 올리면 나오는 2차 메뉴 단계별 제작 ```html [1단계] ``` - 1단계 : [HTML에 menu-2-section을 적절한곳에 배치](https://codepen.io/kimhyeji324/pen/XWobxOO?editors=1000) - 문제예시 : [Debug Mode 미리보기](https://cdpn.io/pen/debug/rNoVqPo) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/rNoVqPo?editors=1000)
```html [2단계] ``` ```html [문제조건] : 위치조정X ``` - 2단계 : [menu-2-section을 화면 너비 100% 높이 300px로 커스텀](https://codepen.io/kimhyeji324/pen/GRPJYVr) - 문제예시 : [Debug Mode 미리보기](https://cdpn.io/pen/debug/JjwdePP) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/JjwdePP)
```html [3단계] ``` ```html [문제조건] : 위치조정X ``` - 3단계 : [menu-2-section이 탑바 왼쪽과 하단에 붙어있도록 커스텀](https://codepen.io/kimhyeji324/pen/VwqLVYa) - 문제예시 : [Debug Mode 미리보기](https://cdpn.io/pen/debug/zYyGMxQ) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/zYyGMxQ?editors=1100)
```html [4단계] ``` ```html [문제조건] : 그리드 잡기 ``` - 4단계 : [4단계 문제 : 2차메뉴는 1440px안에 요소가 배치, 중앙정렬](https://codepen.io/kimhyeji324/pen/MWZwzwz) - 문제예시 : [Debug Mode 미리보기](https://cdpn.io/pen/debug/rNoVQVb) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/rNoVQVb?editors=1100)
```html [5단계] ``` ```html [문제조건] : HTML구조 잡기 - html적절한 곳에 네비바 생성 - 2차메뉴 안에 네비바는 초록색 선이 나올 수 있도록 만들어주세요 ``` - 5단계 : [5단계 문제 : 2차메뉴안에 nav바는 왼쪽에 280px에 여백을 두고 시작](https://codepen.io/kimhyeji324/pen/wvRaQMp?editors=1100) - 문제예시 : [Debug Mode 미리보기](https://cdpn.io/pen/debug/LYMVXZG) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/LYMVXZG?editors=1100)
```html [6단계] ``` ```html [문제조건] : 만들어진 네비바 정렬 ``` - 6단계 : [ul태그를 한줄에 같이 배치 후 140px을 가지도록 커스텀](https://codepen.io/kimhyeji324/pen/WNLvYGy?editors=0100) - 문제예시 : [Debug Mode 미리보기](https://cdpn.io/pen/debug/ZEVGmpP) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/ZEVGmpP?editors=1000)
```html [7단계] ``` ```html - li한테는 텍스트속성을 사용할 수 없습니다 - html구조는 추가할 수 없습니다. - 텍스트를 기준으로 상하에 7px씩 여백이 생기도록 만들어주세요. ``` - 7단계 : [2차메뉴 안에 있는 텍스트 중앙정렬](https://codepen.io/kimhyeji324/pen/wvRaQoy?editors=1100) - 문제예시 : [Debug Mode 미리보기](https://cdpn.io/pen/debug/mdaJQRw) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/mdaJQRw?editors=1100)
```html [8단계] ``` - 8단계 : [8단계 문제 : 1차메뉴 네비바와 2차메뉴 네비바를 동일한 위치로 커스텀](https://codepen.io/kimhyeji324/pen/WNLvYRK) - 문제예시 : [Debug Mode 미리보기](https://cdpn.io/pen/debug/RwEPqpV) - 정답 : [열기](https://codepen.io/kimhyeji324/pen/RwEPqpV?editors=1100)
```html [9단계] ``` - 9단계 : [9단계 문제: 마우스를 올리면 2차메뉴가 나오도록 커스텀](https://codepen.io/kimhyeji324/pen/eYbNQva) - 문제예시 : [Debug Mode 미리보기](https://cdpn.io/pen/debug/abPOQeB) - 정답 : [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/abPvLaP?editors=1100) - 수업 코드펜 : [원하는 사이즈를 가진 반응형 이미지](https://codepen.io/kimhyeji324/pen/poqjWXL) - 수업 코드펜 : [max와 min 차이점](https://codepen.io/kimhyeji324/pen/KKbdXjQ?editors=1100) - 수업 코드펜 : [width: auto = 100%일때만 작동하는 max-width](https://codepen.io/kimhyeji324/pen/qBLOVWe?editors=1100) - 수업 코드펜 : [높이가 고정되어있는 반응형 이미지](https://codepen.io/kimhyeji324/pen/LYMNPaM) - 수업 코드펜 : [미디어쿼리](https://codepen.io/kimhyeji324/pen/ZEVWEzv?editors=0110) - 미디어쿼리 문제 : [미디어쿼리가 정상작동 할 수 있도록 미디어쿼리 코드를 바꾸어주세요](https://codepen.io/kimhyeji324/pen/XWodWWY?editors=1100) - 미디어쿼리 정답 : [정답 열기](https://codepen.io/kimhyeji324/pen/KKbzKay)
## 가변 그리드 - 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단계 : [1440px이하로 떨어졌을때 핑크색 flex-item삭제](https://codepen.io/kimhyeji324/pen/MWZKpGw) - 정답 : [3단계 정답 열기](https://codepen.io/kimhyeji324/pen/dywGveZ) - 4단계 : [flex-item줄바꿈 셋팅](https://codepen.io/kimhyeji324/pen/mdaVWjj) - 5단계 : [flex-item이max-width일때 줄바꿈](https://codepen.io/kimhyeji324/pen/rNoxPZp) - 정답 : [5단계 정답 열기](https://codepen.io/kimhyeji324/pen/abPdXRK) - 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/professor/mdaEyWm) - 정답 : [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/professor/GRPqgdO) ![원본이미지](https://i.postimg.cc/pVz7ZytJ/image.png) ```html 7단계 ``` - 7단계 : [li태그를 한줄에 같이 배치](https://codepen.io/kimhyeji324/pen/RwEaggP) - 정답 : [7단계 정답](https://codepen.io/kimhyeji324/pen/WNLxbYL) ![원본이미지](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/professor/PoXzwVe) ![원본이미지](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/professor/rNoLagV)
```html 10단계 ``` - 10단계 : [아이콘 색상을 배경색과 어울리게 각각 커스텀](https://codepen.io/kimhyeji324/pen/dywMLzO) - 정답 : [10단계 정답](https://codepen.io/kimhyeji324/professor/BavzNzM) - 각각 커스텀 올려놓기 ![원본이미지](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/OJrXQNB/a702335f4f89778121f6b16db9b2704b)
```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)
```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단계 ``` - 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)
```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 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://cdpn.io/pen/debug/QWzdbGx/2bb8247cfe761683971278e53c7641f2) - 정답 : [38단계 정답 열기](https://codepen.io/kimhyeji324/pen/QWzdbGx/2bb8247cfe761683971278e53c7641f2?editors=1100) - 문제풀이 : [열기](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) - 정답 : [43단계 정답 열기](https://codepen.io/kimhyeji324/pen/abPpKGz/cf75420ce2f806be8cb6da73e9c82aeb?editors=1100) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/bGOgKvM/5435d09c6b1cc1bf6ab0dad9406dee72)
```html 44단계 ``` - 44단계 : [flex-direction을 활용하여 정답예시와 동일하게 레이아웃을 구성해주세요.](https://codepen.io/kimhyeji324/pen/LYMxrdN/8c9de6e5a665e17ae06f537a6a365844) - 정답예시 : [열기](https://codepen.io/kimhyeji324/live/abPpKGz/cf75420ce2f806be8cb6da73e9c82aeb) - 정답 : [44단계 정답 열기](https://codepen.io/kimhyeji324/pen/abPpKGz/cf75420ce2f806be8cb6da73e9c82aeb?editors=1100) - 문제풀이 : [열기](https://codepen.io/kimhyeji324/pen/bGOgKvM/5435d09c6b1cc1bf6ab0dad9406dee72)
## 웹3 수업페이지 - 수업 페이지 : [slog.gg/p/12998](https://slog.gg/p/12998)
## 가상요소 (::before, ::after) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/yLGJvby/908421d713afa4c2220ce349ae6ed294)
## 가상요소 (가상요소 hover활용) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/xxmOYpr/22d2530a8484e8258d1a09b591bc1a29)
## 마켓컬리 상품리스트 이미지위에(flex) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/eYbzMOR/91b13891bfdf1ef31391086df4319774?editors=1100) - absolute로 구성
## 한글 폰트 적용하기(눈누) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/QWzEmvG/d9a65b0371a007161b085780eef342ce?editors=1100)
## 한글 폰트 적용하기(구글폰트) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/VwqjXdo/35d752105dcd95103db21d8e6593d6e7?editors=1100)
## 마진상쇄 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/RwERMNd/2017cb6a6d44b7de6592710f7a189c7d?editors=1100)
## hax컬러 - [구글 사이트 이동](https://www.google.com/search?q=color+picer&oq=color+picer&aqs=chrome..69i57j0i10i131i433i512j0i10i512l8.7768j0j15&sourceid=chrome&ie=UTF-8)
## absolute ```html [position] (속성값) 1.static 2.fixed 3.absolute 4.relative (static) -> 기본값 1.일반적인 태그 2.자바스크립트 라이브러리에서 활용 ㄴ미리 커스텀이 되어있는 상태에서 기본태그로 변형할때 사용 3.위치속성으로 이동시킬 수 없다. 4.z축으로 나올 수 없다. (absolute와 fixed 공통점) 1.Z축으로 나온다. 2.부모엘리먼트를 벗어난다. 3.위치속성으로 이동시킬 수 있다. 4.형제엘리먼트끼리 겹친다. ㄴ겹친 형제들끼리는 순서를 설정할 수 있다.(z-index) -> 첫째엘리먼트가 가장 밑에, 막내 엘리먼트가 가장 위에 5.위치속성을 사용하기 전까지 그자리 그대로 남아있으려는 특징을 가지고 있다. 6.width: auto = 0으로 작동한다. 7.left: 0; right: 0; -> 함께 사용하면 width: 100%와 같은 효과를 낸다. 8.top: 0; bottom: 0; -> 함께 사용하면 height: 100%와 같은 효과를 낸다. 9.구조가 복잡한 경우에 순서가 뒤바뀌면 유지보수가 힘들기 때문에 정말 꼭 필요한 상황에서만 사용한다. ㄴdisplay또는 float으로 구성 가능한 것들은 최대한 absolute없이 구성해야한다. (z-index) -> z축에 있는 요소에 순서결정 ㄴ사용할 수 있는 값 : 음수, 양수 ㄴ음수: 한칸 아래로 이동 ㄴ양수: 최상단 이동 ㄴz-index: 양수; z-index: -음수; -> z-index: 1; z-index: -1; *최대한 사용을 자제해야한다. *많이 사용해야하는 상황에서는 주석으로 순서작성 (위치속성) left, rigth, top, bottom ㄴ사용할 수 있는 단위 : 0, px, % ㄴ%수치는 부모역할을하는 엘리먼트 크기에 비례한다. ㄴ시작점을 결정할 수 있는 속성이다. ㄴ속성값에 역할 -> 얼마만큼 움직일것인지 결정하는 역할 (부모역할) 1.이동할 수 있는 공간을 제공해준다. 2.사용할 수 있는 크기를 제공 3.absolute와 fixed를 가두는 용도 4.absolute, fixed, relative는 부모역할을 할 수 있다. 5.상위엘리먼트에 absolute, fixed, relative가 없으면 body가 부모역할을 한다. (absolute와 fixed 중앙정렬) -> 화요일 메모 ```
## 폰트어썸 아이콘 사용하기 - Font Awesome : [사이트 이동](https://fontawesome.com/) - cdnjs : [사이트 이동](https://cdnjs.com/) ```html [폰트어썸 아이콘 사용시 주의사항] *반드시 Free 탭을 눌러서 사용 ㄴ무료가 아니면 네모엑스박스로 아이콘이 표시 *폰트어썸은 cdnjs라는 링크가 없으면 아이콘이 표시되지 않는다. [cdnjs링크 불러오는 방법] 1.cdnjs홈페이지에 접속 2.검색창에 font-awesome 검색 3.가장 첫번째에 나오는 링크에서 두번째 아이콘(Copy Link Tag)를 눌러서 복사 4.HTML 최상단에 붙여넣기 ```
## [font-weight] ```html [font-weight] *속성값은 100 ~ 900까지 사용가능 *폰트마다 사용할 수 있는 폰트두께가 다르다. ㄴ디자이너가 글씨깨기를 해오면 제작불가능하다고 이야기 해야한다.(코딩에서는 글자깨기가 없다.) ```
## [line-height] ```html [line-height] *오직 텍스트한테만 사용이 가능하다. ㄴinline요소나 inline-block요소에는 사용할 수 없다. *디자인 툴이나 코딩에서 line-height수치를 자유롭게 커스텀할 수 있다. *line-height여백 가운데에 텍스트가 배치는 특징을 가지고있다. ``` ![원본이미지](https://i.postimg.cc/Y91r7LW2/storage-emulated-0-Android-data-com-adobe-reader-files-Pictures-Adobe-Acrobat-Exports-Notes-230226.jpg)
## h태그 ```html *제목 태그 *h1 ~ h6 - h1은 html문서당 1개만 사용가능 - 처음에는 h1 ~ h6까지 순서대로 사용해야합니다. ㄴh2없이 h3사용불가 - 기본적으로 margin, font-size, font-weight: bold가 들어가있기 때문에 원하지 않으면 노멀라이즈 후 사용. ```
## 메모 ```html [border] 선 두께, 선 형태, 선 색상 border: 1px solid red; [탑바와 네비바] 탑바 : 네비바를 감싸고있는 상단바 네비바 : 네비게이션 역할을 해주는 바 [inline-block에 여백이 존재하는 이유] inline-block은 브라우저에서 텍스트 취급을 받기 때문에 행간과 자간(여백)이 생긴다고 이해하면 좋다. [inline-block] 공간이 부족하면 줄바꿈 된다. [box-sizing: border-box] 너비 수치에 border두께와 padding수치를 포함시켜주는 코드 ㄴ디자인할때 선이 들어간다면 outside와 inside를 정확하게 구분해줘야한다. [개발자 모드] -> F12 ul과 li(목록태그와 리스트태그) *ul,li를 커스텀하기 전에 노멀라이즈 후 사용해야한다. ㄴbody,ul,li{margin: 0; padding: 0; list-style: none;} 목록태그 -> ul ㄴli태그없이 사용이 불가능하다. ㄴul태그 자식태그로는 li태그밖에 사용이 불가능하다. ㄴ기본적으로 margin과 padding을 가지고있다. 리스트태그 -> li ㄴul태그없이 사용이 불가능하다. ㄴ자식태그로 모든태그 사용가능 ㄴ기본적으로 list-style을 가지고있다. 목록 제목(과일) 1.사과 -> 리스트1번 2.오렌지 -> 리스트2번 3.수박 -> 리스트3번 4.바나나 -> 리스트4번 네비게이션 바(목록) 상세페이지 리스트 1번 상세페이지 리스트 2번 상세페이지 리스트 3번 상세페이지 리스트 4번 ```

게시글 상세