Training Class

HTML / CSS Beginner.

웹표준 기초

일자         2019.07.06 ~ 2019.08.17 (7월 20일 휴강)

요일         주 1회 (토)

시간         14:30 ~ 18:30

장소         봄아카데미 오렌지룸

1개월 과정
336,000 원

강의 정보

HTML & CSS 란?

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

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

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

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

 

주요 특징

누구나 들을 수 있을 만큼 쉬우면서 중요한 기초 단계

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

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

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

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

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

HTML/CSS 강의의 원칙

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

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

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

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

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

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

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

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

 

커리큘럼

Part1.

개념과 준비

  • 예술과 기술, 융합의 시대

  • 미디어와 시멘틱 웹

  • 웹 표준 HTML/CSS 소개

  • 웹타입셋팅이란?

  • 어떻게 익힐 것인가?(Why&Doing)

  • 준비하기(브라우저, 에디터, 기타도구, 도서, 아티클, 시간사용과 연습방법)

Part.2

시멘틱 마크업

  •  HTML 기초 문법

  • hello world!

  • 제목(heading)

  • 문장(paragraph)

  • 목록(list)

  • 이미지(image)

  • 그룹핑(grouping)

  • 인용(quotation)

  • 부가정보(additional)

  • 강조(strong)

  • 링크(link)

  • 페이지 정보(page info)

Part.3

기초 스타일링(1)

  • HTML에 CSS 적용하기

  • CSS 기초 문법

  • Reset.css 준비하기

  • Id와 Class 사용하기

  • 기초선택자, 가상선택자

  • Font 스타일링

  • Text 스타일링

Part.4

기초 스타일링(2)

  • 기초 스타일링(2)

  • 단위

  • 상속

  • 우선순위

  • 속성선택자

Part.5

박스 다루기(1)

  • 박스로 생각하기

  • 박스의 성질

  • 박스의 종류

  • 너비와 높이

  • 여백과 간격

Triangle Surface (외부 플러그인)를 이용한 패턴 제작

Part.6

박스 다루기(2)

  • 선긋기

  • 배경색과 배경이미지

  • Overflow, display, visibility

Part.7

배치하기(1)

  • 웹에서의 배치란?

  • 마크업에서 배치까지

  • 관계성 있는 배치

  • Block formatted context

  • Inline formatted context

  • Position:relative

  • 플롯팅

  • 클리어링

Part.8

배치하기(2)

  • 관계성 없는 배치

  • Position:absolute

  • Position:relative

  • Position:fixed

  • 박스가 보이는 순서

 

강의 자료

강의 자료는 무엇인가요?

다년간 강의를 진행하면서 다듬어온 강사의 교육자료(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