본문 바로가기
웹 개발/웹프로그래밍

CSS3 | 10. 모듈과 변형

by KISCH 2020. 12. 29.
반응형


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 — 두 개 이상의 색상 지정점을 선형으로 그래디언트 효과를 적용



css3






반응형

'웹 개발 > 웹프로그래밍' 카테고리의 다른 글

코드이그나이터 | index.php 제거  (0) 2021.01.26
CSS | 6-2. 레이아웃 Grid  (0) 2021.01.25
CSS | 6-1. 레이아웃 Flex  (0) 2021.01.24
HTML | 2. 기본 구조  (0) 2021.01.06
CSS | 9. 미디어 쿼리  (0) 2020.12.26
CSS | 6. 레이아웃  (0) 2020.12.25
CSS | 8. 구체성과 상속  (0) 2020.12.24
CSS | 7. 조합자와 가상선택자  (0) 2020.12.23

댓글