Today at Vom
Class of Vom
Portfolio of Vom
Who we are
Contact Vom
TRAINING CLASS
Class Visual Icon
STEP 1

HTML/CSS
Beginner

웹표준 기초
일자 2019.02.23~2019.03.30
요일 주 1일(토)
시간 09:30 ~ 13:30
장소 봄아카데미 그린룸
수량
336000

강의 정보

HTML & CSS 란?

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

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

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

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

HTML 과정 스텝
강의 대상
  • HTML/CSS를 처음 시작하는 분
  • 책이나 강의를 들어도 이해가 어려운 분
  • 개념이 선명하지 않아 작업이 우연하게 이루어지는 분
  • 더 좋은 조건으로 이직하려는 디자이너 분
  • Front-end 개발자가 되려는 분
주요 특징

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

HTML/CSS는 비교적 쉬운 컴퓨터 언어에 속하지만,
익숙해지는 데 시간이 걸리므로 생각만큼 배우기 수월하지 않습니다.

본 강의에서는 HTML/CSS에 대한 기본적인 이해와 사용 방법을
그림과 설명을 통해 충분히 이해하고 개념을 확실하게 세웁니다.

또한 준비된 예제를 통해서 브라우저 입장에서
이해하는 훈련과 머릿속으로 그리는 연습을 해나가게 됩니다.

특히, 디자이너가 웹 표준을 배우는데 있어서 가장 어려운 부분인
float을 이용한 배치를 완전히 이해하는 것에 최종적인 포커스를 맞추고 있습니다.

이를 통해 막연하고 우연히 이뤄졌던 작업이 명확하게 되고,
작업에서 왜 이렇게 깨져서 보이는지도 이해하게 됩니다.

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

HTML/CSS 강의의 원칙

Understanding 시리즈 아이콘 1

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

Understanding 시리즈 아이콘 2

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

Understanding 시리즈 아이콘 3

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

Understanding 시리즈 아이콘 4

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

Understanding 시리즈 아이콘 5

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

강의 사진 1
강의 사진 2
강의 사진 3
커리큘럼
1강 개념과 준비
  • 예술과 기술, 융합의 시대
  • 미디어와 시멘틱 웹
  • 웹 표준 HTML/CSS 소개
  • 웹타입셋팅이란?
  • 어떻게 익힐 것인가?(Why&Doing)
  • 준비하기(브라우저, 에디터, 기타도구, 도서, 아티클, 시간사용과 연습방법)
2강 시멘틱 마크업
  • HTML 기초 문법
  • hello world!
  • 제목(heading)
  • 문장(paragraph)
  • 목록(list)
  • 이미지(image)
  • 그룹핑(grouping)
  • 인용(quotation)
  • 부가정보(additional)
  • 강조(strong)
  • 링크(link)
  • 페이지 정보(page info)
3강 기초 스타일링(1)
  • HTML에 CSS 적용하기
  • CSS 기초 문법
  • Reset.css 준비하기
  • Id와 Class 사용하기
  • 기초선택자, 가상선택자
  • Font 스타일링
  • Text 스타일링
4강 기초 스타일링(2)
  • 단위
  • 상속
  • 우선순위
  • 속성선택자
5강 박스 다루기(1)
  • 박스로 생각하기
  • 박스의 성질
  • 박스의 종류
  • 너비와 높이
  • 여백과 간격
Triangle Surface (외부 플러그인)를 이용한 패턴 제작
6강 박스 다루기(2)
  • 선긋기
  • 배경색과 배경이미지
  • Overflow, display, visibility
7강 배치하기(1)
  • 웹에서의 배치란?
  • 마크업에서 배치까지
  • 관계성 있는 배치
  • Block formatted context
  • Inline formatted context
  • Position:relative
  • 플롯팅
  • 클리어링
8강 배치하기(2)
  • 관계성 없는 배치
  • Position:absolute
  • Position:relative
  • Position:fixed
  • 박스가 보이는 순서
강의 자료

강의 자료는 무엇인가요?

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

강의 자료 이미지
강의 결과물

결과물은 무엇인가요?

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

강의 결과 이미지1
강의 결과 이미지2
강사 소개
아바타 사진
정을수 웹표준 프로페셔널리스트, 봄아카데미 주강사

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

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

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

전) 메가존 웹표준화 팀장

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

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

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

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

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

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

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

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

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

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

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

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