HTML, CSS 크기 - scale

 

HTML/CSS scale() 함수로 요소 크기 조절하기

 

HTML/CSS에서 scale() 함수는 요소의 크기를 조절하는 변환을 정의합니다. 변환의 결과는 <transform-function> 데이터 유형입니다.

scale() 함수의 구문은 다음과 같습니다.

 

scale(x, y);

 

여기서 x는 요소의 가로 크기를 조절하는 값이고, y는 요소의 세로 크기를 조절하는 값입니다.

 

x와 y는 모두 숫자 값입니다. x와 y의 값이 모두 1이면 요소의 크기가 변하지 않습니다.

 

x 또는 y의 값이 1보다 크면 요소의 크기가 커집니다. x 또는 y의 값이 1보다 작으면 요소의 크기가 작아집니다.

 

예를 들어, 다음 CSS는 요소의 가로 크기를 2배로, 세로 크기를 1.5배로 조절합니다.

 

div {
  transform: scale(2, 1.5);
}

 

이 CSS는 다음과 같은 결과를 생성합니다.

 

<div style="transform: scale(2, 1.5)">
  <p>이 요소는 가로 크기가 2배, 세로 크기가 1.5배로 조절되었습니다.</p>
</div>

 

scale() 함수는 다음과 같은 2개의 옵션을 사용할 수 있습니다.

• origin: 요소의 크기 조절 중심을 지정합니다.
• deg: 각도를 degrees 단위로 지정합니다. (기본값)
• rad: 각도를 radians 단위로 지정합니다.

예를 들어, 다음 CSS는 요소의 크기 조절 중심을 요소의 왼쪽 상단 모서리로 설정하고, 각도를 radians 단위로 지정합니다.

 

div {
  transform: scale(2, 1.5, 0, 0);
}

 

 

 

<div style="transform: scale(2, 1.5, 0, 0)"> <p>이 요소는 가로 크기가 2배, 세로 크기가 1.5배로 조절되었으며, 크기 조절 중심은 왼쪽 상단 모서리입니다.</p> </div>

 

scale() 함수는 CSS transform 속성에 사용됩니다.

 

 

div {
  transform: scale(2, 1.5);
}

 

이 CSS는 요소의 가로 크기를 2배로, 세로 크기를 1.5배로 조절합니다.

 

scale() 함수는 HTML/CSS에서 요소의 크기를 조절하는 데 사용할 수 있는 유용한 함수입니다.

 

이 함수를 사용하여 요소의 크기를 다양한 비율로 조절할 수 있습니다.

 

다음은 scale() 함수를 사용하여 다양한 효과를 만드는 예입니다.

 

 

 

이미지의 크기를 조절하여 팝업으로 표시합니다.

 

텍스트의 크기를 조절하여 강조합니다.

 

요소의 크기를 조절하여 3D 효과를 만듭니다.

 

 

 

scale() 함수는 창의적인 웹 디자인에 유용한 도구입니다.