Paper

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

| 2016-02-12

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

바로 HTML과 CSS인데요.

 


이게 과연 무엇일까요?

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

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

 

 

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

 

 

 

 


 

 

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 브라우저 지원현황

 

 

ModulePropertiesCR 5SF 4FF 3.6OP 10.5IE 8IE 7IE 6Fallback for IE 6, 7, 8
texttext-shadowyesyesyesyesyes / filteryes / filteryes / filterDropShadow Filter
text-overflowyesyesnoyes / -o-yesyesyes 
word-wrapyesyesyesyesyesyesyes 
fonts@font-faceyesyesyesyesyesyesyesIE를 위한 'eot' 포멧 필요
coloropacityyesyesyesyesyes / filteryes / filteryes / filterAlpha Filter
backgrounds & bordersbox-shadowyes / -webkit-yes / -webkit-yes / -moz-yesyes / filteryes / filteryes / filterShadow Filter
border-radiusyes / -webkit-yes / -webkit-yes / -moz-yesnonono 
background(s)yesyesyesyesnonono 
gradientyes / -webkit-yes / -webkit-yes / -moz-noyes / filteryes / filteryes / filterGradient Filter
transformstransformyes / -webkit-yes / -webkit-yes / -moz-yes / -o-yes / filteryes / filteryes / filterMatrix Filter
transitionstransitionyes / -webkit-yes / -webkit-no / -moz- (3.7 or later)yes / -o-nonono 
animationsanimationyes / -webkit-yes / -webkit-nonononono 

 

 

 

3. CSS3 실전 적용 예시 사이트

 


 http://www.justinaguilar.com/animations/index.html

 


 http://www.minimamente.com/example/magic_animations/

 


 https://daneden.github.io/animate.css/

 

 

안타깝게도 현재(IE8) 및 하위 버전의 IE 브라우저는 CSS3를 지원하지 않고 있습니다. 

 

 

IE9 부터 HTML5와 함께 CSS3를 지원할 계획이 발표되었고요.

IE9 브라우저는 Windows Vista, Windows 7 이후의 운영체제에만 설치 가능합니다.

IE9 브라우저는 아직(2010년 7월 현재) 공식 출시일을 밝힌 적이 없지만

빠르면 2011년에 출시가 될 것으로 전망하고 있습니다.

 

 

CSS3가 최신 기술이기 때문에 하위 버전의 브라우저에서 똑같이 구현하려면

그래픽 이미지 또는 자바스크립트를 추가로 사용해야 합니다.

때문에 무리하게 적용하는 경우 웹 페이지의 성능을 떨어뜨리는 결과를 감수해야 합니다.

 

 

평균적으로 웹 페이지 로딩 속도의 80%는 이미지와 자바스크립트를 내려받는데 소요됩니다.

 

 

트래픽이 높은 웹 사이트 일수록 이러한 성능 문제는 치명적으로 작용하기 때문에

낮은 버전의 웹 브라우저에는 우아한 낮춤 전략으로 접근하는 것이 좋습니다.

 

 

예를 들면 낮은 버전의 웹 브라우저에서는 둥근 모서리 대신 각진 모서리 표현을 사용하는 것입니다.

이것은 고객이나 디자이너의 욕심을 포기하라는 의미가 아니라 성능과 타협할 수 있도록 합의를 이끌어야 한다는 뜻이죠.

 

 

결과적으로 모든 사용자들에게 높은 성능을 제공할 수 있고

최신 웹 브라우저를 선택한 사용자에게는 보다 향상된 경험을 제공할 수 있습니다.

낡은 브라우저 때문에 계속해서 시대에 뒤떨어진 낡은 기술만을 사용해야 한다면 향상된 경험도 제공할 수 없게 됩니다.

 

어떤가요? 이제 느낌이 오시나요?ㅎㅎ

도움이 되었다면 댓글 남겨주세요!

큰 힘이 된답니다~ㅎㅎ

 

 

 

 

 

 

본 리뷰는 지극히 개인적인 관점과 생각으로 작성된 주관적인 글 입니다.
출처: http://naradesign.net/css3/documentation.html http://www.demacmedia.com/design-user-experience/css3-animation/
를 참고하여 작성되었습니다.

목록
페이스북으로 보내기 트위터 보내기
TOP

MALGUM STORY

02.2051.9551

WEBAWARD12THWINNER