$$config title: 월수 19시 웹1 keywords: - 개강 23.09.08(금) $$
강사정보 **김혜지**

# 만족도 조사 [st.koreaedugroup.com/2019/](http://st.koreaedugroup.com/2019/)
# 수업영상 및 수업페이지 타인 공유 금지 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다.
수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다.
녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
## 문자부호 | 마침표 | 반점 | 콜론 | 세미콜론 | 큰따옴표 | 작은따옴표 | 빗금, 슬래시 | 역슬래시 | 소괄호 | 중괄호 | 대괄호 | 물결 | 별표 | 대시 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | . | , | : | ; | " | ' | / | \ | () | {} | [] | ~ | * | - |
```html [출석] ㄴ제가 출석체크를 하고 있을때 오시면 지각x ㄴ제가 출석체크를 끝내고 오시면 지각o [교재] ㄴ수업시간에 교재 사용하지 않습니다. ㄴ교재는 이론적인 이야기가 많이 적혀있기 때문에 수업 종료 후에 복습하는 용도로 활용하시면 됩니다. ㄴ수업에서는 코드를 짤 수 있도록 예제와 실무 위주로 진행됩니다. - 복습을 했을때 가정되는 이야기 입니다. [복습] ㄴ듣다가 너무 힘들면 고민하지 말고 강사한테 이야기를 하거나 멘토님한테 이야기해서 스케줄 조정 (강사한테 이야기) -> 강사가 멘토님과 상의 후 멘토님이 연락 드립니다. ㄴ수업이 너무 어려우면 저한테 말씀 주시면 됩니다. 난이도를 많이 낮출 순 없지만 예제 한개정도는 더 볼 수 있습니다. [출결] ㄴ지각 하시면 중간에 제가 출석체크를 해야되기 때문에 인당 3분정도 소요됩니다. 늦으시면 제가 수업시간을 사용해서 출석체크를 해야되기 때문에 지각은 자제해주시면 좋을 것 같습니다. ㄴ수업은 하루 빠지시면 보충할 수 있는 수단이 없기 때문에 결석은 정말 특이사항이 있지 않는 한 안하시면 좋겠습니다. [수업진행 방식] 월 수 (조금 널널하게 진행) 금(타이트하게 진행 - 주말에 복습) ㄴ디자인에 흥미가 있는지, 언어에 흥미가 있는지 수업 들으시면서 잘 생각해보시고 진로를 잡으셨으면 좋겠습니다. ㄴ진로상담은 따로 진행 해드리지 못합니다. 진로상담 저한테 요청 하시면 제가 멘토님이랑 이야기 해서 멘토님이랑 여러분이랑 면담일정을 잡아 드리기 때문에 결론적으로는 멘토님이랑 면담 해주셔야 합니다. [html, css] - 포토샵, 일러스트 기초와 동일하다고 생각 해주시면 됩니다. - html, css는 언어가 아니라 마크업하는 문서작성 코드입니다. - 프론트엔드, 백엔드, 퍼블리셔, 웹디자인 여러 웹 분야에 기초가 되는 수업이기 때문에 ``` ## 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) ``` [주석] 주석 정의 : 웹 브라우저에 나타나지 않는다. 용도 1. 협업 2. 메모 3. 코드를 실행시키기 싫을때 주석 단축키 : ctrl + /
## 주석 ```html [주석 단축키] ctrl + / ``` ```html [html주석] ``` ```html [css주석] /**/ ``` ```html [JS주석] /**/ // ```
## 05강 : body와 배경색 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/GRPmRxd/2f3abfa811cf0123adb9b7a7b9058f14?editors=1100)
## 06강 : div크기 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ExGmxeg/04fc237907fd0148491ad23e3cf54be6)
## 07강 : 너비속성(width) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ExGmaxm/7377cd5b5ab727b8c87fdceee1d28e62)
## 08강 : 높이속성(height) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/LYMyEVe/0b68d2cea8845fb5017aa19cf2bf784a)
## display 정리 표 ![원본이미지](https://i.postimg.cc/tC4rSx2f/display.png)
## 09강 : block - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/gOZRwJN/65da21bae1b276cfd4eaeb8f1f001564?editors=1100)
## 10강 : 한줄에 하나씩 배치되는 block요소 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/xxmrRZJ/affaf8deefca6304bc8f6ad3d92e32a7)
## 11강 : inline - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/abPwBBj/2f829d737647a109d11c720027b5d8d7?editors=1100)
## 12강 : inline-block - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/OJrgbgM/2e51ac47c7c5bb9eddd1720c4855c840?editors=1100)
## 13강 : 상위엘리먼트와 하위엘리먼트를 부르는 명칭 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/RwEgKpK/afabc2999855ffb8f2760ebc9a5568c0?editors=1010)
## 14강 : 형제 엘리먼트를 부르는 명칭 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/MWZoJvx/4dcde328c07aa44b8fe193485fe56238)
## 15강 : 상속되는 텍스트 속성 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/YzdQNEN/6993e42042ca6650596534025a7374b9?editors=1100)
## 16강 : 선택자(형제) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ZEVXjvR/e5351e479457e5de0e3e03860339d5e3?editors=1100)
## 17강 :상위엘리먼트에 자식, 후손 선택자 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/LYMzBJP/e42c5426a449de1f2ef6ac0199b0d9ba?editors=1100)
## 18강 : 클래스 선택자 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/wvRrxLr/5e6c94f837854109b909c2ca9baa6340?editors=1100) - 추가 자료 : [열기](https://codepen.io/kimhyeji324/pen/GRdKRrd/02f1b3007cfdfb009565d1d1383f9ea0)
## 19강 : 클래스 선택자 그룹화 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ZEVXjgV/f689c2eaef64d1e2cb321ae70909fdd2?editors=1100)
## 20강 : 상위엘리먼트와 하위엘리먼트 크기(부모엘리먼트> 자식엘리먼트) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/OJrxoqo/837440725ab0b0f3ee0b97c9058b7254?editors=1100)
## 21강 : 상위엘리먼트와 하위엘리먼트 크기(부모엘리먼트< 자식엘리먼트) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/GRPMYqY/2f97f9475ab37a52b164c1e2a9c57a05)
## 22강 : overflow - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ZEVXqBO/d65447ec9942a4ac2de39e1008ddddec?editors=1100)
## 23강 : 상위엘리먼트와 하위엘리먼트 크기(부모엘리먼트== 자식엘리먼트) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/LYMzgem/ff5a284ea7ff7af96af46626a8be668a)
## 24강 : inline-block 줄바꿈 조건 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/mdaBQbN/5e9b9a2f73554345ef7d1d074f92e926?editors=1100) ```html inline-block으로 줄바꿈하고, 여백이 생기는 이유부터 설명~ 메모정리 한번에 하고 추가예제풀이~ ```
## 25강 : font-size:0 으로 inline-block여백 제거 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/WNLXBxm/b182d4c643267ba422c614083bcb96b3)
## 26강 : font-size:0 으로 inline-block여백을 제거했을때 생기는 문제점 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/qBLVGyV/07015dc3b5af2f69b38c3ec25935a39e)
## 27강 : 힘이 강한 css - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ZEVadze/0a02f57c572442a8ff4c7b27465f44de)
## 28강 : 앵커 태그(하이퍼링크) - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/VwqrJwE/84b340fa3862b98e486ce325762ca8ce)
## 29강 : padding - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/xxmPvGN/733724523a88324586473ea79a228899)
## 가로 정렬 총 정리 ```html [정렬조건] 부모요소보다 자식요소가 1px이라도 작아야한다. 상위요소와 하위요소 넓이.높이가 같으면 정렬할 수 없다. ``` ```css [가로 정렬] [가로정렬은 두가지로 나누어져있다.] 1.block 정렬 2.텍스트 정렬 [브라우저에서 텍스트취급을 당하는 3가지] 1.텍스트 2.inline요소 3.inlune-block요소 [block 정렬 태그] 1.margin-left: auto; 2.margin-right: auto; [text 정렬 태그] 1.text-align: left; 2.text-align: center; 3.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)
## 31강 : 마켓컬리 상단바 - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/XWoZXqO/2849acc967f0f250d81f73d062162c45)
## 32강 : 마켓컬리 상단바 a태그 추가 - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/oNJqWZb/f3cae304634e6ea63c02ea2f64060aba?editors=1100)
## 33강 : 폰트어썸 아이콘 사용하기 - 폰트어썸 사이트 : [이동](https://fontawesome.com/) - cdnjs 사이트 : [이동](https://cdnjs.com/)
## 1080그리드(4개 레이아웃 기준) ```html [계산법] 그리드 전체 사이즈 - 마진값 - 거터값 / 4 1080px - 20px - 60px / 4 = 250px ``` ![원본이미지](https://i.postimg.cc/28bP1zzt/image-1.jpg)
## a태그 적절한 구조 ```html (1)

- HTML5부터 허용된 형태 - a태그는 inline요소이기 때문에 block요소를 사용하기에는 적절하지 않다. (2) -> **가장 적절한 형태

- block요소가 inline요소를 감싸고 있기 때문에 가장 적절한 형태 (3) -> a태그나 span 즉 inline요소 안에는 큰 구조를 사용하지 않는것이 좋다.

아이템1

아이템2

아이템3

아이템4

```
## 34강 : flex 미리보기 - 개념 : [웹2 display: flex 미리보기](https://kimhyeji324.tistory.com/244)
## 35강 : line-height - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/abPGYym/8bb6008ff561a120b52adb1eab17b89c)
## 36강 : line-height로 버튼 만들기 - 수업 페이지 : [열기](https://codepen.io/kimhyeji324/pen/RwEyMze/22904c8dee528a895b5c5c6ee9fd6b43?editors=0100)
## 37강 : img태그 - 수업페이지 : [img태그](https://codepen.io/kimhyeji324/pen/rNovvGG/e4ae083b6ae6a443cc8bf9c73a0868b3) - 수업페이지 : [img너비 높이 중 너비만 커스텀](https://codepen.io/kimhyeji324/pen/QWzrraK/3793b8dcfeb4d73174d7ec61a378559d) - 수업페이지 : [img너비넢이 커스텀](https://codepen.io/kimhyeji324/pen/MWZGGVo/25fc8d957eb75db1d18eb272de3573c0) - 수업페이지 : [img태그 여백](https://codepen.io/kimhyeji324/pen/dyweeKa/c962aba7277d49c969bb4370195124af)
## 38강 : flex - 수업 페이지 : [flex](https://codepen.io/kimhyeji324/pen/mdaLKrP/bd075543364693ecd3560ddc7c94d920) - 수업 페이지 : [flex-item 장점](https://codepen.io/kimhyeji324/pen/RwEyJor/9047d37c2e68d84591df2e9a86dffdad) - 수업 페이지 : [flex-container높이를 상속받는 flex-item](https://codepen.io/kimhyeji324/pen/LYMmrjY/74b5a9d0aa54fc135bc706732a76ba73) - 수업 페이지 : [형제들끼리 높이를 공유하는 flex-item](https://codepen.io/kimhyeji324/pen/zYyjadb/425e7ad506c95054c6b4d369de0fe79b) - 수업 페이지 : [height: auto 인 flex-item에 align-items 적용](https://codepen.io/kimhyeji324/pen/bGOMKMa/1c8cf775abaa3b0934734609a839c9da) - 수업 페이지 : [flex-item 가로 정렬](https://codepen.io/kimhyeji324/pen/ExGdZXG/b3d3a8610c3d9f4a0afe06fcf325adc9?editors=1100) - 수업 페이지 : [flex-grow](https://codepen.io/kimhyeji324/pen/abPRJgJ/5a65ebe5756c09e9fbeb1ed2f5369e33?editors=1100) - 수업 페이지 : [flex-container남는 공간으로 flex-item에 너비 제공](https://codepen.io/kimhyeji324/pen/mdazmEQ/8bd8a57a877d42d35e716aa28f994501?editors=1100) - 수업 페이지 : [flex-item안쪽 요소 크기에 따라서 비율이 달라지는 flex-grow](https://codepen.io/kimhyeji324/pen/LYMgyxd/a9b9ae1fab9b01ad9b19ab0d93fd550e?editors=1100) - 수업 페이지 : [flex-basis: 0; 과 width: 0;](https://codepen.io/kimhyeji324/pen/OJrBmje/51855d480b8dcf4d94d9314b50ee0b1b?editors=1100)
## 39강 : flex개구리 - 관련사이트 : [flex개구리 사이트 이동하기](https://flexboxfroggy.com/#ko)
## 0강 : - 수업 코드펜 : [열기]()

게시글 상세