Training Class

HTML / CSS Responsive Web.

웹표준 실전&반응형

일자         2019.11.16 ~ 2019.12.21

요일         주 1회 (토)

시간         14:30 ~ 18:30

장소         봄아카데미 오렌지룸

1개월 과정
336,000 원

강의 정보

HTML & CSS 란?

HTML은 웹 사이트를 만들기 위하여 사용하는 기본적인 프로그래밍 언어의 한 종류로, 웹 사이트를 다양하게 설계하고 수시로 변경할 수 있도록 CSS라는 스타일 시트와 함께 쓰입니다.

쉽게 설명해서 HTML이 웹 사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같이 꾸며주는 역할을 담당한다고 할 수 있습니다.

하나의 웹 사이트를 구성하는 웹 페이지들이 적게는 몇 십부터 많게는 수만까지 될 수 있으므로 웹 사이트는 규칙을 기반으로 디자인되어야하며 이렇게 만들어진 웹 사이트야말로 웹다운 큰 힘을 갖게 됩니다.

그러므로 디자이너는 HTML/CSS에 대한 충분한 이해로 크리에이티브한 시각언어를 규칙 안에 담아낼 때 현장감 있고 현실성 있는 좋은 웹 디자인을 만들어낼 수 있게 됩니다.

 

주요 특징

HTML5/CSS3의 새로운 기능을 익혀서 본인만의 반응형 웹 사이트 제작

HTML과 CSS는 비표준시대, 웹 표준시대, HTML5/CSS3시대로 크게 나누어 생각해 볼 때 우리나라는 현재 웹 표준이 완전히 정착되고, 이제 HTML5/CSS3시대로 넘어가고 있는 지점에 서있다고 할 수 있습니다. HTML과 CSS의 경우 하위 호환성, 즉 과거의 문법과 기능을 대부분 고스란히 안고 새로운 문법과 기능을 추가시켜나가는 보편성의 철학에 따라 발전하는 기술입니다.

그러므로 HTML5/CSS3시대의 새로운 기능은 고유의 HTML과 CSS를 충분히 이해하는 가운데, 하나씩 더해가며 배우는 것이 가장 좋다고 할 수 있습니다.

본 강의에서는 HTML5/CSS3에서 새롭게 더해진 기능을 배우면서 기존과 무엇이 달라졌고, 디자인에서 어떻게 응용할 수 있을지 해외의 사례를 들어 구체적으로 알아봅니다.

사실 HTML5만으로도 책 한 권이 나올 정도로 멋진 기능이 많습니다만, 그 모든 것이 디자이너에게 필요한 것은 아닙니다.

따라서 아직까지 몰라도 될 정도의 정착 단계의 속성은 배제하고 실무와 트렌드를 감안하여 디자이너에게 꼭 필요한 부분에 대해 깊이 있게 진행합니다.

하나의 기능과 사용법을 예시와 그림을 통해 쉽고 깊이 있게 설명하면서, 해당 기능을 새로운 디자인에 응용해봄으로써 진짜 자기 것으로 만들어나가게 됩니다.

또한, 강의 말미부터 HTML5/ CSS3를 활용하여 수강생이 스스로 코딩해본 뒤 강사에게 크리틱 받는 방식으로 본인만의 반응형 웹 사이트를 제작하게 됩니다.

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

HTML/CSS 강의의 원칙

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

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

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

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

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

HTML/CSS에 사용되는 강의자료(PDF) 총 700여장

HTML/CSS가 진행되어 온 기간 총 77개월 (2019년 5월 기준)

HTML/CSS를 거쳐간 학생의 수 총 1,100명

 

커리큘럼

Part 1.

CSS3의 새로운 표현들

  • 그림자

  • 라운드 박스

  • 그라데이션

  • 웹폰트

Part 2.

CSS3의 새로운 계산, 범위, 선택 방법

  • 새로운 계산식

  • 범위

  • 다양하고 강력한 선택자

Part 3.

반응형웹에서 중앙 정렬

  • position을 사용한 정렬

Part 4.

변하는 상자안의 이미지 다루기

  • <picture><source >

  • srcset속성

Part 5.

%, em, vm, vh 을 이용한 박스 사이징

  • em과 %

  • min-width,height / max-width,heigh

Part 6.

플렉서블하게 박스 다루기

  • 블로그 플렉서블하게 만들기

  • 웹사이트 플렉서블하게 만들기

Part 7.

미디어쿼리와 뷰포트

  • 디바이스 사이즈의 이해

  • 미디어 쿼리

Part 8.

반응형 웹 만들기 실습

  • 반응하는 블로그 만들기

  • 반응하는 사이트 만들기

 
 

강의 자료

강의 자료는 무엇인가요?

다년간 강의를 진행하면서 다듬어온 강사의 교육자료(PDF)와 단계별 훈련을 위해 준비한 실습 예제 파일을 아낌없이 공유해드립니다.

 

강의 결과물

결과물은 무엇인가요?

정을수 강사의 Understanding HTML/CSS 시리즈를 모두 거치게 되면 아래와 같은 디자인 작업물을 스스로의 힘으로 코딩할 수 있게 됩니다.

 

​강의 대상

  • HTML/CSS, Javascript를 배우려는 분

  • 책이나 강의를 들어도 이해가 어려운 분

  • 개념이 선명하지 않아 작업이 우연하게 이루어지는 분

  • 더 좋은 조건으로 이직하려는 디자이너 분

  • 프론트엔드 개발자가 되려는 분

강사 소개

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

현) 봄아카데미 웹표준, 프론트엔드 강사

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

전) 메가존 웹표준화 팀장

 

프로젝트

- 2014~현재, Vom Academy 웹표준, 프론트엔드 개발 강의

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

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

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

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

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

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

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

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

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

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

정을수

프론트엔드 디벨로퍼, 봄아카데미 주강사

 
 

자주 하는 질문

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

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

 

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

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

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

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

 

수강 안내

강의장비

- Apple iMac 21.5-inch

소프트웨어

- Adobe Photoshop CS6, Text Editor

 

 

교재

- 강사가 준비한 예제 파일

 

 

수강생 준비물

- 메모지, 필기구

footer-logo.png
Bloom Your Possibility

​서울시 마포구 독막로9길 23 | 대표 백경찬 | 02-325-1500 | vomacademy@gmail.com

© 2019 VOMACADEMY