CSS/HTML
This presentation is the property of its rightful owner.
Sponsored Links
1 / 38

CSS/HTML 3 차시 PowerPoint PPT Presentation


  • 257 Views
  • Uploaded on
  • Presentation posted in: General

CSS/HTML 3 차시. CSS/HTML 3 차시. 01 T ransform. 02 T ransition. Transform 이란 ?. Transform 은 Photoshop, Flash 에서의 Transform 과 같이 너비 , 회전 , 기울기에 변화를 주는 것입니다 . 일상생활에서 쉽게 쓰는 Transform 을 CSS2 에서 CSS3 로 넘어올 때 같이 넘어온 태그입니다. Transform 기본 공식. transform function (measurements)

Download Presentation

CSS/HTML 3 차시

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Css html 3

CSS/HTML

3차시


Css html 3

CSS/HTML

3차시

01 Transform

02 Transition


Css html 3

Transform이란?

Transform은 Photoshop, Flash에서의 Transform과 같이 너비, 회전, 기울기에 변화를 주는 것입니다.

일상생활에서 쉽게 쓰는 Transform을 CSS2 에서 CSS3로 넘어올 때 같이 넘어온 태그입니다.


Css html 3

Transform기본 공식

transform function(measurements)

Function 에서는 rotate, skew, scale, translate가 들어간다.

Measurements 에서는 수치와 단위를 넣습니다. 단위가 필요 없는 경우에는 수치만 넣으며,

배율을 의미합니다.


Css html 3

Transform-rotate

Rotate좌표값

기본공식

Transform:rotate[ ] ([]deg)


Rotate

Rotate 실전!

<실행화면>

<소스>


Rotate1

rotate_예제

아까 만들었던 transform.png를 가지고

X축으로 100deg 만큼,

Y축으로 100deg 만큼,

Z축으로 100deg 만큼 돌려주세요~

여백을 줄 수 있다면, 위쪽 여백 300px , 왼쪽 여백 300px 로 해주세요

Position은 절대좌표로~


Rotate2

rotate_예제

아까 만들었던 transform.png를 가지고

X축으로 100deg 만큼,

Y축으로 100deg 만큼,

Z축으로 100deg 만큼 돌려주세요~

여백을 줄 수 있다면, 위쪽 여백 300px , 왼쪽 여백 300px 로 해주세요

Position은 절대좌표로~

<실행화면>


Rotate3

rotate_예제

아까 만들었던 transform.png를 가지고

X축으로 100deg 만큼,

Y축으로 100deg 만큼,

Z축으로 100deg 만큼 돌려주세요~

여백을 줄 수 있다면, 위쪽 여백 300px , 왼쪽 여백 300px 로 해주세요

Position은 절대좌표로~

<소스>


Css html 3

Transform-skew

기본 공식

Transform:skew[](X 각도(deg), Y각도(deg))


Css html 3

Skew 실전!

<소스>


Css html 3

Skew 실전!

<소스>

<실행화면>


Rotate skew

Rotate&skew예제

transform.png를 가지고

X축으로 50deg 만큼,

Y축으로 50deg 만큼,

Z축으로 50deg 만큼 돌려주고,

X축으로 50deg 만큼,

Y축으로 50deg 만큼 기울여 주세요!

(기준점은 왼쪽 상단!)

위쪽 여백 5% , 왼쪽 여백 300px 로 해주세요

Position은 상대좌표로~


Rotate skew1

Rotate&skew예제

transform.png를 가지고

X축으로 50deg 만큼,

Y축으로 50deg 만큼,

Z축으로 50deg 만큼 돌려주고,

X축으로 50deg 만큼,

Y축으로 50deg 만큼 기울여 주세요!

(기준점은 오른쪽 하단!)

위쪽 여백 300px , 왼쪽 여백 300px 로 해주세요

Position은 상대좌표로~


Rotate skew2

Rotate&skew예제

transform.png를 가지고

X축으로 50deg 만큼,

Y축으로 50deg 만큼,

Z축으로 50deg 만큼 돌려주고,

X축으로 50deg 만큼,

Y축으로 50deg 만큼 기울여 주세요!

(기준점은 오른쪽 하단!)

위쪽 여백 300px , 왼쪽 여백 300px 로 해주세요

Position은 상대좌표로~

<실행화면>


Css html 3

Transform-translate

기본 공식

Transform: translate[](X 크기(px), Y크기(px))


Translate

Translate 실전!


Translate1

Translate 실전!

<실행화면>


Translate2

translate_예제

Translate를 이용하여 위쪽여백 500px

왼쪽 여백 500px를 넣어주세요.


Translate3

translate_예제

Translate를 이용하여 위쪽여백 500px

왼쪽 여백 500px를 넣어주세요.


Translate4

translate_예제

Translate를 이용하여 위쪽여백 500px

왼쪽 여백 500px를 넣어주세요.

<실행화면>


Css html 3

Transform-scale

기본 공식

Transform: scale[](X 크기(배율), Y크기(배율))


Scale

Scale 실전!


Transform

Transform 예제!

왼쪽 여백 150px 위쪽여백 0px

기울기 x축 10 y축 10

회전도 30

크기는 1.2배로 만들어 주세요

화면에 나타나지 않을꺼예요ㅎㅎ


Transform1

Transform 예제!

왼쪽 여백 150px 위쪽여백 0px

기울기 x축 10 y축 10

회전도 30

크기는 1.2배로 만들어 주세요

화면에 나타나지 않을꺼예요ㅎㅎ


Css html 3

Transition이란?

Css transition 이란마우스를 클릭하거나 포커싱, 활성화 상태에 변화를 주는 것으로,

css값의 변화가 부드러운 애니메이션입니다.


Css html 3

Transition에서 알고 가자!

transition-property : 트랜지션할 속성.(background, color, height, width, outline, all)

transition-duration : 트랜지션 지속 시간.

transitin-timing-function: 지정한 시간동안이트랜지션 속도 (타이밍 함수값)

transition-delay: 변화가 시작되기 전 시간을 초 단위로 지정한다. (초 : s)

덧붙여서 알아둬야 할 것: hover~

Hover는 마우스를 올렸을 때 나타나는 값입니다.


Transition

Transition 실전!


Transition1

Transition 실전!

<기본>

<마우스 오버시>


Transition 2

Transition 실전2!


Transition 21

Transition 실전2!

<기본>

<마우스 오버시>


Transition 3

Transition 실전3!


Transition 31

Transition 실전3!

<기본>

<마우스 오버시>


Css html 3

예제!

처음 글씨는 하얀색에 배경색은 검은색!

마우스 오버시:

3초동안 바뀌며 글씨는 검은색 배경은 노란색!


Css html 3

예제!

처음 글씨는 하얀색에 배경색은 검은색!

마우스 오버시:

3초동안 바뀌며 글씨는 검은색 배경은 노란색!


Css html 3

Q&A


Css html 3

숙제!

오늘 배운 것 정리해서 카페에 올리기!

카페에 못 올릴 것 같다면

[email protected]!


Css html 3

숙제2!

Html~CSS배운 데 까지 공부해 오기!

시험 볼꺼예요ㅎ


  • Login