Study Web Development

SIST

매일 수업 들으며 정리한 노트 모음

HTML5

1. HTML 개요 12월 8일

• 1-1 웹의 역사 12월 8일
• 1-2 HTML 정의
• 1-3 태그의 구성 요소
• 1-4 태그 사용 규칙
• 1-5 주석

2. HTML의 기본 구조 12월 8일 12월 9일 12월 10일 12월 13일

• 2-1 태그의 사용 12월 8일 12월 9일
• 2-2 글자 태그 12월 8일 12월 9일

• 2-4 목록 태그

• 2-6 테이블 태그 12월 9일 12월 10일
• 2-7 이미지 태그 12월 9일
• inline frame 12월 10일
• 2-8 입력 양식 태그 12월 10일 12월 13일

3. HTML5 특징 12월 13일

• 3-1 HTML5 지원 API
• 3-2 웹 표준, 웹 접근성, 웹 호환성 12월 13일
• 3-3 HTML5 독타입
• 3-4 head 요소

4. HTML5의 기본적인 문서 만들기 12월 13일

• 4-2 새로운 태그
• 4-3 시맨틱 마크업 사용하기 12월 13일

5. HTML5 폼

• 5-1 필드
• 5-2 속성

6. HTML5 오디오와 비디오 12월 13일

• 6-1 지원 비디오 파일 형식 및 코덱
• 6-2 video 태그 사용 12월 13일
• 6-3 다중 비디오 포맷 지원
• 6-4 지원 오디오 파일
• 6-5 audio 태그 사용 12월 13일

7. Web Storage API 12월 29일

• 7-1 세션 스토리지
• 7-2 로컬 스토리지

8. File API 12월 29일 12월 30일

• 8-1 <input type="file">의 프로퍼티 목록
• 8-2 파일 정보 얻기
• 8-3 FileReader 객체를 이용한 파일 데이터 읽기
• 8-4 이벤트
• 8-5 로드 상태
• 8-6 오류 처리

9. 캔버스 12월 30일

• 9-2 다양한 도형 그리기

• 9-4 이미지 사용하기

CSS3

1. CSS란? 12월 13일

• 1-1 CSS의 동작 방식
• 1-2 CSS의 장점
• 1-3 CSS의 단점
• 1-4 CSS의 발전 과정

2. CSS 규칙의 구성 요소 12월 13일

• 2-1 스타일 형식
• 2-2 CSS의 삽입 방법 3가지
• 2-3 @import의 사용
• 2-4 CSS에 주석 추가
• 2-5 스타일의 우선 순위

3. 선택자 12월 13일 12월 14일

• 기본 선택자 12월 13일
• 기본 선택자의 연계 12월 13일 12월 14일
• 그룹 지정(동일 스타일을 사용하는 엘리먼트 정의)
• 조합 선택자(결합자)
• 속성 선택자
• 가상 클래스 선택자

4. 텍스트 관련 스타일 12월 14일

• 4-1 text-decoration 속성
• 4-2 text-align 속성
• 4-3 text-indent 속성
• 4-4 letter-spacing 속성, word-spacing 속성

• 4-6 text-transform 속성
• 4-7 white-space 속성
• 4-8 text-shadow 속성
• 4-9 text-overflow 속성

5. 글꼴 관련 스타일 12월 14일

6. 목록 스타일 12월 14일 12월 15일

7. 색상과 배경을 위한 스타일 12월 15일

• 7-1 color 속성
• 7-2 배경 관련 속성

8. 그라데이션 효과

• 8-1 선형 그라데이션
• 8-2 원형 그라데이션

9. 박스 모델 12월 15일

• 9-1 박스 속성
• 9-2 border-radius 속성

• 9-4 box-shadow 속성

10. 위치 유형 설정 12월 15일 12월 16일

• 10-1 position 속성 12월 15일 --overflow 속성

• 10-3 z-index 속성
• resize 속성
• 10-4 float 속성 12월 15일 12월 16일
• 10-5 clear 속성 12월 15일

11. 표 관련 CSS 스타일 12월 16일

12. 변형을 위한 스타일 12월 16일

13. 반응형 웹 디자인을 위한 미디어 쿼리 12월 16일

14. 브라우저의 CSS 확장 속성

JavaScript

1. 자바스크립트 기초 12월 17일

• 1-1 자바스크립트의 정의
• 1-2 자바스크립트의 특징
• 1-3 자바스크립트의 장점 및 단점
• 1-4 자바스크립트(ECMA Script)의 표준화
• 1-5 개발자 도구

2. 자바스크립트의 기본 구조 12월 17일

• 2-1 기본 구조
• 2-2 자바스크립트 실행 위치
• 2-3 자바스크립트 출력
• 2-4 자바스크립트 주석

3. 변수와 자료형 12월 17일

• 3-1 변수명 지정 규칙
• 3-2 자료형(Data Type)
• 3-3 강제로 자료형 변환시키기

4. 연산자 12월 17일

• 4-1 산술 연산자
• 4-2 대입 연산자
• 4-3 비교(관계) 연산자
• 4-4 논리 연산자
• 4-5 조건(삼항) 연산자
• 4-6 증감 연산자

5. 제어문 12월 17일

• 5-1 조건문
• 5-2 반복문
• 5-3 break문
• 5-4 continue문

6. 함수 12월 20일 12월 21일 12월 22일

• 함수의 역할
• 6-1 함수의 정의와 호출
• 6-2 매개 변수
• 6-3 가변 인자 함수

• 6-5 return값의 활용
• 6-6 내부 함수
• 6-7 함수를 반환하는 함수와 클로저
• 6-8 내장 함수 12월 20일 12월 21일
• 콜백 함수 12월 22일

7. 배열 12월 21일

8. 객체 생성 12월 21일 12월 22일

• 8-1 객체 생성하기

• 8-3 동적 객체 생성과 추가
• 8-4 생성자 함수를 이용한 객체 생성
• 8-5 프로토타입을 이용한 메서드 생성

9. 클라이언트 객체 12월 22일

• 9-1 클라이언트 객체의 종류
• 9-2 window의 속성과 메서드

• 9-4 history 객체의 속성과 메서드

• 9-6 location 객체의 속성과 메서드

10. 내장 객체 12월 22일 12월 23일

• 10-2 Array 객체의 생성자 함수, 속성, 메서드
• 10-3 String 객체의 속성, 메서드
• 10-4 Date 객체의 메서드
• 10-5 Math 객체의 속성과 메서드

11. 문서 객체 모델(Document Object Model) 12월 23일

• 11-1 문서 객체의 동적 생성

• 11-3 HTML 태그를 자바스크립트로 가져오는 방법

• 11-5 문서 객체의 innerHTML 속성 사용해 객체 생성

• 11-7 문서 객체의 style 속성 사용
• 11-8 문서 객체 제거

12. 이벤트 12월 23일 12월 24일 12월 27일

• 12-1 이벤트와 이벤트 속성
• 12-2 이벤트 모델의 종류
• 12-3 인라인 이벤트 모델
• 12-4 고전 이벤트 모델
• 12-5 이벤트 객체의 사용
• 12-6 기본 이벤트의 의미와 기본 이벤트 제거
• 12-7 이벤트 전달

• 12-9 DOM Level 2
• 12-10 인터넷 익스플로러 이벤트 모델
• 12-11 표준 이벤트 모델

13. 예외 처리

• 13-1 예외 처리란?
• 13-2 기본 예외 처리
• 13-3 finally의 사용
• 13-4 예외 객체
• 13-5 예외 강제 발생

jQuery

1. jQuery에 대해 12월 27일

• 1-1 jQuery의 특징
• 1-2 jQuery 다운로드와 CDN 방식

2. jQuery 기본 12월 27일

• 2-1 jQuery(document).ready()
• 2-2 jQuery 기본 선택자
• 2-3 jQuery를 이용한 배열 관리

3. 문서 객체 조작1 12월 27일 12월 28일

• 3-2 문서 객체의 클래스 속성 제거
• 3-3 문서 객체의 속성 검사
• 3-4 문서 객체의 속성 추가
• 3-5 문서 객체의 속성 제거

• 3-7 문서 객체의 스타일 추가

• 3-9 문서 객체의 내부 추가
• 3-10 문서 객체의 제거

4. 문서 객체 조작2 12월 28일

• 4-2 문서 객체의 삽입
• 4-3 문서 객체의 이동

5. 이벤트 12월 28일

• 5-3 이벤트 강제 발생
• 5-4 기본 이벤트와 이벤트 전달
• 5-5 이벤트 통합 메서드
• 5-6 마우스 이벤트
• 5-7 키보드 이벤트

6. Ajax(Asynchronous JavaScript and XML) 1월 12일 1월 13일

• 6-1 Ajax 개요
• 6-2 jQuery Ajax 메서드

7. 다양한 효과와 애니메이션 12월 28일 12월 29일

• 효과 메서드

jQuery UI 12월 29일

• Download
• Demos

Bootstrap

Download 12월 30일

CSS 12월 30일

• 그리드 시스템
• 타이포그래피
• 테이블
• 폼
• 버튼
• 이미지

Components 1월 3일

• 드롭다운
• 네비게이션 바
• 페이지네이션
• 알림

JavaScript 1월 3일

• 모달
• 캐러셀

Main Page 1월 3일