= CSS 강의 초안 ==
세상에 css 강의는 수없이 많다. 그러나 그보다 훨씬 더 많은 사람들이 css를 중간에 포기한다. 혹은 인라인 태그로만 css를 사용한다. 왜? css는 하위 호환성이 부족하고, 가장 널리 쓰이는 ie의 구현은 버그 투성이인데다가, 테이블처럼 위지윅 에디터에서 직관적으로 표현되지 않기 때문이다. 게다가 만들면서는, '과연 css/div만으로 이런 것이 가능할까?'라는 의문마저 든다. 머릿속에 그림이 좀처럼 그려지지 않기 때문이다.
웹 표준 주의자들은 css의 표현력이 기존의 테이블 기반 레이아웃에 비해 떨어지지 않다는 것을 입증하기 위해 많은 사이트들을 제시한다. 그러나 그들 대부분은 블로그처럼 단순한 구성을 지닌 사이트들이다. 물론 그것이 좋은 디자인이라는 것은 인정한다. 대기업이나 웹 선도적인 위치에 서려는 사이트라면 충분히 그런 디자인이 여러 측면에서 낫다는 것을 상사와 디자이너들에게 설득할 수 있을 것이다. 그러나 문제는 많은 사람들이 그럴만한 여건을 갖추고 있지 않다는 것이다. 현실 세계의, 보다 많은, 웹 표준 주의자들이나 불여우 사용자들이 그토록 혐오해 마지 않는 대부분의 사이트들의 경우 그런 예제들만 믿고서 css/div로 전환하기에는 너무 복잡하고, 방대하며, 아주 찌질하다.
물론 대형 포털 이상으로 복잡할 만한 사이트가 무엇이 있느냐고 반문할 지 모른다. 그러나 그보다 컨텐츠가 복잡하지는 않더라도, 디자인이 복잡해지는 경우는 얼마든지 있다. 이것은 최소한 절반 이상, 디자이너의 식견과 취향에 달린 문제다. 사실 대형 포탈의 디자인이라는 것은 그렇게 복잡한 것이 아니다. 국내의 내노라 하는 아무 포털이나 열고 들어가보라. 하나같이 규칙적이고 자로 잰 듯 반듯반듯한 디자인을 가지고 있다. 이는 css의 관점에서 볼 때에 적은 정의로도 수없이 재사용할 수 있고 div의 관점에서 볼 때에는 그렇게 많은 중첩이 필요하지 않다는 이야기다. 그러니까 그 것들은 차라리 만들기 쉽다.
이 강의의 목적은, css로 페이지를 레이아웃하는 것이 별로 어렵지 않다는 것을 보여주는 것이다. 이 강의와 (서적을 포함한)다른 강의들의 차이점이 있다면, 제로보드 사이트에 공개된 창의적이고 자유로운 디자인들을 가져다 레이아웃을 짜는 것을 보여준다는 것이다. 사실 css/div 조합이 쓰기 좋다는 것을 증명하는 데 단지 css를 위해 만들어진 최소한으로 도식화한 디자인을 사용하는 것은 명백한 반칙이라고 생각한다. 부가적으로 이 강의에서는 코딩을 하면서 쉽게 버그들을 피해가는 방법을 알려준다. 특정 경우에 맞추어 인터넷에서 검색해서 힘들게 적용하고 테스트해야 하는 그런 css hacks가 아니라, 저절로 버그를 접하지 않게 되는 좋은 습관들을 알려 주고자 한다.
마지막으로는, table 기반의 레이아웃보다 css/div 기반의 레이아웃이 더욱 쉽다는 것을, 이론이 아닌 감각적인 측면에서 경험하게 해주고자 한다. 물론 나모나 드림위버 등 위지윅 에디터에서 그려가며 작업하는 사람들에게는 여전히 css/div가 악몽일 것이다. 그러나 필자처럼 손수 코딩하는 것을 즐겨 하는 사람이라면 css/div가 명쾌하며, 오히려 table의 col/rowspan과 중첩된 table이 재앙처럼 느껴진다는 것을 알게 될 것이다.

컬러셋을 class 이름으로 지정하지 말 것.
float에는 display:inline을 붙여줄 것
opacity가 안 통할때는 투명 png 파일을
박스가 늘어나지 않을 때는 clear div와 border: 1px solid white; 등을 사용해 볼 것
플로팅 요소를 제외한 나머지 width 100%가 필요할 때 - 내부 요소의 float:right를 활용할 것
플로팅 left,right를 이용해 좌우로 놓지 말고 모두 left로 하여 차곡차곡 쌓은 뒤 margin-left 등을 써서 정렬할 것
관리를 생각한다면 일관성이 있어야 한다 - height:40;vertical-align:bottom과 padding-top:10px중 어느 것을 쓸 것이냐 같은.

doctype을 xhtml로 설정하면 그렇지 않으나, html 4.0 transitional 등으로 설정하면 ie가 "quirks mode ie5"로 동작하게 되어
이른바 padding값 인식 에러가 발생한다.
width320에서 padding 20을 설정시 width를 300으로 설정해야 정상인데, 이 모드에서는 320으로 지정해야 하고,
이렇게 하면 ie를 제외한 다른(버그 없는 멀쩡한)브라우저에서 문제가 생기게 된다.
이것을 해결하려면