Understanding HTML/CSS

깊이 이해하고 쉽게 배우는

Curriculum

"그렇기 때문에 HTML5/CSS3의 새로운 기능은 고유의 HTML/CSS를 충분히 이해하는 가운데 하나씩 더해서 배우는 것이 가장 좋다고 할 수 있습니다."

Understanding 웹표준마스터

웹표준 마스터 과정은 Understanding시리즈의 4단계의 과정을 종합한 과정입니다. 90시간(약 2달반)에 걸쳐서 기초편 / 응용편 / 실전편 / HTML5.CSS3,반응형웹을 모두 마치는 과정입니다. 디자이너로서 코드를 전혀 다뤄 본적이 없는 분이라도 재밌게 시작할 수 있는 수업이 될 것 입니다.

웹표준의 기초부터 접근성, 반응형웹까지 익히게 되며 지식으로 아는 수업이 아닌 실무에서 일어 나는 상황과 원리를 연결하여 이해와 반복 그리고 실습을 통해 실제 디자인을 코드로 만들수 있는 능력을 기르는 그 목적이 있습니다.

코드가 배워진다는 것은 머리로 이해할 뿐 아니라 손이 알아지는 과정이므로 연습할 시간이 부족한 웹디자이너 일지라도 수업시간에 실제 사용되고 있는 웹사이트를 가지고 아주 쉬운 조각부터 하나의 사이트 전체를 만들어 보면서 공부하게 됩니다.

많은 프로젝트의 경험을 태그와 속성 하나 하나에 연결하고 언어를 설계한 의도를 이해하는 방식으로 HTML과 CSS에 대한 깊은 이해를 자연스럽게 손과 머리에 배어 들도록 진행하고 있습니다.

처음 코딩을 배우는 분들에게 가장 필요한 것은 코드를 입력하기 전에 머리속에서 그림으로 설계되어 지는 능력이 생기는데 있습니다. 특별히 디자이너라면 습관적으로 대부분의 사고를 머리속 그림으로 이해하기 때문에 딱딱한 컴퓨터 언어는 어려울 수 밖에 없습니다. 누구나 마음만 먹으면 찾을 수 있는 최신속성과 스킬만을 얻어가는 주입식 방식이 아닌 트랜드와 연결된 웹기술의 안목, 흥미, 배움이 일어나도록 하고 있습니다.

웹표준마스터편의 대상

  • 가장 기초부터 원리를 이해하면서 배우고 싶은 분들
  • 대학생 혹은 취업 준비자
  • 디자이너이면서 코딩업무를 병행하셔야 하는 분들
  • 프론트엔드 개발자를 준비하시는 분들
  • 개인 쇼핑몰이나 블로그를 운영하는데 HTML/CSS를 다루셔야 하는 분들
  • 책이나 강의를 들어도 이해가 어려운 분들
  • 개념이 선명하지 않아 우연하게 작업이 이루어지는 분들

SECTION1 - 기초

01 : 개념과 준비

  • 예술과 기술. 융합의 시대
  • 미디어와 시멘틱웹
  • 웹표준 html/css 소개
  • 웹타입셋팅란?
  • 어떻게 익힐것인가? (why & doing)
  • 준비하기 (브라우저, 에디터, 기타도구, 도서, 아티클, 시간사용과 연습방법)

02 : 시멘틱 마크업

  • html 기초 문법
  • hello world!
  • 제목 (heading)
  • 문장 (pragraph)
  • 목록 (list)
  • 이미지 (image)
  • 그룹핑 (grouping)
  • 인용 (quotation)
  • 부가정보 (additional)
  • 강조 (strong)
  • 링크 (link)
  • 페이지정보 (page info)

03 : 기초 스타일링(1)

  • HTML에 CSS 적용하기
  • CSS 기초 문법
  • reset.css 준비하기
  • id와 class 사용하기
  • 기초선택자, 가상선택자
  • font 스타일링
  • text 스타일링

04 : 기초 스타일링(2)

  • 단위
  • 상속
  • 우선순위
  • 속성선택자

05 : 박스다루기-1

  • 박스로 생각하기
  • 박스의 성질
  • 박스의 종류
  • 넓이와 높이
  • 여백과 간격

06 : 박스다루기-2

  • 선긋기
  • 배경색과 배경이미지
  • overflow, display, visibillity

07 : 배치하기-1

  • 웹에서의 배치란?
  • 마크업에서 배치까지
  • 관계성 있는 배치
  • block formatted context
  • inline formatted context
  • position:relative
  • 플롯팅
  • 클리어링

08 : 배치하기-2

  • 관계성 없는 배치
  • position:absolute
  • position:relative
  • position:fixed
  • 박스가 보이는 순서

SECTION2 - 응용

09 : 응용 LEVEL1

플롯속성에 포커스를 맞추고 사용되는 실제 디자인을 통해 박스가 상황에 따라 어떻게 변형되는지를 선명하게 이해하고 다양하게 응용해 봅니다.

  • 실습1. 구)네이버 오늘의 캐스트 영역
  • 실습2. 구)다시보는 캐스트 영역

10 : 응용 LEVEL2

클리어링에 포커스를 맞추고 플롯을 사용한 후 다양한 클리어링이 어떻게 응용되는지를 상황별로 실험해 봅니다. 또한 기초편 보다 깊이 있는 우선 순위 응용연습과 다양한 선택자를 이용한 구조적 사고를 연습합니다.

  • 실습3. 구)네이버 오픈 캐스트 영역
  • 실습4. 구)네이버 주제별 캐스트의 카/테크 영역

11 : 접근성 있는 표 사용

표짜기에 대한 이해와 더불어 스크린리더가 표를 어떻게 읽고 어떻게 접근성을 갖출 수 있는지를 배우며 디테일한 디자인을 입힐 수 있도록 깊이 표의 속성과 더불어 트렌드에 맞는 표 디자인을 위한 방법을 알아봅니다.

  • 표짜기 기본과 활용
  • 접근성 있는 표
  • 표를 위한 CSS응용
  • 실습5. 게시판

12 : 접근성 있는 입력양식 사용

여러가지 입력양식을 쉽고 통일감 있게 배우며, 접근성을 위해 어떤점에 유의 해야하는지를 살펴봅니다. 아울러 트렌드에 맞는 입력양식 폼을 위한 CSS기법을 알아봅니다.

  • 입력양식 기본과 활용
  • 접근성 있는 양식
  • 양식을 위한 CSS응용
  • 실습6. 입력양식

13 : 응용 LEVEL3

포지션에 포커스를 맞추고 상자를 다루는 법을 계속해서 응용 연습하며 기초편에서 배우지 않은 비주얼 스택구조, IR기법등을 배우고 장단점에 맞게 응용해 봅니다.

  • 실습7. 구)네이버 주제별 캐스트의 게임 영역
  • 실습8. 구)네이버 로그인 영역

14 : 응용 LEVEL4

여러가지 입력양식을 쉽고 통일감 있게 배우며, 접근성을 위해 어떤점에 유의 해야하는지를 살펴봅니다. 아울러 트렌드에 맞는 입력양식 폼을 위한 CSS기법을 알아봅니다.

  • 실습9. 구)네이버 주제별 캐스트의 만화 영역
  • 실습10. 구)네이버 주제별 캐스트의 만화 영역

15 : 응용 LEVEL5

실제 웹사이트의 소개페이지를 선정해 해당 상황에서의 레이아웃을 살펴보고 응용해 봅니다. 또한 디자인 상황에 맞는 네이밍과 적절한 구조화를 연습합니다.

  • 2단 레이아웃
  • 3단 레이아웃
  • flexible 레이아웃

16 : 웹표준 실무 스킬

  • 웹 접근성 기초와 원칙
  • 사이트 규모별 CSS구조 설계
  • 실무에서의 업무 셋팅

SECTION3 - 실전

17 : 구조설계와 레이아웃

전체적인 컨텐츠와 디자인을 검토하여 CSS구조와 레이아웃 구조를 설계하며, 컨텐츠와 디자인 특성에 맞게 마크업 시작하기
(주요포인트: CSS구조, 네이밍규칙, 디자인구조파악, float&clear)

18 : 브래드커럼스 / 서브메뉴 / 풋터

접근성을 고려한 마크업과 추가되는 메뉴를 고려해 확장성있는 메뉴와 풋터 작업하기
(주요포인트: vertical-align, background, float&clear)

19 : 회사소개 페이지

각기 다른 컨텐츠들을 관리하기 쉽도록 규칙을 만들어 작업하기
(주요포인트: 네이밍규칙, background, 음수마진, float&clear)

20 : 제품, 서비스소개 페이지

동일한 컨텐츠를 최소한의 CSS를 사용하여 효율성있게 작업하기

21 : 입력양식 / 게시판

접근성있는 입력양식을 디자인 상황에 맞게 만들고 한 사이트에 사용되는 다양한 테이블에 규칙을 부여하고 스타일링 작업하기

22 : 상단메뉴

자바스크립트를 고려하고 확장성 있는 메뉴를 위한 마크업과 스타일링하기

23 : 메인 페이지

메인페이지의 조밀하고 복잡한 메인 페이지를 실습합니다.

24 : 실전 웹표준 크리틱

실무에서 사용되는 기획서와 디자인을 가지고 직접 작업해 보고 크리틱을 받기

SECTION4 - HTML5/CSS3/반응형웹

25 : 의미의 확장 / 리치미디어와 웹폼

HTML5에서 새롭게 확장된 의미적 태그를 실제예와 실습을 통해서어떻게 달라졌는지, 그리고 구글 검색기의 입장에서 어떻게 의미적인 코드로 받아 드릴지를고민하고 디자인에 어떻게 녹여 낼지를 배워나갑니다.그동안 무겁고 불편했지만 멋지게 사용했던 플래쉬. 거기에 전적으로 의지했었던비디오나 오디오, 벡터그래픽을 HTML5에서 어떻게 사용하는지 배우고 좀 더 친절해진 폼(입력양식)관련 기능을 알아봅니다.

26 : 웹폰트와 박스를 위한 새로운 표현들

조금만 확대해도 깨져 보이던 이미지 폰트가 아닌 웹에서 라이브 텍스트(시스템 폰트)를 사용하는 방법과 거기에 그림자 효과와 더불어 CSS만으로 문단 배치를 할 수있도록 하는 방법을 알아봅니다.아마도 CSS3속성중에서 우리가 가장 환영할 만한 섹션이라고 생각하는대요둥근모서리 박스와 투명도 조절을 할 수 있고 게다가 여러가지 이미지를 하나의 박스에 배경으로 사용할 수 있습니다.

27 : 트랜지션과 트랜스폼, 애니메이션폰트와 텍스트

CSS만으로 쉽게 부드러운 이징효과를 주고 쉽게 대상을 돌리고, 움직이고 변형시키는 법을 알아보고 CSS만으로 Javascript보다 더 부드럽게 보이도록 대상에 애니메이션을 만들어 봅니다.

28 : CSS로 포토샵 버리기

포토샵을 사용하지 않고 주어진 HTML과 이미지를 가지고 CSS3만으로 웹페이지를 직접 리디자인 해보는 시간을 갖습니다.

29 : 유연하게 반응하는 상자 만들기

다양한 사이즈의 디바이스에 맞추어 사용할 수 있도록 사이즈에 유연하게 반응하는 페이지에 알맞는 단위와 계산법을 배우고 만들어 봅니다.

30 : 모바일 퍼스트와 미디어 쿼리

CSS만으로 Javascript보다 더 부드럽게 보이도록 대상에 애니메이션을 줄 수 있습니다.