CSS, 디자인(Design)과 컨텐츠(Contents)의 분리
                                      혹은
CSS, 디자인(Design)과 코딩(Coding)의 분리



오잉 이게 뭔소리야?


HTML로 홈페이지를 만들고 스타일시트를 사용해서 이쁘게 꾸미고... HTML, CSS등을 가지고 내 홈페이지의 내용을 꾸미는 것 아니야?

라는 생각이 드실겁니다.



시작에 앞서 잠깐 옆길로 세겠습니다.

일부 프로그래머들은 코딩의 압박속에서 프로그램을 짜다가 한가지 고민에 빠졌습니다.
프로그램을 짜는 것(코딩)과 디자인은 모두 프로그래머의 역할인 것인가?
프로그래머는 프로그래머로서 프로그래밍만 해야하는 것인가 아니면 프로그램의 디자인도 도맡아야할 것인가?

디자인 즉 미술은 미적감각을 필요로 합니다. 예술은 배울 수 있는 것이 아닙니다.(표현 자체를 배울 순 없다는 말) 타고나는 것이죠.

프로그래머가 미적 감각도 겸비하고 있으면 좋겠지만 현제같은 분업시대에 상당히 비효율적이지요.
더군더나 디자인 자체만으로는 프로그래밍과 별로 연관도 없습니다.
프로그래머가 프로그램 짜기 바쁜데 디자인까지 신경써야 한다니... 마치 자동차 공장에서 볼트 만들고 너트 만들고 본넷 만들고 바퀴 만들고... 다 만들어서 조립하는것과 마찬가지인 겁니다. 즉 쪼갤 수 있는 것은 잘개 쪼개져야 한다는 것이죠.


뭐 이것이 지금 어떻게 해결되었는 지는 모르겠고(실제로 디자인과 코딩이 어떻게 분업했는 지, 하긴 했는지.. 모르겠습니다) 이와 유사한 내용을 다룰 것이 바로 디자인과 컨텐츠의 분리 입니다. 디자인과 코딩의 분리와 유사해서 덤으로 써뒀습니다.



먼저 이 글을 보시기 앞서 다소 거부감이 들 수 있습니다. 기존의 HTML을 통해 짜던 방법에서 제법 바뀐 점이 많거든요. 인간은 변화를 추구하지만 안정적인 삶도 추구하기 때문에(참 애매하죠) 아 뭐야~ 하면서 닫아버릴 수도 있지만
기존의 홈페이지 작성방식보다 훨씬 우수하고 새로운 눈이 띄이실 것 이므로 반드시 보시길 권장합니다. 앞으로의 홈페이지들은 모두 컨텐츠와 디자인이 불리 될지도 모릅니다. (높은 확률로)

다만 HTML은 떼시고 보셔야 합니다. ^^



그렇습니다. HTML 쓰던 것 그대로 씁니다. 다만 디자인 부분만 CSS를 통한다는 것이 다릅니다.

무슨 소리냐..?


기존의 HTML소스를 생각해 봅시다.

우리가 폰트에 여러 효과를 주고싶을 떄는 <font>태그를 사용했습니다. 글자의 색은 어떻게 지정하나요?
<font color='#RGB코드'> 이런 식으로 하지요? 엘리먼트의 속성(attribute) 값을 직접 지정해주는 방법이지요.

즉 HTML 문서를 기술하는데 있어서 컨텐츠를 기술하기 위한 엘리먼트 이외에 디자인을 표현하기 위한 내용까지 몽땅 들어가있습니다.

바로 이러한 부분을 분리한다는 것 입니다. 디자인은 디자인데로, 컨텐츠를 표현하기 위한 태그는 태그대로



이러한 내용은 사실 HTML4.1을 발표하면서 권고했던 내용들 입니다. HTML이라는 언어가 처음 만들어진 때에는 과학자들이나 사용하던 심플한 구조를 사용자들이 보다 쉽고 알록달록하게 만들기위해 끼워맞춘 언어이다보니... 홈페이지 작성에 적합하지 않습니다.

"아니 난 여태 HTML로 홈페이지를 잘 만들어 왔었는데?" 라고 하실 분 많으실 겁니다. 하지만 우리가 자주 사용하는 Table태그는 홈페이지의 레이아웃을 잡기 위한 것이 아니라 데이터 결과를 기록용 표를 만들기 위해 고안된 것입니다. 물론 우리가 Table태그에 익숙해져 있어서 편하게 느껴집니다만 용도에서 벗어나 사용중인 것은 분명합니다.


종종 HTML 관련 글을 보신 분들 중에서는 레이아웃을 테이블이 아닌 Div로 잡으라는 말을 많이 보셨을 겁니다.
Div로 레이아웃을 설정한다면 더욱 강력한 홈페이지를 만들 수 있습니다. 또한 쉽습니다. 만약 Div로 레이아웃을 잡는 게 마냥 어렵게 느껴지셨다면 이번기회에 배워보시기 바랍니다.


그럼 본격적인 분리는 다음 장에서 배워봅시다!
이 게시물을...