$$config title: 화목 19시 웹2 keywords: - 개강 23.02.14(화) - 종강 23.03.10(금) $$ ## 강사정보 - 김혜지 - 01043721301
## 만족도 조사 - [열기](http://st.koreaedugroup.com/2019/login.asp)
## 수업영상 및 수업페이지 타인 공유 금지 - 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다. - 수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다. - 녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
# 추가 자료 ## 23.03.16(목) - li마다 나오는 2차메뉴 1부 - 수업영상1 : [11:00 - 11:50](https://youtu.be/G8i2P3HBNi0) - 수업영상2 : [12:00 - 12:50](https://youtu.be/LwC94NAZzo4)
## 23.03.17(금) - li마다 나오는 화면넓이대비 2차메뉴(완료) - 수업영상 1부 : [11:00 - 11:50](https://youtu.be/ELLCVnuwPHw)
## 22강 : 삼성디자인 탑바 2차메뉴 제작 - 추가자료 : [2차메뉴 top-bar__left-box 높이40px 삭제](https://codepen.io/kimhyeji324/pen/qBMYBwX?editors=1100)
## 25강 : li마다 나오는 2차 메뉴 제작 - 수업codepen : [코드 열기](https://codepen.io/kimhyeji324/pen/RwYJWgV?editors=1100) - 수업codepen : [hover 적용](https://codepen.io/kimhyeji324/pen/MWqXQLG?editors=0100) ```html

Our Stories

``` ```css /* 2차메뉴 */ header > .container > .top-bar__left-box > nav > ul > li > .menu-2 {} ``` ## 1080그리드(4개 레이아웃 기준) ```html [계산법] 그리드 전체 사이즈 - 마진값 - 거터값 / 4 1080px - 20px - 60px / 4 = 250px ``` ![원본이미지](https://i.postimg.cc/28bP1zzt/image-1.jpg)
## 텍스트 태그 복습 ```html

안녕하세요

스판

안녕하세요

스판 ```
## 1강 : 힘이 강한 css 복습 - 수업codepen : [1순위 ~ 4순위](https://codepen.io/kimhyeji324/pen/KKxKNgQ) - 수업codepen : [같은 순위](https://codepen.io/kimhyeji324/pen/bGxGRvZ) ``` css /* 같은 순위끼리는 가장 아래쪽에 있는 코드가 힘이 강하다 예시*/ div > .section-1 { width: 100px; height: 100px; background-color: blue; } div > .section-1 { width: 100px; height: 100px; /*같은 1순위 끼리 놓았을때 아래쪽 식이 실행*/ background-color: green; } ```
## 2강 : 마켓컬리 상품리스트 제작 마무리 - 수업codepen : [웹1 상품리스트 제작](https://codepen.io/kimhyeji324/pen/BaPgzxo) - 수업codepen : [웹2 새로운 페이지에서 상품리스트 제작, 코드 정리 전](https://codepen.io/kimhyeji324/pen/qBMBrxJ) - 수업codepen : [웹2 새로운 페이지에서 상품리스트 제작, 코드 정리 후](https://codepen.io/kimhyeji324/pen/ExexWLL) - 수업codepen : [완성](https://codepen.io/kimhyeji324/pen/jOvEQPK?editors=1100)
## 3강 : 이 상품 어때요? 추가 - 수업codepen : [h태그 활용하여 텍스트 추가하기 공통 div](https://codepen.io/kimhyeji324/pen/rNZabYj?editors=1100) ```html

이 상품 어때요?

``` ```css .pro-section > .container > div { width: 250px; height: 320px; display: inline-block; background-color: #a1a1a1; } ```
- 수업codepen : [h태그 활용하여 텍스트 추가하기 개별div](https://codepen.io/kimhyeji324/pen/VwGYVPm) ```html

이 상품 어때요?

``` ```css .pro-section > .container > .list-1 { vertical-align: top; width: 250px; height: 320px; display: inline-block; background-color: #a1a1a1; } .pro-section > .container > .list-2 { margin-left: 20px; margin-right: 20px; width: 250px; height: 320px; display: inline-block; background-color: #a1a1a1; } .pro-section > .container > .list-3 { margin-right: 20px; width: 250px; height: 320px; display: inline-block; background-color: #a1a1a1; } .pro-section > .container > .list-4 { width: 250px; height: 320px; display: inline-block; background-color: #a1a1a1; ```
- 수업codepen : [span태그 활용하여 텍스트 추가하기 개별div](https://codepen.io/kimhyeji324/pen/ExeaOeP) ```html

이 상품 어때요?

``` ```css .pro-section > .container > .list-1 { vertical-align: top; width: 250px; height: 320px; display: inline-block; background-color: #a1a1a1; } .pro-section > .container > .list-2 { margin-left: 20px; margin-right: 20px; width: 250px; height: 320px; display: inline-block; background-color: #a1a1a1; } .pro-section > .container > .list-3 { margin-right: 20px; width: 250px; height: 320px; display: inline-block; background-color: #a1a1a1; } .pro-section > .container > .list-4 { width: 250px; height: 320px; display: inline-block; background-color: #a1a1a1; ```
## 4강 : 본문 텍스트 추가 - 수업codepen : [h1태그(개별div) + 본문 p태그 추가하기](https://codepen.io/kimhyeji324/pen/BaOyeBN) ```html

[대구 반할만떡] 유부호만두

``` ```css .pro-section > .container span { font-size: 16px; } ```
## 5강 : padding으로 세로 중앙정렬 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/PodwVzq)
## 6강 : line-height 세로 중앙정렬 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/NWLPobb)
## 7강 : flex 미리보기 - 개념 : [웹2 display: flex 미리보기](https://kimhyeji324.tistory.com/244)
## 8강 : flex와 inline-block - [block](https://codepen.io/kimhyeji324/pen/gOdPZqz) - [inline-block](https://codepen.io/kimhyeji324/pen/wvEMZWp) - [flex](https://codepen.io/kimhyeji324/pen/rNZxPae?editors=1100) - [부모엘리먼트 넓이 < inline-block 엘리먼트 총 넓이](https://codepen.io/kimhyeji324/pen/eYLJxzz?editors=1100) - [부모엘리먼트 넓이 < flex 엘리먼트 총 넓이](https://codepen.io/kimhyeji324/pen/BaOjEzm?editors=1100) ```html 1.내가 한줄에 같이 나오도록 원하는 태그 부모엘리먼트에 display: flex를 적용해야 한다. 2.flex-item은 inline-block이랑은 다르게 여백이 생기지 않는다. 3.display: flex를 적용한 태그를 flex-container라고 부른다. 4.flex-container에 자식태그를 flex-item이라고 부른다. ``` ```html

``` ```css section { display: flex; } ```
## 9강 : flex-item 가로정렬 - [justify-content](https://codepen.io/kimhyeji324/pen/OJoMGXx?editors=1100) - [text-align을 사용할 수 없는 flex-item](https://codepen.io/kimhyeji324/pen/KKxVJYN) ```css [flex-item 가로 정렬 속성] /*flex-item은 text-align을 사용해서 가로정렬할 수 없다.*/ - justify-content : flex-start; - justify-content : center; - justify-content : flex-end; (left, right, flex-생략가능) ```
## 10강 : flex-item 세로정렬 - [align-items](https://codepen.io/kimhyeji324/pen/OJoMqJP?editors=1100) - [flex-item높이를 최소화 시키는 align-items](https://codepen.io/kimhyeji324/pen/qBMbwNd?editors=1100) ```css [flex-item 세로 정렬 속성] - align-items : flex-start; - align-items : center; - align-items : flex-end; (top,bottom은 사용할 수 없다.) (flex- 생략은 가능하다.) ```
## 11강 : flex높이공유 - [flex-container 높이를 상속받는 flex-item](https://codepen.io/kimhyeji324/pen/MWqKxKE?editors=1100) - [높이 공유하는 flex-item형제들](https://codepen.io/kimhyeji324/pen/oNPbONX?editors=1100)
## 12강 : flex줄바꿈 - [flex줄바꿈](https://codepen.io/kimhyeji324/pen/xxaZeOx) ```css [flex-wrap 기본값] flex-wrap: nowrap; ```
## 13강 : 찌그러지는 특성을 가진 flex-item - 수업codepen : [flex-container가 고정px일때](https://codepen.io/kimhyeji324/pen/KKxpaQr?editors=1100) - 수업codepen : [flex-container가 %(max-width)일때](https://codepen.io/kimhyeji324/pen/NWLrbYm?editors=1100) - 수업codepen : [flex-shrink](https://codepen.io/kimhyeji324/pen/poObNqJ?editors=1100)
## 14강 : flex개구리 - 관련사이트 : [flex개구리 사이트 이동하기](https://flexboxfroggy.com/#ko) - 정답 : [확인](https://codepen.io/khjsbs324/pen/YzLaqZP?editors=1000)
## 15강 : flex-grow - 수업codepen : [flex-grow 개념](https://codepen.io/kimhyeji324/pen/QWVEpYV?editors=1100) - 수업codepen : [flex-grow가 적용된 형flex-item과 동생 flex-item](https://codepen.io/kimhyeji324/pen/NWLrpoz) - 수업codepen : [flex-grow 수치가 1이상일때](https://codepen.io/kimhyeji324/pen/yLxJmzj?editors=1100) - 수업codepen : [하위요소 크기에 영향 받는 flex-gorw](https://codepen.io/kimhyeji324/pen/PodzMBm?editors=1100)
## 16강 : 화면 해상도 - 해상도 통계 확인 사이트 : [gs.statcounter](https://gs.statcounter.com/) ```html 눈 앞에 보이는 실물 모니터 사이즈 ```
## 17강 : flex 활용 마켓컬리 탑바제작 - 수업codepen : [space-between](https://codepen.io/kimhyeji324/pen/zYJKxOa) - 수업codepen : [width: 130px](https://codepen.io/kimhyeji324/pen/ExegaYp) - 수업codepen : [flex-grow: 1](https://codepen.io/kimhyeji324/pen/xxaEKBd)
## 18강 : flex-direction: column예제 - 수업coodepen : [g마켓 세로형 2차메뉴 제작](https://codepen.io/kimhyeji324/pen/qBMaEWL) ```css [flex-direction 기본값] flex-direction: row - flex-item들은 한줄에 하나씩 나온다. ```
## 19강 : 개발자모드에서 svg 가져오는 방법 - [유튜브 이동](https://youtu.be/9_l7mgEJ-Oo)
## 20강 : 2차메뉴 제작 전 탑바제작 - 수업codepen : [삼성디자인 홈페이지](https://design.samsung.com/kr/contents/over-the-horizon/) - 수업codepen : [수업codepen](https://codepen.io/kimhyeji324/pen/BaOZgWp)
## 21강 : 목록(ul)과 리스트(li)태그 - 추가자료 : [노멀라이즈 전](https://codepen.io/kimhyeji324/pen/yLxoqgP?editors=1100) - 추가자료 : [노멀라이즈 후](https://codepen.io/kimhyeji324/pen/yLxoqov) - 추가자료 : [삼성디자인 탑바 ul, li태그로 수정](https://codepen.io/kimhyeji324/pen/LYJjBqY) ```css [ul태그, li태그 기본 display 속성값] display: block; [ul태그 특징] ul태그는 기본적으로 margin, padding을 가지고있다. [li태그 특징] li태그는 기본적으로 margin, list-style을 가지고 있다. [주의사항] ul태그 자식으로는 li태그만 허용된다. ul태그 없이 li태그를 사용할 수 없다. li태그끼리는 결이 같은 것들끼리 묶는것이 좋다. li태그 안에는 모든태그가 들어올 수 있다. ``` ```html [노멀라이즈] body, ul, li { margin: 0; padding: 0; list-style: none; } ```
## 2차메뉴 예시 ![원본이미지](https://i.postimg.cc/mg6PLvTz/Frame-426.jpg)
## 22강 : 2차 메뉴 제작 - 수업codepen : [absolute개념과 hover](https://codepen.io/kimhyeji324/pen/jOvawBr?editors=1100) - 수업codepen : [1단계 : absolute적용 후 2차메뉴 그리드까지](https://codepen.io/kimhyeji324/pen/ZEMayLK) - 수업codepen : [2단계 : 1440그리드 안에서 ul태그에 140적용 후 a태그 중앙정렬](https://codepen.io/kimhyeji324/pen/zYJpvga?editors=0010) - 수업codepen : [2차메뉴 리스트 padding, 가상요소 적용](https://codepen.io/kimhyeji324/pen/XWPzQQL) - 수업codepen : [2차메뉴 hover 적용 후 nav 높이 수정](https://codepen.io/kimhyeji324/pen/qBMYBwX?editors=1100) - 수업codepen : [2차메뉴 top-bar__left-box 높이40px 삭제](https://codepen.io/kimhyeji324/pen/qBMYBwX?editors=1100)
## 23강 : hover - 추가영상 : [12:00 - 12:50](https://youtu.be/5GaXQMpaweY)
- 추가자료 : [태그:hover](https://codepen.io/kimhyeji324/pen/ExebPjr) ```html /*평소에 실행되는 코드*/ 태그 { 속성: 속성값; } /*태그에 마우스가 올려지면 실행되는 코드*/ 태그:hover { 속성: 속성값; } ```
- 추가자료 : [인접형:hover + 인접동생](https://codepen.io/kimhyeji324/pen/xxaPZGe) ```html 인접형:hover + 인접동생 { 속성: 속성값; } 인접형태그에 마우스를 올리지 않으면 코드는 실행되지 않는다.. ```
- 추가자료 : [부모:hover > 자식](https://codepen.io/kimhyeji324/pen/JjaOGdq) ```html 부모:hover > 자식 { 속성: 속성값; } 부모태그는 자식태그를 품고있기 때문에 자식태그에 마우스를 올리고 있어도 부모태그에 걸려있는 hover가 풀리지 않는다. ```
## 24강 : display : none - 수업codepen : [개념과 예제](https://codepen.io/kimhyeji324/pen/BaOxazx?editors=1100)
## 25강 : li마다 나오는 2차 메뉴 제작 - 수업codepen : [코드 열기](https://codepen.io/kimhyeji324/pen/RwYJWgV?editors=1100) - 수업codepen : [hover 적용](https://codepen.io/kimhyeji324/pen/MWqXQLG?editors=0100) ```html

Our Stories

``` ```css /* 2차메뉴 */ header > .container > .top-bar__left-box > nav > ul > li > .menu-2 {} ``` ## 26강 : vscode 기본셋팅 - 블로그 : [열기](https://slog.gg/p/10232)
## 27강 : vscode 코드 정리 확장 프로그램 ### 코드정리 - 텍스트 복사하기 : [열기](https://codepen.io/khjsbs324/pen/gOzLgJq?editors=1000) - 단축키 : Shift+Alt+F - 블로그 : [Window](https://slog.gg/p/10234)
## 28강 : Tab오류 - F1 → Emmet: Expand Abbreviation
## 29강 : HTML5 DOCTYPE - VSCODE에서 선언하기 : ! + Tab - 언어설정 : lang="en" - 한글 : ko - title : ![원본이미지](https://i.postimg.cc/fbkfQ5DN/Group-17.jpg)
## 30강 : Metadata Content(메타 데이터 콘텐츠) - 개념 : [열기](https://codepen.io/khjsbs324/pen/oNdYNdp)
## 23.02.14(화) - 수업영상1 : [19:00 - 19:50](https://youtu.be/cxPUIL5yUiU) - 수업영상2 : [20:00 - 20:50](https://youtu.be/nKBM4lcduXg) - 수업영상3 : [21:00 - 21:40](https://youtu.be/1t4_Qm9AK30)
## 23.02.16(목) - 수업영상1 : [19:00 - 19:50](https://youtu.be/2z0ICqnDNBk) - 수업영상2 : [20:00 - 20:50](https://youtu.be/WLW6aoKE40U) - 수업영상3 : [21:00 - 21:40](https://youtu.be/QLWrmTPahBo)
## 23.02.21(화) - 수업영상1 : [19:00 - 19:50](https://youtu.be/couzpBmhTlc) - 수업영상2 : [20:00 - 20:50](https://youtu.be/hMIc3XSVB3Q) - 수업영상3 : [21:00 - 21:40](https://youtu.be/_dqQbndQebE)
## 23.02.22(목) - 수업영상1 : [19:00 - 19:50](https://youtu.be/28shgNe7x7E) - 수업영상2 : [20:00 - 20:50](https://youtu.be/6N3yirVNUV8) - 수업영상3 : [21:00 - 21:40](https://youtu.be/xy6SZusLeLU)
## 23.02.23(금) - 수업영상1 : [19:00 - 19:50](https://youtu.be/4kZRYbHQXmc) - 수업영상2 : [20:00 - 20:50](https://youtu.be/s8I7rF7c1j8) - 수업영상3 : [21:00 - 21:40](https://youtu.be/Ge2wLOc-928)
## 23.03.06(월)_오전영상 - 삼성 디자인 탑바 1차메뉴 - 추가영상1 : [11:00 - 11:50](https://youtu.be/hc-1ouET8pY) - 수업영상2 : [12:00 - 12:50](https://youtu.be/oKfhiJ5S8dw)
## 23.03.07(화)_오전영상 삼성 디자인 탑바 2차메뉴 - 추가영상1 : [11:00 - 11:50](https://youtu.be/bq2p0wOhk90) - 추가영상2 : [12:00 - 12:50](https://youtu.be/yYb8WaqNe2U)
## 23.03.09(목) 삼성 디자인 탑바 2차메뉴 - 수업영상1 : [19:00 - 19:50](https://youtu.be/Mp-Qfh8PLQU) - 수업영상2 : [20:00 - 20:50](https://youtu.be/vClww_nTEo4) - 수업영상3 : [21:00 - 21:40](https://youtu.be/3_XMHCb5_VU)
## 23.03.10(금) 삼성 디자인 탑바 2차메뉴 - 수업영상1 : [19:00 - 19:50](https://youtu.be/3nnFHnmwuAs) - 수업영상2 : [20:00 - 20:50](https://youtu.be/6TQD5hz30mU) - 수업영상3 : [21:00 - 21:40](https://youtu.be/rgdvv_taXzk)
## 23.03.14(화) vscode 사용하기 - 수업영상 1부 : [19:00 - 19:50](https://youtu.be/e50yEi55CrY) - 수업영상 2부 : [20:00 - 20:50](https://youtu.be/_W7EfEsep-g) - 수업영상 3부 : [21:00 - 21:50](https://youtu.be/0ehgr_WA2KQ)
## 23.03.15(수)_오전영상 vscode 폴더경로, display: none, 2차메뉴 hover - 수업영상1 : [11:00 - 11:50](https://youtu.be/syXa2ZDd3VE) - 수업영상2 : [12:00 - 12:50](https://youtu.be/-7-RXAbGtKw)
## 23.03.16(목)_오전영상 li마다 나오는 2차메뉴 1부 - 수업영상1 : [11:00 - 11:50](https://youtu.be/G8i2P3HBNi0) - 수업영상2 : [12:00 - 12:50](https://youtu.be/LwC94NAZzo4)
## 23.03.17(금)_오전영상 - li마다 나오는 화면넓이대비 2차메뉴(완료) - 수업영상 1부 : [11:00 - 11:50](https://youtu.be/ELLCVnuwPHw)
## flex개구리 - 수업영상 : [flex개구리 풀이](https://youtu.be/1frIg3uoDHc)

게시글 상세