CSS/HTML 3 차시

1. CSS/HTML 3차시

2. CSS/HTML 3차시 01 Transform 02 Transition

3. Transform이란? Transform은 Photoshop, Flash에서의 Transform과 같이 너비, 회전, 기울기에 변화를 주는 것입니다. 일상생활에서 쉽게 쓰는 Transform을 CSS2 에서 CSS3로 넘어올 때 같이 넘어온 태그입니다.

4. Transform기본 공식 transform function(measurements) Function 에서는 rotate, skew, scale, translate가 들어간다. Measurements 에서는 수치와 단위를 넣습니다. 단위가 필요 없는 경우에는 수치만 넣으며, 배율을 의미합니다.

5. Transform-rotate Rotate좌표값 기본공식 Transform:rotate[ ] ([]deg)

6. Rotate 실전! <실행화면> <소스>

7. rotate_예제 아까 만들었던 transform.png를 가지고 X축으로 100deg 만큼, Y축으로 100deg 만큼, Z축으로 100deg 만큼 돌려주세요~ 여백을 줄 수 있다면, 위쪽 여백 300px , 왼쪽 여백 300px 로 해주세요 Position은 절대좌표로~

8. rotate_예제 아까 만들었던 transform.png를 가지고 X축으로 100deg 만큼, Y축으로 100deg 만큼, Z축으로 100deg 만큼 돌려주세요~ 여백을 줄 수 있다면, 위쪽 여백 300px , 왼쪽 여백 300px 로 해주세요 Position은 절대좌표로~ <실행화면>

9. rotate_예제 아까 만들었던 transform.png를 가지고 X축으로 100deg 만큼, Y축으로 100deg 만큼, Z축으로 100deg 만큼 돌려주세요~ 여백을 줄 수 있다면, 위쪽 여백 300px , 왼쪽 여백 300px 로 해주세요 Position은 절대좌표로~ <소스>

10. Transform-skew 기본 공식 Transform:skew[](X 각도(deg), Y각도(deg))

11. Skew 실전! <소스>

12. Skew 실전! <소스> <실행화면>

13. Rotate&skew예제 transform.png를 가지고 X축으로 50deg 만큼, Y축으로 50deg 만큼, Z축으로 50deg 만큼 돌려주고, X축으로 50deg 만큼, Y축으로 50deg 만큼 기울여 주세요! (기준점은 왼쪽 상단!) 위쪽 여백 5% , 왼쪽 여백 300px 로 해주세요 Position은 상대좌표로~

14. Rotate&skew예제 transform.png를 가지고 X축으로 50deg 만큼, Y축으로 50deg 만큼, Z축으로 50deg 만큼 돌려주고, X축으로 50deg 만큼, Y축으로 50deg 만큼 기울여 주세요! (기준점은 오른쪽 하단!) 위쪽 여백 300px , 왼쪽 여백 300px 로 해주세요 Position은 상대좌표로~

15. Rotate&skew예제 transform.png를 가지고 X축으로 50deg 만큼, Y축으로 50deg 만큼, Z축으로 50deg 만큼 돌려주고, X축으로 50deg 만큼, Y축으로 50deg 만큼 기울여 주세요! (기준점은 오른쪽 하단!) 위쪽 여백 300px , 왼쪽 여백 300px 로 해주세요 Position은 상대좌표로~ <실행화면>

16. Transform-translate 기본 공식 Transform: translate[](X 크기(px), Y크기(px))

17. Translate 실전!

18. Translate 실전! <실행화면>

19. translate_예제 Translate를 이용하여 위쪽여백 500px 왼쪽 여백 500px를 넣어주세요.

20. translate_예제 Translate를 이용하여 위쪽여백 500px 왼쪽 여백 500px를 넣어주세요.

21. translate_예제 Translate를 이용하여 위쪽여백 500px 왼쪽 여백 500px를 넣어주세요. <실행화면>

22. Transform-scale 기본 공식 Transform: scale[](X 크기(배율), Y크기(배율))

23. Scale 실전!

24. Transform 예제! 왼쪽 여백 150px 위쪽여백 0px 기울기 x축 10 y축 10 회전도 30 크기는 1.2배로 만들어 주세요 화면에 나타나지 않을꺼예요ㅎㅎ

25. Transform 예제! 왼쪽 여백 150px 위쪽여백 0px 기울기 x축 10 y축 10 회전도 30 크기는 1.2배로 만들어 주세요 화면에 나타나지 않을꺼예요ㅎㅎ

26. Transition이란? Css transition 이란마우스를 클릭하거나 포커싱, 활성화 상태에 변화를 주는 것으로, css값의 변화가 부드러운 애니메이션입니다.

27. Transition에서 알고 가자! transition-property : 트랜지션할 속성.(background, color, height, width, outline, all) transition-duration : 트랜지션 지속 시간. transitin-timing-function: 지정한 시간동안이트랜지션 속도 (타이밍 함수값) transition-delay: 변화가 시작되기 전 시간을 초 단위로 지정한다. (초 : s) 덧붙여서 알아둬야 할 것: hover~ Hover는 마우스를 올렸을 때 나타나는 값입니다.

28. Transition 실전!

29. Transition 실전! <기본> <마우스 오버시>

30. Transition 실전2!

31. Transition 실전2! <기본> <마우스 오버시>

32. Transition 실전3!

33. Transition 실전3! <기본> <마우스 오버시>

34. 예제! 처음 글씨는 하얀색에 배경색은 검은색! 마우스 오버시: 3초동안 바뀌며 글씨는 검은색 배경은 노란색!

35. 예제! 처음 글씨는 하얀색에 배경색은 검은색! 마우스 오버시: 3초동안 바뀌며 글씨는 검은색 배경은 노란색!

36. Q&A

37. 숙제! 오늘 배운 것 정리해서 카페에 올리기! 카페에 못 올릴 것 같다면 sunhong8989@nate.com으로!

38. 숙제2! Html~CSS배운 데 까지 공부해 오기! 시험 볼꺼예요ㅎ