diff options
Diffstat (limited to 'files/ko/conflicting/web/css')
4 files changed, 0 insertions, 277 deletions
diff --git a/files/ko/conflicting/web/css/@viewport/index.html b/files/ko/conflicting/web/css/@viewport/index.html deleted file mode 100644 index 38e7063278..0000000000 --- a/files/ko/conflicting/web/css/@viewport/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: height -slug: conflicting/Web/CSS/@viewport -tags: - - '@viewport' - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height -original_slug: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<p><code><strong>height</strong></code> CSS 서술자(descriptor)는 뷰포트의 {{cssxref("@viewport/min-height", "min-height")}} 및 {{cssxref("@viewport/max-height", "max-height")}} 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.</p> - -<p>뷰포트 값이 두 개 주어진 경우, 첫 번째 값은 최소 높이로 두 번째 값은 최대 높이로 설정합니다.</p> - -<p>{{cssinfo}}</p> - -<h2 id="구문">구문</h2> - -<pre class="brush: css">/* 한 값 */ -height: auto; -height: 320px; -height: 15em; - -/* 두 값 */ -height: 320px 200px; -</pre> - -<h3 id="값">값</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>다른 CSS 설명자의 값에서 계산된 사용값(used value).</dd> - <dt><code><length></code></dt> - <dd>음이 아닌 절대 또는 상대 길이.</dd> - <dt><code><percentage></code></dt> - <dd>가로 및 세로 길이 각각을 위한 줌 배율(factor) 1.0에서 초기 뷰포트의 너비 또는 높이에 대한 퍼센트 값. 음이 아니어야 합니다.</dd> -</dl> - -<h3 id="형식_구문">형식 구문</h3> - -{{csssyntax}} - -<h2 id="예제">예제</h2> - -<pre class="brush: css">@viewport { - height: 500px; -}</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>초기 정의</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("css.at-rules.viewport.height")}}</p> diff --git a/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html deleted file mode 100644 index eda9ab681d..0000000000 --- a/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: viewport-fit -slug: conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit -original_slug: Web/CSS/@viewport/viewport-fit ---- -<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> - -<p><strong><code>viewport-fit</code></strong> CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "설명자")}}는 문서의 뷰포트가 화면을 채우는 방법을 제어합니다.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css; no-line-numbers">/* Keyword values */ -viewport-fit: auto; -viewport-fit: contain; -viewport-fit: cover; -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>이 값은 초기 레이아웃 뷰포트에 영향을 미치지 않으며 전체 웹 페이지가 보여집니다.</dd> - <dt><code>contain</code></dt> - <dd>뷰포트 크기가 디스플레이 내에 새겨진 가장 큰 직사각형에 들어맞게 조정됩니다.</dd> -</dl> - -<dl> - <dt><code>cover</code></dt> - <dd>뷰포트 크기가 기기 디스플레이를 모두 채우도록 조정됩니다. 이때 중요한 내용이 디스플레이 바깥 영역으로 밀려나지 않도록 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용할 것을 권장합니다.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -<pre class="syntaxbox">auto | contain | cover -</pre> - -<h2 id="접근성_문제">접근성 문제</h2> - -<p><code>viewport-fit</code> 설명자를 사용할 때에는 모든 기기의 디스플레이가 직사각형인 것은 아니므로 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용해야 함을 기억하세요.</p> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{CSSxRef("env", "env()")}}</li> -</ul> diff --git a/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html deleted file mode 100644 index b5ba15fb81..0000000000 --- a/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: zoom -slug: conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 -tags: - - CSS - - CSS Descriptor - - Graphics - - Layout - - NeedsExample - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom -original_slug: Web/CSS/@viewport/zoom ---- -<div>{{ CSSRef }}</div> - -<p><code>zoom</code> <a href="/ko/docs/Web/CSS">CSS</a> 설명자(descriptor)는 {{cssxref("@viewport")}}에 의해 정의된 문서의 초기 줌 배율(factor)을 설정합니다.</p> - -<p><code>1.0</code> 또는 <code>100%</code>인 <em>줌 배율</em>은 줌이 없음에 해당합니다. 큰 값은 확대. 작은 값은 축소.</p> - -<p>{{cssinfo}}</p> - -<h2 id="구문">구문</h2> - -<pre class="brush:css">/* 키워드 값 */ -zoom: auto; - -/* <number> 값 */ -zoom: 0.8; -zoom: 2.0; - -/* <percentage> 값 */ -zoom: 150%; -</pre> - -<h3 id="값">값</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>사용자 에이전트가 문서의 초기 줌 배율을 설정합니다. 사용자 에이전트는 문서가 그 배율을 찾기 위해 렌더링되는 캔버스 영역의 크기를 사용할 수 있습니다.</dd> - <dt><code><number></code></dt> - <dd>줌 배율로 사용되는 음이 아닌 수. 배율 1.0은 줌이 수행되지 않음을 뜻합니다. 1.0보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd> - <dt><code><percentage></code></dt> - <dd>줌 배율로 사용되는 음이 아닌 퍼센트 값. 배율 100%는 줌이 수행되지 않음을 뜻합니다. 100%보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd> -</dl> - -<h3 id="형식_구문">형식 구문</h3> - -{{csssyntax}} - -<h2 id="Specifications" name="Specifications">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>초기 스펙</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("css.at-rules.viewport.zoom")}}</p> diff --git a/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html deleted file mode 100644 index 1a8c900e9c..0000000000 --- a/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 여러개의 배경 지정하기 -slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -original_slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -<p>{{CSSRef}}</p> - -<p><a href="/ko/CSS" title="CSS3">CSS3</a>를 사용하면 엘리먼트에 <strong>여러개의 배경</strong>을 지정할 수 있다. 첫 번째로 지정한 배경이 가장 앞에 보이고 나중에 지정한 배경이 뒤에 보인다. 배경 색상({{ cssxref("color") }})는 맨 마지막에만 지정할 수 있다. </p> - -<p>여러개의 배경을 지정하는건 간단하다.</p> - -<pre class="brush: css">.myclass { - background: background1, background 2, ..., backgroundN; -} -</pre> - -<p>배경에 관련된 다른 속성들은 {{ cssxref("background") }} 속성에 한꺼번에 지정할 수도 있고 리스트 형태로 각각 지정할 수도 있다. 하지만 {{ cssxref("background-color") }} 속성은 리스트 형태로 지정할 수 없다. 다음과 같은 속성들은 리스트 형태로 동시에 여러개 지정할 수 있다. {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}</p> - -<h2 id="예제">예제</h2> - -<p>이 예제에서는 파이어포스 로고, 선형 그라디언트, 꽃이 그려진 사진을 한 엘리먼트에 적용해본다. </p> - -<pre class="brush: css">.multi_bg_example { - background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), - linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), - url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); - background-repeat: no-repeat, no-repeat, repeat; - background-position: bottom right, left, right; -} -</pre> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Result</td> - </tr> - <tr> - <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td> - </tr> - </tbody> -</table> - -<p>첫 번째 배경으로 지정한(리스트에서 첫번째) 파이어폭스 로고가 맨 위에 보이고 선형 그라디언트, 꽃이 그려진 사진 순서대로 보인다. {{ cssxref("background-repeat") }} 와 {{ cssxref("background-position") }}) 속성들도 리스트 형태로 지정되었는데 순서대로 해당하는 배경에 적용된다. 예를 들어 {{ cssxref("background-repeat") }} 속성 중 첫 번째 no-repeat는 첫 번째 배경인 파이어폭스 로고에 적용된다.</p> - -<h2 id="더_보기">더 보기</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a></li> -</ul> |