목차
scale 예제 - 요소 크기 x/y축 일괄 변경 scale 정의 scale 구문 scale 예제 - 요소 크기 x/y축 각각 변경 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>
결과보기
최신댓글