Today at Vom
Class of Vom
Portfolio of Vom
Who we are
Contact Vom
PORTFOLIO CLASS
Class Visual Icon
02

HTML/CSS
Bootcamp

HTML/CSS 부트캠프
일자 2019.01.28~2019.02.27
요일 주 3회 (월, 수, 금)
시간 12:00 ~ 18:00
장소 봄아카데미 그린룸
수량
936000

강의 정보

이제 코딩으로 스펙업!
디자인과 기술의 경계를 넘어라.

본 강의는 단순한 속성 위주의 강의가 아닙니다.
깊이 있고 폭넓은 이해와 시야를 바탕으로 체계적이고 단계적인 훈련을 통해
실무에서도 응용 할 수 있는 참 능력이 되도록 하는 것이 목표입니다.

모니터 화면

아는 것 VS 할 수 있다는 것

웹표준을 가르치는 곳은 많습니다.
그러나 체계적인 커리큘럼으로 수강생이 차근차근 배워나가는 즐거움을 누릴 수 있는 곳은 많지 않습니다.
봄아카데미의 웹퍼블리셔 양성 과정은 빈틈 없는 코딩 능력을 갖춤으로써 업무의 전문성을 높이고
취업 분야를 넓혀주는 것을 교육 목표로 삼고 있습니다.

기기 이미지
주요 특징

HTML/CSS의 선명해진 개념을
손으로 익히며 훈련하는 단계

봄아카데미의 ‘웹퍼블리셔 양성 과정’은 그래픽디자이너로 시작해서 웹표준을 독학으로 공부하여
펜타브리드 수석 디렉터로 근무했던 정을수 강사가 세심하게 연구하고,
오랜 강의 경험을 통해 완성한 커리큘럼으로 지도합니다.

매 강의마다 진화하는 정을수 강사의
HTML/CSS 강의는 이렇게 탄생했습니다.

HTML/CSS 강의의 시리즈의 원칙

Understanding 시리즈 아이콘 1

최대한 쉽게 설명하여 누구나 이해할 수 있도록 할 것

Understanding 시리즈 아이콘 2

점진적으로 향상되는 즐거움과 재미가 있을 것

Understanding 시리즈 아이콘 3

최대한 일반인이 생각할 수 있는 단어와 그림으로 기술적 원리를 설명할 것

Understanding 시리즈 아이콘 4

기술에 대한 폭넓은 이해, 디자인과 기술간의 인사이트를 수업에서 경험하도록 할 것

Understanding 시리즈 아이콘 5

실제 실무 작업과 괴리감이 없어 배운 것을 현장에서 적용할 수 있도록 할 것

강의 사진 1
강의 사진 2
강의 사진 3
주요 특징

오랜 강의 경험을 통해 완성한 커리큘럼

봄아카데미의 ‘웹퍼블리셔 양성 과정’은 그래픽디자이너로 시작해서 웹표준을 독학으로 공부하여
펜타브리드 수석 디렉터로 근무했던 정을수 강사가 세심하게 연구하고,
오랜 강의 경험을 통해 완성한 커리큘럼으로 지도합니다.

HTML/CSS 코드를 기초부터 차근차근 배운 뒤 업그레이드

기업에서 원하는 코딩 능력을 갖추는 것이 단기간에 쉽게 되지는 않습니다. 본 과정은 HTML/CSS 코드를
기초부터 차근차근 배운 뒤 업그레이드해 나가게 됩니다. 또한 강사로부터 습득한 지식을 복습하고,
수강생끼리 생각을 교류하여 사고의 근육을 키우며 개인의 부족한 부분을 채울 수 있도록 스터디그룹을
진행합니다.

책임지는 포트폴리오

포트폴리오 기획을 마치면 필요한 자료를 수집하고 제작하여 훈련기간 후반에 발표합니다. 다른 수강생과
강사의 피드백을 받아 포트폴리오를 발전시켜 최종 완성합니다. 포트폴리오 완성이 늦어져서 훈련기간을
경과한 경우에는 봄아카데미에서 별도의 과정을 개설하여 포트폴리오가 완성될 때까지 끝까지 책임지고
지도합니다.

커리큘럼
Part.1 파운데이션 과정 소개
1강 개념과 준비
  • 예술과 기술. 융합의 시대
  • 미디어와 시멘틱웹
  • 웹표준 HTML/CSS 소개
  • 웹타입셋팅란?
  • 어떻게 익힐것인가? (why & doing)
  • 준비하기 (브라우저, 에디터, 기타도구, 도서, 아티클, 시간사용과 연습방법)
2강 시멘틱 마크업
  • HTML 기초 문법
  • hello world!
  • 제목 (heading)
  • 문장 (pragraph)
  • 목록 (list)
  • 이미지 (image)
  • 그룹핑 (grouping)
  • 인용 (quotation)
  • 부가정보 (additional)
  • 강조 (strong)
  • 링크 (link)
  • 페이지정보 (page info)
3강 기초 스타일링(1)
  • HTML에 CSS 적용하기
  • CSS 기초 문법
  • Reset.css 준비하기
  • Id와 Class 사용하기
  • 기초선택자, 가상선택자
  • Font 스타일링
  • Text 스타일링
4강 기초 스타일링(2)
  • 단위
  • 상속
  • 우선순위
  • 속성선택자
5강 박스다루기(1)
  • 박스로 생각하기
  • 박스의 성질
  • 박스의 종류
  • 넓이와 높이
  • 여백과 간격
6강 박스다루기(2)
  • 선긋기
  • 배경색과 배경이미지
  • overflow, display, visibillity
7강 배치하기(1)
  • 웹에서의 배치란?
  • 마크업에서 배치까지
  • 관계성 있는 배치
  • Block formatted context
  • Inline formatted context
  • Position:relative
  • 플롯팅
  • 클리어링
8강 배치하기(2)
  • 관계성 없는 배치
  • position:absolute
  • position:relative
  • position:fixed
  • 박스가 보이는 순서
Part.2 응용과 실전 과정 소개
1강 포털사이트의 게임 소개 영역
2강 포털사이트의 자동차 소식 영역
3강 포털사이트의 캐스트 영역
4강 포털사이트의 만화/웹툰 영역
5강 구조설계와 레이아웃
  • 전체적인 컨텐츠와 디자인을 검토
  • CSS구조와 레이아웃 구조를 설계
  • 컨텐츠와 디자인 특성에 맞게 마크업 시작
6강 브래드커럼스 / 서브메뉴 / 풋터
  • 접근성을 고려한 마크업
  • 추가되는 메뉴를 고려해 확장성있는 메뉴와 풋터 작업
7강 회사소개 페이지
  • 각기 다른 컨텐츠들을 관리하기 쉽도록 규칙을 만들어 작업
8강 제품, 서비스소개 페이지
  • 동일한 컨텐츠를 최소한의 CSS를 사용하여 효율성있게 작업
9강 입력양식 / 게시판
  • 접근성있는 입력양식을 디자인
  • 다양한 테이블에 규칙을 부여하고 스타일링 작업
10강 상단메뉴
  • 자바스크립트를 고려
  • 확장성 있는 메뉴를 위한 마크업과 스타일링
11강 메인 페이지
  • 메인페이지의 조밀하고 복잡한 메인 페이지를 실습
Part.3 반응형 웹 과정 소개
1강 CSS3의 새로운 표현들
  • 그림자
  • 라운드 박스
  • 그라데이션
  • 웹폰트
2강 CSS3의 새로운 계산, 범위, 선택 방법
  • 새로운 계산식
  • 범위
  • 다양하고 강력한 선택자
3강 반응형웹에서 중앙 정렬
  • position을 사용한 정렬
4강 변하는 상자안의 이미지 다루기
  • <picture><source >
  • srcset속성
5강 %, em, vm, vh 을 이용한 박스 사이징
  • em과 %
  • min-width,height / max-width,heigh
6강 플렉서블하게 박스 다루기
  • 블로그 플렉서블하게 만들기
  • 웹사이트 플렉서블하게 만들기
7강 미디어쿼리와 뷰포트
  • 디바이스 사이즈의 이해
  • 미디어 쿼리
8강 반응형 웹 만들기 실습
  • 반응하는 블로그 만들기
  • 반응하는 사이트 만들기
강의 결과물

100% 스스로 코딩한 반응형
웹사이트 포트폴리오 제작

웹퍼블리셔 스페셜리스트 강의에 참여한 학생들은 아래와 같은 수준의
반응형 웹사이트를 직접 제작하게 됩니다.

디바이스 배경 이미지
룩아웃
와이어레스 페스티벌
레이드 파크
푸른트
인터내셔널 폴러 파운데이션
하이론델
팩
재팬 타임즈
강의 대상
  • HTML / CSS를 배우려는 분
  • 책이나 강의를 들어도 이해가 어려운 분
  • 개념이 선명하지 않아 작업이 우연하게 이루어지는 분
  • 더 좋은 조건으로 이직하려는 디자이너 분
  • 프론트엔드 개발자가 되려는 분
강사 소개
아바타 사진
정을수 웹표준 프로페셔널리스트, 봄아카데미 주강사

현) 프리랜서 디렉터 및 디자이너

현) 봄아카데미 웹표준 강사

전) 펜타브리드 수석 디렉터

전) 메가존 웹표준화 팀장

프로젝트
  • 2014~현재, Vom Academy 웹표준 강의

  • 2013~현재, (사)한국인터넷전문가협회 웹표준 강의

  • 2011~2014, 아카데미정글 웹표준 강의

  • 2013. 한국디자인진흥원 국가기간전략산업직종 UX/UI 디자인 4기 교육

  • Godpeople.com 디자인팀 웹표준 교육

  • 2013. 에스원 웹사이트 웹접근성 고도화 (디렉터)

  • 2012. 에스원 웹사이트 구축 (PM)

  • 2012. 현대 아산정주영 웹사이트 구축 (PM)

  • 2012. 현대자동차국내판매 웹사이트 구축 (UI 디렉터)

  • 2012. 삼성HSPOSM 웹사이트 구축 (PM)

  • 2012. 코스콤 웹접근성 고도화 (PM)

수강 후기
수강생 후기
박정현 와디즈

여러 고민에 휩싸여 섣불리 아무것도 하지 못할 때, 조금은 충 동적으로 봄 디자인을 선택했습니다. 뭐라도 해보자는 생각으 로 시작했던 저에게 학원과 선생님은 열정과 진심으로 보답했 습니다. 그렇게 하루 이틀 배워갈수록 뭐라도 해낼 수 있겠다 는 자신이 생기기 시작했고, 그 결과로 꿈꾸던 회사에 다니고 있습니다. 기술적인 부분은 물론이고 선생님의 태도와 자세에 서도 많은 것을 배웠습니다. 수료 후 고민이 있어 찾아갈 때도 항상 봄처럼 따뜻하게 맞아주셔서 늘 감사하게 생각합니다. 힘내시고, 항상 응원합니다. 감사합니다.

수강생 후기
윤나리 웹퍼블리셔 양성과정 수강생

선생님의 끊임없는 연구와 수업에 대한 열정 덕분에 전 아무런 배경지식이 없는 상태에서 들었음에도 불구하고 어느 정도 기 본기를 다질 수 있었습니다! 모르는 부분이 있으면 스스로가 이해할 수 있을때까지 설명해주신 것도 좋았습니다. 누구 한 명 낙오되지 않고 4달동안 퍼블리셔로서 일할 수 있는 밑바탕 을 마련해주신 정을수 선생님께 정말 감사드립니다!

수강생 후기
손나영 명진홀딩스

기초가 아예 없어서 걱정했는데 기초부터 꼼꼼하게 가르쳐 주셔서 좋았습니다. 포트폴리오를 직접 만들어 보면서 '왜 그 렇게 되는지' 이유를 알고 공부를 하니 더 알기 쉽고 제 것으로 만들 수 있었던 것 같습니다. 선생님도 친절하시고, 개개인의 수준에 맞춰 피드백 해주시고 무엇보다 하시는 일에 열정적인 모습에 배우는 학생들도 열정적으로 배웠던 것 같습니다. 퍼블 리셔를 준비하시는 분들에게 강추강추합니다~ 말로 설명이 안 됩니다. 직접 수업을 들어보세요!

자주 묻는 질문
Q. 코드를 전혀 모르는 사람도 이 과정을 들을 수 있나요?

A. 예, 가능합니다. 본 과정은 비전공자의 눈높이에서 기초부터 차근차근 배울 수 있도록 진행합니다. 과정이 진행되는
동안 교육 내용을 이해하고, 잘 따라온다면 좋은 결실을 맺을 수 있습니다.

Q. 강의를 마치면 과제는 어느 정도인가요?

A. 배운 내용에 대한 복습을 위해 과제를 부여하고 있습니다. 과제에 대한 피드백을 개별적으로 제공합니다.

Q. 수업 준비물이 필요한가요?

A. 아니오. 강의실에서 실습할 수 있는 아이맥 PC가 세팅되어 있고, 어도비사의 일러스트레이터와 포토샵 최신 버전이
설치되어 있습니다. 물론, 개인 노트북을 지참하셔도 되며, 간단한 필기도구와 종이를 준비해오면 됩니다. 교재는 자체
제작된 교안을 무상으로 배포합니다.

Q. 본 과정을 마치면 웹퍼블리셔가 될 수 있나요?

A. 예, 웹퍼블리셔가 될 수 있습니다. 하지만 좋은 웹퍼블리셔가 되기 위해서는 좀 더 장기적으로 보는 것이 좋습니다.
본 과정을 통해 기본기를 다지고 자바스크립트와 제이쿼리 등을 공부하여 본인의 실무 능력을 더 키우신다면 유능한
웹퍼블리셔가 될 수 있습니다.

수강 안내
강의장비
  • Apple iMac 21.5-inch
소프트웨어
  • Adobe Photoshop CS6, Text Editor
교재
  • 강사가 준비한 예제 파일
수강생 준비물
  • 메모지, 필기구
비밀번호 확인 닫기