[HTML+CSS+JS] 1주차 1장~5장
코딩자율학습단html+css+js / 2023. 11. 26. 22:26
길벗 IT도서의 코딩자율학습단 5기를 신청했다.
자바스크립트는 거의 23년만에 다시 공부해야하는거라서.. 워밍업단계로~~
아래 스케줄 표에 보면 분량이 엄청나게 많은듯 보이지만 사실 많다!!!
1주차는 이렇다.
- 1일: VSCode, Extensions, 첫 HTML 문서 만들기
- 2일: HTML 기본 지식 (태그, 속성, 요소, 기본 구조, 특징)
- 3일: HTML 텍스트 작성, 그룹화, 목록, 링크, 이미지, 텍스트 강조
- 4일: HTML 폼 만들기, 표 만들기, 멀티미디어, 시맨틱 태그, 글로벌 속성
- 5일: CSS 문법, 적용
|
주차
|
학습일정
|
학습일지 작성 마감일
|
|
1주차
|
11/20(월)~11/26(일)
|
11/26(일)
|
|
2주차
|
11/27(월)~12/03(일)
|
12/03(일)
|
|
3주차
|
12/4(월)~12/10(일)
|
12/10(일)
|
|
4주차
|
12/11(월)~12/17(일)
|
12/17(일)
|
|
마무리
|
~12/20(수)
|
학습 보충 및 후기 작성
|
[4주 커리큘럼]
|
1주차
|
1일
|
2일
|
3일
|
4일
|
5일
|
|
목차
|
1장 Hello, HTML + CSS + 자바스크립트
1.1 개발 환경 설정하기
1.2 첫 번째 HTML 문서 만들기
|
2장 HTML 문서 작성을 위한 기본 내용 살펴보기
2.1 HTML의 기본 구성 요소
2.2 HTML의 기본 구조
2.3 HTML의 특징 파악하기
|
3장 실무에서 자주 사용하는 HTML 필수 태그 다루기
3.1 텍스트 작성하기
3.2 그룹 짓기
3.3 목록 만들기
3.4 링크와 이미지 넣기
3.5 텍스트 강조하기
|
3장 실무에서 자주 사용하는 HTML 필수 태그 다루기
3.6 폼 구성하기
3.7 표만들기
3.8 멀티미디어 설정하기
3.9 웹 페이지 구조를 설계하는 시맨틱 태그
3.10 태그의 종류에 상관없이 사용하는 글로벌 속성
|
4장 웹 스타일링을 위한 CSS 기초 배우기
4.1 CSS 문법 살펴보기
4.2 CSS 적용하기
|
|
2주차
|
1일
|
2일
|
3일
|
4일
|
5일
|
|
목차
|
5장 CSS 선택자 다루기
5.1 기본 선택자 사용하기
5.2 조합 선택자 사용하기
5.3 가상 요소 선택자 사용하기
5.4 가상 클래스 선택자 사용하기
5.5 다양한 선택자 조합하기
|
6장 CSS 필수 속성 다루기
6.1 CSS의 특징 살펴보기
6.2 텍스트 속성으로 텍스트 꾸미기
6.3 박스 모델을 구성하는 속성 다루기
6.4 배경 속성으로 요소의 배경 설정하기
|
6장 CSS 필수 속성 다루기
6.5 위치 속성으로 HTML 요소 배치하기
6.6 전환 효과 속성 적용하기
6.7 애니메이션 속성으로 전환 효과 제어하기
6.8 변형 효과 적용하기
6.9 웹 폰트와 아이콘 폰트 사용하기
|
7장 효과적인 레이아웃을 위한 CSS 속성 다루기
7.1 플렉스 박스 레이아웃으로 차원 레이아웃 설계하기
7.2 그리드 레이아웃으로 2차원 레이아웃 설계하기
7.3 반응형 웹을 위한 미디어 쿼리 사용하기
|
8장 자바스크립트 시작하기
8.1 자바스크립트 코드 작성 방법
8.2 프로그래밍 시작 전 알아 두기
|
|
3주차
|
1일
|
2일
|
3일
|
4일
|
5일
|
|
목차
|
9장 자바스크립트 기초 문법 살펴보기
9.1 변수와 상수
9.2 자료형
9.3 연산자
|
9장 자바스크립트 기초 문법 살펴보기
9.4 조건문 다루기
9.5 반복문 다루기
|
10장 자바스크립트 함수 다루기
10.1 함수란
10.2 함수를 정의하는 방법
10.3 함수 기능 확장하기
|
10장 자바스크립트 함수 다루기
10.4 함수의 특징 이해하기
10.5 즉시 실행 함수 사용하기
|
11장 자바스크립트 객체 다루기
11.1 객체란
11.2 객체 속성 다루기
|
|
4주차
|
1일
|
2일
|
3일
|
4일
|
5일
|
|
목차
|
11장 자바스크립트 객체 다루기
11.3 표준 내장 객체 사용하기
11.4 브라우저 객체 모델 사용하기
|
12장 문서 객체 모델과 이벤트 다루기
12.1 문서 객체 모델 이해하기
12.2 노드 선택하기
12.3 노드 조작하기
12.4 노드 추가/삭제하기
|
12장 문서 객체 모델과 이벤트 다루기
12.5 폼 조작하기
12.6 이벤트 다루기
12.7. 이벤트 객체와 THIS
|
13장 HTML+CSS+자바스크립트로 완성하는 최종 프로젝트
13.1 최종 프로젝트 개요
13.2 헤더 영역 만들기
13.3 메인 영역 만들기
13.4 섹션 영역 만들기 About Me
13.5 섹션 영역 만들기 What I Do
13.6 배경 영역
|
13장 HTML+CSS+자바스크립트로 완성하는 최종 프로젝트
13.7 섹션 영역 만들기 - PortFolio
13.8 섹션 영역 만들기 - Contact With Me13.9 반응형 코드 적용하기
13.10 자바스크립트 적용하기
13.11 유효성 검증하기
|
[이북 구매 인증 캡쳐]
요거 그림 좋다~~!
css문법형식부분도 참고!!
https://youtu.be/AlG0sgrnX9Y?list=PL-eeIUD86IjTH1qT8qdHXDm-FfOnm7a_U