• 목록
• 게시판 리스트 옵션
  • 검색

CSS 트랜스폼 scale() 함수

scale() 함수는 요소의 크기를 확대 또는 축소할 때 사용합니다. 

요소의 너비(width)나 높이(height)를 직접 변경하는 것과 달리, 주변 레이아웃에 영향을 주지 않고 시각적인 크기만 변형시키기 때문에 애니메이션 효과에 매우 효율적입니다.

1. 기본 문법 및 매개변수

transform: scale(x, y); 형태로 작성하며, 단위 없는 배수를 사용합니다.

• x: 가로 방향 확대/축소 비율

• y: 세로 방향 확대/축소 비율

• scale(n): 인자를 하나만 쓰면 가로와 세로에 동일한 비율(n)이 적용됩니다.

2. 값에 따른 변화

• 1: 기본 크기 (100%)

• 1보다 큰 값: 요소가 확대됩니다. (예: 1.5는 150%)

• 0과 1 사이의 값: 요소가 축소됩니다. (예: 0.5는 50%)

• 음수 값: 요소가 반전(Mirror) 되면서 크기가 조절됩니다.

3. 세부 함수 종류

특정 축으로만 크기를 조절하고 싶을 때 사용합니다.

• scaleX(n): 가로 방향으로만 확대/축소

• scaleY(n): 세로 방향으로만 확대/축소

• scaleZ(n): Z축(두께) 방향으로 확대/축소 (3D 환경에서 사용)

• scale3d(x, y, z): 세 축의 크기 변형을 한 번에 정의

4. 주요 특징 및 활용 팁

• 레이아웃 보존: 요소를 2배로 키워도 옆에 있는 다른 HTML 요소들은 밀려나지 않고 제자리에 있습니다. (포토샵의 레이어 크기 조절과 유사)

• transform-origin과의 관계: 기본적으로 중앙을 기점으로 커지거나 작아집니다. 기준점을 왼쪽 상단으로 바꾸고 싶다면 transform-origin: top left;를 함께 사용합니다.

• 이미지 호버 효과: 갤러리나 카드 UI에서 마우스를 올렸을 때 이미지가 살짝 커지는 효과에 가장 많이 쓰입니다.

  CSS

  .img-box img {
    transition: transform 0.3s;
  }
  .img-box:hover img {
    transform: scale(1.1); /* 1.1배 확대 */
  }
  

5. 주의사항

scale()로 요소를 키우면 안에 포함된 텍스트나 이미지의 해상도가 깨져 보일 수 있습니다. 

너무 과도한 확대는 피하는 것이 좋으며, 반대로 축소 시에는 글자가 읽기 어려워질 수 있으니 주의해야 합니다.

• 목록
• 게시판 리스트 옵션
  • 검색