CSS2(Cascading Style Sheets)

Presentation on theme: "CSS2(Cascading Style Sheets)"— Presentation transcript:

1 CSS2(Cascading Style Sheets)
인터넷응용프로그래밍 CSS2(Cascading Style Sheets)

2 Ex14-1) Media Types and Media Queries(반응형 웹)

3 Ex14-2) Media Types and Media Queries

4 Ex14-3) Media Types and Media Queries
타입 속성

5 Ex14-4) Media Types and Media Queries

6 Ex15) Drop-Down Menus

7 Ex16) User Style Sheets

8 Ex17) Text Shadows y방향 이동거리 텍스트 그림자 색상 x방향 이동거리 흐림 정도

9 Ex18) User Style Sheets

10 Ex19) Box Shadow

11 Ex20-1) Vender Prefix

12 Ex20-2) Vender Prefix(webkit 엔진)
지원 브라우져

13 Ex21) Linear Gradients

14 Ex22) Radial Gradients : 굴곡의 중심 방향, 굴곡 쪽 색, 바깥 쪽 색

15 Ex23) Text Stroke Chrome IE

16 Ex24) Multiple Background Images

17 Ex25) Reflections : left, right, top, bottom left, bottom right
: 반사 방향, 거리

18 Ex26-1) Animation. selectors
지정한 이름, 애니메이션 속도,애니메이션 실행 시간 , 1초 정도 멈추고 다음 실행, 실행 횟수(무한 : infinite), 플레이 상태(normal, alternate) : 투명도, 왼쪽에서부터의 방향, 위에서 부터의 방향

19 Ex26-2) Animation. selectors

20 Ex27) Transitions and Transformations
: 애니메이션 실행 시간 : 회전각도, 확대 크기

21 Ex28) Skew : deg의 값에 따라서 더욱 많이 꺾임

22 Ex29) Transitioning Between Images

23 Ex30) Transitions

24 Ex31) Transitions

25 Ex32) Transitions

26 Ex33) Downloading Web Fonts and the @font-face Rule

27 Ex34) Flexible Box Layout Module
: vertical

28 Ex35) Multicolumn Layout
: 단의 개수 : 단과 단 사이의 거리 : 단의 스타일 ex) dotted

29 Homework) Simple Animation1
회전하며 변화하는 도형(무한 반복)

30 Homework) Simple Animation2
물결 모양의 애니메이션 효과 CSS 구현(무한 반복)