Introduction to CSS (Cascading Style Sheet) Level 2

페이지 목차

• CSS (Cascading Style Sheet)란 무엇인가?
• CSS를 사용 해야만 하는 이유
• CSS 사용의 Bug 및 문제점
• HTML의 중요성

1. CSS (Cascading Style Sheet)

CSS 가 뭐냐고 누가 묻는다면... 물론 CSS 를 여러가지 측면에서 뭐라고 표현할 수 있겠지만 대략 아래와 같이 설명할 수 있겠군요.

• HTML과의 단순 비교
  한 마디로 HTML 만으로 할 수 없었던 표현들을 웹페이지에 구현할 수 있게 해 줍니다. 예를 들어 FONT Element 로 지정할 수 있는 글자크기가 1 ~ 7 의 7 가지로 한정되어 있는 반면 CSS에서는 그 제한이 없어집니다. 머 필요하다면 50000 Pixel 크기의 글자도 사용할 수 있습니다. 그렇기 때문에 웹페이지를 Design 하는 Designer 가 CSS를 이용하게 되면 엄청나게 많은 선택권을 가지게 됩니다. 즉, HTML 에서는 기본값 만을 사용할 수 밖에 없었지만 CSS를 사용하므로 해서 자기 입맛에 맞게, 취향에 맞게 웹 페이지를 Design 할 수 있다는 거져. 아래는 150 Pixel 크기의 글씨...
  
  150px



• HTML과의 연계적 비교
  요리에 비유를 하자면 HTML 에서는 '요리의 재료(HTML element)에 이러한 재료들이 있다.' 라는 정도를 배웠다면 CSS에서는 이런 재료를 어떻게 다루며 각 재료의 특성(Property 또는 Attribute)은 어떤 것 들이고, 손질(Value 또는 Keyword)은 어떻게 하고, 그 것들을 조리하는 방법(Grammar : 문법)은 무엇 인지에 대한 분야라고 할 수 있겠습니다.



• DHTML과의 연계성
  CSS는 DHTML로 가는 관문이며, HTML과 DHTML, 더 나아가서는 JavaScript를 연결 시키는 역할을 하는 연결고리와도 같은 것입니다. 앞의 HTML 에서 보여줬던 몇 가지의 DHTML 들(01, 02, 03)도 모두 이 CSS 를 이용해서 만들었습니다. 이런 DHTML 을 이용하면 구구하게 긴 설명보다 Designer 가 표현하고자 하는 것을 보다 효과적으로 나타낼 수 있겠죠.

여기서는 CSS 의 모든 Property를 다루지는 않고, Visual Media(모니터에 나타나는 Property) 부분 만을 다루고 Aural Media (소리에 관한 Property)관련 부분은 다루지 않습니다. 왜냐하면 저도 안 써봐서 모르기 때문이져.^^ 안 해본 걸 다룰 수는 없잖겠습니까?

물론 CSS를 사용하지 않고도 얼마든지 Web Page를 Design 할 수 있습니다. 하지만 CSS를 사용하지 않은 HTML Element 만으로 만든 페이지와 CSS를 사용한 페이지는 큰 차이가 있습니다.

• 모든 값을 사용할 수 있다.
  HTML 만으로 만든 페이지는 기본값 이외의 값을 사용할 수 없는 반면 CSS를 사용한 페이지는 원하는 거의 대 부분의 값을 사용할 수 있습니다. 따라서 사용자의 Design 감각에 의해 문서가 보다 보기 좋고 멋지게 될 수 있겠져. 만약 Design 은 잘하는데 HTML 의 제한성 때문에 고민하던 사람이라면, 이 CSS는 그런 사람들에게 일대 복음이라고 할 수 있습니다. 할렐루야~



• 일관성 있는 문서들을 만들 수 있다.
  CSS를 사용하면 한 사이트의 모든 문서에 같은 양식을 적용시킬 수 있기 때문에 문서의 규격을 통일 시킬 수 있습니다. 좁게는 한 페이지에서 부터 > 사이트의 전체 문서 > 회사 내의 모든 문서 > WWW 의 문서... 인터넷이나 인트라넷에 연결만 되어 있다면 이런 식으로 필요에 따라 같은 문서 양식을 사용할 수 있습니다. 뒤에 나오는 예제를 통해 경험하게 됩니다.



• 유지 보수의 편리성이 있다.
  HTML 문서의 경우, 변경 사항이 생겨서 수정을 필요로 할 경우 모든 페이지를 열어서 하나 하나 수정을 해야 만 합니다. 그러다 보면 실수로 빼 놓고 수정하지 못한 문서가 있을 수 있습니다. 그러나 CSS를 사용하는 문서의 경우는 같은 CSS 문서 양식을 사용하는 모든 페이지에 양식이 일괄 적용되기 때문에 문서 자체를 일일이 수정하는게 아니라 CSS 양식을 수정하므로서 변경 사항에 보다 신속하고 정확하게(빠짐없이) 대처해 나갈 수 있다는 거져.

사실 누구한테 가르쳐 주기 가장 곤란한 분야가 바로 CSS 라는 넘이죠. 실험해 보지 않으면 알 수 없는 Property들이 많습니다. 그 이유는 주로 UA(User Agent) 때문이져. 그 중에서도 특히 브라우저에 따라, 같은 브라우저라도 버전에 따라 적용이 될 수도 안 될 수도 있습니다. 브라우저라면 NN(Netscape Navigator)와 MSIE(MicroSoft Internet Explorer)가 주 대상이 되겠습니다. 그래서 NN과 IE모두 작동이 되는 Property들이 대 부분이지만 어떤 CSS Property는 NN에서만 되고, 어떤 건 IE에서만 되며, 또 어떤 것은 둘다 안되는 것도 있습니다. 또 한가지는 단축형 Property의 경우 사용값을 나열하는 순서에 영향을 받기도 한다는 거죠.

가급적이면 양쪽을 모두 시험해 보고 그 차이점을 정확하게 알려 주려고 노력하기는 하겠지만 혹시 미진한 부분이 있더라도 양해해 주길 부탁하며, 혹시 안되는게 있다고 해서 '이런... 이거 순전히 거짓말쟁이잖아!' 라고 하지는 마시기 바랍니다. 또 나아가서 잘 못된 내용이나 표현이 있으면 알려 주시면 대단히 고맙겠습니다.

기껏 CSS 찬양론을 펴다가 갑자기 HTML의 중요성을 말하니까 좀 의아하게 느끼시겠져? 그 이유는 이렇습니다. CSS, JavaScript, ASP 를 막론하고 그 바탕은 HTML 이기 때문입니다. HTML Element는 그렇게 많은 수가 아니지만 Element에 사용되는 Attribute(속성)은 꽤 많습니다. 속성을 많이 안다는 것은 DHTML이나 JavaScript를 할 때 큰 영향을 줍니다. 그러므로 바로 전 동네에서 대충 노닐다가 오신 분들은 다시 그 동네에 가서 쩜 철저하게 노닐 필요가 분명히 있습니다. 모든 일에는 준비과정... 그러니까 기초가 튼튼해야 되지 않겠습니까...

이 문서의 저작권은 www.cadvance.org 에 있습니다.