Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS 2D 변환 완벽 가이드: transform 속성으로 요소 이동·회전·크기 조절하기

웹 디자인에서 애니메이션 효과가 있는 요소를 만드는 것은 매우 중요한 기능입니다. 예를 들어, 사용자가 버튼에 마우스를 올렸을 때 버튼이 살짝 기울어지는 효과를 넣고 싶다고 생각해 보세요.

바로 이럴 때 CSS transform 속성이 필요합니다. transform 속성은 웹 페이지에서 요소를 이동(move), 회전(rotate), 기울이기(skew), 크기 조절(scale)하는 데 사용됩니다. 이를 활용하면 사용자에게 더욱 인터랙티브한 웹 페이지를 제공할 수 있습니다.

이 글에서는 예제와 함께 CSS의 transform 속성을 사용해 2D 변환(2D Transform)을 다루는 방법을 자세히 알아보겠습니다. 글을 끝까지 읽으면 CSS 2D 변환을 능숙하게 활용할 수 있게 될 것입니다.

CSS 2D 변환이란?

CSS의 transform 함수를 사용하면 회전, 이동, 크기 조절, 기울이기 같은 기본적인 변환 애니메이션을 웹 페이지에 손쉽게 구현할 수 있습니다.

요소에 변환을 적용하더라도 주변의 다른 요소에는 영향을 주지 않습니다. 다만 변환된 요소가 주변 요소와 겹칠 수는 있으며, 원래 위치의 공간은 그대로 차지하게 됩니다.

CSS의 변환에는 2D 변환과 3D 변환 두 가지 종류가 있으며, 둘 모두 transform 속성으로 생성합니다. 이 글에서는 2D 변환에 집중해서 살펴보겠습니다.

CSS에서 웹 요소에 적용할 수 있는 대표적인 2D 변환 메서드는 다음과 같습니다.

  • translate()
  • scale()
  • scaleX()
  • scaleY()
  • skew()
  • skewX()
  • skewY()
  • matrix()
  • rotate()

지금부터 각 변환 메서드를 하나씩 예제와 함께 자세히 살펴보겠습니다.

translate() — 요소 이동하기

translate() 메서드는 요소를 현재 위치에서 화면상의 새로운 위치로 이동시킬 때 사용합니다.

translate() 함수는 두 개의 매개변수를 받습니다. 첫 번째는 요소를 오른쪽으로 이동시킬 픽셀 값(x축), 두 번째는 아래로 이동시킬 픽셀 값(y축)입니다.

사용 문법은 다음과 같습니다.

translate(xAxis, yAxis);

예를 들어, 박스를 현재 위치에서 오른쪽으로 25px, 아래로 50px 이동시키고 싶다면 다음 코드를 사용할 수 있습니다.

<!-- index.html -->
<body>
  <p>This is a paragraph of text.</p>
  <div><p>translate() 메서드로 이동된 박스입니다.</p></div>
</body>

/* styles.css */
div {
  transform: translate(25px, 50px);
  background-color: lightblue;
  border: 3px solid black;
}

코드를 분석해 보겠습니다. HTML 코드에서는 두 개의 문단을 만들었습니다. 첫 번째 문단은 페이지 상단에 표시되고, 두 번째 문단은 첫 번째 문단 아래에 <div> 태그로 감싸져 있습니다.

CSS 코드에서는 <div> 태그에 적용되는 스타일을 정의했습니다. 배경색을 연한 파란색(lightblue)으로 지정하고, 너비 3px의 검은색 실선 테두리를 추가했으며, translate() 변환을 사용해 박스를 오른쪽으로 25px, 아래로 50px 이동시켰습니다.

참고로 translate() 변환 없이 동일한 코드를 실행하면 박스는 웹 페이지에서 본래의 일반적인 위치에 그대로 머물게 됩니다.

rotate() — 요소 회전하기

rotate() 변환은 요소를 시계 방향 또는 반시계 방향으로 회전시킵니다. 회전 각도는 지정한 도(degree) 값에 따라 결정됩니다.

rotate() 변환의 문법은 다음과 같습니다.

transform: rotate(Xdeg);

여기서 X는 요소를 회전시키고 싶은 각도를 의미합니다. 시계 방향으로 회전하려면 양수 값을, 반시계 방향으로 회전하려면 음수 값을 지정하면 됩니다.

박스를 45도 회전시키고 싶다면 다음 코드를 사용할 수 있습니다.

<!-- index.html -->
<div><p>회전된 박스입니다.</p></div>

/* styles.css */
div {
  transform: rotate(45deg);
  background-color: lightblue;
  border: 3px solid black;
}

코드를 분석해 보겠습니다. HTML 코드에서는 문단 하나를 담고 있는 <div> 박스를 만들었고, CSS 코드에서는 박스에 연한 파란색 배경과 3px 검은색 실선 테두리를 적용한 뒤, <div> 박스를 시계 방향으로 45도 회전시켰습니다.

실행 결과를 보면 생성한 박스가 실제로 회전된 것을 확인할 수 있습니다. 회전 전과 후의 박스를 나란히 비교해 보면 차이가 더욱 명확하게 드러납니다.

scale() — 요소 크기 조절하기

scale() 메서드는 요소의 크기를 확대하거나 축소할 때 사용합니다.

scale() 메서드의 문법은 다음과 같습니다.

transform: scale(x, y);

scale 함수는 지정한 값에 따라 이미지의 너비(x)와 높이(y)를 비율에 맞게 조절합니다. 높이 스케일 값을 생략하면 scale() 함수는 높이가 너비와 동일한 배율이라고 간주합니다.

박스를 원래 크기의 1.5배로 확대하고 싶다면 다음 코드를 사용할 수 있습니다.

<!-- index.html -->
<div><p>크기가 조절된 박스입니다.</p></div>

/* styles.css */
div {
  transform: scale(1.5, 1.5);
  background-color: lightblue;
  border: 3px solid black;
}

HTML 코드에서는 한 문장의 텍스트를 담은 박스를 만들었고, CSS 코드에서는 모든 <div> 태그에 연한 파란색 배경과 3px 검은색 실선 테두리를 지정한 후, scale() 메서드로 박스를 원래 크기의 1.5배로 확대했습니다.

두 박스의 크기를 비교해 보면, scale() 값을 지정하지 않은 작은 박스와 scale(1.5)가 적용된 큰 박스의 차이를 확인할 수 있습니다. 큰 박스는 원본 박스보다 정확히 1.5배 크기입니다.

scaleX() 변환

scaleX() 변환은 요소의 너비만 확대하거나 축소합니다. 문법은 다음과 같습니다.

transform: scaleX(xValue);

xValue 매개변수는 요소의 너비를 얼마나 조절할지 나타내는 배율입니다. 예를 들어 박스의 너비를 1.5배로 늘리고 싶다면 다음 코드를 사용할 수 있습니다.

div {
  transform: scaleX(1.5);
  background-color: lightblue;
  border: 3px solid black;
}

이 예제에서 박스의 너비는 원래 너비의 1.5배로 늘어납니다.

scaleY() 변환

scaleY() 변환은 요소의 높이만 확대하거나 축소합니다. scaleY()는 scaleX()와 작동 방식이 같지만, 너비가 아닌 높이에 영향을 준다는 점이 다릅니다.

예를 들어 박스의 높이를 현재의 절반으로 줄이고 싶다면 다음 코드를 사용할 수 있습니다.

div {
  transform: scaleY(0.5);
  background-color: lightblue;
  border: 3px solid black;
}

이 코드에서는 y축에 해당하는 박스의 높이를 0.5배로 축소했습니다. 즉, 박스의 높이가 원래 높이의 절반이 된 것입니다.

skew() — 요소 기울이기

skew() 변환은 지정한 각도만큼 요소를 x축과 y축 방향으로 기울입니다.

skew() 메서드의 문법은 다음과 같습니다.

transform: skew(xValue, yValue);

xValue는 x축으로 기울일 각도, yValue는 y축으로 기울일 각도를 의미하며, 두 값 모두 도(degree) 단위로 표현합니다.

yValue를 지정하지 않으면 y축 방향으로는 기울임이 적용되지 않습니다.

박스를 x축으로 10도, y축으로 15도 기울이고 싶다면 다음 코드를 사용할 수 있습니다.

<!-- index.html -->
<div><p>기울어진 박스입니다.</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() 메서드를 사용합니다.

transform: skewY(yValue);

예를 들어 요소를 y축으로 10도 기울이고 싶다면 다음 코드를 사용하면 됩니다.

div {
  transform: skewY(10deg);
}

matrix() — 여러 변환을 한 번에 적용하기

matrix() 변환은 CSS의 모든 2D 변환을 하나의 요소에 적용할 수 있는 메서드입니다. 즉, matrix() 하나로 이동(translate), 회전(rotate), 크기 조절(scale), 기울이기(skew) 변환을 모두 처리할 수 있습니다.

matrix() 함수는 여섯 개의 매개변수를 받으며, 문법은 다음과 같습니다.

transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

예를 들어 다음과 같은 변환을 적용한 박스를 만들고 싶다고 가정해 보겠습니다.

  • X축 크기 조절(scale): 1
  • Y축 기울이기(skew): 10도
  • X축 기울이기(skew): 10도
  • Y축 크기 조절(scale): 1.25
  • X축 이동(translate): 25px
  • Y축 이동(translate): 25px

각 변환을 개별적으로 지정할 수도 있지만, 그렇게 하면 여러 줄의 변환 코드를 따로 작성해야 합니다. 대신 matrix() 메서드를 사용하면 이 모든 변환을 한 줄의 코드로 작성할 수 있습니다.

앞서 언급한 변환들을 적용한 박스를 만드는 코드는 다음과 같습니다.

<!-- index.html -->
<div><p>matrix()로 변환된 박스입니다.</p></div>

/* styles.css */
div {
  transform: matrix(1, 10, 10, 1.25, 25, 25);
  background-color: lightblue;
  border: 3px solid black;
}

이 코드에서는 matrix() 메서드에 앞서 정의한 값들을 전달하여, 박스에 기울이기(skew), 크기 조절(scale), 이동(translate) 변환을 한 번에 적용했습니다.

마무리

CSS의 transform 속성은 요소에 다양한 변환 효과를 적용하는 데 사용됩니다. CSS는 기울이기(skew), 크기 조절(scale), 회전(rotate), 이동(translate) 등 여러 가지 2D 변환을 제공하며, 이를 활용해 웹 요소를 자유롭게 변형할 수 있습니다.

이 글에서는 예제와 함께 CSS 2D 변환의 기본기를 살펴보았습니다. 이제 여러분도 전문 웹 개발자처럼 자신만의 2D 변환 효과를 만들어 볼 준비가 되었습니다.