애니메이션 웹 요소를 만드는 것은 웹 디자인의 중요한 기능입니다. 예를 들어, 사용자가 버튼 위로 마우스를 가져갈 때 기울어지게 하려는 버튼을 디자인할 수 있습니다.
이것이 CSS transform 속성이 들어오는 곳입니다. transform 속성은 웹 페이지에서 요소를 이동, 회전, 기울이기 및 크기 조정하는 데 사용됩니다. 이를 통해 사용자가 웹 페이지를 보다 대화식으로 만들 수 있습니다.
이 자습서에서는 변형 속성을 사용하여 CSS에서 2D 변형을 사용하는 방법을 예제와 함께 설명합니다. 이 튜토리얼을 읽으면 CSS 2D 변환 사용의 전문가가 될 것입니다.
CSS 2D 변환
CSS 변형 기능을 사용하면 웹 페이지에서 회전, 이동, 크기 조정 및 기울이기와 같은 기본 변형 애니메이션을 만들 수 있습니다.
요소가 변환될 때 주변 요소에 영향을 주지 않습니다. 그러나 변형된 요소는 웹 페이지의 기본 위치에서 공간을 차지하지만 겹칠 수 있습니다.
CSS에는 2D와 3D의 두 가지 변환 유형이 있습니다. transform 속성은 두 가지 유형의 변형을 생성하는 데 사용되지만 이 기사에서는 2D 변형에 중점을 둘 것입니다.
CSS의 웹 요소에 적용할 수 있는 2D 변형이 많이 있습니다. 이것들은:
- 번역()
- 스케일()
- 스케일X()
- 스케일Y()
- 기울기()
- skewX()
- 비뚤어짐()
- 매트릭스()
- 회전()
예제를 참조하여 이러한 각 변환을 개별적으로 분석해 보겠습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
translate() 변환
translate() 메서드는 요소를 현재 위치에서 화면의 새 위치로 이동하는 데 사용됩니다.
translate() 함수는 요소가 이동해야 하는 오른쪽 픽셀 수와 요소 아래로 이동해야 하는 픽셀 수라는 두 가지 매개변수를 허용합니다.
이 메서드의 구문은 다음과 같습니다.
translate(xAxis, yAxis);
현재 위치에서 오른쪽으로 25px, 아래로 50px 이동하려는 상자가 있다고 가정합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
index.html
<body>
<p>This is a paragraph of text.</p>
<div><p>This is a box that has been moved using the translate() method.</p></div>
</body>
styles.css
div {
transform: translate(25px, 50px);
background-color: lightblue;
border: 3px solid black;
}
코드는 다음을 반환합니다.
[Result of code here]
코드를 분해해 보겠습니다. HTML 코드에서 두 단락의 텍스트를 만들었습니다. 첫 번째 단락이 페이지 상단에 나타납니다. 두 번째 단락은 첫 번째 단락 아래에 나타나며
CSS 코드에서
다음은 translate() 변환이 지정되지 않은 코드입니다.
index.html
<body>
<p>This is a paragraph of text.</p>
<div><p>This is a box that has been moved using the translate() method.</p></div>
</body>
styles.css
div {
background-color: lightblue;
border: 3px solid black;
}
코드는 다음을 반환합니다.
[Result of code here]
보시다시피 translate() 를 지정하지 않고 방법, 우리 상자는 웹 페이지에서 일반적인 위치를 유지합니다.
rotate() 변환
rotate() 변형을 사용하면 요소를 시계 방향 또는 시계 반대 방향으로 회전할 수 있습니다. 항목이 회전하는 정도는 주어진 각도 값을 기반으로 합니다.
rotate() 구문 변환은 다음과 같습니다.
transform: rotate(Xdeg);
위 구문에서 X는 요소를 회전할 각도를 나타냅니다. 요소를 시계 방향으로 회전하려면 X에 양수 값을 지정해야 합니다. 그렇지 않고 요소를 시계 반대 방향으로 회전하려면 X에 음수 값을 지정해야 합니다.
45도 회전하려는 상자가 있다고 가정합니다. 다음 코드를 사용하여 상자를 회전할 수 있습니다.
index.html
<div><p>This is a box that has been rotated.</p></div>
styles.css
div {
transform: rotate(45deg);
background-color: lightblue;
border: 3px solid black;
}
코드는 다음을 반환합니다.
[Result of code here]
코드를 분해해 보겠습니다. HTML 코드에서 텍스트 단락을 포함하는
코드 결과에서 볼 수 있듯이 우리가 만든 상자가 회전했습니다. 다음은 회전 전 상자와 회전 후 상자를 비교한 것입니다.
scale() 변환
scale() 방법을 사용하면 요소의 크기를 늘리거나 줄일 수 있습니다.
scale() 메서드의 구문은 다음과 같습니다.
transform: scale(x, y);
scale 기능은 지정한 값에 따라 이미지의 너비(x)와 높이(y)를 비례적으로 조절합니다. 높이 눈금에 대한 값을 지정하지 않으면 scale() 함수는 높이 눈금이 너비 눈금과 같아야 한다고 가정합니다.
원래 크기의 1.5배로 확장하려는 상자가 있다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.
index.html
<div><p>This is a box that has been scaled.</p></div>
styles.css
div {
transform: scale(1.5, 1.5);
background-color: lightblue;
border: 3px solid black;
}
코드는 다음을 반환합니다.
[Result of code here]
HTML 코드에서 텍스트 문장을 담는 상자를 만들었습니다. CSS 코드에서 모든
다음은 두 상자의 크기를 비교한 이미지입니다. 가장 작은 상자에는 scale() 값이 없고 가장 큰 상자에는 scale() 1.5가 있습니다.
This is a box that has been scaled. 텍스트가 포함된 가장 큰 상자입니다. 원래 상자보다 1.5배 큽니다.
scaleX() 변환
scaleX() 변형을 사용하면 요소의 너비를 늘리거나 줄일 수 있습니다. scaleX() 변환 구문은 다음과 같습니다.
transform: scaleX(xValue);
xValue 매개변수는 요소의 너비를 조정하려는 양입니다. 너비를 1.6배로 늘리려는 상자가 있다고 가정합니다. 다음 코드를 사용하여 이 상자의 크기를 늘릴 수 있습니다.
index.html
<div><p>This is a box that has been scaled.</p></div>
styles.css
div {
transform: scaleX(1.5);
background-color: lightblue;
border: 3px solid black;
}
코드는 다음을 반환합니다.
[Result of code here]
이 예에서 상자의 너비는 원래 너비의 1.5배 증가했습니다.
scaleY() 변환
scaleY() 변형을 사용하면 요소의 높이를 높이거나 낮출 수 있습니다. scaleY()는 scaleX()와 같은 방식으로 작동하지만 요소의 너비에 영향을 주는 대신 scaleY()는 요소의 높이를 변경합니다.
상자의 높이를 현재 높이의 절반으로 줄이려고 한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.
index.html
<div><p>This is a box that has been scaled.</p></div>
styles.css
div {
transform: scaleY(0.5);
background-color: lightblue;
border: 3px solid black;
}
코드는 다음을 반환합니다.
[Result of code here]
우리의 코드에서 우리는 0.5배만큼 상자의 높이(y축으로 표시됨)를 축소했습니다. 즉, 상자는 원래 높이의 절반입니다.
skew() 변환
skew() 변환은 지정된 각도만큼 x 및 y 축을 따라 요소를 기울입니다.
Skew() 메서드의 구문은 다음과 같습니다.
transform: skew(xValue, yValue);
xValue는 요소가 x축에서 얼마나 기울어져야 하는지를 나타내고 yValue는 요소가 y축에서 얼마나 기울어져야 하는지를 나타냅니다. 두 값 모두 도 단위로 표시되어야 합니다.
yValue 값을 지정하지 않으면 y축에 기울기가 적용되지 않습니다.
상자를 x축으로 10도, y축으로 15도 기울이고 싶다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.
index.html
<div><p>This is a box that has been skewed.</p></div>
styles.css
div {
transform: skew(10deg, 15deg);
background-color: lightblue;
border: 3px solid black;
}
코드는 다음을 반환합니다.
이 예에서 우리는 상자를 x축에서 10도, y축에서 15도 기울였습니다.
skewX() 및 skewY() 변환
scale()처럼 메소드, skew() 요소의 x 또는 y 축을 가로질러 요소를 기울이는 데 사용되는 두 가지 하위 메서드가 함께 제공됩니다.
요소를 X축에서만 기울이려면 skewX() 메서드를 사용할 수 있습니다. 이 메서드의 구문은 다음과 같습니다.
transform: skewX(xValue);
xValue는 요소가 기울어져야 하는 x축의 각도입니다.
Y축을 가로질러 요소를 기울이려면 skewY() 메서드를 사용할 수 있습니다. SkewY() 메서드의 구문은 다음과 같습니다.
transform: skewY(yValue);
따라서 Y축에서 요소를 10도 기울이려면 다음 코드를 사용할 수 있습니다.
div {
transform: skewY(10deg);
}
매트릭스() 변환
matrix() 변환은 요소에 대한 모든 2D CSS 변환을 수행합니다. 따라서 matrix()는 변환, 회전, 크기 조정 및 기울이기 변환을 적용하는 데 사용할 수 있습니다.
matrix() 함수는 요소에 변형을 적용할 수 있는 6개의 매개변수를 허용합니다. 이 메서드의 구문은 다음과 같습니다.
변환:matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());
다음 변환을 사용하는 상자를 만들고 싶다고 가정합니다.
- X축의 눈금 1.
- Y축에서 10도 기울어짐
- X축에서 10도 기울어짐
- 1.25의 Y축 배율.
- X축에서 25픽셀 이동("변환")
- Y축에서 25픽셀 이동
이러한 각 변환을 개별적으로 지정할 수 있습니다. 그러나 그렇게 하면 많은 개별 변환을 작성해야 합니다. 대신, 우리는 한 줄의 코드를 사용하여 이러한 변환을 작성하기 위해 matrix() 메서드를 사용할 수 있습니다.
다음은 앞서 언급한 변환으로 상자를 만드는 데 사용할 수 있는 코드입니다.
index.html
<div><p>This is a box that has been skewed.</p></div>
styles.css
div {
transform: matrix(1, 10, 10, 1.25, 25, 25);
background-color: lightblue;
border: 3px solid black;
}
코드는 다음을 반환합니다.
[Result of code here]
우리 코드에서 우리는 스큐, 스케일 및 번역 변환을 상자에 적용했습니다. 우리는 matrix() 메서드를 사용하고 이전에 지정한 값을 전달하여 이 작업을 수행했습니다.
결론
transform 속성은 CSS의 요소에 변형을 적용하는 데 사용됩니다. CSS는 웹 요소를 변형하는 데 사용되는 기울이기, 크기 조정, 회전 및 번역을 포함한 다양한 2D 변형을 제공합니다.
이 자습서에서는 예제를 참조하여 2D CSS 변환의 기본 사항을 살펴보았습니다. 이제 전문 웹 개발자처럼 자신만의 2D 변형을 만들 준비가 되었습니다.