CSS2와 CSS3의 차이

CSS2와 CSS3의 차이점

기본적인 부분은 크게 바뀌지 않았고, 코딩하는 방법도 기존 그대로이다.

이전 CSS2와 대표적인 차이점은 이미지를 사용하지 않고 그라데이션 등의 표현을 할 수 있게 된 것이 대표적인 차이점으로 표현력이 다양해졌다는 점이다.

CSS2에서는 모서리를 둥글게 표현하려면 모서리가 둥글게 처리된 이미지를 준비해야 했지만,
이제는 CSS3만으로도 구현이 가능하게 되었다

.
그외 그림자나 그라데이션을 추가할 수 있으며, 표현력이 다양해지면서 편리하 기능도 크게 늘어났다.

또한, 세분화해서 관리하려는 의도가 있어, 셀렉터나 글꼴, 텍스트 등 다양한 기능이 모듈화 되어
모듈별로 개발이 진행되고 있다.

 

즉, CSS3는 CSS2와 같은 1가지 사양을 가리키는 명칭이 아니라, 모든 모듈의 대표적인 이름으로 명칭 한다.

 

 

따라서 CSS2와 CSS3의 가장 큰 차이점은 CSS3가 모듈 기반으로 개발되고 있다는 점이다.

 

이것은 각종 브라우저나 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 또는 필요한 모듈만을 빠르게 자주 업데이트하는 것을 돕는다.

 

CSS3는 text, fonts, color, backgrounds & borders, transforms, transitions, animaitons와 같은 종류의 모듈들을 추가로 개발하고 있다.

 

CSS3는 기존의 CSS2가 갖지 못했던 화려하고 역동적인 면모를 추가하여 포토샵과 자바스크립트 및 서버 측 기술에만 완전히 의존하던 영역들을 개척했다.

 

상자의 크기에 따른 말줄임 표시, 투명한 배경, 그림자 효과, 둥근 모서리, 그라디언트, 도형의 회전과 비틀기, 애니메이션 효과 등이 가능해진 것이다. 

 

특히 그래픽 디자인에만 의존하던 영역이 CSS3만으로도 상당 부분 가능해지면서 웹 사이트의 성능 향상에 크게 기여할 수 있게 되었다.

 

 

CSS 모듈

CSS3는 새롭게 정의된 기능과 함께 이전 버전의 CSS 기능까지도 함께 포함하고 있는 모듈(module)이라는 것으로 구성됩니다.

 

CSS3를 구성하고 있는 주요 모듈은 다음과 같습니다.

 

- 선택자(Selectors)

- 박스 모델(Box Model)

- 배경(Backgrounds)

- 이미지(Image Values and Replaced Content)

- 텍스트 효과(Text Effects)

- 2D 변형(Transformations)

- 3D 변형(Transformations)

- 애니메이션(Animations)

- 다중 칼럼(Multiple Column) 레이아웃

- 사용자 인터페이스(User Interface)