Skip to content

CSS3 소개

2011. 10. 4. 06:00
CSS3 는 모듈을 기반으로 개발되고 있다는 특이점이 있습니다. 거꾸로 CSS2를 완전이 호환하고 있으므로 CSS2와 CSS3로 스타일을 설정할때 CSS2만 지원하는 브라우저는 CSS2까지만 표현하고 CSS3를 지원하는 브라우져는 CSS2와 CSS3를 모두 포함한걸 표현한다는 점입니다.

여기서는 CSS3 에서 아래와 같은 모듈을 중점으로 소개할까 생각합니다.
글을 쓰는 현재까지 CSS3에 대한 정확한 설명의 글중에서 한글로 표현된것이 많이 있지 않기에 이 글을 작성합니다.

  1. Borders (테두리).
  2. Backgrounds (배경).
  3. Text Effects (텍스트 효과).
  4. Fonts (폰트).
  5. 2D Transforms (2D 변환)
  6. 3D Transforms (3D 변환)
  7. Transitions (전환)
  8. Animations (애니메이션)
  9. Multiple Columns (다중 열)
  10. User Interface (사용자 인터페이스)

또한 아래의 부분에 대해서는 CSS3 에 해당하는 부분만 상세히 다뤄볼 생각입니다.

  • CSS3 Reference.
  • CSS3 Selectors

참고 링크

아래 사이트를 참고로 작성할 것이며 비슷한 사례도 있을겁니다.
CSS3 소개 (인쇄용페이지) => http://naradesign.net/ouif/css3/documentation.html
w3schools 의 CSS3  소개페이지 => http://www.w3schools.com/css3/default.asp
W3C => http://www.w3.org/

CSS3 는 현재까지도 아직 개발중입니다. 완전이 정리되지는 않았지만 웹표준을 지원하는 브라우져는 거의 다 지원함으로 사용하고 보여집니다.
아직까지 익스플로러 중에서 하위 버젼은 지원하지 않지만 사용할수 있도록 자바스크립크 코드가 나와 있는 상황입니다.

CSS3 의 브라우져 버젼별 지원현황 => http://www.findmebyip.com/litmus
위 주소에서 나머지 부분은 참고하시고 CSS3 프로퍼티와 셀렉터는 아래 이미지와 같습니다.


 
more