Preface
이번 장에선 코드에 변형과 트랜지션, 애니메이션을 적용해 특정 효과가 있는 웹 요소를 정의하는 방법을 공부했다.
이전 내용들에 비해 다소 복잡한 내용들이 많았고, 특히 마우스 오버를 하면 상품 정보를 표시하는 코드가 어려웠다.
CSS의 기본적인 내용은 대부분 익혔다고 생각했는데, 책에서 다루지 않은 부분들이 아직 많다는 것을 새삼 느낄 수 있었다.
그러나 어렵고 복잡한 만큼 해당 속성들을 사용하면 웹 요소가 훨씬 고급지고 풍성해져서 보는 맛이 있는 것 같다.
1. 변형 알아보기
- CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야 한다.
transform: 함수
- 변형의 종류
1) 2차원 변형: 웹 요소를 평면에서 변형한다.
→ x축은 오른쪽으로 갈수록 값이 커지고, y축은 아래로 내려갈수록 값이 커진다.
2) 3차원 변형: x축과 y축에 원근감을 주는 z축을 추가해서 변형한다.
→ z축은 앞뒤로 이동한다.
- 2차원 변형 함수
1) translate(tx, ty): 지정한 크기만큼 x축, y축으로 이동한다.
→ ty값이 주어지지 않으면 0으로 간주한다.
2) translateX(tx): 지정한 크기만큼 x축으로 이동한다.
3) translateY(ty): 지정한 크기만큼 y축으로 이동한다.
4) scale(sx, sy): 지정한 크기만큼 x축과 y축으로 확대/축소한다.
→ 값이 하나뿐일 경우엔 x, y에 같은 값을 적용한다.
5) scaleX(sx): 지정한 크기만큼 x축으로 확대/축소한다.
6) scaleY(sy): 지정한 크기만큼 y축으로 확대/축소한다.
7) rotate(deg): 지정한 각도만큼 회전한다.
8) skew(ax, ay): 지정한 각도만큼 x축과 y축으로 왜곡한다.
→ 두 번째 값이 주어지지 않으면 y축 각도를 0으로 간주한다.
9) skewX(ax): 지정한 각도만큼 x축으로 왜곡한다.
10) skewY(ay): 지정한 각도만큼 y축으로 왜곡한다.
- 3차원 변형 함수
1) translate3d(tx, ty, tz): 지정한 크기만큼 x축, y축, z축으로 이동한다.
2) translateZ(tz): 지정한 크기만큼 z축으로 이동한다.
3) scale3d(sx, sy, sz): 지정한 크기만큼 x축과 y축, z축으로 확대/축소한다.
4) scaleZ(sz): 지정한 크기만큼 z축으로 확대/축소한다.
5) rotate(rx, ry, deg): 지정한 각도만큼 회전한다.
6) rotate3d(rx, ry, rz, deg): 지정한 각도만큼 회전한다.
7) rotateX(deg): 지정한 각도만큼 x축으로 회전한다.
8) rotateY(deg): 지정한 각도만큼 y축으로 회전한다.
9) rotatez(deg): 지정한 각도만큼 z축으로 회전한다.
10) perspective(깊이: 픽셀): 입체적으로 보일 수 있도록 깊잇값을 지정한다.
① 3차원 변형에서 사용하며, 원근감을 표현한다.
② 사용하는 값은 0보다 커야한다.
③ 값이 클수록 사용자로부터 멀어진다.
④ 변형하는 요소가 아니라 변형하는 요소의 부모 요소에 정의해야 한다.
- 벡터(vector): 크기와 방향을 나타내는 물리량
- rotate( ) 함수를 사용해 3차원에서 회전시키는 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transform</title>
<style>
#container{
width:800px;
margin:20px auto;
}
.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>
</div>
</body>
</html>
2. 트랜지션 알아보기
- 트랜지션(transition): 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것
- 트랜지션의 속성
1) transition-property: 트랜지션의 대상을 지정한다.
① all: all 값을 사용하거나 값을 아예 생략할 경우 요소의 모든 속성이 트랜지션 대상이 된다. (기본값)
② none: 트랜지션을 하는 동안 아무 속성도 바뀌지 않는다.
③ 속성 이름: 트랜지션 효과를 적용할 속성을 지정한다. (속성이 여럿일 경우 쉼표로 구분)
2) transition-duration: 트랜지션을 실행할 시간을 지정한다.
→ 지정할 수 있는 단위는 초 또는 밀리초이며, 대상 속성이 여러 개라면 진행 시간도 쉼표로 구분해서 여러 개를 지정할 수 있다.
3) transition-timing-function: 트랜지션의 실행 형태를 지정한다.
→ 트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 전체 속도 곡선을 만들 수 있다.
① ease: 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝낸다. (기본값)
② linear: 시작부터 끝까지 똑같은 속도로 진행한다.
③ ease-in: 느리게 시작한다.
④ ease-out: 느리게 끝낸다.
⑤ ease-in-out: 느리게 시작하고 느리게 끝낸다.
4) transition-delay: 트랜지션의 지연 시간을 지정한다.
→ 지정한 시간만큼 기다렸다가 트랜지션이 시작되며, 초 또는 밀리초를 사용한다. (기본값은 0)
5) transition: 위의 4가지 속성을 한번에 정의한다.
→ 속성값을 작성하는 순서는 상관 없지만 진행 시간과 지연 시간의 경우, 앞에 오는 시간값을 진행시간으로 간주한다.
- 트랜지션 속성을 한꺼번에 정리한 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<style>
.box {
margin:50px auto;
width: 100px;
height: 100px;
background-color: #fb5;
border: 1px solid #222;
transition: 2s ease-in; /* 대상: all, 시간:2초, 함수:ease-in */
}
.box:hover { /* 여기에 있는 속성이 모두 트랜지션 대상 */
width: 200px;
height: 200px;
background-color: #f50;
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- 마우스 오버하면 상품 정보를 표시하는 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3 애니메이션</title>
<style>
#container {
width:1000px;
margin:20px auto;
}
h1 {
text-align:center;
}
.prod-list {
list-style:none;
padding:0;
}
.prod-list li {
float: left;
padding: 0;
margin: 10px;
overflow: hidden;
position: relative;
}
.prod-list img {
margin:0;
padding:0;
float:left;
z-index:5;
}
.prod-list .caption {
position: absolute;
top:200px; /* 기준 위치보다 200px 아래로 */
width:300px;
height:200px;
padding-top:20px;
background:rgba(0,0,0,0.6); /* 반투명한 검정 배경 */
opacity:0; /* 화면에 보이지 않게 */
transition: all 0.6s ease-in-out; /* 나타날 때 부드럽게 트랜지션 추가 */
z-index:10; /* 다른 요소보다 위에 있도록 */
}
.prod-list li:hover .caption {
opacity: 1; /* 설명글이 화면에 보이게 */
transform: translateY(-200px); /* 설명글이 위로 200px 이동하게 */
}
.prod-list .caption h2, .prod-list .caption p {
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h1>신상품 목록</h1>
<ul class="prod-list">
<li>
<img src="images/prod1.jpg">
<div class="caption">
<h2>상품 1</h2>
<p>상품 1 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="images/prod2.jpg">
<div class="caption">
<h2>상품 2</h2>
<p>상품 2 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
<li>
<img src="images/prod3.jpg">
<div class="caption">
<h2>상품 3</h2>
<p>상품 3 설명 텍스트</p>
<p>가격 : 12,345원</p>
</div>
</li>
</ul>
</div>
</body>
</html>
3. 애니메이션 알아보기
- animation 속성: 특정 지점에서 스타일을 바꾸면서 애니메이션을 만든다.
- 키프레임: 애니메이션 중간에 스타일이 바뀌는 지점
→ @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정한다.
- animation의 속성
1) @keyframes: 애니메이션이 바뀌는 지점을 지정한다.
① 시작과 끝 위치만 사용: from, to 키워드 사용
② 중간 지점 추가: 시작 위치를 0%(from), 끝위치를 100%(to)로 놓고 50% 위치에 키프레임을 추가한다.
2) animation-delay: 애니메이션의 시작 시간을 지정한다.
3) animation-direction: 애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정한다.
① normal: 애니메이션을 from에서 to로 진행한다. (기본값)
② reverse: 애니메이션을 to에서 from으로 진행한다.
③ alternate: 홀수 번째는 normal로, 짝수 번째는 reverse로 진행한다.
④ alternate-reverse: 홀수 번째는 reverse로, 짝수 번째는 normal로 진행한다.
4) animation-duration: 애니메이션의 실행 시간을 지정한다.
→ 초나 밀리초를 사용하며, 기본값이 0이므로 속성값을 정하지 않으면 애니메이션이 실행되지 않는다.
5) animation-iteration-count: 애니메이션의 반복 횟수를 지정한다.
① 숫자: 애니메이션의 반복 횟수를 정한다.
② infinite: 애니메이션을 무한 반복한다.
6) animation-name: @keyframes로 설정해 높은 중간 상태를 지정한다.
→ 어떤 애니메이션을 사용할지 이름으로 구분한다.
7) animation-timing-function: 키프레임의 전환 형태를 지정한다.
8) animation: animation 속성을 한꺼번에 묶어서 지정한다.
- 애니메이션 2개를 한번에 지정하는 코드
<!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 { /* 0도 -> x축 -180도 회전 -> y축 -180도 회전 */
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>
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [JS] 자바스크립트와 첫 만남 (0) | 2022.08.03 |
|---|---|
| [CSS] 반응형 웹과 미디어 쿼리 (0) | 2022.08.03 |
| [CSS] CSS 고급 선택자 (0) | 2022.07.30 |
| [CSS] 이미지와 그라데이션 효과로 배경 꾸미기 (0) | 2022.07.28 |
| [CSS] 레이아웃을 구성하는 CSS 박스 모델 (2) (0) | 2022.07.27 |
댓글