웹의 동적구현을 위한 트렌드와 시장의 요구에 맞는 프론트엔드 개발자로 첫 발을 내딛을 수 있는 포트폴리오 실무 교육

퍼블리셔 & 프론트엔드 개발자로 성장하기 위해선 html과 css 기초를 탄탄히 쌓는 것이 매우 중요합니다.
하지만 기초 지식을 실전에 어떻게 사용하는지는 경험하지 않는 이상 배울 수 없는 부분들이 많이 있습니다.

본 과정에서는 html, css의 기본 개념을 탄탄히 쌓아 실무 프로젝트를 진행할 수 있는 지식을 기르고,
포트폴리오 사이트 제작을 위해 구체적인 방향을 제시합니다.

html, css를 시작으로 자바스크립트 및 제이쿼리 기초 및 활용, 반응형 웹, 동적 UI 구현 그리고
최종 포트폴리오 사이트 구성까지 진행하며, 체계적인 훈련으로 프론트엔드 개발자로의 첫 발을 내딛게 될 것입니다.

• - 강의목표
• - 퍼블리셔란?
• - 다른파트와의 협업
• - 프로젝트동향 및 용어
• - 실무문서(스토리보드, 가이드, 퍼블리싱 목록 등)
• - 실습환경 및 에디터 소개(브라켓, git, github)

• - Html 기본 구조
• - Html 주요 태그
• - 메타 태그
• - 시멘틱 태그
• - block, inline, inline-block

• - 스타일적용방법
• - 선택자
• - 웹폰트
• - 폼태그 디자인(input, radio, check, select, button, switch)
• - reset과 크로스브라우징

• - 박스모델의 이해
• - position, float, overflow
• - Flexbox
• - Multi-column Layout

• - Animation, transform, transition
• - Sprites Sheet Animation
• - loading 애니메이션 만들기

• - 반응형 기본 개념
• - 반응형 적용
• - 반응형 구조
• - 뷰포트, 플렉서블 박스

• - 데이터타입
• - 기본문법
• - CSS를 이용한 효율적인 스크립트 짜기
• - jQuery 주요 플러그인 적용법

• - 레이아웃 구조잡기
• - css재사용을 위한 효율적 구조잡기(네이밍, 멀티클래스, 선택자 등)

• - 게시판 만들기
• - 쇼핑몰 목록 만들기
• - 레이어팝업 만들기

• - 자리 예약 시스템 만들기

• - 상용사이트 벤치마킹 마크업&CSS

• - jQuery&CSS3 인터렉션 디테일 적용하기

• - 강의목표
• - html 기초정리
• - 실습환경 및 에디터 소개(브라켓, git, github)

• - CSS 기초 복습 (Box 모델, Position)
• - 미디어 쿼리
• - 반응형웹 구현

• - 프로그래밍 기초
• - UI구현에 필요한 자바스크립트 기본 문법
• - jquery 기본

• - jquery 활용
• - jquery 플러그인
• - json & xml 활용

• - json을 이용한 비동기 페이지 만들기

• - keyboard event & append 활용

• - 상용사이트 메인 & 서브 페이지 구현

• - 웹디자인 파일 컷팅과 사이트 구조 잡기

• - ajax를 활용한 No reflesh 사이트 구현

• - ajax를 활용한 No reflesh 사이트 구현

• - fullpage & Parallax를 활용한 원페이지 사이트 구현

• - fullpage & Parallax를 활용한 원페이지 사이트 구현

A타입

B타입