강의 개요

웹의 정보구조부터 동적 표현,
그리고 포트폴리오까지

오랜 기간 하드웨어적 한계로 인해 웹은 PC를 통하여 사용되는 것으로 인식되어 왔으나
몇 년 전부터 스마트폰을 시작으로 태블릿, 스마트, Tv등 웹에 접근 할 수 있는 디바이스가 다양해지고 있습니다.
이 모든 디바이스를 아우를 수 있는 능력을 갖춘 웹 퍼블리셔가 절실하게 필요한 실정에
맞추어 본 커리큘럼이 탄생하게 되었습니다.

멀티디바이스 시대를 대비하는 웹퍼블리셔 양성과정

웹을 구성하는 기술도 HTML5라고 통칭되는 여러가지 새로운 기술(반응형웹+ JQUERY 애니메이션)들이
속속 등장 하게 되어, 이런 웹 환경의 변화에 따라 클라이언트측 코드는 특정한 디자인을
HTML과 CSS로 구성하는 이상의 기능과 가치를 요구하고 있습니다.

따라서 웹 접근성, SEO(Search Engine Optimization) 등 웹 서비스 품질을 높이는 이슈가 부각되고 있습니다.
아카데미 정글 웹퍼블리셔 프로페셔널과정에서는 단순히 디자인을 코드로 교환/변환하는 수준에서 벗어나
클라이언트 측 코드 전반적인 이해와 웹 서비스 품질을 높얼 수 있는 전문가 양성을 목표로 하고 있습니다.

 강의 특징

• ㆍ기초부터 시작하는 스타트업 과정
• ㆍHTML5 와 CSS를 이용한 미니프로젝트 연계 수업
• ㆍ개인별 과제 평가 및 개인별 케어
• ㆍ실무규모의 프로젝트 산출
• ㆍ포트폴리오 구축

수강대상

• 웹 퍼블리셔 취업 희망자
  웹 퍼블리싱 포트폴리오
  구축 희망자
• HTML5, 웹 접근성을 포함한
  기술을 습득하고 싶은 자
  웹 클라이언트(서버) 전체에 대한
  이해를 하기 위한 자
• 디자인 영역에서 퍼블리싱까지
  영역을 확장하고 싶은 자
  프리랜서 디자이너 및 기획자

WPPA 포트폴리오

1. 

   Jung-Eun Lee
   페이지 로딩과 함께 애니메이션이 진행되도록 제이쿼리를 통해 제작하였습니다.

2. 

   COSMYAN
   포트폴리오 사이트 입니다.

3. 

   molang
   스크롤을 통해 공간감이 느껴지는 패럴랙스 사이트입니다.

4. 

   MINIZM
   제이쿼리를 통해 화면전환이 이루어지게 제작한 사이트입니다.

5. 

   Responsive Web
   모든 브라운저와 디바이스에 대응할 수 있는 반응형 웹사이트입니다.

6. 

   Pona Flex
   HTML, CSS를 사용하여 워드프레스상의 페이지를 커스터마이징.

7. 

   Galaxy Tab
   JQuery로 동적인 효과를 준 갤럭시탭 마이크로 사이트의 메인페이지.

8. 

   STX Welfare
   기존에 있는 STX복지재단 사이트를 재현하였습니다.
   한글,영문 페이지 교체가능.

9. 

   Callery
   JQuery 플러그인을 사용하여 제작한 갤러리 사이트입니다. 태블릿까지 커버가능 합니다.

커리큘럼

• 
• 01. The Basic
• OT 및 환경설정 - 강의 전반의 소개와 강의 환경을 설정
  웹 이란 무엇인가?
  - 웹에 대한 정의와 역사
  - Web을 어떤게 구성해야 하는가
  Web을 설계하는 방법
  - 정보전달, 감성적 디자인, SEO 등 사용자의 요구를 만족하기 위한 웹 설계

• 
• 02. HTML
• HTML 1 : 정보의 기본구조 - HTML의 속성과 구조
  HTML 2 : 정보 시맨틱 구성 - 시멘틱 요소와 HTML5에서 추가된 아웃라인
  HTML 3 : 서식요소 - HTML5에서 강화된 서식기능과 요소
  HTML 4 : 새로운 정보 형태 - 멀티미디어 요소 등 새로 추가된 정보 형태

• 
• 03. CSS
• CSS 1 : 개념과 기초 - CSS3 선택자 집중 학습
  CSS 2 : Box 모델과 관련 속성
  - Box 모델과 요소 배치
  - Layout을 구성하기 위한 속성
  - 다양한 Layout 학습 (가변형, 고정형)
  CSS 3 : Text와 Font 관련 속성
  - 웹을 구성하는 타이포의 중요성
  - 웹 상의 텍스트 속성
  CSS 4 : Transform과 Animation 관련 속성
  - 애니메이션 관련 속성
  - 동적 화면을 만드는 방법

• 
• 04. 미디어쿼리 / 반응형 웹
• 미디어 쿼리를 사용한 반응형 웹사이트 이해
  - 사례중심의 반응형웹사이트 분석과 이해

• 
• 05. Javascript / jQuery/UI 개발
• 역동적이고 창의적인 사이트 작업 구현
  클라이언트(서버) 동적 작업의 이해
  Javascript 기초 문법
  jQuery 기초 및 활용
  UI 개발 실습

• 
• 06 미니 프로젝트 1
  Native App Design
• HTML과 CSS만을 사용한 사이트 작업

• 
• 07. 미니 프로젝트 2
• 미니 프로젝트 1의 작업에 동적인 작업 추가
  Server Side와 Client Side 이해
  서버 환경 학습, 방명록 or 게시판 개발
  PHP, MySql 을 통해 웹 서버 작업의 이해

• 
• 08. 실무 프로젝트
• 앞서 학습한 내용을 응용하여 실무규모 프로젝트 진행

• 
• 09. 특강
• 웹접근성과 사용성향상을 위한 웹 표준 기술
  웹 / 모바일 접근성 실무 가이드

 강사소개