#CSS3 배경지식 쌓기

만약 팀 내에 웹페이지를 디자인하여 PSD를 만드는 디자인 팀과 이 PSD를 웹페이지로 만들어 내는 UI개발팀이 따로 있다면

아래와 같은 갈등이 있기 마련입니다. 

멋진 효과를 내기 위해 투명 PNG핵, 나아가 과도한 마크업과 불필요한 CSS 코드, 더 심각한 경우에는 온갖 스크립트와 CSS 핵까지 동원 해야하는 경우가 있습니다.

---

CSS2.1에서 CSS3로의 변화

단편적인 예를 들기는 했지만 CSS3를 마음껏 사용할 수 있는 브라우저가 널리 이용된다면 이 문제는 해결될 것입니다.

현재는 익스플로러 9 이 CSS3를 본격적으로 지원할 예정이고, 웹킷 기반의 크롬이나 사파리에서는 CSS3 속성을 

상당 부분 지원합니다. 그리고 오페라나 파이어폭스 역시 중요한 CSS3 속성을 많은 부분 지원하고 있는 상황입니다.

CSS3의 많은 속성을 활용하여 기존에는 이미지로 처리해야 했던 많은 부분을 이미지 없이 CSS 코딩만으로 표현할 수 있게 

되었습니다. 또 반투명 효과, 그라데이션이 적용된 그림자나 안티앨리어싱이 적용된 라운딩 박스와 같이 특정한 스타일의

처리를 위해서 여러 개의 HTML 마크업 요소를 덕지덕지 바르고 거기에 지저분한 스타일시트를 추가해야 했던 것을 

단 한줄의 CSS코드만으로 해결할 수도 있게 되었습니다. 이건 CSS작업자들에게 혁명과도 같은 일입니다.

이제 작업을 더 빨리 끝내고 휴식시간을 갖고나 디자인을 더 정교하게 다듬는 작업에 시간을 써도 될 것입니다.

또, 효과말고도 CSS를 이용하면 플레시에서나 구현이 가능하던 다양한 애니메이션을 구현할 수도 있습니다. 

이부분이 CSS3의 또 다른 큰 특징입니다. 

---

CSS의 역할 - 콘텐츠와 디자인의 분리

많은 디자이너나 UI개발자들에게는 국내에서 1990년대부터 2000년대 중반까지는 웹페이지를 만들 떄 

콘텐츠와 디자인을 분리한다는 개념조차 없었습니다. 

2000년대 초중반부터 발 빠른 분들이 이 개념을 도입하여 전파하기 시작하였지만 크게 확산 된 것은 불과 몇 년 되지 않습니다.

HTML5      +     CSS

웹페이지의 콘텐츠 정보를 보유                           웹페이지의 디자인 정보를 보유

<HTML에서는 문서의 콘텐츠 정보를 , CSS에서는 문서의 디자인 정보를 담아 이 둘을 합치면 디자인이 가미된 웹페이지가 완성됩니다.>

기존에는 테이블로 레이아웃을 나누고, 시멘틱한 웹페이지의 의미도 모른채 중요한 텍스트 문구나 데이터를 이미지로 만들어 

덕지덕지 붙여 가며 웹사이트를 만들었습니다. 중요한 텍스트가 gif나 jpg파일로 되어 있다면 과연 기계는 이 이미지에 있는 텍스트의 

의미를 어떻게 알아낼수 있을까요? 이미지에 alt 태그라도 붙여준다면 다행이지만 이런 방법은 웹사이트를 완전히 엉망으로 만드는 

지름길이었습니다. 얼마간 웹표준을 준수하여 웹사이트를 만들자는 물결이 유행처럼 일었지만 현재는 이런 방식으로 사이트를 만드

는 일이 별로 없습니다.

그렇다면 왜 HTML 마크업과 CSS를 분리해야 할까요? 

우선 HTML페이지에 담겨 있는 콘텐츠가 의미 있는 콘텐츠가 되기 때문입니다. 

읽을 수 없는 콘텐츠가 아니라 어떤 기기에서라도 읽을 수 있는 살아있는 콘텐츠가 됩니다. 또, 디자인 유지보수 작업이 생겼을 

때 유지보수가 쉬워집니다. 단 한 줄의 CSS코드만 바꾸어도 무한대의 웹페이지 디자인을 한 번에 바꿀 수 있습니다.

<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌