HTML5 & css3 활용방법을 알아보자!

스터디룸

Enjoy our interesting and informative contents.

요즘 지인을 통해 혹은 매체를 통해서 알게 모르게 접하고 있는 단어가 있을거에요.

바로 HTML과 CSS인데요.

이게 과연 무엇일까요?

무엇이길래 트렌드에도 소개가 되고 웹좀 안다 싶은 사람들이

모두 관심있게 보는걸까요?

오늘은 HTML5와 CSS3에 대해서 이야기해고자 합니다.

pic_css3-1(0).jpg

CSS의 경우 공식 표준보다 사실 표준이 더욱 의미가 있습니다.

그 이유는 현존하는 웹 브라우저들이 권고 후보 단계에 머물러 있는 CSS 2.1 명세의 대부분을 이미 잘 지원하고 있기 때문!

CSS 2.1은 공식 표준이 되기 위하여 권고 제의라는 단계를 한 번 더 거쳐야 하지만

이미 현실 세계에서는 사실상의 표준이 되어 있는 셈입니다.

따라서 CSS3가 공식 표준이 될 때까지 기다릴 필요가 없습니다.

웹 브라우저들이 지원하기만 한다면 CSS3의 새로운 기술 명세를 현재의 실무에 즉시 적용할 수 있습니다.

이미 현존하는 최신 웹 브라우저들은 앞다투어 CSS3의 유용한 명세들을 지원하기 시작했습니다.

1. CSS2와 CSS3의 차이점

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

이것은 각종 브라우저나 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나

또는 필요한 모듈만을 빠르게 자주 업데이트 하는 것을 돕습니다.

CSS3는 text, fonts, color, backgrounds & borders, transforms, transitions, animaitons와

같은 종류의 모듈들을 추가로 개발하고 있습니다.

CSS3는 기존의 CSS2가 갖지 못했던 화려하고 역동적인 면모를 추가하여

포토샵과 자바스크립트 및 서버측 기술에만 완전히 의존하던 영역들을 개척했습니다.

상자의 크기에 따른 말줄임 표시, 투명한 배경, 그림자 효과, 둥근 모서리, 그라디언트,

도형의 회전과 비틀기, 애니메이션 효과 등이 가능해진 것입니다.

특히 그래픽 디자인에만 의존하던 영역이 CSS3만으로도 상당부분 가능해지면서

웹 사이트의 성능 향상에 크게 기여할 수 있게 되었습니다.

2. CSS3 브라우저 지원현황

Module	Properties	CR 5	SF 4	FF 3.6	OP 10.5	IE 8	IE 7	IE 6	Fallback for IE 6, 7, 8
text	text-shadow	yes	yes	yes	yes	yes / filter	yes / filter	yes / filter	DropShadow Filter
	text-overflow	yes	yes	no	yes / -o-	yes	yes	yes
	word-wrap	yes	yes	yes	yes	yes	yes	yes
fonts	@font-face	yes	yes	yes	yes	yes	yes	yes	IE를 위한 'eot' 포멧 필요
color	opacity	yes	yes	yes	yes	yes / filter	yes / filter	yes / filter	Alpha Filter
backgrounds & borders	box-shadow	yes / -webkit-	yes / -webkit-	yes / -moz-	yes	yes / filter	yes / filter	yes / filter	Shadow Filter
	border-radius	yes / -webkit-	yes / -webkit-	yes / -moz-	yes	no	no	no
	background(s)	yes	yes	yes	yes	no	no	no
	gradient	yes / -webkit-	yes / -webkit-	yes / -moz-	no	yes / filter	yes / filter	yes / filter	Gradient Filter
transforms	transform	yes / -webkit-	yes / -webkit-	yes / -moz-	yes / -o-	yes / filter	yes / filter	yes / filter	Matrix Filter
transitions	transition	yes / -webkit-	yes / -webkit-	no / -moz- (3.7 or later)	yes / -o-	no	no	no
animations	animation	yes / -webkit-	yes / -webkit-	no	no	no	no	no