CURRICULUM

1. PART 01 WEB DESIGN

   • 01강
     • 프로젝트 Overview
     • 1. 추천 사이트 및 레퍼런스 가이드
     • 2. 프로젝트 Brief 작성 : Project Overview
     • 3. 프로젝트 목표 및 문제 발견 : Project Goal
     • 4. Research 방법 & 실습 _ 사용자, 경쟁사, 콘텐츠
     • 5. 1차 Reference 조사 분석
   • 02강
     • IDEATION
     • 1. 기초데이터 수집 및 콘텐츠 구성
     • 2. 콘텐츠 수집 및 내용 분석
     • 3. 기초 정보 구성 설계 - 콘텐츠 분석 및 적용
     • 4. 차별화 전략 수립 - 차별화 전략과 아이덴티티 수립
     • 5. 2차 Reference 조사 분석
       - 차별화 전략을 통한 2차 레퍼런스 조사
     • 6. Ideation & 아이디어 스케치
     • 7. 마인드맵, 어피티니 다이어그램, 강제 연결법 등
   • 03강
     • 컨셉 도출
     • 1. 제작 및 컨셉방향 수립
       - Ideation을 통한 컨셉 방향 수립
     • 2. 컨셉 도출(무드보드) - 레퍼런스를 통한 컨셉 시각화
     • 3. Tone & Mannnner
       - 컬러 이미지맵(형용사) 등을 통한 컬러 가이드
     • 4. 정보구조설계(IA Information Architecture)
       - 사이트맵 작성
     • 5. 와이어프레임 & UI 개발(인터랙션 설계)
   • 04강

     프로토타입 제작

     - 프로토타입 제작(UI설계&인터랙션)

   • 05강
     • 디자인과 레이아웃 1
     • 1. 웹사이트 서체 운영 이해
       - 자간, 행간, 타이포 시스템의 이해
       - 시스템 폰트, 이미지 폰트, 웹폰트
     • 2. 비주얼요소 디자인 제작
       - 메인 이미지, 배너 제작
     • 3. 디자인 구성 요소의 이해와 제작
       - 노리적 분석을 통한 콘텐츠 구조화 디자인 하기
       - 그룹화 요소의 이해, 레이아웃의 이해
     • 4. 여백과 그리드, 아이콘 소스 활용 및 제작
   • 06강
     • 디자인과 레이아웃 2
     • 1. 웹 화면과 반응형 사이트의 레이아웃 이해
     • 2. 사용자와 레이아웃의 이해
     • 3. F레이아웃과 Z레이아웃의 이해(아이트래킹)
     • 4. 스크롤 이벤트와 패럴렉스의 이해
     • 5. 반응형 & 모바일 디자인
       - 가변크기와 고정크기의 이해
     • 6. 미디어쿼리에 의한 레이아웃의 변화 이해
     • 7. 디바이스별 해상도 이해
   • 07강
     • 디자인과 레이아웃 3
     • 1. 논리 픽셀과 물리 픽셀의 이해
     • 2. 배율 디자인과 반응형 레이아웃의 이해
     • 3. 마이크로 인터랙션의 이해
     • 4. 디자인 스타일 가이드(style-tiles), 가이드의 개념과 필요성
     • 5. 컬러, 타이포그라피, 이미지, 패턴 시스템
     • 6. 디자인 스타일 가이드(style-tiles) 작성

2. PART 02WEB DESIGN PROJECT

   • 08강

     반응형 웹사이트 개인 포트폴리오 디자인 제작 1

   • 09강

     반응형 웹사이트 개인 포트폴리오 디자인 제작 2

   • 10강

     반응형 웹사이트 개인 포트폴리오 디자인 제작 3

   • 11강

     반응형 웹사이트 개인 포트폴리오 디자인 제작 4

3. PART 03 WEB PUBLISHING

   • 12강
     • HTML 기초 1
     • 1. 웹 서비스와 호스팅의 이해 및 호스팅 서비스 신청
       - 도메인, 서버, 클라이언트 개념
     • 2. HTML 기본: HTML 개념과 기초 문법
     • 3. HTML 기본 문서 구조, 호스팅과 서버의 이해
     • 4. 시멘틱 구조 & 태그 개념 이해
     • 5. 웹 접근성을 위한 시멘틱 웹과 시멘틱 태그,
     • 6. 제목 태그와 title 태그, meta 태그, alt 속성
   • 13강
     • HTML 기초 2
     • 1. 비주얼스튜디오 코드 설치 & 확장팩 설치
     • 2. 디자인을 위한 크롬 확장팩 설치
     • 3. 텍스트 관련 태그들
     • 4. 이미지와 하이퍼링크
       - 다양한 이미지의 활용 및 이해: png, jpg, gif, svg
     • 5. 특수기호, 더미텍스트, 아이콘의 활용
     • 6. 파비콘 등록하기
     • 7. 텍스트 관련 태그들, 목록과 표
     • 8. 블럭레벨과 인라인 레벨 요소
       - 단락스타일, 문자스타일
       - 다양한 태그 개념과 이해
   • 14강
     • CSS 기초 1
     • 1. CSS 개념과 기초 문법, CSS 외부 파일 연동
     • 2. 주요 선택자의 이해 - tag, id, class
     • 3. 글꼴 관련 스타일
       - 서체 속성과 적용(텍스트, 문단, 목록)
   • 15강
     • CSS 기초 2
     • 1. 글꼴 관련 스타일
       - 서체의 고정 단위와 상대적 단위의 이해
       (px, pt, em, rem),
     • 2. 웹폰트와 구글 웹폰트 적용
     • 3. 색상과 배경을 위한 스타일
       - 웹에서 컬러의 표현, 그레디언트 적용,
       - 색상 관련 다양한 사이트의 활용
     • 4. 폼관련 태그들 - input 태그의 다양한 속성
     • 5. CSS 박스 모델의 이해, 테두리와 여백의 이해
   • 16강
     • CSS 포지셔닝 1
     • 1. 다양한 배경 이미지의 활용
     • 2. 다양한 선택자 이해
       - 블럭 레벨과 인라인 레벨의 이해와 활용, 중앙 정렬 활용
     • 3. float 레이아웃 정렬 하기
     • 4. 가변 그리드의 이해
     • 5. position
     • 6. 절대적 위치, 상대적 위치, 고정위치
   • 17강
     • CSS 포지셔닝 2
     • 1. float, position의 개념과 활용
     • 2. 플렉스 박스
     • 3. 그리드
     • 4. 미디어쿼리
     • 5. 반응형 구현 개념
     • 6. CSS 레이아웃의 이해
       - 다단 레이아웃의 이해, 표 스타일과 속성 이해
   • 18강
     • UI 개발 기초 1
     • 1. CSS 의 다양한 활용
       - 고스트 버튼, 햄버거 버튼, 그라디언트 배경
     • 2. CSS 레이아웃의 이해
       - 그리드의 컬럼 시스템 이해와 활용
     • 3. CSS display 다양한 속성 이해와 활용
       - opacity와 display none 이해와 활용
     • 4. CSS 수직 중앙 정렬의 다양한 방법
     • 5. CSS 마우스 hover 디자인 적용
   • 19강
     • UI 개발 기초 2
     • 1. 웹과 멀티미디어 - 오디오와 비디오
     • 2. 다양한 선택자의 이해
       - 연결 선택자, 속성 선택자, 가상 선택자와 가상 요소
     • 3. CSS를 통한 애니메이션 구현
       - transform, transition, animation
     • 4. CSS의 다양한 활용
       - CSS로 삼각형, 햄버거 버튼 제작
     • 5. CSS 레이아웃의 이해
       - 가변크기와 고정 크기의 이해
   • 20강
     • UI 개발 기초 3
     • 1. CSS 우선 순위와 초기화 코드 사용의 개념과 활용
     • 2. CSS 레이아웃의 이해
       - 디자인 가이드를 통한 스타일 가이드 적용
     • 3. HTTP 요청 횟수를 줄이기 위한
       스프라이트 이미지의 이해와 활용
     • 4. 작업의 효율성을 위한 html include
     • 5. 크로스 브라우징의 이해
       - browser support와 can i use 사이트를 통한 크로스 브라우징 적용
   • 21강
     • 반응형 웹
     • 1. 미디어쿼리에 의한 레이아웃의 변화 이해
     • 2. Mobile First를 통한 미디어쿼리 이해
     • 3. 디바이스별 해상도 이해
     • 4. 논리 픽셀과 물리 픽셀의 이해,
       배율 디자인과 반응형 레이아웃의 이해
     • 5. viewport의 이해
   • 22강
     • UI 개발 실무
     • 1. One Page 사이트 구현 이해와 적용
     • 2. 트래픽과 속도 이슈 이해를 통한 이벤트 제어
     • 3. 마우스 이벤트와 스크롤 이벤트의 이해
     • 4. Full Page (fullPage.js) 코드 분석
     • 5. Full Page 사이트 제작
   • 23강
     • UI 개발 실무
     • 1. 제이쿼리 플러그인 활용
     • 2. 패럴랙스 스크롤링효과
     • 3. 자바스크립트 이미지 갤러리
     • 4. 마이크로 인터랙션의 이해
     • 5. Javascript & JQuery 기초 문법 비교
   • 24강
     • Javascript 기본
     • 1. 연산자의 이해와 활용
     • 2. 제어문의 이해와 활용
     • 3. 객체의 이해와 활용
     • 4. 함수의 이해와 활용
     • 5. 이벤트의 이해와 활용
   • 25강
     • JQuery 기본
     • 1. 연산자의 이해와 활용
     • 2. 제어문의 이해와 활용
     • 3. 객체의 이해와 활용
     • 4. 함수의 이해와 활용
     • 5. 이벤트의 이해와 활용
   • 26강
     • 반응형 웹 제작 실무 1
     • 1. 헤더
     • 2. 네비게이션
     • 3. 비쥬얼 섹션
     • 4. 콘텐츠 섹션
     • 5. 푸터
   • 27강
     • 반응형 웹 제작 실무 2
     • 1.헤더
     • 2. 네비게이션
     • 3. 비쥬얼 섹션
     • 4. 콘텐츠 섹션
     • 5. 푸터

4. PART 04 WEB PUBLISHING PROJECT

   • 28강

     반응형 웹사이트 개인 포트폴리오 제작 1

   • 29강

     반응형 웹사이트 개인 포트폴리오 제작 2

   • 30강

     반응형 웹사이트 개인 포트폴리오 제작 3

   • 31강

     반응형 웹사이트 개인 포트폴리오 제작 4

   • 32강

     반응형 웹사이트 개인 포트폴리오 제작 5