이번 페이지에서는 웹 요소에 변형을 적용해 볼 예정이다.
가끔 버튼을 누르거나 로딩 페이지가 뜰 때 웹 요소가 커진다던지, 늘어진다던지 등등 변형 되는 것을 본 적이 있을 것이다.
웹 요소의 변형이란 요소의 크기나 위치를 바꾸는 것이며 요소의 x축과 y축을 기준으로 바뀌게 되는 것이다.
변형을 적용하기 위해서는 css의 transform 속성을 사용하며 다양한 함수를 활용하여 변형을 가하게 된다.
- translate(x, y): x축, y축 방향으로 이동한다.
- scale(x, y): x축, y축 방향으로 확대 및 축소한다.
- skew(x, y): x축, y축 방향으로 비틀어 왜곡한다.
- rotate(deg): 지정한 각도만큼 회전한다.
코드 예시
<style>
.parent{
display: inline-block;
margin: 0 20px;
}
.child{
width: 150px;
height: 150px;
background-color: teal;
}
.parent:nth-child(1) > .child{
transform: translate(30px, 50px);
}
.parent:nth-child(2) > .child{
transform: scale(1.2, 0.8);
}
.parent:nth-child(3) > .child{
transform: skew(45deg);
}
.parent:nth-child(4) > .child{
transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</body>예시와 같이 transform은 좌표 평면 상에서 각 축의 값을 변경해 이루어지는 변형이다.
이번에는 transition을 알아보려고 한다.
transition은 요소에 지정된 스타일을 전혀 다른 스타일로 변화시킬 수 있으며 상황에 따라 애니메이션 효과도 줄 수 있다.
- property: 변화 대상 속성을 지정한다.
- duration: 변화가 실행될 시간을 지정한다.
- delay: 변화 시작 전 지연 시간을 지정한다.
- timing-function: 변화 실행 시 실행 곡선 방향을 지정한다.
그리고 transition-timing-function 속성의 경우 지정된 키워드가 있어서 실행 시간 동안의 속도 변화 방식을 지정할 수 있다.
- ease: 기본값으로 속도가 빨라지다가 끝날 때 다시 느려진다.
- linear: 처음부터 끝까지 같은 속도.
- ease-in: 느리게 진행했다가 점점 빨라진다.
- ease-out: 빠르게 시작했다가 점점 느려진다.
코드 예시
<head>
<style>
.parent{
display: inline-block;
margin: 0 20px;
}
.child{
width: 150px;
height: 150px;
background-color: teal;
}
.parent:nth-child(4) > .child:hover{
width: 300px;
height: 300px;
background-color: orange;
transition-property: width
transition-duration: 2s
transition-timing-function: ease;
// 공백을 띄워두고 붙여서 쓸 수 있다.
transition: background-color 2s 0s linear, height 2s 0s linear;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</body>위와 같이 property로 어느 부분을 변하게 하고 싶은지 지정한 후 duration이나 timing-function과 같은 키워드로 스타일 속성을 지정해 주면 된다.
요약하면
tranform은 x, y축 기준으로 평면에서의 단순 형태 변화.
transition은 지정 스타일 변화와 애니메이션 효과라고 볼 수 있다.
hyohyo