1. 변형 알아보기
1) transform과 변형 함수
- translate(): 웹 요소를 이동시키는 변형 함수
- 2차원 변형: 웹 요소를 평면에서 변형한다.
- x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 갈수록 값이 커진다.
- 3차원 변형 함수: 2차원 변형함수에 z축을 추가한다.
2) 웹 요소를 변형시키는 translate() 함수
- translate()는 x축이나 y축 또는 양쪽 방향으로 이동할 거릴를 지정하면 해당 요소가 지정한 크기만큼 이동한다.
Ex) 웹 요소 이동하기
- 도형위로 마우스 포인터를 올려 놓으면 x축 또는 y축으로 이동하고 또는 x축과 y축으로 동시에 이동하는 예제이다.
#movex:hover {
transform: translateX(50px); /* x축으로(가로) 50px 이동 */
}
#movey:hover {
transform: translateY(20px); /* y축으로(세로) 20px 이동 */
}
#movexy:hover {
transform: translate(10px, 20px); /* x축으로(가로) 10px, y축으로(세로) 20px 이동 */
}
Note) 실행 결과
3) 요소를 확대/ 축소하는 scale()함수
- scale(x, y, z)
- 괄호 안의 값이 1보다 크면 확대, 작으면 축소된다.
- 값을 하나만 넣으면 x, y에 각각 같은 값을 적용한다.
Ex) scale()을 통해 확대하고 축소하기
#scalex:hover{
transform: scaleX(2); /* x축으로(가로) 2배 확대 */
}
#scaley:hover{
transform: scaleY(1.5); /* y축으로(세로) 1.5배 확대 */
}
#scale:hover{
transform: scale(0.7); /* x, y축으로(가로, 세로) 0.7배 확대 */
}
Note) 실행 결과
4) 요소를 회전시키는 rotate()함수
- 2차원과 3차원에서 모두 사용가능하다.
- 2차원에서는 각도만 지정하면 된다.
- 일반적인 각도 degree나 라디안(radian)을 사용한다.
-> 1라디안 =180도 / 파이
Ex) 함수를 사용해서 2차원에서 사용하기
#rotate1:hover {
transform: rotate(40deg); /* 시계 방향(오른쪽)으로 40도 회전 */
}
#rotate2:hover {
transform: rotate(-40deg); /* 시계 반대 방향(왼쪽)으로 40도 회전 */
}
Note) 실행 결과
Ex) 이미지 회전하며 원근감 주기
- 마우스 포인터를 올리면 x축, y축, z축으로 각각 55도씩 회전하거나 x, y, z축에 방향 벡터를 지정하고 55도를 회전
- 회전하는 것을 확인할 수 있도록 트랜지션 효과를 준다.
- 각 요소에 원근감을 주기 위해 #rotatex, #rotatey, #rotatez, #rotatexyx의 부모 요소인 .origin에 perspective 속성을 정의한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform</title>
<style>
.origin{
width:152px;
height:180px;
border:1px solid black;
margin:30px;
float:left;
}
.origin > div {
width:152px;
height:180px;
}
.rotatex:hover {
transform: rotateX(50deg);
}
#pers {
perspective:300px;
}
</style>
</head>
<body>
<h4>원본 이미지</h4>
<div class="origin">
<img src="images/sunset.jpg" alt="">
</div>
<div class="origin">
<div class="rotatex">
<img src="images/sunset.jpg" alt="">
</div>
</div>
<div class="origin" id="pers">
<div class="rotatex">
<img src="images/sunset.jpg" alt="">
</div>
</div>
</body>
</html>
Note) 실행 결과
Ex) rotate() 함수를 사용해서 3차원 회전하기
- transition: all 3s => 3초 동안 회전하도록 트랜지션 적용
- rotateX(55deg) : x축으로 55도 이동
- rotate3D(2.5, 1.2, -1.5, 55deg ) x, y, z축에 방향 벡터를 정하고 55도 회전
.origin {
width: 100px;
height: 100px;
margin: 40px;
float: left;
border: 1px solid black;
perspective: 200px; /* 원근감 추가 */
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
transition:all 3s; /* 3초 동안 회전하도록 트랜지션 적용 */
}
#rotatex:hover {
transform: rotateX(55deg); /* x축으로 55도 회전 */
}
#rotatey:hover {
transform: rotateY(55deg); /* y축으로 55도 회전 */
}
#rotatez:hover {
transform: rotateZ(55deg); /* z축으로 55도 회전 */
}
#rotatexyz:hover {
transform: rotate3d(2.5, 1.2, -1.5, 55deg); /* x,y,z축으로 55도 회전 */
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="rotatex"></div>
</div>
<div class="origin">
<div id="rotatey"></div>
</div>
<div class="origin">
<div id="rotatez"></div>
</div>
<div class="origin">
<div id="rotatexyz"></div>
</div>
Note) 실행 결과
5) 요소를 비틀어 왜곡하는 skew() 함수
- 지정한 각도만틈 요소를 비틀어 왜곡한다 .
- 양쪽 방향으로 비틀거나 한쪽 방향으로만 비틀 수도 있다.
-
Ex) 도형 비틀기
- x축으로 30도 비틀고, y축으로 15도 비튼다.
- 마지막은 x축으로 -25, y축으로 -15도 비튼다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform</title>
<style>
#container{
width:600px;
margin:20px auto;
}
.origin {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 40px;
}
.origin > div {
width:100px;
height:100px;
background-color:orange;
}
#skewx:hover {
transform: skewX(30deg);
}
#skewy:hover {
transform: skewY(15deg);
}
#skewxy:hover {
transform: skew(-25deg, -15deg);
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="skewx"></div>
</div>
<div class="origin">
<div id="skewy"></div>
</div>
<div class="origin">
<div id="skewxy"></div>
</div>
</div>
</body>
</html>
Note) 실행 결과
Ex) skew() 함수를 텍스트 영역에 적용하기
- skewX(); 각돗값이 양수면 왼쪽이 올라가고 오른쪽이 내려간다.
- skewY(); 각돗값이 양수면 오른쪽이 올라가고 왼쪽이 내려간다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform</title>
<style>
#container{
width:600px;
margin:20px auto;
}
h1 {
width:500px;
height:80px;
background-color:#222;
color:#fff;
font-weight:bold;
line-height: 80px;
text-align: center;
transform: skewX(15deg);
}
</style>
</head>
<body>
<div id="container">
<h1>CSS 변형 함수 익히기</h1>
</div>
</body>
</html>
Note) 실행 결과
2. 트랜지션 알아보기
1) 트랜지션이란?
Def) 트랜지션(transition):웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 말한다 .
Ex) 트랜지션
- 마우스 포인터를 올리면 하늘색 사각형을 파란색 사각형으로 변하고 주황색 사각형은 테두리가 빨간색인 원으로 변한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<style>
div {
width: 100px;
height: 100px;
float: left;
margin: 30px;
}
.bg-tr{
background-color:skyblue;
transition:all ease 1s;
}
.bg-tr:hover {
background-color:blue;
}
.border-tr {
background-color: orange;
border: 3px solid black;
transition: all linear 1.5s;
}
.border-tr:hover {
border: 3px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="bg-tr"> </div>
<div class="border-tr"></div>
</body>
</html>
Note) 실행 결과
- 마우스 포인터 올리기 전
- 마우스 포인터 올린 후
2) 트랜지션과 속성
(1) 트랜지션의 대상을 지정하는 transition-proprety 속성
- 트랜지션을 만드려면 가장 먼저 어떤 속성에 트랜지션을 적용할 것인지 대상을 지정해야한다.
- 트랜지션의 속성값
-> all (요소의 모든 속성이 대상이다.)
-> none (트랜지션을 하는 동안 아무 속성도 바뀌지 않는다.)
-> 속성 이름 (트랜지션 효과를 적용할 속성을 지정한다.)
(2) 트랜지션의 진행 시간을 지정하는 transition-duration 속성
- transition-proprety 에서 트랜지션 대상을 지정했다면 다음으로 진행 시간을 지정해야 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있다.
- 지정할 수 있는 시간 단위는 초(second), 밀리초(millisecond)
- 대상 속성이 여러 개이면 쉼표로 구분해서 여러 개를 지정할 수도 있다.
Ex) 트랜지션 대상과 진행 시간 지정하기
- 높잇값은 1초 안에 바뀌고 너빗값은 2초 안에 걸쳐 바뀌도록 지정한다.
- 마우스 포인터를 올리면 트랜지션 효과를 확인할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<style>
.box {
margin:20px auto;
width: 100px;
height: 100px;
background-color: #07f;
border: 1px solid #222;
transition-property: width, height;
transition-duration: 2s, 1s;
}
.box:hover {
width:200px;
height:120px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Note) 실행 결과
- before
- 마우스 포인터를 댄 후
(3) 트랜지션의 속도 곡선을 지정하는 transition-timing-function 속성
- 트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해서 전제 속도 곡선을 만들 수 있다.
- 미리 정해진 키워드나 베지에 곡선을 이용해서 표현한다.
- 속성값
-> ease: 천천히 시작하고 마지막에 빨리 끝낸다.
-> linear: 시작부터 끝까지 똑같은 속도로 진행한다.
-> ease-in: 느리게 시작한다.
-> ease-out: 느리게 끝난다.
-> ease-in-out: 느리게 시작하고 느리게 끝낸다.
-> cubic-bezier(n, n, n, n): 베지에 함수를 정의해서 사용한다. ( 0 ~ 1사이에서만 지정 가능)
Ex) 트랜지션 속도 곡선의 속성값 비교하기
- 마우스 포인터를 올리면 트랜지션의 시작 속도와 끝나는 속도가 다르게 진행된다.
Note) 실행 결과
(4) 트랜지션의 지연 속도를 설정하는 transition-delay 속성
- 트랜지션 효과를 언제부터 시작할 것인지를 설정한다.
- 지정한 시간만큼 기다렸다가 트랜지션이 시작된다.
- 초나 밀리초 사용가능, 기본값은 0
(5) 트랜지션의 속성을 한꺼번에 표기하는 transition 속성
- 트랜지션의 적용 대상이 전체이고 각각의 진행시간이 같다면 transition 속성으로 한꺼번에 지정 가능하다.
- 시간값을 사용하는 속성이 2개(진행 시간, 지연 시간)이므로 2개 있다면 앞에 오는 값을 transition-duration, 뒤에 오는 값은 transition-delay 속성으로 간주한다.
Ex) 트랜지션 속성 한꺼번에 지정하기
- 2초 동안 ease-in 트랜지션을 실행한다.
- 트랜지션 대상을 지정하지 않았기 때문에 기본값인 all이 적용한다.
- 사각형 위에 마우스를 가져가면 270도 회전하면서 2초 동안 너빗값과 높잇값이 커지고 배경색이 바뀐다.
Note) 실행 결과
Ex) 마우스 오버하면 상품 정보 표시하기
- 상품 이미지 위로 마우스를 가져가면 간단한 상품 정보가 표시되도록 한다.
- .caption 스타일의 불투명도를 0으로 지정한다.
- 반투명한 검정 배경에서 화면에 보이지 않게(opacity: 0) 부드럽게 나타나도록 트랜지션을 추가한다.
- z-index를 이용해서 다른 요소보다 위에 있도록 한다.
- li에 position: relative를 꼭 추가한다.
- 변형 함수 translateY()를 이용해서 상품 설명 글을 위로 이동하고 opacity 속성값을 1로 수정하여 감췄던 텍스트를 보여준다.
-> translateY(-200px): 위로 이동한다.
Note) 실행 결과
3. 애니메이션 알아보기
1) CSS 애니메이션에 사용하는 속성
Def) 키 프레임(key frame): 애니메이션 중간에 스타일이 바뀌는 지점을 말한다.
- 애니메이션 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정한다.
(1) 애니메이션의 지점과 이름을 설정하는 @keyframes 속성, animation-name 속성
- 애니메이션의 시작과 끝을 비롯하여 상태과 바뀌는 부분이 있다면 @keyframes 속성을 이용해서 바뀌는 지점을 설정한다.
- 웹 문서에서는 애니메이션을 여러 개 정의하기도 한다. animation-name 속성으로 어떤 애니메이션을 사용할 지 이름으로 구분한다.
(2) 애니메이션의 실행 시간을 지정하는 animation-duration 속성
- 초나 밀리초를 사용한다. 기본값은 0이다.
- 속성값을 지정하지 않으면 animation은 실행되지 않는다.
Ex) 애니메이션의 지점, 이름, 실행 시간 적용하기
- @keyframes를 이용해서 shape, rotate라는 애니메이션을 각각 정의한다.
- #box1과 #box2에 각각 animation-name: shape과 animation-name: rotate를 사용해서 애니메이션을 실행한다.
- 애니메이션 실행 시간은 3초이다.
- 한번만 실행되므로 F5를 눌러야 다시 실행된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
#container{
width:500px;
margin:20px auto;
}
.box{
width: 100px;
height: 100px;
float:left;
margin:50px;
}
#box1 {
background-color: #4cff00;
border: 1px solid transparent;
animation-name: shape;
animation-duration: 3s;
}
#box2 {
background-color: #8f06b0;
border: 1px solid transparent;
animation-name: rotate;
animation-duration: 3s;
}
@keyframes shape {
from {
border: 1px solid transparent;
}
to {
border: 1px solid #000;
border-radius: 50%;
}
}
@keyframes rotate {
from {
transform:rotate(0deg) /* 시작은 0도에서 */
}
to {
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</div>
</body>
</html>
Note) 실행 결과
(3)애니메이션의 방향을 지정하는 animation-direction속성
- 애니메이션은 기본적으로 keyframes에서 정의한 from에서 to순서로 진행하는데 direction속성을 이용해서 진행 방향을 바꿀 수 있다.
- 속성값
-> normal: from -> to 로 진행
-> reverse: to -> from으로 진행한다.
-> alternate: 홀수번째는 normal로 짝수 번째는 reverse로 진행한다.
-> alternate-reverse: 홀수 번째는 reverse로 진행 짝수 번째는 normal로 진행한다.
(4) 반복횟수를 지정하는 animation-iteration-count 속성
- 속성값: 숫자(반복 횟수), infinite(무한 반복)
(5) 애니메이션의 속도 곡선을 지정하는 animation-function 속성
- 트랜지션과 마찬가지로 animation에서도 애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체속도 곡선을 만들 수 있다.
(6) 애니메이션의 속성을 한꺼번에 표기하는 animation 속성
- duration속성을 반드시 표기해야한다.
- 지정하지 않으면 기본값이 0이므로 애니메이션이 적용되지 않는다.
Ex) 애니메이션 2개를 한꺼번에 지정하기
- rotate와 background 애니메이션을 동시에 실행한다.
- 쉼표로 구분하여 둘 이상의 애니메이션을 실행 가능하다.
- 1.5초 동안 실행되고 무한 반복된다.
- background 애니메이션에는 alternate 속성이 있어서 반대 방향으로도 실행된다.
- 빨간 배경 -> 초록 배경 -> 파란 배경으로 바뀐다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 60px auto;
animation: rotate 1.5s infinite, background 1.5s infinite alternate;
}
@keyframes rotate {
from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}
@keyframes background {
from { background-color: red; }
50% { background-color: green }
to { background-color: blue; }
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
Note) 실행 결과
Ex) 마무리 문제 1)
- 트랜지션 진행시간: 0.5초
- 트랜지션 대상 all
- 트랜지션 함수: ease-in
.top-menu li a:link{
color:black;
text-decoration:none;
text-align:center;
display:block;
width:100px;
height:35px;
line-height: 35px;
transition: 0.5s ease-in;
}
Note) 실행 결과
Ex) 마무리 문제 2)
- 문서를 불러오자마자 y축을 기준으로 360도 회전하도록 애니메이션을 만든다.
- 깊잇값은 120px로 지정한다.
- roteteY() 함수를 이용한다.
- 키프레임은 시작 지점, 중간 지점, 끝 지점 세 군데에 지정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>연습문제 2</title>
<style>
#container {
width:200px;
margin:30px auto;
}
img {
border:1px solid #ccc;
border-radius:50%;
box-shadow: 5px 5px 30px 2px #000;
animation: rotate 3s infinite;
}
@keyframes rotate{
from{ transform: perspective(200px) rotateY(0);}
50%{transform: perspective(200px) rotateY(-180deg);}
to{transform: perspective(200px) rotateY(-360deg);}
}
</style>
</head>
<body>
<div id="container">
<img src="images/bear.jpg" alt="곰인형 사진">
</div>
</body>
</html>
Note) 실행 결과 (회전하는 모양)
