[resize] CSS - scale 속성 - 요소 크기 변경 (= scale속성 = 스케일속성) ※ 요소 사이즈 ※ 요소 뒤집기

1. scale 예제 - 요소 크기 x/y축 일괄 변경
2. scale 정의
3. scale 구문
4. scale 예제 - 요소 크기 x/y축 각각 변경
5. scale 예제 - 속성값이 음수인 경우

scale 예제 - 요소 크기 x/y축 일괄 변경

 

<style>

div {

  height: 50px;

  width: 50px;

  background-color: red;

  margin-bottom:30px;

}

.hz1 {scale: 0.5;}

.hz2 {scale: 1;}

.hz3 {scale: 2;}

</style>

<div class="hz1"></div>

<div class="hz2"></div>

<div class="hz3"></div>

 

결과보기

scale 정의

 

요소 크기 변경.

 

---

 

1.

• (x, y, z)축 기준으로 사이즈 조정.
• 속성값은 1~3개 가능하며, 공백으로 구분.
• 속성값이 1개인 경우, x, y축 일괄 지정.
• 속성값이 2개인 경우, x, y축 각각 지정.
• 속성값이 3개인 경우, x, y, z축 각각 지정.
• transform: scale() 이용해서도 크기 조정 가능.

 

2.

• 기본값: none
• 상속여부: X
• 애니가능: O
• CSS버전: CSS3
• JS구문: object.style.scale="2 0.5";

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. MDN scale 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/scale

 

scale 구문

 

selector {scale: x-axis y-axis z-axis|initial|inherit;}

 

---

[속성값]

 

x-axis

X축 크기 (가능값: number, %) 

• 음수 가능. (요소를 x축 오른쪽으로 엎음.)

 

y-axis

Y축 크기 (가능값: number, %)

• 음수 가능. (요소를 y축 아래쪽으로 엎음.)

 

z-axis

Z축 크기 (가능값: number, %)

• 음수 가능.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

---

PS 속성값 개수별 의미

 

• 속성값이 1개인 경우: x,y축 일괄 지정. (예) scale: 1
• 속성값이 2개인 경우: x,y축 개별 지정. (예) scale: 1 2
• 속성값이 3개인 경우: x,y,z축 개별 지정. (예) scale: 1 2 3

scale 예제 - 요소 크기 x/y축 각각 변경

(예) (가로크기 2배 / 세로길이 1/2배)로 각각 변경

 

<style>

#box {

  width: 200px;

  height: 200px;

  padding: 10px;

  margin: auto;

  border: 1px solid black;

}

#hz1 {  

  width: 100px;

  height: 100px;

  border: 1px dashed grey;

  background-color: gray;

  opacity: 0.5;

  position: absolute;

  left:50%;

  transform:translate(-50%, 0);

}

#hz2 {

  height: 100px;

  width: 100px;

  border: 1px solid hotpink;

  background-color: hotpink;

  scale: 2 50%;

  margin:auto;

}

</style>

<div id="box">

  <div id="hz1">hz1</div>

  <div id="hz2">hz2</div>

</div>

 

결과보기

scale 예제 - 속성값이 음수인 경우

 

<style>

div {

  height: 200px;

  width: 200px;

  background-color: yellow;

  scale: -1 -1;

  color:black;

  position:absolute;

  left:50%;

  top:50%;

  transform:translate(-50%, -50%);

}

</style>

<div>홈짱닷컴 Homzzang.com</div>

 

결과보기