WEB I

ANONYMENT

1. HTML5 와 css3에 대하여 / 기본 HTML 코드 I

   • 웹퍼블리싱(과 디자인)의 정의
   • 브라우저의 작동방식
   • HTML의 기본 양식과 제목, 문단 태그 작성법, 이미지 삽입하기와 링크걸기
   • 배운 코드를 활용하여 다양한 HTML 문서 만들어보기

2. 기본 HTML 코드 II

   • 리스트 태그
   • 테이블 작성하기
   • 배운 코드를 활용하여 다양한 HTML 문서 만들어보기
   • 인라인 요소와 블록 요소에 대한 이해

3. 기본 css 코드 I

   • 폰트관련 속성 (font, text, webfont)
   • 박스모델링구조에 대한 이해와 공간값 부여하기 (width, height)
   • margin 속성으로 여백주기
   • 가로정렬하기 (display:flex)

4. 기본 css 코드 II

   • display:flex를 활용하여 다양한 웹 그리드를 제작하기
     • 박스모델링 구조 학습에 대한 실습
   • display:flex의 다양한 부속속성들 추가 학습 및 실습

5. 기본 css 코드 III

   • padding
   • border
   • display 속성을 사용하여 요소의 형질 변경하기
   • background
   • position

6. 기본 css 코드 IV

   • 배운 css 속성들을 활용하여 간단한 형태의 웹 그리드 제작해보기
   • 헤더 제작하기

7. 웹사이트 클론코딩 lv. 1

   • 구) COMPOSE COFFEE 웹페이지 클론코딩

   컴포즈 커피

8. 웹사이트 클론코딩 lv.2

   • sorbebe 웹페이지 클론코딩

   sorbebe

WEB II

1. 인터렉티브 웹사이트 제작을 위한 기초지식

   • transform 속성
   • transition 속성
   • position에 대한 깊은 이해
   • 외부 CDN 활용하기

2. 웹사이트 클론코딩 lv.3

   • earthtory 웹페이지 클론코딩

   어스토리

3. 웹사이트 클론코딩 lv.4

   • NIKE PROMOTION SITE

   NIKE

4. 모바일 웹사이트 제작을 위한 기초지식

   • 모바일웹사이트의 특성
   • display:flex 추가 속성들
   • 모바일 디바이스 대응을 위한 이미지 처리와 ratio 개념

5. 반응형 웹사이트 제작을 위한 기초지식

   • media query
   • css 선택자 응용
   • 다양한 화면 사이즈 대응 방법

6. 반응형 웹사이트 클론코딩 I

   • KAPPA 웹사이트

   KAPPA

7. 반응형 웹사이트 클론코딩 II

   • SWEETIE DONUTS