CSS3 | 10. 모듈과 변형

CSS3는 CSS와 완전히 호환되며 차이점은 다음과 같은 것들이 있습니다.  

선택자 Level3

미디어 쿼리 Level3

색 Level3

네임스페이스

CSS3 모듈

선택자 — 많은 선택자가 새롭게 정의

박스 모델 — 

배경 — 

이미지 — 

텍스트 효과 — 

2D 변형 — 

3D 변형 — 

애니메이션 — 

다중 칼럼 레이아웃 — 

사용자 인터페이스 — 

벤더 프리픽스 (vendor prefix)

• -ms- 익스플로러
• -webkit- 크롬
• -moz- 파이어폭스
• -webkit- 사파리
• -o- 오페라

웹 브라우저 공급자가 제공하는 새로운 기능을 이전 버전의 웹 브라우저에 알려주기 위해 사용되는 접두어

CSS3 변형

Transition

ccs 스타일 전환 효과를 설정합니다.

transition

transition-delay

transition-duration

transition-property

transition-timing-function

Transform

ccs3에서 html 요소의 모양, 크기, 위치 등을 변형시킬 수 있습니다.

3D

• rotate() : 회전
• translate()
• scale()
• matrix()
• perspective()

Animation

@keyframes

animation-duration 속성 — 애니메이션 효과를 재생할 시간

animation-delay 속성 — 효과가 나타나기까지의 지연시간

Gradient

Linear Gradient — 두 개 이상의 색상 지정점을 선형으로 그래디언트 효과를 적용

관련포스트

• CSS | 개념
• CSS | 구문과 적용 방법
• CSS | 폰트 텍스트 관련
• CSS | 선택자
• CSS | 조합자와 가상선택자
• CSS | 구체성과 상속
• CSS | 레이아웃
• CSS | 박스모델
• CSS | 미디어 쿼리