$$config title: 매일 11시 웹1 keywords: - 개강 23.07.12(월) - 종강 23.08.07(월) $$
강사정보 **김혜지**

# 만족도 조사 [st.koreaedugroup.com/2019/](http://st.koreaedugroup.com/2019/)
# 수업영상 및 수업페이지 타인 공유 금지 수업 내 소장용으로 화면녹화가 가능하지만 타인과 공유를 금지합니다.
수업페이지 및 수업영상은 타인과 공유를 절대 금지합니다.
녹본으로 인한 이슈가 지속된다면 이전영상 포함 전체 삭제 처리 됩니다..
# 유용한 사이트 - 언스플래쉬 : [사이트 이동](https://unsplash.com/ko)
# 수업 ## 문자부호 | 마침표 | 반점 | 콜론 | 세미콜론 | 큰따옴표 | 작은따옴표 | 빗금, 슬래시 | 역슬래시 | 소괄호 | 중괄호 | 대괄호 | 물결 | 별표 | 대시 | | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | -- | | . | , | : | ; | " | ' | / | \ | () | {} | [] | ~ | * | - |
## 01강 : Tstory 가입 - [티스토리 이동](https://www.tistory.com/) - 카카오계정 가입
## 02강 : codepen가입 - CodePen : [이동](https://codepen.io) - GitHub : [이동](https://github.com/) - 깃허브 가입방법 : [블로그 이동](https://slog.gg/p/10744)
## 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/wvQywWo?editors=1100)
## 11강 : 높이 속성 - 수업코드펜 : [열기](https://codepen.io/kimhyeji324/pen/yLQvpoO)
## 12강 : block - 수업 코드펜 : [개념](https://codepen.io/kimhyeji324/pen/qBQxpYo) - 수업 코드펜 : [block태그 특징 알아보자](https://codepen.io/kimhyeji324/pen/QWJQaXK?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/abQqERq) - 수업 코드펜 : [inline태그 특징](https://codepen.io/kimhyeji324/pen/OJavZOr) - 문제 : [inline태그로 태어난 태그에 너비높이가 적용되도록 만들고, 한줄에 하나씩 배치해주세요.](https://codepen.io/kimhyeji324/pen/gOQezRd) - 정답 : [위 문제 정답 열기](https://codepen.io/kimhyeji324/pen/OJavZga) ```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/abQYGQy) ```html [inline-block은 요소를 한줄에 나란히 정렬하기 위해 나온 속성값이다.] 1.inline-block은 inline요소 장점과 block장점을 합쳐놓은 것이라고 생각하면 좋다. 2. inline-block끼리는 알 수 없는 여백이 생긴다.(좌우, 하단) - 여백값은 측정할 수 없다. 3. width: auto = 0 4. height: auto = 0 inline요소 장점 : 한줄에 요소가 나란히 나오는 장점 block장점 : width, height 값을 설정할 수 있는 장점 ```
## block , inline, inline-block ```css 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/ExOERYb?editors=1000)
## 16강 : 선택자 활용해보기 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/jOQzKOq?editors=1100)
## 17강 : class 선택자 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/gOQeKbJ?editors=1100) - 개념 [열기](https://codepen.io/kimhyeji324/pen/GRdKRrd?editors=1000)
## 18강 : 상속되는 텍스트 속성 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/YzRLwNr)
## 19강 : inline-block여백과 제거 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/dyQeGNR)
## 20강 : inline-block 줄바꿈 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/LYXmJpZ?editors=1100)
## 21강 : 젠코딩 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/MWzGqwR?editors=1000)
## 22강 : 부모엘리먼트와 자식엘리먼트 관계 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/JjeZKVP?editors=1100)
## 23강 : 부모엘리먼트 = 자식엘리먼트 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/RwqJRzo)
## 24강 : 힘이 강한 css - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/yLQEaeG?editors=1100)
## 25강 : 앵커태그, 하이퍼링크 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/BaGVLWr?editors=1000) ```html [a태그에 너비] *상황에 맞게 1.텍스트만 클릭되야 하면 a태그에 패딩이나 너비를 적용하면 안된다. 2.텍스트포함 a태그가 가진 여백을 클릭했을때 이동해야하면 a태그에 너비나 패딩을 적용해야한다. ```
## 26강 : 너비 높이만큼 클릭되는 a태그 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ZEmRpPG)
## 27강 : padding과 margin - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ZEmRpPG?editors=1100)
## 가로 정렬 총 정리 ```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; ```
## 28강 : 브라우저에서 도형취급 당하는 요소 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/ExORGoa) ![원본이미지](https://i.postimg.cc/nh5FDhVg/image.png) ```html 뚱뚱한 고양이가 박스에 딱 맞으면 왼쪽 오른쪽으로 움직일 수 없다. 박스보다 작은 홀쭉한 고양이가 박스에 들어가있으면 왼쪽 오른쪽으로 움직일 수 있다. ```
## 32강 : 중앙정렬 문제 - 수업 코드펜 : [문제](https://codepen.io/kimhyeji324/pen/oNyXyPb?editors=1100) - 추가자료 : [정답](https://codepen.io/kimhyeji324/pen/jOKPKvp?editors=1100) - 추가자료 : [풀이](https://codepen.io/kimhyeji324/pen/MWXwBgd?editors=1100)
## 33강 : 마켓컬리 레이아웃 잡기 - 수업 코드펜 : [열기](https://codepen.io/kimhyeji324/pen/NWELZEN?editors=1100)
## 1080그리드(4개 레이아웃 기준) ```html [계산법] 그리드 전체 사이즈 - 마진값 - 거터값 / 4 1080px - 20px - 60px / 4 = 250px ``` ![원본이미지](https://i.postimg.cc/28bP1zzt/image-1.jpg)
## 폰트어썸 아이콘 사용하기 - Font Awesome : [사이트 이동](https://fontawesome.com/) - cdnjs : [사이트 이동](https://cdnjs.com/) ```html [폰트어썸 아이콘 사용시 주의사항] *반드시 Free 탭을 눌러서 사용 ㄴ무료가 아니면 네모엑스박스로 아이콘이 표시 *폰트어썸은 cdnjs라는 링크가 없으면 아이콘이 표시되지 않는다. [cdnjs링크 불러오는 방법] 1.cdnjs홈페이지에 접속 2.검색창에 font-awesome 검색 3.가장 첫번째에 나오는 링크에서 두번째 아이콘(Copy Link Tag)를 눌러서 복사 4.HTML 최상단에 붙여넣기 ```
## 수업 메모 ```html [단어찾기 단축키] Ctrl + F ``` ```css [선 두께와 패딩을 너비 안쪽에 포함시키는 코드] box-sizing: border-box ``` ```html [a태그에 너비] 25강 앵커태그, 하이퍼링크에 정리 ```

게시글 상세