Understanding HTML/CSS

깊이 이해하고 쉽게 배우는

Curriculum

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

Understanding HTML5/CSS3

HTML과 CSS는 비표준시대 / 웹표준시대 / HTML5-CSS3시대 이렇게 크게 세가지로 나누어 볼 수 있습니다. 현재 우리 나라의 경우 웹표준이 완전히 정착되고 이제 HTML5/CSS3로 넘어 가고 있는 지점에 서있다고 할 수 있을 것입니다. HTML/CSS의 경우 하위 호환성, 즉 과거의 문법과 기능을 대부분 고스란히 안고 새로운 문법과 기능이 추가 시켜나가는 보편성의 철학에 따라 발전하고 있습니다. 그렇기 때문에 HTML5/CSS3의 새로운 기능은 고유의 HTML/CSS를 충분히 이해하는 가운데 하나씩 더해서 배우는 것이 가장 좋다고 할 수 있습니다. HTML5와 CSS3의 기본을 배우는 본 수업은 새롭게 더해진 기능만을 알아봅니다. 또한 기존과 무엇이 달라졌고 구체적으로 디자인에서 어떻게 응용할 수 있는지를 해외의 사례를 들어 알아봅니다.

HTML5만 해도 책 한권이 나올 정도로 멋진 기능이 많습니다. 눈치 채셨겠지만 사실 이모든게 웹 디자이너에게 모두 필요한 내용은 아닙니다. 그래서 트랜드와 실무를 감안해서 디자이너에게 필요한 부분과 아직까지는 몰라도 될 정도의 정착 단계의 속성은 배제하여 이 시점에 꼭 배워야 할 부분으로 범위를 줄이고 대신에 깊이 있게 이해할 수 있도록 강의를 진행합니다. 아마도 실습을 통해서 기존의 HTML/CSS의 어려웠던 개념도 다져지는 시간이 될 것 입니다. 이때 필요하다면 기존 html과CSS의 어려운 부분도 함께 설명을 드릴 예정입니다.

수업은 하나의 기능과 사용법을 예시와 그림을 통해서 쉽고 깊이 있게 설명드리고 이해를 가진 후 부터는 새로운 디자인에 해당 속성을 응용해서 만들어 봄으로서 진짜 자기것으로 만드는 방식으로 이루어집니다. HTML5/CSS3의 새롭고 강력한 표현과 기능을 직접 따라하면서 배워보시기 바랍니다. 그 속성 하나하나를 디자이너로서 코드로 실제 작업물의 아트웍으로 녹여 낼지를 경험해 보는 신기하고 흥미진진한 시간이 될 것입니다.

* 본과정은 모바일과 반응형웹에 대해서는 다루지 않는 HTML5/CSS3의 Basic 수업입니다.

대상

  • 웹표준 HTML/CSS를 어느정도 다룰 줄 알고(float,clear에 대한 이해가 있으신분들)
  • 웹표준 HTML/CSS를 어느정도 다룰 줄 알고(float,clear에 대한 이해가 있으신분들)

커리큘럼

의미의 확장

HTML5에서 새롭게 확장된 의미적 태그를 실제예와 실습을 통해서 어떻게 달라졌는지, 그리고 구글 검색기의 입장에서 어떻게 의미적인 코드로 받아 드릴지를 고민하고 디자인에 어떻게 녹여 낼지를 배워나갑니다.

리치미디어와 웹폼

그동안 무겁고 불편했지만 멋지게 사용했던 플래쉬. 거기에 전적으로 의지했었던 비디오나 오디오, 벡터그래픽을 HTML5에서 어떻게 사용하는지 배우고 좀 더 친절해진 폼(입력양식)관련 기능을 알아봅니다.

폰트와 텍스트

조금만 확대해도 깨져 보이던 이미지 폰트가 아닌 웹에서 라이브 텍스트(시스템 폰트)를 사용하는 방법과 거기에 그림자 효과와 더불어 CSS만으로 문단 배치를 할 수있도록 하는 방법을 알아봅니다.

박스를 위한 새로운 표현들

아마도 CSS3속성중에서 우리가 가장 환영할 만한 섹션이라고 생각하는대요 둥근모서리 박스와 투명도 조절을 할 수 있고 게다가 여러가지 이미지를 하나의 박스에 배경으로 사용할 수 있습니다.

CSS 애니메이션

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

CSS로 포토샵 버리기

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

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

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

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

미디어 쿼리를 이용해 다양한 디바이스에 최적화된 모양을 만드는법을 배웁니다.

2015 Schedule

(홍대)봄 아카데미(VOM)
평일 (19:30~22:30)
(혜화)아카데미 정글
평일 (19:30~22:30)
주말 (10:00~17:00)
한국인터넷전문가협회(kipfa)
사당-평일 (19:30~22:30)

1월

06일 실전편 VOM(화,목) 31일 기초편 VOM(토)

2월

02일 H5/C3/RWD VOM(화,목) 28일 응용편 VOM(토)

3월

예정 기초편 VOM(화,목)

4월

예정응용편 VOM(화,목) 예정 실전편 VOM(토)