Understanding HTML/CSS

깊이 이해하고 쉽게 배우는

Curriculum

하지만 언어를 최초로 배우는 과정에서 브라우저 입장에서 이해하고 머리속으로 그릴 수 있는 연습을 한다면 좀 더 쉽고 재밌게 익숙 해지는 과정을 만들수 있고 상당한 시간을 줄 일 수 있습니다.

Understanding HTML/CSS 기초편

Understanding 시리즈의 가장 처음 과정인 기초편은 디자이너가 코드를 배워야 하는 길고도 먼 여정에 첫 단추와 같습니다. HTML/CSS는 생각만큼 배우기 수월하지가 않습니다. 일반적으로 최소 수개월 이상이 걸립니다. 시간이 많이 걸리는 가장 큰 이유는 처음 코드를 접하므로 낯설기 때문입니다. 뭔가 의도하는 것을 코드를 이용해서 명령을 내린다는 것은 막연한게 아닐 수 없습니다. 그래서 처음 배우는 분들에게 있어 가장 중요한 점은 브라우저 입장에서 생각하는 훈련입니다.

보통 HTML/CSS가 능숙한 경우 머리속으로 연상(생각)을 한 후 코드로 옮기게 되는데, 이렇게 디자인된 작업물을 어떻게 코드로 말할지를 생각하는 훈련이 가장 중요합니다. 코드가 익숙해 지기까지 시간이 많이 필요한 이유는 이런 연상과 생각이 수많은 시행 착오를 통해서 알아지기 때문입니다. 하지만 언어를 최초로 배우는 과정에서 브라우저 입장에서 이해하고 머리속으로 그릴 수 있는 연습을 한다면 좀 더 쉽고 재밌게 익숙 해지는 과정을 만들수 있고 상당한 시간을 줄 일 수 있습니다.

기초편에서는 HTML과 CSS의 대한 기본적인 이해와 사용 방법을 그림과 설명을 통해 충분이 이해하고, 예제를 통해서 개념을 확실하게 만들게 됩니다. 디자이너가 웹표준을 배우는데 있어서 가장 어려운 부분인 float을 이용한 배치를 완전히 이해 하는것에 최종적인 포커를 맞추고 있으며, 이를 통해 막연하고 우연히 되어졌던 작업이 명확하게 되고 작업에서 왜 이렇게 깨져서 보이는 지도 이해하게 됩니다.

기초편 대상

  • 한번도 HTML/CSS를 다뤄보지 못한 분들
  • 조금 경험은 있으나 확실하고 체계적인 개념을 가지고 HTML/CSS를 시작하시고픈 분들

기초편 커리큘럼

개념과 준비

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

시멘틱 마크업

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

기초 스타일링(1)

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

기초 스타일링(2)

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

박스다루기-1

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

박스다루기-2

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

배치하기-1

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

배치하기-2

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