diff options
Diffstat (limited to 'files/ko/conflicting/web/css')
4 files changed, 280 insertions, 0 deletions
diff --git a/files/ko/conflicting/web/css/@viewport/index.html b/files/ko/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..899947b05f --- /dev/null +++ b/files/ko/conflicting/web/css/@viewport/index.html @@ -0,0 +1,77 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<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 new file mode 100644 index 0000000000..9af37b8be1 --- /dev/null +++ b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,74 @@ +--- +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> + +<div class="hidden">이 설명자는 아직 <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a>에 등재되지 않았습니다.</div> + +<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 new file mode 100644 index 0000000000..4d0a6a0247 --- /dev/null +++ b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,72 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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 new file mode 100644 index 0000000000..1a8c900e9c --- /dev/null +++ b/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,57 @@ +--- +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> |