From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/css_transforms/index.html | 66 ++++++++++++++++++ .../css_transforms/using_css_transforms/index.html | 80 ++++++++++++++++++++++ 2 files changed, 146 insertions(+) create mode 100644 files/ko/web/css/css_transforms/index.html create mode 100644 files/ko/web/css/css_transforms/using_css_transforms/index.html (limited to 'files/ko/web/css/css_transforms') diff --git a/files/ko/web/css/css_transforms/index.html b/files/ko/web/css/css_transforms/index.html new file mode 100644 index 0000000000..f4cffad3b6 --- /dev/null +++ b/files/ko/web/css/css_transforms/index.html @@ -0,0 +1,66 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +tags: + - CSS + - CSS Transforms + - Overview + - Reference +translation_of: Web/CSS/CSS_Transforms +--- +
{{CSSRef}}
+ +

CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

+ +

Reference

+ +

Properties

+ +
+ +
+ +

Data types

+ +
+ +
+ +

Guides

+ +
+
Using CSS transforms
+
Step-by-step tutorial about how to transform elements styled with CSS.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.
diff --git a/files/ko/web/css/css_transforms/using_css_transforms/index.html b/files/ko/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..1c29e3b1e3 --- /dev/null +++ b/files/ko/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,80 @@ +--- +title: CSS 변형 사용하기 +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +tags: + - 3D + - Advanced + - CSS + - CSS Transforms + - Graphics + - Guide +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

CSS 변형(transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 본 가이드는 변형 사용법의 기초를 제시합니다.

+ +

CSS 변형은 HTML 요소에 선형 아핀 변형(affine linear transformation)을 적용하는 여러 개의 CSS 속성을 조합해 구현합니다. 변형은 평면과 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함합니다.

+ +
+

박스 모델에 따라 배치된 요소만 transform을 적용할 수 있습니다. 한 가지 예를 들자면, display: block속성을 가진 요소는 박스 모델을 따릅니다. 

+
+ +

CSS 변형 속성

+ +

CSS 변형을 정의할 때 중요한 두 가지 속성은 {{cssxref("transform")}}과 {{cssxref("transform-origin")}}입니다.

+ +
+
{{cssxref("transform-origin")}}
+
원점의 위치를 지정합니다. 기본값은 요소의 중심이며 변경할 수 있습니다. 회전, 확대, 비틀기 등 하나의 점을 기준으로 하는 변형에서 사용합니다.
+
{{cssxref("transform")}}
+
요소에 적용할 변형을 지정합니다. 여러 개의 변형 목록을 공백으로 구분하여 대입하면 순차적으로 합성한 결과물을 적용합니다. 합성은 오른쪽부터 왼쪽으로 진행합니다.
+
+ +

예제

+ +

다음 이미지는 변형하지 않은 MDN 로고입니다.

+ +

MDN Logo

+ +

회전

+ +

MDN 로고를 90도 회전합니다.

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+ +

{{EmbedLiveSample('회전', 'auto', 240) }}

+ +

비틀고 옮기기

+ +

MDN 로고를 10도 비틀고 X축으로 150픽셀 옮깁니다.

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+ +

{{EmbedLiveSample('비틀고_옮기기') }}

+ +

3D 전용 CSS 속성

+ +

3D 공간에서의 CSS 변환은 좀 더 복잡합니다. 우선 원근감을 부여해 3D 공간을 설정한 후에, 2D 요소가 그 안에서 어떻게 행동할지 설정해야 합니다..

+ +

원근

+ +

처음으로 정할 항목은 {{cssxref("perspective")}}입니다. 우리가 입체라고 느낄 수 있는 건 원근감 덕분입니다. 요소가 관찰자에서 멀어질 수록 더 작게 보입니다.

+ +

{{page("/ko/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

+ +

다음으로는 {{cssxref("perspective-origin")}} 속성으로 관찰자의 위치를 정해야 합니다. 기본값은 중앙으로, 언제나 충분한 위치는 아닙니다.

+ +

{{page("/ko/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

+ +

모든 과정을 마쳤다면 3D 공간의 요소를 작업할 수 있습니다.

+ +

더 보기

+ + -- cgit v1.2.3-54-g00ecf