From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- files/ko/web/css/calc()/index.html | 160 -------------------- files/ko/web/css/calc/index.html | 161 +++++++++++++++++++++ files/ko/web/css/filter-function/blur()/index.html | 40 ----- files/ko/web/css/filter-function/blur/index.html | 41 ++++++ .../css/filter-function/brightness()/index.html | 41 ------ .../web/css/filter-function/brightness/index.html | 42 ++++++ .../web/css/filter-function/contrast()/index.html | 41 ------ .../ko/web/css/filter-function/contrast/index.html | 42 ++++++ .../web/css/transform-function/matrix()/index.html | 89 ------------ .../web/css/transform-function/matrix/index.html | 90 ++++++++++++ .../web/css/transform-function/scalex()/index.html | 101 ------------- .../web/css/transform-function/scalex/index.html | 102 +++++++++++++ files/ko/web/css/url()/index.html | 81 ----------- files/ko/web/css/url/index.html | 81 +++++++++++ files/ko/web/css/var()/index.html | 98 ------------- files/ko/web/css/var/index.html | 99 +++++++++++++ 16 files changed, 658 insertions(+), 651 deletions(-) delete mode 100644 files/ko/web/css/calc()/index.html create mode 100644 files/ko/web/css/calc/index.html delete mode 100644 files/ko/web/css/filter-function/blur()/index.html create mode 100644 files/ko/web/css/filter-function/blur/index.html delete mode 100644 files/ko/web/css/filter-function/brightness()/index.html create mode 100644 files/ko/web/css/filter-function/brightness/index.html delete mode 100644 files/ko/web/css/filter-function/contrast()/index.html create mode 100644 files/ko/web/css/filter-function/contrast/index.html delete mode 100644 files/ko/web/css/transform-function/matrix()/index.html create mode 100644 files/ko/web/css/transform-function/matrix/index.html delete mode 100644 files/ko/web/css/transform-function/scalex()/index.html create mode 100644 files/ko/web/css/transform-function/scalex/index.html delete mode 100644 files/ko/web/css/url()/index.html create mode 100644 files/ko/web/css/url/index.html delete mode 100644 files/ko/web/css/var()/index.html create mode 100644 files/ko/web/css/var/index.html (limited to 'files/ko/web') diff --git a/files/ko/web/css/calc()/index.html b/files/ko/web/css/calc()/index.html deleted file mode 100644 index 91da816390..0000000000 --- a/files/ko/web/css/calc()/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: calc() -slug: Web/CSS/calc() -tags: - - CSS - - CSS Function - - Layout - - Reference - - Web -translation_of: Web/CSS/calc() ---- -
{{CSSRef}}
- -

calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, 또는 {{cssxref("<integer>")}}를 받는 속성의 값으로 사용할 수 있습니다.

- -

구문

- -
/* property: calc(expression) */
-width: calc(100% - 80px);
-
- -

calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.

- -
-
+
-
덧셈.
-
-
-
뺄셈.
-
*
-
곱셈. 하나 이상의 피연산자가 {{cssxref("<number>")}}여야 합니다.
-
/
-
나눗셈. 오른쪽 피연산자는 {{cssxref("<number>")}}여야 합니다.
-
- -

피연산자로는 {{cssxref("<length>")}} 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.

- -

참고

- - - -

형식 구문

- -{{csssyntax}} - -

예제

- -

요소를 화면에 여백과 함께 배치하기

- -

calc()를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.

- -
.banner {
-  position: absolute;
-  left: 40px;
-  width: calc(100% - 80px);
-  border: solid black 1px;
-  box-shadow: 1px 2px;
-  background-color: yellow;
-  padding: 6px;
-  text-align: center;
-  box-sizing: border-box;
-}
- -
<div class="banner">이건 현수막입니다!</div>
- -

{{EmbedLiveSample('요소를_화면에_여백과_함께_배치하기', 'auto', '60')}}

- -

입력 양식 요소를 컨테이너 크기에 자동으로 맞추기

- -

calc()의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.

- -

다음 CSS 코드를 살펴보세요.

- -
input {
-  padding: 2px;
-  display: block;
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
- -

위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.

- -
<form>
-  <div id="formBox">
-    <label>뭔가 입력해 보세요.</label>
-    <input type="text">
-  </div>
-</form>
-
- -

{{EmbedLiveSample('입력_양식_요소를_컨테이너_크기에_자동으로_맞추기', '100%', '80')}}

- -

CSS 변수와 중첩 calc()

- -

CSS 변수도 calc()와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.

- -
.foo {
-  --widthA: 100px;
-  --widthB: calc(var(--widthA) / 2);
-  --widthC: calc(var(--widthB) / 2);
-  width: var(--widthC);
-}
- -

모든 변수를 펼치면 widthC의 값은 calc( calc( 100px / 2) / 2)가 됩니다. 그 후 .foo의 너비 속성으로 지정될 때, 모든 중첩 calc()는 깊이에 관계 없이 단순한 괄호로 바뀌므로 width 속성의 값은 calc( ( 100px / 2) / 2), 즉 25px이 됩니다. 요약하자면 calc() 안의 calc()는 그냥 괄호와 같습니다.

- -

접근성 고려사항

- -

calc()를 사용해 글씨 크기를 조절할땐 아래 코드처럼 피연산자 중 하나로 꼭 상대길이 단위를 사용해주세요.

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

이제 페이지를 확대해도 글씨 크기의 비율이 적절히 유지됩니다.

- - - -

명세

- - - - - - - - - - - - - - - - -
명세상태비고
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}최초로 정의됨.
- -

브라우저 호환성

- - - -

{{Compat("css.types.calc")}}

- -

같이 보기

- - diff --git a/files/ko/web/css/calc/index.html b/files/ko/web/css/calc/index.html new file mode 100644 index 0000000000..1cb83e6f7a --- /dev/null +++ b/files/ko/web/css/calc/index.html @@ -0,0 +1,161 @@ +--- +title: calc() +slug: Web/CSS/calc +tags: + - CSS + - CSS Function + - Layout + - Reference + - Web +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, 또는 {{cssxref("<integer>")}}를 받는 속성의 값으로 사용할 수 있습니다.

+ +

구문

+ +
/* property: calc(expression) */
+width: calc(100% - 80px);
+
+ +

calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.

+ +
+
+
+
덧셈.
+
-
+
뺄셈.
+
*
+
곱셈. 하나 이상의 피연산자가 {{cssxref("<number>")}}여야 합니다.
+
/
+
나눗셈. 오른쪽 피연산자는 {{cssxref("<number>")}}여야 합니다.
+
+ +

피연산자로는 {{cssxref("<length>")}} 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.

+ +

참고

+ + + +

형식 구문

+ +{{csssyntax}} + +

예제

+ +

요소를 화면에 여백과 함께 배치하기

+ +

calc()를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}
+ +
<div class="banner">이건 현수막입니다!</div>
+ +

{{EmbedLiveSample('요소를_화면에_여백과_함께_배치하기', 'auto', '60')}}

+ +

입력 양식 요소를 컨테이너 크기에 자동으로 맞추기

+ +

calc()의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.

+ +

다음 CSS 코드를 살펴보세요.

+ +
input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+ +

위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.

+ +
<form>
+  <div id="formBox">
+    <label>뭔가 입력해 보세요.</label>
+    <input type="text">
+  </div>
+</form>
+
+ +

{{EmbedLiveSample('입력_양식_요소를_컨테이너_크기에_자동으로_맞추기', '100%', '80')}}

+ +

CSS 변수와 중첩 calc()

+ +

CSS 변수도 calc()와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.

+ +
.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
+ +

모든 변수를 펼치면 widthC의 값은 calc( calc( 100px / 2) / 2)가 됩니다. 그 후 .foo의 너비 속성으로 지정될 때, 모든 중첩 calc()는 깊이에 관계 없이 단순한 괄호로 바뀌므로 width 속성의 값은 calc( ( 100px / 2) / 2), 즉 25px이 됩니다. 요약하자면 calc() 안의 calc()는 그냥 괄호와 같습니다.

+ +

접근성 고려사항

+ +

calc()를 사용해 글씨 크기를 조절할땐 아래 코드처럼 피연산자 중 하나로 꼭 상대길이 단위를 사용해주세요.

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

이제 페이지를 확대해도 글씨 크기의 비율이 적절히 유지됩니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + +
명세상태비고
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}최초로 정의됨.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.calc")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/filter-function/blur()/index.html b/files/ko/web/css/filter-function/blur()/index.html deleted file mode 100644 index e995c42c68..0000000000 --- a/files/ko/web/css/filter-function/blur()/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -tags: - - CSS - - CSS Function - - Filter Effects - - Reference -translation_of: Web/CSS/filter-function/blur() ---- -
{{cssref}}
- -

blur() CSS 함수는 주어진 이미지에 가우시안 블러를 적용합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

- -
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
- - - -

구문

- -
blur(radius)
- -

매개변수

- -
-
radius
-
{{cssxref("<length>")}}로 지정한 블러 효과의 지름. 가우시안 함수의 표준 편차, 즉 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정합니다. 따라서 큰 값은 이미지를 더 흐리게 만듭니다. 0은 주어진 입력 결과를 그대로 반환합니다. 보간 시, 누락 값은 0입니다.
-
- -

예제

- -
blur(0)        /* 변화 없음 */
-blur(8px)      /* 8px 블러 */
-blur(1.17rem)  /* 1.17rem 블러 */
- -

같이 보기

- - diff --git a/files/ko/web/css/filter-function/blur/index.html b/files/ko/web/css/filter-function/blur/index.html new file mode 100644 index 0000000000..3059e5331a --- /dev/null +++ b/files/ko/web/css/filter-function/blur/index.html @@ -0,0 +1,41 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

blur() CSS 함수는 주어진 이미지에 가우시안 블러를 적용합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

구문

+ +
blur(radius)
+ +

매개변수

+ +
+
radius
+
{{cssxref("<length>")}}로 지정한 블러 효과의 지름. 가우시안 함수의 표준 편차, 즉 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정합니다. 따라서 큰 값은 이미지를 더 흐리게 만듭니다. 0은 주어진 입력 결과를 그대로 반환합니다. 보간 시, 누락 값은 0입니다.
+
+ +

예제

+ +
blur(0)        /* 변화 없음 */
+blur(8px)      /* 8px 블러 */
+blur(1.17rem)  /* 1.17rem 블러 */
+ +

같이 보기

+ + diff --git a/files/ko/web/css/filter-function/brightness()/index.html b/files/ko/web/css/filter-function/brightness()/index.html deleted file mode 100644 index 1fe4b03327..0000000000 --- a/files/ko/web/css/filter-function/brightness()/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: brightness() -slug: Web/CSS/filter-function/brightness() -tags: - - CSS - - CSS Function - - Filter Effects - - Reference -translation_of: Web/CSS/filter-function/brightness() ---- -
{{cssref}}
- -

brightness() CSS 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

- -
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
- - - -

구문

- -
brightness(amount)
- -

매개변수

- -
-
amount
-
{{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 밝기. 100% 미만의 값은 이미지를 어둡게 만들고, 100%를 초과하는 값은 밝게 합니다. 0%는 이미지를 완전한 검은색으로 바꾸고 100%는 주어진 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 1입니다.
-
- -

예제

- -
brightness(0%)   /* 완전한 검정 */
-brightness(0.4)  /* 40% 밝기 */
-brightness(1)    /* 변화 없음 */
-brightness(200%) /* 두 배 밝기 */
- -

같이 보기

- - diff --git a/files/ko/web/css/filter-function/brightness/index.html b/files/ko/web/css/filter-function/brightness/index.html new file mode 100644 index 0000000000..8bee4e3d91 --- /dev/null +++ b/files/ko/web/css/filter-function/brightness/index.html @@ -0,0 +1,42 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/brightness() +original_slug: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

brightness() CSS 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

+ +
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
+ + + +

구문

+ +
brightness(amount)
+ +

매개변수

+ +
+
amount
+
{{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 밝기. 100% 미만의 값은 이미지를 어둡게 만들고, 100%를 초과하는 값은 밝게 합니다. 0%는 이미지를 완전한 검은색으로 바꾸고 100%는 주어진 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 1입니다.
+
+ +

예제

+ +
brightness(0%)   /* 완전한 검정 */
+brightness(0.4)  /* 40% 밝기 */
+brightness(1)    /* 변화 없음 */
+brightness(200%) /* 두 배 밝기 */
+ +

같이 보기

+ + diff --git a/files/ko/web/css/filter-function/contrast()/index.html b/files/ko/web/css/filter-function/contrast()/index.html deleted file mode 100644 index 19828a4bbb..0000000000 --- a/files/ko/web/css/filter-function/contrast()/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: contrast() -slug: Web/CSS/filter-function/contrast() -tags: - - CSS - - CSS Function - - Filter Effects - - Reference -translation_of: Web/CSS/filter-function/contrast() ---- -
{{cssref}}
- -

contrast() CSS 함수는 주어진 이미지의 대비를 조절합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

- -
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
- - - -

구문

- -
contrast(amount)
- -

매개변수

- -
-
amount
-
{{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 대비. 100% 미만의 값은 이미지의 대비를 낮추고, 100%를 초과하는 값은 높입니다. 0%는 이미지를 완전히 회색으로 바꾸고 100%는 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 1입니다.
-
- -

예제

- -
contrast(0)     /* 완전히 회색 */
-contrast(65%)   /* 대비 65% */
-contrast(1)     /* 변화 없음 */
-contrast(200%)  /* 대비 두 배 */
- -

같이 보기

- - diff --git a/files/ko/web/css/filter-function/contrast/index.html b/files/ko/web/css/filter-function/contrast/index.html new file mode 100644 index 0000000000..4680ba884e --- /dev/null +++ b/files/ko/web/css/filter-function/contrast/index.html @@ -0,0 +1,42 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/contrast() +original_slug: Web/CSS/filter-function/contrast() +--- +
{{cssref}}
+ +

contrast() CSS 함수는 주어진 이미지의 대비를 조절합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

+ +
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
+ + + +

구문

+ +
contrast(amount)
+ +

매개변수

+ +
+
amount
+
{{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 대비. 100% 미만의 값은 이미지의 대비를 낮추고, 100%를 초과하는 값은 높입니다. 0%는 이미지를 완전히 회색으로 바꾸고 100%는 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 1입니다.
+
+ +

예제

+ +
contrast(0)     /* 완전히 회색 */
+contrast(65%)   /* 대비 65% */
+contrast(1)     /* 변화 없음 */
+contrast(200%)  /* 대비 두 배 */
+ +

같이 보기

+ + diff --git a/files/ko/web/css/transform-function/matrix()/index.html b/files/ko/web/css/transform-function/matrix()/index.html deleted file mode 100644 index cf9940c92a..0000000000 --- a/files/ko/web/css/transform-function/matrix()/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -translation_of: Web/CSS/transform-function/matrix() ---- -
{{CSSRef}}
- -

matrix() CSS 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 {{cssxref("<transform-function>")}} 데이터 타입입니다.

- -
-

주의: matrix(a, b, c, d, tx, ty) 는 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 를 짧게 쓴 것입니다.

-
- -

Syntax

- -

matrix() 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.

- -
주의: 파이어폭스 16까지, Gecko(엔진) tx, ty 에{{cssxref("<length>")}} 값을 허용했습니다.
- -
matrix(a, b, c, d, tx, ty)
-
- -

Values

- -
-
a b c d
-
{{cssxref("<number>")}}는 선형 변환(linear transformation)을 설명합니다.
-
tx ty
-
{{cssxref("<number>")}}는 적용 할 이동(translation)을 설명합니다.
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]
- -

Examples

- -

HTML

- -
<div>Normal</div>
-<div class="changed">Changed</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.changed {
-  transform: matrix(1, 2, -1, 1, 80, 80);
-  background-color: pink;
-}
- -

Result

- -

{{EmbedLiveSample("Examples", 350, 350)}}

- -

Browser compatibility

- -

호환성 정보는 <transform-function> 데이터 타입을 확인하세요.

- -

See also

- - diff --git a/files/ko/web/css/transform-function/matrix/index.html b/files/ko/web/css/transform-function/matrix/index.html new file mode 100644 index 0000000000..20bcd6ef75 --- /dev/null +++ b/files/ko/web/css/transform-function/matrix/index.html @@ -0,0 +1,90 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +--- +
{{CSSRef}}
+ +

matrix() CSS 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 {{cssxref("<transform-function>")}} 데이터 타입입니다.

+ +
+

주의: matrix(a, b, c, d, tx, ty) 는 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 를 짧게 쓴 것입니다.

+
+ +

Syntax

+ +

matrix() 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.

+ +
주의: 파이어폭스 16까지, Gecko(엔진) tx, ty 에{{cssxref("<length>")}} 값을 허용했습니다.
+ +
matrix(a, b, c, d, tx, ty)
+
+ +

Values

+ +
+
a b c d
+
{{cssxref("<number>")}}는 선형 변환(linear transformation)을 설명합니다.
+
tx ty
+
{{cssxref("<number>")}}는 적용 할 이동(translation)을 설명합니다.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]
+ +

Examples

+ +

HTML

+ +
<div>Normal</div>
+<div class="changed">Changed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}
+ +

Result

+ +

{{EmbedLiveSample("Examples", 350, 350)}}

+ +

Browser compatibility

+ +

호환성 정보는 <transform-function> 데이터 타입을 확인하세요.

+ +

See also

+ + diff --git a/files/ko/web/css/transform-function/scalex()/index.html b/files/ko/web/css/transform-function/scalex()/index.html deleted file mode 100644 index 7ef38655fe..0000000000 --- a/files/ko/web/css/transform-function/scalex()/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: scaleX() -slug: Web/CSS/transform-function/scaleX() -translation_of: Web/CSS/transform-function/scaleX() ---- -
{{CSSRef}}
- -

CSS 함수인 scaleX() x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는  {{cssxref("<transform-function>")}}  데이터 타입 입니다.

- -

- -

스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.scaleX(-1) 은 원점을 지나는 수직축이 있는 대칭축을 의미합니다  ( {{cssxref("transform-origin")}} 속성의해 지정되어집니다).

- -
-

Note: scaleX(sx) 는 scale(sx, 1) 또는  scale3d(sx, 1, 1) 와 같습니다.

-
- -

Syntax

- -
scaleX(s)
-
- -

Values

- -
-
s
-
요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 {{cssxref("<number>")}} 입니다.
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]
- -

Examples

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Scaled</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scaleX(0.6);
-  background-color: pink;
-}
-
- -

Result

- -

{{EmbedLiveSample("Examples","200","200")}}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
- -

See also

- - diff --git a/files/ko/web/css/transform-function/scalex/index.html b/files/ko/web/css/transform-function/scalex/index.html new file mode 100644 index 0000000000..19343ddcda --- /dev/null +++ b/files/ko/web/css/transform-function/scalex/index.html @@ -0,0 +1,102 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX +translation_of: Web/CSS/transform-function/scaleX() +original_slug: Web/CSS/transform-function/scaleX() +--- +
{{CSSRef}}
+ +

CSS 함수인 scaleX() x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는  {{cssxref("<transform-function>")}}  데이터 타입 입니다.

+ +

+ +

스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.scaleX(-1) 은 원점을 지나는 수직축이 있는 대칭축을 의미합니다  ( {{cssxref("transform-origin")}} 속성의해 지정되어집니다).

+ +
+

Note: scaleX(sx) 는 scale(sx, 1) 또는  scale3d(sx, 1, 1) 와 같습니다.

+
+ +

Syntax

+ +
scaleX(s)
+
+ +

Values

+ +
+
s
+
요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 {{cssxref("<number>")}} 입니다.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]
+ +

Examples

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scaleX(0.6);
+  background-color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Examples","200","200")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+ +

See also

+ + diff --git a/files/ko/web/css/url()/index.html b/files/ko/web/css/url()/index.html deleted file mode 100644 index 204eb3329d..0000000000 --- a/files/ko/web/css/url()/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: -slug: Web/CSS/url() -tags: - - CSS - - CSS Data Type - - Layout - - Reference -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url -original_slug: Web/CSS/url ---- -
{{ CssRef() }}
- -

<url> CSS 자료형은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ cssxref("list-style") }} 등 다양한 속성에서 사용할 수 있습니다.

- -
-

URI와 URL URI와 URL은 다릅니다. URI는 단순히 리소스의 식별자입니다. URL은 URI의 종류 중 하나로, 리소스의 위치를 표현합니다. URI는 URL일 수도 있고, 리소스의 이름(URN)일 수도 있습니다.

- -

CSS Level 1의 url() 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었습니다. 이로써 url()을 사용해 <uri> CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었습니다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 url()은 <url>만을 나타낼 수 있습니다.

-
- -

구문

- -

<url> 자료형은 url() 함수형 표기법을 사용해 설정합니다. 따옴표는 선택사항으로 작은따옴표, 큰따옴표 둘 다 사용할 수 있습니다. 상대 URL도 사용할 수 있으며, 웹페이지의 URL이 아닌 스타일시트의 URL을 기준으로 사용합니다.

- -
<a_css_property>: url("http://mysite.example.com/mycursor.png")
-<a_css_property>: url('http://mysite.example.com/mycursor.png')
-<a_css_property>: url(http://mysite.example.com/mycursor.png)
-
- -
-

참고: Firefox 15부터, 0x7e을 초과하는 제어 문자는 URL을 따옴표로 둘러싸야 유요합니다. 자세한 내용은 {{Bug(752230)}}을 참고하세요.

-
- -

예제

- -
.topbanner {
-  background: url("topbanner.png") #00D no-repeat fixed;
-}
-
- -
ul {
-  list-style: square url(http://www.example.com/redball.png);
-}
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}No significant change from CSS Level 2 (Revision 1).
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}No significant change from CSS Level 1.
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Initial definition.
- -

브라우저 호환성

- - - -

{{Compat("css.types.url")}}

diff --git a/files/ko/web/css/url/index.html b/files/ko/web/css/url/index.html new file mode 100644 index 0000000000..f33bd31291 --- /dev/null +++ b/files/ko/web/css/url/index.html @@ -0,0 +1,81 @@ +--- +title: +slug: Web/CSS/url +tags: + - CSS + - CSS Data Type + - Layout + - Reference +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +original_slug: Web/CSS/url() +--- +
{{ CssRef() }}
+ +

<url> CSS 자료형은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ cssxref("list-style") }} 등 다양한 속성에서 사용할 수 있습니다.

+ +
+

URI와 URL URI와 URL은 다릅니다. URI는 단순히 리소스의 식별자입니다. URL은 URI의 종류 중 하나로, 리소스의 위치를 표현합니다. URI는 URL일 수도 있고, 리소스의 이름(URN)일 수도 있습니다.

+ +

CSS Level 1의 url() 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었습니다. 이로써 url()을 사용해 <uri> CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었습니다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 url()은 <url>만을 나타낼 수 있습니다.

+
+ +

구문

+ +

<url> 자료형은 url() 함수형 표기법을 사용해 설정합니다. 따옴표는 선택사항으로 작은따옴표, 큰따옴표 둘 다 사용할 수 있습니다. 상대 URL도 사용할 수 있으며, 웹페이지의 URL이 아닌 스타일시트의 URL을 기준으로 사용합니다.

+ +
<a_css_property>: url("http://mysite.example.com/mycursor.png")
+<a_css_property>: url('http://mysite.example.com/mycursor.png')
+<a_css_property>: url(http://mysite.example.com/mycursor.png)
+
+ +
+

참고: Firefox 15부터, 0x7e을 초과하는 제어 문자는 URL을 따옴표로 둘러싸야 유요합니다. 자세한 내용은 {{Bug(752230)}}을 참고하세요.

+
+ +

예제

+ +
.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+
+ +
ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}No significant change from CSS Level 2 (Revision 1).
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}No significant change from CSS Level 1.
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.url")}}

diff --git a/files/ko/web/css/var()/index.html b/files/ko/web/css/var()/index.html deleted file mode 100644 index a4f904b4e2..0000000000 --- a/files/ko/web/css/var()/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -tags: - - CSS - - CSS Custom Properties - - CSS Function - - CSS Variable - - CSS 변수 - - Experimental - - Reference -translation_of: Web/CSS/var() ---- -
{{CSSRef}}
- -

CSS var() 함수는 사용자 지정 속성, 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용합니다.

- -
var(--header-color, blue);
- -

var() 함수는 값이 아닌 속성 이름, 선택자 등 다른 곳에 사용할 수 없습니다. 시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계없는 값이 됩니다.

- -

구문

- -

첫 번째 인수는 값을 가져올 사용자 지정 속성의 이름입니다. 선택적으로 제공할 수 있는 두 번째 인수는 대체값으로, 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용합니다.

- -{{csssyntax}} - -
-

참고: 대체값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용합니다. 그러므로 var(--foo, red, blue)의 대체값은 쉼표까지 포함한 red, blue입니다. 말하자면 첫 번째 쉼표의 뒤쪽은 모두 대체값이 되는 것입니다.

-
- -

값

- -
-
<custom-property-name>
-
두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자.
-
<declaration-value>
-
현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체값. 새 줄, 짝 없이 닫는 괄호(), ], }) 세미콜론, 느낌표 등 특별한 의미를 가진 문자를 제외한 모든 문자를 사용할 수 있습니다.
-
- -

예제

- -
:root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-
- -
/* Fallback */
-/* In the component’s style: */
-.component .header {
-  color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */
-}
-
-.component .text {
-  color: var(--text-color, black);
-}
-
-/* In the larger application’s style: */
-.component {
-  --text-color: #080;
-}
-
- -

명세

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Initial definition
- -

브라우저 호환성

- - - -

{{Compat("css.properties.custom-property.var")}}

- -

같이 보기

- -
    -
  • {{cssxref("env","env(…)")}} – 사용자 에이전트가 통제하는 읽기 전용 환경 변수.
    • -
  • CSS 변수 사용하기
    • -
diff --git a/files/ko/web/css/var/index.html b/files/ko/web/css/var/index.html new file mode 100644 index 0000000000..42c7c04984 --- /dev/null +++ b/files/ko/web/css/var/index.html @@ -0,0 +1,99 @@ +--- +title: var() +slug: Web/CSS/var +tags: + - CSS + - CSS Custom Properties + - CSS Function + - CSS Variable + - CSS 변수 + - Experimental + - Reference +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +--- +
{{CSSRef}}
+ +

CSS var() 함수는 사용자 지정 속성, 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용합니다.

+ +
var(--header-color, blue);
+ +

var() 함수는 값이 아닌 속성 이름, 선택자 등 다른 곳에 사용할 수 없습니다. 시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계없는 값이 됩니다.

+ +

구문

+ +

첫 번째 인수는 값을 가져올 사용자 지정 속성의 이름입니다. 선택적으로 제공할 수 있는 두 번째 인수는 대체값으로, 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용합니다.

+ +{{csssyntax}} + +
+

참고: 대체값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용합니다. 그러므로 var(--foo, red, blue)의 대체값은 쉼표까지 포함한 red, blue입니다. 말하자면 첫 번째 쉼표의 뒤쪽은 모두 대체값이 되는 것입니다.

+
+ +

값

+ +
+
<custom-property-name>
+
두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자.
+
<declaration-value>
+
현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체값. 새 줄, 짝 없이 닫는 괄호(), ], }) 세미콜론, 느낌표 등 특별한 의미를 가진 문자를 제외한 모든 문자를 사용할 수 있습니다.
+
+ +

예제

+ +
:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
+ +
/* Fallback */
+/* In the component’s style: */
+.component .header {
+  color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* In the larger application’s style: */
+.component {
+  --text-color: #080;
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.custom-property.var")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("env","env(…)")}} – 사용자 에이전트가 통제하는 읽기 전용 환경 변수.
    • +
  • CSS 변수 사용하기
    • +
-- cgit v1.2.3-54-g00ecf