[CSS3] 엘리먼트의 크기 조절 (transform: scale)
-
관리자 /
2011.12.07 01:56 /
hit 3,186 추천
0
CSS3의 효과를 사용하여 엘리먼트의 크기를 조절할 수 있습니다.
5개의 대표 브라우저 모두가 이 속성을 지원합니다. 아직 제정되지 않은 기술이므로 속성 앞에 브라우저의 특성을 입력해야 합니다. 브라우저의 특성을 입력하는 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
transform 속성을 사용하면 엘리먼트를 거의 자유롭게 번형시킬 수 있습니다. transform 속성은 rotate(), scale(), skew(),translate() 총 4개의 방법이 있으며 이 4개의 방법을 한 번에 쓸 수도 있습니다. 예를 들어 transform 속성에서 rotate()와translate()를 같이 쓰고 싶을 때 'rotate() translate()'로 입력하면 두 가지의 효과가 모두 적용됩니다. 여기에서는 transform 속성에서 scale()에 관한 방법을 설명할 것입니다. transform 속성에 관하여 간단하게 테스트하고 싶다면 여기를 클릭하세요. (WebKit 기반의 웹 브라우저에서만 사용 가능)
transform 속성의 방법 중 하나인 scale()은 엘리먼트의 크기를 조절할 때 사용할 수 있습니다. scale()에서 괄호 안의 내용은 크기를 입력하면 됩니다. 실제 크기는 1이며 1보다 작으면 크기는 배로 작아지고 1보다 커지면 크기는 배로 커집니다.
이처럼 입력하면 위의 이미지처럼 크기가 조절됩니다.
5개의 대표 브라우저 모두가 이 속성을 지원합니다. 아직 제정되지 않은 기술이므로 속성 앞에 브라우저의 특성을 입력해야 합니다. 브라우저의 특성을 입력하는 방법을 모르신다면 CSS3 가이드북 페이지에서 브라우저의 특성 링크를 클릭하세요.
transform 속성을 사용하면 엘리먼트를 거의 자유롭게 번형시킬 수 있습니다. transform 속성은 rotate(), scale(), skew(),translate() 총 4개의 방법이 있으며 이 4개의 방법을 한 번에 쓸 수도 있습니다. 예를 들어 transform 속성에서 rotate()와translate()를 같이 쓰고 싶을 때 'rotate() translate()'로 입력하면 두 가지의 효과가 모두 적용됩니다. 여기에서는 transform 속성에서 scale()에 관한 방법을 설명할 것입니다. transform 속성에 관하여 간단하게 테스트하고 싶다면 여기를 클릭하세요. (WebKit 기반의 웹 브라우저에서만 사용 가능)
transform 속성의 방법 중 하나인 scale()은 엘리먼트의 크기를 조절할 때 사용할 수 있습니다. scale()에서 괄호 안의 내용은 크기를 입력하면 됩니다. 실제 크기는 1이며 1보다 작으면 크기는 배로 작아지고 1보다 커지면 크기는 배로 커집니다.
.example-img {
border-radius: 5px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-o-transform: scale(0.75);
-ms-transform: scale(0.75);
}-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-o-transform: scale(0.75);
-ms-transform: scale(0.75);
이처럼 입력하면 위의 이미지처럼 크기가 조절됩니다.