프로그래밍 언어 활용 11일차 (24/11/25)

웹프로그래밍/CSS

프로그래밍 언어 활용 11일차 (24/11/25)

wkun 2024. 11. 25. 16:00

CONTENTS

Section7 CSS3 전환&변환

Section8 CSS 애니메이션

--------------------------------------------------------------------

Section7 CSS3 전환&변환

◎transform 변환 속성: origin

-효과가 적용되는 과정을 좀 더 부드럽게 보여주거나, 조정할 수 있도록 해주는 속성

속성값	의미
transform-origin	요소 변환의 기준점을 설정 ex)top-left, center, right-bottom
transform-style	3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
perspective	하위 요소를 관찰하는 원근 거리를 설정
perspective-origin	원근 거리의 기준점을 설정
backface-visibility	3 변환으로 회전된 요소의 뒷면 숨김을 설정 ex)hidden

◎transform 변환속성: perspective

-하위 요소를 관찰하는 원근 거리를 설정

-perspective 속성과 함수의 차이점

속성/함수	적용대상	기준점 설정
perspective	관찰 대상의 부모 요소	perspective-origin
transform: perspective	관찰 대상	transform-origin

*perspective 속성은 관찰 대상의 부모 요소에 적용하여 하위 요소들을 관찰하는 원근 거리를 설정하며, transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정

◎transform 변환 속성: perspective-origin

-하위 요소를 관찰하는 원근 거리의 기준점을 설정

속성값	의미	기본값
X축	left, right, center, %, 단위	50%
Y축	top, bottom, center, %, 단위	50%

◎transform 변환 속성: backface-visibility

-3D변환으로 회전된 요소의 뒷면 숨김을 설정 visible/ hidden

◎transform 변환 속성: matrix(a,b,c,d,e,f)

-요소의 2차원 변환효과를 지정, scale(), skew(), translate(), rotate()를 지정

Section8 CSS 애니메이션

3차원 회전하기

<head>

<style>

div {

background-color: green;

height: 150px;

width: 150px;

}

.container {

background-color: white;

border: 1px solid black;

}

.transformed:hover {

backface-visibility: visible;

transform-origin: 50% 42%;

transform: perspective(500px) rotateY(50deg) rotateX(0deg);

}

.transformed2:hover {

backface-visibility: visible;

transform-origin: 50% 42%;

transform: perspective(500px) rotateY(0deg) rotateX(45deg);

}

</style>

</head>

<body>

</div>

<p></p>

</div>

<body>

*origin: 변화하고자 할 때 기준점

◎변화 속성

-효과가 적용되는 과정을 좀 더 부드럽게 보여주거나, 그 과정을 시간적으로 조정할 수 있도록 해주는 속성

박스 가로 길이 늘리기

<head>

<style>

div{

width: 100px;

height: 100px;

background-color: yellow;

border: 1px solid red;

transition: width 2s;

}

div:hover{

width: 300px;

}

</style>

</head>

<body>

<div>마우스를 올리면 박스가 늘어납니다.</div>

</body>

박스를 회전시키면서 크기와 테두리 색상 변경하기

<head>

<style>

div{

margin: 50px;

width: 100px;

height: 100px;

background: yellow;

border: 1px solid red;

transition: width 3s, height 3s, border 3s, transform 3s;

}

div:hover{

width: 200px;

height: 200px;

border: 3px solid blue;

transform: rotate(360deg);

}

</style>

</head>

<body>

<div>마우스를 올리면 박스가 회전하면서 커집니다.</div>

</body>

◎변화 속성

-transition-property: 변환 효과를 적용할 속성들 나열

-transition-duration: 변화가 지속되는 시간 지정

-transition-timing-function: 변화의 시작과 끝 타이밍 지정

-transition-deley: 변화 효과가 지연되는 시간 지정

◎변화 속성 작성 방식

-단축형

div { transition: property duration timing-function delay; }

div {
tansition: background 2s ease 1s;
padding 1s linear 2s;
}

-기본형

div {
transition-property: width, color;
tansition-duration: 1s;
tansition-timing-fuction: ease;
tansition-delay: 3s;
}

-확장 기본형

div {
transition-property: width, height, border-width, color;
tansition-duration: 1s, 2s, 1s, 3s;
tansition-timing-fuction: ease, ease-in, ease-out, linear;
tansition-delay: 3s, 1s, 1s, 2s;
}

변화 효과 대상 지정하기

<head>

<style>

div{

width: 100px;

height: 100px;

background: orange;

transition-property: width, background, color;

}

div:hover{

width: 400px;

background: blue;

color: white;

}

</style>

</head>

<body>

</body>

변화 효과의 지속 시간 설정하기

<head>

<style>

div{

width: 280px;

height: 100px;

background: orange;

transition: background;

transition-duration: 10s;

}

div:hover{

background: blue;

}

</style>

</head>

<body>

</body>

◎속성값

-linear: 처음부터 끝까지 같은 속도

-ease: 느리게 시작하여 점점 빨라졌다가 느리게 끝남

-ease-in: 느리게 시작하여 점점 빨라지다가 일정한 속도에 다다르면 같은 속도를 유지

-ease-out: 일정한 속도의 등속 변화로 시작해서 점점 느려지면서 끝남

-ease-in-out: 느리게 시작하여 느리게 끝남

-cubic-bezier(n, n, n, n): 처음과 끝의 속도를 설정

◎큐빅 베이지 타이밍 함수

-원하는 대로 타이밍을 조정할 때 사용

-기본값은 cubic-Bezier(0.25, 0.1, 0.25, 1.0)

속성값 이름	큐빅 베이지 타이밍 설정값
Ease	cubic-bezier(0.25, 0.1, 0.25, 1)
Linear	cubic-bezier(0, 0, 1, 1)
ease-in	cubic-bezier(0.24, 0, 1, 1)
ease-out	cubic-bezier(0, 0, 0.58, 1)
ease-in-out	cubic-bezier(0.42, 0, 0.58, 1)

변화 효과의 타이밍 설정하기

<head>

<style>

div{

width: 100px;

height: 50px;

background: red;

color: yellow;

border: 1px solid black;

transition: width 3s;

}

#div1{ transition-timing-function: linear;}

#div2{ transition-timing-function: ease;}

#div3{ transition-timing-function: ease-in;}

#div4{ transition-timing-function: ease-out;}

#div5{ transition-timing-function: ease-in-out;}

#div6{ transition-timing-function: cubic-bezier(0.1, 0.0, 0.1, 1.0);}

div:hover{ width: 400px;}

/* body:hover div{width: 400px;} 전체 볼 때 */

</style>

</head>

<body>

<div id="div1" style="top: 100px">linear</div>

<div id="div6" style="top: 350px">cubic-bezier</div>

</body>

변화 효과의 지연 시간 설정하기

<head>

<style>

div{

margin: 50px;

width: 200px;

height: 200px;

background: yellow;

border: 5px solid black;

transition-duration: 5s;

transition-delay: 3s;

}

div:hover{

transform: rotate(180deg);

}

</style>

</head>

<body>

<div>마우스를 올리고 3초 후에 박스가 180도 회전합니다.</div>

</body>

홈페이지 메뉴 만들기

<head>

<style>

text-decoration: none;;

color: white;

}

div{

position: absolute;

left: 0px;

width: 80px;

height: 50px;

background: #ff8080;

border: 1px solid red;

transition-property: width background;

transition-duration: 2s 2s;

line-height: 50px;

/* 너비 width="50px", line-height="50px" 수치 같게하면 중앙정렬된 것처럼 보임, 없을 땐 위쪽으로 붙어 보임*/

}

div:hover{

width: 200px;

transition-timing-function: linear;

background: #ff0000;

color: white;

text-align: center;

font-size: 30px;

}

</style>

</head>

<body>

<div style="top:100px"><a href="#" target="new">ABOUT</a></div>

<div style="top:200px"><a href="#" target="new">STUDY</a></div>

<div style="top:250px"><a href="#" target="new">CONTACT</a></div>

</body>

◎키프레임 정의

@keyframes animationname {
keyframes-selector { css-styles; }
}

◎위에서 아래로 움직이는 키프레임 설정

@keyframes box_animation {
from { top: 0px; }
to {top: 200px; }
}

◎키프레임 안에 퍼센트 단위로 애니메이션 설정

@keyframes animationname {
keyframes-selector { css@keyframes 애니메이션이름{
0% { 시작값 } /* from */
25% { 변경값 }
50% { 변경값 }
75% { 변경값 }
100% { 종료값 } /* to */
}

◎애니메이션 속성의 종류

animation-name	@keyframes 애니메이션의 이름 지정
animation-duration	애니메이션의 지속 시간을 초 단위로 설정
animation-timing-function	애니메이션의 시작과 끝 타이밍 지정
animation-delay	애니메이션 시작을 지연시키는 시간을 초 단위로 설정
animation-iteration-count	애니메이션이 반복 재생되는 횟수 설정 ex)infinite
animation-direction	애니메이션의 방향 설정
animation-full-mode	애니메이션을 재생하고 있지 않을 때 속성값 설정
animation-play-state	애니메이션 재생 상태 설정

무한 반복하며 좌우로 이동하는 박스 만들기

<head>

<style>

div{

width: 100px;

height: 100px;

background: red;

position: relative;

animation: boxmove 5s linear infinite alternate;

}

@keyframes boxmove {

from{ left: 0px; }

to{ left: 300px; }

}

</style>

</head>

<body>

<div>애니메이션 박스</div>

<p><strong>참고: </strong>IE9 이하 혹은 낮은 버전에서는 지원하지 않습니다.</p>

</body>

웹 문서가 로드된 후 일정 시간 후에 애니메이션 시작하기

<head>

<style>

div{

width: 100px;

height: 50px;

background: red;

position: relative;

animation: boxmove 5s linear infinite alternate;

}

#box1{

animation-delay: 3s;

}

#box2{

animation-delay: 5s;

}

@keyframes boxmove {

from{ left: 0px; }

to{ left: 300px; }

}

</style>

</head>

<body>

<div id="box1">애니메이션 박스1</div>

<div id="box2">애니메이션 박스2</div>

</body>

<animation-direction 속성값의 종류>

속성값	설명
normal	기본 설정값, 애니메이션이 순방향으로 재생 ex)from → to
reverse	애니메이션이 역방향으로 재생 ex)to → from
alternate	애니메이션이 양방향으로 재생 -홀수: 순방향으로 재생 -짝수: 역방향으로 재생
alternate-reverse	애니메이션이 양방향으로 재생 -홀수: 역방향으로 재생 -짝수: 순방향으로 재생

애니메이션의 진행 방향 설정하기

<head>

<style>

div{

width: 100px;

height: 50px;

background: red;

position: relative;

animation: boxmove 5s linear infinite;

}

#box1{

animation-delay: 3s;

animation-direction: reverse;

}

#box2{

animation-delay: 5s;

animation-direction: alternate-reverse;

}

@keyframes boxmove {

from{ left: 0px; }

to{ left: 300px; }

}

</style>

</head>

<body>

<div id="box1">애니메이션 박스1</div>

<div id="box2">애니메이션 박스2</div>

</body>

애니메이션의 반복 횟수 설정하기

<head>

<style>

div{

width: 100px;

height: 50px;

background: red;

position: relative;

animation: boxmove 5s;

}

#box1{

animation-delay: 3s;

animation-direction: reverse;

animation-iteration-count: 2;

}

#box2{

animation-delay: 5s;

animation-direction: alternate-reverse;

animation-iteration-count: 5;

}

@keyframes boxmove {

from{ left: 0px; }

to{ left: 300px }

}

</style>

</head>

<body>

<div id="box1">애니메이션 박스1</div>

<div id="box2">애니메이션 박스2</div>

</body>

애니메이션의 타이밍 설정하기

<head>

<style>

div{

width: 100px;

height: 50px;

background: red;

position: relative;

animation: boxmove 5s alternate;

}

#box1{

animation-delay: 1s;

animation-iteration-count: 3;

animation-timing-function: ease;

}

#box2{

animation-delay: 2s;

animation-iteration-count: 3;

animation-timing-function: linear;

}

#box3{

animation-delay: 3s;

animation-iteration-count: 3;

animation-timing-function: ease-out;

}

@keyframes boxmove{

from{ left: 0px; }

to{ left: 300px; }

}

</style>

</head>

<body>

<div id="box1">애니메이션 박스1</div>

<div id="box2">애니메이션 박스2</div>

<div id="box3">애니메이션 박스3</div>

</body>

마우스를 올리면 멈추게 하기

<head>

<style>

div{

width: 100px;

height: 50px;

background: red;

position: relative;

animation: boxmove 5s infinite alternate;

}

#box1{

animation-delay: 1s;

animation-timing-function: ease;

}

#box2{

animation-delay: 2s;

animation-timing-function: linear;

}

#box3{

animation-delay: 3s;

animation-timing-function: ease-out;

}

@keyframes boxmove{

from{ left: 0px; }

to{ left: 300px; }

}

div:hover{

animation-play-state: paused;

}

</style>

</head>

<body>

<div id="box1">애니메이션 박스1</div>

<div id="box2">애니메이션 박스2</div>

<div id="box3">애니메이션 박스3</div>

</body>

커튼을 치고 걷어내는 듯한 효과 만들기

<head>

<style>

div{

width: 100px;

height: 100px;

position: absolute;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-play-state: running;

}

#div1{

background-color: blue;

animation-direction: normal;

animation-name: L-box;

}

#div2{

background-color: yellow;

animation-direction: reverse;

animation-name: R-box;

}

@keyframes L-box {

0%{ left: 0px; }

50%{ left: 200px; }

100%{ left: 0px; }

}

@keyframes R-box {

0%{ left: 400px; }

50%{ left: 200px; }

100%{ left: 400px; }

}

</style>

</head>

<body>

</body>

상하좌우로 움직이면서 색상 변경하기

<head>

<style>

div{

width: 100px;

height: 100px;

background: red;

position: relative;

animation: colorbox 5s infinite;

animation-direction: alternate;

}

@keyframes colorbox{

from{ background: red; left: 0px; top: 0px; }

25%{ background: orange; left: 300px; top: 0px; }

50%{ background: yellow; left: 300px; top: 300px; }

75%{ background: green; left: 0px; top: 300px; }

to{ background: red; left: 0px; top: 0px; }

}

</style>

</head>

<body>

</body>

점핑볼 만들기

<head>

<style>

@keyframes bounce {

from, to{

bottom: 0px;

animation-timing-function: ease-out;

}

50%{

bottom: 200px;

animation-timing-function: ease-in;

}

div{

position: absolute;

width: 20px;

height: 20px;

border-radius: 10px;

animation-name: bounce;

animation-iteration-count: infinite;

}

#b1{

left: 10px;

background: red;

animation-duration: 5s;

}

#b2{

left: 50px;

background: blue;

animation-duration: 10s;

}

#b3{

left: 90px;

background: green;

animation-duration: 3s;

}

#b4{

left: 130px;

background: silver;

animation-duration: 8s;

}

#b5{

left: 170px;

background: black;

animation-duration: 1s;

}

</style>

</head>

<body>

</body>

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

프로그램 언어 활용 13일차 (24/11/27) (2)	2024.11.27
프로그래밍 언어 활용 12일차 (24/11/26) (0)	2024.11.26
프로그래밍 언어 활용 10일차 (24/11/22) (0)	2024.11.22
프로그래밍 언어 활용 9일차(24/11/21) (0)	2024.11.21
프로그래밍 언어 활용 8일차(24/11/20) (2)	2024.11.20

현재글프로그래밍 언어 활용 11일차 (24/11/25)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그