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/@viewport/height/index.html | 75 +++++++++++++ files/ko/web/css/@viewport/index.html | 120 +++++++++++++++++++++ files/ko/web/css/@viewport/viewport-fit/index.html | 72 +++++++++++++ files/ko/web/css/@viewport/zoom/index.html | 70 ++++++++++++ 4 files changed, 337 insertions(+) create mode 100644 files/ko/web/css/@viewport/height/index.html create mode 100644 files/ko/web/css/@viewport/index.html create mode 100644 files/ko/web/css/@viewport/viewport-fit/index.html create mode 100644 files/ko/web/css/@viewport/zoom/index.html (limited to 'files/ko/web/css/@viewport') diff --git a/files/ko/web/css/@viewport/height/index.html b/files/ko/web/css/@viewport/height/index.html new file mode 100644 index 0000000000..4a97de7c7f --- /dev/null +++ b/files/ko/web/css/@viewport/height/index.html @@ -0,0 +1,75 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

height CSS 서술자(descriptor)는 뷰포트의 {{cssxref("@viewport/min-height", "min-height")}} 및 {{cssxref("@viewport/max-height", "max-height")}} 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.

+ +

뷰포트 값이 두 개 주어진 경우, 첫 번째 값은 최소 높이로 두 번째 값은 최대 높이로 설정합니다.

+ +

{{cssinfo}}

+ +

구문

+ +
/* 한 값 */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* 두 값 */
+height: 320px 200px;
+
+ +

값

+ +
+
auto
+
다른 CSS 설명자의 값에서 계산된 사용값(used value).
+
<length>
+
음이 아닌 절대 또는 상대 길이.
+
<percentage>
+
가로 및 세로 길이 각각을 위한 줌 배율(factor) 1.0에서 초기 뷰포트의 너비 또는 높이에 대한 퍼센트 값. 음이 아니어야 합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +
@viewport {
+  height: 500px;
+}
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}초기 정의
+ +

브라우저 호환성

+ + + +

{{Compat("css.at-rules.viewport.height")}}

diff --git a/files/ko/web/css/@viewport/index.html b/files/ko/web/css/@viewport/index.html new file mode 100644 index 0000000000..e77278c61e --- /dev/null +++ b/files/ko/web/css/@viewport/index.html @@ -0,0 +1,120 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - Adaptation + - At-rule + - CSS + - Device + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@viewport +--- +
{{SeeCompatTable}}{{CSSRef}}
+ +

The @viewport CSS at-rule lets you configure the {{glossary("viewport")}} through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).

+ +

Lengths specified as percentages are calculated relative to the initial viewport, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport. This is typically based on the size of the window on desktop browsers that aren't in full screen mode.

+ +

On mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available for application use. This may be either the full screen or the full screen area minus areas controlled by the operating system (such as a taskbar) or the application-available screen area (either the full screen or the screen minus any areas owned by the operating system or other applications).

+ +
@viewport {
+  width: device-width;
+}
+ +

Syntax

+ +

The at-rule contains a set of nested {{glossary("descriptor (CSS)", "descriptor")}}s in a CSS block that is delimited by curly braces.

+ +

A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.

+ +

Descriptors

+ +

Browser support for @viewport is weak at this time, with support being largely available in Internet Explorer and Edge. Even in those browsers, only a small number of descriptors are available. Browsers will ignore @viewport if they don't support it, and will ignore any descriptors that they don't recognize.

+ +
+
min-width
+
Used in the determination of the width of the viewport when the document is first displayed.
+
max-width
+
Used in the determination of the width of the viewport when the document is first displayed.
+
width
+
A shorthand descriptor for setting both min-width and max-width.
+
min-height
+
Used in the determination of the height of the viewport when the document is first displayed.
+
max-height
+
Used in the determination of the height of the viewport when the document is first displayed.
+
height
+
A shorthand descriptor for setting both min-height and max-height.
+
zoom
+
Sets the initial zoom factor.
+
min-zoom
+
Sets the minimum zoom factor.
+
max-zoom
+
Sets the maximum zoom factor.
+
user-zoom
+
Controls whether or not the user should be able to change the zoom factor.
+
orientation
+
Controls the document's orientation.
+
{{cssxref("@viewport/viewport-fit", "viewport-fit")}}
+
Controls the display of the document on non-rectangular displays.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}{{Spec2("CSS Round Display")}}Defined the {{cssxref("@viewport/viewport-fit", "viewport-fit")}} descriptor.
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.viewport")}}

+ +

See also

+ + diff --git a/files/ko/web/css/@viewport/viewport-fit/index.html b/files/ko/web/css/@viewport/viewport-fit/index.html new file mode 100644 index 0000000000..e29d893382 --- /dev/null +++ b/files/ko/web/css/@viewport/viewport-fit/index.html @@ -0,0 +1,72 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

viewport-fit CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "설명자")}}는 문서의 뷰포트가 화면을 채우는 방법을 제어합니다.

+ +

Syntax

+ +
/* Keyword values */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+
+ +

Values

+ +
+
auto
+
이 값은 초기 레이아웃 뷰포트에 영향을 미치지 않으며 전체 웹 페이지가 보여집니다.
+
contain
+
뷰포트 크기가 디스플레이 내에 새겨진 가장 큰 직사각형에 들어맞게 조정됩니다.
+
+ +
+
cover
+
뷰포트 크기가 기기 디스플레이를 모두 채우도록 조정됩니다. 이때 중요한 내용이 디스플레이 바깥 영역으로 밀려나지 않도록 safe area inset 변수를 함께 사용할 것을 권장합니다.
+
+ +

Formal syntax

+ +
auto | contain | cover
+
+ + + +

접근성 문제

+ +

viewport-fit 설명자를 사용할 때에는 모든 기기의 디스플레이가 직사각형인 것은 아니므로 safe area inset 변수를 함께 사용해야 함을 기억하세요.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.at-rules.viewport.viewport-fit")}}

+ +

See also

+ + diff --git a/files/ko/web/css/@viewport/zoom/index.html b/files/ko/web/css/@viewport/zoom/index.html new file mode 100644 index 0000000000..137b2eb6a9 --- /dev/null +++ b/files/ko/web/css/@viewport/zoom/index.html @@ -0,0 +1,70 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - CSS + - CSS Descriptor + - Graphics + - Layout + - NeedsExample + - Reference +translation_of: Web/CSS/@viewport +--- +
{{ CSSRef }}
+ +

zoom CSS 설명자(descriptor)는 {{cssxref("@viewport")}}에 의해 정의된 문서의 초기 줌 배율(factor)을 설정합니다.

+ +

1.0 또는 100%인 줌 배율은 줌이 없음에 해당합니다. 큰 값은 확대. 작은 값은 축소.

+ +

{{cssinfo}}

+ +

구문

+ +
/* 키워드 값 */
+zoom: auto;
+
+/* <number> 값 */
+zoom: 0.8;
+zoom: 2.0;
+
+/* <percentage> 값 */
+zoom: 150%;
+
+ +

값

+ +
+
auto
+
사용자 에이전트가 문서의 초기 줌 배율을 설정합니다. 사용자 에이전트는 문서가 그 배율을 찾기 위해 렌더링되는 캔버스 영역의 크기를 사용할 수 있습니다.
+
<number>
+
줌 배율로 사용되는 음이 아닌 수. 배율 1.0은 줌이 수행되지 않음을 뜻합니다. 1.0보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.
+
<percentage>
+
줌 배율로 사용되는 음이 아닌 퍼센트 값. 배율 100%는 줌이 수행되지 않음을 뜻합니다. 100%보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}초기 스펙
+ +

브라우저 호환성

+ +

{{Compat("css.at-rules.viewport.zoom")}}

-- cgit v1.2.3-54-g00ecf