Understanding HTML/CSS

깊이 이해하고 쉽게 배우는

Curriculum

특정 상황에서의 의미있는 태그 사용, 접근성 그리고 좋은 디자인과 크로스브라우징을 동시에 생각하여 그 중 가장 많을 것을 얻을 수 있는 방법을 해당 상황에서 선택하는 훈련을 하게 됩니다.

Understanding HTML/CSS 응용편

응용편에서는 실제 디자인을 통해 응용해서 만들수 있는 능력을 키워나갑니다. 수업의 큰 흐름을 만드는데 있어서 가장 어렵고 시간이 걸리는 부분과 기초편에서 다루지 못한 속성들을 포함하고 있는 실제 웹사이트의 부분들을 엄선하여 진행하게 됩니다. 단순하고 큼직한 부분부터 시작하여 복잡하고 오밀조밀한 디자인까지를 실습을 통해 소화해 내면서 자세한 설명을 더하는 방식으로 진행됩니다.

코드는 흔히 머리와 손으로 익혀진다고 말합니다. 이해만 있고 해보지 않으면 자신감이 없고 반대로 깊은 이해가 없이 손으로 해보기만 한다면 왜 이렇게 깨지는지 왜이런 속성이 필요하고 앞으로는 어떻게 될지를 예측할 수 없는 반쪽 공부가 되어 버립니다.

즉 기초편의 탄탄하고 깊은 이해에 응용편의 실제적이고 자세한 기법을 훈련함으로서 그림이 아닌 코드를 이용해 모양을 만들 수 있는데 필요한 사고 방법에 숙달과 응용을 만드는 수업이라고 할 수있습니다. 또한 실제 사이트를 캡춰하여 실습과 설명을 반복하면서 특정 상황에서의 의미있는 태그 사용, 접근성 그리고 좋은 디자인과 크로스브라우징을 동시에 생각하여 그 중 가장 많을 것을 얻을 수 있는 방법을 해당 상황에서 선택하는 훈련을 하게 됩니다.

응용편 대상

  • float과 position을 다루어 보신 분들, 코드가 낯설지 않으신 분들
  • 디자인된 작업물을 선명한 이해를 가지고 원하는 데로 응용 가능하게 만들고 싶은 분들

응용편 커리큘럼

응용 LEVEL1

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

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

응용 LEVEL2

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

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

접근성 있는 표 사용

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

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

접근성 있는 입력양식 사용

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

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

응용 LEVEL3

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

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

응용 LEVEL4

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

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

응용 LEVEL5

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

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

웹표준 실무 스킬

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