4일차. CSS3 소개 및 사용법

융합형 IT 기술 전문가 과정 - 2010년 8월 16일~27일

CSS 특징

HTML5와 직접적인 관계는 없으나 함께 웹 브라우저에 구현 되고 있음.

주요 특징– 모듈 기반으로 개발되고 있으며 구현이 쉬움.

– 그래픽 효과를 가지는 모듈이 추가되어 있음

• text, fonts, color, backgrounds & borders, transforms, transitions, animaitons

– 각종 효과를 제공해주어 포토샵과 자바스크립트 및 서버측 기술에 일부를 대체한다.

• 박스 크기에 따른 말줄임 표시, 투명한 배경, 그림자 효과, 둥근 모서리, 그라디언트, 도형의 회전과 비틀기, 애니메이션 효과 등

– 디자인을 통해 이미지로 고정되는 기능을 웹 브라우저에서 지원함으로서 자원 및 비용 감소 가능

CSS3 지원 Selector

• Fallback 방법: IE-CSS3 : http://www.keithclark.co.uk/labs/ie-css3/

CSS3 주요 효과들

text-shadow

text-overflow

word-wrap

@font-face

opacity

box-shadow

border-radius

background(s)

gradient

transform

transition

animation

실습: CSS3 기반 이펙트 효과

본 발표 자료는 아래 자료를 기반으로 작성되었습니다.