diff options
Diffstat (limited to 'files/ko/web/css')
318 files changed, 61259 insertions, 0 deletions
diff --git a/files/ko/web/css/-moz-image-region/index.html b/files/ko/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..1bc12db1e6 --- /dev/null +++ b/files/ko/web/css/-moz-image-region/index.html @@ -0,0 +1,54 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - CSS Property + - 'CSS:Mozilla Extensions' + - Non-standard +translation_of: Web/CSS/-moz-image-region +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>XUL 요소와 가상요소들에 대하여 {{ Cssxref("list-style-image") }} 속성을 사용할때 이 속성은 전체이미지에서 사용되는 부분의 령역을 지정합니다. 이것은 요소들이 성능을 향상시키기 위해 같은 이미지의 서로다른 부분을 사용할수 있게 합니다.</p> + +<pre class="brush: css">/* Keyword value */ +-moz-image-region: auto; + +/* <shape> value */ +-moz-image-region: rect(0, 8px, 4px, 4px); + +/* Global values */ +-moz-image-region: inherit; +-moz-image-region: initial; +-moz-image-region: unset;</pre> + +<p> </p> + +<p>문법은 {{ Cssxref("clip") }}속성과 류사합니다. 4개의 값은 모두 이미지의 외쪽 웃모서리로부터 상대적입니다.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre>-moz-image-region: rect(<em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre>#example-button { + /* display only the 4x4 area from the top left of this image */ + list-style-image: url("chrome://example/skin/example.png"); + -moz-image-region: rect(0px, 4px, 4px, 0px); +} +#example-button:hover { + /* use the 4x4 area to the right of the first for the hovered button */ + -moz-image-region: rect(0px, 8px, 4px, 4px); +}</pre> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.properties.-moz-image-region")}}</p> diff --git a/files/ko/web/css/-webkit-line-clamp/index.html b/files/ko/web/css/-webkit-line-clamp/index.html new file mode 100644 index 0000000000..1c08a3f70b --- /dev/null +++ b/files/ko/web/css/-webkit-line-clamp/index.html @@ -0,0 +1,111 @@ +--- +title: '-webkit-line-clamp' +slug: Web/CSS/-webkit-line-clamp +tags: + - CSS + - CSS Property + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/-webkit-line-clamp +--- +<div>{{CSSRef}}</div> + +<p><strong><code>-webkit-line-clamp</code></strong> CSS 속성은 {{Glossary("block container", "블록 컨테이너")}}의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.</p> + +<p>{{cssxref("display")}} 속성을 <code>-webkit-box</code> 또는 <code>-webkit-inline-box</code>로, 그리고 {{cssxref("-webkit-box-orient")}} 속성을 <code>vertical</code>로 설정한 경우에만 동작합니다.</p> + +<p><code>-webkit-line-clamp</code>만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 {{cssxref("overflow")}} 속성 또한 <code>hidden</code>으로 설정해야 합니다.</p> + +<p>앵커 요소에 적용한 경우 텍스트의 끝이 아니라 중앙에서 잘리는 경우도 있습니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>:<code>-webkit-line-clamp</code>는 원래 WebKit이 구현했었으며 몇몇 문제점을 가지고 있으나 레거시 지원을 위해 표준화를 거쳤습니다. <a href="https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp">CSS Overflow Module Level 3</a> 명세의 {{cssxref("line-clamp")}}가 <code>-webkit-line-clamp</code>를 대체하기 위해 정의된 속성입니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush:css notranslate">/* 키워드 값 */ +-webkit-line-clamp: none; + +/* <integer> 값 */ +-webkit-line-clamp: 3; +-webkit-line-clamp: 10; + +/* 전역 값 */ +-webkit-line-clamp: inherit; +-webkit-line-clamp: initial; +-webkit-line-clamp: unset; +</pre> + +<dl> + <dt><code>none</code></dt> + <dd>콘텐츠를 자르지 않습니다.</dd> + <dt>{{cssxref("integer")}}</dt> + <dd>몇 줄 뒤에 콘텐츠를 자를지 지정합니다. 0보다 커야 합니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="문단_자르기">문단 자르기</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p> + In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines. + An ellipsis will be shown at the point where the text is clamped. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">p { + width: 300px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("예제", "100%", "100")}}</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("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}</td> + <td>{{Spec2("CSS3 Overflow")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.-webkit-line-clamp")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://css-tricks.com/line-clampin/">Line Clampin’ (Truncating Multiple Line Text)</a></li> + <li>{{cssxref("line-clamp")}}</li> +</ul> diff --git a/files/ko/web/css/-webkit-overflow-scrolling/index.html b/files/ko/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..ef195eed02 --- /dev/null +++ b/files/ko/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,86 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - CSS Property + - Non-standard + - Reference +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +<div>{{CSSRef}} {{Non-standard_header}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>-webkit-overflow-scrolling</code></strong> 속성은 터치 단말기에서 주어진 요소의 모멘텀 기반 스크롤 활성화 여부를 결정합니다.</p> + +<p>{{cssinfo}}</p> + +<h2 id="값">값</h2> + +<dl> + <dt><code>auto</code></dt> + <dd>"일반적"인 스크롤을 사용합니다. 즉 손가락을 터치 화면에서 떼는 순간 스크롤이 멈춥니다.</dd> + <dt><code>touch</code></dt> + <dd>모멘텀 기반 스크롤을 사용합니다. 스크롤 제스쳐가 끝나고 손가락을 터치 화면에서 떼어도 잠시 스크롤이 지속됩니다. 지속 속도와 시간은 스크롤 제스쳐의 세기에 따라 달라집니다. 또한 새로운 {{glossary("stacking context", "쌓임 맥락")}}을 생성합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="scroll-touch"> + <p> + This paragraph has momentum scrolling + </p> +</div> +<div class="scroll-auto"> + <p> + This paragraph does not. + </p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 100%; + overflow: auto; +} + +p { + width: 200%; + background: #f5f9fa; + border: 2px solid #eaf2f4; + padding: 10px; +} + +.scroll-touch { + -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */ +} + +.scroll-auto { + -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */ +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="명세">명세</h2> + +<p>명세에 속하지 않습니다. Apple의 <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">Safari CSS Reference에 설명이 있습니다</a>.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">CSS-Tricks article with demo</a></li> +</ul> diff --git a/files/ko/web/css/@charset/index.html b/files/ko/web/css/@charset/index.html new file mode 100644 index 0000000000..6cdeb08fb5 --- /dev/null +++ b/files/ko/web/css/@charset/index.html @@ -0,0 +1,78 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@charset +--- +<div>{{ CSSRef }}</div> + +<p><strong><code>@charset</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <a href="/ko/docs/Web/CSS/At-rule" title="At-rule">at-규칙</a>은 스타일 시트에 쓰이는 문자 인코딩을 지정합니다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 합니다; <a href="/ko/docs/Web/CSS/Syntax#nested_statements" title="nested_statements">중첩된 문</a>이 아니기에, <a href="/ko/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="At-rule#Conditional_Group_Rules">조건부 그룹 at-규칙</a> 내에 사용될 수 없습니다. 여러 <code>@charset</code> at-규칙이 정의된 경우, 첫 번째 것만 사용되고 HTML 요소의 <code>style</code> attribute 또는 HTML 페이지의 문자 집합과 관련 있는 {{ HTMLElement("style") }} 요소 내에서 사용될 수 없습니다.</p> + +<pre class="brush: css">@charset "utf-8"; +</pre> + +<p>이 at-규칙은 {{ cssxref("content") }}처럼 일부 CSS 속성(property)에서 비 ASCII 문자를 사용할 때 유용합니다.</p> + +<p>스타일 시트의 문자 인코딩을 정의하는 여러 방법이 있기에, 브라우저는 다음과 같은 순서로 다음 방법을 시도합니다( 그리고 하나가 결과를 산출하자 마자 곧 멈춥니다):</p> + +<ol> + <li>파일의 시작 부분에 놓이는 <a href="http://en.wikipedia.org/wiki/Byte_order_mark" title="Byte_order_mark">Unicode byte-order</a> 문자값.</li> + <li><code>Content-Type:</code> HTTP 헤더의 <code>charset</code> attribute 또는 스타일 시트를 제공하는 데 쓰이는 프로토콜 등가물에 주어진 값.</li> + <li><code>@charset</code> CSS at-규칙.</li> + <li>참조하는 문서에 의해 정의된 문자 인코딩 사용: {{ HTMLElement("link") }} 요소의 <code>charset</code> attribute. 이 메서드는 HTML5에서 폐기(obsolete)되어 사용해서는 안됩니다.</li> + <li>문서가 UTF-8이라고 가정</li> +</ol> + +<h2 id="구문">구문</h2> + +<pre>@charset "UTF-8"; +@charset 'iso-8859-15'; +</pre> + +<p>where:</p> + +<dl> + <dt style="margin: 0 40px;"><em>charset</em></dt> + <dd style="margin: 0 40px;">사용되는 문자 인코딩을 나타내는 {{cssxref("<string>")}}입니다. <a href="http://www.iana.org/assignments/character-sets">IANA-registry</a>에 정의된 웹 안전 문자 인코딩의 이름이어야 합니다. 여러 이름이 인코딩과 관련된 경우, <em>preferred</em>로 표시된 것만 사용되어야 합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">@charset "UTF-8"; /* 스타일 시트의 인코딩을 Unicode UTF-8로 설정 */ +@charset 'iso-8859-15'; /* 스타일 시트의 인코딩을 Latin-9 (서유럽어, euro sign 있는) 로 설정 */ + @charset "UTF-8"; /* 무효한, at-규칙 앞에 문자(공백)가 있음 */ +@charset UTF-8; /* 무효한, ' 또는 " 없는 문자집합 CSS {{cssxref("<string>")}}이 아님 */ +</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('CSS2.1', 'syndata.html#x57', '@charset') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("css.at-rules.charset")}}</p> diff --git a/files/ko/web/css/@font-face/font-display/index.html b/files/ko/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..20d334f95c --- /dev/null +++ b/files/ko/web/css/@font-face/font-display/index.html @@ -0,0 +1,101 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +translation_of: Web/CSS/@font-face/font-display +--- +<div>{{CSSRef}}</div> + +<p><strong><code>font-display</code></strong> 설명자(descriptor)는 font face가 표시되는 방법을 결정합니다. 이는 다운로드 여부와 사용 시기에 따라 다릅니다.</p> + +<h2 id="The_font_display_timeline">The font display timeline</h2> + +<p>font display 시각표는 유저 에이전트가 지정된 다운로드 폰트를 사용하려는 순간 시작하는 타이머를 기반으로 합니다. 시각표는 아래의 세 가지 기간(period)으로 나뉘어져 font face를 사용하는 모든 요소(element)의 렌더링 동작을 나타냅니다.</p> + +<dl> + <dt>폰트 차단 기간</dt> + <dd>font face가 로드되지 않은 경우 font face를 사용하려는 요소는 <em>보이지 않는</em> 대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.</dd> + <dt>폰트 교체 기간</dt> + <dd>font face가 로드되지 않은 경우 font face를 사용하려는 요소는 (텍스트가 표시되는)대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.</dd> + <dt>폰트 실패 기간</dt> + <dd>font face가 로드되지 않은 경우 유저 에이전트는 로드 실패로 취급하고 정상적인 대체 폰트를 렌더링 합니다.</dd> +</dl> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css; notranslate">/* Keyword values */ +font-display: auto; +font-display: block; +font-display: swap; +font-display: fallback; +font-display: optional;</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>font display 전략은 유저 에이전트에 의해 정의됩니다.</dd> + <dt><code>block</code></dt> + <dd>font face에 짧은 차단 기간과 무한대의 교체 기간을 부여합니다.</dd> + <dt><code>swap</code></dt> + <dd>font face에 매우 작은 차단 기간과 무한대의 교체 기간을 부여합니다.</dd> + <dt><code>fallback</code></dt> + <dd>font face에 매우 작은 차단 기간과 짧은 교체 기간을 부여합니다.</dd> + <dt><code>optional</code></dt> + <dd>font face에 매우 작은 차단 기간과 교체 기간을 부여합니다.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: css; highlight[7] notranslate">@font-face { + font-family: ExampleFont; + src: url(/path/to/fonts/examplefont.woff) format('woff'), + url(/path/to/fonts/examplefont.eot) format('eot'); + font-weight: 400; + font-style: normal; + font-display: fallback; +}</pre> + +<h2 id="Specifications">Specifications</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('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.at-rules.font-face.font-display")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("@font-face/font-family", "font-family")}}</li> + <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> + <li>{{cssxref("@font-face/font-style", "font-style")}}</li> + <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> + <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> + <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li> + <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li> + <li>{{cssxref("@font-face/src", "src")}}</li> + <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> +</ul> diff --git a/files/ko/web/css/@font-face/index.html b/files/ko/web/css/@font-face/index.html new file mode 100644 index 0000000000..9ba2e223e6 --- /dev/null +++ b/files/ko/web/css/@font-face/index.html @@ -0,0 +1,216 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +translation_of: Web/CSS/@font-face +--- +<p>{{CSSRef}}</p> + +<h2 id="요약(Summary)">요약(Summary)</h2> + +<p><a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="At-rule">at-rule</a> 인 <code>@font-face</code> 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. <code style="font-size: 14px;">@font-face</code> 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. <code>@font-face</code> at-rule 은 CSS의 top-level에서 뿐 아니라, <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> 안에서도 사용될 수도 있다. </p> + +<p>{{ seeCompatTable() }}</p> + +<h2 id="문법(Syntax)">문법(Syntax)</h2> + +<pre>@font-face { + font-family: <a-remote-font-name>; + src: <source> [,<source>]*; + [font-weight: <weight>]; + [font-style: <style>]; +} +</pre> + +<h3 id="속성값(Values)">속성값(Values)</h3> + +<dl> + <dt><a-remote-font-name> </dt> + <dd>font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.</dd> + <dt><source> </dt> + <dd>원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 <code>local("Font Name")</code>형식으로 지정하는 속성이다.</dd> + <dt><weight> </dt> + <dd><a class="internal" href="/en/CSS/font-weight" title="en/CSS/font-weight">폰트의 굵기(font weight)</a> 값.</dd> + <dt><style> </dt> + <dd><a class="internal" href="/en/CSS/font-style" title="en/CSS/font-style">폰트 스타일(font style)</a> 값.</dd> +</dl> + +<p>사용자의 로컬환경(local computer)에 설치된 폰트는 <code>local()</code> 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.</p> + +<h2 id="예제(Examples)">예제(Examples)</h2> + +<p>아래는 다운로드하여 사용가능한 폰트를 설정하는 간단한 예제이며, document의 전체 body 영역에 폰트가 적용된다.</p> + +<p><a class="internal" href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">View live sample</a></p> + +<pre><html> +<head> + <title>Web Font Sample</title> + <style type="text/css" media="screen, print"> + @font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); + } + + body { font-family: "Bitstream Vera Serif Bold", serif } + </style> +</head> +<body> + This is Bitstream Vera Serif Bold. +</body> +</html> +</pre> + +<p>아래 예제에서는 로컬에 설치된 "Helvetica Neue Bold" 폰트가 사용된다. 만약 해당 폰트가 설치되어 있지 않다면(다른 2개의 폰트를 적용하기 위한 시도를 하고), 다운로드 가능한 "MgOpenModernaBold.ttf" 폰트가 대신 사용된다.</p> + +<pre class="brush: css">@font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; +} +</pre> + +<h2 id="주의사항(Notes)">주의사항(Notes)</h2> + +<ul> + <li>Gecko에서는, 동일 도메인 제한(same domain restriction)을 피하기 위해 <a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">HTTP access controls</a> 을 사용하지 않는한, 웹폰트(web fonts)의 사용시에는 동일 도메인 제한이 적용된다(폰트 파일은 폰트가 사용되는 페이지와 동일한 도메인상에 존재해야 함).</li> + <li> + <div class="note"><strong>주의사항:</strong> TrueType, OpenType, Web Open File(WOFF) 폰트에 대한 MIME타입이 정의되지 않았기 때문에, 파일에 적용될 MIME 타입에 대해서는 고려하지 않아도 된다.</div> + </li> + <li>Gecko에서는 웹폰트(web font)가 사용된 페이지를 표시할 때는 웹폰트가 다운로드 되는 동안 사용자의 컴퓨터에 이미 설치되어 있어 즉시 사용가능한 폰트(CSS fallback font)를 사용하여 텍스트를 표시한다. 각각의 웹폰트의 다운로드가 완료되면 Gecko는 해당 텍스트의 폰트를 교체한다. 이러한 과정은 사용자가 웹페이지 내의 텍스트를 좀 더 빨리 읽게끔 도와준다.</li> +</ul> + +<h2 id="Notes" name="Notes">명세(Specifications)</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('WOFF1.0', '', 'WOFF font format') }}</td> + <td>{{ Spec2('WOFF1.0') }}</td> + <td>Font format specification</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Fonts', '#font-face-rule', '@font-face') }}</td> + <td>{{ Spec2('CSS3 Fonts') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성(Browser_compatibility)">브라우저 호환성(Browser compatibility)</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>4.0</td> + <td>4.0</td> + <td>10.0</td> + <td>3.1</td> + </tr> + <tr> + <td><a href="/en/WOFF" title="en/About_WOFF">WOFF</a></td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>6.0</td> + <td>9.0</td> + <td>11.10</td> + <td>5.1</td> + </tr> + <tr> + <td>SVG Font</td> + <td>{{ CompatNo() }}<br> + {{ unimplemented_inline(119490) }}</td> + <td>yes</td> + <td>{{ CompatNo() }}</td> + <td>yes</td> + <td>yes</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>WOFF</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("5.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>SVG fonts</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}<br> + {{ unimplemented_inline(119490) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="주의사항(Notes)_2">주의사항(Notes)</h3> + +<ul> + <li>Embedded OpenType 폰트는 특허가 적용되기 때문에, 호환성 테이블(compatibility table)에 포함되어 있지 않다. IE 9.0 이전의 브라우저에서, IE는 이 포맷(format)만을 지원했었다.</li> + <li>TrueType 과 OpenType 는 WOFF로 교체되어 포함되지 않았다.</li> +</ul> + +<h2 id="참고자료(See_also)">참고자료(See also)</h2> + +<dl> +</dl> + +<ul> + <li><a href="/en/WOFF" title="en/About WOFF">About WOFF</a></li> + <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li> + <li><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">Microsoft Developer Network (MSDN) @font-face reference</a></li> + <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li> + <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li> +</ul> diff --git a/files/ko/web/css/@import/index.html b/files/ko/web/css/@import/index.html new file mode 100644 index 0000000000..a4648971ae --- /dev/null +++ b/files/ko/web/css/@import/index.html @@ -0,0 +1,83 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - At-rule + - CSS + - Reference +translation_of: Web/CSS/@import +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>@import</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>은 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰입니다.</span> 이 규칙은 {{cssxref("@charset")}} 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다. <code>@import</code>는 <a href="/ko/docs/Web/CSS/Syntax#nested_statements" title="nested statement">중첩 명령문</a>이 아니기 때문에 <a href="/ko/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="conditional group at-rules">조건부 그룹 @규칙</a> 내에 사용할 수 없습니다.</p> + +<pre class="brush: css">@import url("fineprint.css") print; +@import url("bluish.css") speech; +@import 'custom.css'; +@import url("chrome://communicator/skin/"); +@import "common.css" screen; +@import url('landscape.css') screen and (orientation:landscape); +</pre> + +<p>사용자 에이전트는 지원되지 않는 미디어 유형에 대한 자원 검색을 피할 수 있도록, 제작자는 미디어에 의존한 <code>@import</code> 규칙을 지정할 수 있습니다. 이러한 조건부 import는 URI 뒤에 쉼표로 구분된 <a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries" title="media queries">미디어 질의</a>를 지정합니다. 미디어 질의가 없으면, import는 무조건(unconditional)입니다. 미디어에 <code>all</code>을 지정하면 같은 효과가 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">@import <em>url</em>; +@import <em>url</em> <em>list-of-media-queries</em>; +</pre> + +<p>where:</p> + +<dl> + <dt><code><em>url</em></code></dt> + <dd>import할 자원의 위치를 나타내는 {{cssxref("<string>")}} 또는 {{cssxref("<uri>")}}입니다. URL은 절대 또는 상대일 수 있습니다. URL은 실제로 파일에 지정할 필요는 없음을 주의하세요; 그냥 패키지 명 및 일부를 지정할 수 있으며 적절한 파일이 자동으로 선택됩니다(가령 <strong>chrome://communicator/skin/</strong>). 자세한 내용은 <a href="/ko/docs/XUL_Tutorial/The_Chrome_URL">여기를 참조</a>.</dd> + <dt><code><em>list-of-media-queries</em></code></dt> + <dd>링크된 URL 내에 정의된 CSS 규칙의 적용을 조절하는 쉼표 구분된 <a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries" title="media queries">미디어 질의</a> 목록입니다. 브라우저가 이러한 질의를 지원하지 않으면, 링크된 자원을 로드하지 않습니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<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('CSS3 Cascade', '#at-ruledef-import', '@import')}}</td> + <td>{{Spec2('CSS3 Cascade')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Extended the syntax to support any media query and not only simple <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Added support for {{cssxref("<string>")}} to denote the url of a stylesheet,<br> + and requirement to insert the <code>@import</code> rule at the beginning of the CSS document.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.at-rules.import")}}</p> diff --git a/files/ko/web/css/@keyframes/index.html b/files/ko/web/css/@keyframes/index.html new file mode 100644 index 0000000000..dbdfd67d92 --- /dev/null +++ b/files/ko/web/css/@keyframes/index.html @@ -0,0 +1,152 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +tags: + - Animations + - At-rule + - CSS + - Reference +translation_of: Web/CSS/@keyframes +--- +<div>{{CSSRef}}</div> + +<p><strong><code>@keyframes</code></strong> <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.</p> + +<p> </p> + +<pre class="brush: css">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +}</pre> + +<p><code>@keyframes</code> @규칙은 CSS 오브젝트 모델 인터페이스인 {{domxref("CSSKeyframesRule")}}를 통해서 접근합니다.</p> + +<p>키프레임을 사용하려면 <code>@keyframes</code> 룰을 애니메이션과 키프레임 리스트를 매칭시킬 {{ cssxref("animation-name") }} 속성에서 사용할 이름과 함께 생성합니다. 각 <code>@keyframes</code> 룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성됩니다.</p> + +<p>키프레임은 순서대로 나열 가능합니다. 지정된 %의 순서대로 처리됩니다.</p> + +<h3 id="유효한_키프레임_리스트">유효한 키프레임 리스트</h3> + +<p>키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.</p> + +<p>만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 이 속성은 무시가 됩니다. 애니메이션을 지원하는 속성들은 여전히 애니메이션이 됩니다.</p> + +<h3 id="중복_해상도">중복 해상도</h3> + +<p>만약 한개의 이름에 대해서 여러개의 키프레임 셋이 존재하면, 파서가 마지막으로 마주치는 키프레임 셋만 유효합니다. <code>@keyframes 룰은 연속되지 않기 때문에 한개의 룰 셋 이상을 적용하지 않습니다.</code></p> + +<h3 id="키_프레임_밖에_속성이_지정된_경우">키 프레임 밖에 속성이 지정된 경우</h3> + +<p>어떤 키 프레임에도 정의되지 않는 속성들은 애니메이션과는 완전 별도로 삽입되지 않는 경우를 제외하고는 삽입됩니다. 예를 들어,</p> + +<pre class="brush: css">@keyframes identifier { + 0% { top: 0; left: 0; } + 30% { top: 50px; } + 68%, 72% { left: 50px; } + 100% { top: 100px; left: 100%; } +} +</pre> + +<p>여기 {{ cssxref("top") }} 속성은 <code>0%</code>, <code>30%</code>, <code>100% 키 프레임을 이용하여 애니메이션 됩니다. </code>{{ cssxref("left") }} 속성은 <code>0%</code>, <code>68%</code>, <code>100% 키 프레임을 사용합니다.</code></p> + +<p><code>0%</code> 와 <code>100%</code> 키 프레임 모두에 정의된 속성들만 애니메이션 동작을 합니다. 이 둘 중 아무것도 포함되지 않은 속성은 애니메이션 연속을 지속하기 위한 시작 값으로 사용됩니다.</p> + +<h3 id="키_프레임이_여러번_정의_된_경우">키 프레임이 여러번 정의 된 경우</h3> + +<p>스펙에서는 모든 속성이 각 키 프레임이 지정된 게 아니라 키 프레임이 여러번 정의 된 경우에는 가장 최근의 키프레임에 선언된 값들만 유효하다고 나와 있습니다. 예를 들어,</p> + +<pre class="brush: css">@keyframes identifier { + 0% { top: 0; } + 50% { top: 30px; left: 20px; } + 50% { top: 10px; } + 100% { top: 0; } +} +</pre> + +<p>이 예제를 보면 <code>50%</code> 키프레임에서 <code>top: 10px 이고 다른 값들은 모두 무시됩니다.</code></p> + +<p>{{ non-standard_inline }} {{ fx_minversion_inline("14") }} 키 프레임 효과 연속은 파이어폭스 14부터 지원됩니다. 이 의미는 위 예제의 경우 50% 키 프레임에서 왼쪽 : 20px 값이 고려된다는 의미입니다. 이러한 기능이 스펙에는 아직 정의가 되어있진 않지만, 현재 도입에 대한 토론이 진행 중입니다.</p> + +<h3 id="키프레임에서_!important">키프레임에서 !important</h3> + +<p><code>키프레임에서 !important</code> 속성을 이용한 정의는 모두 무시됩니다.</p> + +<pre class="brush: css">@keyframes important1 { + from { margin-top: 50px; } + 50% { margin-top: 150px !important; } /* ignored */ + to { margin-top: 100px; } +} + +@keyframes important2 { + from { margin-top: 50px; + margin-bottom: 100px; } + to { margin-top: 150px !important; /* ignored */ + margin-bottom: 50px; } +} +</pre> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><identifier></code></dt> + <dd>A name identifying the keyframe list. This must match the identifier production in CSS syntax.</dd> + <dt><code>from</code></dt> + <dd>A starting offset of <code>0%</code>.</dd> + <dt><code>to</code></dt> + <dd>An ending offset of <code>100%</code>.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>A percentage of the time through the animation sequence at which the specified keyframe should occur.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>See <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> for examples.</p> + +<h2 id="Specifications">Specifications</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('CSS3 Animations', '#keyframes', '@keyframes') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{Compat("css.at-rules.keyframes")}}</p> + +<h2 id="Notes">Notes</h2> + +<ol> + <li>@keyframes not supported in an inline or scoped stylesheet in Firefox ({{bug(830056)}}).</li> +</ol> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>{{domxref("AnimationEvent")}}</li> +</ul> diff --git a/files/ko/web/css/@media/index.html b/files/ko/web/css/@media/index.html new file mode 100644 index 0000000000..6c06996035 --- /dev/null +++ b/files/ko/web/css/@media/index.html @@ -0,0 +1,153 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - '@media' + - At-rule + - CSS + - Reference + - 미디어 쿼리 +translation_of: Web/CSS/@media +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>@media</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <a href="/ko/docs/Web/CSS/At-rule" title="at-rule">@규칙</a>은 스타일 시트의 일부를 하나 이상의 <a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리</a> 결과에 따라 적용할 때 사용할 수 있습니다.</span> <code>@media</code>를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> JavaScript에서는 <code>@media</code>를 {{domxref("CSSMediaRule")}} CSS 객체 모델 인터페이스로 접근할 수 있습니다.</p> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<p><code>@media</code> @규칙은 최상위 코드나, 아무 <a href="/ko/docs/Web/CSS/At-rule#조건부_그룹_규칙">조건부 그룹 @규칙</a> 안에 중첩해 작성할 수 있습니다.</p> + +<pre class="brush: css notranslate">/* 최상위 코드 레벨 */ +@media screen and (min-width: 900px) { + article { + padding: 1rem 3rem; + } +} + +/* 다른 조건부 @규칙 내에 중첩 */ +@supports (display: flex) { + @media screen and (min-width: 900px) { + article { + display: flex; + } + } +} +</pre> + +<p>미디어 쿼리 구문에 관한 내용은 <a href="/ko/docs/Web/Guide/CSS/Media_queries#구문">미디어 쿼리 사용하기</a> 문서를 참고하세요.</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>글씨 크기를 조절한 사용자를 위해서, 미디어 쿼리의 {{cssxref("<length>")}} 자리에는 <code><a href="/ko/docs/Web/CSS/length#em">em</a></code>을 사용하는게 좋습니다.</p> + +<p><code>em</code>과 <code><a href="/ko/docs/Web/CSS/length#px">px</a></code> 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면 <code>em</code>이 더 자연스럽게 동작합니다.</p> + +<p>Level 4 미디어 쿼리를 통한 사용자 경험 향상도 고려해보세요. 예컨대 <code>prefers-reduced-motion</code> 쿼리를 사용하면 <a href="/ko/docs/Web/CSS/@media/prefers-reduced-motion">사용자가 시스템에 애니메이션을 최소로 줄여달라고 요청했는지 알 수 있습니다</a>.</p> + +<h2 id="Examples" name="Examples">보안</h2> + +<p>미디어 쿼리는 사용자의 장치와 더 나아가 기능과 디자인에 대한 통찰을 제공하므로, "핑거프린팅"을 통해 장치 고유 식별자로 활용하거나, 그보단 덜 해도 사용자가 원하지 않을 수준의 분류를 하기 위해 오용할 가능성이 있습니다.</p> + +<p>그러므로 브라우저는 기기의 특정을 방지하기 위해 일부 반환 값을 모호하게 할 수 있습니다. 또한 사용자에게 추가 설정을 제공할 수도 있는데, 예를 들어 Firefox의 "핑거프린터 차단" 기능을 활성화하면 많은 수의 미디어 쿼리는 실제 장치 상태 대신 기본 값을 보고하게 됩니다.</p> + +<h2 id="Examples" name="Examples">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="출력과_화면_미디어_타입_판별">출력과 화면 미디어 타입 판별</h3> + +<pre class="brush: css notranslate">@media print { + body { font-size: 10pt; } +} + +@media screen { + body { font-size: 13px; } +} + +@media screen, print { + body { line-height: 1.2; } +} + +@media only screen + and (min-width: 320px) + and (max-width: 480px) + and (resolution: 150dpi) { + body { line-height: 1.4; } +}</pre> + +<p>Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해 더 간결한 미디어 쿼리를 작성할 수 있습니다.</p> + +<pre class="brush: css notranslate">@media (height > 600px) { + body { line-height: 1.4; } +} + +@media (400px <= width <= 700px) { + body { line-height: 1.4; } +}</pre> + +<p>더 많은 예제는 <a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries">미디어 쿼리 사용하기</a>를 참고하세요.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Comment</th> + <th scope="col">Feedback</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td> + <td>Reinstates <code>light-level</code>, <code>inverted-colors</code> and Custom Media Queries, which were removed from Level 4.<br> + Adds <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code>, and <code>prefers-color-scheme</code> media features.</td> + <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td> + <td>Defines the basic syntax of the <code>@media</code> rule.</td> + <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td> + <td> + <p>Adds <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br> + Deprecates all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.<br> + Makes the syntax more flexible by adding, among other things, the <code>or</code> keyword.</p> + </td> + <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td> + <td></td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td> + <td>Initial definition.</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.at-rules.media")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries">미디어 쿼리 사용하기</a></li> + <li>JavaScript에서 <code>@media</code>에 접근할 때 사용할 수 있는 CSS 객체 모델 인터페이스 {{domxref("CSSMediaRule")}}</li> + <li><a href="/ko/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 미디어 특성 확장</a></li> + <li><a href="/ko/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 미디어 특성 확장</a></li> +</ul> diff --git a/files/ko/web/css/@media/prefers-color-scheme/index.html b/files/ko/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..1ce1a10a2b --- /dev/null +++ b/files/ko/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,89 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - Web + - prefers-color-scheme +translation_of: Web/CSS/@media/prefers-color-scheme +--- +<p><strong><code>prefers-color-scheme</code></strong> <a href="/ko/docs/CSS">CSS</a> <a href="/ko/docs/Web/CSS/@media#Media_features">미디어 특성</a>은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.</p> + +<h2 id="구문">구문</h2> + +<dl> + <dt><code><dfn>no-preference</dfn></code></dt> + <dd>사용자가 시스템에 선호하는 테마를 알리지 않았음을 나타냅니다. 이 키워드는 <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context" id="ref-for-boolean-context④">boolean context</a>에서 <code>false</code>로 판정됩니다.</dd> + <dt><code><dfn>light</dfn></code></dt> + <dd>사용자가 시스템에 라이트 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.</dd> + <dt><code><dfn>dark</dfn></code></dt> + <dd>사용자가 시스템에 다크 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>이 예제는 검은 배경에 흰 텍스트를 가진 요소를 라이트 테마를 사용하는 사용자가 볼 경우 색을 반대로 해서 나타냅니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="themed">Theme</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.themed { + display: block; + width: 10em; + height: 10em; + background: black; + color: white; +} + +@media (prefers-color-scheme: light) { + .themed { + background: white; + color: black; + } +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("예제")}}</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> + <p>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</p> + </td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div> diff --git a/files/ko/web/css/@namespace/index.html b/files/ko/web/css/@namespace/index.html new file mode 100644 index 0000000000..d4059df78e --- /dev/null +++ b/files/ko/web/css/@namespace/index.html @@ -0,0 +1,78 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@namespace +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>@namespace</code></strong>는 <a href="/ko/docs/Glossary/CSS">CSS</a> <a href="/ko/docs/Web/API/StyleSheet">스타일 시트</a>에서 사용되는 <a href="/ko/docs/Namespaces">XML 네임스페이스</a>를 정의하는 <a href="/ko/docs/Web/CSS/At-rule" title="CSS at-rules">at-규칙</a>입니다. 정의된 네임스페이스는 오직 그 네임스페이스 내의 요소를 선택만 하기 위해 <a href="/ko/docs/Web/CSS/Universal_selectors">universal</a>, <a href="/ko/docs/Web/CSS/Type_selectors">type</a> 및 <a href="/ko/docs/Web/CSS/Attribute_selectors">attribute</a> <a href="/ko/docs/Web/Guide/CSS/Getting_started/Selectors">선택자</a>를 제한하는 데 사용될 수 있습니다. <code>@namespace</code> 규칙은 보통 여러 네임스페이스(인라인 SVG 또는 MathML 있는 HTML5 또는 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용합니다.</span></p> + +<p>어떤 <code>@namespace</code> 규칙이든 모든 <a href="/ko/docs/Web/CSS/%40charset">@charset</a> 및 <a href="/ko/docs/Web/CSS/%40import">@import</a> 규칙의 다음에 오고 스타일시트에서 모든 다른 at-규칙 및 <a href="/ko/docs/Web/API/CSSStyleDeclaration">스타일 선언</a>보다 앞서야 합니다.</p> + +<p><code>@namespace</code>는 스타일 시트를 위한 <strong>기본 네임스페이스</strong>를 정의하는 데 사용될 수 있습니다. 기본 네임스페이스가 정의된 경우, 모든 universal 및 type 선택자 (attribute 선택자는 아님, 아래 주의 참조) 는 그 네임스페이스 내 요소에만 적용됩니다.</p> + +<p><code>@namespace</code> 규칙은 또한 네임스페이스 접두어(<strong>namespace prefix</strong>)를 정의하는 데도 사용될 수 있습니다. universal, type 또는 attribute 선택자가 네임스페이스 접두어로 시작되는 경우, 그때 그 선택자는 요소 또는 attribute의 네임스페이스 <em>및</em> 이름이 일치하는 경우에만 일치합니다.</p> + +<p><a href="https://html.spec.whatwg.org/#foreign-elements" title="foreign elements">외부 요소</a>로 알려진 <a href="/ko/docs/Glossary/HTML5">HTML5</a>에서는, 자동으로 네임스페이스가 할당됩니다. 이는 HTML 요소는 마치 XHTML 네임스페이스 (<code>http://www.w3.org/1999/xhtml</code>) 에 있는 것처럼 행동하고, 문서 어디에든 <code>xmlns</code> attribute가 없을지라도, <a href="/ko/docs/Web/SVG/Element/svg"><svg></a> 및 <a href="/ko/docs/Web/MathML/Element/math"><math></a> 요소는 그들의 적절한 네임스페이스 (<code>http://www.w3.org/2000/svg</code> 및 <code>http://www.w3.org/1998/Math/MathML</code>) 가 할당됨을 뜻합니다.</p> + +<div class="note"> +<p><strong>주의:</strong> XML에서, 접두어가 직접 attribute (<em>가령</em>, <code>xlink:href</code>)에 정의되지 않는 한, 그 attribute은 네임스페이스가 없습니다. 다시 말해서, attribute은 그들이 붙은 요소의 네임스페이스를 상속받지 않습니다. 이 행동(behaviour)를 일치시키기 위해, CSS에서 기본 네임스페이스는 attribute 선택자에 적용되지 않습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css">/* 기본 네임스페이스 */ +@namespace url(<em>XML-namespace-URL</em>); +@namespace "<em>XML-namespace-URL</em>"; + +/* 접두어 붙은 네임스페이스 */ +@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>); +@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">@namespace url(http://www.w3.org/1999/xhtml); +@namespace svg url(http://www.w3.org/2000/svg); + +/* 이는 모든 XHTML <a> 요소와 일치합니다, XHTML이 접두어 붙지 않은 기본 네임스페이스이기에 */ +a {} + +/* 이는 모든 SVG <a> 요소와 일치합니다 */ +svg|a {} + +/* 이는 XHTML 및 SVG <a> 요소 둘 다와 일치합니다 */ +*|a {} +</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 Namespaces', '#declaration', '@namespace')}}</td> + <td>{{Spec2('CSS3 Namespaces')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.at-rules.namespace")}}</p> diff --git a/files/ko/web/css/@page/index.html b/files/ko/web/css/@page/index.html new file mode 100644 index 0000000000..dd9d2e2ac0 --- /dev/null +++ b/files/ko/web/css/@page/index.html @@ -0,0 +1,96 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@page +--- +<div>{{CSSRef}}</div> + +<p><strong><code>@page</code></strong> CSS @규칙은 문서를 인쇄할 때 일부 CSS 속성을 수정하는 데 쓰입니다. <code>@page</code>로 모든 CSS 속성을 바꿀 수는 없습니다. 문서의 margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break만 바꿀 수 있습니다. 다른 CSS 속성을 바꾸려는 시도는 무시됩니다.</p> + +<pre class="brush: css">@page { + margin: 1cm; +} + +@page :first { + margin: 2cm; +} +</pre> + +<p><code>@page</code> @규칙은 CSS 객체 모델 인터페이스 {{domxref("CSSPageRule")}}를 통해 액세스될 수 있습니다.</p> + +<div class="note"><strong>주의:</strong> W3C은 viewport 관련 {{cssxref("<length>")}} 단위, <code>vh</code>, <code>vw</code>, <code>vmin</code> 및 <code>vmax</code> 처리법을 논의 중입니다. 그 동안에 <code>@page</code> @규칙 내에서 사용하지 마세요.</div> + +<h2 id="구문">구문</h2> + +<h3 id="서술자">서술자</h3> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt> + <dd>페이지 박스 내 포함 블록의 대상(target) 크기 및 방향을 지정합니다. 한 페이지 박스가 한 페이지 시트에 렌더링 되는 일반적인 경우에, 또한 대상(destination) 페이지 시트의 크기를 나타냅니다.</dd> +</dl> + +<dl> + <dt><a href="/ko/docs/Web/CSS/@page/marks"><code>marks</code></a></dt> + <dd>문서에 crop 및/또는 registration 마크를 추가합니다.</dd> +</dl> + +<dl> + <dt><a href="/ko/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt> + <dd>페이지 렌더링이 잘리는(clip) 페이지 박스 너머 범위를 지정합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>예제를 위한 <code>@page</code>의 다양한 <a href="/ko/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">가상 클래스</a> 참조해 주세요.</p> + +<ul> + <li>{{Cssxref(":blank")}}</li> + <li>{{Cssxref(":first")}}</li> + <li>{{Cssxref(":left")}}</li> + <li>{{Cssxref(":right")}}</li> + <li>{{Cssxref(":recto")}} {{experimental_inline}}</li> + <li>{{Cssxref(":verso")}} {{experimental_inline}}</li> +</ul> + +<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('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td><code>:recto</code> 및 <code>:verso</code> 페이지 선택자 추가</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>{{SpecName('CSS2.1')}}에서 변화 없음, 더 많은 CSS at-규칙이 <code>@page</code> 내에 사용될 수 있지만.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.at-rules.page")}}</p> diff --git a/files/ko/web/css/@supports/index.html b/files/ko/web/css/@supports/index.html new file mode 100644 index 0000000000..e2d9c44ec3 --- /dev/null +++ b/files/ko/web/css/@supports/index.html @@ -0,0 +1,193 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@supports +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>@supports</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <a href="/ko/docs/Web/CSS/At-rule" title="en/CSS/At-rule">@규칙</a>은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공합니다.</span> 이를 기능 쿼리(feature query)라고 부릅니다. <code>@supports</code>는 스타일의 최상위 단계, 또는 다른 <a href="/ko/docs/Web/CSS/At-rule#조건부_그룹_규칙">조건부 그룹 규칙</a>에 중첩해 위치할 수 있습니다.</p> + +<pre class="brush: css; no-line-numbers">@supports (display: grid) { + div { + display: grid; + } +}</pre> + +<pre class="brush: css; no-line-numbers">@supports not (display: grid) { + div { + float: right; + } +}</pre> + +<p>JavaScript에서, <code>@supports</code>는 CSS 객체 모델 인터페이스 {{DOMxRef("CSSSupportsRule")}}로 접근할 수 있습니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<p><code>@supports</code> @규칙은 하나의 선언 블록을 특정 기능의 브라우저 지원 조건과 연결할 수 있습니다.<em> 지원 조건은 하나 이상의 키-값 쌍을 논리곱(<code>and</code>), 논리합(<code>or</code>), 부정(<code>not</code>)으로 연결해 구성합니다. 괄호로 묶어 우선순위를 </em>지정할 수도 있습니다.</p> + +<h3 id="선언_구문">선언 구문</h3> + +<p>가장 기본적인 지원 조건은 단순한 선언(속성 이름과 그 값)입니다. 선언은 괄호로 묶여야 합니다. 다음 예제는 브라우저가 {{cssxref("transform-origin")}} 속성의 값으로 <code>5% 5%</code>가 유효하다고 여길 때 통과합니다.</p> + +<pre class="brush:css">@supports (transform-origin: 5% 5%) {}</pre> + +<h3 id="함수_구문">함수 구문</h3> + +<p>두 번째 기본적인 지원 조건은 지원 함수로, 모든 브라우저가 함수 구문을 지원하지만 지원 함수 자체는 아직 표준화 중입니다.</p> + +<h4 id="selector()" name="selector()"><code>selector()</code> {{experimental_inline}}</h4> + +<p>브라우저가 주어진 선택자를 지원하는지 판별합니다. 다음 예제는 브라우저가 <a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a>를 지원할 때 통과합니다.</p> + +<pre class="brush: css">@supports selector(A > B) {} +</pre> + +<h3 id="not_연산자"><code>not</code> 연산자</h3> + +<p><code>not</code> 연산자를 어떤 표현식 앞에 붙이면 그 반대 결과를 낳는 새로운 표현식을 생성합니다. 다음 예제는 브라우저가 {{cssxref("transform-origin")}} 속성의 값으로 <code>10em 10em 10em</code>이 <strong>유효하지 않다</strong>고 여길 때 통과합니다.</p> + +<pre class="brush:css">@supports not (transform-origin: 10em 10em 10em) {}</pre> + +<p>다른 연산자와 마찬가지로, 선언의 복잡도와 관계 없이 <code>not</code> 연산자를 적용할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.</p> + +<pre class="brush:css">@supports not (not (transform-origin: 2px)) {} +@supports (display: grid) and (not (display: inline-grid)) {}</pre> + +<div class="note style-wrap"> +<p><strong>참고:</strong> 최상위 <code>not</code> 연산자는 괄호로 감싸지 않아도 괜찮습니다. <code>and</code>, <code>or</code> 등 다른 연산자와 함께 사용할 때는 괄호가 필요합니다.</p> +</div> + +<h3 id="and_연산자"><code>and</code> 연산자</h3> + +<p><code>and</code> 연산자는 두 표현식의 논리곱으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식이 <strong>모두 참일 때만</strong> 참을 반환합니다. 다음 예제는 두 개의 구성 표현식이 동시에 참이어야만 통과합니다.</p> + +<pre class="brush: css">@supports (display: table-cell) and (display: list-item) {}</pre> + +<p>다수의 논리곱은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.</p> + +<pre class="brush: css">@supports (display: table-cell) and (display: list-item) and (display:run-in) {} +@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}</pre> + +<h3 id="or_연산자"><code>or</code> 연산자</h3> + +<p><code>or</code> 연산자는 두 표현식의 논리합으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식 중 <strong>어느 한 쪽이라도 참이면</strong> 참을 반환합니다. 다음 예제는 두 개의 구성 표현식 중 하나라도 참이면 통과합니다.</p> + +<pre class="brush:css;">@supports (transform-style: preserve) or (-moz-transform-style: preserve) {} +</pre> + +<p>다수의 논리합은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.</p> + +<pre class="brush:css">@supports (transform-style: preserve) or (-moz-transform-style: preserve) or + (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {} + +@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or + ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}</pre> + +<div class="note style-wrap"> +<p><strong>참고</strong>: <code>and</code>와 <code>or</code> 연산자를 같이 사용할 때는 괄호를 사용해 연산자 적용 순서를 정의해야 합니다. 그렇지 않으면 조건이 유효하지 않으므로 @-규칙 전체를 무시합니다.</p> +</div> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="주어진_CSS_속성의_지원_여부_판별">주어진 CSS 속성의 지원 여부 판별</h3> + +<pre class="brush:css;">@supports (animation-name: test) { + … /* 애니메이션 속성을 접두사 없이 사용할 수 있을 때 CSS 적용 */ + @keyframes { /* 다른 @-규칙을 중첩 가능 */ + … + } +} +</pre> + +<h3 id="주어진_CSS_속성_및_접두사_버전의_지원_여부_판별">주어진 CSS 속성 및 접두사 버전의 지원 여부 판별</h3> + +<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or + (-ms-perspective: 10px) or (-o-perspective: 10px) ) { + … /* 접두사가 붙더라도 3D 변형을 지원하면 CSS 적용 */ +} +</pre> + +<h3 id="특정_CSS_속성의_미지원_여부_판별">특정 CSS 속성의 미지원 여부 판별</h3> + +<pre class="brush:css;">@supports not ((text-align-last: justify) or (-moz-text-align-last: justify) ){ + … /* text-align-last: justify를 대체할 CSS */ +}</pre> + +<h3 id="사용자_정의_속성_지원_여부_판별">사용자 정의 속성 지원 여부 판별</h3> + +<pre class="brush: css">@supports (--foo: green) { + body { + color: var(--varName); + } +}</pre> + +<h3 id="선택자_지원_여부_판별_(예_CSSxRef(is_is()))">선택자 지원 여부 판별 (예: {{CSSxRef(":is", ":is()")}})</h3> + +<p>{{SeeCompatTable}}</p> + +<pre class="brush: css">/* :is()를 지원하지 않는 브라우저에서는 무시함 */ +:is(ul, ol) > li { + … /* :is() 선택자를 지원할 때 적용할 CSS */ +} + +@supports not selector(:is(a, b)) { + /* :is()를 지원하지 않을 때 대체할 CSS */ + ul > li, + ol > li { + … /* :is()를 지원하지 않을 때 적용할 CSS */ + } +} + +@supports selector(:nth-child(1n of a, b)) { + /* @supports로 먼저 묶지 않으면 :nth-child()의 of 구문을 + 지원하지 않는 브라우저에서 스타일을 잘못 적용할 수 있음 */ + :is(:nth-child(1n of ul, ol) a, + details > summary) { + … /* :is() 선택자와 :nth-child()의 of 구문을 지원할 때 적용할 CSS */ + } +} +</pre> + +<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 Conditional 4", "#at-supports", "@supports")}}</td> + <td>{{Spec2("CSS Conditional 4")}}</td> + <td>Adds the <code>selector()</code>function.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}</td> + <td>{{Spec2("CSS3 Conditional")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("css.at-rules.supports")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSSOM 클래스 {{ domxref("CSSSupportsRule") }}과, JavaScript를 통해 동일한 판별을 수행할 수 있는 {{ domxref("CSS.supports") }} 메서드</li> +</ul> 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 +--- +<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/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 +--- +<div>{{SeeCompatTable}}{{CSSRef}}</div> + +<p>The<strong> <code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> 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).</p> + +<p>Lengths specified as percentages are calculated relative to the <strong>initial viewport</strong>, 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.</p> + +<p>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).</p> + +<pre class="brush: css no-line-numbers">@viewport { + width: device-width; +}</pre> + +<h2 id="Syntax">Syntax</h2> + +<p>The at-rule contains a set of nested {{glossary("descriptor (CSS)", "descriptor")}}s in a CSS block that is delimited by curly braces.</p> + +<p>A <em>zoom factor</em> of <code>1.0</code> or <code>100%</code> corresponds to no zooming. Larger values zoom in. Smaller values zoom out.</p> + +<h3 id="Descriptors">Descriptors</h3> + +<p>Browser support for <code>@viewport</code> 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 <code>@viewport</code> if they don't support it, and will ignore any descriptors that they don't recognize.</p> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt> + <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt> + <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt> + <dd>A shorthand descriptor for setting both <code>min-width</code> and <code>max-width</code>.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt> + <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt> + <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt> + <dd>A shorthand descriptor for setting both <code>min-height</code> and <code>max-height</code>.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt> + <dd>Sets the initial zoom factor.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt> + <dd>Sets the minimum zoom factor.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt> + <dd>Sets the maximum zoom factor.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt> + <dd>Controls whether or not the user should be able to change the zoom factor.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt> + <dd>Controls the document's orientation.</dd> + <dt>{{cssxref("@viewport/viewport-fit", "viewport-fit")}}</dt> + <dd>Controls the display of the document on non-rectangular displays.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: css">@viewport { + min-width: 640px; + max-width: 800px; +} + +@viewport { + zoom: 0.75; + min-zoom: 0.5; + max-zoom: 0.9; +} + +@viewport { + orientation: landscape; +}</pre> + +<h2 id="Specifications" name="Specifications">Specifications</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", "#extending-viewport-rule", "@viewport")}}</td> + <td>{{Spec2("CSS Round Display")}}</td> + <td>Defined the {{cssxref("@viewport/viewport-fit", "viewport-fit")}} descriptor.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.at-rules.viewport")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("meta")}}, specifically <code><meta name="viewport"></code></li> + <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li> +</ul> 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 +--- +<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/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 +--- +<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/web/css/_colon_active/index.html b/files/ko/web/css/_colon_active/index.html new file mode 100644 index 0000000000..eb3ccff192 --- /dev/null +++ b/files/ko/web/css/_colon_active/index.html @@ -0,0 +1,127 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>:active</code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 사용자가 활성화한 요소(버튼 등)를 나타냅니다.</span> 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* 활성화된 모든 <a> 태그를 선택 */ +a:active { + color: red; +}</pre> + +<p><code>:active</code> 의사 클래스는 대개 {{HTMLElement("a")}}, {{HTMLElement("button")}}과 함께 사용합니다. 다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와, 연결된 {{HTMLElement("label")}}로 선택한 입력 폼 요소 등이 있습니다.</p> + +<p><code>:active</code> 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":visited")}})가 덮어씁니다. 링크를 적절히 디자인하려면 <em>LVHA-순서(</em><code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>)를 따라, <code>:active</code> 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요.</p> + +<div class="note"><strong>참고:</strong> CSS3 명세에 따르면, 다수의 버튼을 가진 마우스라도 <code>:active</code> 의사 클래스는 주 버튼에만 적용돼야 합니다. 오른손잡이 마우스 기준, 주 버튼은 보통 맨 왼쪽 버튼입니다.</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">예제</h2> + +<h3 id="활성화_링크">활성화 링크</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>링크를 포함하는 문단입니다. + <a href="#">이 링크는 클릭하는 동안 색이 빨갛게 됩니다.</a> + 이 문단은 클릭하는 동안 배경색이 회색이 됩니다. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">a:link { color: blue; } /* 방문하지 않은 링크 */ +a:visited { color: purple; } /* 방문한 링크 */ +a:hover { background: yellow; } /* 마우스를 올린 링크 */ +a:active { color: red; } /* 활성화한 링크 */ + +p:active { background: #eee; } /* 활성화한 문단 */</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('활성화_링크')}}</p> + +<h3 id="활성화_폼_요소">활성화 폼 요소</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><form> + <label for="my-button">내 버튼: </label> + <button id="my-button" type="button">제 라벨이나 저를 클릭해보세요!</button> +</form></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">form :active { + color: red; +} + +form button { + background: white; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample('활성화_폼_요소')}}</p> + +<h2 id="명세"><span>명세</span></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('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.active")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>링크 관련 의사 클래스: {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}.</li> +</ul> diff --git a/files/ko/web/css/_colon_checked/index.html b/files/ko/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..337f93d1cd --- /dev/null +++ b/files/ko/web/css/_colon_checked/index.html @@ -0,0 +1,193 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:checked' +--- +<div>{{CSSRef}}</div> + +<p><strong><code>:checked</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a> 선택자는 선택했거나 <code>on</code> 상태인 <strong>라디오</strong>(<code><a href="/ko/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>), <strong>체크박스</strong>(<code><a href="/ko/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>), <strong>옵션</strong>({{HTMLElement("option")}} 요소를 나타냅니다.</p> + +<pre class="brush: css no-line-numbers">/* Matches any checked/selected radio, checkbox, or option */ +:checked { + margin-left: 25px; + border: 1px solid blue; +} +</pre> + +<p>사용자가 요소를 체크했거나 선택한 경우 활성화되고, 체크나 선택을 해제하는 경우 비활성화됩니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 많은 경우 브라우저는 <code><option></code> 요소를 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>로 취급하므로, <code>:checked</code> 의사 클래스를 사용한 스타일을 적용할 수 있는 범위도 브라우저마다 다릅니다.</p> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <input type="radio" name="my-input" id="yes"> + <label for="yes">Yes</label> + + <input type="radio" name="my-input" id="no"> + <label for="no">No</label> +</div> + +<div> + <input type="checkbox" name="my-checkbox" id="opt-in"> + <label for="opt-in">Check me!</label> +</div> + +<select name="my-select" id="fruit"> + <option value="opt1">Apples</option> + <option value="opt2">Grapes</option> + <option value="opt3">Pears</option> +</select> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div, +select { + margin: 8px; +} + +/* Labels for checked inputs */ +input:checked + label { + color: red; +} + +/* Radio element, when checked */ +input[type="radio"]:checked { + box-shadow: 0 0 0 3px orange; +} + +/* Checkbox element, when checked */ +input[type="checkbox"]:checked { + box-shadow: 0 0 0 3px hotpink; +} + +/* Option elements, when selected */ +option:checked { + box-shadow: 0 0 0 3px lime; + color: red; +} +</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("기본_예제")}}</p> + +<h3 id="숨겨진_체크박스를_사용해_요소_켜고_끄기">숨겨진 체크박스를 사용해 요소 켜고 끄기</h3> + +<p>다음 예제 코드는 <code>:checked</code> 의사 클래스와 체크박스를 사용해, <a href="/ko/docs/Web/JavaScript">JavaScript</a> 없이도 사용자가 켜거나 끌 수 있는 콘텐츠를 구현합니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><input type="checkbox" id="expand-toggle" /> + +<table> + <thead> + <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr> + </thead> + <tbody> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + </tbody> +</table> + +<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* Hide the toggle checkbox */ +#expand-toggle { + display: none; +} + +/* Hide expandable content by default */ +.expandable { + visibility: collapse; + background: #ddd; +} + +/* Style the button */ +#expand-btn { + display: inline-block; + margin-top: 12px; + padding: 5px 11px; + background-color: #ff7; + border: 1px solid; + border-radius: 3px; +} + +/* Show hidden content when the checkbox is checked */ +#expand-toggle:checked ~ * .expandable { + visibility: visible; +} + +/* Style the button when the checkbox is checked */ +#expand-toggle:checked ~ #expand-btn { + background-color: #ccc; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("숨겨진_체크박스를_사용해_요소_켜고_끄기", "auto", 220)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('HTML WHATWG', '#selector-checked', ':checked') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Defines the semantic regarding HTML.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Defines the pseudo-class, but not the associated semantic</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.checked")}}</p> +</div> diff --git a/files/ko/web/css/_colon_default/index.html b/files/ko/web/css/_colon_default/index.html new file mode 100644 index 0000000000..06e0558495 --- /dev/null +++ b/files/ko/web/css/_colon_default/index.html @@ -0,0 +1,101 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:default' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:default</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 연관 요소 내에서의 기본값인 요소를 선택합니다.</p> + +<p>이 선택자는<a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default"> HTML Standard §4.16.3 Pseudo-classes</a>에 정의되어 있듯 {{htmlelement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, {{htmlelement("option")}} 요소를 아래와 같은 경우에 선택합니다.</p> + +<ul> + <li>옵션 요소의 기본값은 <code>selected</code> 특성을 가진 제일 첫 요소, 즉 DOM 순서 기준으로 제일 앞의 활성화 옵션입니다. <code>multiple</code> 특성의 {{htmlelement("select")}}는 둘 이상의 <code>selected</code> 옵션을 가질 수도 있으므로, 모든 옵션이 <code>:default</code>로 선택됩니다.</li> + <li><code><input type="checkbox"></code>와 <code><input type="radio"></code>는 <code>checked</code> 특성을 가지고 있으면 선택됩니다.</li> + <li>{{htmlelement("button")}}은 {{htmlelement("form")}} 요소의 <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission">기본 제출 버튼</a>, 즉 DOM 순서 기준으로 양식에 속하는 제일 첫 <code><button></code>이면 선택됩니다. (<code>image</code>와 <code>submit</code>처럼, 양식을 제출하는 다른 {{htmlelement("input")}} 유형에도 적용됩니다.)</li> +</ul> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><fieldset> + <legend>Favorite season</legend> + + <input type="radio" name="season" id="spring"> + <label for="spring">Spring</label> + + <input type="radio" name="season" id="summer" checked> + <label for="summer">Summer</label> + + <input type="radio" name="season" id="fall"> + <label for="fall">Fall</label> + + <input type="radio" name="season" id="winter"> + <label for="winter">Winter</label> +</fieldset> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">input:default { + box-shadow: 0 0 2px 1px coral; +} + +input:default + label { + color: coral; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', '#selector-default', ':default')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Defines associated HTML semantics and constraint validation.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.default")}}</p> +</div> diff --git a/files/ko/web/css/_colon_defined/index.html b/files/ko/web/css/_colon_defined/index.html new file mode 100644 index 0000000000..89487adbb9 --- /dev/null +++ b/files/ko/web/css/_colon_defined/index.html @@ -0,0 +1,118 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:defined' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:defined</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 정의된 요소를 선택합니다. 정의된 요소란 브라우저에 내장된 표준 요소와, 성공적으로 정의({{domxref("CustomElementRegistry.define()")}} 메서드 등)한 사용자 지정 요소를 의미합니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selects any defined element */ +:defined { + font-style: italic; +} + +/* Selects any instance of a specific custom element */ +simple-custom:defined { + display: block; +} +</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="정의되기_전까지_요소_숨기기">정의되기 전까지 요소 숨기기</h3> + +<p>다음 코드는 저희의 <a href="https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class">defined-pseudo-class</a> 데모에서 발췌한 것입니다. (<a href="https://mdn.github.io/web-components-examples/defined-pseudo-class/">동작 모습 보기</a>)</p> + +<p>이 데모에서는 아주 간단한 사용자 지정 요소를 정의합니다.</p> + +<pre class="brush: js notranslate">customElements.define('simple-custom', + class extends HTMLElement { + constructor() { + super(); + + let divElem = document.createElement('div'); + divElem.textContent = this.getAttribute('text'); + + let shadowRoot = this.attachShadow({mode: 'open'}) + .appendChild(divElem); + } +})</pre> + +<p>그 후, 위의 요소를 표준 <code><p></code>와 함께 문서에 넣습니다.</p> + +<pre class="brush: html notranslate"><simple-custom text="Custom element example text"></simple-custom> + +<p>Standard paragraph example text</p></pre> + +<p>CSS에는 다음의 스타일을 작성합니다.</p> + +<pre class="brush: css notranslate">// Give the two elements distinctive backgrounds +p { + background: yellow; +} + +simple-custom { + background: cyan; +} + +// Both the custom and the built-in element are given italic text +:defined { + font-style: italic; +}</pre> + +<p>그리고 아래의 두 규칙을 통해, 정의되지 않은 사용자 지정 요소는 숨기고, 정의가 성공적으로 된 경우에는 블록 레벨 요소로 표시합니다.</p> + +<pre class="brush: css notranslate">simple-custom:not(:defined) { + display: none; +} + +simple-custom:defined { + display: block; +}</pre> + +<p>위의 데모는 페이지에 불러올 때 꽤 시간이 걸릴 수 있는 복잡한 사용자 지정 요소 스타일링에 유용하게 쓸 수 있습니다. 로딩이 아직 진행 중일 때, 스타일을 입히지 않은는 못생긴 요소가 페이지에 노출되는 것을 막을 수 있으니까요.</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('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.defined")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/Web_Components">웹 컴포넌트</a></li> +</ul> diff --git a/files/ko/web/css/_colon_disabled/index.html b/files/ko/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..5a65d93de2 --- /dev/null +++ b/files/ko/web/css/_colon_disabled/index.html @@ -0,0 +1,129 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:disabled' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:disabled</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 모든 비활성 요소를 나타냅니다. 비활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 없는 요소를 말합니다. 반대 상태인 활성 요소도 존재합니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* 모든 비활성 <input> 선택 */ +input:disabled { + background: #ccc; +}</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 사용자가 청구 주소 입력 칸을 켜거나 끌 수 있는 기능을 <a href="/ko/docs/Web/JavaScript">JavaScript</a> {{event("change")}} 이벤트를 통해 구현한 기본적인 배송 양식입니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><form action="#"> + <fieldset id="shipping"> + <legend>배송지</legend> + <input type="text" placeholder="이름"> + <input type="text" placeholder="주소"> + <input type="text" placeholder="우편번호"> + </fieldset> + <br> + <fieldset id="billing"> + <legend>청구지</legend> + <label for="billing-checkbox">배송지와 동일:</label> + <input type="checkbox" id="billing-checkbox" checked> + <br> + <input type="text" placeholder="이름" disabled> + <input type="text" placeholder="주소" disabled> + <input type="text" placeholder="우편번호" disabled> + </fieldset> +</form> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">input[type="text"]:disabled { + background: #ccc; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">// 페이지 로딩이 끝날 때까지 기다림 +document.addEventListener('DOMContentLoaded', function () { + // `change` 이벤츠 수신기를 체크박스에 부착 + document.getElementById('billing-checkbox').onchange = toggleBilling; +}, false); + +function toggleBilling() { + // 청구지 텍스트 입력 칸을 모두 선택 + var billingItems = document.querySelectorAll('#billing input[type="text"]'); + + // 하나씩 토글 + for (var i = 0; i < billingItems.length; i++) { + billingItems[i].disabled = !billingItems[i].disabled; + } +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 300, 250)}}</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('HTML WHATWG', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Defines the semantics of HTML and forms.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Defines the pseudo-class, but not the associated semantics.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.disabled")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li> + <p>{{Cssxref(":enabled")}}</p> + </li> +</ul> diff --git a/files/ko/web/css/_colon_enabled/index.html b/files/ko/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..edd9c70c2f --- /dev/null +++ b/files/ko/web/css/_colon_enabled/index.html @@ -0,0 +1,100 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:enabled' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS </a><strong><code>:enabled</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 모든 활성 요소를 나타냅니다. 활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 있는 요소를 말합니다. 반대 상태인 비활성 요소도 존재합니다.</p> + +<pre class="brush: css no-line-numbers">/* 모든 활성 <input> 선택 */ +input:enabled { + color: blue; +}</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 모든 활성 텍스트 및 버튼 {{htmlElement("input")}}의 글자 색을 초록색으로 만들고, 비활성 상태는 회색으로 만듭니다. 이런 구분을 통해 사용자는 상호작용 가능한 요소를 쉽게 구별할 수 있습니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><form action="url_of_form"> + <label for="FirstField">First field (enabled):</label> + <input type="text" id="FirstField" value="Lorem"><br> + + <label for="SecondField">Second field (disabled):</label> + <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br> + + <input type="button" value="Submit"> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css;">input:enabled { + color: #2b2; +} + +input:disabled { + color: #aaa; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", 550, 95)}}</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('HTML WHATWG', '#selector-enabled', ':enabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Defines the semantics for HTML and forms.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Defines the pseudo-class, but not the associated semantics.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.enabled")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref(":disabled")}}</li> +</ul> diff --git a/files/ko/web/css/_colon_first-child/index.html b/files/ko/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..9d229f4dd5 --- /dev/null +++ b/files/ko/web/css/_colon_first-child/index.html @@ -0,0 +1,134 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first-child' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:first-child</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 형제 요소 중 제일 첫 요소를 나타냅니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selects any <p> that is the first element + among its siblings */ +p:first-child { + color: lime; +}</pre> + +<div class="note"> +<p><strong>참고</strong>: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div> + <p>This text is selected!</p> + <p>This text isn't selected.</p> +</div> + +<div> + <h2>This text isn't selected: it's not a `p`.</h2> + <p>This text isn't selected.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">p:first-child { + color: lime; + background-color: black; + padding: 5px; +} +</pre> + +<h4 id="결과">결과</h4> + +<p><span>{{EmbedLiveSample('기본_예제', 500, 200)}}</span></p> + +<h3 id="목록_스타일링">목록 스타일링</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><ul> + <li>Item 1</li> + <li>Item 2</li> + <li>Item 3 + <ul> + <li>Item 3.1</li> + <li>Item 3.2</li> + <li>Item 3.3</li> + </ul> + </li> +</ul></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">ul li { + color: blue; +} + +ul li:first-child { + color: red; + font-weight: bold; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample('목록_스타일링')}}</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('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Matching elements are not required to have a parent.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.first-child")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}</li> + <li>{{CSSxRef(":first-of-type")}}</li> + <li>{{CSSxRef(":last-child")}}</li> + <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li> +</ul> diff --git a/files/ko/web/css/_colon_first-of-type/index.html b/files/ko/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..d1ac0c65fc --- /dev/null +++ b/files/ko/web/css/_colon_first-of-type/index.html @@ -0,0 +1,115 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:first-of-type</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타냅니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selects any <p> that is the first element + of its type among its siblings */ +p:first-of-type { + color: red; +}</pre> + +<div class="note"> +<p><strong>참고</strong>: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="첫_문단_스타일링">첫 문단 스타일링</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><h2>Heading</h2> +<p>Paragraph 1</p> +<p>Paragraph 2</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">p:first-of-type { + color: red; + font-style: italic; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('첫_문단_스타일링')}}</p> + +<h3 id="중첩_요소">중첩 요소</h3> + +<p>아래 코드는 중첩 요소를 선택하는 방법을 보입니다. 기본 선택자를 지정하지 않은 경우 <a href="/ko/docs/Web/CSS/Universal_selectors">전체 선택자</a>(<code>*</code>)가 암시된다는 점도 볼 수 있습니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><article> + <div>This `div` is first!</div> + <div>This <span>nested `span` is first</span>!</div> + <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> + <div>This <span>nested `span` gets styled</span>!</div> + <b>This `b` qualifies!</b> + <div>This is the final `div`.</div> +</article> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">article :first-of-type { + background-color: pink; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample('중첩_요소', 500)}}</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('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Matching elements are not required to have a parent.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.first-of-type")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref(":first-child")}}, {{Cssxref(":last-of-type")}}, {{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/ko/web/css/_colon_first/index.html b/files/ko/web/css/_colon_first/index.html new file mode 100644 index 0000000000..2058627f4b --- /dev/null +++ b/files/ko/web/css/_colon_first/index.html @@ -0,0 +1,97 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:first</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 {{cssxref("@page")}} <a href="/ko/docs/Web/CSS/At-rule">@-규칙</a>과 함께 사용되며, 출력 시의 첫 페이지를 나타냅니다.</p> + +<pre class="brush: css no-line-numbers">/* Selects the first page when printing */ +@page :first { + margin-left: 50%; + margin-top: 50%; +}</pre> + +<div class="note"><strong>참고:</strong> :first 의사 클래스 안에서는 CSS 속성의 사용이 제한됩니다. 바깥 여백, {{cssxref("orphans")}}, {{cssxref("widows")}}와 페이지 넘김만 바꿀 수 있으며, 여백 지정 시 <a href="/ko/docs/Web/CSS/length#절대길이_단위">절대길이 단위</a>만 사용할 수 있습니다. 다른 모든 속성은 무시합니다.</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>First Page.</p> +<p>Second Page.</p> +<button>출력!</button> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@page :first { + margin-left: 50%; + margin-top: 50%; +} + +p { + page-break-after: always; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.querySelector("button").addEventListener('click', () => { + window.print(); +}); +</pre> + +<h3 id="결과">결과</h3> + +<p>"출력!" 버튼을 눌러 페이지 출력 화면을 확인해보세요. 첫 번째 페이지의 콘텐츠는 중앙 어딘가에 위치하고, 두 번째 페이지의 콘텐츠는 기본 위치에 존재해야 합니다.</p> + +<p>{{ EmbedLiveSample('예제', '80%', '150px') }}</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('CSS3 Paged Media', '#left-right-first', ':first')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.first")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref("@page")}}</li> + <li>페이지 관련 다른 의사 클래스: {{Cssxref(":left")}}, {{Cssxref(":right")}}</li> +</ul> diff --git a/files/ko/web/css/_colon_focus-within/index.html b/files/ko/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..7a25dc5b94 --- /dev/null +++ b/files/ko/web/css/_colon_focus-within/index.html @@ -0,0 +1,96 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:focus-within' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:focus-within</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 {{CSSxRef(":focus")}} 의사 클래스와 일치하거나, 그 자손 중 하나가 <code>:focus</code>와 일치하는 요소를 나타냅니다. (<a href="/ko/docs/Web/Web_Components/Shadow_DOM">섀도 트리</a> 내부도 포함)</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selects a <div> when one of its descendants is focused */ +div:focus-within { + background: cyan; +}</pre> + +<p>흔히 쓸 수 있는 예시로서, {{HTMLElement("form")}}의 {{HTMLElement("input")}} 필드 중 하나가 포커스된 경우 전체 <code><form></code>을 강조해야 할 때 유용하게 사용할 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>다음 예제에서는 두 텍스트 입력 칸 중 하나라도 포커스를 받은 경우 양식을 강조합니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>아래 양식의 값을 채워주세요.</p> + +<form> + <label for="given_name">이름:</label> + <input id="given_name" type="text"> + <br> + <label for="family_name">성:</label> + <input id="family_name" type="text"> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css highlight[7] notranslate">form { + border: 1px solid; + color: gray; + padding: 4px; +} + +form:focus-within { + background: #ff8; + color: black; +} + +input { + margin: 4px; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", 500, 150)}}</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("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.focus-within")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{CSSxRef(":focus")}}</li> + <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> +</ul> diff --git a/files/ko/web/css/_colon_focus/index.html b/files/ko/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..3a3e853e44 --- /dev/null +++ b/files/ko/web/css/_colon_focus/index.html @@ -0,0 +1,116 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:focus' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:focus</code></strong> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">의사 클래스</a>는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 <kbd>Tab</kbd> 키로 선택했을 때 발동합니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selects any <input> when focused */ +input:focus { + color: red; +}</pre> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>:focus</code>는 포커스를 받은 요소 자체에만 해당합니다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 {{CSSxRef(":focus-within")}}을 사용하세요.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html no-line-numbers notranslate"><input class="red-input" value="저는 포커스를 받으면 빨갛게 됩니다."><br> +<input class="blue-input" value="저는 포커스를 받으면 파랗게 됩니다."></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css highlight[1, 6] notranslate">.red-input:focus { + background: yellow; + color: red; +} + +.blue-input:focus { + background: yellow; + color: blue; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>낮은 시력을 가진 사용자도 시각적 포커스 지시자를 볼 수 있어야 합니다. 이는 또한 맑은 날의 외부처럼 밝은 공간에서의 스크린 사용자처럼 다른 사람에게도 도움이 될 수 있습니다. <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a>는 시각적 포커스 지시자의 대비를 최소한 3:1로 요구하고 있습니다.</p> + +<ul> + <li>Accessible Visual Focus Indicators: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li> +</ul> + +<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3> + +<p>절대 포커스의 기본 외곽선(시각적 포커스 지시자)을 대체 외곽선 없이 제거하지 마세요. 대체 외곽선은 <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> 기준을 통과해야 합니다.</p> + +<ul> + <li>Quick Tip: <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></li> +</ul> + +<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("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Defines HTML-specific semantics.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.focus")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":focus-within")}}</li> +</ul> diff --git a/files/ko/web/css/_colon_fullscreen/index.html b/files/ko/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..70e0c0308c --- /dev/null +++ b/files/ko/web/css/_colon_fullscreen/index.html @@ -0,0 +1,94 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Fullscreen API + - Pseudo-class + - Reference + - Selector + - 전체화면 +translation_of: 'Web/CSS/:fullscreen' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:fullscreen</code></strong> <a href="/en-US/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 전체 화면 모드에 진입한 모든 요소와 일치합니다. 다수의 요소가 전체 화면 중이라면 그 요소 모두 선택합니다.</span></p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="사용_참고">사용 참고</h2> + +<p><code>:fullscreen</code> 의사 클래스는 요소가 전체 화면과 일반적인 모습을 넘나들 때마다 크기, 스타일, 레이아웃 등을 조정하도록 스타일시트를 설정할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>이번 예제에서는 문서의 전체 화면 여부에 따라 버튼의 색을 변경합니다. 스타일 변경은 JavaScript 없이 CSS에서만 처리합니다.</p> + +<h3 id="HTML">HTML</h3> + +<p>페이지의 HTML 구조는 다음과 같습니다.</p> + +<pre class="brush: html notranslate"><h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1> + +<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically + change the style of a button used to toggle full-screen mode on and off, + entirely using CSS.</p> + +<button id="fs-toggle">Toggle Fullscreen</button></pre> + +<p>ID가 <code>"fs-toggle"</code>인 {{htmlelement("button")}}은 문서가 전체 화면이면 흐릿한 빨강, 그렇지 않으면 흐릿한 초록으로 색이 바뀝니다.</p> + +<h3 id="CSS">CSS</h3> + +<p>스타일 마법은 CSS에서 일어납니다. 두 가지 규칙을 사용할 것으로, 첫 번째는 전체 화면이 아닐 때 전체 화면 버튼의 배경색을 설정합니다. 중요한 것은 <code>:not(:fullscreen)</code>으로, <code>:fullscreen</code> 의사 클래스와 일치하지 않는 요소를 선택합니다.</p> + +<pre class="brush: css notranslate">#fs-toggle:not(:fullscreen) { + background-color: #afa; +} +</pre> + +<p>문서가 전체 화면에 들어간 경우, 대신 아래의 CSS를 적용하여 버튼 배경을 흐릿한 빨강으로 바꿉니다.</p> + +<pre class="brush: css notranslate">#fs-toggle:fullscreen { + background-color: #faa; +}</pre> + +<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('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.fullscreen")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Fullscreen_API">Fullscreen API </a></li> + <li><a href="/ko/docs/Web/API/Fullscreen_API/Guide">Fullscreen API 안내서</a></li> + <li>{{cssxref(":not")}}</li> + <li>{{cssxref("::backdrop")}}</li> + <li>DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreenElement") }}</li> + <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}} 특성</li> +</ul> diff --git a/files/ko/web/css/_colon_hover/index.html b/files/ko/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..27a26aefe2 --- /dev/null +++ b/files/ko/web/css/_colon_hover/index.html @@ -0,0 +1,97 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:hover' +--- +<div>{{ CSSRef }}</div> + +<p><strong><code>:hover</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">의사 클래스</a>는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.</p> + +<pre class="brush: css no-line-numbers">/* "호버링" 중인 <a> 요소 선택 */ +a:hover { + color: orange; +}</pre> + +<p><code>:hover</code> 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":active")}})가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(<code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>)를 따라, <code>:hover</code> 규칙을 <code>:link</code>와 <code>:visited</code> 뒤, <code>:active</code> 앞에 배치하세요.</p> + +<div class="note"><strong>참고</strong>: <code>:hover</code> 의사 클래스는 터치스크린에서 문제가 많습니다. 브라우저에 따라서 :hover를 절대 활성화하지 않을 수도 있지만, 요소를 터치한 직후에만, 아니면 터치한 이후 다른 요소를 다시 터치하기 전까지 계속 활성화할 수도 있습니다. 웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 합니다.</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#">이 링크를 가리켜보세요.</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + background-color: powderblue; + transition: background-color .5s; +} + +a:hover { + background-color: gold; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Comment</th> + <th scope="col">Feedback</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td> + <td> </td> + <td><a href="https://github.com/whatwg/html/issues">WHATWG HTML GitHub issues</a></td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td> + <td>Allows <code>:hover</code> to be applied to any pseudo-element.</td> + <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td> + <td>Initial definition.</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.hover")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium 버그 #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium 버그 #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li> +</ul> diff --git a/files/ko/web/css/_colon_link/index.html b/files/ko/web/css/_colon_link/index.html new file mode 100644 index 0000000000..f17f896eab --- /dev/null +++ b/files/ko/web/css/_colon_link/index.html @@ -0,0 +1,105 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:link' +--- +<div>{{ CSSRef }}</div> + +<p><span class="seoSummary"><strong><code>:link</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 아직 방문하지 않은 요소를 나타냅니다.</span> <code>href</code> 속성을 가진 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} 중 방문하지 않은 모든 요소를 선택합니다.</p> + +<pre class="brush: css no-line-numbers">/* 아직 방문하지 않은 <a> 요소를 선택 */ +a:link { + color: red; +}</pre> + +<p><code>:link</code> 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":active")}}, {{cssxref(":hover")}}, {{cssxref(":visited")}})가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(<code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>)를 따라, <code>:active</code> 규칙을 다른 모든 링크 규칙들보다 앞에 배치하세요.</p> + +<div class="note"> +<p><strong>참고:</strong> 방문 여부에 상관하지 않고 요소를 선택하려면 {{cssxref(":any-link")}}를 사용하세요.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>대부분의 브라우저는 방문한 링크에 기본값으로 특별한 {{cssxref("color")}} 값을 지정합니다. 따라서 다음 예제의 링크를 방문한 적이 없을 때만 글자 색이 적용된 모습을 볼 수 있고, 방문한 적이 있으면 브라우저 기록을 지워서 확인할 수 있습니다. 그러나 방문한 링크의 배경색은 보통 브라우저가 지정하지 않으므로 {{cssxref("background-color")}}는 계속 확인할 수 있습니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#ordinary-target">평범한 링크입니다.</a><br> +<a href="">이 링크는 이미 방문했습니다.</a><br> +<a>플레이스홀더 링크 (스타일 적용 안됨)</a> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a:link { + background-color: gold; + color: green; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Lift the restriction to only apply it for {{ HTMLElement("a") }} element.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.link")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>링크 관련 의사 클래스: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li> +</ul> diff --git a/files/ko/web/css/_colon_not/index.html b/files/ko/web/css/_colon_not/index.html new file mode 100644 index 0000000000..f471cce411 --- /dev/null +++ b/files/ko/web/css/_colon_not/index.html @@ -0,0 +1,71 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - Layout + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:not' +--- +<div>{{ CSSRef() }}</div> + +<p>부정(<strong>negation</strong>) <a href="/ko/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">CSS 가상 클래스</a> <code>:not(X)</code>는 인수로 간단한 선택자(selector) <var>X</var>를 취하는 기능 표기법입니다. 인수로 표시되지 않은 요소와 일치합니다. <var>X</var>는 다른 부정 선택자를 포함해서는 안 됩니다.</p> + +<div class="note"><strong>주의:</strong> + +<ul> + <li>쓸모없는 선택자는 이 가상 클래스를 사용하여 작성될 수 있습니다. 예를 들어, <code>:not(*)</code>은 임의 요소가 아닌 모든 요소와 일치합니다. 그래서 규칙이 결코 적용되지 않습니다.</li> + <li>다른 규칙을 다시 작성할 수 있습니다. 가령 <code>foo:not(bar)</code>는 간단한 <code>foo</code>와 같은 요소와 일치합니다. 그럼에도 불구하고 첫 요소의 <a href="/ko/docs/Web/CSS/Specificity" title="Specificity">명시도</a>가 더 높습니다.</li> + <li><code>:not(foo){}</code>는 <strong>{{HTMLElement("html")}} 및 {{HTMLElement("body")}} 포함</strong> 뭐든지 <code>foo</code>가 아닌 것과 일치합니다.</li> + <li>이 선택자는 한 요소에만 적용됩니다. 따라서 모든 조상(ancestor)을 제외하는 데 사용할 수 없습니다. 예를 들어, <code>body :not(table) a</code>는 {{HTMLElement("tr")}} 요소가 선택자의 <code>:not()</code> 부분과 일치하기 때문에, 여전히 표 내부 링크에 적용됩니다.</li> +</ul> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="syntaxbox">:not(selector) { <em>style properties</em> }</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: css">p:not(.classy) { color: red; } +body :not(p) { color: green; }</pre> + +<p>위의 CSS 및 아래 HTML이 주어진다면...</p> + +<pre class="brush: html"><p>Some text.</p> +<p class="classy">Some other text.</p> +<span>One more text<span> +</pre> + +<p>이 같은 출력을 얻습니다:</p> + +<p>{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/:not') }}</p> + +<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('CSS4 Selectors', '#negation', ':not()') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>인수로 일부 비 간단 선택자를 허용토록 확장.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("css.selectors.not")}}</p> diff --git a/files/ko/web/css/_colon_nth-child/index.html b/files/ko/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..2368a66641 --- /dev/null +++ b/files/ko/web/css/_colon_nth-child/index.html @@ -0,0 +1,196 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-child' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <strong><code>:nth-child()</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 형제 사이에서의 순서에 따라 요소를 선택합니다.</p> + +<pre class="brush: css no-line-numbers">/* 목록의 두 번째 <li> 선택 */ +li:nth-child(2) { + color: lime; +} + +/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */ +:nth-child(4n) { + color: lime; +} +</pre> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<p><code>nth-child</code> 의사 클래스는 형제의 목록에서, 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정합니다. 인덱스는 1부터 시작합니다.</p> + +<h3 id="키워드_값">키워드 값</h3> + +<dl> + <dt><code>odd</code></dt> + <dd>형제 요소에서 홀수번째(1, 3, 5, ...)인 요소를 나타냅니다.</dd> + <dt><code>even</code></dt> + <dd>형제 요소에서 짝수번째(2, 4, 6, ...)인 요소를 나타냅니다.</dd> +</dl> + +<h3 id="함수형_표기법">함수형 표기법</h3> + +<dl> + <dt><code><An+B></code></dt> + <dd>사용자 지정 패턴을 만족한 인덱스를 가지는 요소를 나타냅니다. An+B의 형태로 나타내며,<br> + <code>A</code>는 정수 인덱스 증감량,<br> + <code>B</code>는 정수 오프셋,<br> + <code>n</code>은 0부터 시작하는 모든 양의 정수를 나타냅니다.</dd> + <dd>목록의 <em>An+B</em>번째 요소라고 해석할 수 있습니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="Example_selectors" name="Example_selectors">선택자</h3> + +<dl> + <dt><code>tr:nth-child(odd)</code> 또는 <code>tr:nth-child(2n+1)</code></dt> + <dd>HTML 표의 홀수번째 행을 나타냅니다.</dd> + <dt><code>tr:nth-child(even)</code> 또는 <code>tr:nth-child(2n)</code></dt> + <dd>HTML 표의 짝수번째 행을 나타냅니다.</dd> + <dt><code>:nth-child(7)</code></dt> + <dd>임의의 7번째 요소를 나타냅니다.</dd> + <dt><code>:nth-child(5n)</code></dt> + <dd><strong>5</strong> [=5×1], <strong>10</strong> [=5×2], <strong>15</strong> [=5×3], <strong>...</strong> 번째의 요소를 나타냅니다. 패턴 공식을 만족하는 첫 번째 값은 <strong>0</strong> [=5x0]으로서 아무 요소도 선택하지 않는데, 요소의 인덱스는 1부터 시작하지만 <code>n</code>은 0부터 증가하기 때문입니다. 다소 의아할 수 있으나, 바로 아래 예제처럼 공식의 B 부분이 >0인 경우 보다 납득하기 쉬워집니다.</dd> + <dt><code>:nth-child(n+7)</code></dt> + <dd>7번째와 그 이후의 모든 요소, 즉 <strong>7</strong> [=0+7], <strong>8</strong> [=1+7], <strong>9</strong> [=2+7], <strong>...</strong> 를 나타냅니다.</dd> + <dt><code>:nth-child(3n+4)</code></dt> + <dd><strong>4</strong> [=(3×0)+4], <strong>7</strong> [=(3×1)+4], <strong>10</strong> [=(3×2)+4], <strong>13</strong> [=(3×3)+4], <strong>...</strong> 번째의 요소를 나타냅니다.</dd> + <dt><code>:nth-child(-n+3)</code></dt> + <dd>앞에서 세 개의 요소를 나타냅니다. [=-0+3, -1+3, -2+3]</dd> + <dt><code>p:nth-child(n)</code></dt> + <dd>형제 그룹 내의 모든 <code><p></code> 요소를 나타냅니다. 단순한 <code>p</code> 선택자와 동일하지만 더 높은 <a href="/ko/docs/Web/CSS/Specificity">명시도</a>를 가집니다.</dd> + <dt><code>p:nth-child(1)</code> 또는 <code>p:nth-child(0n+1)</code></dt> + <dd>형제 그룹 내의 모든 첫 번째 <code><p></code> 요소를 나타냅니다. {{cssxref(":first-child")}} 선택자와 동일하며 같은 <a href="/ko/docs/Web/CSS/Specificity">명시도</a>를 가집니다.</dd> + <dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt> + <dd>형제 그룹 내에서 8번째부터 15번째 까지의 <code><p></code> 요소를 나타냅니다.</dd> +</dl> + +<h3 id="자세한_예제">자세한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><h3><code>span:nth-child(2n+1)</code>, WITHOUT an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 3, 5, and 7 are selected.</p> +<div class="first"> + <span>Span 1!</span> + <span>Span 2</span> + <span>Span 3!</span> + <span>Span 4</span> + <span>Span 5!</span> + <span>Span 6</span> + <span>Span 7!</span> +</div> + +<br> + +<h3><code>span:nth-child(2n+1)</code>, WITH an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 5, and 7 are selected.<br> + 3 is used in the counting because it is a child, but it isn't + selected because it isn't a <code>&lt;span&gt;</code>.</p> +<div class="second"> + <span>Span!</span> + <span>Span</span> + <em>This is an `em`.</em> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> +</div> + +<br> + +<h3><code>span:nth-of-type(2n+1)</code>, WITH an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 4, 6, and 8 are selected.<br> + 3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>, + not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects + children of that type. The <code>&lt;em&gt;</code> is completely skipped + over and ignored.</p> +<div class="third"> + <span>Span!</span> + <span>Span</span> + <em>This is an `em`.</em> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +span, +div em { + padding: 5px; + border: 1px solid green; + display: inline-block; + margin-bottom: 3px; +} + +.first span:nth-child(2n+1), +.second span:nth-child(2n+1), +.third span:nth-of-type(2n+1) { + background-color: lime; +}</pre> + +<h4 id="결과">결과</h4> + +<div>{{EmbedLiveSample('자세한_예제', 550, 550)}}</div> + +<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('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Adds <code>of <selector></code> syntax and specifies that matching elements are not required to have a parent.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.nth-child")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li> +</ul> diff --git a/files/ko/web/css/_colon_root/index.html b/files/ko/web/css/_colon_root/index.html new file mode 100644 index 0000000000..5fb9ed0fd6 --- /dev/null +++ b/files/ko/web/css/_colon_root/index.html @@ -0,0 +1,78 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:root' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:root</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 {{htmlelement("html")}} 요소이므로, <code>:root</code>의 <a href="/ko/docs/Web/CSS/Specificity">명시도</a>가 더 낮다는 점을 제외하면 <code>html</code> 선택자와 똑같습니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* 문서의 루트 요소 선택 + HTML에서는 <html> */ +:root { + background: yellow; +}</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="전역_CSS_변수_선언하기">전역 CSS 변수 선언하기</h3> + +<p><code>:root</code>는 전역 <a href="/ko/docs/Web/CSS/Using_CSS_custom_properties">CSS 변수</a> 선언에 유용하게 사용할 수 있습니다.</p> + +<pre class="brush: css notranslate">:root { + --main-color: hotpink; + --pane-padding: 5px 42px; +} +</pre> + +<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('CSS4 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.root")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{htmlelement("html")}}</li> + <li>{{domxref("Document.rootElement")}}</li> + <li>{{domxref("Node.getRootNode()")}}</li> + <li>{{domxref("Node.rootNode")}}</li> + <li>{{domxref("Element.shadowRoot")}}</li> + <li>{{domxref("ShadowRoot")}}</li> +</ul> diff --git a/files/ko/web/css/_colon_visited/index.html b/files/ko/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..1c1f962b37 --- /dev/null +++ b/files/ko/web/css/_colon_visited/index.html @@ -0,0 +1,121 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:visited' +--- +<div>{{ CSSRef }}</div> + +<p><strong><code>:visited</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">의사 클래스</a>는 사용자가 방문한 적이 있는 링크를 나타냅니다. <code>:visited</code>가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.</p> + +<pre class="brush: css no-line-numbers">/* 방문한 적이 있는 <a> 선택 */ +a:visited { + color: green; +} +</pre> + +<p><code>:visited</code> 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":active")}})가 덮어씁니다. 링크를 적절히 디자인하려면 <em>LVHA-순서(</em><code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>)를 따라, <code>:visited</code> 규칙을 <code>:link</code> 뒤, <code>:hover</code>와 <code>:active</code> 앞에 배치하세요.</p> + +<h2 id="스타일_제한">스타일 제한</h2> + +<p>브라우저는 개인정보 보호를 위해 <code>:visited</code>에서 사용할 수 있는 스타일을 엄격히 제한하고 있습니다.</p> + +<ul> + <li>사용 가능한 CSS 속성은 {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("outline-color") }}입니다.</li> + <li>사용 가능한 SVG 속성은 {{SVGAttr("fill")}}과{{SVGAttr("stroke")}}입니다.</li> + <li>허용 가능한 속성의 알파 채널 값은 무시하고, 대신 <code>:visited</code>가 아닐 때의 알파 채널을 사용합니다. 단, 그 값이 0일 땐 <code>:visited</code>의 스타일을 모두 무시합니다.</li> + <li>사용자 입장에서는 방문한 링크의 색이 바뀐 것처럼 보일 때도, {{domxref("window.getComputedStyle()")}} 메서드는 거짓으로라도 항상 <code>:visited</code>가 아닐 때의 스타일을 반환합니다.</li> +</ul> + +<div class="note"> +<p><strong>참고:</strong> 스타일 제한에 관한 더 많은 정보와 이유에 대해서는 <a href="/ko/docs/Web/CSS/Privacy_and_the_:visited_selector">개인정보와 :visited 선택자</a> 문서를 참고하세요.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>기본적으로 색이 없거나 투명한 속성은 <code>:visited</code>로 수정할 수 없습니다. <code>:visited</code>가 수정 가능한 속성 중 브라우저가 기본값을 지정하는건 보통 <code>color</code>와 <code>column-rule-color</code> 뿐입니다. 따라서 다른 속성을 수정하고 싶다면 기본값을 직접 지정해야 합니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#test-visited-link">링크를 아직 방문하지 않으셨나요?</a><br> +<a href="">이미 방문했습니다.</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + /* 특정 속성에 투명하지 않은 기본값을 지정해 + :visited 상태로 바꿀 수 있도록 설정 */ + background-color: white; + border: 1px solid white; +} + +a:visited { + background-color: yellow; + border-color: hotpink; + color: hotpink; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Lifts the restriction to only apply <code>:visited</code> to the {{ HTMLElement("a") }} element. Lets browsers restrict its behavior for privacy reasons.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.visited")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Privacy_and_the_:visited_selector">개인정보와 :visited 선택자</a></li> + <li>링크 관련 의사 클래스: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}}</li> +</ul> diff --git a/files/ko/web/css/_doublecolon_after/index.html b/files/ko/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..30f44876f7 --- /dev/null +++ b/files/ko/web/css/_doublecolon_after/index.html @@ -0,0 +1,179 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::after' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">CSS에서, <strong><code>::after</code></strong>는 선택한 요소의 맨 마지막 자식으로 <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 하나 생성합니다. 보통 {{cssxref("content")}} 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.</span> 기본값은 인라인입니다.</p> + +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* 링크 뒤에 화살표 추가 */</span> +<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span> + <span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span> +<span class="punctuation token">}</span></code></pre> + +<div class="note"> +<p><strong>참고:</strong> <code>::before</code>와 <code>::after</code>로 생성한 의사 요소는 <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">원본 요소의 서식 박스에 포함되므로</a>,<em> </em>{{HTMLElement("img")}}나 {{HTMLElement("br")}} 등 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>에 적용할 수 없습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<div class="note"> +<p><strong>참고:</strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>와 <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 구분하기 위해 CSS3부터<code>::after</code> 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 <code>:after</code>도 허용합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_사용법">간단한 사용법</h3> + +<p>평범한 문단과 흥미진진한 문단을 위해 클래스 두 개를 만들고, 문단 마지막에 의사 요소를 추가해보겠습니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p class="boring-text">적당히 평범하고 심심한 글입니다.</p> +<p>지루하지도 흥미진진하지도 않은 글입니다.</p> +<p class="exciting-text">MDN 기여는 쉽고 재밌습니다.</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.exciting-text::after { + content: " <- 흥미진진!"; + color: green; +} + +.boring-text::after { + content: " <- 먼지풀풀"; + color: red; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('간단한_사용법', 500, 150)}}</p> + +<h3 id="장식_예제">장식 예제</h3> + +<p>{{cssxref("content")}} 속성을 활용해 자유롭게 텍스트나 이미지를 추가할 수 있습니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><span class="ribbon">마지막의 주황색 상자를 바라보세요.</span></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::after { + content: "멋진 주황색 상자입니다."; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{ EmbedLiveSample('장식_예제', 550, 40) }}</p> + +<h3 id="툴팁">툴팁</h3> + +<p>다음 예제는 <code>::after</code>와 함께 CSS {{cssxref("attr", "attr()")}} 표현식, <code>data-descr</code> <a href="/ko/docs/Web/HTML/Global_attributes/data-*">사용자 설정 데이터 속성</a>을 사용해 툴팁을 구현합니다. JavaScript 없이요!</p> + +<p><code>tabindex="0"</code>을 추가해 각 <code>span</code>에 포커스가 갈 수 있도록 지정한 후, CSS <code>:focus</code> 선택자를 추가하여 키보드 사용자도 지원할 수 있습니다. 예제를 통해 ::before와 ::after가 얼마나 유연한지 확인할 수 있지만, 가장 접근성이 뛰어난 구현을 위해서라면 <a href="/ko/docs/Web/HTML/Element/details">요약과 세부 요소</a>처럼 의미를 담은 요소를 활용하는 편이 좋습니다.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p>이 예제는 + <span tabindex="0" data-descr="단어와 문장 부호의 집합">텍스트</span>와 함께 약간의 + <span tabindex="0" data-descr="호버 시 보여지는 작은 팝업">툴팁</span>을 포함합니다. +</p> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">span[data-descr] { + position: relative; + text-decoration: underline; + color: #00F; + cursor: help; +} + +span[data-descr]:hover::after, +span[data-descr]:focus::after { + content: attr(data-descr); + position: absolute; + left: 0; + top: 24px; + min-width: 200px; + border: 1px #aaaaaa solid; + border-radius: 10px; + background-color: #ffffcc; + padding: 12px; + color: #000000; + font-size: 14px; + z-index: 1; +}</pre> + +<h4 id="결과_3">결과</h4> + +<p>{{EmbedLiveSample('툴팁', 450, 120)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td> + <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> + <td>No significant changes to the previous specification.</td> + </tr> + <tr> + <td>{{ Specname("CSS3 Transitions", "#animatable-properties", "") }}</td> + <td>{{ Spec2("CSS3 Transitions")}}</td> + <td>Allows transitions on properties defined on pseudo-elements.</td> + </tr> + <tr> + <td>{{ Specname("CSS3 Animations", "", "") }}</td> + <td>{{ Spec2("CSS3 Animations")}}</td> + <td>Allows animations on properties defined on pseudo-elements.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#gen-content', '::after') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Introduces the two-colon syntax.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::after') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition, using the one-colon syntax</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.after")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{CSSxRef("::before")}}</li> + <li>{{CSSxRef("content")}}</li> +</ul> diff --git a/files/ko/web/css/_doublecolon_before/index.html b/files/ko/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..211107af88 --- /dev/null +++ b/files/ko/web/css/_doublecolon_before/index.html @@ -0,0 +1,237 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::before' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">CSS에서, <strong><code>::before</code></strong>는 선택한 요소의 첫 자식으로 <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 하나 생성합니다. 보통 {{cssxref("content")}} 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.</span> 기본값은 인라인입니다.</p> + +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* 링크 앞에 하트 추가 */</span> +<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span> + <span class="property token">content: "</span></code>♥<code class="language-css"><span class="property token">";</span> +<span class="punctuation token">}</span></code></pre> + +<div class="note"> +<p><strong>참고:</strong> <code>::before</code>와 <code>::after</code>로 생성한 의사 요소는 <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">원본 요소의 서식 박스에 포함되므로</a>,<em> </em>{{HTMLElement("img")}}나 {{HTMLElement("br")}} 등 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>에 적용할 수 없습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<div class="note"> +<p><strong>참고:</strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>와 <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 구분하기 위해 CSS3부터<code>::before</code> 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 <code>:before</code>도 허용합니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="인용_표시_추가">인용 표시 추가</h3> + +<p>One simple example of using <code>::before</code> pseudo-elements is to provide quotation marks. Here we use both <code>::before</code> and <code>{{Cssxref("::after")}}</code> to insert quotation characters.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><q>Some quotes,</q> he said, <q>are better than none.</q></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css">q::before { + content: "«"; + color: blue; +} + +q::after { + content: "»"; + color: red; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('인용_표시_추가', '500', '50', '')}}</p> + +<h3 id="장식_예제">장식 예제</h3> + +<p>We can style text or images in the {{cssxref("content")}} property almost any way we want.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><span class="ribbon">Notice where the orange box is.</span></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::before { + content: "Look at this orange box."; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample('장식_예제', 450, 60)}}</p> + +<h3 id="할_일_목록">할 일 목록</h3> + +<p>In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><ul> + <li>Buy milk</li> + <li>Take the dog for a walk</li> + <li>Exercise</li> + <li>Write code</li> + <li>Play music</li> + <li>Relax</li> +</ul> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">li { + list-style-type: none; + position: relative; + margin: 2px; + padding: 0.5em 0.5em 0.5em 2em; + background: lightgrey; + font-family: sans-serif; +} + +li.done { + background: #CCFF99; +} + +li.done::before { + content: ''; + position: absolute; + border-color: #009933; + border-style: solid; + border-width: 0 0.3em 0.25em 0; + height: 1em; + top: 1.3em; + left: 0.6em; + margin-top: -1em; + transform: rotate(45deg); + width: 0.5em; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var list = document.querySelector('ul'); +list.addEventListener('click', function(ev) { + if (ev.target.tagName === 'LI') { + ev.target.classList.toggle('done'); + } +}, false); +</pre> + +<p>Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the <code>::before</code> that has been styled in CSS. Go ahead and get some stuff done.</p> + +<h4 id="Result_3">Result</h4> + +<p>{{EmbedLiveSample('할_일_목록', 400, 300)}}</p> + +<h3 id="특수문자">특수문자</h3> + +<p>As this is CSS; not HTML, you can <strong>not </strong>use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicodeescape sequence, consistingof a backslash followed by the hexadecimal unicode value.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><ol> + <li>Crack Eggs into bowl</li> + <li>Add Milk</li> + <li>Add Flour</li> + <li aria-current='step'>Mix thoroughly into a smooth batter</li> + <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li> + <li>Fry until the top of the pancake loses its gloss</li> + <li>Flip it over and fry for a couple more minutes</li> + <li>serve with your favorite topping</li> +</ol> +</pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css"><code class="language-css"> +li { + padding:0.5em; +} + +li[aria-current='step'] { + font-weight:bold; +} + +li[aria-current='step']::after { + content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/ + display: inline; +} +</code> +</pre> + +<h4 id="Result_4">Result</h4> + +<p>{{EmbedLiveSample('특수문자', 400, 200)}}</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('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>No significant changes to the previous specification.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Allows transitions on properties defined on pseudo-elements.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Allows animations on properties defined on pseudo-elements.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Introduces the two-colon syntax.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition, using the one-colon syntax</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.selectors.before")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref("::after")}}</li> + <li>{{Cssxref("content")}}</li> +</ul> diff --git a/files/ko/web/css/_doublecolon_placeholder/index.html b/files/ko/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..0a6c4a093f --- /dev/null +++ b/files/ko/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,147 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +translation_of: 'Web/CSS/::placeholder' +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>::placeholder</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> represents the <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">placeholder text</a> in an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} element.</p> + +<pre class="brush: css no-line-numbers notranslate">::placeholder { + color: blue; + font-size: 1.5em; +}</pre> + +<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p> + +<div class="note"> +<p><strong>Note:</strong> In most browsers, the appearance of placeholder text is a translucent or light gray color by default.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<h3 id="Color_contrast">Color contrast</h3> + +<h4 id="Contrast_Ratio">Contrast Ratio</h4> + +<p>Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.</p> + +<p>It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.</p> + +<p>Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h4 id="Usability">Usability</h4> + +<p>Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an {{htmlelement("input")}} element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.</p> + +<p>An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> to programmatically associate the {{HTMLElement("input")}} with its hint.</p> + +<p>With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use <code>aria-describedby</code> to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.</p> + +<pre class="brush:html line-numbers language-html notranslate"><label for="user-email">Your email address</label> +<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span> +<input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> +</pre> + +<ul> + <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> +</ul> + +<h3 id="Windows_High_Contrast_Mode">Windows High Contrast Mode</h3> + +<p>Placeholder text will appear with the same styling as user-entered text content when rendered in <a href="/en-US/docs/Web/CSS/-ms-high-contrast">Windows High Contrast Mode</a>. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.</p> + +<ul> + <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li> +</ul> + +<h3 id="Labels">Labels</h3> + +<p>Placeholders are not a replacement for the {{htmlelement("label")}} element. Without a label that has been programmatically associated with an input using a combination of the {{htmlattrxref("for", "label")}} and {{htmlattrxref("id")}} attributes, assistive technology such as screen readers cannot parse {{htmlelement("input")}} elements.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li> + <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="Red_text">Red text</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Type something here!"></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">input::placeholder { + color: red; + font-size: 1.2em; + font-style: italic; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p> + +<h3 id="Green_text">Green text</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Type something here..."></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">input::placeholder { + color: green; +} +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p> + +<h2 id="Specifications">Specifications</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('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("css.selectors.placeholder")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{cssxref(":placeholder-shown")}} pseudo-class styles an element that <em>has</em> an active placeholder.</li> + <li>Related HTML elements: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li> +</ul> diff --git a/files/ko/web/css/actual_value/index.html b/files/ko/web/css/actual_value/index.html new file mode 100644 index 0000000000..9b9bf9ce2f --- /dev/null +++ b/files/ko/web/css/actual_value/index.html @@ -0,0 +1,47 @@ +--- +title: 실제값 +slug: Web/CSS/actual_value +tags: + - CSS + - Reference +translation_of: Web/CSS/actual_value +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>실제값</strong>은 모든 근사치(approximation)가 적용된 뒤의 <a href="/ko/docs/Web/CSS/used_value">사용값</a>입니다. 예를 들어, 사용자 에이전트는 오직 정수 픽셀값으로 테두리(border)를 렌더링할 수도 있고 테두리의 계산된 폭(width)에 근접하도록 강제할 지도 모릅니다.</p> + +<h2 id="Calculating_a_property's_actual_value">Calculating a property's actual value</h2> + +<p>The {{glossary("user agent")}} performs four steps to calculate a property's actual (final) value:</p> + +<ol> + <li>First, the <a href="/ko/docs/CSS/specified_value" title="https://developer.mozilla.org/en/CSS/specified_value">specified value</a> is determined based on the result of <a href="/ko/docs/Web/CSS/Cascade">cascading</a>, <a href="/ko/docs/Web/CSS/inheritance" title="en/CSS/inheritance">inheritance</a>, or using the <a href="/ko/docs/Web/CSS/initial_value">initial value</a>.</li> + <li>Next, the <a href="/ko/docs/Web/CSS/computed_value" title="en/CSS/computed value">computed value</a> is calculated according to the specification (for example, a <code>span</code> with <code>position: absolute</code> will have its computed <code>display</code> changed to <code>block</code>).</li> + <li>Then, layout is calculated, resulting in the <a href="/ko/docs/Web/CSS/used_value">used value</a>.</li> + <li>Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.</li> +</ol> + +<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('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/ko/web/css/align-content/index.html b/files/ko/web/css/align-content/index.html new file mode 100644 index 0000000000..43c4ece03e --- /dev/null +++ b/files/ko/web/css/align-content/index.html @@ -0,0 +1,297 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - CSS + - CSS Box Alignment + - CSS Property + - Reference +translation_of: Web/CSS/align-content +--- +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>align-content</code></strong> 속성은 콘텐츠 사이와 콘텐츠 주위 빈 공간을 <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">플렉스박스</a>의 교차축, <a href="/ko/docs/Web/CSS/CSS_Grid_Layout">그리드</a>의 블록 축을 따라 배치하는 방식을 결정합니다.</p> + +<p>아래의 대화형 예제는 그리드 레이아웃을 사용해 이 속성의 값을 시연합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div> + + + +<p>이 속성은 한 줄로만 이루어진 플렉스 컨테이너에는 아무 효과도 없습니다. (<code>flex-wrap: nowrap</code> 등)</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Basic positional alignment */ +/* align-content does not take left and right values */ +align-content: center; /* Pack items around the center */ +align-content: start; /* Pack items from the start */ +align-content: end; /* Pack items from the end */ +align-content: flex-start; /* Pack flex items from the start */ +align-content: flex-end; /* Pack flex items from the end */ + +/* Normal alignment */ +align-content: normal; + +/* Baseline alignment */ +align-content: baseline; +align-content: first baseline; +align-content: last baseline; + +/* Distributed alignment */ +align-content: space-between; /* Distribute items evenly + The first item is flush with the start, + the last is flush with the end */ +align-content: space-around; /* Distribute items evenly + Items have a half-size space + on either end */ +align-content: space-evenly; /* Distribute items evenly + Items have equal space around them */ +align-content: stretch; /* Distribute items evenly + Stretch 'auto'-sized items to fit + the container */ + +/* Overflow alignment */ +align-content: safe center; +align-content: unsafe center; + +/* Global values */ +align-content: inherit; +align-content: initial; +align-content: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>start</code></dt> + <dd>플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 시작 모서리에 배치합니다.</dd> + <dt><code>end</code></dt> + <dd>플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 끝 모서리에 배치합니다.</dd> + <dt><code>flex-start</code></dt> + <dd>플렉스 항목을 한 덩어리로 뭉치고, 플렉스 컨테이너의 교차 시작점에 따라 정렬 컨테이너 모서리에 배치합니다.<br> + 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목에 대해서는 <code>start</code>로 취급합니다.</dd> + <dt><code>flex-end</code></dt> + <dd>플렉스 항목을 한 덩어리로 뭉치고, 플렉스 컨테이너의 교차 끝점에 따라 정렬 컨테이너 모서리에 배치합니다.<br> + 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목에 대해서는 <code>end</code>로 취급합니다.</dd> + <dt><code>center</code></dt> + <dd>플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 중앙에 배치합니다.</dd> + <dt><code>normal</code></dt> + <dd><code>align-content</code>를 지정하지 않았을 때처럼, 플렉스/그리드 항목을 한 덩어리로 뭉쳐서 기본 위치에 배치합니다.</dd> + <dt><code>baseline<br> + first baseline</code><br> + <code>last baseline</code></dt> + <dd><img alt='the baseline is the line upon which most letters "sit" and below which descenders extend.' src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd> + <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br> + <code>first baseline</code>의 대체 정렬은 <code>start</code>이며 <code>last baseline</code>의 대체 정렬은 <code>end</code>입니다.</dd> + <dt><code>space-between</code></dt> + <dd>정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리가 동일해집니다. 첫 항목은 정렬 컨테이너 교차축의 시작점에, 마지막 항목은 정렬 컨테이너 교차축의 종료점에 붙입니다.</dd> + <dt><code>space-around</code></dt> + <dd>정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리가 동일해집니다. 첫 항목 이전 여백과 마지막 항목 이후 여백은 각 항목간 거리의 절반이 됩니다.</dd> + <dt><code>space-evenly</code></dt> + <dd>정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리, 첫 항목 이전 여백, 마지막 항목 이후 여백이 모두 같아집니다.</dd> + <dt><code>stretch</code></dt> + <dd>모든 항목의 교차축 방향 크기의 합이 정렬 컨테이너보다 작은 경우, 모든 <code>auto</code> 크기의 항목이 동일(비례하지 않음)하게 커져서 정렬 컨테이너의 교차축 방향을 가득 채웁니다. 단, 항목에 지정한 {{cssxref("max-height")}}/{{cssxref("max-width")}} 등의 크기 제한은 준수합니다.</dd> + <dt><code>safe</code></dt> + <dd>정렬 키워드와 함께 사용합니다. 주어진 키워드로 인해 항목이 정렬 컨테이너 밖으로 오버플로하게 되어 데이터가 유실될 수 있으면 항목 정렬에 <code>start</code>를 대신 사용합니다.</dd> + <dt><code>unsafe</code></dt> + <dd>정렬 키워드와 함께 사용합니다. 컨테이너와 항목의 상대적 크기 및 오버플로로 인한 데이터 유실에 상관하지 않고 주어진 정렬을 준수합니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[4] notranslate">#container { + height:200px; + width: 240px; + align-content: center; /* Can be changed in the live sample */ + background-color: #8c8c8c; +} + +.flex { + display: flex; + flex-wrap: wrap; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, 50px); +} + +div > div { + box-sizing: border-box; + border: 2px solid #8c8c8c; + width: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +#item1 { + background-color: #8cffa0; + min-height: 30px; +} + +#item2 { + background-color: #a0c8ff; + min-height: 50px; +} + +#item3 { + background-color: #ffa08c; + min-height: 40px; +} + +#item4 { + background-color: #ffff8c; + min-height: 60px; +} + +#item5 { + background-color: #ff8cff; + min-height: 70px; +} + +#item6 { + background-color: #8cffff; + min-height: 50px; + font-size: 30px; +} + +select { + font-size: 16px; +} + +.row { + margin-top: 10px; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="container" class="flex"> + <div id="item1">1</div> + <div id="item2">2</div> + <div id="item3">3</div> + <div id="item4">4</div> + <div id="item5">5</div> + <div id="item6">6</div> +</div> + +<div class="row"> + <label for="display">display: </label> + <select id="display"> + <option value="flex">flex</option> + <option value="grid">grid</option> + </select> +</div> + +<div class="row"> + <label for="values">align-content: </label> + <select id="values"> + <option value="normal">normal</option> + <option value="stretch">stretch</option> + <option value="flex-start">flex-start</option> + <option value="flex-end">flex-end</option> + <option value="center" selected>center</option> + <option value="space-between">space-between</option> + <option value="space-around">space-around</option> + <option value="space-evenly">space-evenly</option> + + <option value="start">start</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + + <option value="baseline">baseline</option> + <option value="first baseline">first baseline</option> + <option value="last baseline">last baseline</option> + + <option value="safe center">safe center</option> + <option value="unsafe center">unsafe center</option> + <option value="safe right">safe right</option> + <option value="unsafe right">unsafe right</option> + <option value="safe end">safe end</option> + <option value="unsafe end">unsafe end</option> + <option value="safe flex-end">safe flex-end</option> + <option value="unsafe flex-end">unsafe flex-end</option> + </select> +</div> +</pre> + +<div class="hidden"> +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var values = document.getElementById('values'); +var display = document.getElementById('display'); +var container = document.getElementById('container'); + +values.addEventListener('change', function (evt) { + container.style.alignContent = evt.target.value; +}); + +display.addEventListener('change', function (evt) { + container.className = evt.target.value; +}); +</pre> +</div> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", 260, 290)}}</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("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}</td> + <td>{{Spec2("CSS3 Flexbox")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<h3 id="플렉스_레이아웃_지원">플렉스 레이아웃 지원</h3> + +<p>{{Compat("css.properties.align-content.flex_context")}}</p> + +<h3 id="그리드_레이아웃_지원">그리드 레이아웃 지원</h3> + +<p>{{Compat("css.properties.align-content.grid_context")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li> + <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li> +</ul> + +<div>{{CSSRef}}</div> diff --git a/files/ko/web/css/all/index.html b/files/ko/web/css/all/index.html new file mode 100644 index 0000000000..baa5d4e4f0 --- /dev/null +++ b/files/ko/web/css/all/index.html @@ -0,0 +1,171 @@ +--- +title: all +slug: Web/CSS/all +tags: + - CSS + - CSS Cascade + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/all +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <code><strong>all</strong></code> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, <a href="/ko/docs/Web/CSS/Using_CSS_custom_properties">CSS 사용자 지정 속성</a>을 제외한 모든 속성을 초기화합니다.</span> 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값으로 설정할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/all.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 전역 값 */ +all: initial; +all: inherit; +all: unset; + +/* CSS Cascading and Inheritance Level 4 */ +all: revert; +</pre> + +<p><code>all</code> 속성은 CSS 전역 키워드 값 중 하나를 사용해 지정합니다. 그러나 어느것도 {{cssxref("unicode-bidi")}}와 {{cssxref("direction")}} 속성에는 영향을 주지 않는 점을 주의하세요.</p> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("initial")}}</dt> + <dd>요소의 모든 속성을 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>으로 변경합니다.</dd> + <dt>{{cssxref("inherit")}}</dt> + <dd>요소의 모든 속성을 <a href="/ko/docs/Web/CSS/inheritance">상속값</a>으로 변경합니다.</dd> + <dt>{{cssxref("unset")}}</dt> + <dd>요소의 모든 속성을, 속성이 값을 상속하는 경우 상속값으로, 아니면 초깃값으로 변경합니다.</dd> + <dt>{{cssxref("revert")}}</dt> + <dd>선언이 속한 스타일시트의 출처에 따라 다른 동작을 합니다. + <dl> + <dt><a href="/ko/docs/Web/CSS/Cascade#User-agent_stylesheets">사용자 에이전트 출처</a></dt> + <dd><code>unset</code>과 동일합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Cascade#User_stylesheets">사용자 출처</a></dt> + <dd><a href="/ko/docs/Web/CSS/Cascade">종속</a>을 사용자 에이전트 단계까지 되돌려서, <a href="/ko/docs/Web/CSS/specified_value">지정값</a>이 마치 저작자와 사용자 단계의 규칙이 없었던 것처럼 계산되도록 합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Cascade#Author_stylesheets">저작자 출처</a></dt> + <dd><a href="/ko/docs/Web/CSS/Cascade">종속</a>을 사용자 에이전트 단계까지 되돌려서, <a href="/ko/docs/Web/CSS/specified_value">지정값</a>이 마치 저작자 단계의 규칙이 없었던 것처럼 계산되도록 합니다. <code>revert</code>만 고려했을 때, 저작자 출처는 재정의(Override) 및 애니메이션(Animation) 출처를 포함합니다.</dd> + </dl> + </dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><blockquote id="quote"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +</blockquote> +Phasellus eget velit sagittis.</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">body { + font-size: small; + background-color: #F0F0F0; + color: blue; +} + +blockquote { + background-color: skyblue; + color: red; +} +</pre> + +<h3 id="결과">결과</h3> + +<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="all_속성_없음"><code>all</code> 속성 없음</h4> + +<pre class="brush: html hidden notranslate"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; }</pre> +{{EmbedLiveSample("ex0", "200", "125")}} + +<p>The {{HTMLElement("blockquote")}}가 브라우저 기본 스타일과 함께, 지정한 배경 및 텍스트 색상을 사용합니다. 또한 블록 요소로 동작하여 뒤의 텍스트가 아래에 위치합니다.</p> +</div> + +<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allunset"><code>all:unset</code></h4> + +<pre class="brush: html hidden notranslate"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: unset; }</pre> +{{EmbedLiveSample("ex1", "200", "125")}} + +<p>{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, {{cssxref("background-color")}}가 <code>transparent</code>(초깃값)입니다. 그러나 {{cssxref("font-size")}}는 여전히 <code>small</code>(상속값)이고 {{cssxref("color")}}도 <code>blue</code>(상속값)입니다.</p> +</div> + +<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allinitial"><code>all:initial</code></h4> + +<pre class="brush: html hidden notranslate"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: initial; }</pre> +{{EmbedLiveSample("ex2", "200", "125")}} + +<p>{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, {{cssxref("background-color")}}가 <code>transparent</code>(초깃값)이고, {{cssxref("font-size")}}는 <code>normal</code>(초깃값), {{cssxref("color")}}는 <code>black</code>(초깃값)입니다.</p> +</div> + +<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allinherit"><code>all:inherit</code></h4> + +<pre class="brush: html hidden notranslate"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: inherit; }</pre> +{{EmbedLiveSample("ex3", "200", "125")}} + +<p>{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 블록 요소(부모 {{HTMLElement("body")}}에서 상속)이고, {{cssxref("background-color")}}은 <code>#F0F0F0</code>(상속값), {{cssxref("font-size")}}는 <code>small</code>(상속값), {{cssxref("color")}}는 <code>blue</code>(상속값)입니다.</p> +</div> + +<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('CSS4 Cascade', '#all-shorthand', 'all') }}</td> + <td>{{ Spec2('CSS4 Cascade') }}</td> + <td>Added the <code>revert</code> value.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td> + <td>{{ Spec2('CSS3 Cascade') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.all")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<p>CSS 전역 키워드 값: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</p> diff --git a/files/ko/web/css/all_about_the_containing_block/index.html b/files/ko/web/css/all_about_the_containing_block/index.html new file mode 100644 index 0000000000..35c6bf56cb --- /dev/null +++ b/files/ko/web/css/all_about_the_containing_block/index.html @@ -0,0 +1,263 @@ +--- +title: 컨테이닝 블록의 모든 것 +slug: Web/CSS/All_About_The_Containing_Block +tags: + - CSS + - Guide + - Layout + - Position +translation_of: Web/CSS/Containing_block +--- +<div>{{cssref}}</div> + +<p>요소의 크기와 위치는 <strong>컨테이닝 블록</strong>(containing block)의 영향을 받곤 합니다. 대부분의 경우, 어떤 요소의 컨테이닝 블록은 가장 가까운 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 레벨</a> 조상의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">콘텐츠 영역</a>이나, 항상 그런 것은 아닙니다. <span class="seoSummary">이 글에서는 요소의 컨테이닝 블록을 결정하는 요인을 살펴보겠습니다.</span></p> + +<p>사용자 에이전트(브라우저 등)는 문서를 그릴 때 모든 요소에 대해 상자(박스)를 생성합니다. 각각의 상자는 아래의 네 가지 영역으로 나눠집니다.</p> + +<ol start="1"> + <li>콘텐츠 영역</li> + <li>안쪽 여백(패딩) 영역</li> + <li>테두리 영역</li> + <li>바깥 여백(마진) 영역</li> +</ol> + +<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<p>많은 개발자들은 요소의 컨테이닝 블록이 언제나 부모 요소의 콘텐츠 영역이라고 생각하지만, 사실 꼭 그렇지는 않습니다. 어떤 항목이 컨테이닝 블록을 결정짓나 알아보겠습니다.</p> + +<h2 id="컨테이닝_블록의_효과">컨테이닝 블록의 효과</h2> + +<p>컨테이닝 블록을 결정하는 요인에 뭐가 있는지 알아보기 전에, 애초에 컨테이닝 블록이 무슨 상관인지 알아두는게 유용하겠습니다.</p> + +<p>요소의 크기와 위치는 컨테이닝 블록의 영향을 자주 받습니다. 백분율 값을 사용한 {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 속성의 값과 절대적 위치(<code>absolute</code>나 <code>fixed</code> 등)로 설정된 요소의 오프셋 속성 값은 자신의 컨테이닝 블록으로부터 계산됩니다.</p> + +<h2 id="컨테이닝_블록_식별">컨테이닝 블록 식별</h2> + +<p>컨테이닝 블록의 식별 과정은 {{cssxref("position")}} 속성에 따라 완전히 달라집니다.</p> + +<ol> + <li><code>position</code><strong> </strong>속성이 <code><strong>static</strong></code>, <code><strong>relative</strong></code>, <strong><code>sticky</code></strong> 중 하나이면, 컨테이닝 블록은 가장 가까운 조상 <strong>블록 컨테이너</strong>(<code>inline-block</code>, <code>block</code>, <code>list-item</code> 등의 요소), 또는 가장 가까우면서 <strong>서식 맥락을 형성하는 조상 요소</strong>(<code>table</code>, <code>flex</code>, <code>grid</code>, 아니면 블록 컨테이너 자기 자신)의 콘텐츠 영역 경계를 따라 형성됩니다.</li> + <li><code>position</code><strong> </strong>속성이 <code><strong>absolute</strong></code>인 경우, 컨테이닝 블록은 <code>position</code> 속성 값이 <code>static</code>이 아닌(<code>fixed</code>, <code>absolute</code>, <code>relative</code>, <code>sticky</code>) 가장 가까운 조상의 내부 여백 영역입니다.</li> + <li><code>position</code><strong> </strong>속성이 <code><strong>fixed</strong></code>인 경우, 컨테이닝 블록은 {{glossary("viewport", "뷰포트")}}나 페이지 영역(페이지로 나뉘는 매체인 경우)입니다.</li> + <li><code>position</code><strong> </strong>속성이 <code><strong>absolute</strong></code>나 <code><strong>fixed</strong></code>인 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백 영역이 컨테이닝 블록이 될 수도 있습니다. + <ol> + <li>{{cssxref("transform")}}이나 {{cssxref("perspective")}} 속성이 <code>none</code>이 아님.</li> + <li>{{cssxref("will-change")}} 속성이 <code>transform</code>이나 <code>perspective</code>임.</li> + <li>{{cssxref("filter")}} 속성이 <code>none</code>임. (Firefox에선 <code>will-change</code>가 <code>filter</code>일 때도 적용)</li> + <li>{{cssxref("contain")}} 속성이 <code>paint</code>임.</li> + </ol> + </li> +</ol> + +<div class="note"> +<p><strong>참고:</strong> 루트 요소({{HTMLElement("html")}})의 컨테이닝 블록은 <strong>초기 컨테이닝 블록</strong>이라고 불리는 사각형입니다. 초기 컨테이닝 블록은 뷰포트 또는 (페이지로 나뉘는 매체에선) 페이지 영역의 크기와 같습니다.</p> +</div> + +<h2 id="컨테이닝_블록으로부터_백분율_값_계산하기">컨테이닝 블록으로부터 백분율 값 계산하기</h2> + +<p>앞서 언급했듯, 특정 속성의 값이 백분율이라면 그 계산값은 요소의 컨테이닝 블록에 의해 결정됩니다. 이렇게 동작하는 속성으로 <strong>박스 모델 속성</strong>과 <strong>오프셋 속성</strong>이 있습니다.</p> + +<ol start="1"> + <li>{{cssxref("height")}}, {{cssxref("top")}}, {{cssxref("bottom")}} 속성은 컨테이닝 블록의 <code>height</code>를 사용해 백분율을 계산합니다. 컨테이닝 블록의 <code>height</code>가 콘텐츠의 크기에 따라 달라질 수 있고, 컨테이닝 블록의 <code>position</code>이 <code>relative</code>거나 <code>static</code>이면 계산값은 <em>0</em>이 됩니다.</li> + <li>{{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 속성은 컨테이닝 블록의 <code>width</code>를 사용해 백분율을 계산합니다.</li> +</ol> + +<h2 id="예제">예제</h2> + +<p>모든 예제의 HTML코드는 다음과 같습니다.</p> + +<pre class="brush: html"><body> + <section> + <p>문단입니다!</p> + </section> +</body> +</pre> + +<p>이하 예제는 모두 CSS만 변경합니다.</p> + +<h3 id="예제_1">예제 1</h3> + +<p>다음 예제에서 문단은 정적 위치를 가지고, 가장 가까운 블록 컨테이너는 {{HTMLElement("section")}}이므로 문단의 컨테이닝 블록도 <code><section></code>입니다.</p> + +<div class="hidden"> +<pre class="brush: html"><body> + <section> + <p>문단입니다!</p> + </section> +</body> +</pre> +</div> + +<pre class="brush: css">body { + background: beige; +} + +section { + display: block; + width: 400px; + height: 160px; + background: lightgray; +} + +p { + width: 50%; /* == 400px * .5 = 200px */ + height: 25%; /* == 160px * .25 = 40px */ + margin: 5%; /* == 400px * .05 = 20px */ + padding: 5%; /* == 400px * .05 = 20px */ + background: cyan; +} +</pre> + +<p>{{EmbedLiveSample('예제_1','100%','300')}}</p> + +<h3 id="예제_2">예제 2</h3> + +<p>다음 예제에서 <code><section></code>은 <code>display: inline</code>으로 인해 블록 컨테이너가 아니고, 서식 문맥도 형성하지 않으므로 문단의 컨테이닝 블록은 {{HTMLElement("body")}} 요소입니다.</p> + +<div class="hidden"> +<pre class="brush: html"><body> + <section> + <p>문단입니다!</p> + </section> +</body> +</pre> +</div> + +<pre class="brush: css">body { + background: beige; +} + +section { + display: inline; + background: lightgray; +} + +p { + width: 50%; /* == body 너비의 절반 */ + height: 200px; /* 참고: 백분율 값이었으면 0 */ + background: cyan; +} +</pre> + +<p>{{EmbedLiveSample('예제_2','100%','300')}}</p> + +<h3 id="예제_3">예제 3</h3> + +<p>다음 예제에서는 <code><section></code>의 <code>position</code>이 <code>absolute</code>이기 때문에 문단의 컨테이닝 블록은 <code><section></code>입니다. 문단의 백분율 값은 컨테이닝 블록의 {{cssxref("padding")}} 값의 영향을 받겠지만, 컨테이닝 블록의 {{cssxref("box-sizing")}} 속성이 <code>border-box</code>였다면 그렇지 않을 것입니다.</p> + +<div class="hidden"> +<pre class="brush: html"><body> + <section> + <p>문단입니다!</p> + </section> +</body> +</pre> +</div> + +<pre class="brush: css">body { + background: beige; +} + +section { + position: absolute; + left: 30px; + top: 30px; + width: 400px; + height: 160px; + padding: 30px 20px; + background: lightgray; +} + +p { + position: absolute; + width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */ + height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */ + margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ + padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ + background: cyan; +} +</pre> + +<p>{{EmbedLiveSample('예제_3','100%','300')}}</p> + +<h3 id="예제_4">예제 4</h3> + +<p>다음 예제에서는 문단의 <code>position</code>이 <code>fixed</code>이므로 컨테이닝 블록은 초기 컨테이닝 블록(화면 매체에서는 뷰포트)입니다. 따라서 문단의 크기는 브라우저 창의 크기에 따라 변합니다.</p> + +<div class="hidden"> +<pre class="brush: html"><body> + <section> + <p>문단입니다!</p> + </section> +</body> +</pre> +</div> + +<pre class="brush: css">body { + background: beige; +} + +section { + width: 400px; + height: 480px; + margin: 30px; + padding: 15px; + background: lightgray; +} + +p { + position: fixed; + width: 50%; /* == (50vw - (세로 스크롤바 너비)) */ + height: 50%; /* == (50vh - (가로 스크롤바 높이)) */ + margin: 5%; /* == (5vw - (세로 스크롤바 너비)) */ + padding: 5%; /* == (5vw - (세로 스크롤바 너비)) */ + background: cyan; +} +</pre> + +<p>{{EmbedLiveSample('예제_4','100%','300')}}</p> + +<h3 id="예제_5">예제 5</h3> + +<p>다음 예제에서는 문단의 <code>position</code>이 <code>absolute</code>이므로, 컨테이닝 블록은 {{cssxref("transform")}} 속성이 <code>none</code>이 아닌 가장 가까운 조상, <code><section></code>입니다.</p> + +<div class="hidden"> +<pre class="brush: html"><body> + <section> + <p>문단입니다!</p> + </section> +</body> +</pre> +</div> + +<pre class="brush: css">body { + background: beige; +} + +section { + transform: rotate(0deg); + width: 400px; + height: 160px; + background: lightgray; +} + +p { + position: absolute; + left: 80px; + top: 30px; + width: 50%; /* == 200px */ + height: 25%; /* == 40px */ + margin: 5%; /* == 20px */ + padding: 5%; /* == 20px */ + background: cyan; +} +</pre> + +<p>{{EmbedLiveSample('예제_5','100%','300')}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{css_key_concepts}}</li> + <li>모든 CSS 선언을 주어진 상태로 되돌리는 {{cssxref("all")}} 속성</li> +</ul> diff --git a/files/ko/web/css/alternative_style_sheets/index.html b/files/ko/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..918ce3dd36 --- /dev/null +++ b/files/ko/web/css/alternative_style_sheets/index.html @@ -0,0 +1,24 @@ +--- +title: Alternative style sheets +slug: Web/CSS/Alternative_style_sheets +translation_of: Web/CSS/Alternative_style_sheets +--- +<p>Firefox는 + <i> + 대체 스타일시트</i> + 를 지원합니다. 대체 스타일시트를 제공하는 페이지에서는 <b>보기>페이지 스타일</b> 메뉴를 이용하여 페이지에 적용될 스타일을 선택할 수 있습니다. 따라서 사용자는 자신이 원하는 다양한 종류의 페이지를 볼 수 있게 됩니다.</p> +<p><tt><a href="ko/HTML/Element/link">link</a></tt> 요소를 사용하여 웹 페이지에 대체 스타일시트를 제공할 수 있습니다.</p> +<p>예제:</p> +<pre class="eval"> <link href="default.css" rel="stylesheet" type="text/css" title="Default Style"> + <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"> + <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic"> +</pre> +<p>위의 세 가지 스타일 시트를 제공하면, 페이지 스타일 메뉴에 "Default Style", "Fancy", "Basic" 스타일 목록이 출력됩니다. 사용자가 특정 스타일을 선택하면 페이지는 해당 스타일로 바로 다시 렌더링 됩니다.</p> +<p><code><a href="ko/HTML/Element/link">link</a></code> 또는 <code><a href="ko/HTML/Element/style">style</a></code> 요소에 <code>title</code> 속성이 포함되어 있을 경우 해당 제목(title)은 사용자에게로 노출되어 사용자가 선택할 수 있게 됩니다. 동일한 제목을 가진 스타일시트가 여럿 존재할 경우 해당 스타일시트들은 모두 적용되며, <code>title</code> 속성이 없는 스타일시트는 항상 적용됩니다.</p> +<p>기본 스타일시트에는 <code>rel="stylesheet"</code> 속성을 사용하고 대체 스타일시트에는 <code>rel="alternate stylesheet"</code>를 사용하세요. 이를 통해 Firefox는 어떤 스타일시트 제목을 처음 선택해야 할지 알 수 있으며, 대체 스타일시트를 지원하지 않는 브라우저에게 기본 스타일시트가 무엇인지를 알려줍니다.</p> +<h3 id=".EC.8B.A4.EC.A0.9C_.EC.98.88.EC.A0.9C" name=".EC.8B.A4.EC.A0.9C_.EC.98.88.EC.A0.9C">실제 예제</h3> +<p>실제로 동작하는 예제는 <a class="external" href="http://developer.mozilla.org/samples/cssref/altstyles/index.html">여기에서</a> 볼 수 있습니다.</p> +<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/html401/present/styles.html#h-14.3">HTML 4.01: External style sheets</a></li> +</ul> diff --git a/files/ko/web/css/angle-percentage/index.html b/files/ko/web/css/angle-percentage/index.html new file mode 100644 index 0000000000..a341698026 --- /dev/null +++ b/files/ko/web/css/angle-percentage/index.html @@ -0,0 +1,52 @@ +--- +title: <angle-percentage> +slug: Web/CSS/angle-percentage +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - 자료형 +translation_of: Web/CSS/angle-percentage +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS </a><strong><code><angle-percentage></code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("<angle>")}}과 {{cssxref("<percentage>")}} 모두 가능한 값을 나타냅니다.</p> + +<h2 id="구문">구문</h2> + +<p>{{cssxref("<angle>")}}과 {{cssxref("<percentage>")}} 문서에서 각 자료형의 구문을 살펴보세요.</p> + +<h2 id="calc에서_사용하기"><code>calc()</code>에서 사용하기</h2> + +<p><code><angle-percentage></code>를 사용할 수 있는 곳이라면 백분율이 각도로 계산되므로, 이 자료형도<code> </code>{{cssxref("calc()")}}표현식에서 사용할 수 있습니다.</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('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Defines <code><angle-percentage></code>. Adds <code>calc()</code></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.angle-percentage")}}</p> diff --git a/files/ko/web/css/angle/index.html b/files/ko/web/css/angle/index.html new file mode 100644 index 0000000000..8125920a36 --- /dev/null +++ b/files/ko/web/css/angle/index.html @@ -0,0 +1,115 @@ +--- +title: <angle> +slug: Web/CSS/angle +tags: + - CSS + - CSS Data Type + - Data Type + - Layout + - Reference + - Web + - 자료형 +translation_of: Web/CSS/angle +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code><angle></code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 각도의 값을 도, 그레이드, 라디안 또는 회전수로 표현합니다.</span> {{cssxref("<gradient>")}}나 일부 {{cssxref("transform")}} 함수에서 사용합니다..</p> + +<div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<p><code><angle></code> 자료형은 {{cssxref("<number>")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위처럼 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 <code>0</code> 뒤에는 단위를 붙이지 않아도 됩니다.</p> + +<p>선택적으로 <code>+</code>, <code>-</code> 부호를 표시할 수 있습니다. 양의 부호는 시계방향 회전을, 음의 부호는 시계 반대방향 회전을 나타냅니다. 정적 속성에선 하나의 각도를 다른 각도로 표현할 수 있습니다. 예컨대 <code>90deg</code>는 <code>-270deg</code>, <code>1turn</code>은 <code>4turn</code>과 동일합니다. 그러나 동적 속성, 즉 {{cssxref("animation")}}이나 {{cssxref("transition")}}에서는 결과가 달라집니다.</p> + +<h3 id="단위">단위</h3> + +<dl> + <dt><code><a id="deg" name="deg">deg</a></code></dt> + <dd>각도를 <a href="https://ko.wikipedia.org/wiki/%EB%8F%84_(%EA%B0%81%EB%8F%84)">도 단위</a>로 나타냅니다. 1회전은 <code>360deg</code>입니다. 예: <code>0deg</code>, <code>90deg</code>, <code>14.23deg</code></dd> + <dt id="grad"><code><a id="grad" name="grad">grad</a></code></dt> + <dd>각도를 <a href="https://ko.wikipedia.org/wiki/%EA%B7%B8%EB%A0%88%EC%9D%B4%EB%93%9C">그레이드</a>로 나타냅니다. 1회전은 <code>400grad</code>입니다. 예: <code>0grad</code>, <code>100grad</code>, <code>38.8grad</code></dd> + <dt id="rad"><code><a id="rad" name="rad">rad</a></code></dt> + <dd>각도를 <a href="https://ko.wikipedia.org/wiki/%EB%9D%BC%EB%94%94%EC%95%88">라디안</a>으로 나타냅니다. 1회전은 2π 라디안으로 약 <code>6.2832rad</code>입니다. <code>1rad</code>는 180/π<code>deg</code>입니다. 예: <code>0rad</code>, <code>1.0708rad</code>, <code>6.2832rad</code></dd> + <dt id="turn"><code><a id="turn" name="turn">turn</a></code></dt> + <dd>각도를 회전의 수로 나타냅니다. 1회전은 <code>1turn</code>입니다. 예: <code>0turn</code>, <code>0.25turn</code>, <code>1.2turn</code></dd> +</dl> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="시계_방향_우측_90도">시계 방향 우측 90도</h3> + +<table style="width: 100%;"> + <tbody> + <tr> + <td><img alt="Angle90.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5704/=Angle90.png"></td> + <td><code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code></td> + </tr> + </tbody> +</table> + +<h3 id="반대로_회전">반대로 회전</h3> + +<table style="width: 100%;"> + <tbody> + <tr> + <td><img alt="Angle180.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5706/=Angle180.png"></td> + <td><code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code></td> + </tr> + </tbody> +</table> + +<h3 id="시계_반대_방향_우측_90도">시계 반대 방향 우측 90도</h3> + +<table style="width: 100%;"> + <tbody> + <tr> + <td><img alt="AngleMinus90.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5707/=AngleMinus90.png"></td> + <td><code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code></td> + </tr> + </tbody> +</table> + +<h3 id="회전_없음">회전 없음</h3> + +<table style="width: 100%;"> + <tbody> + <tr> + <td><img alt="Angle0.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5708/=Angle0.png"></td> + <td><code>0 = 0deg = 0grad = 0turn = 0rad</code></td> + </tr> + </tbody> +</table> + +<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('CSS4 Values', '#angles', '<angle>') }}</td> + <td>{{ Spec2('CSS4 Values') }}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Values', '#angles', '<angle>') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.angle")}}</p> diff --git a/files/ko/web/css/animation-delay/index.html b/files/ko/web/css/animation-delay/index.html new file mode 100644 index 0000000000..54f5d965e2 --- /dev/null +++ b/files/ko/web/css/animation-delay/index.html @@ -0,0 +1,85 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - CSS Property + - CSS animation + - Reference +translation_of: Web/CSS/animation-delay +--- +<div>{{CSSRef}}</div> + +<p><strong><code>animation-delay</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> 속성은 애니메이션이 시작할 시점을 지정합니다. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</div> + + + +<p>{{cssxref("animation")}} 단축 속성을 사용해 애니메이션 관련 속성을 편리하게 같이 지정할 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css">/* Single animation */ +animation-delay: 3s; +animation-delay: 0s; +animation-delay: -1500ms; + +/* Multiple animations */ +animation-delay: 2.1s, 480ms;</pre> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<time>")}}</dt> + <dd>애니메이션이 시작될 요소가 적용되는 순간부터의 시간 오프셋입니다. 이 값은 초 또는 밀리 초 (ms)로 지정할 수 있습니다. 이 값은 필수입니다.</dd> + <dd>양수 값은 지정된 시간이 경과 한 후 애니메이션이 시작되어야 함을 나타냅니다. 기본값인 0의 값은 애니메이션이 적용되는 즉시 시작해야 함을 나타냅니다.</dd> + <dd> + <p>음수 값을 지정하면 애니메이션이 즉시 시작되지만 애니메이션 주기의 도중에 시작됩니다. 예를 들어 애니메이션 지연 시간으로 -1s를 지정하면 애니메이션이 즉시 시작되지만 애니메이션 시퀀스의 1초부터 시작됩니다. 만약 animation-delay에 음수 값을 지정했지만 시작값이 절대값이면 시작값은 애니메이션이 요소에 적용된 시점부터 가져옵니다.</p> + </dd> +</dl> + +<div class="note"> +<p><strong>참고</strong>: <code>animation- *</code> 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/animation-name" title="The documentation about this has not yet been written; please consider contributing!"><code>animation-name</code></a> 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">여러 애니메이션 속성 값 설정</a>을 참조하십시오.</p> +</div> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<p><a href="/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS 애니메이션 사용하기</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('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div>{{Compat("css.properties.animation-delay")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS 애니메이션 사용하기</a></li> + <li>JavaScript {{domxref("AnimationEvent")}} API</li> +</ul> diff --git a/files/ko/web/css/animation-direction/index.html b/files/ko/web/css/animation-direction/index.html new file mode 100644 index 0000000000..7c5c8b56db --- /dev/null +++ b/files/ko/web/css/animation-direction/index.html @@ -0,0 +1,191 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS 속성 + - CSS 애니메이션 +translation_of: Web/CSS/animation-direction +--- +<div>{{CSSRef}} {{SeeCompatTable}}</div> + +<p><strong><code>animation-direction</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.</p> + +<pre class="brush: css no-line-numbers">/* Single animation */ +animation-direction: normal; +animation-direction: reverse; +animation-direction: alternate; +animation-direction: alternate-reverse; + +/* Multiple animations */ +animation-direction: normal, reverse; +animation-direction: alternate, reverse, normal; + +/* Global values */ +animation-direction: inherit; +animation-direction: initial; +animation-direction: unset; +</pre> + +<p>축약 속성 {{cssxref ( "animation")}}을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.</p> + +<p>{{cssinfo}}</p> + +<h2 id="문법(Syntax)">문법(Syntax)</h2> + +<h3 id="값(Values)">값(Values)</h3> + +<dl> + <dt><code>normal</code></dt> + <dd> 애니메이션은 매 사이클마다 정방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 시작 상태로 재설정되고 다시 시작됩니다. 이것은 기본값입니다.</dd> + <dt><code>reverse</code></dt> + <dd>애니메이션은 매 사이클마다 역방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 종료 상태로 재설정되고 다시 시작됩니다. 애니메이션 단계가 거꾸로 수행되고 타이밍 기능 또한 반대로됩니다. 예를 들어, ease-in 타이밍 기능은 ease-out형태로 변경됩니다.</dd> + <dt><code>alternate</code></dt> + <dd>애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 정방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.</dd> + <dt><code>alternate-reverse</code></dt> + <dd>애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 역방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.</dd> +</dl> + +<div class="note"> +<p><strong>노트</strong>: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 {{cssxref ( "animation-name")}} 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">여러 애니메이션 속성 값 설정</a>을 참조하십시오.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제(Examples)">예제(Examples)</h2> + +<p><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a>를 보십시오.</p> + +<h2 id="명세(Specifications)">명세(Specifications)</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('CSS3 Animations', '#animation-direction', 'animation-direction')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성(Browser compatibility)</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(43.0)}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td> + <td>10</td> + <td>12{{property_prefix("-o")}}<br> + 12.50</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>reverse</code></td> + <td>19</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>19</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td><code>reverse</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 44.0 {{geckoRelease("44.0")}}은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두사가 붙은 속성 버전에 대한 지원을 추가했으며, 기본값은 false입니다. Gecko 49.0 {{geckoRelease("49.0")}} 이후 기본 설정은 true로 기본 설정됩니다.</p> + +<h2 id="같이_보기(See_also)">같이 보기(See also)</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>JavaScript {{domxref("AnimationEvent")}} API</li> +</ul> diff --git a/files/ko/web/css/animation-duration/index.html b/files/ko/web/css/animation-duration/index.html new file mode 100644 index 0000000000..83e46427df --- /dev/null +++ b/files/ko/web/css/animation-duration/index.html @@ -0,0 +1,140 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS 애니메이션 +translation_of: Web/CSS/animation-duration +--- +<div>{{CSSRef}} {{SeeCompatTable}}</div> + +<p><strong><code>animation-duration</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다.</p> + +<pre class="brush:css no-line-numbers">/* Single animation */ +animation-duration: 6s; +animation-duration: 120ms; + +/* Multiple animations */ +animation-duration: 1.64s, 15.22s; +animation-duration: 10s, 35s, 230ms; +</pre> + +<p>축약 속성 {{ cssxref("animation") }}를 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.</p> + +<p>{{cssinfo}}</p> + +<h2 id="문법(Syntax)">문법(Syntax)</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>{{cssxref("<time>")}}</code></dt> + <dd>애니메이션이 한 사이클을 완료하는 데 걸리는 지속 시간입니다. 이것은 초(s) 또는 밀리 초 (ms)로 지정 될 수 있습니다. 값은 양수 또는 0이어야하며 단위는 필수입니다. 기본값인 0의 값은 애니메이션이 작동하지 않아야 함을 나타냅니다.</dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> 음수 값은 유효하지 않으므로 선언이 무시됩니다. 접두사가 붙은 구현은 그것들을 0과 동일하게 간주 할 수 있습니다.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 {{cssxref ( "animation-name")}} 속성에 지정된 애니메이션에 얼마나 많은 값이 있는지에 따라 다른 방식으로 지정됩니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">Setting multiple animation property values</a>를 참조하십시오.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제(Examples)">예제(Examples)</h2> + +<p><a href="/en/CSS/CSS_animations">CSS 애니메이션 예제</a>를 참조하십시오. </p> + +<h2 id="Specifications" name="Specifications">명세(Specifications)</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('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성(Browser compatibility)</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0{{property_prefix("-webkit")}}<br> + {{CompatChrome(43.0)}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td> + <td>10</td> + <td>12{{property_prefix("-o")}}<br> + 12.10</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> + {{ CompatGeckoMobile("16.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.2{{property_prefix("-webkit")}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 44.0 {{geckoRelease("44.0")}}은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두어로 사용 된 속성 버전에 대한 지원을 추가하고 기본을 false로 설정합니다. Gecko 49.0 {{geckoRelease("49.0")}}이후 기본 설정은 true로 기본 설정됩니다.</p> + +<h2 id="같이_보기(See_also)">같이 보기(See also)</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>JavaScript {{domxref("AnimationEvent")}} API</li> +</ul> diff --git a/files/ko/web/css/animation-fill-mode/index.html b/files/ko/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..f1920b92d2 --- /dev/null +++ b/files/ko/web/css/animation-fill-mode/index.html @@ -0,0 +1,241 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS 속성 + - CSS 애니메이션 +translation_of: Web/CSS/animation-fill-mode +--- +<div>{{CSSRef}}</div> + +<p><strong><code>animation-fill-mode</code></strong> <a href="/en/CSS" title="CSS">CSS</a> 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.</p> + +<pre class="brush: css no-line-numbers">/* Single animation */ +animation-fill-mode: none; +animation-fill-mode: forwards; +animation-fill-mode: backwards; +animation-fill-mode: both; + +/* Multiple animations */ +animation-fill-mode: none, backwards; +animation-fill-mode: both, forwards, none; +</pre> + +<p>축약 속성 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/animation" title="CSS의 animation 속성은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 값들을 지정가능한 축약된 속성(shorthand property)이다."><code>animation</code></a>을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.</p> + +<p>{{cssinfo}}</p> + +<h2 id="문법(Syntax)">문법(Syntax)</h2> + +<h3 id="값(Values)">값(Values)</h3> + +<dl> + <dt><code>none</code></dt> + <dd>애니메이션은 실행되지 않을 때 대상에 스타일을 적용하지 않습니다. 요소는 대신 적용된 다른 CSS 규칙을 사용하여 표시됩니다. 이것은 기본값입니다.</dd> + <dt><code>forwards</code></dt> + <dd>대상은 실행 된 애니메이션의 마지막 <a href="https://developer.mozilla.org/en-US/docs/CSS/@keyframes">keyframe</a>에 의해 설정된 계산 된 값을 유지합니다. 마지막 키 프레임은 {{cssxref("animation-direction")}}및 {{cssxref("animation-iteration-count")}}의 값에 따라 다릅니다. + <table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>animation-direction</code></th> + <th scope="col"><code>animation-iteration-count</code></th> + <th scope="col">last keyframe encountered</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>normal</code></td> + <td>even or odd</td> + <td><code>100%</code> or <code>to</code></td> + </tr> + <tr> + <td><code>reverse</code></td> + <td>even or odd</td> + <td><code>0%</code> or <code>from</code></td> + </tr> + <tr> + <td><code>alternate</code></td> + <td>even</td> + <td><code>0%</code> or <code>from</code></td> + </tr> + <tr> + <td><code>alternate</code></td> + <td>odd</td> + <td><code>100%</code> or <code>to</code></td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>even</td> + <td><code>100%</code> or <code>to</code></td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>odd</td> + <td><code>0%</code> or <code>from</code></td> + </tr> + </tbody> + </table> + </dd> + <dt><code>backwards</code></dt> + <dd>애니메이션은 대상에 적용되는 즉시 첫 번째 관련 <a href="/en-US/docs/CSS/@keyframes">keyframe</a> 에 정의 된 값을 적용하고 {{cssxref("animation-delay")}} 기간 동안 이 값을 유지합니다. 첫 번째 관련 키프레임은 {{cssxref("animation-direction")}}의 값에 따라 다릅니다. + <table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>animation-direction</code></th> + <th scope="col">first relevant keyframe</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>normal</code> or <code>alternate</code></td> + <td><code>0%</code> or <code>from</code></td> + </tr> + <tr> + <td><code>reverse</code> or <code>alternate-reverse</code></td> + <td><code>100%</code> or <code>to</code></td> + </tr> + </tbody> + </table> + </dd> + <dt><code>both</code></dt> + <dd>애니메이션은 앞뒤 양쪽 모두의 규칙을 따르므로 애니메이션 속성이 양방향으로 확장됩니다.</dd> +</dl> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>노트</strong></span>: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/animation-name" title="The documentation about this has not yet been written; please consider contributing!"><code>animation-name</code></a> 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">여러 애니메이션 속성 값 설정</a>을 참조하십시오.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Example" name="Example">예제(Examples)</h2> + +<p>다음 예제에서 animation-fill-mode의 효과를 볼 수 있습니다. 무한 시간 동안 실행되는 애니메이션의 경우 원래 상태 (기본값)로 되돌리기보다는 최종 상태로 유지하는 방법을 보여줍니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>회색 박스 위에 마우스를 올려보세요!</p> +<div class="demo"> + <div class="grows">이 글씨는 커집니다.</div> + <div class="growsandstays">이 글씨는 커지며, 커진 상태를 유지합니다.</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.demo { + border-top: 100px solid #ccc; + height: 300px; +} + +@keyframes grow { + 0% { font-size: 0; } + 100% { font-size: 40px; } +} + +.demo:hover .grows { + animation-name: grow; + animation-duration: 3s; +} + +.demo:hover .growsandstays { + animation-name: grow; + animation-duration: 3s; + animation-fill-mode: forwards; +}</pre> + +<p>{{EmbedLiveSample('Example',700,300)}}</p> + +<p>자세한 예제는 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a>를 보십시오.</p> + +<h2 id="Specifications" name="Specifications">명세(Specifications)</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('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성(Browser compatibility)</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(43.0)}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td> + <td>10</td> + <td>12{{property_prefix("-o")}}<br> + 12.10</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 44.0 {{geckoRelease("44.0")}} 은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두사가 붙은 속성 버전에 대한 지원을 추가했으며, 기본값은 false입니다. Gecko 49.0 {{geckoRelease("49.0")}} 이후 기본 설정은 true로 기본 설정됩니다.</p> + +<h2 id="같이_보기(See_also)">같이 보기(See also)</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li> + <li>JavaScript {{domxref("AnimationEvent")}} API</li> +</ul> diff --git a/files/ko/web/css/animation/index.html b/files/ko/web/css/animation/index.html new file mode 100644 index 0000000000..0ae99bb71b --- /dev/null +++ b/files/ko/web/css/animation/index.html @@ -0,0 +1,349 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animations + - CSS Property + - Reference +translation_of: Web/CSS/animation +--- +<div>{{CSSRef}}</div> + +<p><strong><code>animation</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a><strong> </strong>속성은 다수의 스타일을 전환하는 애니메이션을 적용합니다. {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div> + + + +<pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay | +iteration-count | direction | fill-mode | play-state | name */ +animation: 3s ease-in 1s 2 reverse both paused slidein; + +/* @keyframes duration | timing-function | delay | name */ +animation: 3s linear 1s slidein; + +/* @keyframes duration | name */ +animation: 3s slidein; +</pre> + +<div class="hidden" id="animation"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="note"> + Given the following animation: + <pre>@keyframes slidein { + from { transform: scaleX(0); } + to { transform: scaleX(1); } +}</pre> + </div> + <div class="row"> + <div class="cell"> + <button class="play" title="PLAY"></button> + </div> + <div class="cell flx"> + <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> + <div class="animation a1"></div> + </div> + </div> + <div class="row"> + <div class="cell"> + <button class="pause" title="PAUSE"></button> + </div> + <div class="cell flx"> + <div class="overlay">animation: 3s linear 1s slidein;</div> + <div class="animation a2"></div> + </div> + </div> + <div class="row"> + <div class="cell"> + <button class="pause" title="PAUSE"></button> + </div> + <div class="cell flx"> + <div class="overlay">animation: 3s slidein;</div> + <div class="animation a3"></div> + </div> + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +pre { margin-bottom: 0; } +svg { width: 1.5em; height: 1.5em; } + +button { + width: 27px; + height: 27px; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; + border-radius: 3px; + cursor: pointer; +} + +button.play { + background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play'); +} + +button.pause { + background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause'); +} + +button.restart { + background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart'); +} + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + box-sizing: border-box; + margin: .5em; + padding: 0; + background-color: #FFF; + overflow: hidden; + text-align: left; +} + +.flx { + flex: 1 0; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em; + font: .8em sans-serif; + text-align: left; + flex: none; +} + +.overlay { padding: .5em; } + +@keyframes slidein { + from { transform: scaleX(0); } + to { transform: scaleX(1); } +} + +.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } +.a2 { animation: 3s linear 1s slidein; } +.a3 { animation: 3s slidein; } + +.animation { + background: #3F87A6; + width: 100%; + height: calc(100% - 1.5em); + transform-origin: left center; +}</pre> + +<pre class="brush: js">window.addEventListener('load', function () { + var ANIMATION = Array.from(document.querySelectorAll('.animation')); + var BUTTON = Array.from(document.querySelectorAll('button')); + + function toggleButton (btn, type) { + btn.classList.remove('play', 'pause', 'restart'); + btn.classList.add(type); + btn.title = type.toUpperCase(type); + } + + function playPause (i) { + var btn = BUTTON[i]; + var anim = ANIMATION[i]; + + if (btn.classList.contains('play')) { + anim.style.animationPlayState = 'running'; + toggleButton(btn, 'pause'); + } else if (btn.classList.contains('pause')) { + anim.style.animationPlayState = 'paused'; + toggleButton(btn, 'play'); + } else { + anim.classList.remove('a' + (i + 1)); + setTimeout(function () { + toggleButton(btn, i === 0 ? 'play' : 'pause'); + anim.style.animationPlayState = ''; + anim.classList.add('a' + (i + 1)); + }, 100) + } + } + + ANIMATION.forEach(function (node, index) { + node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause'); }); + node.addEventListener('animationend', function () { toggleButton(BUTTON[index], 'restart'); }); + }); + + BUTTON.forEach(function (btn, index) { + btn.addEventListener('click', function () { playPause(index); }); + }); +})</pre> +</div> + +<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p> + +<p><a href="/ko/docs/Web/CSS/CSS_animated_properties">애니메이션 가능한 속성</a>을 확인해보세요. <a href="/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS 트랜지션</a>에도 적용된다는 점을 참고하세요.</p> + +<p>{{cssinfo}}</p> + +<h2 id="구문">구문</h2> + +<p>The <code>animation</code> property is specified as one or more single animations, separated by commas.</p> + +<p>Each individual animation is specified as:</p> + +<ul> + <li>zero or one occurrences of the following values: + <ul> + <li>{{cssxref("<single-transition-timing-function>")}}</li> + <li>{{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}}</li> + <li>{{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}}</li> + <li>{{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}}</li> + <li>{{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}}</li> + </ul> + </li> + <li>an optional name for the animation, which may be <code>none</code>, a {{cssxref("<custom-ident>")}}, or a {{cssxref("<string>")}}</li> + <li>zero, one, or two {{cssxref("<time>")}} values</li> +</ul> + +<p>The order of values within each animation definition is important: the first value that can be parsed as a {{cssxref("<time>")}} is assigned to the {{cssxref("animation-duration")}}, and the second one is assigned to {{cssxref("animation-delay")}}.</p> + +<p>The order within each animation definition is also important for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsed, keywords that are valid for properties other than {{cssxref("animation-name")}}, and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serialized, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code><a id="<single-animation-iteration-count>" name="<single-animation-iteration-count>"><single-animation-iteration-count></a></code></dt> + <dd>The number of times the animation is played. The value must be one of those available in {{cssxref("animation-iteration-count")}}.</dd> + <dt><a id="<single-animation-direction>" name="<single-animation-direction>"><code><single-animation-direction></code></a></dt> + <dd>The direction in which the animation is played. The value must be one of those available in {{cssxref("animation-direction")}}.</dd> + <dt><a id="<single-animation-fill-mode>" name="<single-animation-fill-mode>"><code><single-animation-fill-mode></code></a></dt> + <dd>Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in {{cssxref("animation-fill-mode")}}.</dd> + <dt><code><a id="<single-animation-play-state>" name="<single-animation-play-state>"><single-animation-play-state></a></code></dt> + <dd>Determines whether the animation is playing or not. The value must be one of those available in {{cssxref("animation-play-state")}}.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="Cylon_Eye">Cylon Eye</h3> + +<pre class="brush: html"><div class="view_port"> + <div class="polling_message"> + Listening for dispatches + </div> + <div class="cylon_eye"></div> +</div> +</pre> + +<pre class="brush: css">.polling_message { + color: white; + float: left; + margin-right: 2%; +} + +.view_port { + background-color: black; + height: 25px; + width: 100%; + overflow: hidden; +} + +.cylon_eye { + background-color: red; + background-image: linear-gradient(to right, + rgba(0, 0, 0, .9) 25%, + rgba(0, 0, 0, .1) 50%, + rgba(0, 0, 0, .9) 75%); + color: white; + height: 100%; + width: 20%; + + -webkit-animation: 4s linear 0s infinite alternate move_eye; + animation: 4s linear 0s infinite alternate move_eye; +} + +@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } + @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } +</pre> + +<p>{{EmbedLiveSample('Cylon_Eye')}}</p> + +<p>See <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Examples">Using CSS animations</a> for additional examples.</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p> + +<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p> + +<ul> + <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li> + <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li> + <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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('CSS3 Animations', '#animation', 'animation')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.animation")}}</p> + +<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3> + +<ul> + <li>Gecko has a bug whereby when you animate an offscreen element onscreen but specify a delay, Gecko does not repaint on some platforms, e.g. Windows ({{bug(1383239)}}). This has been fixed in Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planned for release in Firefox 57).</li> + <li>Another Gecko bug means that {{htmlelement("details")}} elements can't be made open by default using the <code>open</code> attribute if they have an animation active on them ({{bug(1382124)}}). Quantum CSS fixes this.</li> + <li>A further bug means that animations using em units are not affected by changes to the {{cssxref("font-size")}} on the animated element's parent, whereas they should be ({{bug(1254424)}}). Quantum CSS fixes this.</li> +</ul> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS 애니메이션 사용하기</a></li> + <li>JavaScript {{domxref("AnimationEvent")}} API</li> +</ul> diff --git a/files/ko/web/css/at-rule/index.html b/files/ko/web/css/at-rule/index.html new file mode 100644 index 0000000000..2991e685b0 --- /dev/null +++ b/files/ko/web/css/at-rule/index.html @@ -0,0 +1,76 @@ +--- +title: '@-규칙' +slug: Web/CSS/At-rule +tags: + - At-rule + - CSS + - CSS Reference +translation_of: Web/CSS/At-rule +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary"><strong>@-규칙</strong>은 식별자(identifier)가 뒤따르는 at 기호('<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>))로 시작하는 <a href="/ko/docs/Web/CSS/Syntax#CSS_statements" title="CSS statement">CSS 문</a>이며 다음 세미콜론('<code>;</code>' (<code>U+003B SEMICOLON</code>)) 또는 다음 <a href="/ko/docs/Web/CSS/Syntax#CSS_declarations_blocks">CSS 블록</a> 중 먼저 오는 쪽까지 모든 것을 포함합니다.</span></p> + +<pre class="brush: css">/* General structure */ +@IDENTIFIER (RULE); + +/* Example: tells browser to use UTF-8 character set */ +@charset "utf-8";</pre> + +<p>다음과 같이 식별자가 지정된 각각 다른 구문인 여러 at-규칙이 있습니다:</p> + +<ul> + <li>{{cssxref("@charset")}} — 스타일 시트에 의해 사용되는 문자 집합을 정의함.</li> + <li>{{cssxref("@import")}} — CSS 엔진에게 외부 스타일 시트를 포함하도록 알림.</li> + <li>{{cssxref("@namespace")}} — CSS 엔진에게 모든 콘텐츠가 XML 네임스페이스로 시작하(prefix가 붙)는 것이 고려되어야 함을 알림.</li> + <li><strong><em>중첩 @-규칙</em></strong> — 중첩 문의 부분 집합으로, 조건부 그룹 규칙 속뿐만 아니라 스타일 시트의 문으로 사용될 수 있습니다: + <ul> + <li>{{cssxref("@media")}} — 장치가 미디어 질의(<em>media query</em>)를 사용하여 정의된 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.</li> + <li>{{cssxref("@supports")}} — 브라우저가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.</li> + <li>{{cssxref("@document")}} {{experimental_inline}} — 스타일 시트가 적용되는 문서가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙. <em>(CSS Spec 레벨 4로 연기됨)</em></li> + <li>{{cssxref("@page")}} — 문서를 출력할 때 적용되는 레이아웃 변화의 양상(aspect)을 설명.</li> + <li>{{cssxref("@font-face")}} — 다운로드되는 외부 글꼴의 양상을 설명.</li> + <li>{{cssxref("@keyframes")}} — CSS 애니메이션 sequence 내 중간 단계의 양상을 설명.</li> + <li>{{cssxref("@viewport")}} {{experimental_inline}} — 작은 화면 장치를 위한 viewport의 양상을 설명. <em>(현재 Working Draft 단계임)</em></li> + <li>{{cssxref("@counter-style")}} — 미리 정의된 스타일 집합의 일부가 아닌 특정 카운터 스타일을 정의. <em>(Candidate Recommendation 단계이지만, 작성 중인 현재 Gecko에서만 구현됨)</em></li> + <li>{{cssxref("@font-feature-values")}} (<code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> 및 <code>@character-variant</code>와 함께)<br> + — OpenType에서 다르게 활성화된 기능에 대해 {{cssxref("font-variant-alternates")}}에서 일반 이름을 정의. <em>(Candidate Recommendation 단계이지만, 작성 중인 현재 Gekko에서만 구현됨)</em></li> + </ul> + </li> +</ul> + +<h2 id="조건부_그룹_규칙">조건부 그룹 규칙</h2> + +<p>속성값과 마찬가지로, 각각의 @-규칙은 다른 구문이 있습니다. 그럼에도 불구하고, 그 중 몇몇은 조건부 그룹 규칙(<strong>conditional group rules</strong>)으로 불리는 특별한 범주로 분류될 수 있습니다. 이들 문은 공통 구문을 공유하고 그 각각은 <em>중첩 문</em>(<em>규칙 집합(ruleset)</em> 또는 <em>중첩 @-규칙</em> 중 하나)을 포함할 수 있습니다. 게다가, 그들은 모두 일반 semantic 의미를 전달합니다. 그들은 모두 어떤 유형의 조건을 링크합니다, 언제라도 <strong>참</strong> 또는 <strong>거짓</strong> 중 하나로 평가하는. 조건을 <strong>참</strong>으로 평가하면, 그룹 내 모든 문이 적용됩니다.</p> + +<p>조건부 그룹 규칙은 <a href="http://dev.w3.org/csswg/css3-conditional/" title="CSS Conditional Rules Module Level 3">CSS 조건부 규칙 모듈 레벨 3</a>에서 정의되고 다음과 같습니다:</p> + +<ul> + <li>{{cssxref("@media")}},</li> + <li>{{cssxref("@supports")}},</li> + <li>{{cssxref("@document")}}. <em>(CSS Spec 레벨 4로 연기됨)</em></li> +</ul> + +<p>각 조건부 그룹은 또한 중첩 문을 포함할 수 있기에, 불특정한 양의 중첩이 있을 수 있습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>초기 정의</td> + </tr> + <tr> + <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td> + <td>{{Spec2('Compat')}}</td> + <td><code>@-webkit-keyframes</code> 표준화.</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/attribute_selectors/index.html b/files/ko/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..4e9cecff26 --- /dev/null +++ b/files/ko/web/css/attribute_selectors/index.html @@ -0,0 +1,228 @@ +--- +title: 특성 선택자 +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>특성 선택자</strong>는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.</p> + +<pre class="brush: css no-line-numbers">/* <a> elements with a title attribute */ +a[title] { + color: purple; +} + +/* <a> elements with an href matching "https://example.org" */ +a[href="https://example.org"] { + color: green; +} + +/* <a> elements with an href containing "example" */ +a[href*="example"] { + font-size: 2em; +} + +/* <a> elements with an href ending ".org" */ +a[href$=".org"] { + font-style: italic; +} + +/* <a> elements whose class attribute contains the word "logo" */ +a[class~="logo"] { + padding: 2px; +}</pre> + +<h2 id="구문">구문</h2> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> + <dd><code>attr</code>이라는 이름의 특성을 가진 요소를 선택합니다.</dd> + <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 이름의 특성값이 정확히 <code>value</code>인 요소를 선택합니다.</dd> + <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 이름의 특성값이 정확히 <code>value</code>인 요소를 선택합니다. <code>attr</code> 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.</dd> + <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 특성값을 가지고 있으며, 그 특성값이 정확히 <code>value</code>이거나 <code>value</code>로 시작하면서 <code>-</code>(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(<code>en-US</code>, <code>ko-KR</code> 등)가 일치하는지 확인할 때 사용합니다.</dd> + <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 특성값을 가지고 있으며, 접두사로 <code>value</code>가 값에 포함되어 있으면 이 요소를 선택합니다.</dd> + <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 특성값을 가지고 있으며, 접미사로 <code>value</code>가 값에 포함되어 있으면 이 요소를 선택합니다.</dd> + <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd><code>attr</code>이라는 특성값을 가지고 있으며, 값 안에 <code>value</code>라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd>괄호를 닫기 전에 <code>i</code> 혹은 <code>I</code>를 붙여주면 값의 대소문자를 구분하지 않습니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)</dd> + <dt><a id="case-sensitive" name="case-sensitive"><code>[attr operator value s]</code></a> {{experimental_inline}}</dt> + <dd>괄호를 닫기 전에 <code>s</code> 혹은 <code>S</code>를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="링크">링크</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Internal links, beginning with "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Links with "example" anywhere in the URL */ +a[href*="example"] { + background-color: silver; +} + +/* Links with "insensitive" anywhere in the URL, + regardless of capitalization */ +a[href*="insensitive" i] { + color: cyan; +} + +/* Links with "cAsE" anywhere in the URL, +with matching capitalization */ +a[href*="cAsE" s] { + color: pink; +} + +/* Links that end in ".org" */ +a[href$=".org"] { + color: red; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Internal link</a></li> + <li><a href="http://example.com">Example link</a></li> + <li><a href="#InSensitive">Insensitive internal link</a></li> + <li><a href="http://example.org">Example org link</a></li> +</ul></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("링크")}}</p> + +<h3 id="언어">언어</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* All divs with a `lang` attribute are bold. */ +div[lang] { + font-weight: bold; +} + +/* All divs in US English are blue. */ +div[lang~="en-us"] { + color: blue; +} + +/* All divs in Portuguese are green. */ +div[lang="pt"] { + color: green; +} + +/* All divs in Chinese are red, whether + simplified (zh-CN) or traditional (zh-TW). */ +div[lang|="zh"] { + color: red; +} + +/* All divs with a Traditional Chinese + `data-lang` are purple. */ +/* Note: You could also use hyphenated attributes + without double quotes */ +div[data-lang="zh-TW"] { + color: purple; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">世界您好！</div></pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("언어")}}</p> + +<h3 id="HTML_정렬_목록">HTML 정렬 목록</h3> + +<p>{{htmlattrxref("type", "input")}} 특성은 주로 {{htmlelement("input")}} 요소에 사용하므로, HTML 명세는 type의 대소문자를 구분하지 않고 선택하도록 요구하고 있습니다. 그러므로 {{htmlelement("ol")}}의 {{htmlattrxref("type", "ol")}}을 특성 선택자로 선택할 땐 {{anch("case-sensitive", "대소문자 구분")}} 수정자를 지정하지 않으면 동작하지 않습니다.</p> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */ +ol[type="a"] { + list-style-type: lower-alpha; + background: red; +} + +ol[type="a" s] { + list-style-type: lower-alpha; + background: lime; +} + +ol[type="A" s] { + list-style-type: upper-alpha; + background: lime; +}</pre> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><ol type="A"> + <li>Example list</li> +</ol></pre> + +<h4 id="결과_3">결과</h4> + +<p>{{EmbedLiveSample("HTML_정렬_목록")}}</p> + +<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('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>특성값 내에 존재하는 ASCII 문자의 대소문자를 구분하지 않는 수식자(modifier)를 추가하였습니다.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.attribute")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS {{cssxref("attr")}} 함수</li> +</ul> diff --git a/files/ko/web/css/backdrop-filter/index.html b/files/ko/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..62921e2fcc --- /dev/null +++ b/files/ko/web/css/backdrop-filter/index.html @@ -0,0 +1,146 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - CSS Property + - Graphics + - Layout + - Reference + - SVG + - SVG Filter + - Web + - 'recipe:css-property' +translation_of: Web/CSS/backdrop-filter +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>backdrop-filter</code></strong>는 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다.</span> 요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야 합니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */ +backdrop-filter: none; + +/* SVG 필터를 가리키는 URL */ +backdrop-filter: url(commonfilters.svg#filter); + +/* <filter-function> 값 */ +backdrop-filter: blur(2px); +backdrop-filter: brightness(60%); +backdrop-filter: contrast(40%); +backdrop-filter: drop-shadow(4px 4px 10px blue); +backdrop-filter: grayscale(30%); +backdrop-filter: hue-rotate(120deg); +backdrop-filter: invert(70%); +backdrop-filter: opacity(20%); +backdrop-filter: sepia(90%); +backdrop-filter: saturate(80%); + +/* 다중 필터 */ +backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); + +/* 전역 값 */ +backdrop-filter: inherit; +backdrop-filter: initial; +backdrop-filter: unset; +</pre> + +<h2 id="구문">구문</h2> + +<h3 id="값">값</h3> + +<dl> + <dt><code>none</code></dt> + <dd>뒤에 아무런 필터도 적용하지 않습니다.</dd> + <dt><code><filter-function-list></code></dt> + <dd>뒤에 적용할 {{cssxref("<filter-function>")}} 또는 <a href="/en-US/docs/Web/SVG/Element/filter">SVG필터</a>의 공백 구분 목록입니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.box { + background-color: rgba(255, 255, 255, 0.3); + border-radius: 5px; + font-family: sans-serif; + text-align: center; + line-height: 1; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + max-width: 50%; + max-height: 50%; + padding: 20px 40px; +} + +html, +body { + height: 100%; + width: 100%; +} + +body { + background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +.container { + align-items: center; + display: flex; + justify-content: center; + height: 100%; + width: 100%; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="container"> + <div class="box"> + <p>backdrop-filter: blur(10px)</p> + </div> +</div> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", 600, 400)}}</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('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td> + <td>{{Spec2('Filters 2.0')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.backdrop-filter")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("filter")}}</li> +</ul> diff --git a/files/ko/web/css/backface-visibility/index.html b/files/ko/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..49c365e5f9 --- /dev/null +++ b/files/ko/web/css/backface-visibility/index.html @@ -0,0 +1,217 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - CSS Property + - CSS Transforms + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/backface-visibility +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>backface-visibility</code></strong> 속성은 요소의 뒷면이 사용자를 향할 때 보여야 하는지 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div> + + + +<p>요소의 뒷면은 앞면의 거울상입니다. 2D 상태에서는 볼 수 없지만 변형을 통해 3D 공간에서 회전되면 노출될 수 있습니다. (2D 변형에는 원근이 없으므로 효과가 없습니다.)</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +backface-visibility: visible; +backface-visibility: hidden; + +/* 전역 값 */ +backface-visibility: inherit; +backface-visibility: initial; +backface-visibility: unset;</pre> + +<p><code>backface-visibility</code> 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>뒷면이 사용자를 향하면 보입니다.</dd> + <dt><code>hidden</code></dt> + <dd>뒷면이 사용자를 향해도 보이지 않습니다. 요소가 뒤를 향하면 사용자로부터 숨기는 것과 같습니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="육면체의_뒷면_비교">육면체의 뒷면 비교</h3> + +<p>아래 예제는 투명한 뒷면의 육면체와 불투명한 뒷면의 육면체를 하나씩 보입니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><table> + <tr> + <th><code>backface-visibility: visible;</code></th> + <th><code>backface-visibility: hidden;</code></th> + </tr> + <tr> + <td> + <div class="container"> + <div class="cube showbf"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + <p> + Since all faces are partially transparent, + the back faces (2, 4, 5) are visible + through the front faces (1, 3, 6). + </p> + </td> + <td> + <div class="container"> + <div class="cube hidebf"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + <p> + The three back faces (2, 4, 5) are + hidden. + </p> + </td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">/* Classes that will show or hide the + three back faces of the "cube" */ +.showbf div { + backface-visibility: visible; +} + +.hidebf div { + backface-visibility: hidden; +} + +/* Define the container div, the cube div, and a generic face */ +.container { + width: 150px; + height: 150px; + margin: 75px 0 0 75px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + perspective: 550px; + perspective-origin: 150% 150%; + transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* Define each face based on direction */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); +} + +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); +} + +/* Make the table a little nicer */ +th, p, td { + background-color: #EEEEEE; + margin: 0px; + padding: 6px; + font-family: sans-serif; + text-align: left; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('육면체의_뒷면_비교', '100%', 360)}}</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 Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.backface-visibility")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 변형 사용하기</a></li> +</ul> diff --git a/files/ko/web/css/background-attachment/index.html b/files/ko/web/css/background-attachment/index.html new file mode 100644 index 0000000000..a72fce431f --- /dev/null +++ b/files/ko/web/css/background-attachment/index.html @@ -0,0 +1,153 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-attachment +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/CSS">CSS</a> <strong><code>background-attachment</code></strong> 속성은 배경 이미지를 {{glossary("viewport", "뷰포트")}} 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */ +background-attachment: scroll; +background-attachment: fixed; +background-attachment: local; + +/* 전역 값 */ +background-attachment: inherit; +background-attachment: initial; +background-attachment: unset; +</pre> + +<p><code>background-attachment</code> 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>fixed</code></dt> + <dd>배경을 뷰포트에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 이 값은 {{cssxref("background-clip", "background-clip: text", "#text")}}와 호환되지 않습니다.</dd> + <dt><code>local</code></dt> + <dd>배경을 요소 콘텐츠에 대해 고정합니다. 요소에 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤됩니다. 배경 페인트 영역과 배경 위치 영역은 테두리 틀이 아닌 스크롤 가능 영역을 기준점으로 삼습니다.</dd> + <dt><code>scroll</code></dt> + <dd>배경을 요소 자체에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 즉 요소의 테두리에 배경 이미지를 부착한 것과 같은 효과입니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css; highlight:[3]; notranslate">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-attachment: fixed; +} +</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("간단한_예제")}}</p> + +<h3 id="다중_배경_이미지">다중 배경 이미지</h3> + +<p><code>background-attachment</code>는 다중 배경 이미지를 지원합니다. 각 배경에 대해 <code><attachment></code>를 지정하려면 쉼표로 구분하여 다수의 값을 제공하세요. 주어진 순서대로 배경에 적용합니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. + + Suddenly she came upon a little three-legged table, all made of solid + glass; there was nothing on it except a tiny golden key, and Alice's + first thought was that it might belong to one of the doors of the hall; + but, alas! either the locks were too large, or the key was too small, + but at any rate it would not open any of them. However, on the second + time round, she came upon a low curtain she had not noticed before, and + behind it was a little door about fifteen inches high: she tried the + little golden key in the lock, and to her great delight it fitted! +</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush:css; highlight:[3]; notranslate">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), + url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); + background-attachment: fixed, scroll; + background-repeat: no-repeat, repeat-y; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("다중_배경_이미지")}}</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('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>The shorthand property has been extended to support multiple backgrounds and the <code>local</code> value.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>No significant change.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.background-attachment")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">한 번에 여러 배경 사용하기</a></li> +</ul> diff --git a/files/ko/web/css/background-clip/index.html b/files/ko/web/css/background-clip/index.html new file mode 100644 index 0000000000..07d3676b80 --- /dev/null +++ b/files/ko/web/css/background-clip/index.html @@ -0,0 +1,129 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-clip +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>background-clip</code></strong> 속성은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>요소가 {{cssxref("background-image")}} 또는 {{cssxref("background-color")}}를 가지지 않으면, <code>background-clip</code>은 ({{cssxref("border-style")}} 또는 {{cssxref("border-image")}} 등으로 인해) 테두리에 투명하거나 반투명한 부분이 존재하는 경우에만 시각적 차이가 발생합니다. 그렇지 않은 경우 테두리가 차이점을 가립니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +background-clip: border-box; +background-clip: padding-box; +background-clip: content-box; +background-clip: text; + +/* 전역 값 */ +background-clip: inherit; +background-clip: initial; +background-clip: unset; +</pre> + +<h3 class="brush: css" id="값">값</h3> + +<dl> + <dt><code>border-box</code></dt> + <dd>배경이 테두리의 바깥 경계까지 차지합니다. (Z축 순서 상 테두리 아래 위치)</dd> + <dt><code>padding-box</code></dt> + <dd>배경이 안쪽 여백의 바깥 경계까지 차지합니다. 테두리 밑에는 배경을 그리지 않습니다.</dd> + <dt><code>content-box</code></dt> + <dd>배경을 콘텐츠 상자에 맞춰 그립니다.</dd> + <dt><code id="text">text</code> {{experimental_inline}}</dt> + <dd>배경을 전경 텍스트 위에만 그립니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p class="border-box">The background extends behind the border.</p> +<p class="padding-box">The background extends to the inside edge of the border.</p> +<p class="content-box">The background extends only to the edge of the content box.</p> +<p class="text">The background is clipped to the foreground text.</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">p { + border: .8em darkviolet; + border-style: dotted double; + margin: 1em 0; + padding: 1.4em; + background: linear-gradient(60deg, red, yellow, red, yellow, red); + font: 900 1.2em sans-serif; + text-decoration: underline; +} + +.border-box { background-clip: border-box; } +.padding-box { background-clip: padding-box; } +.content-box { background-clip: content-box; } + +.text { + background-clip: text; + -webkit-background-clip: text; + color: rgba(0,0,0,.2); +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 600, 580)}}</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('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}</td> + <td>{{Spec2('CSS4 Backgrounds')}}</td> + <td>Add <code>text</code> value.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.background-clip")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("clip-path")}} 속성은 배경 뿐 아니라 하나의 <u>요소 전체</u>에서 표시할 부분을 지정하는 클리핑 영역을 생성합니다.</li> + <li>배경 속성: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}</li> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 기본 박스 모델 입문</a></li> +</ul> diff --git a/files/ko/web/css/background-color/index.html b/files/ko/web/css/background-color/index.html new file mode 100644 index 0000000000..d0e7402d56 --- /dev/null +++ b/files/ko/web/css/background-color/index.html @@ -0,0 +1,169 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS Background + - CSS Property + - Graphics + - HTML Colors + - HTML Styles + - Layout + - Reference + - Styles + - Styling HTML +translation_of: Web/CSS/background-color +--- +<div>{{CSSRef}}</div> + +<p><a href="/en/CSS" title="CSS">CSS</a> <strong><code>background-color</code></strong> 속성은 요소의 배경 색을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush: css notranslate">/* 키워드 값 */ +background-color: red; +background-color: indigo; + +/* 16진수 값 */ +background-color: #bbff00; /* 완전 불투명 */ +background-color: #bf0; /* 완전 불투명 단축 */ +background-color: #11ffee00; /* 완전 투명 */ +background-color: #1fe0; /* 완전 투명 단축 */ +background-color: #11ffeeff; /* 완전 불투명 */ +background-color: #1fef; /* 완전 불투명 단축 */ + +/* RGB 값 */ +background-color: rgb(255, 255, 128); /* 완전 불투명 */ +background-color: rgba(117, 190, 218, 0.5); /* 50% 불투명도 */ + +/* HSL 값 */ +background-color: hsl(50, 33%, 25%); /* 완전 불투명 */ +background-color: hsla(50, 33%, 25%, 0.75); /* 75% 불투명도 */ + +/* 특별 키워드 값 */ +background-color: currentcolor; +background-color: transparent; + +/* 전역 값 */ +background-color: inherit; +background-color: initial; +background-color: unset;</pre> + +<p><code>background-color</code> 속성은 하나의 {{cssxref("<color>")}} 값을 사용해 지정합니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("color")}}</dt> + <dd>요소의 배경으로 사용할 단일 색상입니다. {{cssxref("background-image")}} 뒤에 렌더링 되므로, 이미지가 투명한 부분을 가지고 있으면 그 곳을 통해 볼 수 있습니다.</dd> +</dl> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.</p> + +<p>색상 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noopener">웹 콘텐츠 접근성 가이드라인</a>(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 <a href="/ko/docs/Web/CSS/font-weight">굵은</a> 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="exampleone"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="exampletwo"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="examplethree"> + Lorem ipsum dolor sit amet, consectetuer +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[2,7,12,17]; notranslate">.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제","200","150")}}</p> + +<ul> +</ul> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">명세</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 Backgrounds', '#background-color', 'background-color') }}</td> + <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}</td> + <td><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3">Backgrounds Level 3 GitHub issues</a></td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color') }}</td> + <td>No change.</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#background-color', 'background-color') }}</td> + <td></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.background-color")}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">더 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">한 번에 여러 배경 사용하기</a></li> + <li>{{cssxref("<color>")}} 자료형</li> + <li>색상 관련 다른 속성: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> + <li><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색입히기</a></li> +</ul> diff --git a/files/ko/web/css/background-image/index.html b/files/ko/web/css/background-image/index.html new file mode 100644 index 0000000000..0fce6c9b93 --- /dev/null +++ b/files/ko/web/css/background-image/index.html @@ -0,0 +1,152 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-image +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>background-image</code></strong> 속성은 요소의 배경 이미지를 한 개나 여러 개 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>여러 개의 배경 이미지는 쌓임 맥락에 따라 서로의 위에 놓입니다. 맨 처음 지정한 이미지가 제일 위에(사용자에게 제일 가까운 것 처럼) 위치합니다.</p> + +<p><a href="/ko/docs/Web/CSS/border">테두리</a>는 배경 이미지 위에, {{cssxref("background-color")}}는 밑에 그려집니다. 요소 박스와 테두리에 관련하여 배경 이미지를 어떻게 그릴지는 {{cssxref("background-clip")}}과 {{cssxref("background-origin")}} CSS 속성이 정의합니다.</p> + +<p>브라우저는 값에 유효하지 않은 URI를 지정하는 등 주어진 이미지를 그릴 수 없을 때 <code>none</code> 키워드를 사용한 것처럼 처리합니다.</p> + +<div class="note"><strong>참고:</strong> 지정한 이미지가 불투명해서 아래의 배경색을 볼 수 없더라도 {{cssxref("background-color")}}는 지정해야 합니다. 네트워크가 내려가는 등 이미지를 불러올 수 없는 상황에서 배경 색이 대체할 수 있기 때문입니다,</div> + +<h2 id="구문">구문</h2> + +<p>각각의 배경 이미지는 <code>{{anch("none")}}</code> 키워드나 {{cssxref("<image>")}} 값으로 지정할 수 있습니다.</p> + +<p>여러 개의 배경 이미지를 지정하려면 쉼표로 구분한 다수의 값을 지정하세요.</p> + +<pre class="brush: css notranslate">background-image: + linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), + url('https://mdn.mozillademos.org/files/7693/catfront.png');</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><a id="none" name="none"><code>none</code></a></dt> + <dd>배경 이미지의 부재를 나타내는 키워드입니다.</dd> + <dt>{{cssxref("<image>")}}</dt> + <dd>배경으로 사용할 이미지입니다. <a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">여러 개의 배경 이미지</a>를 사용할 땐 쉼표로 구분한 다수의 값을 지정하세요.</dd> +</dl> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>브라우저는 배경 이미지에 대한 어떠한 추가 정보도 접근성 보조 기술에 제공하지 않습니다. 특히 스크린 리더의 경우 배경 이미지의 존재 유무조차 알려주지 않습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="배경_이미지_레이어링">배경 이미지 레이어링</h3> + +<p>별 모양 이미지는 배경이 투명하고, 고양이 이미지 위에 위치합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div> + <p class="catsandstars"> + This paragraph is full of cats<br />and stars. + </p> + <p>This paragraph is not.</p> + <p class="catsandstars"> + Here are more cats for you.<br />Look at them! + </p> + <p>And no more.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">p { + font-size: 1.5em; + color: #FE7F88; + background-image: none; + background-color: transparent; +} + +div { + background-image: + url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); +} + +.catsandstars { + background-image: + url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), + url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-color: transparent; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('배경_이미지_레이어링')}}</p> + +<ul> +</ul> + +<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 Backgrounds', '#background-image', 'background-image') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any {{cssxref("<image>")}} CSS data type.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>From CSS1, the way images with and without intrinsic dimensions are handled is now described.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#background-image', 'background-image') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("css.properties.background-image")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">CSS로 이미지 스프라이트 구현하기</a></li> + <li>{{HTMLElement("img")}}</li> + <li>이미지 관련 자료형: {{cssxref("<image>")}}, {{cssxref("<gradient>")}}</li> + <li>이미지 관련 함수: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}}</li> +</ul> diff --git a/files/ko/web/css/background-origin/index.html b/files/ko/web/css/background-origin/index.html new file mode 100644 index 0000000000..4a92509f69 --- /dev/null +++ b/files/ko/web/css/background-origin/index.html @@ -0,0 +1,113 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-origin +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>background-origin</code></strong> 속성은 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div> + + + +<p>{{cssxref("background-attachment")}}가 <code>fixed</code>인 경우 <code>background-origin</code>은 무시됩니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */ +background-origin: border-box; +background-origin: padding-box; +background-origin: content-box; + +/* 전역 값 */ +background-origin: inherit; +background-origin: initial; +background-origin: unset; +</pre> + +<p><code>background-origin</code> 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>border-box</code></dt> + <dd>배경을 테두리 박스에 상대적으로 배치합니다.</dd> + <dt><code>padding-box</code></dt> + <dd>배경을 안쪽 여백 박스에 상대적으로 배치합니다.</dd> + <dt><code>content-box</code></dt> + <dd>배경을 콘텐츠 박스에 상대적으로 배치합니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="배경_원점_설정하기">배경 원점 설정하기</h3> + +<pre class="brush:css; highlight:[6]; notranslate">.example { + border: 10px double; + padding: 10px; + background: url('image.jpg'); + background-position: center left; + background-origin: content-box; +} +</pre> + +<pre class="brush:css; highlight:[6]; notranslate">#example2 { + border: 4px solid black; + padding: 10px; + background: url('image.gif'); + background-repeat: no-repeat; + background-origin: border-box; +} +</pre> + +<pre class="brush:css; highlight:[4]; notranslate">div { + background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */ + background-position: top right, 0px 0px; + background-origin: content-box, padding-box; +}</pre> + +<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('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.background-origin")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("background-clip")}}</li> +</ul> diff --git a/files/ko/web/css/background-repeat/index.html b/files/ko/web/css/background-repeat/index.html new file mode 100644 index 0000000000..5183ad67d6 --- /dev/null +++ b/files/ko/web/css/background-repeat/index.html @@ -0,0 +1,233 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-repeat +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>background-repeat</code></strong> 속성은 배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div> + + + +<p>반복한 이미지는 기본값에선 요소 크기에 따라 잘릴 수 있지만, 잘리지 않도록 배경 이미지 크기를 조절하거나(<code>round</code>) 끝에서 끝까지 고르게 분배(<code>space</code>)할 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */ +background-repeat: repeat-x; +background-repeat: repeat-y; +background-repeat: repeat; +background-repeat: space; +background-repeat: round; +background-repeat: no-repeat; + +/* 2개 값 구문: 가로 | 세로 */ +background-repeat: repeat space; +background-repeat: repeat repeat; +background-repeat: round space; +background-repeat: no-repeat round; + +/* 전역 값 */ +background-repeat: inherit; +background-repeat: initial; +background-repeat: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code><repeat-style></code></dt> + <dd>한 개 값 구문은 두 개 값 구문의 단축 형태입니다.</dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <td><strong>한 개 값</strong></td> + <td><strong>두 개 값</strong></td> + </tr> + <tr> + <td><code>repeat-x</code></td> + <td><code>repeat no-repeat</code></td> + </tr> + <tr> + <td><code>repeat-y</code></td> + <td><code>no-repeat repeat</code></td> + </tr> + <tr> + <td><code>repeat</code></td> + <td><code>repeat repeat</code></td> + </tr> + <tr> + <td><code>space</code></td> + <td><code>space space</code></td> + </tr> + <tr> + <td><code>round</code></td> + <td><code>round round</code></td> + </tr> + <tr> + <td><code>no-repeat</code></td> + <td><code>no-repeat no-repeat</code></td> + </tr> + </tbody> + </table> + 두 개 값 구문의 앞쪽은 가로 반복 방법을, 뒤쪽은 세로 반복 방법을 설정합니다. 각 방법의 동작 방식은 아래 표와 같습니다.</dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <td><code>repeat</code></td> + <td>요소의 배경 영역을 채울 때까지 이미지를 반복합니다. 마지막 반복 이미지가 넘칠 경우 잘라냅니다.</td> + </tr> + <tr> + <td><code>space</code></td> + <td>요소가 잘리지 않을 만큼 이미지를 반복합니다. 제일 처음과 마지막 반복 이미지는 요소의 양쪽 끝에 고정되고, 각 이미지 사이에 남은 여백을 고르게 분배합니다. 잘리지 않고 배치할 수 있는 이미지가 단 한 장인 경우가 아니라면 {{cssxref("background-position")}} 속성은 무시합니다. <code>space</code>를 사용했는데 이미지가 잘리는 경우는 그 크기가 너무 커서 한 장 조차 넣을 수 없는 경우뿐입니다.</td> + </tr> + <tr> + <td><code>round</code></td> + <td>가용 영역이 늘어나면 반복 이미지도 늘어나 여백을 남기지 않습니다. 이미지를 하나 더 추가할 공간이 생기면 (남은 공간 >= 이미지 너비의 절반) 비로소 반복 횟수를 하나 추가합니다. 이 때, 원래 존재하던 이미지는 모두 줄어들어 새로운 이미지를 위한 공간을 확보합니다. 예시: 원래 너비가 260px이고, 세 번 반복된 이미지는 각자 300px 너비가 될 때까지 늘어날 수 있습니다. 그 후에는 이미지를 추가하고, 각자 225px로 줄어듭니다.</td> + </tr> + <tr> + <td><code>no-repeat</code></td> + <td>이미지를 반복하지 않습니다. 따라서 배경 이미지 영역이 다 차지 않을 수 있습니다. 반복하지 않은 이미지의 위치는 {{cssxref("background-position")}} CSS속성이 설정합니다.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><ol> + <li>no-repeat + <div class="one"></div> + </li> + <li>repeat + <div class="two"></div> + </li> + <li>repeat-x + <div class="three"></div> + </li> + <li>repeat-y + <div class="four"></div> + </li> + <li>space + <div class="five"></div> + </li> + <li>round + <div class="six"></div> + </li> + <li>repeat-x, repeat-y (multiple images) + <div class="seven"></div> + </li> +</ol></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">/* Shared for all DIVS in example */ +ol, +li { + margin: 0; + padding: 0; +} +li { + margin-bottom: 12px; +} +div { + background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); + width: 160px; + height: 70px; +} + +/* Background repeats */ +.one { + background-repeat: no-repeat; +} +.two { + background-repeat: repeat; +} +.three { + background-repeat: repeat-x; +} +.four { + background-repeat: repeat-y; +} +.five { + background-repeat: space; +} +.six { + background-repeat: round; +} + +/* Multiple images */ +.seven { + background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), + url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); + background-repeat: repeat-x, + repeat-y; + height: 144px; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 240, 560)}}</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('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Adds support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the <code>space</code> and <code>round</code> keywords, and for backgrounds on inline-level elements by precisely defining the background painting area.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.background-repeat")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">한 번에 여러 배경 사용하기</a></li> +</ul> diff --git a/files/ko/web/css/background-size/index.html b/files/ko/web/css/background-size/index.html new file mode 100644 index 0000000000..db02fe7030 --- /dev/null +++ b/files/ko/web/css/background-size/index.html @@ -0,0 +1,196 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-size +--- +<div>{{CSSRef}}</div> + +<div><a href="/ko/docs/CSS">CSS</a> <strong><code>background-size</code></strong> 속성은 요소 배경 이미지의 크기를 설정합니다. 그대로 두거나, 늘리고 줄이거나, 공간에 맞출 수 있습니다.</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> + + + +<p>배경 이미지로 덮이지 않은 공간은 {{cssxref("background-color")}} 속성으로 채워지고, 배경 이미지에서 투명하거나 반투명한 부분을 통해서도 배경색이 보입니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">/* 키워드 값 */ +background-size: cover; +background-size: contain; + +/* 단일 값 구문 */ +/* 이미지 너비 (높이는 'auto'가 됨) */ +background-size: 50%; +background-size: 3.2em; +background-size: 12px; +background-size: auto; + +/* 두 개 값 구문 */ +/* 첫 번째 값: 이미지 너비, 두 번째 값: 이미지 높이 */ +background-size: 50% auto; +background-size: 3em 25%; +background-size: auto 6px; +background-size: auto auto; + +/* 다중 배경 */ +background-size: auto, auto; /* `auto auto`와 혼동하지 말 것 */ +background-size: 50%, 25%, 25%; +background-size: 6px, auto, contain; + +/* 전역 값 */ +background-size: inherit; +background-size: initial; +background-size: unset; +</pre> + +<p> <code>background-size</code> 속성은 다음 방법 중 하나로 지정할 수 있습니다. </p> + +<ul> + <li><code><a href="#contain">contain</a></code> 또는 <code><a href="#cover">cover</a></code> 키워드 값 사용.</li> + <li>너비 값만 사용. 높이는 자동으로 <code>{{anch("auto")}}</code>가 됩니다.</li> + <li>너비와 높이 값을 모두 사용. 첫 번째 값은 너비로, 두 번째 값은 높이를 설정합니다. 각 값은 {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, <code>{{anch("auto")}}</code>를 사용할 수 있습니다.</li> +</ul> + +<p>여러 배경 이미지의 사이즈를 지정하려면 각각의 값을 쉼표로 구분하세요.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><a id="contain" name="contain"><code>contain</code></a></dt> + <dd>이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정.</dd> + <dt><a id="cover" name="cover"><code>cover</code></a></dt> + <dd>이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로세로비가 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정합니다.</dd> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>배경 이미지의 원본 크기를 유지.</dd> + <dt id="length">{{cssxref("<length>")}}</dt> + <dd>원본 크기의 너비/높이를 주어진 값으로 늘리거나 줄임. 음수는 유효하지 않습니다.</dd> + <dt id="percentage">{{cssxref("<percentage>")}}</dt> + <dd>Stretches the image in the corresponding dimension to the specified percentage of the <em>background positioning area</em>. The background positioning area is determined by the value of {{cssxref("background-origin")}} (by default, the padding box). However, if the background's {{cssxref("background-attachment")}} value is <code>fixed</code>, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.</dd> +</dl> + +<h3 id="원본_크기와_비율">원본 크기와 비율</h3> + +<p>The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:</p> + +<ul> + <li>A bitmap image (such as JPG) always has intrinsic dimensions and proportions.</li> + <li>A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.</li> + <li>CSS {{cssxref("<gradient>")}}s have no intrinsic dimensions or intrinsic proportions.</li> + <li>Background images created with the {{cssxref("element()")}} function use the intrinsic dimensions and proportions of the generating element.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> The behavior of <code><gradient></code>s changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> In Gecko, background images created using the {{cssxref("element()")}} function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.</p> +</div> + +<p>Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:</p> + +<dl> + <dt>If both components of <code>background-size</code> are specified and are not <code>auto</code>:</dt> + <dd>The background image is rendered at the specified size.</dd> + <dt>If the <code>background-size</code> is <code>contain</code> or <code>cover</code>:</dt> + <dd>While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.</dd> + <dt>If the <code>background-size</code> is <code>auto</code> or <code>auto auto</code>:</dt> + <dd> + <ul> + <li>If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.</li> + <li>If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.</li> + <li>If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if <code>contain</code> had been specified instead.</li> + <li>If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.</li> + <li>If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.</li> + </ul> + </dd> + <dd> + <div class="note"><strong>Note:</strong> SVG images have a <code><a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> attribute that defaults to the equivalent of <code>contain</code>. In Firefox 43, as opposed to Chrome 52, an explicit <code>background-size</code> causes <code>preserveAspectRatio</code> to be ignored.</div> + </dd> + <dt>If the <code>background-size</code> has one <code>auto</code> component and one non-<code>auto</code> component:</dt> + <dd> + <ul> + <li>If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.</li> + <li>If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.</li> + </ul> + </dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.</p> +</div> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<p>Please see <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> for examples.</p> + +<h2 id="참고">참고</h2> + +<p>If you use a <code><gradient></code> as the background and specify a <code>background-size</code> to go with it, it's best not to specify a size that uses a single <code>auto</code> component, or is specified using only a width value (for example, <code>background-size: 50%</code>). Rendering of <code><gradient></code>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> and with <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a>.</p> + +<pre class="brush: css">.gradient-example { + width: 50px; + height: 100px; + background-image: linear-gradient(blue, red); + + /* Not safe to use */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; + + /* Safe to use */ + background-size: 25px 50px; + background-size: 50% 50%; +} +</pre> + +<p>Note that it's particularly not recommended to use a pixel dimension and an <code>auto</code> dimension with a <code><gradient></code>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.background-size")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li> + <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li> + <li>{{cssxref("object-fit")}}</li> +</ul> diff --git a/files/ko/web/css/background/index.html b/files/ko/web/css/background/index.html new file mode 100644 index 0000000000..1fd697b1d8 --- /dev/null +++ b/files/ko/web/css/background/index.html @@ -0,0 +1,178 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/background +--- +<div>{{CSSRef("CSS Background")}}</div> + +<p><a href="/ko/docs/Web/API/CSS">CSS </a><strong><code>background</code> </strong><a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div> + + + +<h2 id="구성_속성">구성 속성</h2> + +<p><code>background</code>는 단축 속성으로서 다음의 하위 속성을 포함합니다.</p> + +<ul> + <li>{{cssxref("background-attachment")}}</li> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> +</ul> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush: css notranslate">/* <background-color> 사용 */ +background: green; + +/* <bg-image>와 <repeat-style> 사용 */ +background: url("test.jpg") repeat-y; + +/* <box>와 <background-color> 사용 */ +background: border-box red; + +/* 단일 이미지, 중앙 배치 및 크기 조절 */ +background: no-repeat center/80% url("../img/image.png"); +</pre> + +<p><code>background</code> 속성을 쉼표로 구분해서 배경 레이어를 여러 개 지정할 수 있습니다.</p> + +<p>각 레이어의 구문은 다음과 같습니다.</p> + +<ul> + <li>각 레이어는 다음 값을 가지거나 가지지 않을 수 있습니다. + <ul> + <li><code><a href="#attachment"><attachment></a></code></li> + <li><code><a href="#bg-image"><bg-image></a></code></li> + <li><code><a href="#position"><position></a></code></li> + <li><code><a href="#bg-size"><bg-size></a></code></li> + <li><code><a href="#repeat-style"><repeat-style></a></code></li> + </ul> + </li> + <li><code><a href="#bg-size"><bg-size></a></code> 값은 <code><a href="#position"><position></a></code> 바로 뒤에만 위치할 수 있으며 '/' 문자로 구분해야 합니다. 예를 들면 "<code>center/80%</code>" 처럼 사용합니다.</li> + <li><code><a href="#box"><box></a></code> 값은 2개까지 가지거나 가지지 않을 수 있습니다. 1개 가진다면 {{cssxref("background-origin")}}과 {{cssxref("background-clip")}}을 모두 설정합니다. 2개 가진다면 처음 값은 {{cssxref("background-origin")}}, 두 번째 값은 {{cssxref("background-clip")}}을 설정합니다.</li> + <li><code><a href="#background-color"><background-color></a></code> 값은 마지막 레이어만 가질 수 있습니다.</li> +</ul> + +<h3 id="값"><a id="values" name="values">값</a></h3> + +<dl> + <dt><a id="attachment" name="attachment"><code><attachment></code></a></dt> + <dd>{{cssxref("background-attachment")}}</dd> + <dt><a id="box" name="box"><code><box></code></a></dt> + <dd>{{cssxref("background-clip")}}, {{cssxref("background-origin")}}</dd> + <dt><a id="background-color" name="background-color"><code><background-color></code></a></dt> + <dd>{{cssxref("background-color")}}</dd> + <dt><a id="bg-image" name="bg-image"><code><bg-image></code></a></dt> + <dd>{{Cssxref("background-image")}}</dd> + <dt><a id="position" name="position"><code><position></code></a></dt> + <dd>{{cssxref("background-position")}}</dd> + <dt><a id="repeat-style" name="repeat-style"><code><repeat-style></code></a></dt> + <dd>{{cssxref("background-repeat")}}</dd> + <dt><a id="bg-size" name="bg-size"><code><bg-size></code></a></dt> + <dd>{{cssxref("background-size")}}</dd> +</dl> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>브라우저는 배경 이미지에 대한 어떠한 추가 정보도 접근성 보조 기술에 제공하지 않습니다. 특히 스크린 리더의 경우 배경 이미지의 존재 유무조차 알려주지 않습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="색상_키워드와_이미지를_사용한_배경">색상 키워드와 이미지를 사용한 배경</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p class="topbanner"> + 작은 별<br/> + 반짝 반짝<br/> + 작은 별 +</p> +<p class="warning">문단 하나<p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.warning { + background: pink; +} + +.topbanner { + background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("색상_키워드와_이미지를_사용한_배경")}}</p> + +<ul> +</ul> + +<h2 id="Notes" name="Notes">명세</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('CSS3 Backgrounds', '#the-background', 'background')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background', 'background')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_.ED.98.B8.ED.99.98.EC.84.B1" name="Browser_.ED.98.B8.ED.99.98.EC.84.B1">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.background")}}</p> + +<h2 id="See_Also" name="See_Also">같이 보기</h2> + +<ul> + <li>{{cssxref("box-decoration-break")}}</li> + <li><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">한 번에 여러 배경 사용하기</a></li> +</ul> + +<p><span class="comment">Categoria</span></p> diff --git a/files/ko/web/css/basic-shape/index.html b/files/ko/web/css/basic-shape/index.html new file mode 100644 index 0000000000..1697320804 --- /dev/null +++ b/files/ko/web/css/basic-shape/index.html @@ -0,0 +1,179 @@ +--- +title: <basic-shape> +slug: Web/CSS/basic-shape +tags: + - CSS + - CSS Date Type + - CSS Shapes + - Reference +translation_of: Web/CSS/basic-shape +--- +<div>{{CSSRef}}</div> + +<p><strong><code><basic-shape></code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} 속성이 사용할 형태를 정의합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<p><code><basic-shape></code> 자료형은 아래의 기본 형태 함수 중 하나를 사용해 정의합니다.</p> + +<p>형태를 생성할 때, 형태의 기준 상자는 <code><basic-shape></code> 값을 사용하는 속성이 결정합니다. 형태의 좌표계는 기준 상자의 좌상단을 원점으로 하고, X축은 오른쪽, Y축은 아래쪽으로 나가게 됩니다. 백분율료 표현한 모든 길이는 기준 상자의 크기를 사용해 계산합니다.</p> + +<h3 id="형태_함수">형태 함수</h3> + +<p>다음의 형태를 지원합니다. 모든 <code><basic-shape></code> 값은 함수형 표기법을 사용하고, 여기서는 <a href="/ko/docs/Web/CSS/Value_definition_syntax">값 정의 구문</a>을 통해 정의합니다.</p> + +<dl> + <dt><code><a id="inset()" name="inset()"></a>inset()</code></dt> + <dd> + <pre class="syntaxbox"><code>inset( <shape-arg>{1,4} [round <border-radius>]? )</code></pre> + + <p>인셋(inset) 사각형을 정의합니다.</p> + + <p>매개변수 네 개를 모두 제공했을 땐 기준 상자의 상, 우, 하, 좌측 모서리에서 각각의 값만큼 안쪽으로 이동하여 인셋 사각형의 모서리를 구성합니다. 매개변수는 여백 단축 속성의 구분을 따르므로 네 모서리를 한 개, 두 개 등의 값만으로 정의할 수 있습니다.</p> + + <p>선택적 {{cssxref("border-radius", "<border-radius>")}} 매개변수를 <code>border-radius</code> 단축 속성 구문을 사용해 지정하면 인셋 사각형의 모서리를 둥글게 만들 수 있습니다.</p> + + <p>좌우 인셋 각각 75%처럼, 한 축의 인셋 쌍 값의 합이 요소가 차지하는 크기보다 큰 경우 면적 없는 형태를 정의합니다.</p> + + <div class="hidden"> + <p>For this specification, this results in an empty float area.</p> + </div> + </dd> + <dt><code><a id="circle()" name="circle()"></a>circle()</code></dt> + <dd> + <pre class="syntaxbox"><code><code><code>circle( [<shape-radius>]? [at <position>]? )</code></code></code></pre> + + <p><code><shape-radius></code> 매개변수는 원의 반지름 <em>r</em>을 지정합니다. 음수는 유효하지 않습니다. 백분율 값을 사용하면 기준 상자의 너비와 높이를 공식 <code>sqrt(width^2+height^2)/sqrt(2)</code>에 대입한 결과가 최종 값이 됩니다.</p> + + <p>{{cssxref("<position>")}} 매개변수는 원의 중심을 지정합니다. 생략할 경우 중앙을 기본값으로 사용합니다.</p> + </dd> + <dt><code><a id="ellipse()" name="ellipse()"></a>ellipse()</code></dt> + <dd> + <pre class="syntaxbox"><code><code><code>ellipse( [<shape-radius>{2}]? [at <position>]? )</code></code></code></pre> + + <p><code><shape-radius></code> 매개변수는 타원의 X축, Y축 반지름인 r<sub>x</sub>와 r<sub>y</sub>를 순서대로 지정합니다. 두 값 모두 음수는 유효하지 않습니다. 백분율 값을 사용하면 기준 상자의 너비(r<sub>x</sub>)와 높이(r<sub>y</sub>)를 사용해 계산합니다.</p> + + <p>{{cssxref("<position>")}} 매개변수는 타원의 중심을 지정합니다. 생략할 경우 중앙을 기본값으로 사용합니다.</p> + </dd> + <dt><code><a id="polygon()" name="polygon()"></a>polygon()</code></dt> + <dd> + <pre class="syntaxbox"><code>polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</code></pre> + + <p><code><fill-rule></code> represents the <a href="/en-US/docs/Web/SVG/Attribute/fill-rule">filling rule</a> used to determine the interior of the polygon. Possible values are <code>nonzero</code> and <code>evenodd</code>. Default value when omitted is <code>nonzero</code>.</p> + + <p>Each pair argument in the list represents <em>x<sub>i</sub></em> and <em>y<sub>i</sub></em> - the x and y axis coordinates of the i<sup>th</sup> vertex of the polygon.</p> + </dd> + <dt><code><a id="path()" name="path()"></a>path()</code></dt> + <dd> + <pre class="syntaxbox"><code>path( [<fill-rule>,]? <string>)</code></pre> + + <p>The optional <code><fill-rule></code> represents the <a href="/en-US/docs/Web/SVG/Attribute/fill-rule">filling rule</a> used to determine the interior of the path. Possible values are <code>nonzero</code> and <code>evenodd</code>. Default value when omitted is <code>nonzero</code>.</p> + + <p>The required <string> is an <a href="/en-US/docs/SVG/Attribute/d">SVG Path</a> string encompassed in quotes</p> + </dd> +</dl> + +<p>The arguments not defined above are defined as follows:</p> + +<pre class="syntaxbox"><code><shape-arg> = <length> | <percentage> +<shape-radius> = <length> | <percentage> | closest-side | farthest-side</code></pre> + +<p>Defines a radius for a circle or ellipse. If omitted it defaults to <code>closest-side</code>.</p> + +<p><code>closest-side</code> uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.</p> + +<p><code>farthest-side</code> uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.</p> + +<h2 id="기본_형태의_계산값">기본 형태의 계산값</h2> + +<p>The values in a <code><basic-shape></code> function are computed as specified, with these exceptions:</p> + +<ul> + <li>Omitted values are included and compute to their defaults.</li> + <li>A {{cssxref("<position>")}} value in <code>circle()</code> or <code>ellipse()</code> is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.</li> + <li>A <a href="/en-US/docs/Web/CSS/border-radius"><code><border-radius></code></a> value in <code>inset()</code> is computed as an expanded list of all eight {{cssxref("length")}} or percentage values.</li> +</ul> + +<h2 id="기본_형태의_보간법">기본 형태의 보간법</h2> + +<p>When animating between one <code><basic-shape></code> and another, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc()")}} where possible. If list values are not one of those types but are identical, those values do interpolate.</p> + +<ul> + <li>Both shapes must use the same reference box.</li> + <li>If both shapes are the same type, that type is <code>ellipse()</code> or <code>circle()</code>, and none of the radii use the <code>closest-side</code> or <code>farthest-side</code> keywords, interpolate between each value in the shape functions.</li> + <li>If both shapes are of type <code>inset()</code>, interpolate between each value in the shape functions.</li> + <li>If both shapes are of type <code>polygon()</code>, both polygons have the same number of vertices, and use the same <code><fill-rule></code>, interpolate between each value in the shape functions.</li> + <li>If both shapes are of type <code>path()</code>, both paths strings have the same number and types of path data commands in the same order, interpolate each path data command as real numbers.</li> + <li>In all other cases no interpolation occurs.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="Animated_polygon">Animated polygon</h3> + +<p>In this example, we use the <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> at-rule to animate a clip path between two polygons. Note that both polygons have the same number of vertices, which is necessary for this type of animation to work.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div></div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div { + width: 300px; + height: 300px; + background: repeating-linear-gradient(red, orange 50px); + clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); + animation: 4s poly infinite alternate ease-in-out; + margin: 10px auto; +} + +@keyframes poly { + from { + clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); + } + + to { + clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); + } +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('Animated_polygon','340', '340')}}</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 Shapes', '#basic-shape-functions', '<basic-shape>') }}</td> + <td>{{ Spec2('CSS Shapes') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.basic-shape")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><basic-shape></code>를 사용하는 속성: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}</li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit Shape Paths in CSS — Firefox Developer Tools</a></li> +</ul> diff --git a/files/ko/web/css/blend-mode/index.html b/files/ko/web/css/blend-mode/index.html new file mode 100644 index 0000000000..f5570e1ce3 --- /dev/null +++ b/files/ko/web/css/blend-mode/index.html @@ -0,0 +1,404 @@ +--- +title: <blend-mode> +slug: Web/CSS/blend-mode +tags: + - CSS + - CSS Data Type + - Reference + - 블렌드 모드 + - 혼합 모드 +translation_of: Web/CSS/blend-mode +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS </a><strong><code><blend-mode></code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의합니다. {{cssxref("background-blend-mode")}}와 {{cssxref("mix-blend-mode")}} 속성에서 사용합니다.</p> + +<p>최종 색상은 혼합 모드를 적용한 레이어 각각의 픽셀 하나씩에 대해 전경색과 배경색을 취한 후 모드에 따라 계산을 수행하여 나온 새로운 값입니다.</p> + +<h2 id="구문">구문</h2> + +<p><code><blend-mode></code> 자료형은 다음 키워드 값 중 하나를 선택해 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code><a id="normal" name="normal">normal</a></code></dt> + <dd> + <p>배경색에 상관하지 않고 최상단 색을 사용합니다.<br> + 두 장의 불투명한 종이를 겹친 것과 같습니다.</p> + + <div id="normal_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: normal; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('normal_example', "300", "300") }}</p> + </dd> + <dt><code><a id="multiply" name="multiply">multiply</a></code></dt> + <dd> + <p>최종 색은 전경과 배경색을 곱한 값입니다.<br> + 검은 레이어는 최종 레이어를 검은 색으로 만들고, 하얀 레이어는 아무런 변화도 주지 않습니다.<br> + 투명한 필름에 프린트한 이미지를 서로 겹친 것과 같습니다.</p> + + <div id="multiply_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: multiply; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('multiply_example', "300", "300") }}</p> + </dd> + <dt><code><a id="screen" name="screen">screen</a></code></dt> + <dd> + <p>최종 색은 전경과 배경색을 각각 반전한 후 서로 곱해 나온 값을 다시 반전한 값입니다.<br> + 검은 레이어는 아무런 변화도 주지 않고, 하얀 레이어는 최종 레이어를 하얗게 만듭니다.<br> + 프로젝터 두 대로 이미지를 겹친 것과 같습니다.</p> + + <div id="screen_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: screen; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('screen_example', "300", "300") }}</p> + </dd> + <dt><code><a id="overlay" name="overlay">overlay</a></code></dt> + <dd>배경색이 더 어두운 경우 <code>multiply</code>, 더 밝은 경우 <code>screen</code>을 적용합니다.<br> + <code>hard-light</code>와 같지만 배경과 전경을 뒤집은 것입니다. + <div id="overlay_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: overlay; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('overlay_example', "300", "300") }}</p> + </dd> + <dt><code><a id="darken" name="darken">darken</a></code></dt> + <dd> + <p>최종 색은 각각의 색상 채널에 대해 제일 어두운 값을 취한 결과입니다.</p> + + <div id="darken_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: darken; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('darken_example', "300", "300") }}</p> + </dd> + <dt><code><a id="lighten" name="lighten">lighten</a></code></dt> + <dd> + <p>최종 색은 각각의 색상 채널에 대해 제일 밝은 값을 취한 결과입니다.</p> + + <div id="lighten_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: lighten; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('lighten_example', "300", "300") }}</p> + </dd> + <dt><code><a id="color-dodge" name="color-dodge">color-dodge</a></code></dt> + <dd> + <p>최종 색은 배경색을 전경색의 역으로 나눈 결과입니다.<br> + 검은 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 제일 밝은 색이 됩니다.<br> + <code>screen</code>과 유사하지만, 전경색의 밝기가 배경색과 동일하기만 해도 최대의 밝기를 가진 색을 반환합니다.</p> + + <div id="color-dodge_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color-dodge; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('color-dodge_example', "300", "300") }}</p> + </dd> + <dt><code><a id="color-burn" name="color-burn">color-burn</a></code></dt> + <dd> + <p>최종 색은 배경색을 반전한 후 전경색으로 나누고, 다시 반전한 결과입니다.<br> + 하얀 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 결과는 검은색입니다.<br> + <code>multiply</code>와 유사하지만, 전경색의 밝기가 배경색의 역과 동일하기만 해도 검은색을 반환합니다.</p> + + <div id="color-burn_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color-burn; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('color-burn_example', "300", "300") }}</p> + </dd> + <dt><code><a id="hard-light" name="hard-light">hard-light</a></code></dt> + <dd> + <p>전경색이 더 어두운 경우 <code>multiply</code>, 더 밝은 경우 <code>screen</code>을 적용합니다.<br> + <code>overlay</code>와 같지만 배경과 전경을 뒤집은 것입니다.<br> + 배경색에 스포트라이트를 "강렬하게" 비춘 효과와 유사합니다.</p> + + <div id="hard-light_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: hard-light; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('hard-light_example', "300", "300") }}</p> + </dd> + <dt><code><a id="soft-light" name="soft-light">soft-light</a></code></dt> + <dd> + <p><code>hard-light</code>와 유사하지만 더 부드럽습니다.<br> + <code>hard-light</code>와 비슷하게 동작합니다.<br> + 배경색에 스포트라이트를 산란시켜 비춘 효과와 유사합니다.</p> + + <div id="soft-light_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: soft-light; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('soft-light_example', "300", "300") }}</p> + </dd> + <dt><code><a id="difference" name="difference">difference</a></code></dt> + <dd> + <p>최종 색은 두 색상 중 더 어두운 색을 밝은 색에서 뺀 결과입니다.<br> + 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.</p> + + <div id="difference_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: difference; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('difference_example', "300", "300") }}</p> + </dd> + <dt><code><a id="exclusion" name="exclusion">exclusion</a></code></dt> + <dd> + <p><code>difference</code>와 유사하지만 더 적은 대비를 가진 색을 반환합니다.<br> + <code>difference</code>와 마찬가지로 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.</p> + + <div id="exclusion_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: exclusion; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('exclusion_example', "300", "300") }}</p> + </dd> + <dt><code><a id="hue" name="hue">hue</a></code></dt> + <dd> + <p>최종 색은 전경색의 색조를 가지며 배경색의 채도와 밝기를 가집니다.</p> + + <div id="hue_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: hue; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('hue_example', "300", "300") }}</p> + </dd> + <dt><code><a id="saturation" name="saturation">saturation</a></code></dt> + <dd> + <p>최종 색은 전경색의 채도를 가지며 배경색의 색조와 밝기를 가집니다.<br> + 색조 없는 순수한 회색 배경으로는 아무런 효과도 없습니다.</p> + + <div id="saturation_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: saturation; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('saturation_example', "300", "300") }}</p> + </dd> + <dt><code><a id="color" name="color">color</a></code></dt> + <dd> + <p>최종 색은 전경색의 색조와 채도를 가지며 배경색의 밝기를 가집니다.<br> + 회색조를 유지하므로 전경을 색칠할 때 사용할 수 있습니다.</p> + + <div id="color_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('color_example', "300", "300") }}</p> + </dd> + <dt><code><a id="luminosity" name="luminosity">luminosity</a></code></dt> + <dd> + <p>최종 색은 전경색의 밝기를 가지며 배경색의 색조와 채도를 가집니다.<br> + <code>color</code>와 동일하지만 배경과 전경을 뒤집은 것입니다.</p> + + <div id="luminosity_example"> + <div class="hidden"> + <pre class="brush: html"><div id="div"></div></pre> + + <pre class="brush: css">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: luminosity; +}</pre> + </div> + </div> + + <p>{{ EmbedLiveSample('luminosity_example', "300", "300") }}</p> + </dd> +</dl> + +<h2 id="혼합_모드의_보간">혼합 모드의 보간</h2> + +<p>혼합 모드는 보간 대상이 아니며 모든 변경점은 즉시 발생합니다.</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('Compositing', '#ltblendmodegt', '<blend-mode>') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.blend-mode")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><code><blend-mode></code>를 사용하는 속성: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}</li> +</ul> + +<p>각각의 혼합 모드에 대한 설명을 다루는 외부 웹 페이지:</p> + +<ul> + <li>위키백과 <a href="https://ko.wikipedia.org/wiki/%EB%B8%94%EB%A0%8C%EB%93%9C_%EB%AA%A8%EB%93%9C">블렌드 모드</a></li> + <li>Adobe <a href="https://helpx.adobe.com/kr/photoshop/using/blending-modes.html">Adobe Photoshop에서의 혼합 모드</a></li> +</ul> diff --git a/files/ko/web/css/border-bottom-color/index.html b/files/ko/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..eddf531cdc --- /dev/null +++ b/files/ko/web/css/border-bottom-color/index.html @@ -0,0 +1,114 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-bottom-color +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>border-bottom-color</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 아래쪽 테두리 색상을 지정합니다.</span> {{cssxref("border-color")}} 또는 {{cssxref("border-bottom")}} 단축 속성으로도 지정할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers language-css">/* <color> 값 */ +border-bottom-color: red; +border-bottom-color: #ffbb00; +border-bottom-color: rgb(255, 0, 0); +border-bottom-color: hsla(100%, 50%, 25%, 0.75); +border-bottom-color: currentColor; +border-bottom-color: transparent; + +/* 전역 값 */ +border-bottom-color: inherit; +border-bottom-color: initial; +border-bottom-color: unset; +</pre> + +<p><code>border-bottom-color</code> 속성은 하나의 값을 사용해 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>아래쪽 테두리의 색상.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="테두리를_가진_간단한_상자">테두리를 가진 간단한 상자</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="mybox"> + <p>This is a box with a border around it. + Note which side of the box is + <span class="redtext">red</span>.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.mybox { + border: solid 0.3em gold; + border-bottom-color: red; + width: auto; +} + +.redtext { + color: red; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('테두리를_가진_간단한_상자')}}</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('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-bottom-color")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}.</li> + <li>다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-left-color")}}.</li> + <li>아래쪽 테두리 관련 CSS 속성: {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-width")}}.</li> +</ul> diff --git a/files/ko/web/css/border-bottom-style/index.html b/files/ko/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..7cbdb4d17a --- /dev/null +++ b/files/ko/web/css/border-bottom-style/index.html @@ -0,0 +1,134 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-bottom-style +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-bottom-style</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소 테두리의 아래쪽 스타일을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}</div> + + + +<div class="note"><strong>참고:</strong> 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 값 */ +border-bottom-style: none; +border-bottom-style: hidden; +border-bottom-style: dotted; +border-bottom-style: dashed; +border-bottom-style: solid; +border-bottom-style: double; +border-bottom-style: groove; +border-bottom-style: ridge; +border-bottom-style: inset; +border-bottom-style: outset; + +/* 전역 값 */ +border-bottom-style: inherit; +border-bottom-style: initial; +border-bottom-style: unset; +</pre> + +<p><code>border-bottom-style</code> 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.</p> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Define look of the table */ +table { + border-width: 2px; + background-color: #52E385; +} +tr, td { + padding: 3px; +} + +/* border-bottom-style example classes */ +.b1 {border-bottom-style: none;} +.b2 {border-bottom-style: hidden;} +.b3 {border-bottom-style: dotted;} +.b4 {border-bottom-style: dashed;} +.b5 {border-bottom-style: solid;} +.b6 {border-bottom-style: double;} +.b7 {border-bottom-style: groove;} +.b8 {border-bottom-style: ridge;} +.b9 {border-bottom-style: inset;} +.b10 {border-bottom-style: outset;}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('예제', 300, 200)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-border-style', 'border-bottom-style')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-bottom-style")}}</p> + +<h2 id="See_Also" name="See_Also">같이 보기</h2> + +<ul> + <li>테두리 스타일 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-left-style")}}, {{cssxref("border-style")}}.</li> + <li>아래쪽 테두리 관련 CSS 속성: {{cssxref("border-bottom")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-bottom-width")}}.</li> +</ul> diff --git a/files/ko/web/css/border-bottom-width/index.html b/files/ko/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..eaf386b9a1 --- /dev/null +++ b/files/ko/web/css/border-bottom-width/index.html @@ -0,0 +1,150 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-bottom-width +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-bottom-width</code></strong> 속성은 요소의 아래 테두리 너비를 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +border-bottom-width: thin; +border-bottom-width: medium; +border-bottom-width: thick; + +/* <length> 값 */ +border-bottom-width: 10em; +border-bottom-width: 3vmax; +border-bottom-width: 6px; + +/* 전역 값 */ +border-bottom-width: inherit; +border-bottom-width: initial; +border-bottom-width: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code><line-width></code></dt> + <dd>테두리의 너비입니다. 0 이상의 {{cssxref("<length>")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다. + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>thin</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thin; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">얇은 테두리</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>medium</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: medium; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">중간 테두리</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>thick</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thick; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">굵은 테두리</td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>참고:</strong> 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 <code>thin ≤ medium ≤ thick</code>이고, 하나의 문서 내에서 동일합니다.</p> + </div> + </dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="아래_테두리의_너비_비교">아래 테두리의 너비 비교</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Element 1</div> +<div>Element 2</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + border: 1px solid red; + margin: 1em 0; +} + +div:nth-child(1) { + border-bottom-width: thick; +} +div:nth-child(2) { + border-bottom-width: 2em; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('아래_테두리의_너비_비교', '100%')}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-bottom-width")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>테두리 너비 관련 CSS 속성: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, and {{Cssxref("border-width")}}.</li> + <li>아래 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}}, and {{Cssxref("border-bottom-color")}}.</li> +</ul> diff --git a/files/ko/web/css/border-bottom/index.html b/files/ko/web/css/border-bottom/index.html new file mode 100644 index 0000000000..fc203bb67b --- /dev/null +++ b/files/ko/web/css/border-bottom/index.html @@ -0,0 +1,109 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 테두리 +translation_of: Web/CSS/border-bottom +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>border-bottom</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 아래쪽 테두리를 설정합니다.</span> {{cssxref("border-bottom-width")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-color")}}의 값을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div> + + + +<p>다른 단축 속성과 마찬가지로, <code>border-bottom</code>는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.</p> + +<pre class="brush: css">border-bottom-style: dotted; +border-bottom: thick green; +</pre> + +<pre class="brush: css">border-bottom-style: dotted; +border-bottom: none thick green; +</pre> + +<p>따라서 <code>border-bottom</code>보다 먼저 지정한 {{cssxref("border-bottom-style")}}의 값은 무시됩니다. {{cssxref("border-bottom-style")}}의 기본값은 <code>none</code>이므로, <code>border-style</code>을 명시하지 않으면 테두리를 만들지 않습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">border-bottom: 1px; +border-bottom: 2px dotted; +border-bottom: medium dashed green; +</pre> + +<p><code>border-bottom</code>은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code><br-width></code></dt> + <dd>{{cssxref("border-bottom-width")}}.</dd> + <dt><code><br-style></code></dt> + <dd>{{cssxref("border-bottom-style")}}.</dd> + <dt>{{cssxref("<color>")}}</dt> + <dd>{{cssxref("border-bottom-color")}}.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><div> + 아래쪽 테두리를 가진 요소입니다. +</div></pre> + +<pre class="brush: css">div { + border-bottom: 4px dashed blue; + background-color: gold; + height: 100px; + width: 100px; + font-weight: bold; + text-align: center; +} +</pre> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#border-bottom', 'border-bottom')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No direct changes, though the modification of values for the {{cssxref("border-bottom-color")}} do apply to it.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.border-bottom")}}</p> diff --git a/files/ko/web/css/border-collapse/index.html b/files/ko/web/css/border-collapse/index.html new file mode 100644 index 0000000000..8f024cf916 --- /dev/null +++ b/files/ko/web/css/border-collapse/index.html @@ -0,0 +1,148 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - CSS Borders + - CSS Property + - CSS Tables + - Reference +translation_of: Web/CSS/border-collapse +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-collapse</code></strong> CSS 속성은 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있습니다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div> + + + +<p>분리(<em>separated</em>) 모델은 HTML 표 테두리 전통 모델입니다. 인접 셀은 각각 자신의 고유 테두리가 있습니다. 그 사이의 간격은 {{ Cssxref("border-spacing") }} 속성에 의해 주어집니다.</p> + +<p>상쇄(<em>collapsed</em>) 테두리 모델에서는, 인접 표 셀은 테두리를 공유합니다. 그 모델에서는, <code>inset</code>의 {{ Cssxref("border-style") }} 값은 <code>groove</code>처럼, <code>outset</code>은 <code>ridge</code>처럼 행동합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css">/* Keyword values */ +border-collapse: collapse; +border-collapse: separate; + +/* Global values */ +border-collapse: inherit; +border-collapse: initial; +border-collapse: unset;</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>separate</code></dt> + <dd>분리된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다. 기본값입니다.</dd> + <dt><code>collapse</code></dt> + <dd>상쇄된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="A_colorful_table_of_browser_engines" name="A_colorful_table_of_browser_engines">브라우저 엔진의 다색 표</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table class="separate"> + <caption><code>border-collapse: separate</code></caption> + <tbody> + <tr><th>Browser</th> <th>Layout Engine</th> + </tr> + <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td> + </tr> + <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td> + </tr> + <tr><td class="sa">Safari</td> <td class="wk">Webkit</td> + </tr> + <tr><td class="ch">Chrome</td> <td class="bk">Blink</td> + </tr> + <tr><td class="op">Opera</td> <td class="bk">Blink</td> + </tr> + </tbody> +</table> +<table class="collapse"> + <caption><code>border-collapse: collapse</code></caption> + <tbody> + <tr><th>Browser</th> <th>Layout Engine</th> + </tr> + <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td> + </tr> + <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td> + </tr> + <tr><td class="sa">Safari</td> <td class="wk">Webkit</td> + </tr> + <tr><td class="ch">Chrome</td> <td class="bk">Blink</td> + </tr> + <tr><td class="op">Opera</td> <td class="bk">Blink</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.collapse { + border-collapse: collapse; +} +.separate { + border-collapse: separate; +} +table { + display: inline-table; + margin: 1em; + border: dashed 6px; + border-width: 6px; +} +table th, table td { + border: solid 3px; +} +.fx { border-color: orange blue; } +.gk { border-color: black red; } +.ie { border-color: blue gold; } +.tr { border-color: aqua; } +.sa { border-color: silver blue; } +.wk { border-color: gold blue; } +.ch { border-color: red yellow green blue; } +.bk { border-color: navy blue teal aqua; } +.op { border-color: red; }</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}</p> + +<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('CSS2.1', 'tables.html#borders', 'border-collapse') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.properties.border-collapse")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("border-spacing")}}, {{cssxref("border-style")}}</li> + <li>The <code>border-collapse</code> property alters the appearance of the {{htmlelement("table")}} HTML element.</li> +</ul> diff --git a/files/ko/web/css/border-color/index.html b/files/ko/web/css/border-color/index.html new file mode 100644 index 0000000000..4d5ab51a4c --- /dev/null +++ b/files/ko/web/css/border-color/index.html @@ -0,0 +1,184 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-color +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>border-color</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 모든 면의 테두리 색상을 설정합니다.</span></p> + +<div>{{EmbedInteractiveExample("pages/css/border-color.html")}}</div> + + + +<p>각 면 테두리의 색상은 {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}를 사용해 정할 수 있습니다. 아니면 쓰기 방향에 따라 달라지는 속성인 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}}을 사용할 수도 있습니다.</p> + +<p>테두리 색상에 대해 더 알아보려면 <a href="/ko/docs/Web/HTML/Applying_color#테두리">CSS로 HTML 요소에 색 입히기</a> 문서를 참고하세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* <color> 값 */ +border-color: red; + +/* 세로방향 | 가로방향 */ +border-color: red #f015ca; + +/* 위 | 가로방향 | 아래 */ +border-color: red rgb(240,30,50,.7) green; + +/* 위 | 오른쪽 | 아래 | 왼쪽 */ +border-color: red yellow green blue; + +/* 전역 값 */ +border-color: inherit; +border-color: initial; +border-color: unset; +</pre> + +<p><code>border-color</code> 속성은 한 개에서 네 개의 값을 사용해서 지정할 수 있습니다.</p> + +<ul> + <li><strong>한 개</strong>의 값을 사용하면 모든 네 면에 동일한 색상을 적용합니다.</li> + <li><strong>두 개</strong>의 값을 사용하면 첫 번째 값이 위아래, 두 번째 값이 좌우의 색상을 맡습니다.</li> + <li><strong>세 개</strong>의 값을 사용하면 첫 번째 값이 위, 두 번째 값이 좌우, 세 번째 값이 아래의 색상을 맡습니다.</li> + <li><strong>네 개</strong>의 값을 사용하면 각각 순서대로 위, 오른쪽, 아래, 왼쪽(시계방향) 순서로 색상을 적용합니다.</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>테두리의 색상.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="border-color의_모든_사용법"><code>border-color</code>의 모든 사용법</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div id="justone"> + <p><code>border-color: red;</code>는 아래와 같습니다.</p> + <ul><li><code>border-top-color: red;</code></li> + <li><code>border-right-color: red;</code></li> + <li><code>border-bottom-color: red;</code></li> + <li><code>border-left-color: red;</code></li> + </ul> +</div> +<div id="horzvert"> + <p><code>border-color: gold red;</code>는 아래와 같습니다.</p> + <ul><li><code>border-top-color: gold;</code></li> + <li><code>border-right-color: red;</code></li> + <li><code>border-bottom-color: gold;</code></li> + <li><code>border-left-color: red;</code></li> + </ul> +</div> +<div id="topvertbott"> + <p><code>border-color: red cyan gold;</code>는 아래와 같습니다.</p> + <ul><li><code>border-top-color: red;</code></li> + <li><code>border-right-color: cyan;</code></li> + <li><code>border-bottom-color: gold;</code></li> + <li><code>border-left-color: cyan;</code></li> + </ul> +</div> +<div id="trbl"> + <p><code>border-color: red cyan black gold;</code>는 아래와 같습니다.</p> + <ul><li><code>border-top-color: red;</code></li> + <li><code>border-right-color: cyan;</code></li> + <li><code>border-bottom-color: black;</code></li> + <li><code>border-left-color: gold;</code></li> + </ul> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#justone { + border-color: red; +} + +#horzvert { + border-color: gold red; +} + +#topvertbott { + border-color: red cyan gold; +} + +#trbl { + border-color: red cyan black gold; +} + +/* Set width and style for all divs */ +div { + border: solid 0.3em; + width: auto; + margin: 0.5em; + padding: 0.5em; +} + +ul { + margin: 0; + list-style: none; +} +</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('border-color의_모든_사용법', 600, 300)}}</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('CSS3 Backgrounds', '#border-color', 'border-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>The <code>transparent</code> keyword has been removed as it is now a part of the {{cssxref("<color>")}} data type.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>The property is now a shorthand property.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-color', 'border-color')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-color")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 색상 관련 CSS 속성: {{Cssxref("border")}}, {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}</li> + <li>다른 테두리 관련 CSS 속성: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}</li> + <li>{{cssxref("<color>")}} 자료형</li> + <li>다른 색상 관련 속성: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> + <li><a href="/ko/docs/Web/HTML/Applying_color#테두리">CSS로 HTML 요소에 색 입히기</a></li> +</ul> diff --git a/files/ko/web/css/border-image-outset/index.html b/files/ko/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..ee670a5ba8 --- /dev/null +++ b/files/ko/web/css/border-image-outset/index.html @@ -0,0 +1,113 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-outset +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-image-outset</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 테두리 상자와 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a>의 거리를 설정합니다.</p> + +<p><code>border-image-outset</code>으로 인해 요소 바깥에 그려지는 테두리로는 스크롤이 생기지 않으며 마우스 이벤트를 잡아낼 수도 없습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +border-image-outset: 1rem; + +/* <number> 값 */ +border-image-outset: 1.5; + +/* 세로방향 | 가로방향 */ +border-image-outset: 1 1.2; + +/* 위 | 가로방향 | 아래 */ +border-image-outset: 30px 2 45px; + +/* 위 | 오른쪽 | 아래 | 왼쪽 */ +border-image-outset: 7px 12px 14px 5px; + +/* 전역 값 */ +border-image-outset: inherit; +border-image-outset: initial; +border-image-outset: unset; +</pre> + +<p><code>border-image-outset</code> 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("<length>")}}나 {{cssxref("<number>")}}입니다. 음수는 유효하지 않습니다.</p> + +<ul> + <li><strong>한 개의 값</strong>은 모든 네 면의 거리를 설정합니다.</li> + <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 거리를 설정합니다.</li> + <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 거리를 설정합니다.</li> + <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 거리를 지정합니다. (시계방향)</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>테두리 거리의 크기로 고정값 사용.</dd> + <dt>{{cssxref("<number>")}}</dt> + <dd>테두리 거리의 크기로 {{cssxref("border-width")}}의 배수 사용.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="outset">밖으로 나간 테두리를 가지고 있어요!</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#outset { + width: 10rem; + background: #cef; + border: 1.4rem solid; + border-image: radial-gradient(#ff2, #55f) 40; + border-image-outset: 1.5; /* = 1.5 * 1.4rem = 2.1rem */ + margin: 2.1rem; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "auto", 200)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-image-outset")}}</p> diff --git a/files/ko/web/css/border-image-repeat/index.html b/files/ko/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..ddca0a7c73 --- /dev/null +++ b/files/ko/web/css/border-image-repeat/index.html @@ -0,0 +1,125 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-repeat +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-image-repeat</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 원본 이미지의 <a href="/ko/docs/Web/CSS/border-image-slice#edge_region">모서리 영역</a>을 요소의 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a> 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 값 */ +border-image-repeat: stretch; +border-image-repeat: repeat; +border-image-repeat: round; +border-image-repeat: space; + +/* 세로방향 | 가로방향 */ +border-image-repeat: round stretch; + +/* 전역 값 */ +border-image-repeat: inherit; +border-image-repeat: initial; +border-image-repeat: unset; +</pre> + +<p><code>border-image-repeat</code> 속성은 한 개 또는 두 개의 값을 사용해 지정할 수 있습니다.</p> + +<ul> + <li><strong>한 개의 값</strong>을 지정하면 <strong>모든 네 면</strong>이 같은 방식을 사용합니다.</li> + <li><strong>두 개의 값</strong>을 지정하면, 첫 번째 값은 <strong>위와 아래</strong>, 두 번째 값은 <strong>왼쪽과 오른쪽 면</strong>의 방식을 지정합니다.</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt><code>stretch</code></dt> + <dd>원본 이미지의 모서리 영역을 늘리거나 줄여 간격을 채웁니다.</dd> + <dt><code>repeat</code></dt> + <dd>원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있습니다.</dd> + <dt><code>round</code></dt> + <dd>원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 늘어나거나 줄어들 수 있습니다.</dd> + <dt><code>space</code></dt> + <dd>원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[7]">#bordered { + width: 12rem; + margin-bottom: 1rem; + padding: 1rem; + border: 40px solid; + border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; + border-image-repeat: stretch; /* 라이브 샘플에서 바꿀 수 있습니다 */ +} +</pre> + +<div class="hidden"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="bordered">저한테 다양한 테두리 반복 속성을 써보세요!</div> + +<select id="repetition"> + <option value="stretch">stretch</option> + <option value="repeat">repeat</option> + <option value="round">round</option> + <option value="space">space</option> + <option value="stretch repeat">stretch repeat</option> + <option value="space round">space round</option> +</select> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var repetition = document.getElementById("repetition"); +repetition.addEventListener("change", function (evt) { + document.getElementById("bordered").style.borderImageRepeat = evt.target.value; +}); +</pre> +</div> + +<p>{{EmbedLiveSample("예제", "auto", 200)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-image-repeat")}}</p> diff --git a/files/ko/web/css/border-image-slice/index.html b/files/ko/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..7dfb26229b --- /dev/null +++ b/files/ko/web/css/border-image-slice/index.html @@ -0,0 +1,107 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-slice +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-image-slice</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 속성은 {{cssxref("border-image-source")}}로 설정한 이미지를 여러 개의 영역으로 나눕니다. 이렇게 나눠진 영역이 요소의 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a>를 이룹니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}</div> + + + +<p>이미지는 네 개의 꼭지점, 네 개의 모서리, 한 개의 중앙 총 9개의 영역으로 나눠집니다. 상하좌우 각각의 모서리에서 주어진 거리만큼 떨어진 네 개의 분할선이 영역의 크기를 결정합니다.</p> + +<p><a href="/files/3814/border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="/files/3814/border-image-slice.png" style="margin: 1px; padding: 1em; width: 460px;"></a></p> + +<p>위의 도표로 구역이 어떻게 나뉘는지 확인할 수 있습니다.</p> + +<ul> + <li>1-4번 구역은 <a id="corner_region" name="corner_region">꼭지점 영역</a>입니다. 코너 영역은 최종 테두리 이미지에서도 코너를 이루며 한 번씩만 그려집니다.</li> + <li>5-8번 구역은 <a id="edge_region" name="edge_region">모서리 영역</a>입니다. 모서리 영역은 최종 테두리 이미지의 크기에 맞도록 <a href="/ko/docs/Web/CSS/border-image-repeat">반복하여 그리거나 크기를 조정하는 등 변형</a>됩니다.</li> + <li>9번 구역은 <a id="middle_region" name="middle_region">중앙 영역</a>입니다. 기본값으로는 쓰이지 않지만, <code>fill</code> 키워드를 지정한 경우 배경 이미지처럼 사용합니다.</li> +</ul> + +<p>{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} 속성이 최종 테두리 이미지에서 각 영역의 사용 방법을 지정합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 모든 방향 */ +border-image-slice: 30%; + +/* 세로방향 | 가로방향 */ +border-image-slice: 10% 30%; + +/* 위 | 가로방향 | 아래 */ +border-image-slice: 30 30% 45; + +/* 위 | 오른쪽 | 아래 | 왼쪽 */ +border-image-slice: 7 12 14 5; + +/* `fill` 키워드 */ +border-image-slice: 10% fill 7 12; + +/* 전역 값 */ +border-image-slice: inherit; +border-image-slice: initial; +border-image-slice: unset; +</pre> + +<p><code>border-image-slice</code> 속성은 한 개에서 네 개의 <code><number></code> 또는 <code><percentage></code> 값을 사용해 지정할 수 있습니다. 각각의 숫자는 네 방향 분할선의 위치를 나타냅니다. 음수 값은 유효하지 않고, 최대 크기보다 큰 값은 <code>100%</code>로 잘립니다.</p> + +<ul> + <li><strong>한 개의 값</strong>을 지정하면, 모든 분할선의 위치가 각각의 기준 모서리에서 동일한 거리만큼 떨어진 곳으로 설정됩니다.</li> + <li><strong>두 개의 값</strong>을 지정하면, 첫 번째 값은 <strong>위와 아래</strong> 분할선, 두 번째 값은 <strong>왼쪽과 오른쪽</strong> 분할선의 위치를 설정합니다.</li> + <li><strong>세 개의 값</strong>을 지정하면, 첫 번째 값은 <strong>위</strong>, 두 번째 값은 <strong>왼쪽과 오른쪽</strong>, 세 번째 값은 <strong>아래</strong> 분할선의 위치를 설정합니다.</li> + <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 분할선의 거리를 순서대로 지정합니다. (시계방향)</li> +</ul> + +<p>선택적으로 아무데나 <code>fill</code> 키워드를 추가할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<number>")}}</dt> + <dd>모서리에서 분할선까지의 픽셀 거리(래스터 이미지), 또는 좌표 거리(벡터 이미지). 벡터 이미지에서 숫자는 원본 이미지가 아닌 요소의 크기에 상대적이므로 보통 백분율을 선호합니다.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>모서리에서 분할선까지의 백분율 거리. 가로축은 원본 이미지의 너비에, 세로축은 이미지의 높이에 상대적입니다.</dd> + <dt><code>fill</code></dt> + <dd>중앙 영역을 보존하여 배경 이미지처럼 사용. 실제 {{cssxref("background")}} 속성보다 위에 그려집니다. 중앙 영역 이미지는 위와 왼쪽 모서리 영역의 크기에 맞도록 늘어납니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial defintion</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-image-slice")}}</p> diff --git a/files/ko/web/css/border-image-source/index.html b/files/ko/web/css/border-image-source/index.html new file mode 100644 index 0000000000..8d35053b26 --- /dev/null +++ b/files/ko/web/css/border-image-source/index.html @@ -0,0 +1,78 @@ +--- +title: border-image-source +slug: Web/CSS/border-image-source +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-source +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-image-source</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a>로 사용할 원본 이미지를 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-image-source.html")}}</div> + + + +<p>{{cssxref("border-image-slice")}} 속성으로 나뉜 구역을 사용해 최종 테두리 이미지를 생성합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 값 */ +border-image-source: none; + +/* <image> 값 */ +border-image-source: url(image.jpg); +border-image-source: linear-gradient(to top, red, yellow); + +/* 전역 값 */ +border-image-source: inherit; +border-image-source: initial; +border-image-source: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>none</code></dt> + <dd>테두리 이미지를 사용하지 않습니다. {{cssxref("border-style")}}이 대신 표시됩니다.</dd> + <dt>{{cssxref("<image>")}}</dt> + <dd>테두리에 사용할 이미지 참조입니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>{{cssxref("border-image")}}에서 확인할 수 있습니다.</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-image-source")}}</p> diff --git a/files/ko/web/css/border-image-width/index.html b/files/ko/web/css/border-image-width/index.html new file mode 100644 index 0000000000..a99e3d4bb8 --- /dev/null +++ b/files/ko/web/css/border-image-width/index.html @@ -0,0 +1,128 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-width +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-image-width</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a>의 너비를 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-image-width.html")}}</div> + + + +<p>속성의 값이 {{cssxref("border-width")}}보다 크다면 테두리 이미지는 안쪽 여백(과 콘텐츠) 영역을 침범하여 그려집니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 값 */ +border-image-width: auto; + +/* <length> 값 */ +border-image-width: 1rem; + +/* <percentage> 값 */ +border-image-width: 25%; + +/* <number> 값 */ +border-image-width: 3; + +/* 세로방향 | 가로방향 */ +border-image-width: 2em 3em; + +/* 위 | 가로방향 | 아래 */ +border-image-width: 5% 15% 10%; + +/* 위 | 오른쪽 | 아래 | 왼쪽 */ +border-image-width: 5% 2em 10% auto; + +/* 전역 값 */ +border-image-width: inherit; +border-image-width: initial; +border-image-width: unset; +</pre> + +<p><code>border-image-width</code> 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 음수는 유효하지 않습니다.</p> + +<ul> + <li><strong>한 개의 값</strong>은 모든 네 면의 테두리 너비를 설정합니다.</li> + <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 테두리 너비를 설정합니다.</li> + <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 테두리 너비를 설정합니다.</li> + <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 테두리 너비를 지정합니다. (시계방향)</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>{{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}로 지정한 테두리 너비. 백분율 값은 왼쪽과 오른쪽 테두리에 대해선 테두리 이미지 영역의 너비, 위쪽과 아래쪽에 대해선 테두리 이미지 영역의 높이를 사용해 계산합니다.</dd> + <dt><code><number></code></dt> + <dd>테두리 너비로 {{cssxref("border-width")}}의 배수 사용</dd> + <dt><code>auto</code></dt> + <dd>방향과 일치하는 {{cssxref("border-image-slice")}}가 가진 원래 너비 또는 높이 사용. 이미지가 원래 크기를 가지고 있지 않으면 방향과 일치하는 <code>border-width</code> 크기를 사용합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 아래의 가로 90픽셀, 세로 90픽셀 이미지를 사용해 테두리 이미지를 생성합니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10470/border.png"></p> + +<p>원본 이미지의 각 원은 가로 30픽셀, 세로 30픽셀입니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>밤을 쉬이 봄이 무성할 릴케 듯합니다. 토끼, 써 이런 하나에 듯합니다. 이네들은 나는 패, 듯합니다. + 나는 보고, 딴은 토끼, 이런 멀리 듯합니다. 청춘이 가을로 둘 버리었습니다. 걱정도 밤이 나는 애기 + 오는 언덕 경, 계십니다. 멀리 까닭이요, 나는 별빛이 듯합니다. 소녀들의 벌레는 걱정도 까닭이요, + 북간도에 쓸쓸함과 오면 것은 어머님, 까닭입니다.</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + border: 20px solid; + border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round; + border-image-width: 16px; + padding: 40px; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 200, 240)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-image-width")}}</p> diff --git a/files/ko/web/css/border-image/index.html b/files/ko/web/css/border-image/index.html new file mode 100644 index 0000000000..e907da9062 --- /dev/null +++ b/files/ko/web/css/border-image/index.html @@ -0,0 +1,168 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-image</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 주위에 이미지를 그립니다. 일반 <a href="/ko/docs/Web/CSS/border">테두리</a>를 대체합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div> + + + +<p><code>border-image</code>는 {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 다른 단축 속성과 마찬가지로, 생략한 속성은 <a href="/ko/docs/Web/CSS/initial_value">초기값</a>으로 설정됩니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 테두리 이미지를 불러오는데 실패할 경우에 대비해 {{cssxref("border-style")}} 속성을 설정해야 합니다. 사실 명세에 따르면 필수로 지정해야 하지만 모든 브라우저가 그렇게 구현하지는 않았습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">/* 이미지 | 슬라이스 */ +border-image: linear-gradient(red, blue) 27; + +/* 이미지 | 슬라이스 | 반복 */ +border-image: url("/images/border.png") 27 space; + +/* 이미지 | 슬라이스 | 너비 */ +border-image: linear-gradient(red, blue) 27 / 35px; + +/* 이미지 | 슬라이스 | 너비 | 거리 | 반복 */ +border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; +</pre> + +<p><code>border-image</code> 속성은 아래 나열한 값 중 한 개에서 다섯 개 사이를 사용해 지정할 수 있습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 만약 {{cssxref("border-image-source")}}의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>none</code>이거나 이미지를 그릴 수 없다면 {{cssxref("border-style")}}이 대신 보여집니다.</p> +</div> + +<h3 id="값">값</h3> + +<dl> + <dt><code><'border-image-source'></code></dt> + <dd>원본 이미지. {{cssxref("border-image-source")}}를 참고하세요.</dd> + <dt><code><'border-image-slice'></code></dt> + <dd>이미지를 구역별로 나눌 때 사용할 슬라이스 크기. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-slice")}}를 참고하세요.</dd> + <dt><code><'border-image-width'></code></dt> + <dd>테두리 이미지 너비. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-width")}}를 참고하세요.</dd> + <dt><code><'border-image-outset'></code></dt> + <dd>테두리 이미지와 요소 외곽의 거리. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-outset")}}을 참고하세요.</dd> + <dt><code><'border-image-repeat'></code></dt> + <dd>원본 이미지의 모서리 구역을 테두리의 크기에 맞출 때의 조정 방법. 두 개 값까지 지정할 수 있습니다. {{cssxref("border-image-repeat")}}을 참고하세요.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="비트맵">비트맵</h3> + +<p>이번 예제는 요소의 테두리에 마름모 패턴을 적용합니다. 테두리 이미지의 원본은 가로 81픽셀, 세로 81픽셀의 ".png" 파일로, 8개의 마름모가 사각형의 테두리를 이루고 있습니다.</p> + +<p><img alt="an example borderimage" src="https://mdn.mozillademos.org/files/4127/border.png" style="height: 81px; width: 81px;"></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div id="bitmap">This element is surrounded by a bitmap-based border image!</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<p>마름모 하나의 크기에 맞추기 위해, 81을 3으로 나눈 <code>27</code>을 슬라이스 크기로 사용하여 원본 이미지를 모서리와 테두리 구역으로 나눕니다. 테두리 이미지의 중앙을 요소 테두리의 가운데로 맞추기 위해 거리도 각 너비의 절반으로 설정합니다. 마지막으로 반복 값에 <code>round</code>를 지정해 모서리가 끊기거나 잘리지 않도록 설정합니다.</p> + +<pre class="brush:css">#bitmap { + width: 200px; + background-color: #ffa; + border: 36px solid orange; + margin: 30px; + padding: 10px; + + border-image: + url("https://mdn.mozillademos.org/files/4127/border.png") /* 원본 이미지 */ + 27 / /* 슬라이스 */ + 36px 28px 18px 8px / /* 너비 */ + 18px 14px 9px 4px /* 거리 */ + round; /* 반복 */ +} +</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('비트맵', '100%', 200)}}</p> + +<h3 id="그레이디언트">그레이디언트</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div id="gradient">그레이디언트 기반 테두리 이미지에 둘러 쌓인 요소에요!</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush:css">#gradient { + width: 200px; + border: 30px solid; + border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; + padding: 20px; +} +</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample('그레이디언트')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>보조 기술은 테두리 이미지를 읽을 수 없습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0</a></li> +</ul> + +<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('CSS3 Backgrounds', '#the-border-image', 'border-image')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-image")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("outline")}}</li> + <li>{{cssxref("box-shadow")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("url()")}} 함수</li> + <li>그레이디언트 함수: {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li> +</ul> diff --git a/files/ko/web/css/border-left-color/index.html b/files/ko/web/css/border-left-color/index.html new file mode 100644 index 0000000000..be69191773 --- /dev/null +++ b/files/ko/web/css/border-left-color/index.html @@ -0,0 +1,114 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-left-color +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>border-left-color</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 왼쪽 테두리 색상을 지정합니다.</span> {{cssxref("border-color")}} 또는 {{cssxref("border-left")}} 단축 속성으로도 지정할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-left-color.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers language-css">/* <color> 값 */ +border-left-color: red; +border-left-color: #ffbb00; +border-left-color: rgb(255, 0, 0); +border-left-color: hsla(100%, 50%, 25%, 0.75); +border-left-color: currentColor; +border-left-color: transparent; + +/* 전역 값 */ +border-left-color: inherit; +border-left-color: initial; +border-left-color: unset; +</pre> + +<p><code>border-left-color</code> 속성은 하나의 값을 사용해 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>왼쪽 테두리의 색상.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="테두리를_가진_간단한_상자">테두리를 가진 간단한 상자</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="mybox"> + <p>This is a box with a border around it. + Note which side of the box is + <span class="redtext">red</span>.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.mybox { + border: solid 0.3em gold; + border-left-color: red; + width: auto; +} + +.redtext { + color: red; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('테두리를_가진_간단한_상자')}}</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('CSS3 Backgrounds', '#border-left-color', 'border-left-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left-color', 'border-left-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-left-color")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-left")}}, {{cssxref("border-color")}}.</li> + <li>다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}.</li> + <li>왼쪽 테두리 관련 CSS 속성: {{cssxref("border-left-style")}}, {{cssxref("border-left-width")}}.</li> +</ul> diff --git a/files/ko/web/css/border-left-style/index.html b/files/ko/web/css/border-left-style/index.html new file mode 100644 index 0000000000..18bc232483 --- /dev/null +++ b/files/ko/web/css/border-left-style/index.html @@ -0,0 +1,134 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-left-style +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-left-style</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소 테두리의 왼쪽 스타일을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div> + + + +<div class="note"><strong>참고:</strong> 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 값 */ +border-left-style: none; +border-left-style: hidden; +border-left-style: dotted; +border-left-style: dashed; +border-left-style: solid; +border-left-style: double; +border-left-style: groove; +border-left-style: ridge; +border-left-style: inset; +border-left-style: outset; + +/* 전역 값 */ +border-left-style: inherit; +border-left-style: initial; +border-left-style: unset; +</pre> + +<p><code>border-left-style</code> 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.</p> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Define look of the table */ +table { + border-width: 2px; + background-color: #52E385; +} +tr, td { + padding: 3px; +} + +/* border-left-style example classes */ +.b1 {border-left-style: none;} +.b2 {border-left-style: hidden;} +.b3 {border-left-style: dotted;} +.b4 {border-left-style: dashed;} +.b5 {border-left-style: solid;} +.b6 {border-left-style: double;} +.b7 {border-left-style: groove;} +.b8 {border-left-style: ridge;} +.b9 {border-left-style: inset;} +.b10 {border-left-style: outset;}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('예제', 300, 200)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-left-style")}}</p> + +<h2 id="See_Also" name="See_Also">같이 보기</h2> + +<ul> + <li>테두리 스타일 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-style")}}.</li> + <li>왼쪽 테두리 관련 CSS 속성: {{cssxref("border-left")}}, {{cssxref("border-left-color")}}, {{cssxref("border-left-width")}}.</li> +</ul> diff --git a/files/ko/web/css/border-left-width/index.html b/files/ko/web/css/border-left-width/index.html new file mode 100644 index 0000000000..78687a842a --- /dev/null +++ b/files/ko/web/css/border-left-width/index.html @@ -0,0 +1,150 @@ +--- +title: border-left-width +slug: Web/CSS/border-left-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-left-width +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-left-width</code></strong> 속성은 요소의 왼쪽 테두리 너비를 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-left-width.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +border-left-width: thin; +border-left-width: medium; +border-left-width: thick; + +/* <length> 값 */ +border-left-width: 10em; +border-left-width: 3vmax; +border-left-width: 6px; + +/* 전역 값 */ +border-left-width: inherit; +border-left-width: initial; +border-left-width: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code><line-width></code></dt> + <dd>테두리의 너비입니다. 0 이상의 {{cssxref("<length>")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다. + <table class="standard-table"> + <tbody> + <tr> + <td><code>thin</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thin; background-color: palegreen;"></div> + </td> + <td>얇은 테두리</td> + </tr> + <tr> + <td><code>medium</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: medium; background-color: palegreen;"></div> + </td> + <td>중간 테두리</td> + </tr> + <tr> + <td><code>thick</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thick; background-color: palegreen;"></div> + </td> + <td>굵은 테두리</td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>참고:</strong> 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 <code>thin ≤ medium ≤ thick</code>이고, 하나의 문서 내에서 동일합니다.</p> + </div> + </dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="테두리의_너비_비교">테두리의 너비 비교</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Element 1</div> +<div>Element 2</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + border: 1px solid red; + margin: 1em 0; +} + +div:nth-child(1) { + border-left-width: thick; +} +div:nth-child(2) { + border-left-width: 2em; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('테두리의_너비_비교', '100%')}}</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('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-left-width")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 너비 관련 CSS 속성: {{Cssxref("border-top-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, and {{Cssxref("border-width")}}.</li> + <li>왼쪽 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, and {{Cssxref("border-left-color")}}.</li> +</ul> diff --git a/files/ko/web/css/border-left/index.html b/files/ko/web/css/border-left/index.html new file mode 100644 index 0000000000..cf9b0547df --- /dev/null +++ b/files/ko/web/css/border-left/index.html @@ -0,0 +1,109 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 테두리 +translation_of: Web/CSS/border-left +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>border-left</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 왼쪽 테두리를 설정합니다.</span> {{cssxref("border-left-width")}}, {{cssxref("border-left-style")}}, {{cssxref("border-left-color")}}의 값을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-left.html")}}</div> + + + +<p>다른 단축 속성과 마찬가지로, <code>border-left</code>는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.</p> + +<pre class="brush: css">border-left-style: dotted; +border-left: thick green; +</pre> + +<pre class="brush: css">border-left-style: dotted; +border-left: none thick green; +</pre> + +<p>따라서 <code>border-left</code>보다 먼저 지정한 {{cssxref("border-left-style")}}의 값은 무시됩니다. {{cssxref("border-left-style")}}의 기본값은 <code>none</code>이므로, <code>border-style</code>을 명시하지 않으면 테두리를 만들지 않습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">border-left: 1px; +border-left: 2px dotted; +border-left: medium dashed green; +</pre> + +<p><code>border-left</code>은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code><br-width></code></dt> + <dd>{{cssxref("border-left-width")}}.</dd> + <dt><code><br-style></code></dt> + <dd>{{cssxref("border-left-style")}}.</dd> + <dt>{{cssxref("<color>")}}</dt> + <dd>{{cssxref("border-left-color")}}.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><div> + 왼쪽 테두리를 가진 요소입니다. +</div></pre> + +<pre class="brush: css">div { + border-left: 4px dashed blue; + background-color: gold; + height: 100px; + width: 100px; + font-weight: bold; + text-align: center; +} +</pre> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#border-left', 'border-left')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No direct changes, though the modification of values for the {{cssxref("border-left-color")}} do apply to it.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-left', 'border-left')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.border-left")}}</p> diff --git a/files/ko/web/css/border-radius/index.html b/files/ko/web/css/border-radius/index.html new file mode 100644 index 0000000000..3c9c812d36 --- /dev/null +++ b/files/ko/web/css/border-radius/index.html @@ -0,0 +1,228 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-radius +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-radius</code></strong> 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>꼭짓점 반경은 요소의 테두리 존재 여부와는 별개로 전체 {{Cssxref("background")}}에 적용됩니다. 원형 꼭짓점으로 인해 배경이 잘리는 지점은 {{cssxref("background-clip")}} 속성이 지정합니다.</p> + +<p>{{cssxref("border-collapse")}}의 값이 <code>collapse</code>인 표 요소는 <code>border-radius</code> 속성의 영향을 받지 않습니다.</p> + +<div class="note"><strong>참고</strong>: 다른 단축 속성과 마찬가지로, 각각의 하위 속성이 부모를 상속하도록 할 수는 없습니다. 즉, <code>border-radius: 0 0 inherit inherit</code>처럼 일부만 재정의할 수 없습니다. 대신, 원래의 본디속성을 하나씩 사용하세요.</div> + +<h2 id="구성_속성">구성 속성</h2> + +<p><code>border-radius</code>는 다음 CSS 속성의 단축 속성입니다.</p> + +<ul> + <li>{{cssxref("border-bottom-left-radius")}}</li> + <li>{{cssxref("border-bottom-right-radius")}}</li> + <li>{{cssxref("border-top-left-radius")}}</li> + <li>{{cssxref("border-top-right-radius")}}</li> +</ul> + +<h2 id="구문">구문</h2> + +<pre class="brush: css notranslate">/* The syntax of the first radius allows one to four values */ +/* Radius is set for all 4 sides */ +border-radius: 10px; + +/* top-left-and-bottom-right | top-right-and-bottom-left */ +border-radius: 10px 5%; + +/* top-left | top-right-and-bottom-left | bottom-right */ +border-radius: 2px 4px 2px; + +/* top-left | top-right | bottom-right | bottom-left */ +border-radius: 1px 0 3px 4px; + +/* The syntax of the second radius allows one to four values */ +/* (first radius values) / radius */ +border-radius: 10px 5% / 20px; + +/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ +border-radius: 10px 5% / 20px 30px; + +/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ +border-radius: 10px 5px 2em / 20px 25px 30%; + +/* (first radius values) / top-left | top-right | bottom-right | bottom-left */ +border-radius: 10px 5% / 20px 25em 30px 35em; + +/* Global values */ +border-radius: inherit; +border-radius: initial; +border-radius: unset;</pre> + +<p><code>border-radius</code> 속성은 다음 방법으로 지정할 수 있습니다.</p> + +<ul> + <li>한 개에서 네 개의 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}} 값은 꼭짓점의 단일 반지름을 설정합니다.</li> + <li>선택적으로 "<code>/</code>" 이후에 한 개에서 네 개의 <code><length></code> 또는 <code><percentage></code> 값을 사용해 추가 반지름을 설정해서 타원형 꼭짓점을 만들 수 있습니다.</li> +</ul> + +<h3 id="값">값</h3> + +<table> + <tbody> + <tr> + <td style="vertical-align: top;"><em>radius</em></td> + <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td> + <td style="vertical-align: top;">테두리의 각 꼭짓점 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 한 개 값 구문에서만 사용합니다.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td> + <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td> + <td style="vertical-align: top;">왼쪽 위와 오른쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 두 개 값 구문에서만 사용합니다.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td> + <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td> + <td style="vertical-align: top;">오른쪽 위와 왼쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 두 개 또는 세 개 값 구문에서만 사용합니다.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-left</em></td> + <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td> + <td style="vertical-align: top;">왼쪽 위 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 세 개 또는 네 개 값 구문에서만 사용합니다.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-right</em></td> + <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td> + <td style="vertical-align: top;">오른쪽 위 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 네 개 값 구문에서만 사용합니다.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>bottom-right</em></td> + <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td> + <td style="vertical-align: top;">오른쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 네 개 값 구문에서만 사용합니다.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>bottom-left</em></td> + <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td> + <td style="vertical-align: top;">왼쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 네 개 값 구문에서만 사용합니다.</td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>길이 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 음의 값은 유효하지 않습니다.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>백분율 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 가로축 값은 요소 박스의 너비에 대한 백분율이고, 세로축 값은 박스의 높이에 대한 백분율입니다. 음의 값은 유효하지 않습니다.</dd> +</dl> + +<p>예를 들어...</p> + +<pre class="brush: css notranslate">border-radius: 1em/5em; + +/* 아래와 같음 */ +border-top-left-radius: 1em 5em; +border-top-right-radius: 1em 5em; +border-bottom-right-radius: 1em 5em; +border-bottom-left-radius: 1em 5em; +</pre> + +<pre class="brush: css notranslate">border-radius: 4px 3px 6px / 2px 4px; + +/* 아래와 같음 */ +border-top-left-radius: 4px 2px; +border-top-right-radius: 3px 4px; +border-bottom-right-radius: 6px 2px; +border-bottom-left-radius: 3px 4px; +</pre> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="notranslate">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;"> border: solid 10px; + /* 테두리가 'D'형태가 됨 */ + border-radius: 10px 40px 40px 10px; +</pre> + +<pre style="display: inline-block; margin: 10px; border: groove 1em red !important; border-radius: 2em; width: 90%;"> border: groove 1em red; + border-radius: 2em; +</pre> + +<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold !important; border-radius: 13em/3em; width: 90%;"> background: gold; + border: ridge gold; + border-radius: 13em/3em; +</pre> + +<pre style="display: inline-block; margin: 10px; background: gold; border: none !important; border-radius: 40px 10px; width: 90%;"> border: none; + border-radius: 40px 10px; +</pre> + +<pre style="display: inline-block; margin: 10px; background: burlywood; border: none !important; border-radius: 50%; width: 90%;"> border: none; + border-radius: 50%; +</pre> + +<pre style="display: inline-block; margin: 10px; border: dotted; border-width: 10px 4px !important; border-radius: 10px 40px; width: 90%;"> border: dotted; + border-width: 10px 4px; + border-radius: 10px 40px; +</pre> + +<pre style="display: inline-block; margin: 10px; border: dashed; border-width: 2px 4px !important; border-radius: 40px; width: 90%;"> border: dashed; + border-width: 2px 4px; + border-radius: 40px; +</pre> + +<h3 id="라이브_샘플">라이브 샘플</h3> + +<ol> + <li><a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></li> + <li><a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></li> + <li><a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/4/</a></li> + <li><a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/5/</a></li> + <li><a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/6/</a></li> +</ol> + +<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('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-radius")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>꼭짓점 반경 관련 CSS 속성: {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}</li> +</ul> diff --git a/files/ko/web/css/border-right-color/index.html b/files/ko/web/css/border-right-color/index.html new file mode 100644 index 0000000000..c6292d566b --- /dev/null +++ b/files/ko/web/css/border-right-color/index.html @@ -0,0 +1,114 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-right-color +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>border-right-color</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 오른쪽 테두리 색상을 지정합니다.</span> {{cssxref("border-color")}} 또는 {{cssxref("border-right")}} 단축 속성으로도 지정할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-right-color.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers language-css">/* <color> 값 */ +border-right-color: red; +border-right-color: #ffbb00; +border-right-color: rgb(255, 0, 0); +border-right-color: hsla(100%, 50%, 25%, 0.75); +border-right-color: currentColor; +border-right-color: transparent; + +/* 전역 값 */ +border-right-color: inherit; +border-right-color: initial; +border-right-color: unset; +</pre> + +<p><code>border-right-color</code> 속성은 하나의 값을 사용해 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>오른쪽 테두리의 색상.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="테두리를_가진_간단한_상자">테두리를 가진 간단한 상자</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="mybox"> + <p>This is a box with a border around it. + Note which side of the box is + <span class="redtext">red</span>.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.mybox { + border: solid 0.3em gold; + border-right-color: red; + width: auto; +} + +.redtext { + color: red; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('테두리를_가진_간단한_상자')}}</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('CSS3 Backgrounds', '#border-right-color', 'border-right-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-right-color")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-right")}}, {{cssxref("border-color")}}.</li> + <li>다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}.</li> + <li>오른쪽 테두리 관련 CSS 속성: {{cssxref("border-right-style")}}, {{cssxref("border-right-width")}}.</li> +</ul> diff --git a/files/ko/web/css/border-right-style/index.html b/files/ko/web/css/border-right-style/index.html new file mode 100644 index 0000000000..291595d8d1 --- /dev/null +++ b/files/ko/web/css/border-right-style/index.html @@ -0,0 +1,134 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-right-style +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-right-style</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소 테두리의 오른쪽 스타일을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-right-style.html")}}</div> + + + +<div class="note"><strong>참고:</strong> 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 값 */ +border-right-style: none; +border-right-style: hidden; +border-right-style: dotted; +border-right-style: dashed; +border-right-style: solid; +border-right-style: double; +border-right-style: groove; +border-right-style: ridge; +border-right-style: inset; +border-right-style: outset; + +/* 전역 값 */ +border-right-style: inherit; +border-right-style: initial; +border-right-style: unset; +</pre> + +<p><code>border-right-style</code> 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.</p> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Define look of the table */ +table { + border-width: 2px; + background-color: #52E385; +} +tr, td { + padding: 3px; +} + +/* border-right-style example classes */ +.b1 {border-right-style: none;} +.b2 {border-right-style: hidden;} +.b3 {border-right-style: dotted;} +.b4 {border-right-style: dashed;} +.b5 {border-right-style: solid;} +.b6 {border-right-style: double;} +.b7 {border-right-style: groove;} +.b8 {border-right-style: ridge;} +.b9 {border-right-style: inset;} +.b10 {border-right-style: outset;}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('예제', 300, 200)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-right-style")}}</p> + +<h2 id="See_Also" name="See_Also">같이 보기</h2> + +<ul> + <li>테두리 스타일 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}}, {{cssxref("border-style")}}.</li> + <li>오른쪽 테두리 관련 CSS 속성: {{cssxref("border-right")}}, {{cssxref("border-right-color")}}, {{cssxref("border-right-width")}}.</li> +</ul> diff --git a/files/ko/web/css/border-right-width/index.html b/files/ko/web/css/border-right-width/index.html new file mode 100644 index 0000000000..60c3a4e564 --- /dev/null +++ b/files/ko/web/css/border-right-width/index.html @@ -0,0 +1,150 @@ +--- +title: border-right-width +slug: Web/CSS/border-right-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-right-width +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-right-width</code></strong> 속성은 요소의 오른쪽 테두리 너비를 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-right-width.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값*/ +border-right-width: thin; +border-right-width: medium; +border-right-width: thick; + +/* <length> 값 */ +border-right-width: 10em; +border-right-width: 3vmax; +border-right-width: 6px; + +/* 전역 값 */ +border-right-width: inherit; +border-right-width: initial; +border-right-width: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code><line-width></code></dt> + <dd>테두리의 너비입니다.0 이상의 {{cssxref("<length>")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다. + <table class="standard-table"> + <tbody> + <tr> + <td><code>thin</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thin; background-color: palegreen;"></div> + </td> + <td>얇은 테두리</td> + </tr> + <tr> + <td><code>medium</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: medium; background-color: palegreen;"></div> + </td> + <td>중간 테두리</td> + </tr> + <tr> + <td><code>thick</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thick; background-color: palegreen;"></div> + </td> + <td>굵은 테두리</td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>참고:</strong> 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 <code>thin ≤ medium ≤ thick</code>이고, 하나의 문서 내에서 동일합니다.</p> + </div> + </dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="테두리의_너비_비교">테두리의 너비 비교</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Element 1</div> +<div>Element 2</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + border: 1px solid red; + margin: 1em 0; +} + +div:nth-child(1) { + border-right-width: thick; +} +div:nth-child(2) { + border-right-width: 2em; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('테두리의_너비_비교', '100%')}}</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('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-left-width', 'border-right-width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-right-width")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 너비 관련 CSS 속성: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, and {{Cssxref("border-width")}}.</li> + <li>오른쪽 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, and {{Cssxref("border-right-color")}}.</li> +</ul> diff --git a/files/ko/web/css/border-right/index.html b/files/ko/web/css/border-right/index.html new file mode 100644 index 0000000000..557dbeba89 --- /dev/null +++ b/files/ko/web/css/border-right/index.html @@ -0,0 +1,109 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 테두리 +translation_of: Web/CSS/border-right +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>border-right</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 오른쪽 테두리를 설정합니다.</span> {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}}, {{cssxref("border-right-color")}}의 값을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-right.html")}}</div> + + + +<p>다른 단축 속성과 마찬가지로, <code>border-right</code>는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.</p> + +<pre class="brush: css">border-right-style: dotted; +border-right: thick green; +</pre> + +<pre class="brush: css">border-right-style: dotted; +border-right: none thick green; +</pre> + +<p>따라서 <code>border-right</code>보다 먼저 지정한 {{cssxref("border-right-style")}}의 값은 무시됩니다. {{cssxref("border-right-style")}}의 기본값은 <code>none</code>이므로, <code>border-style</code>을 명시하지 않으면 테두리를 만들지 않습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">border-right: 1px; +border-right: 2px dotted; +border-right: medium dashed green; +</pre> + +<p><code>border-right</code>은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code><br-width></code></dt> + <dd>{{cssxref("border-right-width")}}.</dd> + <dt><code><br-style></code></dt> + <dd>{{cssxref("border-right-style")}}.</dd> + <dt>{{cssxref("<color>")}}</dt> + <dd>{{cssxref("border-right-color")}}.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><div> + 오른쪽 테두리를 가진 요소입니다. +</div></pre> + +<pre class="brush: css">div { + border-right: 4px dashed blue; + background-color: gold; + height: 100px; + width: 100px; + font-weight: bold; + text-align: center; +} +</pre> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#border-right', 'border-right')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-right', 'border-right')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.border-right")}}</p> diff --git a/files/ko/web/css/border-spacing/index.html b/files/ko/web/css/border-spacing/index.html new file mode 100644 index 0000000000..23e0e42018 --- /dev/null +++ b/files/ko/web/css/border-spacing/index.html @@ -0,0 +1,131 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - CSS Property + - CSS Tables + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-spacing +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-spacing</code></strong> 속성은 인접한 표 칸의 테두리 간격을 지정합니다.</span> {{cssxref("border-collapse")}}가 <code>separate</code>여야 적용됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div> + + + +<p><code>border-spacing</code> 값은 표 전체의 테두리에도 적용되므로, 표 테두리와 첫 번째 및 마지막 행/열에 속하는 칸 사이 거리는 (가로/세로) <code>border-spacing</code> 값과 표에 적용한 (상/우/하/좌) {{cssxref("padding")}} 값의 합이 됩니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>border-spacing</code> 속성은 {{htmlelement("table")}}에서 이제 사용하지 않는 <code>cellspacing</code> 특성에 대응하지만, 추가로 두 번째 값을 지정해 가로와 세로 값을 각각 설정할 수 있다는 차이점이 있습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">/* <length> */ +border-spacing: 2px; + +/* 가로 <length> | 세로 <length> */ +border-spacing: 1cm 2em; + +/* 전역 값 */ +border-spacing: inherit; +border-spacing: initial; +border-spacing: unset;</pre> + +<p><code>border-spacing</code> 값은 하나 또는 두 개의 값을 사용해 지정합니다.</p> + +<ul> + <li><strong>한 개</strong>의 <code><length></code> 값을 지정하면 칸 사이의 가로와 세로 두 간격 모두 설정합니다.</li> + <li>두 개의 <code><length></code> 값을 지정하면, 첫 번째 값은 칸 사이의 가로 간격(각 열의 간격), 두 번째 값은 칸 사이의 세로 간격(각 행의 간격)을 설정합니다.</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>간격의 크기로 지정할 길이입니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="칸_간격과_안쪽_여백">칸 간격과 안쪽 여백</h3> + +<p>다음 예제는 칸 사이에 세로 간격 <code>0.5em</code>과 가로 간격 <code>1em</code>을 배치합니다. 표의 테두리를 따라가면서, <code>padding</code> 값이 <code>border-spacing</code>과 어떻게 작용하는지 살펴보세요.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><table> + <tr> + <td>1</td><td>2</td><td>3</td> + </tr> + <tr> + <td>4</td><td>5</td><td>6</td> + </tr> + <tr> + <td>7</td><td>8</td><td>9</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">table { + border-spacing: 1em 0.5em; + padding: 0 2em 1em 0; + border: 1px solid orange; +} + +td { + width: 1.5em; + height: 1.5em; + background: #d2d2d2; + text-align: center; + vertical-align: middle; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('예제', 400, 200) }}</p> + +<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('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.border-spacing")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("border-collapse")}}, {{cssxref("border-style")}}</li> + <li><code>border-spacing</code> 속성은 {{htmlelement("table")}} HTML 요소의 외관을 수정합니다.</li> +</ul> diff --git a/files/ko/web/css/border-style/index.html b/files/ko/web/css/border-style/index.html new file mode 100644 index 0000000000..70bf9b180d --- /dev/null +++ b/files/ko/web/css/border-style/index.html @@ -0,0 +1,241 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-style +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-style</code> </strong><a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소 테두리 네 면의 스타일을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">/* 키워드 값 */ +border-style: none; +border-style: hidden; +border-style: dotted; +border-style: dashed; +border-style: solid; +border-style: double; +border-style: groove; +border-style: ridge; +border-style: inset; +border-style: outset; + +/* 세로방향 | 가로방향 */ +border-style: dotted solid; + +/* 위 | 가로방향 | 아래 */ +border-style: hidden double dashed; + +/* 위 | 오른쪽 | 아래 | 왼쪽 */ +border-style: none solid dotted dashed; + +/* 전역 값 */ +border-style: inherit; +border-style: initial; +border-style: unset; +</pre> + +<p><code>border-style</code> 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.</p> + +<ul> + <li><strong>한 개의 값</strong>은 모든 네 면의 테두리 스타일을 설정합니다.</li> + <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 테두리 스타일을 설정합니다.</li> + <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 테두리 스타일을 설정합니다.</li> + <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 테두리 스타일을 지정합니다. (시계방향)</li> +</ul> + +<p>각각의 값은 아래 목록 중 하나로 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code><line-style></code></dt> + <dd>테두리의 스타일을 설명합니다. 다음 표의 값을 사용할 수 있습니다. + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>none</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: none; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;"><code>hidden</code> 키워드와 마찬가지로 테두리를 표시하지 않습니다. {{cssxref("background-image")}}를 지정하지 않았으면 해당 면의 {{cssxref("border-width")}} 계산값은 지정값을 무시하고 <code>0</code>이 됩니다. 표에서, 칸의 테두리 상쇄 시 <code>none</code>은 제일 낮은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가진다면 테두리를 그립니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>hidden</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: hidden; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;"><code>none</code> 키워드와 마찬가지로 테두리를 표시하지 않습니다. Unless a {{cssxref("background-image")}}를 지정하지 않았으면 해당 면의 {{cssxref("border-width")}} 계산값은 지정값을 무시하고 <code>0</code>이 됩니다. 표에서, 칸의 테두리 상쇄 시 <code>hidden</code>은 제일 높은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가지더라도 그리지 않습니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dotted</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dotted; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리를 둥근 점 여러개로 그립니다. 점 간격은 명세에서 지정하지 않으며 구현마다 다릅니다. 점의 반지름은 해당 면 {{cssxref("border-width")}}의 절반입니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dashed</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dashed; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리를 직사각형 여러개로 그립니다. 사각형의 크기와 길이는 명세에서 지정하지 않으며 구현마다 다릅니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>solid</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: solid; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리를 하나의 직선으로 그립니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>double</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: double; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리를 두 개의 평행한 직선으로 그립니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>groove</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: groove; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리가 파인 것처럼 그립니다.<code>ridge</code>의 반대입니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>ridge</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: ridge; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">테두리가 튀어나온 것처럼 그립니다. <code>groove</code>의 반대입니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>inset</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: inset; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;">요소가 파인 것처럼 테두리를 그립니다.<code>outset</code>의 반대입니다. {{cssxref("border-collapse")}}가 <code>collapsed</code>인 칸에서는 <code>groove</code>와 동일합니다.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>outset</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: outset; background-color: palegreen;"> </div> + </td> + <td style="vertical-align: middle;"> + <p>요소가 튀어나온 것처럼 그립니다. <code>inset</code>의 반대입니다. {{cssxref("border-collapse")}}가 <code>collapsed</code>인 칸에서는 <code>ridge</code>와 동일합니다.</p> + </td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="속성_값의_예시_표">속성 값의 예시 표</h3> + +<p>가능한 모든 값을 나열한 표입니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* 테이블 스타일 */ +table { + border-width: 3px; + background-color: #52E396; +} +tr, td { + padding: 2px; +} + +/* border-style 예제 클래스 */ +.b1 {border-style:none;} +.b2 {border-style:hidden;} +.b3 {border-style:dotted;} +.b4 {border-style:dashed;} +.b5 {border-style:solid;} +.b6 {border-style:double;} +.b7 {border-style:groove;} +.b8 {border-style:ridge;} +.b9 {border-style:inset;} +.b10 {border-style:outset;}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('속성_값의_예시_표', 300, 200)}}</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('CSS3 Backgrounds', '#border-style', 'border-style')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Adds <code>hidden</code> keyword value.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-style")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 관련 CSS 단축 속성: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}</li> +</ul> diff --git a/files/ko/web/css/border-top-color/index.html b/files/ko/web/css/border-top-color/index.html new file mode 100644 index 0000000000..9212f447e2 --- /dev/null +++ b/files/ko/web/css/border-top-color/index.html @@ -0,0 +1,114 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-top-color +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>border-top-color</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 위쪽 테두리 색상을 지정합니다.</span> {{cssxref("border-color")}} 또는 {{cssxref("border-top")}} 단축 속성으로도 지정할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-top-color.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers language-css">/* <color> 값 */ +border-top-color: red; +border-top-color: #ffbb00; +border-top-color: rgb(255, 0, 0); +border-top-color: hsla(100%, 50%, 25%, 0.75); +border-top-color: currentColor; +border-top-color: transparent; + +/* 전역 값 */ +border-top-color: inherit; +border-top-color: initial; +border-top-color: unset; +</pre> + +<p><code>border-top-color</code> 속성은 하나의 값을 사용해 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>위쪽 테두리의 색상.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="테두리를_가진_간단한_상자">테두리를 가진 간단한 상자</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="mybox"> + <p>This is a box with a border around it. + Note which side of the box is + <span class="redtext">red</span>.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.mybox { + border: solid 0.3em gold; + border-top-color: red; + width: auto; +} + +.redtext { + color: red; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('테두리를_가진_간단한_상자')}}</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('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-top-color")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-color")}}.</li> + <li>다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}.</li> + <li>위쪽 테두리 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-top-width")}}.</li> +</ul> diff --git a/files/ko/web/css/border-top-style/index.html b/files/ko/web/css/border-top-style/index.html new file mode 100644 index 0000000000..38262fffc3 --- /dev/null +++ b/files/ko/web/css/border-top-style/index.html @@ -0,0 +1,134 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-top-style +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-top-style</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소 테두리의 위쪽 스타일을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div> + + + +<div class="note"><strong>참고:</strong> 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 값 */ +border-top-style: none; +border-top-style: hidden; +border-top-style: dotted; +border-top-style: dashed; +border-top-style: solid; +border-top-style: double; +border-top-style: groove; +border-top-style: ridge; +border-top-style: inset; +border-top-style: outset; + +/* 전역 값 */ +border-top-style: inherit; +border-top-style: initial; +border-top-style: unset; +</pre> + +<p><code>border-top-style</code> 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.</p> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Define look of the table */ +table { + border-width: 2px; + background-color: #52E385; +} +tr, td { + padding: 3px; +} + +/* border-top-style example classes */ +.b1 {border-top-style: none;} +.b2 {border-top-style: hidden;} +.b3 {border-top-style: dotted;} +.b4 {border-top-style: dashed;} +.b5 {border-top-style: solid;} +.b6 {border-top-style: double;} +.b7 {border-top-style: groove;} +.b8 {border-top-style: ridge;} +.b9 {border-top-style: inset;} +.b10 {border-top-style: outset;}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('예제', 300, 200)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-top-style")}}</p> + +<h2 id="See_Also" name="See_Also">같이 보기</h2> + +<ul> + <li>테두리 스타일 관련 CSS 속성: {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}}, {{cssxref("border-style")}}.</li> + <li>위쪽 테두리 관련 CSS 속성: {{cssxref("border-top")}}, {{cssxref("border-top-color")}}, {{cssxref("border-top-width")}}.</li> +</ul> diff --git a/files/ko/web/css/border-top-width/index.html b/files/ko/web/css/border-top-width/index.html new file mode 100644 index 0000000000..caa05e40cc --- /dev/null +++ b/files/ko/web/css/border-top-width/index.html @@ -0,0 +1,148 @@ +--- +title: border-top-width +slug: Web/CSS/border-top-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-top-width +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-top-width</code></strong> 속성은 요소의 위쪽 테두리 너비를 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-top-width.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값*/ +border-top-width: thin; +border-top-width: medium; +border-top-width: thick; + +/* <length> 값 */ +border-top-width: 10em; +border-top-width: 3vmax; +border-top-width: 6px; + +/* 전역 값 */ +border-top-width: inherit; +border-top-width: initial; +border-top-width: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code><line-width></code></dt> + <dd>테두리의 너비입니다. 0 이상의 {{cssxref("<length>")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다. + <table class="standard-table"> + <tbody> + <tr> + <td><code>thin</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thin; background-color: palegreen;"></div> + </td> + <td>얇은 테두리</td> + </tr> + <tr> + <td><code>medium</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: medium; background-color: palegreen;"></div> + </td> + <td>중간 테두리</td> + </tr> + <tr> + <td><code>thick</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thick; background-color: palegreen;"></div> + </td> + <td>넓은 테두리</td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>참고:</strong> 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 <code>thin ≤ medium ≤ thick</code>이고, 하나의 문서 내에서 동일합니다.</p> + </div> + </dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Element 1</div> +<div>Element 2</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + border: 1px solid red; + margin: 1em 0; +} + +div:nth-child(1) { + border-top-width: thick; +} +div:nth-child(2) { + border-top-width: 2em; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', '100%')}}</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('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-left-width', 'border-top-width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-top-width")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 너비 관련 CSS 속성: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, and {{Cssxref("border-width")}}.</li> + <li>위쪽 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-top")}}, {{Cssxref("border-top-style")}}, and {{Cssxref("border-top-color")}}.</li> +</ul> diff --git a/files/ko/web/css/border-top/index.html b/files/ko/web/css/border-top/index.html new file mode 100644 index 0000000000..53b254c317 --- /dev/null +++ b/files/ko/web/css/border-top/index.html @@ -0,0 +1,109 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 테두리 +translation_of: Web/CSS/border-top +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>border-top</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 위쪽 테두리를 설정합니다.</span> {{cssxref("border-top-width")}}, {{cssxref("border-top-style")}}, {{cssxref("border-top-color")}}의 값을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-top.html")}}</div> + + + +<p>다른 단축 속성과 마찬가지로, <code>border-top</code>는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.</p> + +<pre class="brush: css">border-top-style: dotted; +border-top: thick green; +</pre> + +<pre class="brush: css">border-top-style: dotted; +border-top: none thick green; +</pre> + +<p>따라서 <code>border-top</code>보다 먼저 지정한 {{cssxref("border-top-style")}}의 값은 무시됩니다. {{cssxref("border-top-style")}}의 기본값은 <code>none</code>이므로, <code>border-style</code>을 명시하지 않으면 테두리를 만들지 않습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">border-top: 1px; +border-top: 2px dotted; +border-top: medium dashed green; +</pre> + +<p><code>border-top</code>은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code><br-width></code></dt> + <dd>{{cssxref("border-top-width")}}.</dd> + <dt><code><br-style></code></dt> + <dd>{{cssxref("border-top-style")}}.</dd> + <dt>{{cssxref("<color>")}}</dt> + <dd>{{cssxref("border-top-color")}}.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><div> + 위쪽 테두리를 가진 요소입니다. +</div></pre> + +<pre class="brush: css">div { + border-top: 4px dashed blue; + background-color: gold; + height: 100px; + width: 100px; + font-weight: bold; + text-align: center; +} +</pre> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#border-top', 'border-top')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No direct changes, though the modification of values for the {{cssxref("border-top-color")}} do apply to it.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.border-top")}}</p> diff --git a/files/ko/web/css/border-width/index.html b/files/ko/web/css/border-width/index.html new file mode 100644 index 0000000000..f41c188740 --- /dev/null +++ b/files/ko/web/css/border-width/index.html @@ -0,0 +1,194 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-width +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-width</code></strong> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소 네 면 테두리의 너비를 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-width.html")}}</div> + + + +<h2 id="구성_속성">구성 속성</h2> + +<p><code>border-width</code>는 단축 속성으로서 다음의 하위 속성을 포함합니다.</p> + +<ul> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-top-width")}}</li> +</ul> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */ +border-width: thin; +border-width: medium; +border-width: thick; + +/* <length> 값 */<em> +</em>border-width: 4px; +border-width: 1.2rem;<em> +</em> +/* 세로방향 | 가로방향 */ +border-width: 2px 1.5em; + +/* 위 | 가로방향 | 아래 */ +border-width: 1px 2em 1.5cm; + +/* 위 | 오른쪽 | 아래 | 왼쪽 */ +border-width: 1px 2em 0 4rem; + +/* 전역 키워드 */ +border-width: inherit; +border-width: initial; +border-width: unset; +</pre> + +<p><code>border-width</code> 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.</p> + +<ul> + <li><strong>한 개의 값</strong>은 네 면 모두의 테두리 너비를 설정합니다.</li> + <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 테두리 너비를 설정합니다.</li> + <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 테두리 너비를 설정합니다.</li> + <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 테두리 너비를 지정합니다. (시계방향)</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt><code><line-width></code></dt> + <dd>테두리의 너비입니다. 0 이상의 {{cssxref("<length>")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다. + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>thin</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">얇은 테두리</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>medium</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">중간 테두리</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>thick</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">굵은 테두리</td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>참고:</strong> 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 <code>thin ≤ medium ≤ thick</code>이고, 하나의 문서 내에서 동일합니다.</p> + </div> + </dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="서로_다른_값의_조합">서로 다른 값의 조합</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p id="sval"> + 한 개의 값: 모든 네 면이 6px 테두리</p> +<p id="bival"> + 두 개의 다른 값: 위아래에 2px 테두리, 좌우에 10px 테두리</p> +<p id="treval"> + 세 개의 다른 값: 위에 0.3em, 아래에 9px, 좌우에 0</p> +<p id="fourval"> + 네 개의 다른 값: "얇은" 위, "중간" 오른쪽, "두꺼운" 아래, 왼쪽 1em</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">#sval { + border: ridge #ccc; + border-width: 6px; +} +#bival { + border: solid red; + border-width: 2px 10px; +} +#treval { + border: dotted orange; + border-width: 0.3em 0 9px; +} +#fourval { + border: solid lightgreen; + border-width: thin medium thick 1em; +} +p { + width: auto; + margin: 0.25em; + padding: 0.25em; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('서로_다른_값의_조합', 320, 320) }}</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('CSS3 Backgrounds', '#the-border-width', 'border-width')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No direct change; the {{cssxref("<length>")}} CSS data type extension has an effect on this property.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Added the constraint that values' meaning must be constant inside a document.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-width")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>테두리 관련 단축 속성: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}</li> + <li>테두리 너비 속성: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}</li> +</ul> diff --git a/files/ko/web/css/border/index.html b/files/ko/web/css/border/index.html new file mode 100644 index 0000000000..405ccfb05c --- /dev/null +++ b/files/ko/web/css/border/index.html @@ -0,0 +1,151 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - CSS Borders + - CSS Property + - Layout + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border +--- +<div>{{CSSRef("CSS Borders")}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border</code></strong> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 테두리를 설정합니다. {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}의 값을 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div> + + + +<h2 id="구성_속성">구성 속성</h2> + +<p><code>border</code>는 단축 속성으로서 다음의 하위 속성을 포함합니다.</p> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-width")}}</li> +</ul> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* 스타일 */ +border: solid; + +/* 너비 | 스타일 */ +border: 2px dotted; + +/* 스타일 | 색 */ +border: outset #f33; + +/* 너비 | 스타일 | 색 */ +border: medium dashed green; + +/* 전역 값 */ +border: inherit; +border: initial; +border: unset; +</pre> + +<p><code>border</code> 속성은 다음의 값 중 한 개에서 세 개를 선택해서 지정할 수 있습니다. 순서는 영향을 주지 않습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 스타일을 지정하지 않으면 기본값인 <code>none</code>이 사용돼 테두리가 보이지 않습니다.</p> +</div> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt id="<line-width>"><code><line-width></code></dt> + <dd>테두리의 굵기로 기본값은 <code>medium</code>입니다. {{Cssxref("border-width")}}를 참고하세요.</dd> + <dt id="<line-style>"><code><line-style></code></dt> + <dd>테두리의 스타일로 기본값은 <code>none</code>입니다. {{Cssxref("border-style")}}을 참고하세요.</dd> + <dt id="<color>">{{cssxref("<color>")}}</dt> + <dd>테두리의 색상으로 기본값은 <code>currentcolor</code>입니다. {{Cssxref("border-color")}}를 참고하세요.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>다른 단축 속성과 마찬가지로, 생략한 속성은 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>으로 설정됩니다. 한 가지 중요한 점은, <code>border</code>를 사용해서는 {{cssxref("border-image")}}에 원하는 값을 지정할 수는 없고 대신 초깃값인 <code>none</code>이 자동으로 설정됩니다.</p> + +<p><code>border</code> 단축 속성은 요소의 테두리를 모두 동일하게 설정하고 싶을 때 특히 유용합니다. 그러나 서로의 테두리를 다르게 하고 싶다면 네 면을 각각 설정할 수 있는 본디 속성 {{Cssxref("border-width")}}, {{Cssxref("border-style")}},{{Cssxref("border-color")}}를 사용하면 됩니다. 아니면 한 면의 테두리를 절대 기준({{Cssxref("border-top")}} 등)이나 상대 기준({{Cssxref("border-block-start")}} 등) 속성을 사용해서 따로 정해줄 수도 있습니다.</p> + +<h3 id="테두리_vs외곽선">테두리 vs외곽선</h3> + +<p>테두리와 <a href="/ko/docs/Web/CSS/outline">외곽선</a>은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.</p> + +<ul> + <li>외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.</li> + <li>명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.</li> +</ul> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate"><code>{{csssyntax}}</code></pre> + +<h2 id="예제">예제</h2> + +<h3 id="튀어나오는_듯한_분홍색_테두리_추가하기">튀어나오는 듯한 분홍색 테두리 추가하기</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>테두리와 외곽선에 더해 그림자까지, 정말 멋지지 않나요?</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + border: 0.5rem outset pink; + outline: 0.5rem solid khaki; + box-shadow: 0 0 0 2rem skyblue; + border-radius: 12px; + font: bold 1rem sans-serif; + margin: 2rem; + padding: 1rem; + outline-offset: 0.5rem; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('튀어나오는_듯한_분홍색_테두리_추가하기')}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Removes <em>specific</em> support for <code>transparent</code>, as it is now a valid {{cssxref("<color>")}}; this has no practical impact.<br> + Though it cannot be set to a custom value using the shorthand, <code>border</code> now resets {{cssxref("border-image")}} to its initial value (<code>none</code>).</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border', 'border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border")}}</p> diff --git a/files/ko/web/css/box-shadow/index.html b/files/ko/web/css/box-shadow/index.html new file mode 100644 index 0000000000..a040af6e5e --- /dev/null +++ b/files/ko/web/css/box-shadow/index.html @@ -0,0 +1,126 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Property + - CSS Styles + - Reference +translation_of: Web/CSS/box-shadow +--- +<div>{{ CSSRef }}</div> + +<p><code>box-shadow</code> CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이루어집니다.</p> + +<p>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</p> + +<p><code>box-shadow</code> 속성은 거의 모든 요소의 테두리에서 그림자를 드리울 수 있도록 도와줍니다. {{cssxref("border-radius")}}가 요소에 함께 적용됐다면 박스 그림자의 모서리도 똑같이 둥근 모서리를 갖게 됩니다. 여러 그림자의 z축 순서는 {{cssxref("text-shadow")}}와 동일하게 처음 그림자일수록 위로 올라옵니다.</p> + +<p><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator">박스 그림자 생성기</a>는 상호작용형 도구로, 쉽게 <code>box-shadow</code>의 값을 생성할 수 있습니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush: css"><code>/* offset-x | offset-y | color */ +box-shadow: 60px -16px teal; + +/* offset-x | offset-y | blur-radius | color */ +box-shadow: 10px 5px 5px black; + +/* offset-x | offset-y | blur-radius | spread-radius | color */ +box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); + +/* inset | offset-x | offset-y | color */ +box-shadow: inset 5em 1em gold; + +/* Any number of shadows, separated by commas */ +box-shadow: 3px 3px red, -1em 0 0.4em olive; + +/* Global keywords */ +box-shadow: inherit; +box-shadow: initial; +box-shadow: unset;</code> +</pre> + +<p>하나의 <code>box-shadow</code>는 다음 구성요소로 지정할 수 있습니다.</p> + +<ul> + <li>두 개에서 네 개의 {{cssxref("<length>")}} 값. + <ul> + <li>두 개의 값을 사용하면 <code><offset-x><offset-y></code>로 분석합니다.</li> + <li>세 번째 값이 주어지면 <code><blur-radius></code>로 분석합니다.</li> + <li>네 번째 값이 주어지면 <code><spread-radius></code>로 분석합니다.</li> + </ul> + </li> + <li>선택사항으로 <code>inset</code> 키워드.</li> + <li>선택사항으로 {{cssxref("<color>")}} 값.</li> +</ul> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt><code>inset</code></dt> + <dd>값을 지정하지 않으면(기본값) 요소가 공중에 떠있는 것처럼 밖에 드리우는 그림자가 됩니다.<br> + <code>inset</code> 키워드가 존재하면 요소가 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려집니다.</dd> + <dt><code><offset-x></code> <code><offset-y></code></dt> + <dd>그림자의 위치를 설정하는 두 개의 {{cssxref("<length>")}} 값입니다. <code><offset-x></code>는 수평 거리를 의미하며 음수 값은 그림자를 요소의 왼쪽에 표시합니다. <code><offset-y></code>는 수직 거리를 의미하며 음수 값은 그림자를 요소의 위쪽에 표시합니다. 가능한 단위는 {{cssxref("<length>")}}를 참고하세요.<br> + 두 값이 모두 <code>0</code>이면 그림자가 요소 바로 뒤쪽에 위치하며, <code><blur-radius></code> 또는 <code><spread-radius></code>가 존재하면 흐려지는 효과를 볼 수 있습니다.</dd> + <dt><code><blur-radius></code></dt> + <dd>세 번째 {{cssxref("<length>")}} 값입니다. 크면 클 수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아집니다. 음수 값은 사용할 수 없습니다. 값을 설정하지 않으면 <code>0</code>이 되어 테두리가 선명해집니다. 명세는 흐림 효과의 지름을 어떻게 계산해야 하는지 정확한 알고리즘은 명시하지 않았지만 대신 다음과 같이 설명하고 있습니다.</dd> + <dd> + <p class="summary">…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.</p> + </dd> + <dt><code><spread-radius></code></dt> + <dd>네 번째 {{cssxref("<length>")}} 값입니다. 양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듭니다. 기본값은 <code>0</code>(그림자와 요소 크기 동일)입니다. </dd> + <dt><code><color></code></dt> + <dd>가능한 키워드와 표기법은 {{cssxref("<color>")}}를 참고하세요.<br> + 기본값은 브라우저에 따라 다릅니다. 보통 {{cssxref("color")}} 속성의 값을 사용하지만, Safari는 투명한 그림자가 기본값입니다.</dd> +</dl> + +<h3 id="보간">보간</h3> + +<p>Each shadow in the list (treating <code>none</code> as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not <code>inset</code>, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one <code>inset</code> and the other not <code>inset</code>, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is <code>transparent</code>, all lengths are <code>0</code>, and whose <code>inset</code> (or not) matches the longer list.</p> + +<h3 id="형식_구문">형식 구문</h3> + +<pre>{{csssyntax}} +</pre> + +<h2 id="Live_examples" name="Live_examples">예제</h2> + +<ul> + <li><a class="external" href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html" title="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow test</a></li> + <li><a class="external" href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/" title="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow tutorial and examples</a></li> +</ul> + +<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('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("css.properties.box-shadow")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("<color>")}} 자료형</li> + <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> +</ul> diff --git a/files/ko/web/css/box-sizing/index.html b/files/ko/web/css/box-sizing/index.html new file mode 100644 index 0000000000..7241c0f65b --- /dev/null +++ b/files/ko/web/css/box-sizing/index.html @@ -0,0 +1,119 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/box-sizing +--- +<div>{{CSSRef}}</div> + +<p><strong><code>box-sizing</code></strong> <a href="/ko/docs/Web/CSS" title="CSS/Common_CSS_Questions">CSS</a> 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div> + + + +<p>CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.</p> + +<p><code>box-sizing</code> 속성을 사용해 이 방식을 바꿀 수 있습니다.</p> + +<ul> + <li><code>content-box</code>는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.</li> + <li><code>border-box</code>는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.</li> +</ul> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<p><code>box-sizing</code> 속성은 다음 키워드 중 하나로 지정할 수 있습니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt><code>content-box</code></dt> + <dd>CSS 표준이 정의한 초기 기본값. {{Cssxref("width")}}와 {{Cssxref("height")}} 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다. 즉 <code>.box {width: 350px; border: 10px solid black;}</code>을 적용한 요소의 너비는 <code>370px</code>입니다.</dd> + <dd>요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.</dd> + <dt><code>border-box</code></dt> + <dd>{{Cssxref("width")}} 와 {{Cssxref("height")}} 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 요소 상자 안에 위치함을 유의하세요. 즉 <code>.box {width: 350px; border: 10px solid black;}</code>을 적용한 요소의 너비는 <code>350px</code>입니다. 콘텐츠 영역의 크기는 음수일 수 없으므로 <code>border-box</code>를 사용해 요소를 사라지게 할 수는 없습니다.</dd> + <dd>요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<p>다음 예제는 두 개의 동일한 요소의 크기가 서로 다른 <code>box-sizing</code> 값으로 어떻게 달라지는지 보입니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="content-box">Content box</div> +<br> +<div class="border-box">Border box</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 160px; + height: 80px; + padding: 20px; + border: 8px solid red; + background: yellow; +} + +.content-box { + box-sizing: content-box; + /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px + Total height: 80px + (2 * 20px) + (2 * 8px) = 136px + Content box width: 160px + Content box height: 80px */ +} + +.border-box { + box-sizing: border-box; + /* Total width: 160px + Total height: 80px + Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px + Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 'auto', 300)}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.box-sizing")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 기본 박스 모델</a></li> +</ul> diff --git a/files/ko/web/css/calc()/index.html b/files/ko/web/css/calc()/index.html new file mode 100644 index 0000000000..7a155befb3 --- /dev/null +++ b/files/ko/web/css/calc()/index.html @@ -0,0 +1,160 @@ +--- +title: calc() +slug: Web/CSS/calc() +tags: + - CSS + - CSS Function + - Layout + - Reference + - Web +translation_of: Web/CSS/calc() +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>calc()</code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다.</span> {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, 또는 {{cssxref("<integer>")}}를 받는 속성의 값으로 사용할 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css notranslate">/* property: calc(expression) */ +width: calc(100% - 80px); +</pre> + +<p><code>calc()</code> 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.</p> + +<dl> + <dt><code>+</code></dt> + <dd>덧셈.</dd> + <dt><code>-</code></dt> + <dd>뺄셈.</dd> + <dt><code>*</code></dt> + <dd>곱셈. 하나 이상의 피연산자가 {{cssxref("<number>")}}여야 합니다.</dd> + <dt><code>/</code></dt> + <dd>나눗셈. 오른쪽 피연산자는 {{cssxref("<number>")}}여야 합니다.</dd> +</dl> + +<p>피연산자로는 {{cssxref("<length>")}} 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.</p> + +<h3 id="참고">참고</h3> + +<ul> + <li>0으로 나누면 HTML 구문분석기에서 오류가 발생합니다.</li> + <li><code>+</code>와 <code>-</code> 연산자는 좌우에 공백이 있어야 합니다. <code>calc(50% -8px)</code>은 백분율 값과 음수 길로 해석하여 유효하지 않지만, <code>calc(50% - 8px)</code>은 백분율과 길이의 뺄셈으로 해석합니다. 마찬가지로, <code>calc(8px + -50%)</code>는 길이와 음의 백분율간의 덧셈으로 처리합니다.</li> + <li><code>*</code>와 <code>/</code> 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋습니다.</li> + <li>표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면 <code>auto</code> 키워드를 사용한 것과 동일하게 처리합니다.</li> + <li><code>calc()</code> 함수를 중첩해서 사용하면 내부의 <code>calc()</code>는 단순한 괄호로 간주합니다.</li> +</ul> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="요소를_화면에_여백과_함께_배치하기">요소를 화면에 여백과 함께 배치하기</h3> + +<p><code>calc()</code>를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.</p> + +<pre class="brush: css notranslate">.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; +}</pre> + +<pre class="brush: html notranslate"><div class="banner">이건 현수막입니다!</div></pre> + +<p>{{EmbedLiveSample('요소를_화면에_여백과_함께_배치하기', 'auto', '60')}}</p> + +<h3 id="입력_양식_요소를_컨테이너_크기에_자동으로_맞추기">입력 양식 요소를 컨테이너 크기에 자동으로 맞추기</h3> + +<p><code>calc()</code>의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.</p> + +<p>다음 CSS 코드를 살펴보세요.</p> + +<pre class="brush: css notranslate">input { + padding: 2px; + display: block; + width: calc(100% - 1em); +} + +#formbox { + width: calc(100% / 6); + border: 1px solid black; + padding: 4px; +}</pre> + +<p>위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.</p> + +<pre class="brush: html notranslate"><form> + <div id="formBox"> + <label>뭔가 입력해 보세요.</label> + <input type="text"> + </div> +</form> +</pre> + +<p>{{EmbedLiveSample('입력_양식_요소를_컨테이너_크기에_자동으로_맞추기', '100%', '80')}}</p> + +<h3 id="CSS_변수와_중첩_calc">CSS 변수와 중첩 <code>calc()</code></h3> + +<p><a href="/ko/docs/Web/CSS/CSS_Variables" style="">CSS 변수</a><span style="">도 <code>calc()</code>와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.</span></p> + +<pre class="brush: css notranslate"><code>.foo { + --widthA: 100px; + --widthB: calc(var(--widthA) / 2); + --widthC: calc(var(--widthB) / 2); + width: var(--widthC); +}</code></pre> + +<p>모든 변수를 펼치면 <code>widthC</code>의 값은 <code>calc( calc( 100px / 2) / 2)</code>가 됩니다. 그 후 <code>.foo</code>의 너비 속성으로 지정될 때, 모든 중첩 <code>calc()</code>는 깊이에 관계 없이 단순한 괄호로 바뀌므로 <code>width</code> 속성의 값은 <code>calc( ( 100px / 2) / 2)</code>, 즉 <code>25px</code>이 됩니다. 요약하자면 <code>calc()</code> 안의 <code>calc()</code>는 그냥 괄호와 같습니다.</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>calc()</code>를 사용해 글씨 크기를 조절할땐 아래 코드처럼 피연산자 중 하나로 꼭 <a href="/ko/docs/Web/CSS/length#상대길이_단위">상대길이 단위</a>를 사용해주세요.</p> + +<pre class="brush: css notranslate">h1 { + font-size: calc(1.5rem + 3vw); +}</pre> + +<p>이제 페이지를 확대해도 글씨 크기의 비율이 적절히 유지됩니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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 Values', '#calc-notation', 'calc()')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>최초로 정의됨.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.calc")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li> +</ul> diff --git a/files/ko/web/css/cascade/index.html b/files/ko/web/css/cascade/index.html new file mode 100644 index 0000000000..e7d073cddb --- /dev/null +++ b/files/ko/web/css/cascade/index.html @@ -0,0 +1,229 @@ +--- +title: 종속 +slug: Web/CSS/Cascade +tags: + - CSS + - Guide + - Introduction + - Layout + - Reference +translation_of: Web/CSS/Cascade +--- +<div>{{CSSRef}}</div> + +<p><strong>종속(Cascade)</strong>이란 서로 다른 원점에서 가져온 속성 여럿을 조합해 최종 결과를 도출하는 알고리즘입니다. Cascading Style Sheets라는 이름에서도 알 수 있듯 종속은 CSS의 중심입니다. 이 글은 종속이 무엇인지, 선언한 {{Glossary("CSS")}} <a href="/ko/docs/Web/API/CSSStyleDeclaration">정의</a>가 어떤 순서로 종속되는지, 그리고 여러분, 즉 웹 개발자에게 어떤 영향을 주는지 설명합니다.</p> + +<h2 id="Which_CSS_entities_participate_in_the_cascade">Which CSS entities participate in the cascade</h2> + +<p>Only CSS declarations, that is property/value pairs, participate in the cascade. This means that <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a> containing entities other than declarations, such as a {{ cssxref("@font-face")}} rule containing <em>descriptors</em>, don't participate in the cascade. In these cases, only the at-rule as a whole participates in the cascade: here, the <code>@font-face</code> identified by its <code><a href="/en-US/docs/Web/CSS/@font-face/font-family">font-family</a></code> descriptor. If several <code>@font-face</code> rules with the same descriptor are defined, only the most appropriate <code>@font-face</code>, as a whole, is considered.</p> + +<p>While the declarations contained in most at-rules — such as those in {{cssxref("@media")}}, {{cssxref("@document")}}, or {{cssxref("@supports")}} — participate in the cascade, declarations contained in {{cssxref("@keyframes")}} don't. As with <code>@font-face</code>, only the at-rule as a whole is selected via the cascade algorithm.</p> + +<p>Finally, note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.</p> + +<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2> + +<p>The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the <strong>{{anch("User-agent stylesheets")}}</strong>, the <strong>{{anch("Author stylesheets")}}</strong>, and the <strong>{{anch("User stylesheets")}}</strong>.</p> + +<p>Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.</p> + +<h3 id="User-agent_stylesheets">User-agent stylesheets</h3> + +<p>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.</p> + +<p>Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.</p> + +<h3 id="Author_stylesheets">Author stylesheets</h3> + +<p><strong>Author stylesheets</strong> are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.</p> + +<h3 id="User_stylesheets">User stylesheets</h3> + +<p>The user (or reader) of the web site can choose to override styles in many browsers using a custom <strong>user stylesheet</strong> designed to tailor the experience to the user's wishes.</p> + +<h3 id="Override_stylesheets" name="Override_stylesheets">Override stylesheets {{Obsolete_Inline}}</h3> + +<p>This feature was never implemented outside of Gecko, where it was only ever used for the non-standard <a href="/en-US/docs/Mozilla/Tech/XBL">XBL stylesheets</a>.</p> + +<h2 id="Cascading_order">Cascading order</h2> + +<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p> + +<ol> + <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li> + <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + <table class="standard-table"> + <thead> + <tr> + <th scope="col"> </th> + <th scope="col">Origin</th> + <th scope="col">Importance</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>CSS Transitions</td> + <td><em>see below</em></td> + </tr> + <tr> + <td>2</td> + <td>user agent</td> + <td>normal</td> + </tr> + <tr> + <td>3</td> + <td>user</td> + <td>normal</td> + </tr> + <tr> + <td> </td> + <td>override {{Obsolete_Inline}}</td> + <td>normal</td> + </tr> + <tr> + <td>4</td> + <td>author</td> + <td>normal</td> + </tr> + <tr> + <td>5</td> + <td>CSS Animations</td> + <td><em>see below</em></td> + </tr> + <tr> + <td> </td> + <td>override {{Obsolete_Inline}}</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>6</td> + <td>author</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>7</td> + <td>user</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>8</td> + <td>user agent</td> + <td><code>!important</code></td> + </tr> + </tbody> + </table> + </li> + <li>In case of equality, the <a href="/en-US/docs/Web/CSSSpecificity" title="/en-US/docs/Web/CSSSpecificity">specificity</a> of a value is considered to choose one or the other.</li> +</ol> + +<h2 id="Resetting_styles">Resetting styles</h2> + +<p>After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.</p> + +<p><code>all</code> lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.</p> + +<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2> + +<p><a href="/en-US/docs/Web/CSSUsing_CSS_animations" title="/en-US/docs/Web/CSSUsing_CSS_animations">CSS animations</a>, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.</p> + +<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p> + +<p>Also note that values within <code>@keyframes</code> at-rules overwrite all normal values but are overwritten by <code>!important</code> values.</p> + +<h2 id="Example">Example</h2> + +<p>Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:</p> + +<p><strong>User-agent CSS:</strong></p> + +<pre class="brush:css;">li { margin-left: 10px }</pre> + +<p><strong class="brush:css;">Author CSS 1:</strong></p> + +<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre> + +<p><strong class="brush:css;">Author CSS 2:</strong></p> + +<pre class="brush:css;">@media screen { + li { margin-left: 3px } +} + +@media print { + li { margin-left: 1px } +} +</pre> + +<p><strong class="brush:css;">User CSS:</strong></p> + +<pre class="brush:css;">.specific { margin-left: 1em }</pre> + +<p><strong>HTML:</strong></p> + +<pre class="brush:html;"><ul> + <li class="specific">1<sup>st</sup></li> + <li>2<sup>nd</sup></li> +</ul> +</pre> + +<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code>, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p> + +<p>So three declarations are in competition:</p> + +<pre class="brush:css;">margin-left: 0</pre> + +<pre class="brush:css;">margin-left: 3px</pre> + +<pre class="brush:css;">margin-left: 1px</pre> + +<p>The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:</p> + +<pre class="brush:css;">margin-left: 3px</pre> + +<p>Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.</p> + +<h2 id="Specifications">Specifications</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("CSS4 Cascade")}}</td> + <td>{{Spec2("CSS4 Cascade")}}</td> + <td>Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Cascade")}}</td> + <td>{{Spec2("CSS3 Cascade")}}</td> + <td>Removed the override cascade origin, as it was never used in a W3C standard.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Style","css.html#CSS-OverrideAndComputed","override cascade origin")}}</td> + <td>{{Spec2("DOM2 Style")}}</td> + <td>Defined the override cascade origin, but didn't elaborate further.</td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">A very simple introduction to the CSS cascade</a></li> + <li>{{CSS_Key_Concepts}}</li> +</ul> diff --git a/files/ko/web/css/child_combinator/index.html b/files/ko/web/css/child_combinator/index.html new file mode 100644 index 0000000000..dceec68d92 --- /dev/null +++ b/files/ko/web/css/child_combinator/index.html @@ -0,0 +1,92 @@ +--- +title: 자식 결합자 +slug: Web/CSS/Child_combinator +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Child_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<p><strong>자식 결합자</strong>(<code>></code>)는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택합니다.</p> + +<pre class="brush: css no-line-numbers">/* List items that are children of the "my-things" list */ +ul.my-things > li { + margin: 2em; +}</pre> + +<p>뒤쪽 선택자의 요소는 앞쪽 선택자 요소의 바로 아래에 위치해야 하므로, DOM 트리의 깊이에 상관하지 않고 아래의 모든 요소를 선택하는 <a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a>보다 더 엄격합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">selector1 > selector2 { <em>style properties</em> } +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: white; +} + +div > span { + background-color: DodgerBlue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <span>Span #1, in the div. + <span>Span #2, in the span that's in the div.</span> + </span> +</div> +<span>Span #3, not in the div at all.</span> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "100%", 100)}}</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("CSS4 Selectors", "#child-combinators", "child combinator")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#child-combinators", "child combinators")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#child-selectors", "child selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.child")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a></li> +</ul> diff --git a/files/ko/web/css/class_selectors/index.html b/files/ko/web/css/class_selectors/index.html new file mode 100644 index 0000000000..70c84faa98 --- /dev/null +++ b/files/ko/web/css/class_selectors/index.html @@ -0,0 +1,107 @@ +--- +title: 클래스 선택자 +slug: Web/CSS/Class_selectors +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Class_selectors +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>클래스 선택자</strong>는 요소의 {{htmlattrxref("class")}} 특성에 기반해 요소를 선택합니다.</p> + +<pre class="brush: css no-line-numbers">/* All elements with class="spacious" */ +.spacious { + margin: 2em; +} + +/* All <li> elements with class="spacious" */ +li.spacious { + margin: 2em; +} + +/* All <li> elements with a class list that includes both "spacious" and "elegant" */ +/* For example, class="elegant retro spacious" */ +li.spacious.elegant { + margin: 2em; +} +</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">.class_name { <em>style properties</em> }</pre> + +<p>위의 구문은 <a href="/ko/docs/Web/CSS/Attribute_selectors">특성 선택자</a>를 사용한 다음 구문과 동일합니다.</p> + +<pre class="syntaxbox">[class~=class_name] { <em>style properties</em> }</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.red { + color: #f33; +} + +.yellow-bg { + background: #ffa; +} + +.fancy { + font-weight: bold; + text-shadow: 4px 4px 3px #77f; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="red">빨간 글자색의 문단입니다.</p> +<p class="red yellow-bg">빨간 글자색과 노란 배경의 문단입니다.</p> +<p class="red fancy">빨간 글자색과 "멋진" 스타일을 가진 문단입니다.</p> +<p>이건 그냥 문단이에요.</p> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제')}}</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('CSS4 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.class")}}</p> diff --git a/files/ko/web/css/clear/index.html b/files/ko/web/css/clear/index.html new file mode 100644 index 0000000000..f4ed21f1e9 --- /dev/null +++ b/files/ko/web/css/clear/index.html @@ -0,0 +1,231 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference +translation_of: Web/CSS/clear +--- +<div>{{CSSRef}}</div> + +<p><strong><code>clear</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소가 선행 <a href="/ko/docs/Web/CSS/float">부동</a>(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. <code>clear</code> 속성은 부동 및 비부동 요소 모두에 적용됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div> + + + +<p>비부동 블록에 적용되는 경우, 모든 관련 부동체(floats)의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a> 아래로까지 요소의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">보더 경계</a>를 아래로 내립니다. 이 움직임(이 일어나는 경우)은 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" title="margin collapsing">마진 상쇄</a>가 일어나지 않도록 합니다.</p> + +<p>부동 요소에 적용되는 경우, 모든 관련 부동체의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a> 아래로 요소의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a>를 옮깁니다. 이는 나중(later) 부동체의 위치에 영향을 줍니다, 나중 부동체가 앞선(earlier) 부동체보다 높게 위치될 수 없기에.</p> + +<p>해제(cleared)와 관련된 부동체는 같은 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context" title="block formatting context">블록 형성 문맥</a> 내 앞선 부동체입니다.</p> + +<div class="note"> +<p><strong>주의:</strong> 요소가 그 안에 모든 부동 요소를 포함하고 싶은 경우, 컨테이너도 부동하거나 컨테이너의 {{cssxref("::after")}} 대체 <a href="/ko/docs/Web/CSS/Pseudo-elements">가상 요소</a>에 <code>clear</code>를 쓸 수 있습니다.</p> + +<pre class="brush: css">#container::after { + content: ""; + display: block; + clear: both; +} +</pre> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css">/* 키워드 값 */ +clear: none; +clear: left; +clear: right; +clear: both; +clear: inline-start; +clear: inline-end; + +/* 전역 값 */ +clear: inherit; +clear: initial; +clear: unset;</pre> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt><code>none</code></dt> + <dd>요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 <em>않음</em>을 나타내는 키워드입니다.</dd> + <dt><code>left</code></dt> + <dd>요소가 지난 <em>left</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd> + <dt><code>right</code></dt> + <dd>요소가 지난 <em>right</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd> + <dt><code>both</code></dt> + <dd>요소가 지난 <em>both</em> left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd> + <dt><code>inline-start</code></dt> + <dd>요소가 <em>포함 블록의 시작 쪽</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 <em>left</em> 부동체 및 rtl 스크립트의 <em>right</em> 부동체.</dd> + <dt><code>inline-end</code></dt> + <dd>요소가 <em>포함 블록의 끝 쪽</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 <em>right</em> 부동체 및 rtl 스크립트의 <em>left</em> 부동체.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="clear:_left" name="clear:_left">clear: left</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="left">This paragraph clears left.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.left { + border: 1px solid black; + clear: left; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width: 20%; +} +.red { + float: left; + margin: 0; + background-color: red; + width:20%; +} +p { + width: 50%; +} +</pre> + +<p>{{ EmbedLiveSample('clear:_left','100%','250') }}</p> + +<h3 id="clear:_right" name="clear:_right">clear: right</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="right">This paragraph clears right.</p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.right { + border: 1px solid black; + clear: right; +} +.black { + float: right; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: red; + width:20%; +} +p { + width: 50%; +}</pre> + +<p>{{ EmbedLiveSample('clear:_right','100%','250') }}</p> + +<h3 id="clear:_both" name="clear:_both">clear: both</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="both">This paragraph clears both.</p> +</div></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.both { + border: 1px solid black; + clear: both; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: red; + width:20%; +} +p { + width: 45%; +}</pre> + +<p>{{ EmbedLiveSample('clear:_both','100%','300') }}</p> + +<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('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td><code>inline-start</code> 및 <code>inline-end</code> 값 추가</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>중요한 변화 없음, 세부사항은 명확해졌지만.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#clear', 'clear')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div>{{Compat("css.properties.clear")}}</div> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="Box model">박스 모델</a></li> +</ul> diff --git a/files/ko/web/css/clip-path/index.html b/files/ko/web/css/clip-path/index.html new file mode 100644 index 0000000000..588fb46724 --- /dev/null +++ b/files/ko/web/css/clip-path/index.html @@ -0,0 +1,614 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +tags: + - CSS + - CSS Masking + - CSS Property + - Experimental + - Reference + - Web +translation_of: Web/CSS/clip-path +--- +<div>{{CSSRef}}</div> + +<p><code><strong>clip-path</strong></code> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 클리핑 범위를 지정합니다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨집니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/clip-path.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 값 */ +clip-path: none; + +/* <clip-source> 값 */ +clip-path: url(resources.svg#c1); + +/* <geometry-box> 값 */ +clip-path: margin-box; +clip-path: border-box; +clip-path: padding-box; +clip-path: content-box; +clip-path: fill-box; +clip-path: stroke-box; +clip-path: view-box; + +/* <basic-shape> 값 */ +clip-path: inset(100px 50px); +clip-path: circle(50px at 0 100px); +clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); + +/* 박스와 도형 값 조합 */ +clip-path: padding-box circle(50px at 0 100px); + +/* 전역 값 */ +clip-path: inherit; +clip-path: initial; +clip-path: unset; +</pre> + +<p><code>clip-path</code> 속성은 아래의 값을 하나 이상 조합해 지정할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code><clip-source></code></dt> + <dd><a href="/ko/docs/Web/SVG">SVG</a> {{SVGElement("clipPath")}} 요소를 가리키는 {{cssxref("<url>")}}.</dd> + <dt>{{cssxref("<basic-shape>")}}</dt> + <dd><code><geometry-box></code> 값으로 크기와 위치가 정해지는 도형. <code><geometry-box></code>를 지정하지 않는다면 <code>border-box</code>를 참조 박스로 사용합니다.</dd> + <dt><code><geometry-box></code></dt> + <dd><code><basic-shape></code>와 함께 지정하면, <code><basic-shape></code>의 참조 박스를 정의합니다. 단독으로 지정한 경우, 값으로 주어진 상자와 그 상자의 모서리 형태({{cssxref("border-radius")}} 등)를 클리핑 패스로 적용합니다. 가능한 값은 다음과 같습니다.</dd> + <dd> + <dl> + <dt><code>margin-box</code></dt> + <dd><a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box">바깥 여백 상자</a>를 참조로 사용합니다.</dd> + <dt><code>border-box</code></dt> + <dd><a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#border-box">테두리 상자</a>를 참조로 사용합니다.</dd> + <dt><code>padding-box</code></dt> + <dd><a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box">안쪽 여백 상자</a>를 참조로 사용합니다.</dd> + <dt><code>content-box</code></dt> + <dd><a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#content-box">콘텐츠 상자</a>를 참조로 사용합니다.</dd> + <dt><code>fill-box</code></dt> + <dd>객체의 바운딩 상자를 참조로 사용합니다.</dd> + <dt><code>stroke-box</code></dt> + <dd>테두리 바운딩 상자를 참조로 사용합니다.</dd> + <dt><code>view-box</code></dt> + <dd>가장 가까운 SVG 뷰포트를 참조 상자로 사용합니다. SVG 뷰포트를 생성한 요소가 {{SVGAttr("viewBox")}} 속성을 가진 경우, 참조 상자의 위치는 <code>viewBox</code> 속성이 정의하는 좌표계의 원점에 위치하고, 크기는 <code>viewBox</code> 속성의 너비와 높이 값과 동일합니다.</dd> + </dl> + </dd> + <dt><code>none</code></dt> + <dd>클리핑 패스를 생성하지 않습니다.</dd> +</dl> + +<div class="note"> +<p><strong>참고</strong>: {{cssxref("opacity")}}가 1이 아닌 값일 때와 마찬가지로, <strong><code>none</code></strong> 외의 계산값은 새로운 <a href="/ko/docs/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다.</p> +</div> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML과_SVG의_차이점">HTML과 SVG의 차이점</h3> + +<div class="hidden" id="clip-path"> +<pre class="brush: html"><svg class="defs"> + <defs> + <clipPath id="myPath" clipPathUnits="objectBoundingBox"> + <path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /> + </clipPath> + </defs> +</svg> + +<div class="grid"> + <div class="col"> + <div class="note">clip-path: none</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="none"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="none"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: url(#myPath)<br><br> + Assuming the following clipPath definition: + <pre> +&lt;svg&gt; + &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt; + &lt;path d="M0.5,1 + C 0.5,1,0,0.7,0,0.3 + A 0.25,0.25,1,1,1,0.5,0.3 + A 0.25,0.25,1,1,1,1,0.3 + C 1,0.7,0.5,1,0.5,1 Z" /&gt; + &lt;/clipPath&gt; +&lt;/svg&gt;</pre> + </div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="svg"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="svg"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z') + </div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="svg2"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="svg2"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + + + <div class="note">clip-path: circle(25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape1"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape1"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape2"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape2"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape3"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape3"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape4"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape4"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: view-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape5"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape5"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape6"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape6"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: border-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape7"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape7"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape8"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape8"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + + <div class="note">clip-path: content-box circle(25% at 25% 25%)</div> + <div class="row"> + <div class="cell"> <span>HTML</span> + <div class="container"> + <p class="shape9"> + I LOVE<br><em>clipping</em> + </p> + </div> + </div> + <div class="cell"> <span>SVG</span> + <div class="container viewbox"> + <svg viewBox="0 0 192 192"> + <g class="shape9"> + <rect x="24" y="24" width="144" height="144" /> + <text x="96" y="91">I LOVE</text> + <text x="96" y="109" class="em">clipping</text> + </g> + </svg> + </div> + </div> + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; + background: #EEE; +} + +.grid { + width: 100%; + height: 100%; + display: flex; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; +} + +.col { + flex: 1 auto; +} + +.cell { + margin: .5em; + padding: .5em; + background-color: #FFF; + overflow: hidden; + text-align: center; + flex: 1; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em .5em 0; + font: .8em sans-serif; + text-align: left; + white-space: nowrap; +} + +.note + .row .cell { + margin-top: 0; +} + +.container { + display: inline-block; + border: 1px dotted grey; + position:relative; +} + +.container:before { + content: 'margin'; + position: absolute; + top: 2px; + left: 2px; + font: italic .6em sans-serif; +} + +.viewbox { + box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset; +} + +.container.viewbox:after { + content: 'viewbox'; + position: absolute; + left: 1.1rem; + top: 1.1rem; + font: italic .6em sans-serif; +} + +.cell span { + display: block; + margin-bottom: .5em; +} + +p { + font-family: sans-serif; + background: #000; + color: pink; + margin: 2em; + padding: 3em 1em; + border: 1em solid pink; + width: 6em; +} + +.none { clip-path: none; } +.svg { clip-path: url(#myPath); } +.svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');} +.shape1 { clip-path: circle(25%); } +.shape2 { clip-path: circle(25% at 25% 25%); } +.shape3 { clip-path: fill-box circle(25% at 25% 25%); } +.shape4 { clip-path: stroke-box circle(25% at 25% 25%); } +.shape5 { clip-path: view-box circle(25% at 25% 25%); } +.shape6 { clip-path: margin-box circle(25% at 25% 25%); } +.shape7 { clip-path: border-box circle(25% at 25% 25%); } +.shape8 { clip-path: padding-box circle(25% at 25% 25%); } +.shape9 { clip-path: content-box circle(25% at 25% 25%); } + +.defs { + width: 0; + height: 0; + margin: 0; +} + +pre { margin-bottom: 0; } + +svg { + margin: 1em; + font-family: sans-serif; + width: 192px; + height: 192px; +} + +svg rect { + stroke: pink; + stroke-width: 16px; +} + +svg text { + fill: pink; + text-anchor: middle; +} + +svg text.em { + font-style: italic; +}</pre> +</div> + +<p>{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}</p> + +<h3 id="완전한_예제">완전한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg" + alt="MDN logo"> +<svg height="0" width="0"> + <defs> + <clipPath id="cross"> + <rect y="110" x="137" width="90" height="90"/> + <rect x="0" y="110" width="90" height="90"/> + <rect x="137" y="0" width="90" height="90"/> + <rect x="0" y="0" width="90" height="90"/> + </clipPath> + </defs> +</svg> + +<select id="clipPath"> + <option value="none">none</option> + <option value="circle(100px at 110px 100px)">circle</option> + <option value="url(#cross)" selected>cross</option> + <option value="inset(20px round 20px)">inset</option> + <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option> +</select> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#clipped { + margin-bottom: 20px; + clip-path: url(#cross); +} +</pre> + +<div class="hidden"> +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath"); +clipPathSelect.addEventListener("change", function (evt) { + document.getElementById("clipped").style.clipPath = evt.target.value; +}); +</pre> +</div> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("완전한_예제", 230, 250)}}</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 Masks", "#the-clip-path", 'clip-path')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Extends its application to HTML elements. The <code>clip-path</code> property replaces the deprecated {{cssxref("clip")}} property.</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition (applies to SVG elements only).</td> + </tr> + <tr> + <td>{{SpecName("CSS Shapes 2", "#supported-basic-shapes", 'path')}}</td> + <td>{{Spec2('CSS Shapes 2')}}</td> + <td>Defines <code>path()</code>.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.clip-path")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">Shapes in clipping and masking – and how to use them</a></li> + <li>CSS 속성: {{cssxref("mask")}}, {{cssxref("filter")}}</li> + <li><a href="/ko/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">HTML 콘텐츠에 SVG 효과 적용하기</a></li> + <li>SVG 속성: {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}</li> +</ul> diff --git a/files/ko/web/css/color/index.html b/files/ko/web/css/color/index.html new file mode 100644 index 0000000000..7fe1cd0ba9 --- /dev/null +++ b/files/ko/web/css/color/index.html @@ -0,0 +1,163 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - CSS Colors + - CSS Property + - CSS Text + - Layout + - Reference + - Web + - 색 +translation_of: Web/CSS/color +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>color</code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> 속성은 요소의 글씨 및 <a href="/ko/docs/Web/CSS/text-decoration">글씨 장식</a>의 전경색과 {{cssxref("currentcolor")}}의 값을 설정합니다.</span> <code>currentcolor</code>는 다른 속성에서 사용할 수 있는 간접적인 값이며, {{cssxref("border-color")}} 등 일부 속성의 기본값입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div> + + + +<p>HTML에서 색을 사용하는 법은 <a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색입히기</a> 문서에서 정리한 내용으로 읽을 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">/* 키워드 값 */ +color: currentcolor; + +/* <named-color> 값 */ +color: red; +color: orange; +color: tan; +color: rebeccapurple; + +/* <hex-color> 값 */ +color: #090; +color: #009900; +color: #090a; +color: #009900aa; + +/* <rgb()> 값 */ +color: rgb(34, 12, 64, 0.6); +color: rgba(34, 12, 64, 0.6); +color: rgb(34 12 64 / 0.6); +color: rgba(34 12 64 / 0.3); +color: rgb(34.0 12 64 / 60%); +color: rgba(34.6 12 64 / 30%); + +/* <hsl()> 값 */ +color: hsl(30, 100%, 50%, 0.6); +color: hsla(30, 100%, 50%, 0.6); +color: hsl(30 100% 50% / 0.6); +color: hsla(30 100% 50% / 0.6); +color: hsl(30.0 100% 50% / 60%); +color: hsla(30.2 100% 50% / 60%); + +/* 전역 값 */ +color: inherit; +color: initial; +color: unset; +</pre> + +<p><code>color</code> 속성은 하나의 {{cssxref("<color>")}} 값을 사용해 지정합니다.</p> + +<p>값이 단일 색상이어야 함에 주의하세요. {{cssxref("<gradient>")}}는 사실 {{cssxref("<image>")}} 자료형이기 때문에 사용할 수 없습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>요소의 글씨와 장식 부분의 색.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>아래 예제 모두 글씨를 빨갛게 만듭니다.</p> + +<pre class="brush: css">p { color: red; } +p { color: #f00; } +p { color: #ff0000; } +p { color: rgb(255,0,0); } +p { color: rgb(100%, 0%, 0%); } +p { color: hsl(0, 100%, 50%); } + +/* 50% 투명 */ +p { color: rgba(255, 0, 0, 0.5); } +p { color: hsla(0, 100%, 50%, 0.5); } +</pre> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.</p> + +<p>색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noopener">웹 콘텐츠 접근성 가이드라인</a>(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 <a href="/ko/docs/Web/CSS/font-weight">굵은</a> 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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('CSS4 Colors', '#the-color-property', 'color')}}</td> + <td>{{Spec2('CSS4 Colors')}}</td> + <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br> + Adds color keyword <code>rebeccapurple</code>.<br> + Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br> + Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>color</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Adds the <code>orange</code> color and the system colors.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#color', 'color')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.color")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("<color>")}} 자료형</li> + <li>다른 색상 관련 속성: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, {{cssxref("color-adjust")}}</li> + <li><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색입히기</a></li> +</ul> diff --git a/files/ko/web/css/color_value/index.html b/files/ko/web/css/color_value/index.html new file mode 100644 index 0000000000..c176ddc056 --- /dev/null +++ b/files/ko/web/css/color_value/index.html @@ -0,0 +1,1374 @@ +--- +title: <color> +slug: Web/CSS/color_value +tags: + - CSS + - CSS Date Type + - Layout + - Reference + - Web +translation_of: Web/CSS/color_value +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code><color></code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 <a href="https://ko.wikipedia.org/wiki/SRGB">sRGB 색 공간</a>의 한 색을 표현하며, 추가로 <a href="https://ko.wikipedia.org/wiki/%EC%95%8C%ED%8C%8C_%EC%B1%84%EB%84%90">알파 채널</a> 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">어떻게 합성되어야 하는지</a> 지정할 수 있습니다.</p> + +<p><code><color></code>는 다음 방법으로 정의할 수 있습니다.</p> + +<ul> + <li>키워드 사용 (<code>blue</code>, <code>transparent</code> 등)</li> + <li>RGB 3차원 좌표계 사용 (# + 16진수 표기법 또는 <code>rgb()</code>, <code>rgba()</code>의 함수형 표기법)</li> + <li>HSL 실린더형 좌표계 사용 (<code>hsl()</code>, <code>hsla()</code>의 함수형 표기법)</li> +</ul> + +<div class="note"> +<p><strong>참고:</strong> 이 글은 <code><color></code> 자료형에 대해 상세히 기술합니다. HTML에서 실제로 색을 쓰는 법이 더 알고 싶으시면 <a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색 입히기</a>를 참고하세요.</p> +</div> + +<h2 id="구문">구문</h2> + +<p><code><color></code> 자료형은 아래 나열된 선택지 중 하나를 사용해 지정합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code><color></code> 값은 정확하게 정의할 수 있지만 실제로 화면에 표시될 때는 기기별로 차이가 있을 수도 있습니다. 대부분의 화면 색이 제대로 조정되지 않았으며 일부 브라우저는 기기의 <a href="https://ko.wikipedia.org/wiki/ICC_%ED%94%84%EB%A1%9C%ED%8C%8C%EC%9D%BC">색상 프로필</a>을 지원하지 않기 때문입니다.</p> +</div> + +<h3 id="색상_키워드">색상 키워드</h3> + +<p>색상 키워드는 대소문자를 구분하지 않는 식별자로, <code>red</code>, <code>blue</code>, <code>black</code>, <code>lightseagreen</code>처럼 특정 색을 나타냅니다. 이름이 표현하는 색을 그럭저럭 가리키고 있긴 하지만 모든 키워드의 본질은 인위적이며 어떤 특정한 규칙을 따르거나 하지 않습니다.</p> + +<p>색상 키워드를 사용할 땐 몇 가지 고려할 점이 있습니다.</p> + +<ul> + <li><a href="/ko/docs/Web/HTML">HTML</a>은 CSS1에서 찾을 수 있는 16가지 기본 색상만 인식합니다. 알 수 없는 값은 특정 알고리즘을 사용해 변환하는데 그 결과는 대개 완전히 다른 색입니다. 나머지 색상 키워드는 CSS와 <a href="/ko/docs/Web/SVG">SVG</a>에서만 사용해야 합니다.</li> + <li>HTML과 달리 CSS는 알 수 없는 키워드를 완전히 무시합니다.</li> + <li>모든 색상 키워드는 투명도 없는 단일 색상을 표현합니다.</li> + <li>어떤 키워드는 다른 키워드의 다른 이름입니다. + <ul> + <li><code>aqua</code> / <code>cyan</code></li> + <li><code>fuchsia</code> / <code>magenta</code></li> + <li><code>darkgray</code> / <code>darkgrey</code></li> + <li><code>darkslategray</code> / <code>darkslategrey</code></li> + <li><code>dimgray</code> / <code>dimgrey</code></li> + <li><code>lightgray</code> / <code>lightgrey</code></li> + <li><code>lightslategray</code> / <code>lightslategrey</code></li> + <li><code>gray</code> / <code>grey</code></li> + <li><code>slategray</code> / <code>slategrey</code></li> + </ul> + </li> + <li>많은 키워드를 <a href="https://ko.wikipedia.org/wiki/X_%EC%9C%88%EB%8F%84_%EC%8B%9C%EC%8A%A4%ED%85%9C">X11</a>에서 가져오긴 했지만, 제조사들이 X11 색상을 특정 하드웨어에 맞춰 조절한 경우도 있었기에 RGB값은 차이가 존재할 수 있습니다.</li> +</ul> + +<div class="note"> +<p><strong>참고:</strong> CSS의 진화와 함께 색상 키워드도 많은 변화를 겪었습니다.</p> + +<ul> + <li>CSS Level 1은 16개의 기본 색상만 지니고 있었습니다. VGA 그래픽 카드가 표현할 수 있는 색에서 가져온 것이기에 <a href="https://ko.wikipedia.org/wiki/%EB%B9%84%EB%94%94%EC%98%A4_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4_%EC%96%B4%EB%A0%88%EC%9D%B4">VGA</a> 색상이라고 칭했습니다.</li> + <li>CSS Level 2에서는 <code>orange</code> 키워드를 추가했습니다.</li> + <li>초기 브라우저들은 명세에 없음에도 불구하고 주로 X11 색상표에서 가져온 다양한 색상을 지원했습니다. 그러나 SVG 1.0과 CSS Colors Level 3 이전까지 그 목록이 정식으로 정해진 적은 없었습니다. 추가한 색상 키워드는 확장 색상 키워드, X11 색상, 또는 SVG 색상이라고 부릅니다.</li> + <li>CSS Colors Level 4에선 <a href="https://codepen.io/trezy/post/honoring-a-great-man">웹 개척자 에릭 메이어를 기리기 위해</a> <code>rebeccapurple</code> 키워드를 추가했습니다.</li> +</ul> +</div> + +<table id="colors_table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">키워드</th> + <th scope="col">RGB 16진수값</th> + <th scope="col">미리보기</th> + </tr> + </thead> + <tbody> + <tr style="position: relative;"> + <td rowspan="16">{{SpecName("CSS1")}}</td> + <td style="text-align: center;"><code>black</code></td> + <td><code>#000000</code></td> + <td style="background: black;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>silver</code></td> + <td><code>#c0c0c0</code></td> + <td style="background: silver;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>gray</code></td> + <td><code>#808080</code></td> + <td style="background: gray;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>white</code></td> + <td><code>#ffffff</code></td> + <td style="background: white;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>maroon</code></td> + <td><code>#800000</code></td> + <td style="background: maroon;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>red</code></td> + <td><code>#ff0000</code></td> + <td style="background: red;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>purple</code></td> + <td><code>#800080</code></td> + <td style="background: purple;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>fuchsia</code></td> + <td><code>#ff00ff</code></td> + <td style="background: fuchsia;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>green</code></td> + <td><code>#008000</code></td> + <td style="background: green;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lime</code></td> + <td><code>#00ff00</code></td> + <td style="background: lime;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>olive</code></td> + <td><code>#808000</code></td> + <td style="background: olive;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>yellow</code></td> + <td><code>#ffff00</code></td> + <td style="background: yellow;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>navy</code></td> + <td><code>#000080</code></td> + <td style="background: navy;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>blue</code></td> + <td><code>#0000ff</code></td> + <td style="background: blue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>teal</code></td> + <td><code>#008080</code></td> + <td style="background: teal;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>aqua</code></td> + <td><code>#00ffff</code></td> + <td style="background: aqua;"></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1")}}</td> + <td style="text-align: center;"><code>orange</code></td> + <td><code>#ffa500</code></td> + <td style="background: orange;"></td> + </tr> + <tr> + <td rowspan="130">{{SpecName("CSS3 Colors")}}</td> + <td style="text-align: center;"><code>aliceblue</code></td> + <td><code>#f0f8ff</code></td> + <td style="background: aliceblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>antiquewhite</code></td> + <td><code>#faebd7</code></td> + <td style="background: antiquewhite;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>aquamarine</code></td> + <td><code>#7fffd4</code></td> + <td style="background: aquamarine;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>azure</code></td> + <td><code>#f0ffff</code></td> + <td style="background: azure;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>beige</code></td> + <td><code>#f5f5dc</code></td> + <td style="background: beige;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>bisque</code></td> + <td><code>#ffe4c4</code></td> + <td style="background: bisque;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>blanchedalmond</code></td> + <td><code>#ffebcd</code></td> + <td style="background: blanchedalmond;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>blueviolet</code></td> + <td><code>#8a2be2</code></td> + <td style="background: blueviolet;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>brown</code></td> + <td><code>#a52a2a</code></td> + <td style="background: brown;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>burlywood</code></td> + <td><code>#deb887</code></td> + <td style="background: burlywood;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>cadetblue</code></td> + <td><code>#5f9ea0</code></td> + <td style="background: cadetblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>chartreuse</code></td> + <td><code>#7fff00</code></td> + <td style="background: chartreuse;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>chocolate</code></td> + <td><code>#d2691e</code></td> + <td style="background: chocolate;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>coral</code></td> + <td><code>#ff7f50</code></td> + <td style="background: coral;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>cornflowerblue</code></td> + <td><code>#6495ed</code></td> + <td style="background: cornflowerblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>cornsilk</code></td> + <td><code>#fff8dc</code></td> + <td style="background: cornsilk;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>crimson</code></td> + <td><code>#dc143c</code></td> + <td style="background: crimson;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>cyan</code><br> + (<code>aqua</code>의 다른 이름)</td> + <td><code>#00ffff</code></td> + <td style="background: cyan;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkblue</code></td> + <td><code>#00008b</code></td> + <td style="background: darkblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkcyan</code></td> + <td><code>#008b8b</code></td> + <td style="background: darkcyan;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkgoldenrod</code></td> + <td><code>#b8860b</code></td> + <td style="background: darkgoldenrod;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkgray</code></td> + <td><code>#a9a9a9</code></td> + <td style="background: darkgray;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkgreen</code></td> + <td><code>#006400</code></td> + <td style="background: darkgreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkgrey</code></td> + <td><code>#a9a9a9</code></td> + <td style="background: darkgrey;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkkhaki</code></td> + <td><code>#bdb76b</code></td> + <td style="background: darkkhaki;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkmagenta</code></td> + <td><code>#8b008b</code></td> + <td style="background: darkmagenta;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkolivegreen</code></td> + <td><code>#556b2f</code></td> + <td style="background: darkolivegreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkorange</code></td> + <td><code>#ff8c00</code></td> + <td style="background: darkorange;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkorchid</code></td> + <td><code>#9932cc</code></td> + <td style="background: darkorchid;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkred</code></td> + <td><code>#8b0000</code></td> + <td style="background: darkred;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darksalmon</code></td> + <td><code>#e9967a</code></td> + <td style="background: darksalmon;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkseagreen</code></td> + <td><code>#8fbc8f</code></td> + <td style="background: darkseagreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkslateblue</code></td> + <td><code>#483d8b</code></td> + <td style="background: darkslateblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkslategray</code></td> + <td><code>#2f4f4f</code></td> + <td style="background: darkslategray;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkslategrey</code></td> + <td><code>#2f4f4f</code></td> + <td style="background: darkslategrey;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkturquoise</code></td> + <td><code>#00ced1</code></td> + <td style="background: darkturquoise;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>darkviolet</code></td> + <td><code>#9400d3</code></td> + <td style="background: darkviolet;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>deeppink</code></td> + <td><code>#ff1493</code></td> + <td style="background: deeppink;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>deepskyblue</code></td> + <td><code>#00bfff</code></td> + <td style="background: deepskyblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>dimgray</code></td> + <td><code>#696969</code></td> + <td style="background: dimgray;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>dimgrey</code></td> + <td><code>#696969</code></td> + <td style="background: dimgrey;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>dodgerblue</code></td> + <td><code>#1e90ff</code></td> + <td style="background: dodgerblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>firebrick</code></td> + <td><code>#b22222</code></td> + <td style="background: firebrick;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>floralwhite</code></td> + <td><code>#fffaf0</code></td> + <td style="background: floralwhite;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>forestgreen</code></td> + <td><code>#228b22</code></td> + <td style="background: forestgreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>gainsboro</code></td> + <td><code>#dcdcdc</code></td> + <td style="background: gainsboro;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>ghostwhite</code></td> + <td><code>#f8f8ff</code></td> + <td style="background: ghostwhite;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>gold</code></td> + <td><code>#ffd700</code></td> + <td style="background: gold;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>goldenrod</code></td> + <td><code>#daa520</code></td> + <td style="background: goldenrod;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>greenyellow</code></td> + <td><code>#adff2f</code></td> + <td style="background: greenyellow ;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>grey</code></td> + <td><code>#808080</code></td> + <td style="background: grey;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>honeydew</code></td> + <td><code>#f0fff0</code></td> + <td style="background: honeydew;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>hotpink</code></td> + <td><code>#ff69b4</code></td> + <td style="background: hotpink;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>indianred</code></td> + <td><code>#cd5c5c</code></td> + <td style="background: indianred;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>indigo</code></td> + <td><code>#4b0082</code></td> + <td style="background: indigo;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>ivory</code></td> + <td><code>#fffff0</code></td> + <td style="background: ivory;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>khaki</code></td> + <td><code>#f0e68c</code></td> + <td style="background: khaki;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lavender</code></td> + <td><code>#e6e6fa</code></td> + <td style="background: lavender;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lavenderblush</code></td> + <td><code>#fff0f5</code></td> + <td style="background: lavenderblush ;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lawngreen</code></td> + <td><code>#7cfc00</code></td> + <td style="background: lawngreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lemonchiffon</code></td> + <td><code>#fffacd</code></td> + <td style="background: lemonchiffon;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightblue</code></td> + <td><code>#add8e6</code></td> + <td style="background: lightblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightcoral</code></td> + <td><code>#f08080</code></td> + <td style="background: lightcoral;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightcyan</code></td> + <td><code>#e0ffff</code></td> + <td style="background: lightcyan;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightgoldenrodyellow</code></td> + <td><code>#fafad2</code></td> + <td style="background: lightgoldenrodyellow ;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightgray</code></td> + <td><code>#d3d3d3</code></td> + <td style="background: lightgray;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightgreen</code></td> + <td><code>#90ee90</code></td> + <td style="background: lightgreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightgrey</code></td> + <td><code>#d3d3d3</code></td> + <td style="background: lightgrey;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightpink</code></td> + <td><code>#ffb6c1</code></td> + <td style="background: lightpink;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightsalmon</code></td> + <td><code>#ffa07a</code></td> + <td style="background: lightsalmon;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightseagreen</code></td> + <td><code>#20b2aa</code></td> + <td style="background: lightseagreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightskyblue</code></td> + <td><code>#87cefa</code></td> + <td style="background: lightskyblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightslategray</code></td> + <td><code>#778899</code></td> + <td style="background: lightslategray;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightslategrey</code></td> + <td><code>#778899</code></td> + <td style="background: lightslategrey;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightsteelblue</code></td> + <td><code>#b0c4de</code></td> + <td style="background: lightsteelblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>lightyellow</code></td> + <td><code>#ffffe0</code></td> + <td style="background: lightyellow;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>limegreen</code></td> + <td><code>#32cd32</code></td> + <td style="background: limegreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>linen</code></td> + <td><code>#faf0e6</code></td> + <td style="background: linen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>magenta</code><br> + (<code>fuchsia</code>의 다른 이름)</td> + <td><code>#ff00ff</code></td> + <td style="background: magenta;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mediumaquamarine</code></td> + <td><code>#66cdaa</code></td> + <td style="background: mediumaquamarine;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mediumblue</code></td> + <td><code>#0000cd</code></td> + <td style="background: mediumblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mediumorchid</code></td> + <td><code>#ba55d3</code></td> + <td style="background: mediumorchid;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mediumpurple</code></td> + <td><code>#9370db</code></td> + <td style="background: mediumpurple;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mediumseagreen</code></td> + <td><code>#3cb371</code></td> + <td style="background: mediumseagreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mediumslateblue</code></td> + <td><code>#7b68ee</code></td> + <td style="background: mediumslateblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mediumspringgreen</code></td> + <td><code>#00fa9a</code></td> + <td style="background: mediumspringgreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mediumturquoise</code></td> + <td><code>#48d1cc</code></td> + <td style="background: mediumturquoise;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mediumvioletred</code></td> + <td><code>#c71585</code></td> + <td style="background: mediumvioletred;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>midnightblue</code></td> + <td><code>#191970</code></td> + <td style="background: midnightblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mintcream</code></td> + <td><code>#f5fffa</code></td> + <td style="background: mintcream;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>mistyrose</code></td> + <td><code>#ffe4e1</code></td> + <td style="background: mistyrose;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>moccasin</code></td> + <td><code>#ffe4b5</code></td> + <td style="background: moccasin;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>navajowhite</code></td> + <td><code>#ffdead</code></td> + <td style="background: navajowhite;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>oldlace</code></td> + <td><code>#fdf5e6</code></td> + <td style="background: oldlace;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>olivedrab</code></td> + <td><code>#6b8e23</code></td> + <td style="background: olivedrab;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>orangered</code></td> + <td><code>#ff4500</code></td> + <td style="background: orangered;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>orchid</code></td> + <td><code>#da70d6</code></td> + <td style="background: orchid;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>palegoldenrod</code></td> + <td><code>#eee8aa</code></td> + <td style="background: palegoldenrod;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>palegreen</code></td> + <td><code>#98fb98</code></td> + <td style="background: palegreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>paleturquoise</code></td> + <td><code>#afeeee</code></td> + <td style="background: paleturquoise;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>palevioletred</code></td> + <td><code>#db7093</code></td> + <td style="background: palevioletred;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>papayawhip</code></td> + <td><code>#ffefd5</code></td> + <td style="background: papayawhip;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>peachpuff</code></td> + <td><code>#ffdab9</code></td> + <td style="background: peachpuff;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>peru</code></td> + <td><code>#cd853f</code></td> + <td style="background: peru;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>pink</code></td> + <td><code>#ffc0cb</code></td> + <td style="background: pink;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>plum</code></td> + <td><code>#dda0dd</code></td> + <td style="background: plum;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>powderblue</code></td> + <td><code>#b0e0e6</code></td> + <td style="background: powderblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>rosybrown</code></td> + <td><code>#bc8f8f</code></td> + <td style="background: rosybrown;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>royalblue</code></td> + <td><code>#4169e1</code></td> + <td style="background: royalblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>saddlebrown</code></td> + <td><code>#8b4513</code></td> + <td style="background: saddlebrown;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>salmon</code></td> + <td><code>#fa8072</code></td> + <td style="background: salmon;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>sandybrown</code></td> + <td><code>#f4a460</code></td> + <td style="background: sandybrown;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>seagreen</code></td> + <td><code>#2e8b57</code></td> + <td style="background: seagreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>seashell</code></td> + <td><code>#fff5ee</code></td> + <td style="background: seashell;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>sienna</code></td> + <td><code>#a0522d</code></td> + <td style="background: sienna;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>skyblue</code></td> + <td><code>#87ceeb</code></td> + <td style="background: skyblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>slateblue</code></td> + <td><code>#6a5acd</code></td> + <td style="background: slateblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>slategray</code></td> + <td><code>#708090</code></td> + <td style="background: slategray;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>slategrey</code></td> + <td><code>#708090</code></td> + <td style="background: slategrey;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>snow</code></td> + <td><code>#fffafa</code></td> + <td style="background: snow;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>springgreen</code></td> + <td><code>#00ff7f</code></td> + <td style="background: springgreen;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>steelblue</code></td> + <td><code>#4682b4</code></td> + <td style="background: steelblue;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>tan</code></td> + <td><code>#d2b48c</code></td> + <td style="background: tan;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>thistle</code></td> + <td><code>#d8bfd8</code></td> + <td style="background: thistle;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>tomato</code></td> + <td><code>#ff6347</code></td> + <td style="background: tomato;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>turquoise</code></td> + <td><code>#40e0d0</code></td> + <td style="background: turquoise;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>violet</code></td> + <td><code>#ee82ee</code></td> + <td style="background: violet;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>wheat</code></td> + <td><code>#f5deb3</code></td> + <td style="background: wheat;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>whitesmoke</code></td> + <td><code>#f5f5f5</code></td> + <td style="background: whitesmoke;"></td> + </tr> + <tr> + <td style="text-align: center;"><code>yellowgreen</code></td> + <td><code>#9acd32</code></td> + <td style="background: yellowgreen;"></td> + </tr> + <tr> + <td>{{SpecName("CSS4 Colors")}}</td> + <td style="text-align: center;"><a href="https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life"><code>rebeccapurple</code></a></td> + <td><code>#663399</code></td> + <td style="background: rebeccapurple;"></td> + </tr> + </tbody> +</table> + +<h3 id="transparent_키워드"><code><a id="transparent" name="transparent">transparent</a></code> 키워드</h3> + +<p><code>transparent</code> 키워드는 완전히 투명한 색으로, "색"을 입힌 항목의 뒷편이 모두 보입니다. 기술적으로 <code>transparent</code>는 <code>rgba(0,0,0,0)</code>의 짧은 이름입니다.</p> + +<div class="note"> +<p><strong>호환성 참고:</strong> {{cssxref("gradient")}} 등 특정 상황에서 의도하지 않은 결과를 피하기 위해, 현재 CSS 명세에선 <code>transparent</code>를 <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">투명도를 미리 곱한 색 공간</a>에서 계산하도록 명시하고 있습니다. 그러나 오래된 브라우저에서는 투명도 0의 검정으로 취급할 수 있음에 주의하세요.</p> +</div> + +<div class="note"> +<p><strong>역사 참고:</strong> <code>transparent</code>는 CSS Level 2 (Revision 1) 전까지 실제 색상이 아니었습니다. 대신 {{cssxref("background")}}와 {{cssxref("border")}}의 <code><color></code> 자리에 사용하는 특별한 키워드로, 상속받은 단색을 덮어 쓸 수 있도록 추가됐었습니다. CSS Colors Level 3에서 알파 채널이 추가되면서 <code>transparent</code>도 실제 색상으로 재정의되었습니다. 덕분에 <code><color></code> 값 어디에나 사용할 수 있습니다.</p> +</div> + +<h3 id="currentColor_키워드"><code><a id="currentColor" name="currentColor">currentColor</a></code> 키워드</h3> + +<p><code>currentColor</code> 키워드는 요소의 {{Cssxref("color")}} 속성값을 나타냅니다. 이를 통해 다른 속성이 <code>color</code> 속성값을 따라가도록 설정할 수 있습니다.</p> + +<p><code>color</code> 속성의 값으로 <code>currentColor</code> 키워드를 사용하면, 값을 상속받은 <code>color</code> 속성에서 대신 가져옵니다.</p> + +<h4 id="currentColor_예제"><code>currentColor</code> 예제</h4> + +<pre class="brush: html"><div style="color: blue; border: 1px dashed currentColor;"> + 이 글의 색은 파랑입니다. + <div style="background: currentColor; height:9px;"></div> + 이 블록은 파란 테두리로 둘러쌓여 있습니다. +</div></pre> + +<p>{{EmbedLiveSample("currentColor_예제")}}</p> + +<h3 id="RGB_색상">RGB 색상</h3> + +<p>RGB 색상 모델은 빨강, 초록, 파랑을 통해 특정 색을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.</p> + +<h4 id="구문_2">구문</h4> + +<p>RGB 색상은 # 뒤의 16진수 표기법이나 함수형 표기법(<a id="rgb()" name="rgb()"><code>rgb()</code></a>, <a id="rgba()" name="rgba()"><code>rgba()</code></a>)으로 표현할 수 있습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> CSS Colors Level 4부터 <code>rgba()</code>는 <code>rgb()</code>의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.</p> +</div> + +<dl> + <dt>16진수 표기법: <code>#RRGGBB[AA]</code></dt> + <dd><code>R</code>(빨강), <code>G</code>(초록), <code>B</code>(파랑), <code>A</code>(알파)는 16진수 문자(0-9, A-F)입니다. <code>A</code>는 선택사항입니다. 예를 들어 <code>#ff0000</code>은 <code>#ff0000ff</code>와 같습니다.</dd> + <dt>16진수 표기법: <code>#RGB[A]</code></dt> + <dd><code>R</code>(빨강), <code>G</code>(초록), <code>B</code>(파랑), <code>A</code>(알파)는 16진수 문자(0-9, A-F)입니다. <code>A</code>는 선택사항입니다. 세 글자 표기법(<code>#RGB</code>)은 여섯 글자 표기법(<code>#RRGGBB</code>)의 단축 표현입니다. 예를 들어 <code>#f09</code>는 <code>#ff0099</code>와 같습니다. 비슷하게 네 글자 표기법(<code>#RGBA</code>)은 여덟 글자 표기법(<code>#RRGGBBAA</code>)의 단축 표기법이다. 예를 들어 <code>#0f38</code>은 <code>#00ff3388</code>과 같습니다.</dd> + <dt>함수형 표기법: <code>rgb(R, G, B[, A])</code> 또는 <code>rgba(R, G, B, A)</code></dt> + <dd><code>R</code>(빨강), <code>G</code>(초록), <code>B</code>(파랑)은 {{cssxref("<integer>")}}나 {{cssxref("<percentage>")}}이며 숫자 <code>255</code>가 <code>100%</code>와 동일합니다. <code>A</code>(알파)는 0과 1 사이의 {{cssxref("<number>")}}거나 {{cssxref("<percentage>")}}이며 숫자 <code>1</code>이 <code>100%</code>(불투명)와 동일합니다.</dd> + <dt>함수형 표기법: <code>rgb(R G B[ A])</code> 또는 <code>rgba(R G B A)</code></dt> + <dd>CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.</dd> +</dl> + +<h4 id="예제">예제</h4> + +<h5 id="다양한_RGB_구문">다양한 RGB 구문</h5> + +<p>다음 예제는 한 가지 색상을 만들 때 쓸 수 있는 다양한 RGB 색상 구문을 보입니다.</p> + +<pre>/* 아래 모든 구문은 불투명한 핫핑크를 표현합니다. */ + +/* 16진수 구문 */ +#f09 +#F09 +#ff0099 +#FF0099 + +/* 함수형 구문 */ +rgb(255,0,153) +rgb(255, 0, 153) +rgb(255, 0, 153.0) /* 오류! 소수점 금지 */ +rgb(100%,0%,60%) +rgb(100%, 0%, 60%) +rgb(100%, 0, 60%) /* 오류! 정수와 백분율 혼용 금지 */ +rgb(255 0 153) + +/* 16진수와 알파 값 */ +#f09f +#F09F +#ff0099ff +#FF0099FF + +/* 함수형 구문과 알파 값 */ +rgb(255, 0, 153, 1) +rgb(255, 0, 153, 100%) + +/* 공백 구분 구문 */ +rgb(255 0 153 / 1) +rgb(255 0 153 / 100%) + +/* 정숫값을 사용한 함수형 구문 */ +rgb(255, 0, 153.6, 1) +rgb(1e2, .5e1, .5e0, +.25e2%) +</pre> + +<h5 id="다양한_RGB_투명도_구문">다양한 RGB 투명도 구문</h5> + +<pre>/* 16진수 구문 */ +#3a30 <span style="background: #3a30;"> /* 0% opaque green */ </span> +#3A3F <span style="background: #3A3F;"> /* full opaque green */ </span> +#33aa3300 <span style="background: #33aa3300;"> /* 0% opaque green */ </span> +#33AA3388 <span style="background: #33AA3388;"> /* 50% opaque green */ </span> + +/* 함수형 구문 */ +rgba(51, 170, 51, .1) <span style="background: rgba(51, 170, 51, .1);"> /* 10% opaque green */ </span> +rgba(51, 170, 51, .4) <span style="background: rgba(51, 170, 51, .4);"> /* 40% opaque green */ </span> +rgba(51, 170, 51, .7) <span style="background: rgba(51, 170, 51, .7);"> /* 70% opaque green */ </span> +rgba(51, 170, 51, 1) <span style="background: rgba(51, 170, 51, 1);"> /* full opaque green */ </span> + +/* 공백 구분 구문 */ +rgba(51 170 51 / 0.4) <span> /* 40% opaque green */ </span> +rgba(51 170 51 / 40%) <span> /* 40% opaque green */ + +</span>/* 정숫값을 사용한 함수형 구문 */ +rgba(255, 0, 153.6, 1) +rgba(1e2, .5e1, .5e0, +.25e2%) +</pre> + +<h3 id="HSL_색상">HSL 색상</h3> + +<p>HSL 색상 모델은 색상, 채도, 명도를 통해 특정 색상을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.</p> + +<p>많은 디자이너들은 색상, 채도, 명도를 따로 조절할 수 있는 HSL이 RGB보다 더 직관적임을 발견합니다. 또한 HSL을 사용하면 짝이 맞는 색(예컨대 한 가지 색의 여러 밝기) 여러 종류를 더 쉽게 만들 수 있습니다.</p> + +<h4 id="구문_3">구문</h4> + +<p>HSL 색상은 함수형 <a id="hsl()" name="hsl()"><code>hsl()</code></a>과 <a id="hsla()" name="hsla()"><code>hsla()</code></a> 표기법을 사용합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> CSS Colors Level 4부터 <code>hsla()</code>는 <code>hsl()</code>의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.</p> +</div> + +<dl> + <dt>함수형 표기법: <code>hsl(H, S, L[, A])</code> 또는 <code>hsla(H, S, L, A)</code></dt> + <dd><code>H</code>(색상)은 색상원에서의 {{cssxref("<angle>")}}로 {{SpecName("CSS4 Colors","#the-hsl-notation")}} 기준 <code>deg</code>, <code>rad</code>, <code>grad</code>, <code>turn</code>을 사용할 수 있습니다. 단위 없이 {{cssxref("<number>")}}로 표현할 경우 {{SpecName("CSS3 Colors", "#hsl-color")}}에 명시된 것과 같이 각도로 해석합니다. 정의에 따르면 빨강=<code>0deg</code>=<code>360deg</code>이며 다른 색은 (초록=<code>120deg</code>, 파랑=<code>240deg</code> 등) 원을 따라 분포하고 있습니다. <code><angle></code>이라면 암묵적으로 원의 주위를 한 바퀴 돕니다. 예컨대 <code>-120deg</code>=<code>240deg</code>, <code>480deg</code>=<code>120deg</code>, <code>-1turn</code>=<code>1turn</code> 입니다.</dd> + <dd><code>S</code>(채도)와 <code>L</code>(명도)는 {{cssxref("<percentage>")}}입니다. <code>100%</code> <strong>채도는</strong> 제일 진한 색이며 <code>0%</code>는 회색입니다. <code>100%</code> <strong>명도</strong>는 흰색, <code>0%</code> 명도는 검은색, <code>50%</code> 명도는 "보통" 색입니다.</dd> + <dd><code>A</code>(알파)는 0과 1 사이의 {{cssxref("<number>")}}거나 {{cssxref("<percentage>")}}이며 숫자 <code>1</code>이 <code>100%</code>(불투명)와 동일합니다.</dd> + <dt>함수형 표기법: <code>hsl(H S L[ A])</code> 또는 <code>hsla(H S L A)</code></dt> + <dd>CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.</dd> +</dl> + +<h4 id="예제_2">예제</h4> + +<h5 id="다양한_HSL_구문">다양한 HSL 구문</h5> + +<pre style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">/* 아래 모든 구문은 라벤더를 표현합니다. */ +hsl(270,60%,70%) +hsl(270, 60%, 70%) +hsl(270 60% 70%) +hsl(270deg, 60%, 70%) +hsl(4.71239rad, 60%, 70%) +hsl(.75turn, 60%, 70%) + +/* 아래 모든 구문은 85% 투명한 라벤더를 표현합니다. */ +hsl(270, 60%, 50%, .15) +hsl(270, 60%, 50%, 15%) +hsl(270 60% 50% / .15) +hsl(270 60% 50% / 15%) +</pre> + +<h5 id="제일_진한_색상">제일 진한 색상</h5> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">표현</th> + <th scope="col">설명</th> + <th scope="col">미리보기</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(0, 100%, 50%)</code></td> + <td>red</td> + <td style="background: hsl(0,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(30, 100%, 50%)</code></td> + <td>orange</td> + <td style="background: hsl(30,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(60, 100%, 50%)</code></td> + <td>yellow</td> + <td style="background: hsl(60,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(90, 100%, 50%)</code></td> + <td>lime green</td> + <td style="background: hsl(90,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(120, 100%, 50%)</code></td> + <td>green</td> + <td style="background: hsl(120,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(150, 100%, 50%)</code></td> + <td>blue-green</td> + <td style="background: hsl(150,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(180, 100%, 50%)</code></td> + <td>cyan</td> + <td style="background: hsl(180,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(210, 100%, 50%)</code></td> + <td>sky blue</td> + <td style="background: hsl(210,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(240, 100%, 50%)</code></td> + <td>blue</td> + <td style="background: hsl(240,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(270, 100%, 50%)</code></td> + <td>purple</td> + <td style="background: hsl(270,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(300, 100%, 50%)</code></td> + <td>magenta</td> + <td style="background: hsl(300,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(330, 100%, 50%)</code></td> + <td>pink</td> + <td style="background: hsl(330,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(360, 100%, 50%)</code></td> + <td>red</td> + <td style="background: hsl(360,100%,50%);"></td> + </tr> + </tbody> +</table> + +<h5 id="밝고_어두운_초록">밝고 어두운 초록</h5> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Notation</th> + <th scope="col">Description</th> + <th scope="col">Live</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(120, 100%, 0%)</code></td> + <td>black</td> + <td style="background: hsl(120,100%,0%);"></td> + </tr> + <tr> + <td><code>hsl(120, 100%, 20%)</code></td> + <td></td> + <td style="background: hsl(120,100%,20%);"></td> + </tr> + <tr> + <td><code>hsl(120, 100%, 40%)</code></td> + <td></td> + <td style="background: hsl(120,100%,40%);"></td> + </tr> + <tr> + <td><code>hsl(120, 100%, 60%)</code></td> + <td></td> + <td style="background: hsl(120,100%,60%);"></td> + </tr> + <tr> + <td><code>hsl(120, 100%, 80%)</code></td> + <td></td> + <td style="background: hsl(120,100%,80%);"></td> + </tr> + <tr> + <td><code>hsl(120, 100%, 100%)</code></td> + <td>white</td> + <td style="background: hsl(120,100%,100%);"></td> + </tr> + </tbody> +</table> + +<h5 id="진하고_옅은_초록">진하고 옅은 초록</h5> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Notation</th> + <th scope="col">Description</th> + <th scope="col">Live</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(120, 100%, 50%)</code></td> + <td>green</td> + <td style="background: hsl(120,100%,50%);"></td> + </tr> + <tr> + <td><code>hsl(120, 80%, 50%)</code></td> + <td></td> + <td style="background: hsl(120,80%,50%);"></td> + </tr> + <tr> + <td><code>hsl(120, 60%, 50%)</code></td> + <td></td> + <td style="background: hsl(120,60%,50%);"></td> + </tr> + <tr> + <td><code>hsl(120, 40%, 50%)</code></td> + <td></td> + <td style="background: hsl(120,40%,50%);"></td> + </tr> + <tr> + <td><code>hsl(120, 20%, 50%)</code></td> + <td></td> + <td style="background: hsl(120,20%,50%);"></td> + </tr> + <tr> + <td><code>hsl(120, 0%, 50%)</code></td> + <td>gray</td> + <td style="background: hsl(120,0%,50%);"></td> + </tr> + </tbody> +</table> + +<h5 id="다양한_HSL_투명도_구문">다양한 HSL 투명도 구문</h5> + +<pre style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsla(240, 100%, 50%, .05) <span style="background: hsla(240,100%,50%,0.05);"> /* 5% opaque blue */ </span> +hsla(240, 100%, 50%, .4) <span style="background: hsla(240,100%,50%,0.4);"> /* 40% opaque blue */ </span> +hsla(240, 100%, 50%, .7) <span style="background: hsla(240,100%,50%,0.7);"> /* 70% opaque blue */ </span> +hsla(240, 100%, 50%, 1) <span style="background: hsla(240,100%,50%,1);"> /* full opaque blue */ </span> + +/* Whitespace syntax */ +hsla(240 100% 50% / .05) <span style="background: hsla(240,100%,50%,0.05);"> /* 5% opaque blue */ </span> + +/* Percentage value for alpha */ +hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> /* 5% opaque blue */ </span> +</pre> + +<h3 id="시스템_색상">시스템 색상</h3> + +<p>모든 시스템에서 모든 시스템 색상을 지원하는건 아닙니다. 공개 웹 페이지에서 사용하는건 좋지 않습니다.</p> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> + <dt>ActiveBorder</dt> + <dd>Active window border.</dd> + <dt>ActiveCaption</dt> + <dd>Active window caption. Should be used with <code>CaptionText</code> as foreground color.</dd> + <dt>AppWorkspace</dt> + <dd>Background color of multiple document interface.</dd> + <dt>Background</dt> + <dd>Desktop background.</dd> + <dt>ButtonFace</dt> + <dd>Face background color for 3-D elements that appear 3-D due to one layer of surrounding border. Should be used with the <code>ButtonText</code> foreground color.</dd> + <dt>ButtonHighlight</dt> + <dd>The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.</dd> + <dt>ButtonShadow</dt> + <dd>The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.</dd> + <dt>ButtonText</dt> + <dd>Text on push buttons. Should be used with the <code>ButtonFace</code> or <code>ThreeDFace</code> background color.</dd> + <dt>CaptionText</dt> + <dd>Text in caption, size box, and scrollbar arrow box. Should be used with the <code>ActiveCaption</code> background color.</dd> + <dt>GrayText</dt> + <dd>Grayed (disabled) text.</dd> + <dt>Highlight</dt> + <dd>Item(s) selected in a control. Should be used with the <code>HighlightText</code> foreground color.</dd> + <dt>HighlightText</dt> + <dd>Text of item(s) selected in a control. Should be used with the <code>Highlight</code> background color.</dd> + <dt>InactiveBorder</dt> + <dd>Inactive window border.</dd> + <dt>InactiveCaption</dt> + <dd>Inactive window caption. Should be used with the <code>InactiveCaptionText</code> foreground color.</dd> + <dt>InactiveCaptionText</dt> + <dd>Color of text in an inactive caption. Should be used with the <code>InactiveCaption</code> background color.</dd> + <dt>InfoBackground</dt> + <dd>Background color for tooltip controls. Should be used with the <code>InfoText</code> foreground color.</dd> + <dt>InfoText</dt> + <dd>Text color for tooltip controls. Should be used with the <code>InfoBackground</code> background color.</dd> + <dt>Menu</dt> + <dd>Menu background. Should be used with the <code>MenuText</code> or <code>-moz-MenuBarText</code> foreground color.</dd> + <dt>MenuText</dt> + <dd>Text in menus. Should be used with the <code>Menu</code> background color.</dd> + <dt>Scrollbar</dt> + <dd>Background color of scroll bars.</dd> + <dt>ThreeDDarkShadow</dt> + <dd>The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd> + <dt>ThreeDFace</dt> + <dd>The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the <code>ButtonText</code> foreground color.</dd> + <dt>ThreeDHighlight</dt> + <dd>The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd> + <dt>ThreeDLightShadow</dt> + <dd>The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd> + <dt>ThreeDShadow</dt> + <dd>The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd> + <dt>Window</dt> + <dd>Window background. Should be used with the <code>WindowText</code> foreground color.</dd> + <dt>WindowFrame</dt> + <dd>Window frame.</dd> + <dt>WindowText</dt> + <dd>Text in windows. Should be used with the <code>Window</code> background color.</dd> +</dl> + +<h3 id="Mozilla_시스템_색상_확장">Mozilla 시스템 색상 확장</h3> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> + <dt>-moz-ButtonDefault</dt> + <dd>The border color that goes around buttons that represent the default action for a dialog box.</dd> + <dt>-moz-ButtonHoverFace</dt> + <dd>The background color of a button that the mouse pointer is over (which would be <code>ThreeDFace</code> or <code>ButtonFace</code> when the mouse pointer is not over it). Should be used with the <code>-moz-ButtonHoverText</code> foreground color.</dd> + <dt>-moz-ButtonHoverText</dt> + <dd>The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the <code>-moz-ButtonHoverFace background</code> color.</dd> + <dt>-moz-CellHighlight</dt> + <dd>Background color for selected item in a tree widget. Should be used with the <code>-moz-CellHighlightText</code> foreground color. See also <code>-moz-html-CellHighlight</code>.</dd> + <dt>-moz-CellHighlightText</dt> + <dd>Text color for a selected item in a tree. Should be used with the <code>-moz-CellHighlight background</code> color. See also <code>-moz-html-CellHighlightText</code>.</dd> + <dt>-moz-Combobox</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes. Should be used with the <code>-moz-ComboboxText</code> foreground color. In versions prior to 1.9.2, use <code>-moz-Field</code> instead.</dd> + <dt>-moz-ComboboxText</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the <code>-moz-Combobox</code> background color. In versions prior to 1.9.2, use <code>-moz-FieldText</code> instead.</dd> + <dt>-moz-Dialog</dt> + <dd>Background color for dialog boxes. Should be used with the <code>-moz-DialogText</code> foreground color.</dd> + <dt>-moz-DialogText</dt> + <dd>Text color for dialog boxes. Should be used with the <code>-moz-Dialog</code> background color.</dd> + <dt>-moz-dragtargetzone</dt> + <dt>-moz-EvenTreeRow</dt> + <dd>{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-OddTreeRow</code>.</dd> + <dt>-moz-Field</dt> + <dd>Text field background color. Should be used with the <code>-moz-FieldText</code> foreground color.</dd> + <dt>-moz-FieldText</dt> + <dd>Text field text color. Should be used with the <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, or <code>-moz-OddTreeRow</code> background color.</dd> + <dt>-moz-html-CellHighlight</dt> + <dd>{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlightText</code> foreground color. Prior to Gecko 1.9, use <code>-moz-CellHighlight</code>.</dd> + <dt>-moz-html-CellHighlightText</dt> + <dd>{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlight</code> background color. Prior to Gecko 1.9, use <code>-moz-CellHighlightText</code>.</dd> + <dt>-moz-mac-accentdarkestshadow</dt> + <dt>-moz-mac-accentdarkshadow</dt> + <dt>-moz-mac-accentface</dt> + <dt>-moz-mac-accentlightesthighlight</dt> + <dt>-moz-mac-accentlightshadow</dt> + <dt>-moz-mac-accentregularhighlight</dt> + <dt>-moz-mac-accentregularshadow</dt> + <dt>-moz-mac-chrome-active</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> + <dt>-moz-mac-chrome-inactive</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> + <dt>-moz-mac-focusring</dt> + <dt>-moz-mac-menuselect</dt> + <dt>-moz-mac-menushadow</dt> + <dt>-moz-mac-menutextselect</dt> + <dt>-moz-MenuHover</dt> + <dd>Background color for hovered menu items. Often similar to <code>Highlight</code>. Should be used with the <code>-moz-MenuHoverText</code> or <code>-moz-MenuBarHoverText</code> foreground color.</dd> + <dt>-moz-MenuHoverText</dt> + <dd>Text color for hovered menu items. Often similar to <code>HighlightText</code>. Should be used with the <code>-moz-MenuHover</code> background color.</dd> + <dt>-moz-MenuBarText</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to <code>MenuText</code>. Should be used on top of <code>Menu</code> background.</dd> + <dt>-moz-MenuBarHoverText</dt> + <dd>Color for hovered text in menu bars. Often similar to <code>-moz-MenuHoverText</code>. Should be used on top of <code>-moz-MenuHover</code> background.</dd> + <dt>-moz-nativehyperlinktext</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.</dd> + <dt>-moz-OddTreeRow</dt> + <dd>{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-EvenTreeRow</code>.</dd> + <dt>-moz-win-communicationstext</dt> + <dd>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code>.</dd> + <dt>-moz-win-mediatext</dt> + <dd>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code>.</dd> + <dt>-moz-win-accentcolor</dt> + <dd>{{gecko_minversion_inline("56")}}<br> + Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.</dd> + <dt>-moz-win-accentcolortext</dt> + <dd>{{gecko_minversion_inline("56")}}<br> + Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.</dd> +</dl> + +<h3 id="Mozilla_색상_설정_확장">Mozilla 색상 설정 확장</h3> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;"> + <dt>-moz-activehyperlinktext</dt> + <dd>User's preference for text color of active links. Should be used with the default document background color.</dd> + <dt>-moz-default-background-color</dt> + <dd>{{Gecko_minversion_inline("5.0")}} User's preference for the document background color.</dd> + <dt>-moz-default-color</dt> + <dd>{{Gecko_minversion_inline("5.0")}} User's preference for the text color.</dd> + <dt>-moz-hyperlinktext</dt> + <dd>User's preference for the text color of unvisited links. Should be used with the default document background color.</dd> + <dt>-moz-visitedhyperlinktext</dt> + <dd>User's preference for the text color of visited links. Should be used with the default document background color.</dd> +</dl> + +<h2 id="보간">보간</h2> + +<p>애니메이션과 <a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">그레이디언트</a>는 <code><color></code> 값의 빨강, 초록, 파랑 각 구성 성분을 부동소수점 실수를 사용해 보간합니다. 보간 중 예상하지 못한 무채색이 등장하는걸 방지하기 위해 계산은 <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">알파 채널을 미리 곱한 sRGBA 색 공간</a>에서 수행합니다. 애니메이션에서 보간의 속도는 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정합니다.</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>색을 구별하기 어려운 사람도 있으므로, <a class="external" href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> 권고안은 특정 메시지, 행동, 또는 결과를 나타내는 방법으로 오직 색만 사용하는걸 강력히 반대하고 있습니다. <a href="/ko/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">색과 색상 대비</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('CSS4 Colors', '#changes-from-3')}}</td> + <td>{{Spec2('CSS4 Colors')}}</td> + <td>Adds <code>rebeccapurple</code>, four- (<code>#RGBA</code>) and eight-digit (<code>#RRGGBBAA</code>) hexadecimal notations, <code>rgba()</code> and <code>hsla()</code> as aliases of <code>rgb()</code> and <code>hsl()</code> (both with identical parameter syntax), space-separated function parameters as an alternative to commas, percentages for alpha values, and angles for the hue component in <code>hsl()</code> colors.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td>Deprecates system colors. Adds SVG colors and <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functional notations.</td> + </tr> + <tr style="vertical-align: top;"> + <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}</td> + <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td> + <td style="vertical-align: top;">Adds the <code>orange</code> keyword and system colors.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '<color>')}}</td> + <td style="vertical-align: top;">{{Spec2('CSS1')}}</td> + <td style="vertical-align: top;">Initial definition. Includes 16 basic color keywords.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.color")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref("opacity")}} 속성으로 요소 자체의 투명도를 바꿀 수 있습니다.</li> + <li><code><color></code>를 지정할 수 있는 흔히 쓰이는 속성: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("box-shadow")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}</li> + <li><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색 입히기</a></li> +</ul> diff --git a/files/ko/web/css/comments/index.html b/files/ko/web/css/comments/index.html new file mode 100644 index 0000000000..e101681e9c --- /dev/null +++ b/files/ko/web/css/comments/index.html @@ -0,0 +1,54 @@ +--- +title: Comments +slug: Web/CSS/Comments +tags: + - CSS + - Reference +translation_of: Web/CSS/Comments +--- +<div>{{CSSRef}}</div> + +<p>CSS <strong>주석</strong>은 코드에 설명을 넣거나, 브라우저가 스타일 시트의 특정 부분을 읽지 못하도록 방지할 때 사용합니다. 주석은 문서의 레이아웃에 영향을 주지 않습니다.</p> + +<h2 id="구문">구문</h2> + +<p>주석은 스타일 시트에서 공백이 위치할 수 있는 곳 어디에나 넣을 수 있습니다. 한 줄로도, 여러 줄로도 사용할 수 있습니다.</p> + +<pre class="syntaxbox">/* Comment */</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush:css">/* 한 줄 주석 */ + +/* +여러 +줄을 +차지하는 +주석 +*/ + +/* 아래와 같이 사용하면 + 스타일을 숨길 수 있음 */ +/* +span { + color: blue; + font-size: 1.5em; +} +*/ +</pre> + +<h2 id="참고">참고</h2> + +<p>한 줄과 여러 줄 주석 모두 <code>/* */</code> 구문을 사용하며 다른 방법은 없습니다. 그러나 {{htmlelement("style")}} 요소를 사용하는 경우 <code><!-- --></code>를 이용해 구형 브라우저에게서 CSS를 숨길 수 있지만, 추천하는 방법은 아닙니다. <code>/* */</code> 주석 구문을 사용하는 대부분의 언어와 마찬가지로 주석을 중첩할 수는 없습니다. 즉 <code>/*</code>을 뒤따르는 첫 번째 <code>*/</code>이 주석을 끝냅니다.</p> + +<h2 id="명세">명세</h2> + +<ul> + <li><a href="http://www.w3.org/TR/CSS21/syndata.html#comments">CSS 2.1 Syntax and basic data types #comments</a></li> +</ul> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/ko/web/css/common_css_questions/index.html b/files/ko/web/css/common_css_questions/index.html new file mode 100644 index 0000000000..604448f6c3 --- /dev/null +++ b/files/ko/web/css/common_css_questions/index.html @@ -0,0 +1,199 @@ +--- +title: 공통된 CSS 질문들 +slug: Web/CSS/Common_CSS_Questions +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +<h2 id="왜_유효한_내_CSS가_왜_올바르게_그려지지_않는가">왜 유효한 내 CSS가 왜 올바르게 그려지지 않는가?</h2> + +<p>Browsers use the <code>DOCTYPE</code> declaration to choose whether to show the document using a mode that is more compatible with Web standards or with old browser bugs. Using a correct and modern <code>DOCTYPE</code> declaration at the start of your HTML will improve browser standards compliance.</p> + +<p>Modern browsers have two main rendering modes:</p> + +<ul> + <li><em>Quirks Mode</em>: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers. Documents with an incomplete, incorrect, or missing <code>DOCTYPE</code> declaration or a known <code>DOCTYPE</code> declaration in common use before 2001 will be rendered in Quirks Mode.</li> + <li><em>Standards Mode</em>: the browser attempts to follow the W3C standards strictly. New HTML pages are expected to be designed for standards-compliant browsers, and as a result, pages with a modern <code>DOCTYPE</code> declaration will be rendered with Standards Mode.</li> +</ul> + +<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko's_"Almost_Standards"_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p> + +<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p> + +<pre><!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5 + parser, this is the recommended doctype */ + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" +"http://www.w3.org/TR/html4/loose.dtd"> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +</pre> + +<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">왜 유효한 내 CSS는 모두 랜더링 되지 않는가?</h2> + +<p>원인은 다음과 같다:</p> + +<ul> + <li>CSS 파일의 경로가 잘못되었다.</li> + <li>적용을 위해서는 CSS 파일은 반드시 <code>text/css</code> MIME type으로 전달되어야 한다. 만약 웹 서버가 이 타입을 지원하지 않는다면 적용할 수 없다.</li> +</ul> + +<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">id 와 css는 무엇이 다른가?</h2> + +<p>HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.<br> + <br> + Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.<br> + <br> + Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.</p> + +<p>Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).</p> + +<p>See <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors"> CSS selectors</a></p> + +<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value"> 프로퍼티(property)에 기본값(default value)으로 복귀 시키는 방법은?</h2> + +<p> </p> + +<p>본래 CSS는 "default" 키워드를 제공하지 않으며 속성의 기본값을 복원하는 유일한 방법은 해당 속성을 명시 적으로 다시 선언하는 것이다.</p> + +<pre><code>/* Heading default color is black */ +h1 { color: red; } +h1 { color: black; }</code></pre> + +<p>이것은 CSS 2에서 변경되었다. 키워드 <a href="https://developer.mozilla.org/es/CSS/initial" title="initial">initial</a>은 이제 CSS 속성에서 유효한 값이다. 지정된 속성의 CSS 사양에 정의 된 기본값으로 재설정된다.</p> + +<pre><code>/* Heading default color is black */ +h1 { color: red; } +h1 { color: initial; }</code></pre> + +<p> </p> + +<h2 id="Derived_styles" name="Derived_styles">어떻게 하면 한 스타일(style)로 부터 다른 스타일을 파생시킬 수 있는가?</h2> + +<p>CSS는 한 스타일 안에서 다른 조건을 정의하는 것을 허용하지 않는다. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>). 그러나 여러개의 클래스(class)들을 한 엘리먼트(element)에 할당하면 같은 효과를 제공받을 수 있다.</p> + +<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">어떻게 하면 한 요소(element)에 여러 클래스(class)를 할당할 수 있는가?</h2> + +<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p> + +<pre><style type="text/css"> +.news { background: black; color: white; } +.today { font-weight: bold; } +</style> + +<div class="news today"> +... content of today's news ... +</div> +</pre> + +<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.</p> + +<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">왜 내 스타일 룰(style rule)은 올바르게 동작하지 않는가?</h2> + +<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p> + +<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML 요소(element) 계층(hierarchy)</h3> + +<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p> + +<pre>.news { color: black; } +.corpName { font-weight: bold; color: red; } + +<!-- news item text is black, but corporate name is red and in bold --> +<div class="news"> + (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... +</div> +</pre> + +<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p> + +<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">명확한 스타일 룰 재정의</h3> + +<p>CSS 스타일시트 안에서 순서가 중요하다. 만약 룰을 정의하고 같은 룰을 재정의 한다면 마지막 정의가 적용된다.</p> + +<pre>#stockTicker { font-weight: bold; } +.stockSymbol { color: red; } +/* other rules */ +/* other rules */ +/* other rules */ +.stockSymbol { font-weight: normal; } + +<!-- most text is in bold, except "GE", which is red and not bold --> +<div id="stockTicker"> + NYS: <span class="stockSymbol">GE</span> +1.0 ... +</div> +</pre> + +<p>위와 같은 종류의 오류를 방지하려면 특정 선택자에 대해 규칙을 한 번만 정의하고 해당 선택자에 속하는 모든 규칙을 그룹화 하는 것이 좋다.</p> + +<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">프로퍼티(property) 축약형의 사용</h3> + +<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.</p> + +<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; } +.stockSymbol { font: 14px Arial; color: red; } + +<div id="stockTicker"> + NYS: <span class="stockSymbol">GE</span> +1.0 ... +</div> +</pre> + +<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p> + +<pre>#stockTicker { + font-weight: bold; + font: 12px Verdana; /* font-weight is now normal */ +} +</pre> + +<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">* 셀렉터(selector)의 사용</h3> + +<p>* 와일드카드 셀렉터는 모든 엘리먼트에 적용되고, 이것은 특별히 주의를 기울여 사용해야 한다.</p> + +<pre>body * { font-weight: normal; } +#stockTicker { font: 12px Verdana; } +.corpName { font-weight: bold; } +.stockUp { color: red; } + +<div id="section"> + NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ... +</div> +</pre> + +<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p> + +<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p> + +<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS의 특수성</h3> + +<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p> + +<pre>div { color: black; } +#orange { color: orange; } +.green { color: green; } + +<div id="orange" class="green" style="color: red;">This is red</div> +</pre> + +<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p> + +<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">-moz-*, -ms-*, -webkit-*, -o-* and -khtml-* 프로퍼티(property)들이 하는 것은?</h2> + +<p>These properties, called <em>prefixed properties</em>, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</p> + +<p>The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.</p> + +<p>Please see the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p> + +<h2 id="z-index는_어떻게_포지셔닝을_하는가">z-index는 어떻게 포지셔닝을 하는가?</h2> + +<p>The z-index property specifies the stack order of elements.</p> + +<p>An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.</p> + +<p>Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p> diff --git a/files/ko/web/css/computed_value/index.html b/files/ko/web/css/computed_value/index.html new file mode 100644 index 0000000000..feb106bf43 --- /dev/null +++ b/files/ko/web/css/computed_value/index.html @@ -0,0 +1,55 @@ +--- +title: 계산값 +slug: Web/CSS/computed_value +tags: + - CSS + - Reference +translation_of: Web/CSS/computed_value +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>계산값</strong>은 상속 과정에서 부모가 자식에게 물려주는 값을 말합니다.</span> 계산값은 <a href="/ko/docs/Web/CSS/specified_value">지정값</a>으로부터 다음 방법을 통해 구합니다.</p> + +<ul> + <li>특수값인 {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}}, {{cssxref("revert")}}를 처리하여.</li> + <li>각 속성 정의 표의 "Computed value" 항목이 가리키는 연산을 수행하여.</li> +</ul> + +<p>계산값을 구하기 위한 연산은 보통 상댓값(<code>em</code> 단위나 백분율 등)을 절댓값으로 변환하는 작업을 수반합니다. 예컨대 요소가 <code>font-size: 1px</code>과 <code>padding-top: 2em</code>을 가진다면, <code>padding-top</code>의 계산값은 글씨 크기의 두 배인 <code>32px</code>입니다.</p> + +<p>그러나, <code>width</code>, <code>margin-right</code>, <code>text-index</code>, <code>top</code>과 같이, 백분율의 값을 알아내려면 레이아웃부터 계산해야 하는 속성의 백분율 지정값은 백분율 계산값이 됩니다. 추가로, <code>line-height</code> 속성의 단위 없는 값도 그대로 계산값이 됩니다. 이렇게 남겨진 상대적 계산값은 <a href="/ko/docs/Web/CSS/used_value">사용값</a>을 구할 때 절댓값이 됩니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong>{{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API는 <a href="/ko/docs/Web/CSS/resolved_value">결정값</a>을 반환합니다. 결정값은 속성에 따라 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>일 수도, <a href="/ko/docs/Web/CSS/used_value">사용값</a>일 수도 있습니다.</p> +</div> + +<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("CSS2.1", "cascade.html#computed-value", "computed value")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}</td> + <td>{{Spec2("CSS2.2")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Reference">CSS Reference</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/ko/web/css/contain/index.html b/files/ko/web/css/contain/index.html new file mode 100644 index 0000000000..64eb9eba4a --- /dev/null +++ b/files/ko/web/css/contain/index.html @@ -0,0 +1,206 @@ +--- +title: contain +slug: Web/CSS/contain +tags: + - CSS + - CSS Containment + - CSS Property + - Reference + - Web + - 'recipe:css-property' +translation_of: Web/CSS/contain +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>contain</code></strong> 속성은 특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립되어있음을 나타낼 때 사용합니다. 브라우저는 이 정보를 사용해 레이아웃, 스타일, 페인트, 크기, 또는 그 조합의 계산을 전체 페이지 DOM 대신 일부에서만 수행할 수 있으므로 뚜렷한 성능 상 이점을 얻을 수 있습니다.</p> + +<p><code>contain</code> 속성은 위젯 내부 콘텐츠가 외부에 부작용을 끼치는 것을 방지할 수 있으므로 서로 독립된 많은 양의 위젯이 존재하는 페이지에서 유용합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>paint</code>, <code>strict</code>, <code>content</code> 값을 설정할 경우 다음을 생성합니다.</p> + +<ol> + <li>새로운 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> ({{cssxref("position")}} 속성이 <code>absolute</code> 또는 <code>fixed</code>인 자손을 위함).</li> + <li>새로운 <a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">쌓임 맥락</a>.</li> + <li>새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>.</li> +</ol> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */ +contain: none; +contain: strict; +contain: content; +contain: size; +contain: layout; +contain: style; +contain: paint; + +/* 다중 값 */ +contain: size paint; +contain: size layout paint; + +/* 전역 값 */ +contain: inherit; +contain: initial; +contain: unset;</pre> + +<p><code>contain</code> 속성은 다음 방법 중 하나를 사용해 지정합니다.</p> + +<ul> + <li><code>none</code>, <code>strict</code>, <code>content</code> 키워드 중 하나를 사용.</li> + <li><code>size</code>, <code>layout</code>, <code>style</code>, <code>paint</code> 키워드를 임의 순서로 하나 이상 사용.</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt><code>none</code></dt> + <dd>아무것도 격리하지 않고 요소를 평범하게 렌더링합니다.</dd> + <dt><code>strict</code></dt> + <dd><code>style</code>을 제외한 모든 격리 규칙을 적용합니다. <code>contain: size layout paint</code>와 같습니다.</dd> + <dt><code>content</code></dt> + <dd><code>size</code>와 <code>style</code>을 제외한 모든 격리 규칙을 적용합니다. <code>contain: layout paint</code>와 같습니다.</dd> + <dt><code>size</code></dt> + <dd>요소의 크기를 계산할 때 자손의 크기는 고려하지 않아도 됨을 나타냅니다.</dd> + <dt><code>layout</code></dt> + <dd>요소 외부의 어느 것도 내부 레이아웃에 영향을 주지 않고, 그 반대도 성립함을 나타냅니다.</dd> + <dt><code>style</code></dt> + <dd>요소 자신과 자손 외에도 영향을 주는 속성이라도 그 영향 범위가 자신을 벗어나지 않음을 나타냅니다. 이 값은 명세에서 "제외 고려" 대상이므로 모든 브라우저가 지원하지 않을 수도 있음을 참고하세요.</dd> + <dt><code>paint</code></dt> + <dd>요소의 자손이 자신의 범위 바깥에 그려지지 않음을 나타냅니다. 이 값을 지정한 요소의 경우, 요소가 화면 밖에 위치할 경우 당연히 그 안의 자손도 화면 안에 들어오지 않을 것이므로 브라우저는 그 안의 요소를 고려하지 않아도 됩니다. 그러나 만약 자손이 범위 밖으로 넘칠 경우에는 요소의 테두리 상자에서 잘라냅니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_레이아웃">간단한 레이아웃</h3> + +<p>다음 마크업은 각각의 콘텐츠를 가진 여러 개의 글을 가정합니다.</p> + +<pre class="brush: html notranslate"><h1>My blog</h1> +<article> + <h2>Heading of a nice article</h2> + <p>Content here.</p> +</article> +<article> + <h2>Another heading of another article</h2> + <img src="graphic.jpg" alt="photo"> + <p>More content here.</p> +</article></pre> + +<p>각 <code><article></code>과 <code><img></code>엔 테두리를 부여하고, 이미지는 모두 좌측으로 플로팅합니다.</p> + +<pre class="brush: css notranslate">img { + float: left; + border: 3px solid black; +} + +article { + border: 1px solid black; +}</pre> + +<p>{{EmbedLiveSample('간단한_레이아웃', '100%', '300')}}</p> + +<h3 id="플로팅_간섭">플로팅 간섭</h3> + +<p>첫 번째 글의 마지막에 다른 이미지를 넣게 되면 많은 양의 DOM 트리가 다시 레이아웃이나 페인트 과정을 거쳐야 하며, 두 번째 글의 레이아웃에도 간섭하게 됩니다.</p> + +<pre class="brush: html notranslate"><h1>My blog</h1> +<article> + <h2>Heading of a nice article</h2> + <p>Content here.</p> + <img src="i-just-showed-up.jpg" alt="social"> +</article> +<article> + <h2>Another heading of another article</h2> + <img src="graphic.jpg" alt="photo"> + <p>More content here.</p> +</article></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">img { + float: left; + border: 3px solid black; +} + +article { + border: 1px solid black; +}</pre> +</div> + +<p>아래의 라이브 샘플에서, 플로팅 작동 방식으로 인해 첫 번째 이미지가 두 번째 글 안으로 들어가버린 모습을 볼 수 있습니다.</p> + +<p>{{EmbedLiveSample('플로팅_간섭', '100%', '300')}}</p> + +<h3 id="contain으로_수정하기"><code>contain</code>으로 수정하기</h3> + +<p>각각의 <code>article</code>에 <code>contain: content</code>를 지정해주면, 새로운 요소를 추가할 때 그 하위 트리만 계산하고 바깥은 고려하지 않아도 된다는 것을 브라우저가 인식합니다.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>My blog</h1> +<article> + <h2>Heading of a nice article</h2> + <p>Content here.</p> + <img src="i-just-showed-up.jpg" alt="social"> +</article> +<article> + <h2>Another heading of another article</h2> + <img src="graphic.jpg" alt="photo"> + <p>More content here.</p> +</article></pre> +</div> + +<pre class="brush: css notranslate">img { + float: left; + border: 3px solid black; +} + +article { + border: 1px solid black; + contain: content; +}</pre> + +<p>또한 첫 번째 이미지가 플로팅으로 인해 아래로 넘어가지 않고, 컨테이너 요소의 범위 안에 머무르는 것도 확인할 수 있습니다.</p> + +<p>{{EmbedLiveSample('contain으로_수정하기', '100%', '330')}}</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 Containment', '#contain-property', 'contain')}}</td> + <td>{{Spec2('CSS Containment')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.contain")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Containment">CSS Containment</a></li> + <li>CSS {{cssxref("position")}} 속성</li> +</ul> diff --git a/files/ko/web/css/content/index.html b/files/ko/web/css/content/index.html new file mode 100644 index 0000000000..c06271b05d --- /dev/null +++ b/files/ko/web/css/content/index.html @@ -0,0 +1,297 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - CSS Counter + - CSS Property + - Reference +translation_of: Web/CSS/content +--- +<div>{{CSSRef}}</div> + +<p class="summary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>content</code></strong> 속성은 생성한 값으로 요소를 대체합니다. <code>content</code> 속성으로 추가한 요소는 "익명 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>"입니다.</p> + +<pre class="brush:css no-line-numbers">/* 다른 값과 조합할 수 없는 키워드 */ +content: normal; +content: none; + +/* <a href="/ko/docs/Web/CSS/image"><image></a> 값 */ +content: url("http://www.example.com/test.png"); +content: linear-gradient(#e66465, #9198e5); + +/* 생성한 값의 대체 텍스트, Level 3 명세에서 추가 */ +content: url("http://www.example.com/test.png") / "This is the alt text"; + +/* 앞선 값은 모두 ::before와 ::after에만 적용 가능 */ + +/* <string> 값 */ +content: "prefix"; + +/* <counter> 값 */ +content: counter(chapter_counter); +content: counters(section_counter, "."); + +/* HTML 속성값으로 연결하는 attr() */ +content: attr(value string); + +/* 언어와 요소 위치 기반 키워드 */ +content: open-quote; +content: close-quote; +content: no-open-quote; +content: no-close-quote; + +/* normal과 none을 제외하면 여러 키워드를 함께 사용할 수 있음 */ +content: open-quote chapter_counter; + +/* 전역 값 */ +content: inherit; +content: initial; +content: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="구문">구문</h2> + +<h3 id="값">값</h3> + +<dl> + <dt><code>none</code></dt> + <dd>의사 요소를 생성하지 않음.</dd> + <dt><code>normal</code></dt> + <dd><code>::before</code>와 <code>::after</code> 의사 요소인 경우 <code>none</code>.</dd> + <dt>{{cssxref("<string>")}}</dt> + <dd>요소의 "대체 텍스트". 모든 숫자와 문자가 가능합니다. 단, 라틴계 문자가 아닌 경우 유니코드 이스케이프 시퀀스를 사용해 인코딩해야 합니다. 예를 들어, <code>\000A9</code>는 저작권 기호입니다.</dd> + <dt>{{cssxref("<image>")}}</dt> + <dd>{{cssxref("<url>")}}이나 {{cssxref("<gradient>")}} 자료형을 사용한 {{cssxref("<image>")}}, 또는 {{cssxref("element")}} 함수를 사용해 가리킨, 보여줄 웹페이지의 일부.</dd> + <dt>{{cssxref("<counter>")}}</dt> + <dd>보통 숫자인 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터 값</a>.{{cssxref("counter")}}나 {{cssxref("counters")}} 함수를 사용해 지정할 수 있습니다.</dd> + <dd> + <p>{{cssxref("counter")}} 함수는 'counter(<var>name</var>)'과 'counter(<var>name</var>, <var>style</var>)'의 두 형태를 가지고 있습니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 가장 안쪽 카운터의 값입니다. 지정한 스타일(기본 <code>decimal</code>)에 맞춰 서식을 적용합니다.</p> + + <p>{{cssxref("counters")}} 함수 역시 'counters(<var>name</var>, <var>string</var>)'과 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'의 두 형태를 가집니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 카운터 값의 목록으로 바깥쪽부터 시작하며 주어진 문자열을 사용해 구분합니다. 지정한 스타일(기본 <code>decimal</code>)에 맞춰 서식을 적용합니다..</p> + </dd> + <dt><code>attr(x)</code></dt> + <dd>문자열로 변환한, 요소 속성 <code>x</code>의 값. <code>x</code> 속성이 존재하지 않으면 빈 문자열을 반환합니다. 속성명의 대소문자 구분 여부는 문서 언어에 따릅니다.</dd> + <dt><code>open-quote</code> | <code>close-quote</code></dt> + <dd>{{cssxref("quotes")}} 속성에서 가져온 적절한 문자열을 사용해 대체.</dd> + <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt> + <dd>콘텐츠는 추가하지 않고, 대신 따옴표의 중첩 단계를 증감.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="헤딩과_따옴표">헤딩과 따옴표</h3> + +<p>다음 예제는 인용구 주변에 따옴표를 추가하고, 헤딩 앞에 단어 "Chapter"를 추가합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h1>5</h1> +<p>According to Sir Tim Berners-Lee, + <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was + lucky enough to invent the Web at the time when the Internet + already existed - and had for a decade and a half.</q> + We must understand that there is nothing fundamentally wrong + with building on the contributions of others. +</p> + +<h1>6</h1> +<p>According to the Mozilla Manifesto, + <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals + must have the ability to shape the Internet and + their own experiences on the Internet.</q> + Therefore, we can infer that contributing to the open web + can protect our own individual experiences on it. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">q { + color: blue; +} + +q::before { + content: open-quote; +} + +q::after { + content: close-quote; +} + +h1::before { + content: "Chapter "; /* The trailing space creates separation + between the added content and the + rest of the content */ +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('헤딩과_따옴표', '100%', 200)}}</p> + +<h3 id="이미지와_텍스트">이미지와 텍스트</h3> + +<p>다음 예제는 링크 앞에 이미지를 추가합니다. 이미지를 가져오지 못한 경우 텍스트를 대신 추가합니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">a::before { + content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: "; + font: x-small Arial, sans-serif; + color: gray; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample('이미지와_텍스트', '100%', 60)}}</p> + +<h3 id="클래스_사용">클래스 사용</h3> + +<p>다음 예제는 목록의 특별한 항목 뒤에 추가 텍스트를 삽입합니다.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><h2>Paperback Best Sellers</h2> +<ol> + <li>Political Thriller</li> + <li class="new-entry">Halloween Stories</li> + <li>My Biography</li> + <li class="new-entry">Vampire Romance</li> +</ol></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.new-entry::after { + content: " New!"; /* The leading space creates separation + between the added content and the + rest of the content */ + color: red; +}</pre> + +<h4 id="결과_3">결과</h4> + +<p>{{EmbedLiveSample('클래스_사용', '100%', 160)}}</p> + +<h3 id="이미지와_요소_속성">이미지와 요소 속성</h3> + +<p>다음 예제는 링크 앞에 이미지를 추가하고, 뒤에 <code>id</code> 속성의 값을 붙입니다.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><ul> + <li><a id="moz" href="http://www.mozilla.org/"> + Mozilla Home Page</a></li> + <li><a id="mdn" href="https://developer.mozilla.org/"> + Mozilla Developer Network</a></li> +</ul></pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css">a { + text-decoration: none; + border-bottom: 3px dotted navy; +} + +a::after { + content: " (" attr(id) ")"; +} + +#moz::before { + content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ; +} + +#mdn::before { + content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ; +} + +li { + margin: 1em; +} +</pre> + +<h4 id="결과_4">결과</h4> + +<p>{{EmbedLiveSample('이미지와_요소_속성', '100%', 160)}}</p> + +<h3 id="요소_대체">요소 대체</h3> + +<p>다음 예제는 요소의 콘텐츠를 이미지로 대체합니다. {{cssxref("<url>")}} 또는 {{cssxref("<image>")}} 사용하면 콘텐츠를 대체합니다. 요소를 대체했으므로 <code>::before</code>나 <code>::after</code>는 생성하지 않습니다.</p> + +<h4 id="HTML_5">HTML</h4> + +<pre class="brush: html"><div id="replaced">Mozilla</div> +</pre> + +<h4 id="CSS_5">CSS</h4> + +<pre class="brush: css">#replaced { + content: url("https://mdn.mozillademos.org/files/12668/MDN.svg"); +} + +#replaced::after { /* will not show if element replacement is supported */ + content: " (" attr(id) ")"; +}</pre> + +<h4 id="결과_5">결과</h4> + +<p>{{EmbedLiveSample('요소_대체', '100%', 200)}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>CSS로 생성한 콘텐츠는 <a href="/ko/docs/Web/API/Document_Object_Model/소개">DOM</a>이 포함하지 않고, <a href="/ko/docs/Learn/접근성/What_is_accessibility">접근성 트리</a>에도 들어가지 않습니다. 따라서 특정 접근성 기술/브라우저 조합이 내용을 표현하지 않을 수 있습니다. 콘텐츠가 포함한 정보가 페이지의 목적을 이해하는 것에 중요하다면 주 문서로 포함하는 것이 좋습니다.</p> + +<ul> + <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content – Tink</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Explanation of WCAG, Guideline 1.3 – MDN</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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("CSS3 Content", "#content-property", "content")}}</td> + <td>{{Spec2("CSS3 Content")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.content")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref("::after")}}</li> + <li>{{Cssxref("::before")}}</li> + <li>{{Cssxref("::marker")}}</li> + <li>{{Cssxref("quotes")}}</li> + <li>{{cssxref("url()")}} 함수</li> +</ul> diff --git a/files/ko/web/css/css_animated_properties/index.html b/files/ko/web/css/css_animated_properties/index.html new file mode 100644 index 0000000000..4f492a157d --- /dev/null +++ b/files/ko/web/css/css_animated_properties/index.html @@ -0,0 +1,14 @@ +--- +title: CSS animated properties +slug: Web/CSS/CSS_animated_properties +tags: + - CSS +translation_of: Web/CSS/CSS_animated_properties +--- +<p>{{CSSRef}}</p> + +<p>일부 CSS 속성은 애니메이션될 수 있습니다, 즉 그 값을 바꿀 때 <a href="/ko/docs/Web/CSS/CSS_Animations">CSS animation</a> 또는 <a href="/ko/docs/Web/CSS/CSS_Transitions">CSS transition</a>이 사용된 경우 부드러운 방식으로 바꿀 수 있습니다.</p> + +<p>다음은 애니메이션 가능한 속성 목록입니다:</p> + +<p>{{CSSAnimatedProperties}}</p> diff --git a/files/ko/web/css/css_animations/index.html b/files/ko/web/css/css_animations/index.html new file mode 100644 index 0000000000..5740301594 --- /dev/null +++ b/files/ko/web/css/css_animations/index.html @@ -0,0 +1,87 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Animations</strong> is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("animation")}}</li> + <li>{{cssxref("animation-delay")}}</li> + <li>{{cssxref("animation-direction")}}</li> + <li>{{cssxref("animation-duration")}}</li> + <li>{{cssxref("animation-fill-mode")}}</li> + <li>{{cssxref("animation-iteration-count")}}</li> + <li>{{cssxref("animation-name")}}</li> + <li>{{cssxref("animation-play-state")}}</li> + <li>{{cssxref("animation-timing-function")}}</li> +</ul> +</div> + +<h3 id="CSS_At-rules">CSS At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@keyframes")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt> + <dd>Describes a technique for detecting if a browser supports CSS animations.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt> + <dd>Step-by-step tutorial about how to create animations using CSS. This article describes each relevant CSS property and at-rule and explains how they interact with each other.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Tips">CSS animations tips and tricks</a></dt> + <dd>Tips and tricks to help you get the most out of CSS animations. Currently offers a technique for replaying an animation which has already run through to completion, which the API doesn't support inherently.</dd> +</dl> + +<h2 id="Specifications">Specifications</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('CSS3 Animations') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<h3 id="animation_property"><code>animation</code> property</h3> + +<div> + + +<p>{{Compat("css.properties.animation")}}</p> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations based on user actions.</li> +</ul> diff --git a/files/ko/web/css/css_animations/using_css_animations/index.html b/files/ko/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..416e3fc515 --- /dev/null +++ b/files/ko/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,330 @@ +--- +title: CSS 애니메이션 사용하기 +slug: Web/CSS/CSS_Animations/Using_CSS_animations +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +<p>{{SeeCompatTable}}{{CSSRef}}</p> + +<p><strong>CSS3 애니메이션</strong>은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.</p> + +<p>CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션 보다 다음 세 가지 이유에서 이점을 가집니다.</p> + +<ol> + <li>자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.</li> + <li>자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.</li> + <li>브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다.</li> +</ol> + +<h2 id="애니메이션_적용하기">애니메이션 적용하기</h2> + +<p>CSS 애니메이션을 만드려면 {{ cssxref("animation") }} 속성과 이 속성의 하위 속성을 지정합니다. 애니메이션의 총 시간과 반복 여부등을 지정할 수 있습니다. 이 속성은 애니메이션의 중간상태를 기술하지 않는다는걸 명심하세요. 애니메이션의 중간 상태는 아래에서 다룰 {{ cssxref("@keyframes") }} 규칙을 이용하여 기술합니다. </p> + +<p>{{ cssxref("animation") }} 속성의 하위 속성은 다음과 같습니다.</p> + +<dl> + <dt>{{ cssxref("animation-delay") }}</dt> + <dd>엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.</dd> + <dt>{{ cssxref("animation-direction") }}</dt> + <dd>애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.</dd> + <dt>{{ cssxref("animation-duration") }}</dt> + <dd>한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.</dd> + <dt>{{ cssxref("animation-iteration-count") }}</dt> + <dd>애니메이션이 몇 번 반복될지 지정합니다. <code>infinite</code>로 지정하여 무한히 반복할 수 있습니다.</dd> + <dt>{{ cssxref("animation-name") }}</dt> + <dd>이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 {{ cssxref("@keyframes") }} 규칙을 이용하여 기술합니다.</dd> + <dt>{{ cssxref("animation-play-state") }}</dt> + <dd>애니메이션을 멈추거나 다시 시작할 수 있습니다.</dd> + <dt>{{ cssxref("animation-timing-function") }}</dt> + <dd>중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.</dd> + <dt>{{ cssxref("animation-fill-mode") }}</dt> + <dd>애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.</dd> +</dl> + +<h2 id="키프레임을_이용하여_애니메이션의_중간상태_기술하기">키프레임을 이용하여 애니메이션의 중간상태 기술하기</h2> + +<p>애니메이션의 중간 상태를 기술해 봅시다. {{ cssxref("@keyframes") }} 규칙을 이용해서 두개 이상의 중간 상태를 기술합니다. 각 중간 상태는 특정 시점에 엘리먼트가 어떻게 보일지 나타냅니다. </p> + +<p>CSS 스타일을 이용해 중간 상태에 어떻게 보일지 정의했다면 이 중간 상태가 전체 애니메이션에서 언제 등장할 지 {{ cssxref("percentage") }} 를 이용해 지정합니다. 0%는 애니메이션이 시작된 시점을 의미하고 100%는 애니메이션이 끝나는 시점을 의미합니다. 최소한 이 두 시점은 기술되어야 브라우저가 언제 애니메이션이 시작되고 끝나는지 알 수 있습니다. 0%와 100% 대신 <code>from</code> 과 <code>to</code>로 사용할 수도 있습니다.</p> + +<p>시작 시점과 종료 시점 사이의 특정 시점에도 중간 상태를 지정할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<div class="note"><strong>노트:</strong> 다음 예제들은 애니메이션 CSS 속성에 접두어가 사용되지 않았습니다(역자: -webkit-, -moz- 등). 오래된 브라우저는 접두어가 필요합니다. </div> + +<h3 id="텍스트가_브라우저를_가로질러_움직이게_하기">텍스트가 브라우저를 가로질러 움직이게 하기</h3> + +<p>다음 단순한 예제에서 {{ HTMLElement("p") }} 엘리먼트가 브라우저 윈도우 오른쪽에서 왼쪽으로 가로질러 움직이는걸 볼 수 있습니다.</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300% + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<p>{{ HTMLElement("p") }} 엘리먼트에 지정한 CSS 규칙에서 {{ cssxref("animation-duration") }} 속성을 통해 애니메이션의 총 길이는 3초로 지정했습니다. 또 애니메이션의 중간 상태들을 {{ cssxref("@keyframes") }} 규칙을 사용하여 기술하고 이것들에게 slidein라는 이름을 붙였습니다. 그리고 p 엘리먼트에 slidein이라는 애니메이션을 지정했습니다.</p> + +<p>CSS 애니메이션을 지원하지 않는 브라우저를 위하여 {{ HTMLElement("p") }} 에 특정 스타일을 지정하고 싶다면 그러셔도 됩니다. 여기서도 그렇게 할 수 있으나 이 예제에서는 애니메이션 효과만을 보기위해 지정하지 않았습니다. </p> + +<p>애니메이션의 중간 상태는 {{ cssxref("@keyframes") }} 규칙을 이용하여 기술합니다. 이 경우에서는 두개의 중간 상태를 기술했습니다. 첫 번째 중간 상태는 애니메이션이 시작되고 나서 0% 시점에 (<code>from</code><span style="font-family: courier new,andale mono,monospace;">키워드를 사용해도 됩니다) 왼쪽 마진을 100%로 지정하는 것입니다. 왼쪽 마진을 100%로 지정했으므로 애니메이션이 시작된 시점에 브라우저 윈도우 오른쪽 모서리에 엘리먼트가 그려집니다.</span></p> + +<p>두번째 중간 상태는 애니메이션이 시작되고나서 100% (<span style="font-family: courier new,andale mono,monospace;">to키워드를 사용해도 됩니다)시점에 왼쪽 마진을 0%으로 지정하는 것입니다. 따라서 애니메이션 마지막에는 엘리먼트가 브라우저 윈도우의 왼쪽 모서리에 그려집니다.</span></p> + + +<pre class="brush: html"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>{{EmbedLiveSample("텍스트가_브라우저를_가로질러_움직이게_하기","100%","250")}}</p> + +<h3 id="중간_상태_추가하기">중간 상태 추가하기</h3> + +<p>이전 예제의 애니메이션에서 중간 상태를 추가해 봅시다. 왼쪽에서 오른쪽으로 엘리먼트가 움직일 때 글자 크기가 커지다가 다시 원래대로 줄어들게 해봅시다. 다음과 같은 중간 상태를 추가하면 됩니다.</p> + +<pre class="brush: css">75% { + font-size: 300%; + margin-left: 25%; + width: 150%; +} +</pre> +<pre class="brush: css hidden">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>애니메이션의 75% 시점에서 엘리먼트의 왼쪽 마진을 25%, 너비를 150%, 글자 크기를 300%로 지정하라는 의미입니다.</p> + +<p>{{EmbedLiveSample("중간_상태_추가하기","100%","250")}}</p> + +<h3 id="애니메이션_반복하기">애니메이션 반복하기</h3> + +<p>애니메이션을 반복하고 싶다면 {{ cssxref("animation-iteration-count") }} 속성을 사용하면 됩니다. 이 속성으로 애니메이션이 몇 번 반복될지 지정할 수 있습니다. 이 예제에서는 <code>infinite</code> 라는 값을 지정하여 무한히 반복되게 해 봅시다.</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; +} +</pre> + +<pre class="brush: css hidden">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>{{EmbedLiveSample("애니메이션_반복하기","100%","250")}}</p> + +<h3 id="앞뒤로_움직이기">앞뒤로 움직이기</h3> + +<p>앞에서 애니메이션이 반복되는걸 보셨을 겁니다. 그런데 애니메이션이 끝나고 갑자기 오른쪽 모서리로 돌아가는게 어색합니다. 애니메이션이 끝났을 때 반대방향으로 이동하도록 만들어 봅시다. {{ cssxref("animation-direction") }} 속성을 <code>alternate</code>로 지정하면 됩니다.</p> + +<pre class="brush: css">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +} +</pre> + +<pre class="brush: css hidden">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>{{EmbedLiveSample("앞뒤로_움직이기","100%","250")}}</p> + +<h3 id="애니메이션_이벤트_사용하기">애니메이션 이벤트 사용하기</h3> + +<p>애니메이션 이벤트를 이용하여 애니메이션을 조종할 수 있습니다. {{ domxref("event/AnimationEvent", "AnimationEvent") }} 로 나타내어지는 애니메이션 이벤트를 사용하여 애니메이션의 시작, 끝, 새로운 반복의 시작등을 감지할 수 있습니다. 이벤트가 발생할 때마다 이벤트의 종류와 어떤 애니메이션에서 발생한 것인지 알 수도 있습니다.</p> + +<p>위의 움직이는 글자 예제를 수정하여 애니메이션 이벤트를 어떻게 사용하는지 알아봅시다. </p> + +<pre class="brush: css">.slidein { + -moz-animation-duration: 3s; + -webkit-animation-duration: 3s; + animation-duration: 3s; + -moz-animation-name: slidein; + -webkit-animation-name: slidein; + animation-name: slidein; + -moz-animation-iteration-count: 3; + -webkit-animation-iteration-count: 3; + animation-iteration-count: 3; + -moz-animation-direction: alternate; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +@-moz-keyframes slidein { + from { + margin-left:100%; + width:300% + } + + to { + margin-left:0%; + width:100%; + } +} + +@-webkit-keyframes slidein { + from { + margin-left:100%; + width:300% + } + + to { + margin-left:0%; + width:100%; + } +} + +@keyframes slidein { + from { + margin-left:100%; + width:300% + } + + to { + margin-left:0%; + width:100%; + } +}</pre> +<h4 id="애니메이션_이벤트_리스너_추가하기">애니메이션 이벤트 리스너 추가하기</h4> + +<p>자바스크립트 코드를 사용하여 위에서 언급한 세개의 이벤트를 감지해 봅시다. <code>setup()</code> 함수는 애니메이션 이벤트 리스너를 추가하는 함수입니다. 문서가 로드되었을 때 이 함수를 실행할 것입니다.</p> + +<pre class="brush: js">function setup() { + var e = document.getElementById("watchme"); + e.addEventListener("animationstart", listener, false); + e.addEventListener("animationend", listener, false); + e.addEventListener("animationiteration", listener, false); + + var e = document.getElementById("watchme"); + e.className = "slidein"; +} +</pre> + +<p>어떻게 동작하는지 더 자세히 알고싶으면 {{ domxref("element.addEventListener()") }} 문서를 참고하세요. setup() 함수의 마지막 줄에서 엘리먼트의 <code>class</code> 를 "slidein"으로 지정하는 순간 애니메이션이 시작됩니다.</p> + +<p>왜 이렇게 했을까요? 왜냐하면 <code>animationstart</code> 이벤트는 애니메이션이 시작되자마자 발생하므로 우리 코드에서는 이를 감지할 수 없습니다. 애니메이션이 시작될 때는 위의 코드가 실행되기 전이라 이벤트 리스너가 아직 추가되지 않았기 때문이지요. 따라서 이벤트 리스너를 먼저 추가하고 엘리먼트에 class를 지정하여 애니메이션을 시작했습니다.</p> + +<h4 id="이벤트_받기">이벤트 받기</h4> + +<p>각 이벤트가 발생할 때마다 <code>listener()</code> 함수로 넘겨집니다. 이 함수의 코드는 아래와 같습니다.</p> + +<pre class="brush: js">function listener(e) { + var l = document.createElement("li"); + switch(e.type) { + case "animationstart": + l.innerHTML = "Started: elapsed time is " + e.elapsedTime; + break; + case "animationend": + l.innerHTML = "Ended: elapsed time is " + e.elapsedTime; + break; + case "animationiteration": + l.innerHTML = "New loop started at time " + e.elapsedTime; + break; + } + document.getElementById("output").appendChild(l); +} +</pre> + +<p>이 코드 역시 굉장히 단순합니다. {{ domxref("event.type") }} 을 보고 어떤 이벤트가 발생했는지 확인합니다. 그리고 {{ HTMLElement("ul") }} (순서 없는 리스트)에 그 이벤트의 로그를 나타내는 엘리먼트를 추가합니다.</p> + +<p>결과는 다음과 같습니다.</p> + +<ul> + <li>Started: elapsed time is 0</li> + <li>New loop started at time 3.01200008392334</li> + <li>New loop started at time 6.00600004196167</li> + <li>Ended: elapsed time is 9.234000205993652</li> +</ul> + +<p>이벤트가 발생한 시각이 위에서 지정한 애니메이션 시간과 굉장히 가깝지만 정확히 같지는 않다는걸 기억하세요. 또 애니메이션의 반복이 끝나는 순간에는 <code>animationiteration</code> 이벤트가 발생하지 않고 <code>animationend</code> 이벤트가 발생했다는걸 기억하세요.</p> + +<h4 id="HTML_코드">HTML 코드 </h4> + +<p>완벽을 위해 예제에서 사용한 HTML 코드도 첨부합니다. 여기에는 페이지 내용뿐만 아니라 이벤트 로깅을 위한 ul 엘리먼트도 있습니다. </p> + +<pre class="brush: html"><body onload="setup()"> + <h1 id="watchme">Watch me move</h1> + <p>This example shows how to use CSS animations to make <code>h1</code> elements + move across the page.</p> + <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p> + <ul id="output"> + </ul> +</body> +</pre> + +<p>{{EmbedLiveSample('애니메이션_이벤트_사용하기', '600', '300')}}</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> + <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li> +</ul> diff --git a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..01ae23c400 --- /dev/null +++ b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2627 @@ +--- +title: Border-image 생성기 +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +tags: + - CSS + - CSS Borders + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +<p>이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.</p> + +<div style="display: none;"> +<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"> <div id="container"> + + <div id="gallery"> + <div id="image-gallery"> + <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/> + <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/> + <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/> + <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/> + <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/> + <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/> + </div> + </div> + + <div id="load-actions" class="group section"> + <div id="toggle-gallery" data-action="hide"> </div> + <div id="load-image" class="button"> Upload image </div> + <input id="remote-url" type="text" placeholder="Load an image from URL"/> + <div id="load-remote" class="button"> </div> + </div> + + <div id="general-controls" class="group section"> + <div class="name"> Control Box </div> + <div class="separator"></div> + <div class="property"> + <div class="name">scale</div> + <div class="ui-input-slider" data-topic="scale" + data-unit="%" data-max="300" data-sensivity="10"> + </div> + </div> + <div class="separator"></div> + <div class="property"> + <div class="name">draggable</div> + <div class="ui-checkbox" data-topic='drag-subject'></div> + </div> + <div class="property right"> + <div class="name">section height</div> + <div class="ui-input-slider" data-topic="preview-area-height" + data-min="400" data-max="1000"> + </div> + </div> + </div> + + <div id="preview_section" class="group section"> + <div id="subject"> + <div class="guideline" data-axis="Y" data-topic="slice-top"></div> + <div class="guideline" data-axis="X" data-topic="slice-right"></div> + <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div> + <div class="guideline" data-axis="X" data-topic="slice-left"></div> + </div> + <div id="preview"> </div> + </div> + + <!-- controls --> + <div id="controls" class="group section"> + + <!-- border-image-slice --> + <div id="border-slice-control" class="category"> + <div class="title"> border-image-slice </div> + <div class="property"> + <div class="name">fill</div> + <div class="ui-checkbox" data-topic='slice-fill'></div> + </div> + </div> + + <!-- border-image-width --> + <div id="border-width-control" class="category"> + <div class="title"> border-image-width </div> + </div> + + <!-- border-image-outset --> + <div id="border-outset-control" class="category"> + <div class="title"> border-image-outset </div> + </div> + + <!-- other-settings --> + <div id="aditional-properties" class="category"> + <div class="title"> aditional-properties </div> + <div class="property"> + <div class="name"> repeat-x </div> + <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"> + <div data-value="0">repeat</div> + <div data-value="0">stretch</div> + <div data-value="0">round</div> + </div> + </div> + <div class="property"> + <div class="name"> repeat-y </div> + <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"> + <div data-value="1">repeat</div> + <div data-value="1">stretch</div> + <div data-value="1">round</div> + </div> + </div> + <div class="property"> + <div class="ui-input-slider" data-topic="font-size" data-info="em size" + data-unit="px" data-value="12" data-sensivity="3"> + </div> + </div> + + <div class="property"> + <div class="ui-input-slider" data-topic="preview-width" data-info="width" + data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> + </div> + <div class="property"> + <div class="ui-input-slider" data-topic="preview-height" data-info="height" + data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> + </div> + </div> + </div> + + + <div id="output" class="category"> + <div class="title"> CSS Code </div> + <div class="css-property"> + <span class="name"> border-image-slice: </span> + <span id="out-border-slice" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-width: </span> + <span id="out-border-width" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-outset: </span> + <span id="out-border-outset" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-repeat: </span> + <span id="out-border-repeat" class="value"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-source: </span> + <span id="out-border-source" class="value"> </span> + </div> + </div> + + </div> + </div></pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* GRID OF TWELVE + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + + + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * UI DropDown + */ + +/* Dropdown */ + +.ui-dropdown { + height: 2em; + width: 120px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 12px; + + background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); + background-position: right center; + background-repeat: no-repeat; + background-color: #359740; + + position: relative; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-dropdown:hover { + cursor: pointer; + background-color: #208B20; +} + +/* Dropdown Select Button */ + +.ui-dropdown-select { + height: inherit; + padding: 0 0.75em; + color: #FFF; + line-height: 2em; +} + +/* Dropdown List */ + +.ui-dropdown-list { + width: 100%; + height: 150px; + max-height: 150px; + margin: 0; + padding: 0 0.3em; + + border: 3px solid #3490D2; + border-color: #208B20; + background: #666; + background-color: #EEF1F5; + color: #000; + + position: absolute; + top: 2em; + left: 0; + z-index: 100; + + overflow: hidden; + transition: all 0.3s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-dropdown-list:hover { + overflow: auto; +} + +.ui-dropdown-list[data-hidden='true'] { + height: 0 !important; + opacity: 0; + visibility: hidden; +} + +.ui-dropdown[data-position='left'] .ui-dropdown-list { + left: -100%; + top: 0; +} + +.ui-dropdown[data-position='right'] .ui-dropdown-list { + left: 100%; + top: 0; +} + +.ui-dropdown-list > div { + width: 100%; + height: 1.6em; + margin: 0.3em 0; + padding: 0.3em; + line-height: 1em; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-dropdown-list > div:hover { + background: #3490D2; + color:#FFF; + border-radius: 2px; + cursor: pointer; +} + + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * UI Button + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 2px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); + background-color: #379B4A; +} + +/*************************************************************************************/ +/*************************************************************************************/ + +/* + * BORDER IMAGE GENERATOR TOOL + */ + +body { + width: 100%; + margin: 0 auto; + padding: 0 0 20px 0; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + /*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/ + border: 1px solid #EEE; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +body[data-move='X'] { + cursor: w-resize !important; +} + +body[data-move='Y'] { + cursor: s-resize !important; +} + +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +[data-draggable='true']:hover { + cursor: move; +} + +[data-draggable='true']:hover > * { + cursor: default; +} + + + +/******************************************************************************/ +/******************************************************************************/ + +/* + * Border Image Picker + */ + +#gallery { + box-shadow: 0 0 3px 0 #BABABA; +} + +#image-gallery { + width: 600px; + height: 100px; + margin: 0 auto; + transition: margin 0.4s; +} + +#image-gallery .image { + height: 80px; + float: left; + margin: 10px; + opacity: 0.5; + background-color: #FFF; + box-shadow: 0px 0px 3px 1px #BABABA; +} + +#image-gallery .image[selected="true"] { + box-shadow: 0px 0px 3px 1px #3BBA52; + opacity: 1; +} + +#image-gallery .image:hover { + cursor: pointer; + box-shadow: 0px 0px 3px 1px #30ACE5; + opacity: 1; +} + +#image-gallery[data-collapsed='true'] { + margin-top: -100px; +} + +/* Load Menu */ + +#load-actions { + margin: 10px 0; +} + +#toggle-gallery { + width: 30px; + height: 25px; + margin: 10px; + color: #FFF; + + background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); + background-repeat: no-repeat; + background-position: top 4px center; + background-color: #888888 !important; + + border-radius: 2px; + float: left; +} + +#toggle-gallery:hover { + cursor: pointer; +} + +#toggle-gallery[data-action='show'] { + background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png'); + background-color: #888888 !important; +} + +#toggle-gallery[data-action='hide'] { + background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); +} + +.button { + width: 100px; + height: 25px; + margin: 10px; + color: #FFF; + text-align: center; + font-size: 12px; + line-height: 25px; + background-color: #379B4A; + border-radius: 2px; + float: left; +} + +.button:hover { + cursor: pointer; + background-color: #3380C4; +} + +#load-image { + float: left; +} + +#load-remote { + width: 30px; + background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png'); + background-repeat: no-repeat; + background-position: center center; +} + +#remote-url { + width: 200px; + height: 23px; + margin: 10px; + padding: 0 5px; + border: 1px solid #379B4A; + border-radius: 2px; + float: left; + + transition: width 0.5s; +} + +#remote-url:focus { + box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */ + border-color: rgba(55, 155, 74, 0.5); + width: 450px; +} + +/* + * Visible Area + */ + +#preview_section { + position: relative; + min-height: 400px; +} + +/* Image Control */ + +#subject { + width: 300px; + height: 300px; + background-repeat: no-repeat; + background-size: 100%; + background-color: #FFF; + border: 1px solid #CCC; + + position: absolute; + z-index: 10; + top: 15%; + left: 10%; + + box-shadow: 0 0 3px 0 #BABABA; + transition-property: width, height; + transition-duration: 0.1s; +} + +#subject .guideline { + background-color: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(0, 0, 0, 0.3); + position: absolute; +} + +#subject .guideline:hover { + background-color: #F00; +} + +#subject .guideline[data-active] { + background-color: #F00; + z-index: 10; +} + +#subject .guideline[data-axis='X'] { + width: 1px; + height: 100%; + top: -1px; +} + +#subject .guideline[data-axis='Y'] { + width: 100%; + height: 1px; + left: -1px; +} + +#subject .guideline[data-axis='X']:hover { + cursor: w-resize; +} + +#subject .guideline[data-axis='Y']:hover { + cursor: s-resize; +} + + +#subject .relative { + position: relative; + font-size: 12px; +} + +#subject .tooltip, #subject .tooltip2 { + width: 40px; + height: 20px; + line-height: 20px; + font-size: 12px; + text-align: center; + + position: absolute; + opacity: 0.5; + transition: opacity 0.25s; +} + +#subject .tooltip { + background: #EEE; + border-radius: 2px; + border: 1px solid #CCC; +} + +#subject .tooltip2{ + color: #555; +} + +#subject [data-active] > * { + opacity: 1; +} + +#subject .tooltip[data-info='top'] { + top: -10px; + right: -50px; +} + +#subject .tooltip[data-info='right'] { + bottom: -30px; + right: -20px; +} + +#subject .tooltip[data-info='bottom'] { + top: -10px; + left: -50px; +} + +#subject .tooltip[data-info='left'] { + top: -30px; + right: -20px; +} + +#subject .tooltip2[data-info='top'] { + top: -10px; + left: -50px; +} + +#subject .tooltip2[data-info='right'] { + top: -30px; + right: -20px; +} + +#subject .tooltip2[data-info='bottom'] { + top: -10px; + right: -50px; +} + +#subject .tooltip2[data-info='left'] { + bottom: -30px; + right: -20px; +} + +/* Preview */ + +#preview { + width: 30%; + height: 50%; + background-color: #FFF; + text-align: center; + overflow: hidden; + position: absolute; + z-index: 10; + + left: 60%; + top: 15%; + + border-radius: 2px; + border-image-width: 20px; + border-image-repeat: round; + box-shadow: 0 0 3px 0 #BABABA; +} + +#preview .resize-handle { + width: 10px; + height: 10px; + background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +#preview .resize-handle:hover { + cursor: nw-resize; +} + + +/* + * General controls MENU + */ + +#general-controls { + padding: 10px 30px; + background-color: #FFF; + opacity: 0.95; + color: #888; + /*border-radius: 2px;*/ + box-shadow: 0 0 3px 0 #BABABA; +} + +#general-controls .property { + width: 130px; + float: left; +} + +#general-controls .name { + height: 20px; + margin: 0 10px 0 0; + line-height: 100%; + text-align: right; + float: left; +} + +#general-controls .right { + width: 200px; + float: right; +} + +#general-controls .ui-checkbox label { + height: 10px; +} + +#general-controls .separator { + height: 40px; + width: 1px; + margin: -10px 15px; + background-color: #EEE; + float: left; +} + +/* + * Controls + */ + +#controls { + color: #444; + margin: 10px 0 0 0; +} + +#controls .category { + height: 190px; + min-width: 260px; + margin: 10px; + padding: 10px; + border: 1px solid #CCC; + border-radius: 3px; + float: left; + + box-shadow: 0 0 3px 0 #BABABA; + transition: all 0.25s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +@media (min-width: 880px) { + #controls .category { + width: 30%; + margin-left: 1.66%; + margin-right: 1.66%; + } +} + +@media (max-width: 879px) { + #controls .category { + width: 37%; + margin-left: 6.5%; + margin-right: 6.5%; + } +} + +#controls .category .title { + width: 100%; + height: 30px; + margin: 0 0 10px 0; + line-height: 25px; + + text-align: center; + color: #AAA; +} + +#controls .category:hover .title { + color: #777; +} + +#controls .category > .group { + border: 1px solid #CCC; + border-radius: 2px; +} + + +/* property */ + +#controls .property { + width: 250px; + height: 20px; + margin: 5px auto; +} + +#controls .property .ui-input-slider { + margin: 0; + float: left; +} + +#controls .property .ui-input-slider-info { + width: 60px; +} + +#controls .property .ui-input-slider-left { + transition: opacity 0.15s; + opacity: 0; +} + +#controls .property .ui-input-slider-right { + transition: opacity 0.15s; + opacity: 0; +} + +#controls .property .name { + width: 60px; + height: 20px; + padding: 0px 10px 0px 0px; + text-align: right; + line-height: 100%; + float: left; +} + +#controls .property .config { + width: 20px; + height: 20px; + float: left; + background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat; + opacity: 0.5; +} + +#controls .property .config:hover { + cursor: pointer; + opacity: 1; +} + +#controls .ui-input-slider:hover .ui-input-slider-right { + opacity: 1; +} + +#controls .ui-input-slider:hover .ui-input-slider-left { + opacity: 1; +} + +#controls .property .ui-dropdown { + margin: 0 10px; + float: left; +} + + +#controls .property .ui-checkbox { + margin: 0 0 0 16px; + float: left; +} + +#controls .property .ui-checkbox label { + height: 0.85em; + width: 10px; +} + +/* dropdowns */ +#controls .ui-dropdown { + width: 50px; + height: 1.7em; + border-radius: 2px; +} + +#controls .ui-dropdown-select { + line-height: 1.6em; +} + +#controls .ui-dropdown-list { + top: 20px; +} + +#controls .ui-dropdown-list { + border-width: 1px; + text-align: center; +} + +#controls .ui-dropdown-list:hover { + overflow: hidden; +} + +#controls .border-repeat { + margin: 0 0 0 16px !important; + width: 80px; +} + +#controls .border-repeat .ui-dropdown-list { + height: 6.2em; + border-width: 1px; + text-align: center; +} + +/* border-image-slice */ + + +#border-slice-control .ui-dropdown-list { + height: 4.3em; +} + +/* border-image-width */ + +#border-width-control .ui-dropdown-list { + height: 6.2em; +} + +/* border-image-outset */ + +#border-outset-control .ui-dropdown-list { + height: 4.3em; +} + +#aditional-properties .property { + width: 200px; +} + +#aditional-properties .ui-input-slider > input { + width: 80px !important; +} + +/* unit settings panel */ + +#unit-settings { + padding: 10px; + position: absolute; + + background: #FFF; + + font-size: 12px; + border-radius: 3px; + border: 1px solid #CCC; + text-align: center; + color: #555; + + position: absolute; + z-index: 1000; + + box-shadow: 0 0 3px 0 #BABABA; + transition: all 0.25s; +} + +#unit-settings .title { + width: 100%; + margin: -5px auto 0; + + color: #666; + font-size: 14px; + font-weight: bold; + line-height: 25px; + border-bottom: 1px solid #E5E5E5; +} + +#unit-settings .ui-input-slider { + margin: 10px 0 0 0; +} + +#unit-settings .ui-input-slider-info { + width: 50px; + line-height: 1.5em; +} + +#unit-settings input { + font-size: 12px; + width: 40px !important; +} + +#unit-settings .close { + width: 16px; + height: 16px; + background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center; + background-size: 75%; + + position: absolute; + top: 4px; + right: 4px; + opacity: 0.5; +} + +#unit-settings .close:hover { + cursor: pointer; + opacity: 1; +} + +#unit-settings[data-active='true'] { + opacity: 1; +} + +#unit-settings[data-active='false'] { + opacity: 0; + top: -100px !important; +} + +/* + * CSS Output Code + */ + +#output { + padding: 10px; + border: 2px dashed #888 !important; + box-shadow: none !important; + border-radius: 3px; + overflow: hidden; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; +} + + +@media (min-width: 880px) { + #output { + width: 63.33% !important; + } +} + +@media (max-width: 879px) { + #output { + width: 87% !important; + } +} + + +#output .title { + width: 100%; + height: 30px; + margin: 0 0 10px 0; + line-height: 25px; + + text-align: center; + color: #AAA; +} + +#output .css-property { + width: 100%; + margin: 0; + color: #555; + font-size: 14px; + line-height: 18px; + float: left; +} + +#output .css-property .name { + width: 30%; + font-weight: bold; + text-align: right; + float: left; +} + +#output .css-property .value { + width: 65%; + padding: 0 2.5%; + word-break: break-all; + float: left; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">'use strict'; + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensivity = function setSensivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensivity : setSensivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + + +/** + * UI-DropDown Select + */ + +var DropDownManager = (function DropdownManager() { + + var subscribers = {}; + var dropdowns = []; + var active = null; + + var visbility = ["hidden", "visible"]; + + + var DropDown = function DropDown(node) { + var topic = node.getAttribute('data-topic'); + var label = node.getAttribute('data-label'); + var selected = node.getAttribute('data-selected') | 0; + + var select = document.createElement('div'); + var list = document.createElement('div'); + var uval = 0; + var option = null; + var option_value = null; + + list.className = 'ui-dropdown-list'; + select.className = 'ui-dropdown-select'; + + while (node.firstElementChild !== null) { + option = node.firstElementChild; + option_value = option.getAttribute('data-value'); + + if (option_value === null) + option.setAttribute('data-value', uval); + + list.appendChild(node.firstElementChild); + uval++; + } + + node.appendChild(select); + node.appendChild(list); + + select.onclick = this.toggle.bind(this); + list.onclick = this.updateValue.bind(this); + document.addEventListener('click', clickOut); + + this.state = 0; + this.time = 0; + this.dropmenu = list; + this.select = select; + this.toggle(false); + this.value = {}; + this.topic = topic; + + if (label) + select.textContent = label; + else + this.setNodeValue(list.children[selected]); + + dropdowns[topic] = this; + + }; + + DropDown.prototype.toggle = function toggle(state) { + if (typeof(state) === 'boolean') + this.state = state === false ? 0 : 1; + else + this.state = 1 ^ this.state; + + if (active !== this) { + if (active) + active.toggle(false); + active = this; + } + + if (this.state === 0) + this.dropmenu.setAttribute('data-hidden', 'true'); + else + this.dropmenu.removeAttribute('data-hidden'); + + }; + + var clickOut = function clickOut(e) { + if (active.state === 0 || + e.target === active.dropmenu || + e.target === active.select) + return; + + active.toggle(false); + }; + + DropDown.prototype.updateValue = function updateValue(e) { + + if (Date.now() - this.time < 500) + return; + + if (e.target.className !== "ui-dropdown-list") { + this.setNodeValue(e.target); + this.toggle(false); + } + + this.time = Date.now(); + }; + + DropDown.prototype.setNodeValue = function setNodeValue(node) { + this.value['name'] = node.textContent; + this.value['value'] = node.getAttribute('data-value'); + + this.select.textContent = node.textContent; + this.select.setAttribute('data-value', this.value['value']); + + notify.call(this); + }; + + var createDropDown = function createDropDown(topic, options) { + + var dropdown = document.createElement('div'); + dropdown.setAttribute('data-topic', topic); + dropdown.className = 'ui-dropdown'; + + for (var i in options) { + var x = document.createElement('div'); + x.setAttribute('data-value', i); + x.textContent = options[i]; + dropdown.appendChild(x); + } + + new DropDown(dropdown); + + return dropdown; + }; + + var setValue = function setValue(topic, index) { + if (dropdowns[topic] === undefined || + index >= dropdowns[topic].dropmenu.children.length) + return; + + dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + var index = subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + }; + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll('.ui-dropdown'); + size = elem.length; + for (var i = 0; i < size; i++) + new DropDown(elem[i]); + + }; + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + createDropDown : createDropDown + }; + +})(); + + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + }; + + var getNode = function getNode(topic) { + return buttons[topic].node; + }; + + var setValue = function setValue(topic, value) { + var obj = buttons[topic]; + if (obj === undefined) + return; + + obj.checkbox.checked = value; + notify.call(obj); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + }; + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + }; + +})(); + +window.addEventListener("load", function() { + BorderImage.init(); +}); + +var BorderImage = (function BorderImage() { + + var getElemById = document.getElementById.bind(document); + + var subject; + var preview; + var guidelines = []; + var positions = ['top', 'right', 'bottom', 'left']; + + var makeDraggable = function makeDraggable(elem) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + var PreviewControl = function PreviewControl() { + + var dragging = false; + var valueX = null; + var valueY = null; + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + valueX = e.clientX - preview.clientWidth; + valueY = e.clientY - preview.clientHeight; + dragging = true; + + document.addEventListener('mousemove', mouseDrag); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0 || dragging === false) + return; + + document.removeEventListener('mousemove', mouseDrag); + dragging = false; + }; + + var mouseDrag = function mouseDrag(e) { + InputSliderManager.setValue('preview-width', e.clientX - valueX); + InputSliderManager.setValue('preview-height', e.clientY - valueY); + }; + + var init = function init() { + + makeDraggable(preview); + makeDraggable(subject); + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + handle.addEventListener('mousedown', dragStart); + document.addEventListener('mouseup', dragEnd); + + preview.appendChild(handle); + + }; + + return { + init: init + }; + + }(); + + var ImageReader = (function ImageReader() { + + var fReader = new FileReader(); + var browse = document.createElement('input'); + + var loadImage = function loadImage(e) { + if (browse.files.length === 0) + return; + + var file = browse.files[0]; + + if (file.type.slice(0, 5) !== 'image') + return; + + fReader.readAsDataURL(file); + + return false; + }; + + fReader.onload = function(e) { + ImageControl.loadRemoteImage(e.target.result); + }; + + var load = function load() { + browse.click(); + }; + + browse.setAttribute('type', 'file'); + browse.style.display = 'none'; + browse.onchange = loadImage; + + return { + load: load + }; + + })(); + + var ImageControl = (function ImageControl() { + + var scale = 0.5; + var imgSource = new Image(); + var imgState = null; + var selected = null; + + + var topics = ['slice', 'width', 'outset']; + var properties = {}; + properties['border1'] = { + fill : false, + + slice_values : [27, 27, 27, 27], + width_values : [20, 20, 20, 20], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [1, 1], + size : [300, 200], + preview_area : 400 + }; + + properties['border2'] = { + fill : false, + + slice_values : [33, 33, 33, 33], + width_values : [1.5, 1.5, 1.5, 1.5], + outset_values : [0, 0, 0, 0], + + slice_units : [1, 1, 1, 1], + width_units : [2, 2, 2, 2], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [300, 200], + preview_area : 400 + }; + + properties['border3'] = { + fill : true, + + slice_values : [15, 15, 15, 15], + width_values : [10, 10, 10, 10], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [300, 200], + preview_area : 400 + }; + + properties['border4'] = { + fill : false, + + slice_values : [13, 13, 13, 13], + width_values : [13, 13, 13, 13], + outset_values : [13, 13, 13, 13], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [0, 0], + size : [300, 200], + preview_area : 400 + }; + + properties['border5'] = { + fill : false, + + slice_values : [0, 12, 0, 12], + width_values : [0, 12, 0, 12], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [0, 0], + size : [300, 200], + preview_area : 400, + }; + + properties['border6'] = { + fill : false, + + slice_values : [42, 42, 42, 42], + width_values : [42, 42, 42, 42], + outset_values : [0, 0, 0, 0], + + slice_units : [0, 0, 0, 0], + width_units : [0, 0, 0, 0], + outset_units : [0, 0, 0, 0], + + repeat : [2, 2], + size : [350, 350], + preview_area : 500, + }; + + + var loadLocalImage = function loadLocalImage(source) { + var location = "images/" + source; + imgSource.src = location; + }; + + var loadRemoteImage = function loadRemoteImage(source) { + imgSource.src = source; + if (selected) + selected.removeAttribute('selected'); + Tool.setOutputCSS('source', 'url("' + source + '")'); + }; + + var pickImage = function pickImage(e) { + if (e.target.className === 'image') { + selected = e.target; + selected.setAttribute('selected', 'true'); + loadRemoteImage(e.target.src); + imgState = e.target.getAttribute('data-stateID'); + } + }; + + var loadImageState = function loadImageState(stateID) { + if (properties[stateID] === undefined) + return; + + var prop = properties[stateID]; + var topic; + var unit_array; + var value_array; + + for (var i in topics) { + for (var j=0; j<4; j++) { + topic = topics[i] + '-' + positions[j]; + unit_array = topics[i] + '_units'; + value_array = topics[i] + '_values'; + InputSliderManager.setValue(topic, prop[value_array][j]); + DropDownManager.setValue(topic, prop[unit_array][j]); + } + } + + ButtonManager.setValue('slice-fill', prop['fill']); + DropDownManager.setValue('image-repeat-X', prop['repeat'][0]); + DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]); + InputSliderManager.setValue('preview-width', prop['size'][0]); + InputSliderManager.setValue('preview-height', prop['size'][1]); + InputSliderManager.setValue('preview-area-height', prop['preview_area']); + }; + + var update = function update() { + scale = Math.min(300, (30000 / this.width) | 0); + setScale(scale); + InputSliderManager.setValue('scale', scale, false); + + subject.style.backgroundImage = 'url("' + this.src + '")'; + preview.style.borderImageSource = 'url("' + this.src + '")'; + + guidelines['slice-top'].setMax(this.height); + guidelines['slice-right'].setMax(this.width); + guidelines['slice-bottom'].setMax(this.height); + guidelines['slice-left'].setMax(this.width); + + if (imgState) + loadImageState(imgState); + }; + + var setScale = function setScale(value) { + scale = value; + var w = imgSource.width * scale / 100 | 0; + var h = imgSource.height * scale / 100 | 0; + subject.style.width = w + 'px'; + subject.style.height = h + 'px'; + + for (var i = 0; i < positions.length; i++) + guidelines['slice-' + positions[i]].updateGuidelinePos(); + }; + + var getScale = function getScale() { + return scale/100; + }; + + var toggleGallery = function toggleGallery() { + var gallery = getElemById('image-gallery'); + var button = getElemById('toggle-gallery'); + var state = 1; + button.addEventListener('click', function() { + state = 1 ^ state; + if (state === 0) { + gallery.setAttribute('data-collapsed', 'true'); + button.setAttribute('data-action', 'show'); + } + else { + gallery.removeAttribute('data-collapsed'); + button.setAttribute('data-action', 'hide'); + } + }); + }; + + var init = function init() { + var gallery = getElemById('image-gallery'); + var browse = getElemById('load-image'); + var remote = getElemById('remote-url'); + var load_remote = getElemById('load-remote'); + + remote.addEventListener('change', function(){ + loadRemoteImage(this.value); + }); + + load_remote.addEventListener('click', function(){ + loadRemoteImage(remote.value); + }); + + browse.addEventListener('click', ImageReader.load); + gallery.addEventListener('click', pickImage); + imgSource.addEventListener('load', update); + + InputSliderManager.subscribe('scale', setScale); + InputSliderManager.setValue('scale', scale); + imgState = 'border1'; + loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png'); + toggleGallery(); + }; + + return { + init: init, + getScale : getScale, + loadRemoteImage: loadRemoteImage + }; + + })(); + + var GuideLine = function GuideLine(node) { + var topic = node.getAttribute('data-topic'); + var axis = node.getAttribute('data-axis'); + + this.node = node; + this.topic = topic; + this.axis = axis; + this.info = topic.split('-')[1]; + + this.position = 0; + this.value = 0; + this.unit = 0; + this.max = 0; + this.pos = positions.indexOf(this.info); + + guidelines[topic] = this; + + var relative_container = document.createElement('div'); + var tooltip = document.createElement('div'); + var tooltip2 = document.createElement('div'); + + tooltip.className = 'tooltip'; + tooltip.setAttribute('data-info', this.info); + + tooltip2.className = 'tooltip2'; + tooltip2.textContent = this.info; + tooltip2.setAttribute('data-info', this.info); + + this.tooltip = tooltip; + + relative_container.appendChild(tooltip); + relative_container.appendChild(tooltip2); + node.appendChild(relative_container); + + var startX = 0; + var startY = 0; + var start = 0; + + var startDrag = function startDrag(e) { + startX = e.clientX; + startY = e.clientY; + start = guidelines[topic].position; + document.body.setAttribute('data-move', axis); + relative_container.setAttribute('data-active', ''); + node.setAttribute('data-active', ''); + + document.addEventListener('mousemove', updateGuideline); + document.addEventListener('mouseup', endDrag); + }; + + var endDrag = function endDrag() { + document.body.removeAttribute('data-move'); + relative_container.removeAttribute('data-active'); + node.removeAttribute('data-active'); + + document.removeEventListener('mousemove', updateGuideline); + }; + + var updateGuideline = function updateGuideline(e) { + var value; + if (topic === 'slice-top') + value = e.clientY - startY + start; + + if (topic === 'slice-right') + value = startX - e.clientX + start; + + if (topic === 'slice-bottom') + value = startY - e.clientY + start; + + if (topic === 'slice-left') + value = e.clientX - startX + start; + + if (this.unit === 0) + InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0); + else { + InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0); + } + + }.bind(this); + + node.addEventListener("mousedown", startDrag); + + InputSliderManager.subscribe(topic, this.setPosition.bind(this)); + InputSliderManager.setValue(topic, this.position); + }; + + + GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() { + if (this.unit === 0) + this.position = this.value * ImageControl.getScale() | 0; + else + this.position = this.value * this.max * ImageControl.getScale() / 100 | 0; + + this.node.style[this.info] = this.position + 'px'; + }; + + GuideLine.prototype.setPosition = function setPosition(value) { + this.value = value; + this.tooltip.textContent = value; + this.updateGuidelinePos(); + Tool.setBorderSlice(this.pos, value); + }; + + GuideLine.prototype.setMax = function setMax(max) { + this.max = max; + this.updateLimit(); + }; + + GuideLine.prototype.updateLimit = function updateLimit() { + if (this.unit === 1) + InputSliderManager.setMax(this.topic, 100); + else + InputSliderManager.setMax(this.topic, this.max); + }; + + GuideLine.prototype.setUnit = function setUnit(type) { + if (type === '%') this.unit = 1; + if (type === '') this.unit = 0; + this.updateLimit(); + }; + + /* + * Unit panel + */ + var UnitPanel = (function UnitPanel () { + + var panel; + var title; + var precision; + var step; + var unit_topic = null; // settings are made for this topic + var step_option = [1, 0.1, 0.01]; + + var updatePrecision = function updatePrecision(value) { + InputSliderManager.setPrecision('unit-step', value); + InputSliderManager.setStep('unit-step', step_option[value]); + InputSliderManager.setMin('unit-step', step_option[value]); + + if (unit_topic) + InputSliderManager.setPrecision(unit_topic, value); + }; + + var updateUnitSettings = function updateUnitSettings(value) { + if (unit_topic) + InputSliderManager.setStep(unit_topic, value); + }; + + var show = function show(e) { + var topic = e.target.getAttribute('data-topic'); + var precision = InputSliderManager.getPrecision(topic); + var step = InputSliderManager.getStep(topic); + + unit_topic = topic; + title.textContent = topic; + + panel.setAttribute('data-active', 'true'); + panel.style.top = e.target.offsetTop - 40 + 'px'; + panel.style.left = e.target.offsetLeft + 30 + 'px'; + + InputSliderManager.setValue('unit-precision', precision); + InputSliderManager.setValue('unit-step', step); + }; + + var init = function init() { + panel = document.createElement('div'); + title = document.createElement('div'); + var close = document.createElement('div'); + + step = InputSliderManager.createSlider('unit-step', 'step'); + precision = InputSliderManager.createSlider('unit-precision', 'precision'); + + InputSliderManager.setStep('unit-precision', 1); + InputSliderManager.setMax('unit-precision', 2); + InputSliderManager.setValue('unit-precision', 2); + InputSliderManager.setSensivity('unit-precision', 20); + + InputSliderManager.setValue('unit-step', 1); + InputSliderManager.setStep('unit-step', 0.01); + InputSliderManager.setPrecision('unit-step', 2); + + InputSliderManager.subscribe('unit-precision', updatePrecision); + InputSliderManager.subscribe('unit-step', updateUnitSettings); + + close.addEventListener('click', function () { + panel.setAttribute('data-active', 'false'); + }); + + title.textContent = 'Properties'; + title.className = 'title'; + close.className = 'close'; + panel.id = 'unit-settings'; + panel.setAttribute('data-active', 'false'); + panel.appendChild(title); + panel.appendChild(precision); + panel.appendChild(step); + panel.appendChild(close); + document.body.appendChild(panel); + }; + + return { + init : init, + show : show + }; + + })(); + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview_area; + var dropdown_unit_options = [ + { '' : '--', '%' : '%'}, + { 'px' : 'px', '%' : '%', 'em' : 'em'}, + { 'px' : 'px', 'em' : 'em'}, + ]; + + var border_slice = []; + var border_width = []; + var border_outset = []; + + var border_slice_values = []; + var border_width_values = []; + var border_outset_values = []; + + var border_slice_units = ['', '', '', '']; + var border_width_units = ['px', 'px', 'px', 'px']; + var border_outset_units = ['px', 'px', 'px', 'px']; + + var border_fill = false; + var border_repeat = ['round', 'round']; + var CSS_code = { + 'source' : null, + 'slice' : null, + 'width' : null, + 'outset' : null, + 'repeat' : null + }; + + var setBorderSlice = function setBorderSlice(positionID, value) { + border_slice[positionID] = value + border_slice_units[positionID]; + updateBorderSlice(); + }; + + var updateBorderSlice = function updateBorderSlice() { + var value = border_slice.join(' '); + if (border_fill === true) + value += ' fill'; + + preview.style.borderImageSlice = value; + setOutputCSS('slice', value); + }; + + var setBorderFill = function setBorderFill(value) { + border_fill = value; + var bimgslice = border_slice.join(' ');; + if (value === true) + bimgslice += ' fill'; + + preview.style.borderImageSlice = bimgslice; + }; + + var updateBorderWidth = function updateBorderWidth() { + var value = border_width.join(' '); + preview.style.borderImageWidth = value; + setOutputCSS('width', value); + }; + + var updateBorderOutset = function updateBorderOutset() { + var value = border_outset.join(' '); + preview.style.borderImageOutset = border_outset.join(' '); + setOutputCSS('outset', value); + }; + + var setBorderRepeat = function setBorderRepeat(obj) { + border_repeat[obj.value] = obj.name; + var value = border_repeat.join(' '); + preview.style.borderImageRepeat = value; + setOutputCSS('repeat', value); + }; + + var setOutputCSS = function setOutputCSS(topic, value) { + CSS_code[topic].textContent = value + ';'; + }; + + var setPreviewFontSize = function setPreviewFontSize(value) { + preview.style.fontSize = value + 'px'; + }; + + var setPreviewWidth = function setPreviewWidth(value) { + preview.style.width = value + 'px'; + }; + + var setPreviewHeight = function setPreviewHeight(value) { + preview.style.height = value + 'px'; + }; + + var setPreviewAreaHeight = function setPreviewAreaHeight(value) { + preview_area.style.height = value + 'px'; + }; + + var updateDragOption = function updateDragOption(value) { + if (value === true) + subject.setAttribute('data-draggable', 'true'); + else + subject.removeAttribute('data-draggable'); + }; + + var createProperty = function createProperty(topic, labelID, optionsID) { + + var slider = InputSliderManager.createSlider(topic, positions[labelID]); + var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]); + + InputSliderManager.setSensivity(topic, 3); + InputSliderManager.setPrecision(topic, 1); + + var property = document.createElement('div'); + var config = document.createElement('div'); + + property.className = 'property'; + config.className = 'config'; + config.setAttribute('data-topic', topic); + config.addEventListener('click', UnitPanel.show); + + property.appendChild(slider); + property.appendChild(dropdown); + property.appendChild(config); + + return property; + }; + + var initBorderSliceControls = function initBorderSliceControls() { + var container = getElemById('border-slice-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_slice_values[id] = value; + border_slice[id] = value + border_slice_units[id]; + updateBorderSlice(); + }); + + DropDownManager.subscribe(topic, function(obj) { + guidelines[topic].setUnit(obj.value); + border_slice_units[id] = obj.value; + border_slice[id] = border_slice_values[id] + obj.value; + updateBorderSlice(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'slice-' + positions[i]; + var property = createProperty(topic, i, 0); + listenForChanges(topic, i); + + container.appendChild(property); + } + + container.appendChild(container.children[1]); + + }; + + var initBorderWidthControls = function initBorderWidthControls() { + var container = getElemById('border-width-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_width_values[id] = value; + border_width[id] = value + border_width_units[id]; + updateBorderWidth(); + }); + + DropDownManager.subscribe(topic, function(obj) { + if (obj.value === '%') + InputSliderManager.setMax(topic, 100); + else + InputSliderManager.setMax(topic, 1000); + + border_width_units[id] = obj.value; + border_width[id] = border_width_values[id] + obj.value; + updateBorderWidth(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'width-' + positions[i]; + var property = createProperty(topic, i, 1); + InputSliderManager.setMax(topic, 1000); + listenForChanges(topic, i); + + container.appendChild(property); + } + }; + + var initBorderOutsetControls = function initBorderOutsetControls() { + + var container = getElemById('border-outset-control'); + + var listenForChanges = function listenForChanges(topic, id) { + InputSliderManager.subscribe(topic, function(value) { + border_outset_values[id] = value; + border_outset[id] = value + border_outset_units[id]; + updateBorderOutset(); + }); + + DropDownManager.subscribe(topic, function(obj) { + border_outset_units[id] = obj.value; + border_outset[id] = border_outset_values[id] + obj.value; + updateBorderOutset(); + }); + }; + + for (var i = 0; i < positions.length; i++) { + var topic = 'outset-' + positions[i]; + var property = createProperty(topic, i, 2); + InputSliderManager.setMax(topic, 1000); + listenForChanges(topic, i); + + container.appendChild(property); + } + }; + + var init = function init() { + + var gallery = + subject = getElemById('subject'); + preview = getElemById("preview"); + preview_area = getElemById("preview_section"); + + + CSS_code['source'] = getElemById("out-border-source"); + CSS_code['slice'] = getElemById("out-border-slice"); + CSS_code['width'] = getElemById("out-border-width"); + CSS_code['outset'] = getElemById("out-border-outset"); + CSS_code['repeat'] = getElemById("out-border-repeat"); + + initBorderSliceControls(); + initBorderWidthControls(); + initBorderOutsetControls(); + + var elem = document.querySelectorAll('.guideline'); + var size = elem.length; + for (var i = 0; i < size; i++) + new GuideLine(elem[i]); + + PreviewControl.init(); + + ButtonManager.subscribe('slice-fill',setBorderFill); + ButtonManager.subscribe('drag-subject', updateDragOption); + ButtonManager.setValue('drag-subject', false); + + DropDownManager.subscribe('image-repeat-X', setBorderRepeat); + DropDownManager.subscribe('image-repeat-Y', setBorderRepeat); + + InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight); + InputSliderManager.subscribe('preview-width', setPreviewWidth); + InputSliderManager.subscribe('preview-height', setPreviewHeight); + InputSliderManager.subscribe('font-size', setPreviewFontSize); + InputSliderManager.setValue('preview-width', 300); + InputSliderManager.setValue('preview-height', 200); + }; + + return { + init: init, + setOutputCSS: setOutputCSS, + setBorderSlice: setBorderSlice + }; + + })(); + + /** + * Init Tool + */ + var init = function init() { + InputSliderManager.init(); + DropDownManager.init(); + ButtonManager.init(); + UnitPanel.init(); + Tool.init(); + ImageControl.init(); + }; + + return { + init : init + }; + +})(); + +</pre> +</div> + +<div>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</div> diff --git a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..a5db192618 --- /dev/null +++ b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1601 @@ +--- +title: Border-radius 생성기 +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +tags: + - CSS + - CSS Borders + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +<p>이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.</p> + +<div style="display: none;"> +<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div id="container"> + <div class="group section"> + <div id="preview" class="col span_12"> + <div id="subject"> + <div id="top-left" class="radius-container" + data-X="left" data-Y="top"> + </div> + <div id="top-right" class="radius-container" + data-X="right" data-Y="top"> + </div> + <div id="bottom-right" class="radius-container" + data-X="right" data-Y="bottom"> + </div> + <div id="bottom-left" class="radius-container" + data-X="left" data-Y="bottom"> + </div> + + <div id="radius-ui-sliders"> + <div id="tlr" class="ui-input-slider" data-topic="top-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlw" class="ui-input-slider" data-topic="top-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlh" class="ui-input-slider" data-topic="top-left-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="trr" class="ui-input-slider" data-topic="top-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="trw" class="ui-input-slider" data-topic="top-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="trh" class="ui-input-slider" data-topic="top-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="brr" class="ui-input-slider" data-topic="bottom-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="blr" class="ui-input-slider" data-topic="bottom-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" + data-unit=" px" data-sensivity="2"></div> + </div> + </div> + </div> + </div> + <div id="controls" class="group section"> + + <div class="group section"> + <div id="dimensions"> + <div class="ui-input-slider" data-topic="width" data-info="width" + data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> + + <div class="ui-input-slider" data-topic="height" data-info="height" + data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> + </div> + + <div id="output"></div> + </div> + + <div class="group section"> + <div id="radius-lock"> + <div class="info"> rounded corner </div> + <div class="ui-checkbox" data-topic='top-left'></div> + <div class="ui-checkbox" data-topic='top-right'></div> + <div class="ui-checkbox" data-topic='bottom-right'></div> + <div class="ui-checkbox" data-topic='bottom-left'></div> + </div> + + <div id="unit-selection"> + <div class="info"> select border units </div> + </div> + </div> + + </div> +</div> +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* GRID OF TEN + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + + + + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + + +/* + * UI Component + */ + +.ui-input-slider-container { + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider-container * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * UI Component + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 3px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); + background-color: #379B4A; +} + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/******************************************************************************/ +/******************************************************************************/ +/* + * Preview Area + */ + +#preview { + height: 500px; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + overflow: hidden; + position: relative; +} + +#preview .content { + width: 100%; + height: 100%; + display: block; +} + +#preview input { + color: #333; + border: 1px solid #CCC; + border-radius: 3px; +} + +#subject { + width: 400px; + height: 150px; + margin: 0 auto; + border: 3px solid #C60; + background: #FFF; + position: relative; +} + +.radius { + width: 50%; + height: 50%; + border: 1px solid #CCC; + display: none; + position: absolute; + z-index: 1; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.handle { + width: 16px; + height: 16px; + position: absolute; + z-index: 2; +} + +.handle-top-left { + top: -12px; + left: -12px; + cursor: se-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat; +} + +.handle-top-right { + top: -12px; + right: -12px; + cursor: sw-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat; +} + +.handle-bottom-right { + bottom: -12px; + right: -12px; + cursor: nw-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat; +} + +.handle-bottom-left { + bottom: -12px; + left: -12px; + cursor: ne-resize; + background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat; +} + + +.radius-container { + position: absolute; + display : block; + z-index: 1; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* TOP LEFT */ +#top-left { + top: 0; + left: 0; +} + +#top-left .radius { + border-top-left-radius: 100%; + top: 0; + left: 0; +} + +/* TOP RIGHT */ +#top-right { + top: 0; + right: 0; +} + +#top-right .radius { + border-top-right-radius: 100%; + top: 0; + right: 0; +} + +/* BOTTOM RIGHT */ +#bottom-right { + bottom: 0; + right: 0; +} + +#bottom-right .radius { + border-bottom-right-radius: 100%; + bottom: 0; + right: 0; +} + +/* BOTTOM lEFT */ +#bottom-left { + bottom: 0; + left: 0; +} + +#bottom-left .radius { + border-bottom-left-radius: 100%; + bottom: 0; +} + +/* INPUT SLIDERS */ + +#preview .ui-input-slider { + margin: 10px; + position: absolute; + z-index: 10; +} + +#radius-ui-sliders { + width: 100%; + height: 100%; + min-height: 75px; + min-width: 150px; + padding: 20px 50px; + top: -20px; + left: -50px; + position: relative; +} + +#tlr { + top: -30px; + left: -50px; + display: none; +} + +#tlw { + top: -30px; + left: 30px; +} + +#tlh { + top: 20px; + left: -50px; +} + +#trr { + top: -30px; + right: -50px; + display: none; +} + +#trw { + top: -30px; + right: 30px; +} + +#trh { + top: 20px; + right: -50px; +} + +#brr { + bottom: -30px; + right: -50px; + display: none; +} + +#brw { + bottom: -30px; + right: 30px; +} + +#brh { + bottom: 20px; + right: -50px; +} + +#blr { + bottom: -30px; + left: -50px; + display: none; +} + +#blw { + bottom: -30px; + left: 30px; +} + +#blh { + bottom: 20px; + left: -50px; +} + +#preview .ui-input-slider-left, #preview .ui-input-slider-right { + visibility: hidden; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-left { + visibility: visible; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-right { + visibility: visible; +} + +/* + * + */ + +#unit-selection { + width: 200px; + height: 75px; + margin: 30px 30px 0 0; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: right; +} + +#unit-selection .info { + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; +} + +#unit-selection .dropdown { + width: 50px; + height: 20px; + margin: 10px; + padding: 0; + border-radius: 3px; + position: absolute; + overflow: hidden; +} + +#unit-selection select { + width: 50px; + height: 20px; + marign: 0; + padding: 0 0 0 10px; + background: #555; + border: 1px solid #555; + border: none; + color: #FFF; + float: left; +} + +#unit-selection select option { + background: #FFF; + color: #333; +} + +#unit-selection select:hover { + cursor: pointer; +} + +#unit-selection .dropdown:before { + content: ""; + width: 18px; + height: 20px; + display: block; + background-color: #555; + background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png"); + background-position: center center; + background-repeat: no-repeat; + top: 0px; + right: 0px; + position: absolute; + z-index: 1; + pointer-events: none; +} + +#unit-selection .unit-top-left { + top: 0; + left: 0; + display: none; +} + +#unit-selection .unit-top-left-w { + top: -22px; + left: 30px; +} + +#unit-selection .unit-top-left-h { + top: 20px; + left: -37px; +} + +#unit-selection .unit-top-right { + top: 0; + right: 0; + display: none; +} + +#unit-selection .unit-top-right-w { + top: -22px; + right: 30px; +} + +#unit-selection .unit-top-right-h { + top: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-right { + bottom: 0; + right: 0; + display: none; +} + +#unit-selection .unit-bottom-right-w { + bottom: -22px; + right: 30px; +} + +#unit-selection .unit-bottom-right-h { + bottom: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-left { + bottom: 0; + left: 0; + display: none; +} + +#unit-selection .unit-bottom-left-w { + bottom: -22px; + left: 30px; +} + +#unit-selection .unit-bottom-left-h { + bottom: 20px; + left: -37px; +} + +/******************************************************************************/ +/******************************************************************************/ + + +#radius-lock { + width: 200px; + height: 75px; + margin: 30px 0 0 30px; + padding: 30px; + border: 3px solid #555; + border-radius: 10px; + position: relative; + float: left; +} + +#radius-lock .ui-checkbox { + color: #FFF; + position: absolute; +} + +#radius-lock .ui-checkbox > label { + height: 20px; + width: 34px; + padding: 0; +} + +#radius-lock .info { + height: 20%; + width: 100%; + line-height: 20%; + font-size: 20px; + text-align: center; + position: relative; + top: 40%; +} + +#radius-lock [data-topic="top-left"] { + top: 10px; + left: 10px; +} + +#radius-lock [data-topic="top-right"] { + top: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-right"] { + bottom: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-left"] { + bottom: 10px; + left: 10px; +} + +/** + * Controls + */ + +#dimensions { + width: 200px; + color: #444; + float:left; +} + +#dimensions input { + background: #555; + color: #FFF; + border: none; + border-radius: 3px; +} + +#output { + width: 500px; + padding: 10px 0; + margin: 10px 0; + color: #555; + text-align: center; + border: 1px dashed #999; + border-radius: 3px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; + + float: right; +} + + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"><code class="language-js">'use strict'; + + +/** + * UI-InputSliderManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseInt(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + subscribe(obj.topic, function(value) { + input.value = value + obj.unit; + }); + + return input; + } + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + document.addEventListener("mousemove", sliderMotion); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }); + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + } + + return slider; + } + + var InputSlider = function(node) { + var min = node.getAttribute('data-min') | 0; + var max = node.getAttribute('data-max') | 0; + var step = node.getAttribute('data-step') | 0; + var value = node.getAttribute('data-value') | 0; + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.topic = topic; + this.node = node; + this.unit = unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + node.className = 'ui-input-slider ui-input-slider-container'; + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + } + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + if (send_notify !== undefined && send_notify === false) { + slider.input.value = value + slider.unit; + return; + } + + notify.call(slider); + } + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + } + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + } + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + } + + var getNode = function getNode(topic) { + return sliders[topic].node; + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + } + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + getNode : getNode, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + } + + var getNode = function getNode(topic) { + return buttons[topic].node; + } + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + } + catch(error) { + console.log(error); + } + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + + +window.addEventListener("load", function() { + BorderRadius.init(); +}); + +var BorderRadius = (function BorderRadius() { + + function getElemById(id) { + return document.getElementById(id); + } + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener('mousedown', dragStart, false); + document.addEventListener('mouseup', dragEnd, false); + } + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener('mousemove', mouseDrag, false); + } + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + if (active === true) { + active = false; + document.removeEventListener('mousemove', mouseDrag, false); + } + } + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + } + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) + subscribers[i](deltaX, deltaY); + } + + return { + init : init, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + var subject; + var units = ['px', '%']; + var output = null; + + var UnitSelector = function UnitSelector(topic) { + + this.container = document.createElement("div"); + this.select = document.createElement("select"); + for (var i in units) { + var option = document.createElement("option"); + option.value = i; + option.textContent = units[i]; + this.select.appendChild(option); + } + + this.container.className = 'dropdown ' + 'unit-' + topic; + this.container.appendChild(this.select); + } + + UnitSelector.prototype.setValue = function setValue(value) { + this.salect.value = value; + } + + + var RadiusContainer = function RadiusContainer(node) { + var radius = document.createElement('div'); + var handle = document.createElement('div'); + var x = node.getAttribute('data-x'); + var y = node.getAttribute('data-y'); + var active = false; + + this.id = node.id; + this.node = node; + this.radius = radius; + this.handle = handle; + this.width = 100; + this.height = 50; + this.size = 0; + this.rounded = false; + + this.unitX = 0; + this.unitY = 0; + this.unitR = 0; + + this.maxW = 100; + this.maxH = 100; + this.maxR = 100; + + this.topic = y + '-' + x; + + var sliderW = InputSliderManager.getNode(this.topic + '-w'); + var sliderH = InputSliderManager.getNode(this.topic + '-h'); + var sliderR = InputSliderManager.getNode(this.topic); + + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.setUnitR(this.unitR); + + this.updateWidth(); + this.updateHeight(); + this.updateRadius(); + + if (x === 'left') this.resizeX = 1; + if (x === 'right') this.resizeX = -1; + if (y === 'top') this.resizeY = 1; + if (y === 'bottom') this.resizeY = -1; + + radius.className = 'radius'; + + var unit_selector = document.getElementById("unit-selection"); + var unitW = new UnitSelector(this.topic + '-w'); + var unitH = new UnitSelector(this.topic + '-h'); + var unitR = new UnitSelector(this.topic); + + unit_selector.appendChild(unitW.container); + unit_selector.appendChild(unitH.container); + unit_selector.appendChild(unitR.container); + node.appendChild(radius); + subject.appendChild(handle); + + unitW.select.addEventListener('change', function(e) { + this.setUnitX(e.target.value | 0); + }.bind(this)); + + unitH.select.addEventListener('change', function(e) { + this.setUnitY(e.target.value | 0); + }.bind(this)); + + unitR.select.addEventListener('change', function(e) { + this.setUnitR(e.target.value | 0); + }.bind(this)); + + if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left' + if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right'; + if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right'; + if (x === 'left' && y == 'bottom') handle.className = 'handle handle-bottom-left'; + + handle.addEventListener("mousedown", function(e) { + active = true; + this.radius.style.display = 'block'; + PreviewMouseTracking.subscribe(this.updateContainer.bind(this)); + }.bind(this)); + + document.addEventListener("mouseup", function(e) { + this.radius.style.display = 'none'; + if (active === true) + PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this)); + }.bind(this)); + + InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this)); + InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this)); + InputSliderManager.subscribe(this.topic, this.setRadius.bind(this)); + + ButtonManager.subscribe(this.topic, function(value) { + this.rounded = value; + if (value === true) { + unitW.container.style.display = 'none'; + unitH.container.style.display = 'none'; + unitR.container.style.display = 'block'; + sliderW.style.display = 'none'; + sliderH.style.display = 'none'; + sliderR.style.display = 'block'; + this.setUnitR(this.unitR); + this.updateRadius(); + } + + if (value === false) { + unitW.container.style.display = 'block'; + unitH.container.style.display = 'block'; + unitR.container.style.display = 'none'; + sliderW.style.display = 'block'; + sliderH.style.display = 'block'; + sliderR.style.display = 'none'; + this.setUnitX(this.unitX); + this.setUnitY(this.unitY); + this.updateWidth(); + this.updateHeight(); + } + + this.updateBorderRadius(); + + }.bind(this)); + + this.updateBorderRadius(); + } + + RadiusContainer.prototype.updateWidth = function updateWidth() { + this.node.style.width = this.width + units[this.unitX]; + var value = Math.round(this.width / 2); + InputSliderManager.setValue(this.topic + '-w', value, false); + } + + RadiusContainer.prototype.updateHeight = function updateHeight() { + this.node.style.height = this.height + units[this.unitY]; + var value = Math.round(this.height / 2); + InputSliderManager.setValue(this.topic + '-h', value, false); + } + + RadiusContainer.prototype.updateRadius = function updateRadius() { + var value = Math.round(this.size / 2); + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + InputSliderManager.setValue(this.topic, value, false); + } + + RadiusContainer.prototype.setWidth = function setWidth(value) { + this.radius.style.display = 'block'; + this.width = 2 * value; + this.node.style.width = this.width + units[this.unitX]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setHeight = function setHeight(value) { + this.radius.style.display = 'block'; + this.height = 2 * value; + this.node.style.height = this.height + units[this.unitY]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setRadius = function setRadius(value) { + this.radius.style.display = 'block'; + this.size = 2 * value; + this.node.style.width = this.size + units[this.unitR]; + this.node.style.height = this.size + units[this.unitR]; + this.updateBorderRadius(); + } + + RadiusContainer.prototype.setUnitX = function setUnitX(value) { + this.unitX = value; + if (this.unitX === 0) this.maxW = 2 * subject.clientWidth; + if (this.unitX === 1) this.maxW = 200; + InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]); + InputSliderManager.setMax(this.topic + '-w', this.maxW / 2); + } + + RadiusContainer.prototype.setUnitY = function setUnitY(value) { + this.unitY = value; + if (this.unitY === 0) this.maxH = 2 * subject.clientHeight; + if (this.unitY === 1) this.maxH = 200; + InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]); + InputSliderManager.setMax(this.topic + '-h', this.maxH / 2); + } + + RadiusContainer.prototype.setUnitR = function setUnitR(value) { + this.unitR = value; + + if (this.unitR === 0) + this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth); + + if (this.unitR === 1) + this.maxR = 200; + + InputSliderManager.setUnit(this.topic, units[this.unitR]); + InputSliderManager.setMax(this.topic, this.maxR / 2); + } + + RadiusContainer.prototype.updateUnits = function updateUnits(unit) { + if (this.rounded) { + this.setUnitR(this.unitR); + return; + } + + if (unit === 0) + this.setUnitX(this.unitX); + + if (unit === 1) + this.setUnitY(this.unitY); + } + + RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () { + + if (this.rounded === true) { + var unit = units[this.unitR]; + var value = Math.round(this.size / 2); + return value + unit; + } + + var unitX = units[this.unitX]; + var unitY = units[this.unitY]; + var valueX = Math.round(this.width / 2); + var valueY = Math.round(this.height / 2); + + if (valueX === valueY && this.unitX === this.unitY) + return valueX + unitX; + + return valueX + unitX + ' ' + valueY + unitY; + } + + RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () { + var radius = this.composeBorderRadius(); + var corner = 0; + + if (this.topic === 'top-left') { + subject.style.borderTopLeftRadius = radius; + corner = 0; + } + + if (this.topic === 'top-right') { + subject.style.borderTopRightRadius = radius; + corner = 1; + } + + if (this.topic === 'bottom-right') { + subject.style.borderBottomRightRadius = radius; + corner = 2; + } + + if (this.topic === 'bottom-left') { + subject.style.borderBottomLeftRadius = radius; + corner = 3; + } + + Tool.updateOutput(corner, radius); + } + + RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) { + + if (this.rounded === true) { + this.size += this.resizeX * deltaX + this.resizeY * deltaY; + if (this.size < 0) this.size = 0; + if (this.size > this.maxR) this.size = this.maxR; + this.updateRadius(); + this.updateBorderRadius(); + return; + } + + if (deltaX) { + this.width += this.resizeX * deltaX; + if (this.width < 0) this.width = 0; + if (this.width > this.maxW) this.width = this.maxW; + this.updateWidth(); + } + + if (deltaY) { + this.height += this.resizeY * deltaY; + if (this.height < 0) this.height = 0; + if (this.height > this.maxH) this.height = this.maxH; + this.updateHeight(); + } + + if (deltaX || deltaY) + this.updateBorderRadius(); + } + + + /** + * Tool Manager + */ + var Tool = (function Tool() { + var preview; + var preview_ui; + var radius_containers = []; + var border_width = 3; + var borders1 = [null, null, null, null]; + var borders2 = [0, 0, 0, 0]; + + var updateUIWidth = function updateUIWidth(value) { + var pwidth = subject.parentElement.clientWidth; + var left = (pwidth - value) / 2; + subject.style.width = value + "px"; + + for (var i = 0; i < 4; i++) + radius_containers[i].updateUnits(0); + } + + var updateUIHeight = function updateUIHeight(value) { + var pheight = subject.parentElement.clientHeight; + var top = (pheight - value) / 2; + subject.style.height = value + "px"; + subject.style.top = top - border_width + "px"; + + for (var i = 0; i < 4; i++) + radius_containers[i].updateUnits(1); + } + + var updatePreviewUIWidth = function updatePreviewUIWidth() { + var p = subject.parentElement.clientWidth; + var v = preview_ui.clientWidth; + console.log(p, v, (p - v ) / 2); + preview_ui.style.left = (p - v) / 2 + "px" ; + } + + var updatePreviewUIHeight = function updatePreviewUIHeight() { + var p = subject.parentElement.clientHeight; + var v = preview_ui.clientHeight; + console.log(p, v, (p - v ) / 2); + preview_ui.style.top = (p - v) / 2 + "px" ; + } + + var updateOutput = function updateOutput(corner, radius) { + var values = radius.split(" "); + + borders1[corner] = values[0]; + borders2[corner] = values[0]; + + if (values.length === 2) + borders2[corner] = values[1]; + + var border_1_value = borders1.join(" "); + var border_2_value = borders2.join(" "); + var border_radius = 'border-radius: ' + border_1_value; + + if (border_2_value !== border_1_value) + border_radius += ' / ' + border_2_value; + + border_radius += ';'; + output.textContent = border_radius; + } + + var init = function init() { + preview = getElemById("preview"); + subject = getElemById("subject"); + output = getElemById("output"); + preview_ui = getElemById("radius-ui-sliders"); + + var elem = document.querySelectorAll('.radius-container'); + var size = elem.length; + for (var i = 0; i < size; i++) + radius_containers[i] = new RadiusContainer(elem[i]); + + InputSliderManager.subscribe("width", updateUIWidth); + InputSliderManager.subscribe("height", updateUIHeight); + + InputSliderManager.setValue("width", subject.clientWidth); + InputSliderManager.setValue("height", subject.clientHeight); + } + + return { + init : init, + updateOutput : updateOutput + } + + })(); + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + InputSliderManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + } + + return { + init : init + } + +})(); + + +</code></pre> +</div> + +<div>{{ EmbedLiveSample('border-radius-generator', 700, 900) }}</div> diff --git a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..00b22833fb --- /dev/null +++ b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2881 @@ +--- +title: Box-shadow 생성기 +slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +tags: + - CSS + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +<p>이 도구를 사용해 CSS {{cssxref("box-shadow")}} 효과를 생성할 수 있습니다.</p> + +<div style="display: none;"> +<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div id="container"> + <div class="group section"> + <div id="layer_manager"> + <div class="group section"> + <div class="button" data-type="add"> </div> + <div class="button" data-type="move-up"> </div> + <div class="button" data-type="move-down"> </div> + </div> + <div id="stack_container"></div> + </div> + + <div id="preview_zone"> + <div id="layer_menu" class="col span_12"> + <div class="button" id="element" data-type="subject" data-title="element"> element </div> + <div class="button" id="before" data-type="subject" data-title=":before"> + :before + <span class="delete" data-type="disable"></span> + </div> + <div class="button" id="after" data-type="subject" data-title=":after"> + :after + <span class="delete" data-type="disable"></span> + </div> + <div class="ui-checkbox" data-topic='before' data-label=":before"></div> + <div class="ui-checkbox" data-topic='after' data-label=":after"></div> + </div> + + <div id="preview"> + <div id="obj-element"> + <div class="content"> </div> + <div id="obj-before"> </div> + <div id="obj-after"> </div> + </div> + </div> + </div> + </div> + + <div id="controls" class="group section"> + <div class="wrap-left"> + <div class="colorpicker category"> + <div class="title"> </div> + <div id="colorpicker" class="group"> + <div id="gradient" class="gradient"> + <div id="gradient_picker"> </div> + </div> + <div id="hue" data-topic="hue" class="hue"> + <div id="hue_selector"> </div> + </div> + <div class="info"> + <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div> + <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div> + <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div> + </div> + <div class="alpha"> + <div id="alpha" data-topic="alpha"> + <div id="alpha_selector"> </div> + </div> + </div> + <div class="info"> + <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div> + <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div> + <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div> + </div> + <div class="preview block"> + <div id="output_color"> </div> + </div> + <div class="block info"> + <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> + <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> + </div> + </div> + </div> + </div> + + <div class="wrap-right"> + + <div id="shadow_properties" class="category"> + <div class="title"> Shadow properties </div> + <div class="group"> + <div class="group property"> + <div class="ui-slider-name"> inset </div> + <div class="ui-checkbox" data-topic='inset'></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Position x </div> + <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div> + <div class="ui-slider" data-topic="posX" + data-min="-500" data-max="500" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div> + <div class="ui-slider-input" data-topic="posX" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Position y </div> + <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div> + <div class="ui-slider" data-topic="posY" + data-min="-500" data-max="500" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div> + <div class="ui-slider-input" data-topic="posY" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Blur </div> + <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> + <div class="ui-slider" data-topic="blur" + data-min="0" data-max="200" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div> + <div class="ui-slider-input" data-topic="blur" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Spread </div> + <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div> + <div class="ui-slider" data-topic="spread" + data-min="-100" data-max="100" data-step="1" data-value="50"> + </div> + <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div> + <div class="ui-slider-input" data-topic="spread" data-unit="px"></div> + </div> + </div> + </div> + + <div id="element_properties" class="category"> + <div class="title"> Class element properties </div> + <div class="group"> + <div class="group property"> + <div class="ui-slider-name"> border </div> + <div class="ui-checkbox" data-topic='border-state' data-state="true"></div> + </div> + <div id="z-index" class="slidergroup"> + <div class="ui-slider-name"> z-index </div> + <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> + <div class="ui-slider" data-topic="z-index" + data-min="-10" data-max="10" data-step="1"></div> + <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div> + <div class="ui-slider-input" data-topic="z-index"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> top </div> + <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div> + <div class="ui-slider" data-topic="top" + data-min="-500" data-max="500" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div> + <div class="ui-slider-input" data-topic="top" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> left </div> + <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div> + <div class="ui-slider" data-topic="left" + data-min="-300" data-max="700" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> + <div class="ui-slider-input" data-topic="left" data-unit="px"></div> + </div> + <div id="transform_rotate" class="slidergroup"> + <div class="ui-slider-name"> Rotate </div> + <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> + <div class="ui-slider" data-topic="rotate" + data-min="-360" data-max="360" data-step="1" data-value="0"> + </div> + <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> + <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Width </div> + <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> + <div class="ui-slider" data-topic="width" + data-min="0" data-max="1000" data-step="1" data-value="200"> + </div> + <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> + <div class="ui-slider-input" data-topic="width" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Height </div> + <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div> + <div class="ui-slider" data-topic="height" + data-min="0" data-max="400" data-step="1" data-value="200"> + </div> + <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> + <div class="ui-slider-input" data-topic="height" data-unit="px"></div> + </div> + </div> + </div> + + <div id="output" class="category"> + <div id="menu" class="menu"></div> + <div class="title"> CSS Code </div> + <div class="group" style="border-top-left-radius: 0;"> + <div class="output" data-topic="element" data-name="element" + data-prop="width height background-color position=[relative] box-shadow"> + </div> + <div class="output" data-topic="before" data-name="element:before" + data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> + </div> + <div class="output" data-topic="after" data-name="element:after" + data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> + </div> + </div> + </div> + </div> + </div> +</div> +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* GRID OF TWELVE + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + +/* + * UI Slider + */ + +.slidergroup { + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.slidergroup * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Slider */ + +.ui-slider { + height: 10px; + width: 200px; + margin: 4px 10px; + display: block; + border: 1px solid #999; + border-radius: 3px; + background: #EEE; +} + +.ui-slider:hover { + cursor: pointer; +} + +.ui-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-slider-pointer { + width: 13px; + height: 13px; + background-color: #EEE; + border: 1px solid #2C9FC9; + border-radius: 3px; + position: relative; + top: -3px; + left: 0%; +} + +.ui-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 3px; + color: #FFF; + font-weight: bold; + text-align: center; +} + +.ui-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +.ui-slider-input > input { + margin: 0 10px; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* + * UI Button + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 3px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); + background-color: #379B4A; +} + +/* + * BOX SHADOW GENERATOR TOOL + */ + +body { + max-width: 1000px; + height: 800px; + margin: 20px auto 0; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +#container { + width: 100%; + padding: 2px; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* container with shadows stacks */ +#stack_container { + height: 400px; + overflow: hidden; + position: relative; + border: 1px solid #CCC; + border-radius: 3px; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#stack_container .container { + height: 100%; + width: 100%; + position: absolute; + left: 100%; + transition-property: left; + transition-duration: 0.5s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +#stack_container .title { + text-align: center; + font-weight: bold; + line-height: 2em; + border-bottom: 1px solid #43A6E1; + color: #666; +} + + +/* + * Stack of Layers for shadow + */ + +#layer_manager { + width: 17%; + background-color: #FEFEFE; + margin: 0 1% 0 0; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + float: left; +} + + +#layer_manager .button { + width: 30%; + height: 25px; + margin:0 0 10px; + color: #333; + background-color: #EEE; + text-align: center; + font-size: 0.75em; + line-height: 1.5em; + border: 1px solid #CCC; + border-radius: 3px; + + display: block; + background-position: center center; + background-repeat: no-repeat; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + float: left; +} + +#layer_manager .button:hover { + background-color: #3380C4; + border: 1px solid #3380C4; + cursor: pointer; +} + +#layer_manager [data-type='add'] { + background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); +} + +#layer_manager [data-type='add']:hover { + background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); +} + +#layer_manager [data-type='move-up'] { + background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); + margin-left: 5%; + margin-right: 5%; +} + +#layer_manager [data-type='move-up']:hover { + background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png"); +} + +#layer_manager [data-type='move-down'] { + background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png"); +} + +#layer_manager [data-type='move-down']:hover { + background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png"); +} + +/* shadows classes */ + +#layer_manager .node { + width: 100%; + margin: 5px 0; + padding: 5px; + text-align: center; + background-color: #EEE; + border: 1px solid #DDD; + font-size: 0.75em; + line-height: 1.5em; + color: #333; + border-radius: 3px; + + position: relative; + display: block; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_manager .node:hover { + color: #FFF; + background-color: #3380C4; + cursor: pointer; +} + +/* active element styling */ + +#layer_manager [data-active='layer'] { + color: #FFF; + border: none; + background-color: #379B4A; +} + +#layer_manager [data-active='subject'] { + color: #FFF; + background-color: #467FC9; +} + +/* delete button */ + +#layer_manager .delete { + width: 1.5em; + height: 100%; + float: right; + border-radius: 3px; + background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); + background-position: center center; + background-repeat: no-repeat; + position: absolute; + top: 0; + right: 10px; + display: none; +} + +#layer_manager .delete:hover { + background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); +} + +#layer_manager .node:hover .delete { + display: block; +} + + +#layer_manager .stack { + padding: 0 5px; + max-height: 90%; + overflow: auto; + overflow-x: hidden; +} + + +/* + * Layer Menu + */ + +#layer_menu { + margin: 0 0 10px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_menu .button { + width: 100px; + margin: 0 5px 0 0; + padding: 2.5px; + color: #333; + background-color: #EEE; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + font-size: 0.75em; + line-height: 1.5em; + + position: relative; + display: block; + float: left; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_menu .button:hover { + color: #FFF; + background-color: #3380C4; + border: 1px solid #3380C4; + cursor: pointer; +} + +#layer_menu .delete { + width: 1.5em; + height: 100%; + float: right; + border-radius: 3px; + background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); + background-position: center center; + background-repeat: no-repeat; + position: absolute; + top: 0; + right: 5px; + display: none; +} + +#layer_menu .delete:hover { + background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); +} + +#layer_menu .button:hover .delete { + display: block; +} + + +/* + * active element styling + */ + +#layer_menu [data-active='subject'] { + color: #FFF; + background-color: #379B4A; + border: 1px solid #379B4A; +} + + +/* Checkbox */ + +#layer_menu .ui-checkbox > label { + height: 15px; + line-height: 17px; + font-weight: normal; + width: 46px; + margin: 0 5px 0 0; +} + +#layer_menu .ui-checkbox > input:checked + label { + display: none; +} + + +/******************************************************************************/ +/******************************************************************************/ +/* + * Preview Area + */ + +#preview_zone { + width: 82%; + float: left; + +} + + +#preview { + width: 100%; + height: 400px; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + cursor: move; + float: left; +} + +#preview .content { + width: 100%; + height: 100%; + display: block; +} + +#obj-element { + width: 300px; + height: 100px; + border: 1px solid #CCC; + background: #FFF; + position: relative; +} + + +#obj-before { + height: 100%; + width: 100%; + background: #999; + border: 1px solid #CCC; + text-align: left; + display : block; + position: absolute; + z-index: -1; +} + +#obj-after { + height: 100%; + width: 100%; + background: #DDD; + border: 1px solid #CCC; + text-align: right; + display : block; + position: absolute; + z-index: -1; +} + + +/******************************************************************************/ +/******************************************************************************/ + +/** + * Controls + */ + +.wrap-left { + float: left; + overflow: hidden; +} + +.wrap-right { + float: right; + overflow: hidden; +} + +.wrap-left > * { + float: left; +} + +.wrap-right > * { + float: right; +} + +@media (min-width: 960px) { + + .wrap-left { + width: 45%; + } + + .wrap-right { + width: 55%; + } +} + + +@media (max-width: 959px) { + + .wrap-left { + width: 30%; + } + + .wrap-right { + width: 70%; + } +} + + +#controls { + color: #444; + margin: 10px 0 0 0; +} + + +#controls .category { + width: 500px; + margin: 0 auto 20px; + padding: 0; + +} + +#controls .category .title { + width: 100%; + height: 1.5em; + line-height: 1.5em; + color: #AAA; + text-align: right; +} + +#controls .category > .group { + border: 1px solid #CCC; + border-radius: 3px; +} + + +/** + * Color Picker + */ + +@media (min-width: 960px) { + #controls .colorpicker { + width: 420px; + } +} + +@media (max-width: 959px) { + #controls .colorpicker { + width: 210px; + } +} + +#colorpicker { + width: 100%; + margin: 0 auto; +} + +#colorpicker .gradient { + width: 200px; + height: 200px; + margin: 5px; + background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background-color: #F00; + float: left; +} + +#colorpicker .hue { + width: 200px; + height: 30px; + margin: 5px; + background: url("https://mdn.mozillademos.org/files/5701/hue.png"); + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + float: left; +} + +#colorpicker .alpha { + width: 200px; + height: 30px; + margin: 5px; + border: 1px solid #CCC; + float: left; + background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#colorpicker #alpha { + width: 100%; + height: 100%; + background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png"); + background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%); +} + +#colorpicker #gradient_picker { + width: 0.5em; + height: 0.5em; + border-radius: 0.4em; + border: 2px solid #CCC; + position: relative; + top: 20%; + left: 20%; +} + +#colorpicker #hue_selector, +#colorpicker #alpha_selector { + width: 3px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; + left: 0%; +} + +/* input HSV and RGB */ +#colorpicker .info { + width: 200px; + margin: 5px; + float: left; +} + +#colorpicker .info * { + float: left; +} + +#colorpicker .info input { + margin: 0; + text-align: center; + width: 30px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +#colorpicker .info span { + height: 20px; + width: 30px; + text-align: center; + line-height: 20px; + display: block; +} + +/* Preview color */ +#colorpicker .block { + width: 95px; + height: 54px; + float: left; + position: relative; +} + +#colorpicker .preview { + margin: 5px; + border: 1px solid #CCC; + background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#colorpicker .preview:before { + height: 100%; + width: 50%; + left: 50%; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +#colorpicker .preview > * { + width: 50%; + height: 100%; +} + +#colorpicker #output_color { + width: 100%; + height: 100%; + position: absolute; + z-index: 2; +} + +#colorpicker .block .input { + float: right; +} + +#colorpicker [data-topic="a"] > span { + width: 50px; +} + +#colorpicker [data-topic="hexa"] { + float: right; + margin: 10px 0 0 0; +} + +#colorpicker [data-topic="hexa"] > span { + display: none; +} + +#colorpicker [data-topic="hexa"] > input { + width: 85px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* + * UI Components + */ + +/* Property */ + +.property { + height: 20px; + margin: 10px 0; +} + +.property * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Slider */ + +#controls .ui-slider-name { + margin: 0 10px 0 0; +} + +/* + * Output code styling + */ + +#output { + position: relative; +} + +#output .menu { + max-width: 70%; + height: 20px; + position: absolute; + top: 2px; +} + +#output .button { + width: 90px; + height: 22px; + margin: 0 5px 0 0; + text-align: center; + line-height: 20px; + font-size: 14px; + color: #FFF; + background-color: #999; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + bottom: -5px; + float:left; +} + +#output .button:hover { + color: #FFF; + background-color: #666; + cursor: pointer; +} + +#output .menu [data-active="true"] { + color: #777; + background-color: #FFF; + border: 1px solid #CCC; + border-bottom: none; +} + +#output .menu [data-topic="before"] { + left: 100px; +} + +#output .menu [data-topic="after"] { + left: 200px; +} + +#output .output { + width: 480px; + margin: 10px; + padding: 10px; + overflow: hidden; + color: #555; + font-size: 14px; + border: 1px dashed #CCC; + border-radius: 3px; + display: none; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +#output .css-property { + width: 100%; + float: left; + white-space: pre; +} + +#output .name { + width: 35%; + float: left; +} + +#output .value { + width: 65%; + float: left; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"><code class="language-js"> + +'use strict'; + +/** + * UI-SlidersManager + */ + +var SliderManager = (function SliderManager() { + + var subscribers = {}; + var sliders = []; + + var Slider = function(node) { + var min = node.getAttribute('data-min') | 0; + var max = node.getAttribute('data-max') | 0; + var step = node.getAttribute('data-step') | 0; + var value = node.getAttribute('data-value') | 0; + var snap = node.getAttribute('data-snap'); + var topic = node.getAttribute('data-topic'); + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; + this.snap = snap === "true" ? true : false; + this.topic = topic; + this.node = node; + + var pointer = document.createElement('div'); + pointer.className = 'ui-slider-pointer'; + node.appendChild(pointer); + this.pointer = pointer; + + setMouseTracking(node, updateSlider.bind(this)); + + sliders[topic] = this; + setValue(topic, this.value); + } + + var setButtonComponent = function setButtonComponent(node) { + var type = node.getAttribute('data-type'); + var topic = node.getAttribute('data-topic'); + if (type === "sub") { + node.textContent = '-'; + node.addEventListener("click", function() { + decrement(topic); + }); + } + if (type === "add") { + node.textContent = '+'; + node.addEventListener("click", function() { + increment(topic); + }); + } + } + + var setInputComponent = function setInputComponent(node) { + var topic = node.getAttribute('data-topic'); + var unit_type = node.getAttribute('data-unit'); + + var input = document.createElement('input'); + var unit = document.createElement('span'); + unit.textContent = unit_type; + + input.setAttribute('type', 'text'); + node.appendChild(input); + node.appendChild(unit); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + setValue(topic, e.target.value | 0); + }); + + subscribe(topic, function(value) { + node.children[0].value = value; + }); + } + + var increment = function increment(topic) { + var slider = sliders[topic]; + if (slider === null || slider === undefined) + return; + + if (slider.value + slider.step <= slider.max) { + slider.value += slider.step; + setValue(slider.topic, slider.value) + notify.call(slider); + } + }; + + var decrement = function decrement(topic) { + var slider = sliders[topic]; + if (slider === null || slider === undefined) + return; + + if (slider.value - slider.step >= slider.min) { + slider.value -= slider.step; + setValue(topic, slider.value) + notify.call(slider); + } + } + + // this = Slider object + var updateSlider = function updateSlider(e) { + var node = this.node; + var pos = e.pageX - node.offsetLeft; + var width = node.clientWidth; + var delta = this.max - this.min; + var offset = this.pointer.clientWidth + 4; // border width * 2 + + if (pos < 0) pos = 0; + if (pos > width) pos = width; + + var value = pos * delta / width | 0; + var precision = value % this.step; + value = value - precision + this.min; + if (precision > this.step / 2) + value = value + this.step; + + if (this.snap) + pos = (value - this.min) * width / delta; + + this.pointer.style.left = pos - offset/2 + "px"; + this.value = value; + node.setAttribute('data-value', value); + notify.call(this); + } + + var setValue = function setValue(topic, value) { + var slider = sliders[topic]; + + if (value > slider.max || value < slider.min) + return; + + var delta = slider.max - slider.min; + var width = slider.node.clientWidth; + var offset = slider.pointer.clientWidth; + var pos = (value - slider.min) * width / delta; + slider.value = value; + slider.pointer.style.left = pos - offset / 2 + "px"; + slider.node.setAttribute('data-value', value); + notify.call(slider); + } + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener("mousedown", function(e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", callback); + }); + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + } + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll('.ui-slider-btn-set'); + size = elem.length; + for (var i = 0; i < size; i++) + setButtonComponent(elem[i]); + + elem = document.querySelectorAll('.ui-slider-input'); + size = elem.length; + for (var i = 0; i < size; i++) + setInputComponent(elem[i]); + + elem = document.querySelectorAll('.ui-slider'); + size = elem.length; + for (var i = 0; i < size; i++) + new Slider(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + } + + var getNode = function getNode(topic) { + return buttons[topic].node; + } + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + notify.call(buttons[topic]); + } + catch(error) { + console.log(error, topic, value); + } + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + + +window.addEventListener("load", function(){ + BoxShadow.init(); +}); + +var BoxShadow = (function BoxShadow() { + + function getElemById(id) { + return document.getElementById(id); + } + + /** + * RGBA Color class + */ + + function Color() { + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log("Typeof instance not Color"); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + } + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (red != undefined) + this.r = red | 0; + if (green != undefined) + this.g = green | 0; + if (blue != undefined) + this.b = blue | 0; + if (alpha != undefined) + this.a = alpha | 0; + } + + /** + * HSV/HSB (hue, saturation, value / brightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + */ + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.updateRGB(); + } + + Color.prototype.updateRGB = function updateRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision; + X = (X + m) * precision; + m = m * precision; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + } + + Color.prototype.updateHSV = function updateHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + } + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value) + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3"); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + } + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + } + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = "(" + this.r + ", " + this.g + ", " + this.b; + var a = ''; + var v = ''; + if (this.a !== 1) { + a = 'a'; + v = ', ' + this.a; + } + + var value = "rgb" + a + rgb + v + ")"; + return value; + } + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + } + + /** + * Shadow Object + */ + function Shadow() { + this.inset = false; + this.posX = 5; + this.posY = -5; + this.blur = 5; + this.spread = 0; + this.color = new Color(); + + var hue = (Math.random() * 360) | 0; + var saturation = (Math.random() * 75) | 0; + var value = (Math.random() * 50 + 50) | 0; + this.color.setHSV(hue, saturation, value, 1); + } + + Shadow.prototype.computeCSS = function computeCSS() { + var value = ""; + if (this.inset === true) + value += "inset "; + value += this.posX + "px "; + value += this.posY + "px "; + value += this.blur + "px "; + value += this.spread + "px "; + value += this.color.getColor(); + + return value; + } + + Shadow.prototype.toggleInset = function toggleInset(value) { + if (value !== undefined || typeof value === "boolean") + this.inset = value; + else + this.inset = this.inset === true ? false : true; + } + + Shadow.prototype.copy = function copy(obj) { + if(obj instanceof Shadow !== true) { + console.log("Typeof instance not Shadow"); + return; + } + + this.inset = obj.inset; + this.posX = obj.posX; + this.posY = obj.posY; + this.blur = obj.blur; + this.spread = obj.spread; + this.color.copy(obj.color); + } + + /** + * Color Picker + */ + var ColoPicker = (function ColoPicker() { + + var colorpicker; + var hue_area; + var gradient_area; + var alpha_area; + var gradient_picker; + var hue_selector; + var alpha_selector; + var pick_object; + var info_rgb; + var info_hsv; + var info_hexa; + var output_color; + var color = new Color(); + var subscribers = []; + + var updateColor = function updateColor(e) { + var x = e.pageX - gradient_area.offsetLeft; + var y = e.pageY - gradient_area.offsetTop; + + // width and height should be the same + var size = gradient_area.clientWidth; + + if (x > size) + x = size; + if (y > size) + y = size; + + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + color.setHSV(color.hue, saturation, value); + // should update just + // color pointer location + updateUI(); + notify("color", color); + } + + var updateHue = function updateHue(e) { + var x = e.pageX - hue_area.offsetLeft; + var width = hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + var hue = ((360 * x) / width) | 0; + if (hue === 360) hue = 359; + + color.setHSV(hue, color.saturation, color.value); + + // should update just + // hue pointer location + // picker area background + // alpha area background + updateUI(); + notify("color", color); + } + + var updateAlpha = function updateAlpha(e) { + var x = e.pageX - alpha_area.offsetLeft; + var width = alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + color.a = (x / width).toFixed(2); + + // should update just + // alpha pointer location + updateUI(); + notify("color", color); + } + + var setHueGfx = function setHueGfx(hue) { + var sat = color.saturation; + var val = color.value; + var alpha = color.a; + + color.setHSV(hue, 100, 100); + gradient_area.style.backgroundColor = color.getHexa(); + + color.a = 0; + var start = color.getRGBA(); + color.a = 1; + var end = color.getRGBA(); + color.a = alpha; + + var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; + alpha_area.style.background = gradient; + } + + var updateUI = function updateUI() { + var x, y; // coordinates + var size; // size of the area + var offset; // pointer graphic selector offset + + // Set color pointer location + size = gradient_area.clientWidth; + offset = gradient_picker.clientWidth / 2 + 2; + + x = (color.saturation * size / 100) | 0; + y = size - (color.value * size / 100) | 0; + + gradient_picker.style.left = x - offset + "px"; + gradient_picker.style.top = y - offset + "px"; + + // Set hue pointer location + size = hue_area.clientWidth; + offset = hue_selector.clientWidth/2; + x = (color.hue * size / 360 ) | 0; + hue_selector.style.left = x - offset + "px"; + + // Set alpha pointer location + size = alpha_area.clientWidth; + offset = alpha_selector.clientWidth/2; + x = (color.a * size) | 0; + alpha_selector.style.left = x - offset + "px"; + + // Set picker area background + var nc = new Color(); + nc.copy(color); + if (nc.hue === 360) nc.hue = 0; + nc.setHSV(nc.hue, 100, 100); + gradient_area.style.backgroundColor = nc.getHexa(); + + // Set alpha area background + nc.copy(color); + nc.a = 0; + var start = nc.getRGBA(); + nc.a = 1; + var end = nc.getRGBA(); + var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; + alpha_area.style.background = gradient; + + // Update color info + notify("color", color); + notify("hue", color.hue); + notify("saturation", color.saturation); + notify("value", color.value); + notify("r", color.r); + notify("g", color.g); + notify("b", color.b); + notify("a", color.a); + notify("hexa", color.getHexa()); + output_color.style.backgroundColor = color.getRGBA(); + } + + var setInputComponent = function setInputComponent(node) { + var topic = node.getAttribute('data-topic'); + var title = node.getAttribute('data-title'); + var action = node.getAttribute('data-action'); + title = title === null ? '' : title; + + var input = document.createElement('input'); + var info = document.createElement('span'); + info.textContent = title; + + input.setAttribute('type', 'text'); + input.setAttribute('data-action', 'set-' + action + '-' + topic); + node.appendChild(info); + node.appendChild(input); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + if (action === 'HSV') + inputChangeHSV(topic); + if (action === 'RGB') + inputChangeRGB(topic); + if (action === 'alpha') + inputChangeAlpha(topic); + if (action === 'hexa') + inputChangeHexa(topic); + }); + + subscribe(topic, function(value) { + node.children[1].value = value; + }); + } + + var inputChangeHSV = function actionHSV(topic) { + var selector = "[data-action='set-HSV-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseInt(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value < 360) + color[topic] = value; + + color.updateRGB(); + updateUI(); + } + + var inputChangeRGB = function inputChangeRGB(topic) { + var selector = "[data-action='set-RGB-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseInt(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 255) + color[topic] = value; + + color.updateHSV(); + updateUI(); + } + + var inputChangeAlpha = function inputChangeAlpha(topic) { + var selector = "[data-action='set-alpha-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseFloat(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + color.a = value.toFixed(2); + + updateUI(); + } + + var inputChangeHexa = function inputChangeHexa(topic) { + var selector = "[data-action='set-hexa-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = node.value; + color.setHexa(value); + color.updateHSV(); + updateUI(); + } + + var setMouseTracking = function setMouseTracking(elem, callback) { + + elem.addEventListener("mousedown", function(e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", callback); + }); + } + + /* + * Observer + */ + var setColor = function setColor(obj) { + if(obj instanceof Color !== true) { + console.log("Typeof instance not Color"); + return; + } + color.copy(obj); + updateUI(); + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(topic, value) { + for (var i in subscribers[topic]) + subscribers[topic][i](value); + } + + var init = function init() { + colorpicker = getElemById("colorpicker"); + hue_area = getElemById("hue"); + gradient_area = getElemById("gradient"); + alpha_area = getElemById("alpha"); + gradient_picker = getElemById("gradient_picker"); + hue_selector = getElemById("hue_selector"); + alpha_selector = getElemById("alpha_selector"); + output_color = getElemById("output_color"); + + var elem = document.querySelectorAll('#colorpicker .input'); + var size = elem.length; + for (var i = 0; i < size; i++) + setInputComponent(elem[i]); + + setMouseTracking(gradient_area, updateColor); + setMouseTracking(hue_area, updateHue); + setMouseTracking(alpha_area, updateAlpha); + + } + + return { + init : init, + setColor : setColor, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener('mousedown', dragStart, false); + document.addEventListener('mouseup', dragEnd, false); + } + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener('mousemove', mouseDrag, false); + } + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + if (active === true) { + active = false; + document.removeEventListener('mousemove', mouseDrag, false); + } + } + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + } + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) + subscribers[i](deltaX, deltaY); + } + + return { + init : init, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + /* + * Element Class + */ + var CssClass = function CssClass(id) { + this.left = 0; + this.top = 0; + this.rotate = 0; + this.width = 300; + this.height = 100; + this.display = true; + this.border = true; + this.zIndex = -1; + this.bgcolor = new Color(); + this.id = id; + this.node = getElemById('obj-' + id); + this.object = getElemById(id); + this.shadowID = null; + this.shadows = [] + this.render = []; + this.init(); + } + + CssClass.prototype.init = function init() { + this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; + this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; + + this.setTop(this.top); + this.setLeft(this.left); + this.setHeight(this.height); + this.setWidth(this.width); + this.bgcolor.setHSV(0, 0, 100); + this.updateBgColor(this.bgcolor); + } + + CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { + this.left += deltaX; + this.top += deltaY; + this.node.style.top = this.top + "px"; + this.node.style.left = this.left + "px"; + SliderManager.setValue("left", this.left); + SliderManager.setValue("top", this.top); + } + + CssClass.prototype.setLeft = function setLeft(value) { + this.left = value; + this.node.style.left = this.left + "px"; + OutputManager.updateProperty(this.id, 'left', this.left + 'px'); + } + + CssClass.prototype.setTop = function setTop(value) { + this.top = value; + this.node.style.top = this.top + 'px'; + OutputManager.updateProperty(this.id, 'top', this.top + 'px'); + } + + CssClass.prototype.setWidth = function setWidth(value) { + this.width = value; + this.node.style.width = this.width + 'px'; + OutputManager.updateProperty(this.id, 'width', this.width + 'px'); + } + + CssClass.prototype.setHeight = function setHeight(value) { + this.height = value; + this.node.style.height = this.height + 'px'; + OutputManager.updateProperty(this.id, 'height', this.height + 'px'); + } + + // Browser support + CssClass.prototype.setRotate = function setRotate(value) { + var cssvalue = 'rotate(' + value +'deg)'; + + this.node.style.transform = cssvalue; + this.node.style.webkitTransform = cssvalue; + this.node.style.msTransform = cssvalue; + + if (value !== 0) { + if (this.rotate === 0) { + OutputManager.toggleProperty(this.id, 'transform', true); + OutputManager.toggleProperty(this.id, '-webkit-transform', true); + OutputManager.toggleProperty(this.id, '-ms-transform', true); + } + } + else { + OutputManager.toggleProperty(this.id, 'transform', false); + OutputManager.toggleProperty(this.id, '-webkit-transform', false); + OutputManager.toggleProperty(this.id, '-ms-transform', false); + } + + OutputManager.updateProperty(this.id, 'transform', cssvalue); + OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue); + OutputManager.updateProperty(this.id, '-ms-transform', cssvalue); + this.rotate = value; + } + + CssClass.prototype.setzIndex = function setzIndex(value) { + this.node.style.zIndex = value; + OutputManager.updateProperty(this.id, 'z-index', value); + this.zIndex = value; + } + + CssClass.prototype.toggleDisplay = function toggleDisplay(value) { + if (typeof value !== "boolean" || this.display === value) + return; + + this.display = value; + var display = this.display === true ? "block" : "none"; + this.node.style.display = display; + this.object.style.display = display; + } + + CssClass.prototype.toggleBorder = function toggleBorder(value) { + if (typeof value !== "boolean" || this.border === value) + return; + + this.border = value; + var border = this.border === true ? "1px solid #CCC" : "none"; + this.node.style.border = border; + } + + CssClass.prototype.updateBgColor = function updateBgColor(color) { + this.bgcolor.copy(color); + this.node.style.backgroundColor = color.getColor(); + OutputManager.updateProperty(this.id, 'background-color', color.getColor()); + } + + CssClass.prototype.updateShadows = function updateShadows() { + if (this.render.length === 0) + OutputManager.toggleProperty(this.id, 'box-shadow', false); + if (this.render.length === 1) + OutputManager.toggleProperty(this.id, 'box-shadow', true); + + this.node.style.boxShadow = this.render.join(", "); + OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n")); + + } + + + /** + * Tool Manager + */ + var Tool = (function Tool() { + + var preview; + var classes = []; + var active = null; + var animate = false; + + /* + * Toll actions + */ + var addCssClass = function addCssClass(id) { + classes[id] = new CssClass(id); + } + + var setActiveClass = function setActiveClass(id) { + active = classes[id]; + active.shadowID = null; + ColoPicker.setColor(classes[id].bgcolor); + SliderManager.setValue("top", active.top); + SliderManager.setValue("left", active.left); + SliderManager.setValue("rotate", active.rotate); + SliderManager.setValue("z-index", active.zIndex); + SliderManager.setValue("width", active.width); + SliderManager.setValue("height", active.height); + ButtonManager.setValue("border-state", active.border); + active.updateShadows(); + } + + var disableClass = function disableClass(topic) { + classes[topic].toggleDisplay(false); + ButtonManager.setValue(topic, false); + } + + var addShadow = function addShadow(position) { + if (animate === true) + return -1; + + active.shadows.splice(position, 0, new Shadow()); + active.render.splice(position, 0, null); + } + + var swapShadow = function swapShadow(id1, id2) { + var x = active.shadows[id1]; + active.shadows[id1] = active.shadows[id2]; + active.shadows[id2] = x; + updateShadowCSS(id1); + updateShadowCSS(id2); + } + + var deleteShadow = function deleteShadow(position) { + active.shadows.splice(position, 1); + active.render.splice(position, 1); + active.updateShadows(); + } + + var setActiveShadow = function setActiveShadow(id, glow) { + active.shadowID = id; + ColoPicker.setColor(active.shadows[id].color); + ButtonManager.setValue("inset", active.shadows[id].inset); + SliderManager.setValue("blur", active.shadows[id].blur); + SliderManager.setValue("spread", active.shadows[id].spread); + SliderManager.setValue("posX", active.shadows[id].posX); + SliderManager.setValue("posY", active.shadows[id].posY); + if (glow === true) + addGlowEffect(id); + } + + var addGlowEffect = function addGlowEffect(id) { + if (animate === true) + return; + + animate = true; + var store = new Shadow(); + var shadow = active.shadows[id]; + + store.copy(shadow); + shadow.color.setRGBA(40, 125, 200, 1); + shadow.blur = 10; + shadow.spread = 10; + + active.node.style.transition = "box-shadow 0.2s"; + updateShadowCSS(id); + + setTimeout(function() { + shadow.copy(store); + updateShadowCSS(id); + setTimeout(function() { + active.node.style.removeProperty("transition"); + animate = false; + }, 100); + }, 200); + } + + var updateActivePos = function updateActivePos(deltaX, deltaY) { + if (active.shadowID === null) + active.updatePos(deltaX, deltaY); + else + updateShadowPos(deltaX, deltaY); + } + + /* + * Shadow properties + */ + var updateShadowCSS = function updateShadowCSS(id) { + active.render[id] = active.shadows[id].computeCSS(); + active.updateShadows(); + } + + var toggleShadowInset = function toggleShadowInset(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].toggleInset(value); + updateShadowCSS(active.shadowID); + } + + var updateShadowPos = function updateShadowPos(deltaX, deltaY) { + var shadow = active.shadows[active.shadowID]; + shadow.posX += deltaX; + shadow.posY += deltaY; + SliderManager.setValue("posX", shadow.posX); + SliderManager.setValue("posY", shadow.posY); + updateShadowCSS(active.shadowID); + } + + var setShadowPosX = function setShadowPosX(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].posX = value; + updateShadowCSS(active.shadowID); + } + + var setShadowPosY = function setShadowPosY(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].posY = value; + updateShadowCSS(active.shadowID); + } + + var setShadowBlur = function setShadowBlur(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].blur = value; + updateShadowCSS(active.shadowID); + } + + var setShadowSpread = function setShadowSpread(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].spread = value; + updateShadowCSS(active.shadowID); + } + + var updateShadowColor = function updateShadowColor(color) { + active.shadows[active.shadowID].color.copy(color); + updateShadowCSS(active.shadowID); + } + + /* + * Element Properties + */ + var updateColor = function updateColor(color) { + if (active.shadowID === null) + active.updateBgColor(color); + else + updateShadowColor(color); + } + + var init = function init() { + preview = getElemById("preview"); + + ColoPicker.subscribe("color", updateColor); + PreviewMouseTracking.subscribe(updateActivePos); + + // Affects shadows + ButtonManager.subscribe("inset", toggleShadowInset); + SliderManager.subscribe("posX", setShadowPosX); + SliderManager.subscribe("posY", setShadowPosY); + SliderManager.subscribe("blur", setShadowBlur); + SliderManager.subscribe("spread", setShadowSpread); + + // Affects element + SliderManager.subscribe("top", function(value){ + active.setTop(value); + }); + SliderManager.subscribe("left", function(value){ + active.setLeft(value); + }); + SliderManager.subscribe("rotate", function(value) { + if (active == classes["element"]) + return; + active.setRotate(value); + }); + + SliderManager.subscribe("z-index", function(value) { + if (active == classes["element"]) + return; + active.setzIndex(value); + }); + + SliderManager.subscribe("width", function(value) { + active.setWidth(value) + }); + + SliderManager.subscribe("height", function(value) { + active.setHeight(value) + }); + + // Actions + classes['before'].top = -30; + classes['before'].left = -30; + classes['after'].top = 30; + classes['after'].left = 30; + classes['before'].toggleDisplay(false); + classes['after'].toggleDisplay(false); + ButtonManager.setValue('before', false); + ButtonManager.setValue('after', false); + + ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before'])); + ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after'])); + + ButtonManager.subscribe("border-state", function(value) { + active.toggleBorder(value); + }); + + } + + return { + init : init, + addShadow : addShadow, + swapShadow : swapShadow, + addCssClass : addCssClass, + disableClass : disableClass, + deleteShadow : deleteShadow, + setActiveClass : setActiveClass, + setActiveShadow : setActiveShadow + } + + })(); + + /** + * Layer Manager + */ + var LayerManager = (function LayerManager() { + var stacks = []; + var active = { + node : null, + stack : null + } + var elements = {}; + + var mouseEvents = function mouseEvents(e) { + var node = e.target; + var type = node.getAttribute('data-type'); + + if (type === 'subject') + setActiveStack(stacks[node.id]); + + if (type === 'disable') { + Tool.disableClass(node.parentNode.id); + setActiveStack(stacks['element']); + } + + if (type === 'add') + active.stack.addLayer(); + + if (type === 'layer') + active.stack.setActiveLayer(node); + + if (type === 'delete') + active.stack.deleteLayer(node.parentNode); + + if (type === 'move-up') + active.stack.moveLayer(1); + + if (type === 'move-down') + active.stack.moveLayer(-1); + } + + var setActiveStack = function setActiveStack(stackObj) { + active.stack.hide(); + active.stack = stackObj; + active.stack.show(); + } + + /* + * Stack object + */ + var Stack = function Stack(subject) { + var S = document.createElement('div'); + var title = document.createElement('div'); + var stack = document.createElement('div'); + + S.className = 'container'; + stack.className = 'stack'; + title.className = 'title'; + title.textContent = subject.getAttribute('data-title'); + S.appendChild(title); + S.appendChild(stack); + + this.id = subject.id; + this.container = S; + this.stack = stack; + this.subject = subject; + this.order = []; + this.uid = 0; + this.count = 0; + this.layer = null; + this.layerID = 0; + } + + Stack.prototype.addLayer = function addLayer() { + if (Tool.addShadow(this.layerID) == -1) + return; + + var uid = this.getUID(); + var layer = this.createLayer(uid); + + if (this.layer === null && this.stack.children.length >= 1) + this.layer = this.stack.children[0]; + + this.stack.insertBefore(layer, this.layer); + this.order.splice(this.layerID, 0, uid); + this.count++; + this.setActiveLayer(layer); + } + + Stack.prototype.createLayer = function createLayer(uid) { + var layer = document.createElement('div'); + var del = document.createElement('span'); + + layer.className = 'node'; + layer.setAttribute('data-shid', uid); + layer.setAttribute('data-type', 'layer'); + layer.textContent = 'shadow ' + uid; + + del.className = 'delete'; + del.setAttribute('data-type', 'delete'); + + layer.appendChild(del); + return layer; + } + + Stack.prototype.getUID = function getUID() { + return this.uid++; + } + + // SOLVE IE BUG + Stack.prototype.moveLayer = function moveLayer(direction) { + if (this.count <= 1 || this.layer === null) + return; + if (direction === -1 && this.layerID === (this.count - 1) ) + return; + if (direction === 1 && this.layerID === 0 ) + return; + + if (direction === -1) { + var before = null; + Tool.swapShadow(this.layerID, this.layerID + 1); + this.swapOrder(this.layerID, this.layerID + 1); + this.layerID += 1; + + if (this.layerID + 1 !== this.count) + before = this.stack.children[this.layerID + 1]; + + this.stack.insertBefore(this.layer, before); + Tool.setActiveShadow(this.layerID, false); + } + + if (direction === 1) { + Tool.swapShadow(this.layerID, this.layerID - 1); + this.swapOrder(this.layerID, this.layerID - 1); + this.layerID -= 1; + this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); + Tool.setActiveShadow(this.layerID, false); + } + } + + Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { + var x = this.order[pos1]; + this.order[pos1] = this.order[pos2]; + this.order[pos2] = x; + } + + Stack.prototype.deleteLayer = function deleteLayer(node) { + var shadowID = node.getAttribute('data-shid') | 0; + var index = this.order.indexOf(shadowID); + this.stack.removeChild(this.stack.children[index]); + this.order.splice(index, 1); + this.count--; + + Tool.deleteShadow(index); + + if (index > this.layerID) + return; + + if (index == this.layerID) { + if (this.count >= 1) { + this.layerID = 0; + this.setActiveLayer(this.stack.children[0], true); + } + else { + this.layer = null; + this.show(); + } + } + + if (index < this.layerID) { + this.layerID--; + Tool.setActiveShadow(this.layerID, true); + } + + } + + Stack.prototype.setActiveLayer = function setActiveLayer(node) { + elements.shadow_properties.style.display = 'block'; + elements.element_properties.style.display = 'none'; + + if (this.layer) + this.layer.removeAttribute('data-active'); + + this.layer = node; + this.layer.setAttribute('data-active', 'layer'); + + var shadowID = node.getAttribute('data-shid') | 0; + this.layerID = this.order.indexOf(shadowID); + Tool.setActiveShadow(this.layerID, true); + } + + Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { + if (this.layer) + this.layer.removeAttribute('data-active'); + + this.layer = null; + this.layerID = 0; + } + + Stack.prototype.hide = function hide() { + this.unsetActiveLayer(); + this.subject.removeAttribute('data-active'); + var style = this.container.style; + style.left = '100%'; + style.zIndex = '0'; + } + + Stack.prototype.show = function show() { + elements.shadow_properties.style.display = 'none'; + elements.element_properties.style.display = 'block'; + + if (this.id === 'element') { + elements.zIndex.style.display = 'none'; + elements.transform_rotate.style.display = 'none'; + } + else { + elements.zIndex.style.display = 'block'; + elements.transform_rotate.style.display = 'block'; + } + + this.subject.setAttribute('data-active', 'subject'); + var style = this.container.style; + style.left = '0'; + style.zIndex = '10'; + Tool.setActiveClass(this.id); + } + + function init() { + + var elem, size; + var layerManager = getElemById("layer_manager"); + var layerMenu = getElemById("layer_menu"); + var container = getElemById("stack_container"); + + elements.shadow_properties = getElemById('shadow_properties'); + elements.element_properties = getElemById('element_properties'); + elements.transform_rotate = getElemById('transform_rotate'); + elements.zIndex = getElemById('z-index'); + + elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); + size = elem.length; + + for (var i = 0; i < size; i++) { + var S = new Stack(elem[i]); + stacks[elem[i].id] = S; + container.appendChild(S.container); + Tool.addCssClass(elem[i].id); + } + + active.stack = stacks['element']; + stacks['element'].show(); + + layerManager.addEventListener("click", mouseEvents); + layerMenu.addEventListener("click", mouseEvents); + + ButtonManager.subscribe("before", function(value) { + if (value === false && active.stack === stacks['before']) + setActiveStack(stacks['element']) + if (value === true && active.stack !== stacks['before']) + setActiveStack(stacks['before']) + }); + + ButtonManager.subscribe("after", function(value) { + if (value === false && active.stack === stacks['after']) + setActiveStack(stacks['element']) + if (value === true && active.stack !== stacks['after']) + setActiveStack(stacks['after']) + }); + } + + return { + init : init + } + })(); + + /* + * OutputManager + */ + var OutputManager = (function OutputManager() { + var classes = []; + var buttons = []; + var active = null; + var menu = null; + var button_offset = 0; + + var crateOutputNode = function(topic, property) { + + var prop = document.createElement('div'); + var name = document.createElement('span'); + var value = document.createElement('span'); + + var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); + + name.textContent = '\t' + pmatch[4]; + + if (pmatch[3] !== undefined) { + name.textContent = '\t' + pmatch[2]; + value.textContent = pmatch[3] + ';'; + } + + name.textContent += ': '; + prop.className = 'css-property'; + name.className = 'name'; + value.className = 'value'; + prop.appendChild(name); + prop.appendChild(value); + + classes[topic].node.appendChild(prop); + classes[topic].line[property] = prop; + classes[topic].prop[property] = value; + } + + var OutputClass = function OutputClass(node) { + var topic = node.getAttribute('data-topic'); + var prop = node.getAttribute('data-prop'); + var name = node.getAttribute('data-name'); + var properties = prop.split(' '); + + classes[topic] = {}; + classes[topic].node = node; + classes[topic].prop = []; + classes[topic].line = []; + classes[topic].button = new Button(topic); + + var open_decl = document.createElement('div'); + var end_decl = document.createElement('div'); + + open_decl.textContent = name + ' {'; + end_decl.textContent = '}'; + node.appendChild(open_decl); + + for (var i in properties) + crateOutputNode(topic, properties[i]); + + node.appendChild(end_decl); + } + + var Button = function Button(topic) { + var button = document.createElement('div'); + + button.className = 'button'; + button.textContent = topic; + button.style.left = button_offset + 'px'; + button_offset += 100; + + button.addEventListener("click", function() { + toggleDisplay(topic); + }) + + menu.appendChild(button); + return button; + } + + var toggleDisplay = function toggleDisplay(topic) { + active.button.removeAttribute('data-active'); + active.node.style.display = 'none'; + active = classes[topic]; + active.node.style.display = 'block'; + active.button.setAttribute('data-active', 'true'); + } + + var toggleButton = function toggleButton(topic, value) { + var display = (value === true) ? 'block' : 'none'; + classes[topic].button.style.display = display; + + if (value === true) + toggleDisplay(topic); + else + toggleDisplay('element'); + } + + var updateProperty = function updateProperty(topic, property, data) { + try { + classes[topic].prop[property].textContent = data + ';'; + } + catch(error) { + // console.log("ERROR undefined : ", topic, property, data); + } + } + + var toggleProperty = function toggleProperty(topic, property, value) { + var display = (value === true) ? 'block' : 'none'; + try { + classes[topic].line[property].style.display = display; + } + catch(error) { + // console.log("ERROR undefined : ",classes, topic, property, value); + } + } + + var init = function init() { + + menu = getElemById('menu'); + + var elem = document.querySelectorAll('#output .output'); + var size = elem.length; + for (var i = 0; i < size; i++) + OutputClass(elem[i]); + + active = classes['element']; + toggleDisplay('element'); + + ButtonManager.subscribe("before", function(value) { + toggleButton('before', value); + }); + + ButtonManager.subscribe("after", function(value) { + toggleButton('after', value); + }); + } + + return { + init : init, + updateProperty : updateProperty, + toggleProperty : toggleProperty + } + + })(); + + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + OutputManager.init(); + ColoPicker.init(); + SliderManager.init(); + LayerManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + } + + return { + init : init + } + +})(); + + +</code></pre> +</div> + +<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div> diff --git a/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html new file mode 100644 index 0000000000..73d1758964 --- /dev/null +++ b/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html @@ -0,0 +1,55 @@ +--- +title: 여러개의 배경 지정하기 +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_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> diff --git a/files/ko/web/css/css_backgrounds_and_borders/index.html b/files/ko/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..4fc6295885 --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,113 @@ +--- +title: CSS 배경 및 테두리 +slug: Web/CSS/CSS_Backgrounds_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong>CSS Backgrounds and Borders</strong> 모듈의 스타일은 배경에 색과 이미지를 채우거나, 기타 다른 방식으로 수정할 수 있습니다. 또한 테두리를 선이나 이미지로 장식할 수 있고, 직각 뿐 아니라 원형 테두리로 만들 수도 있습니다.</span> (추가로, 요소 박스를 그림자로 꾸밀 수도 있습니다.)</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("background-attachment")}}</li> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-position-x")}}</li> + <li>{{cssxref("background-position-y")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-bottom-left-radius")}}</li> + <li>{{cssxref("border-bottom-right-radius")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-collapse")}}</li> + <li>{{cssxref("border-color")}}</li> + <li>{{cssxref("border-image")}}</li> + <li>{{cssxref("border-image-outset")}}</li> + <li>{{cssxref("border-image-repeat")}}</li> + <li>{{cssxref("border-image-slice")}}</li> + <li>{{cssxref("border-image-source")}}</li> + <li>{{cssxref("border-image-width")}}</li> + <li>{{cssxref("border-left")}}</li> + <li>{{cssxref("border-left-color")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-radius")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-top-left-radius")}}</li> + <li>{{cssxref("border-top-right-radius")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("box-shadow")}}</li> +</ul> +</div> + +<h2 id="도구">도구</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">다수의 배경 사용하기</a></dt> + <dd>하나의 요소에 여러 배경을 적용하는 법을 배웁니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">배경 이미지 크기 조정하기</a></dt> + <dd>배경 이미지의 크기와 반복 여부를 설정하는 법을 배웁니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색 입히기</a></dt> + <dd>HTML 요소에 테두리를 비롯한 색상을 CSS로 적용하는 법을 배웁니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator">Border-image 생성기</a></dt> + <dd>테두리 이미지를 실시간으로 확인하며 만들 수 있는 도구입니다.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator">Border-radius 생성기</a></dt> + <dd>둥근 모서리를 실시간으로 확인하며 만들 수 있는 도구입니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator">Box-shadow 생성기</a></dt> + <dd>요소 뒤의 그림자를 실시간으로 확인하며 만들 수 있는 도구입니다.</dd> +</dl> + +<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('CSS3 Backgrounds') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td></td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html new file mode 100644 index 0000000000..f3f0d6529b --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html @@ -0,0 +1,137 @@ +--- +title: 배경 이미지 크기 조정하기 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate + - Reference + - Web +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary">CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. {{cssxref("background-size")}} 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다.</span> 이미지는 원하는대로 확대할 수도, 줄일 수도 있습니다.</p> + +<h2 id="큰_이미지_바둑판식_배열">큰 이미지 바둑판식 배열</h2> + +<p>2982x2808의 커다란 Firefox 이미지를 가지고 있다고 해보겠습니다. 모종의 이유(끔찍하게 잘못된 사이트 디자인 등)로 300x300 픽셀 요소에 저 이미지 4개를 바둑판식으로 보여야 합니다. <code>background-size</code>와 고정값 150 픽셀로 목표를 달성할 수 있습니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="tiledBackground"> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[3]">.tiledBackground { + background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); + background-size: 150px; + width: 300px; + height: 300px; + border: 2px solid; + color: pink; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("큰_이미지_바둑판식_배열", 340, 340)}}</p> + +<h2 id="Stretching_an_image" name="Stretching_an_image">이미지 늘리기</h2> + +<p>가로와 세로 크기를 각각 지정할 수도 있습니다.</p> + +<pre class="brush:css">background-size: 300px 150px; +</pre> + +<p>결과는 다음과 같습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p> + +<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">작은 이미지 키우기</h2> + +<p>반대로 배경 이미지를 키울 수도 있습니다. 다음 코드는 32x32 픽셀 파비콘을 300x300 픽셀로 늘린 결과입니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p> + +<pre class="brush: css; highlight:[5]">.square2 { + background-image: url(favicon.png); + background-size: 300px; + width: 300px; + height: 300px; + border: 2px solid; + text-shadow: white 0px 0px 2px; + font-size: 16px; +} +</pre> + +<p>보시다시피 CSS는 이미지 파일 이름을 제외하면 동일합니다.</p> + +<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">특별한 값: "contain" 과 "cover"</h2> + +<p>길이를 나타내는 {{cssxref("<length>")}} 값 대신, {{ cssxref("background-size") }} CSS 속성에 <code>contain</code> 과 <code>cover</code> 두개의 특별한 값을 지정할 수 있습니다. 살펴봅시다.</p> + +<h3 id="contain" name="contain"><code>contain</code></h3> + +<p><code>contain</code> 값을 지정하면, 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크게 조정됩니다. 이미지의 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="bgSizeContain"> + <p>Try resizing this element!</p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.bgSizeContain { + background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); + background-size: contain; + width: 160px; + height: 160px; + border: 2px solid; + color: pink; + resize: both; + overflow: scroll; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('contain', 250, 250) }}</p> + +<h3 id="cover" name="cover"><code>cover</code></h3> + +<p>값을 <code>cover</code> 로 지정하면 배경이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한 배경 이미지를 작게 조정합니다. 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><div class="bgSizeCover"> + <p>Try resizing this element!</p> +</div></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.bgSizeCover { + background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); + background-size: cover; + width: 160px; + height: 160px; + border: 2px solid; + color: pink; + resize: both; + overflow: scroll; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{ EmbedLiveSample('cover', 250, 250) }}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{ cssxref("background-size") }}</li> + <li>{{ cssxref("background") }}</li> + <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li> +</ul> diff --git a/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..1e0e3deeca --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,59 @@ +--- +title: 한 번에 여러 배경 사용하기 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong>여러 개의 배경</strong>을 한 번에 적용할 수도 있습니다. 첫 번째 배경이 맨 위에, 마지막 배경이 맨 밑에 위치하는 레이어 구조를 사용하게 됩니다.</span> 마지막 배경에만 배경색을 적용할 수 있습니다.</p> + +<p>여러 배경을 적용하는 건 쉽습니다.</p> + +<pre class="brush: css">.myclass { + background: background1, background 2, ..., backgroundN; +} +</pre> + +<p>{{ cssxref("background") }} <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>뿐 아니라 {{cssxref("background-color")}}를 제외한 단일 속성에서도 사용할 수 있습니다. 즉, {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}에는 목록을 값으로 지정할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 Firefox 로고, 거품, <a href="/ko/docs/Web/CSS/linear-gradient">선형 그레이디언트</a> 총 세 개의 배경을 사용합니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="multi-bg-example"></div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.multi-bg-example { + width: 100%; + height: 400px; + background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), + url(https://mdn.mozillademos.org/files/11307/bubbles.png), + linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); + background-repeat: no-repeat, + no-repeat, + no-repeat; + background-position: bottom right, + left, + right; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제','600','400')}}</p> + +<p>결과에서 볼 수 있듯, {{cssxref("background-image")}}에서 첫 번째로 지정한 Firefox 로고가 맨 위, 그 다음이 거품 그림이고 선형 그레이디언트는 모든 '이미지' 밑에 위치합니다. 하위 속성({{ cssxref("background-repeat") }}, {{ cssxref("background-position") }})의 각 값도 순서에 맞는 배경에 적용됩니다. 따라서 <code>background-repeat</code>의 첫 번째 값은 처음(맨 위) 배경에 적용되고, 두 번째와 두 번째 배경, 세 번째와 세 번째 배경...도 같습니다.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/CSS/Using_CSS_gradients" title="en/Using gradients">CSS 그레이디언트 사용하기</a></li> +</ul> diff --git a/files/ko/web/css/css_basic_user_interface/index.html b/files/ko/web/css/css_basic_user_interface/index.html new file mode 100644 index 0000000000..4baba659db --- /dev/null +++ b/files/ko/web/css/css_basic_user_interface/index.html @@ -0,0 +1,75 @@ +--- +title: CSS Basic User Interface +slug: Web/CSS/CSS_Basic_User_Interface +tags: + - CSS + - CSS Basic User Interface + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Basic User Interface</strong>는 사용자 인터페이스와 연관된 렌더링 및 기능의 동작 방식을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("box-sizing")}}</li> + <li>{{CSSxRef("cursor")}}</li> + <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li> + <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("outline")}}</li> + <li>{{CSSxRef("outline-width")}}</li> + <li>{{CSSxRef("outline-style")}}</li> + <li>{{CSSxRef("outline-color")}}</li> + <li>{{CSSxRef("outline-offset")}}</li> + <li>{{CSSxRef("resize")}}</li> + <li>{{CSSxRef("text-overflow")}}</li> + <li>{{CSSxRef("user-select")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property"><code>cursor</code> 속성값에 URL 사용하기</a></dt> + <dd>URL을 {{cssxref("cursor")}} 속성에 사용해 사용자 지정 커서를 생성하는 방법을 설명합니다.</dd> +</dl> + +<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("CSS4 Basic UI")}}</td> + <td>{{Spec2("CSS4 Basic UI")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS3 Basic UI")}}</td> + <td>{{Spec2("CSS3 Basic UI")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "ui.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_box_model/index.html b/files/ko/web/css/css_box_model/index.html new file mode 100644 index 0000000000..aac36b356a --- /dev/null +++ b/files/ko/web/css/css_box_model/index.html @@ -0,0 +1,113 @@ +--- +title: CSS Basic Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Basic Box Model</strong>은 각 요소에 대해 <a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a>에 따라 생성하고 배치하는 사각형 박스(안팎 여백 포함)를 위한 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<h4 id="박스_내_콘텐츠_흐름을_제어하는_속성">박스 내 콘텐츠 흐름을 제어하는 속성</h4> + +<div class="index"> +<ul> + <li>{{cssxref("overflow")}}</li> + <li>{{cssxref("overflow-x")}}</li> + <li>{{cssxref("overflow-y")}}</li> +</ul> +</div> + +<h4 id="박스_크기를_제어하는_속성">박스 크기를 제어하는 속성</h4> + +<div class="index"> +<ul> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("width")}}</li> + <li>{{cssxref("max-height")}}</li> + <li>{{cssxref("max-width")}}</li> + <li>{{cssxref("min-height")}}</li> + <li>{{cssxref("min-width")}}</li> +</ul> +</div> + +<h4 id="박스의_바깥_여백을_제어하는_속성">박스의 바깥 여백을 제어하는 속성</h4> + +<div class="index"> +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-trim")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h4 id="박스의_안쪽_여백을_제어하는_속성">박스의 안쪽 여백을 제어하는 속성</h4> + +<div class="index"> +<ul> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-top")}}</li> +</ul> +</div> + +<h4 id="기타_속성">기타 속성</h4> + +<div class="index"> +<ul> + <li>{{cssxref("visibility")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="Introduction to the CSS box model">CSS 박스 모델 입문</a></dt> + <dd>CSS의 기초 개념 중 하나인 박스 모델을 설명합니다. 박스 모델은 CSS가 요소와 요소의 콘텐츠, 안쪽 여백, 테두리, 바깥 여백 영역을 배치하는 법을 정의합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" title="Mastering margin collapsing">여백 상쇄 정복</a></dt> + <dd>어떤 경우, 두 개의 인접한 바깥 여백은 하나로 상쇄됩니다. 이 글은 상쇄가 언제 어떻게 일어나고 이를 어떻게 제어하는지 설명합니다.</dd> + <dt><a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a></dt> + <dd>시각적 서식 모델을 설명합니다.</dd> +</dl> + +<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 Box")}}</td> + <td>{{Spec2("CSS3 Box")}}</td> + <td><code>margin-trim</code> 추가.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..dd7718f701 --- /dev/null +++ b/files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,70 @@ +--- +title: CSS 기본 박스 모델 입문 +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +tags: + - CSS + - CSS Box Model + - Guide + - Layout +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +<div>{{CSSRef}}</div> + +<p>문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 <strong>CSS 기본 박스 모델</strong>에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다.</p> + +<p>하나의 박스는 네 부분(영역)으로 이루어집니다. 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이라고 부릅니다.</p> + +<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p> + +<p><a id="content-area" name="content-area"><strong>콘텐츠 영역</strong></a>(content area)은 콘텐츠 경계(content edge)가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다. 콘텐츠 영역의 크기는 콘텐츠 너비(콘텐츠 박스 너비)와 콘텐츠 높이(콘텐츠 박스 높이)입니다. 배경색과 배경 이미지를 가지고 있기도 합니다.</p> + +<p>{{cssxref("box-sizing")}} 속성의 값이 기본값인 <code>content-box</code>이며 요소가 블록 레벨 요소인 경우, 콘텐츠 영역의 크기를 {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, {{cssxref("max-height")}} 속성을 사용해 사용해 명시적으로 설정할 수 있습니다.</p> + +<p><a id="padding-area" name="padding-area"><strong>안쪽 여백 영역</strong></a>(패딩 영역, padding area)은 안쪽 여백 경계(padding edge)가 감싼 영역으로, 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장합니다. 영역의 크기는 안쪽 여백 박스 너비와 안쪽 여백 박스 높이입니다.</p> + +<p>안쪽 여백의 두께는 {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}와 단축 속성인 {{cssxref("padding")}}이 결정합니다.</p> + +<p><a id="border-area" name="border-area"><strong>테두리 영역</strong></a>(border area)은 테두리 경계(border edge)가 감싼 영역으로, 안쪽 여백 영역을 요소의 테두리까지 포함하는 크기로 확장합니다. 영역의 크기는 테두리 박스 너비와 테두리 박스 높이입니다.</p> + +<p>테두리의 두께는 {{cssxref("border-width")}}와 단축 속성인 {{cssxref("border")}}가 결정합니다. {{cssxref("box-sizing")}} 속성의 값이 <code>border-box</code>라면 테두리 영역의 크기를 {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, {{cssxref("max-height")}} 속성을 사용해 명시적으로 설정할 수 있습니다. 박스의 배경({{cssxref("background-color")}} 또는 {{cssxref("background-image")}})은 테두리의 바깥 경계까지 늘어나고, 그릴 땐 테두리에 가려집니다. 이 동작 방식은 {{cssxref("background-clip")}} 속성으로 바꿀 수 있습니다.</p> + +<p><a id="margin-area" name="margin-area"><strong>바깥 여백 영역</strong></a>(마진 영역, margin area)은 바깥 여백 경계(margin edge)가 감싼 영역으로, 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만듭니다. 영역의 크기는 바깥 여백 박스 너비와 바깥 여백 박스 높이입니다.</p> + +<p>바깥 여백 영역의 크기는 {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}와 단축 속성인 {{cssxref("margin")}}이 결정합니다. <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a>가 발생할 때는 요소 간에 바깥 여백이 공유되므로 여백 영역이 명확하게 결정되지 않습니다.</p> + +<p>끝으로, 비대체 인라인 요소가 차지하는 공간의 크기(줄 높이에 기여하는 양)는, 요소 주위에 테두리와 안쪽 여백이 표시되더라도 {{cssxref("line-height")}} 속성으로 결정한다는 점을 주의하세요.</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('CSS3 Box', '#intro')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Though more precisely worded, there is no practical change.</td> + </tr> + <tr> + <td>{{ SpecName("CSS1","#formatting-model")}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..1dd8b04888 --- /dev/null +++ b/files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,82 @@ +--- +title: 여백 상쇄 정복 +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +<div>{{CSSRef}}</div> + +<p>여러 블록의 <a href="/ko/docs/Web/CSS/margin-top">위쪽</a> 및 <a href="/ko/docs/Web/CSS/margin-bottom">아래쪽</a> 바깥 여백(마진)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되곤 합니다. 이런 동작을 <strong>여백 상쇄</strong>라고 부릅니다. 단, <a href="/ko/docs/Web/CSS/float">플로팅</a> 요소와 <a href="/ko/docs/Web/CSS/position#absolute">절대 위치를 지정</a>한 요소의 여백은 절대 상쇄되지 않습니다.</p> + +<p>여백 상쇄는 다음과 같은 세 가지 기본 상황에 발생합니다.</p> + +<dl> + <dt>인접 형제</dt> + <dd>인접 형제 요소간의 바깥 여백은 서로 상쇄됩니다. (단, 뒤쪽 형제가 플로팅을 <a href="/ko/docs/Web/CSS/clear">해제</a>해야 하는 경우는 예외)</dd> + <dt>부모와 자손을 분리하는 콘텐츠 없음</dt> + <dd>부모 블록에 테두리, 안쪽 여백, 인라인 부분이 없고 블록 서식 맥락이 생성되지 않았으며 부모의 {{cssxref("margin-top")}}을 자손의 <code>margin-top</code>과 분리할 <a href="/ko/docs/Web/CSS/clear">권한</a>이 없는 경우, 또는, 부모 블록에 테두리, 안쪽 여백, 인라인 콘텐츠가 없으며 부모의 {{cssxref("margin-bottom")}}과 자손의 <code>margin-bottom</code>을 분리할 {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}가 존재하지 않는 경우 부모와 자손의 여백이 상쇄됩니다. 상쇄된 여백은 부모 블록 바깥에 위치합니다.</dd> + <dt>빈 블록</dt> + <dd>테두리, 안쪽 여백, 인라인 콘텐츠, {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}가 없으면 블록의 {{cssxref("margin-top")}}과 {{cssxref("margin-bottom")}}이 서로 상쇄됩니다.</dd> +</dl> + +<p>다음은 참고할만한 사항입니다.</p> + +<ul> + <li>(세 개 이상의 여백 사이의) 더 복잡한 여백 상쇄는 위의 기본 상황이 서로 결합되어 발생합니다.</li> + <li>위의 규칙은 바깥 여백이 0이어도 적용되므로, 두 번째 규칙을 만족하는 경우 부모의 바깥 여백이 0이건 아니건 자손의 바깥 여백은 부모 밖으로 나오게 됩니다.</li> + <li>음수 값을 가진 바깥 여백을 포함할 경우, 상쇄된 여백의 크기는 제일 큰 양수 여백과 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 합이 됩니다.</li> + <li>모든 바깥 여백이 음수 값을 가질 경우, 상쇄된 여백의 크기는 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 크기가 됩니다. 인접 요소와 중첩 요소 모두에 적용됩니다.</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>The bottom margin of this paragraph is collapsed …</p> +<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p> + +<div>This parent element contains two paragraphs! + <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p> + <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> +</div> + +<p>I am <code>2rem</code> below the element above.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + margin: 2rem 0; + background: lavender; +} + +p { + margin: .4rem 0 1.2rem 0; + background: yellow; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 'auto', 350)}}</p> + +<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("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_charsets/index.html b/files/ko/web/css/css_charsets/index.html new file mode 100644 index 0000000000..484285591d --- /dev/null +++ b/files/ko/web/css/css_charsets/index.html @@ -0,0 +1,44 @@ +--- +title: CSS Charsets +slug: Web/CSS/CSS_Charsets +tags: + - CSS + - CSS Charsets + - Overview + - Reference +translation_of: Web/CSS/CSS_Charsets +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Charsets</strong>는 스타일 시트에서 사용하는 문자 집합을 정의할 수 있는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="규칙">@규칙</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@charset")}}</li> +</ul> +</div> + +<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('CSS2.1', 'syndata.html#x57', '@charset')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<div id="compat-mobile"> </div> diff --git a/files/ko/web/css/css_color/index.html b/files/ko/web/css/css_color/index.html new file mode 100644 index 0000000000..06d7418de0 --- /dev/null +++ b/files/ko/web/css/css_color/index.html @@ -0,0 +1,110 @@ +--- +title: CSS Color +slug: Web/CSS/CSS_Color +tags: + - CSS + - CSS Colors + - HTML Colors + - Overview + - Reference +translation_of: Web/CSS/CSS_Color +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS 색상</strong>은 색상, 색상 유형, 색상 혼합, 투명도 및 이러한 색상 효과를 HTML에 적용하는 방법을 다루는 CSS 모듈입니다. {{cssxref("<color>")}} 값을 취하는 모든 CSS 속성이 이 모듈에 속하는건 아니지만 의존성은 가지고 있습니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("color-adjust")}}</li> + <li>{{cssxref("opacity")}}</li> +</ul> +</div> + +<h3 id="자료형">자료형</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<color>")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">CSS를 사용하여 HTML 요소에 색상 적용하기</a></dt> + <dd>CSS를 사용하여 다양한 유형의 콘텐츠에 색상을 적용하는 방법에 대한 안내서입니다. 모든 색상 관련 CSS 속성이 적용됩니다.</dd> +</dl> + +<h2 id="도구">도구</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">색상 선택 도구</a></dt> + <dd>이 도구를 사용하면 맞춤 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다.</dd> +</dl> + +<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('CSS3 Colors')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<h3 id="color_속성"><code>color</code> 속성</h3> + +<div> + + +<p>{{Compat("css.properties.color")}}</p> + +<h3 id="color-adjust_속성"><code>color-adjust</code> 속성</h3> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.color-adjust")}}</p> + +<h3 id="opacity_속성"><code>opacity</code> 속성</h3> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.opacity")}}</p> +</div> +</div> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>다른 사양의 일부 색상 관련 속성 : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> + <li>CSS에서는 그레이디언트가 색상이 아니라 <a href="/ko/docs/Web/CSS/CSS_Images">이미지</a>입니다.</li> +</ul> diff --git a/files/ko/web/css/css_colors/color_picker_tool/index.html b/files/ko/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..f5437c05b5 --- /dev/null +++ b/files/ko/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3238 @@ +--- +title: Color picker tool +slug: Web/CSS/CSS_Colors/Color_picker_tool +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +<div style="display: none;"> +<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"> <div id="container"> + <div id="palette" class="block"> + <div id="color-palette"></div> + <div id="color-info"> + <div class="title"> CSS Color </div> + </div> + </div> + + <div id="picker" class="block"> + <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div> + <div id="picker-samples" sample-id="master"></div> + <div id="controls"> + <div id="delete"> + <div id="trash-can"></div> + </div> + <div id="void-sample" class="icon"></div> + </div> + </div> + + <div id="canvas" data-tutorial="drop"> + <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" + data-max="20" data-sensivity="10"></div> + </div> + </div> + +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* + * COLOR PICKER TOOL + */ + +.ui-color-picker { + width: 420px; + margin: 0; + border: 1px solid #DDD; + background-color: #FFF; + display: table; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-color-picker .picking-area { + width: 198px; + height: 198px; + margin: 5px; + border: 1px solid #DDD; + position: relative; + float: left; + display: table; +} + +.ui-color-picker .picking-area:hover { + cursor: default; +} + +/* HSV format - Hue-Saturation-Value(Brightness) */ +.ui-color-picker .picking-area { + background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; + + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + + background-color: #F00; +} + +/* HSL format - Hue-Saturation-Lightness */ +.ui-color-picker[data-mode='HSL'] .picking-area { + background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, + hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), + -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); + background-color: #F00; +} + +.ui-color-picker .picker { + width: 10px; + height: 10px; + border-radius: 50%; + border: 1px solid #FFF; + position: absolute; + top: 45%; + left: 45%; +} + +.ui-color-picker .picker:before { + width: 8px; + height: 8px; + content: ""; + position: absolute; + border: 1px solid #999; + border-radius: 50%; +} + +.ui-color-picker .hue, +.ui-color-picker .alpha { + width: 198px; + height: 28px; + margin: 5px; + border: 1px solid #FFF; + float: left; +} + +.ui-color-picker .hue { + background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); +} + +.ui-color-picker .alpha { + border: 1px solid #CCC; + background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); +} + +.ui-color-picker .alpha-mask { + width: 100%; + height: 100%; + background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); +} + +.ui-color-picker .slider-picker { + width: 2px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; +} + +/* input HSV and RGB */ + +.ui-color-picker .info { + width: 200px; + margin: 5px; + float: left; +} + +.ui-color-picker .info * { + float: left; +} + +.ui-color-picker .input { + width: 64px; + margin: 5px 2px; + float: left; +} + +.ui-color-picker .input .name { + height: 20px; + width: 30px; + text-align: center; + font-size: 14px; + line-height: 18px; + float: left; +} + +.ui-color-picker .input input { + width: 30px; + height: 18px; + margin: 0; + padding: 0; + border: 1px solid #DDD; + text-align: center; + float: right; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +.ui-color-picker .input[data-topic="lightness"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { + display: block; +} + +.ui-color-picker .input[data-topic="alpha"] { + margin-top: 10px; + width: 93px; +} + +.ui-color-picker .input[data-topic="alpha"] > .name { + width: 60px; +} + +.ui-color-picker .input[data-topic="alpha"] > input { + float: right; +} + +.ui-color-picker .input[data-topic="hexa"] { + width: auto; + float: right; + margin: 6px 8px 0 0; +} + +.ui-color-picker .input[data-topic="hexa"] > .name { + display: none; +} + +.ui-color-picker .input[data-topic="hexa"] > input { + width: 90px; + height: 24px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* Preview color */ +.ui-color-picker .preview { + width: 95px; + height: 53px; + margin: 5px; + margin-top: 10px; + border: 1px solid #DDD; + background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + float: left; + position: relative; +} + +.ui-color-picker .preview:before { + height: 100%; + width: 50%; + left: 50%; + top: 0; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +.ui-color-picker .preview-color { + width: 100%; + height: 100%; + background-color: rgba(255, 0, 0, 0.5); + position: absolute; + z-index: 1; +} + +.ui-color-picker .switch_mode { + width: 10px; + height: 20px; + position: relative; + border-radius: 5px 0 0 5px; + border: 1px solid #DDD; + background-color: #EEE; + left: -12px; + top: -1px; + z-index: 1; + transition: all 0.5s; +} + +.ui-color-picker .switch_mode:hover { + background-color: #CCC; + cursor: pointer; +} + +/* + * UI Component + */ + +.ui-input-slider { + height: 20px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.ui-input-slider * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Input Slider */ + +.ui-input-slider > input { + margin: 0; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.ui-input-slider-info { + width: 90px; + padding: 0px 10px 0px 0px; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-left, .ui-input-slider-right { + width: 16px; + cursor: pointer; + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; +} + +.ui-input-slider-right { + background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; +} + +.ui-input-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-input-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 5px; + color: #FFF; + font-weight: bold; + line-height: 14px; + text-align: center; +} + +.ui-input-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +/* + * COLOR PICKER TOOL + */ + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + box-shadow: 0 0 5px 0 #999; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + +} + +/** + * Resize Handle + */ +.resize-handle { + width: 10px; + height: 10px; + background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; + position: absolute; + bottom: 0; + right: 0; +} + +[data-resize='both']:hover { + cursor: nw-resize !important; +} + +[data-resize='width']:hover { + cursor: w-resize !important; +} + +[data-resize='height']:hover { + cursor: n-resize !important; +} + +[data-hidden='true'] { + display: none; +} + +[data-collapsed='true'] { + height: 0 !important; +} + +.block { + display: table; +} + + +/** + * Container + */ +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + display: table; +} + +/** + * Picker Zone + */ + +#picker { + padding: 10px; + width: 980px; +} + +.ui-color-picker { + padding: 3px 5px; + float: left; + border-color: #FFF; +} + +.ui-color-picker .switch_mode { + display: none; +} + +.ui-color-picker .preview-color:hover { + cursor: move; +} + +/** + * Picker Container + */ + +#picker-samples { + width: 375px; + height: 114px; + max-height: 218px; + margin: 0 10px 0 30px; + overflow: hidden; + position: relative; + float: left; + + transition: all 0.2s; +} + +#picker-samples .sample { + width: 40px; + height: 40px; + margin: 5px; + border: 1px solid #DDD; + position: absolute; + float: left; + transition: all 0.2s; +} + +#picker-samples .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#picker-samples .sample[data-active='true'] { + border-color: #999; +} + +#picker-samples .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#picker-samples #add-icon { + width: 100%; + height: 100%; + position: relative; + box-shadow: inset 0px 0px 2px 0px #DDD; +} + +#picker-samples #add-icon:hover { + cursor: pointer; + border-color: #DDD; + box-shadow: inset 0px 0px 5px 0px #CCC; +} + +#picker-samples #add-icon:before, +#picker-samples #add-icon:after { + content: ""; + position: absolute; + background-color: #EEE; + box-shadow: 0 0 1px 0 #EEE; +} + +#picker-samples #add-icon:before { + width: 70%; + height: 16%; + top: 42%; + left: 15%; +} + +#picker-samples #add-icon:after { + width: 16%; + height: 70%; + top: 15%; + left: 42%; +} + +#picker-samples #add-icon:hover:before, +#picker-samples #add-icon:hover:after { + background-color: #DDD; + box-shadow: 0 0 1px 0 #DDD; +} + +/** + * Controls + */ + +#controls { + width: 110px; + padding: 10px; + float: right; +} + +#controls #picker-switch { + text-align: center; + float: left; +} + +#controls .icon { + width: 48px; + height: 48px; + margin: 10px 0; + background-repeat: no-repeat; + background-position: center; + border: 1px solid #DDD; + display: table; + float: left; +} + +#controls .icon:hover { + cursor: pointer; +} + +#controls .picker-icon { + background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); +} + +#controls #void-sample { + margin-right: 10px; + background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); + background-position: center left; +} + +#controls #void-sample[data-active='true'] { + border-color: #CCC; + background-position: center right; +} + +#controls .switch { + width: 106px; + padding: 1px; + border: 1px solid #CCC; + font-size: 14px; + text-align: center; + line-height: 24px; + overflow: hidden; + float: left; +} + +#controls .switch:hover { + cursor: pointer; +} + +#controls .switch > * { + width: 50%; + padding: 2px 0; + background-color: #EEE; + float: left; +} + +#controls .switch [data-active='true'] { + color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-color: #777; +} + +/** + * Trash Can + */ + +#delete { + width: 100%; + height: 94px; + background-color: #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + + text-align: center; + color: #777; + + position: relative; + float: right; +} + +#delete #trash-can { + width: 80%; + height: 80%; + border: 2px dashed #FFF; + border-radius: 5px; + background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; + + position: absolute; + top: 10%; + left: 10%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + transition: all 0.2s; +} + +#delete[drag-state='enter'] { + background-color: #999; +} + +/** + * Color Theme + */ + +#color-theme { + margin: 0 8px 0 0; + border: 1px solid #EEE; + display: inline-block; + float: right; +} + +#color-theme .box { + width: 80px; + height: 92px; + float: left; +} + +/** + * Color info box + */ +#color-info { + width: 360px; + float: left; +} + +#color-info .title { + width: 100%; + padding: 15px; + font-size: 18px; + text-align: center; + background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); + background-repeat:no-repeat; + background-position: center left 30%; +} + +#color-info .copy-container { + position: absolute; + top: -100%; +} + +#color-info .property { + min-width: 280px; + height: 30px; + margin: 10px 0; + text-align: center; + line-height: 30px; +} + +#color-info .property > * { + float: left; +} + +#color-info .property .type { + width: 60px; + height: 100%; + padding: 0 16px 0 0; + text-align: right; +} + +#color-info .property .value { + width: 200px; + height: 100%; + padding: 0 10px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + font-size: 16px; + color: #777; + text-align: center; + background-color: #FFF; + border: none; +} + +#color-info .property .value:hover { + color: #37994A; +} + +#color-info .property .value:hover + .copy { + background-position: center right; +} + +#color-info .property .copy { + width: 24px; + height: 100%; + padding: 0 5px; + background-color: #FFF; + background-image: url('https://mdn.mozillademos.org/files/6073/copy.png'); + background-repeat: no-repeat; + background-position: center left; + border-left: 1px solid #EEE; + text-align: right; + float: left; +} + +#color-info .property .copy:hover { + background-position: center right; +} + + +/** + * Color Palette + */ + +#palette { + width: 1000px; + padding: 10px 0; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + background-color: #EEE; + color: #777; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#color-palette { + width: 640px; + font-family: Arial, Helvetica, sans-serif; + color: #777; + float: left; +} + +#color-palette .container { + width: 100%; + height: 50px; + line-height: 50px; + overflow: hidden; + float: left; + transition: all 0.5s; +} + +#color-palette .container > * { + float: left; +} + +#color-palette .title { + width: 100px; + padding: 0 10px; + text-align: right; + line-height: inherit; +} + +#color-palette .palette { + width: 456px; + height: 38px; + margin: 3px; + padding: 3px; + display: table; + background-color: #FFF; +} + +#color-palette .palette .sample { + width: 30px; + height: 30px; + margin: 3px; + position: relative; + border: 1px solid #DDD; + float: left; + transition: all 0.2s; +} + +#color-palette .palette .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#color-palette .controls { +} + +#color-palette .controls > * { + float: left; +} + +#color-palette .controls > *:hover { + cursor: pointer; +} + +#color-palette .controls .lock { + width: 24px; + height: 24px; + margin: 10px; + padding: 3px; + background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); + background-repeat: no-repeat; + background-position: bottom right; +} + +#color-palette .controls .lock:hover { + /*background-image: url('images/unlocked-hover.png');*/ + background-position: bottom left; +} + +#color-palette .controls .lock[locked-state='true'] { + /*background-image: url('images/locked.png');*/ + background-position: top left ; +} + +#color-palette .controls .lock[locked-state='true']:hover { + /*background-image: url('images/lock-hover.png');*/ + background-position: top right; +} + +/** + * Canvas + */ + +#canvas { + width: 100%; + height: 300px; + min-height: 250px; + border-top: 1px solid #DDD; + background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); + background-repeat: repeat; + position: relative; + float: left; +} + +#canvas[data-tutorial='drop'] { + text-align: center; + font-size: 30px; + color: #777; +} + +#canvas[data-tutorial='drop']:before { + content: "Drop colors here to compare"; + width: 40%; + padding: 30px 9% 70px 11%; + + background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); + background-repeat: no-repeat; + background-position: left 35px top 60%; + + text-align: right; + + border: 3px dashed rgb(221, 221, 221); + border-radius: 15px; + + position: absolute; + top: 50px; + left: 20%; +} + +#canvas[data-tutorial='drop']:after { + content: "adjust, change or modify"; + width: 40%; + font-size: 24px; + position: absolute; + top: 130px; + left: 32%; + z-index: 2; +} + +#canvas [data-tutorial='dblclick'] { + background-color: #999 !important; +} + +#canvas [data-tutorial='dblclick']:before { + content: "double click to activate"; + width: 80px; + color: #FFF; + position: absolute; + top: 10%; + left: 20%; + z-index: 2; +} + +#canvas .sample { + width: 100px; + height: 100px; + min-width: 20px; + min-height: 20px; + position: absolute; + border: 1px solid rgba(255, 255, 255, 0.3); +} + +#canvas .sample:hover { + cursor: move; +} + +#canvas .sample[data-active='true']:after { + content: ""; + position: absolute; + background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; + width: 100%; + height: 12px; + top: -12px; + z-index: 2; +} + +#canvas .sample:hover > * { + cursor: pointer; + display: block !important; +} + +#canvas .sample .resize-handle { + display: none; +} + +#canvas .sample .pick { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; + position: absolute; + top: 0; + left: 0; + display: none; +} + +#canvas .sample .delete { + width: 10px; + height: 10px; + margin: 5px; + background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; + position: absolute; + top: 0; + right: 0; + display: none; +} + + +/** + * Canvas controls + */ + +#canvas .toggle-bg { + width: 16px; + height: 16px; + margin: 5px; + background: url("images/canvas-controls.png") center left no-repeat; + position: absolute; + top: 0; + right: 0; +} + +#canvas .toggle-bg:hover { + cursor: pointer; +} + +#canvas[data-bg='true'] { + background: none; +} + +#canvas[data-bg='true'] .toggle-bg { + background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; +} + +#zindex { + height: 20px; + margin: 5px; + font-size: 16px; + position: absolute; + opacity: 0; + top: -10000px; + left: 0; + color: #777; + float: left; + transition: opacity 1s; +} + +#zindex input { + border: 1px solid #DDD; + font-size: 16px; + color: #777; +} + +#zindex .ui-input-slider-info { + width: 60px; +} + +#zindex[data-active='true'] { + top: 0; + opacity: 1; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">'use strict'; + +var UIColorPicker = (function UIColorPicker() { + + function getElemById(id) { + return document.getElementById(id); + } + + var subscribers = []; + var pickers = []; + + /** + * RGBA Color class + * + * HSV/HSB and HSL (hue, saturation, value / brightness, lightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + * @param lightness 0-100 + */ + + function Color(color) { + + if(color instanceof Color === true) { + this.copy(color); + return; + } + + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + this.lightness = 0; + this.format = 'HSV'; + } + + function RGBColor(r, g, b) { + var color = new Color(); + color.setRGBA(r, g, b, 1); + return color; + } + + function RGBAColor(r, g, b, a) { + var color = new Color(); + color.setRGBA(r, g, b, a); + return color; + } + + function HSVColor(h, s, v) { + var color = new Color(); + color.setHSV(h, s, v); + return color; + } + + function HSVAColor(h, s, v, a) { + var color = new Color(); + color.setHSV(h, s, v); + color.a = a; + return color; + } + + function HSLColor(h, s, l) { + var color = new Color(); + color.setHSL(h, s, l); + return color; + } + + function HSLAColor(h, s, l, a) { + var color = new Color(); + color.setHSL(h, s, l); + color.a = a; + return color; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + this.format = '' + obj.format; + this.lightness = obj.lightness; + }; + + Color.prototype.setFormat = function setFormat(format) { + if (format === 'HSV') + this.format = 'HSV'; + if (format === 'HSL') + this.format = 'HSL'; + }; + + /*========== Methods to set Color Properties ==========*/ + + Color.prototype.isValidRGBValue = function isValidRGBValue(value) { + return (typeof(value) === 'number' && isNaN(value) === false && + value >= 0 && value <= 255); + }; + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (this.isValidRGBValue(red) === false || + this.isValidRGBValue(green) === false || + this.isValidRGBValue(blue) === false) + return; + + this.r = red | 0; + this.g = green | 0; + this.b = blue | 0; + + if (this.isValidRGBValue(alpha) === true) + this.a = alpha | 0; + }; + + Color.prototype.setByName = function setByName(name, value) { + if (name === 'r' || name === 'g' || name === 'b') { + if(this.isValidRGBValue(value) === false) + return; + + this[name] = value; + this.updateHSX(); + } + }; + + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { + this.hue = hue; + this.saturation = saturation; + this.lightness = lightness; + this.HSLtoRGB(); + }; + + Color.prototype.setHue = function setHue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 359) + return; + this.hue = value; + this.updateRGB(); + }; + + Color.prototype.setSaturation = function setSaturation(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.saturation = value; + this.updateRGB(); + }; + + Color.prototype.setValue = function setValue(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.value = value; + this.HSVtoRGB(); + }; + + Color.prototype.setLightness = function setLightness(value) { + if (typeof(value) !== 'number' || isNaN(value) === true || + value < 0 || value > 100) + return; + this.lightness = value; + this.HSLtoRGB(); + }; + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); + + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + this.RGBtoHSV(); + }; + + /*========== Conversion Methods ==========*/ + + Color.prototype.convertToHSL = function convertToHSL() { + if (this.format === 'HSL') + return; + + this.setFormat('HSL'); + this.RGBtoHSL(); + }; + + Color.prototype.convertToHSV = function convertToHSV() { + if (this.format === 'HSV') + return; + + this.setFormat('HSV'); + this.RGBtoHSV(); + }; + + /*========== Update Methods ==========*/ + + Color.prototype.updateRGB = function updateRGB() { + if (this.format === 'HSV') { + this.HSVtoRGB(); + return; + } + + if (this.format === 'HSL') { + this.HSLtoRGB(); + return; + } + }; + + Color.prototype.updateHSX = function updateHSX() { + if (this.format === 'HSV') { + this.RGBtoHSV(); + return; + } + + if (this.format === 'HSL') { + this.RGBtoHSL(); + return; + } + }; + + Color.prototype.HSVtoRGB = function HSVtoRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.HSLtoRGB = function HSLtoRGB() { + var sat = this.saturation / 100; + var light = this.lightness / 100; + var C = sat * (1 - Math.abs(2 * light - 1)); + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = light - C/2; + var precision = 255; + + C = (C + m) * precision | 0; + X = (X + m) * precision | 0; + m = m * precision | 0; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + }; + + Color.prototype.RGBtoHSV = function RGBtoHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + }; + + Color.prototype.RGBtoHSL = function RGBtoHSL() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + var lightness = (cmax + cmin) / 2; + var X = (1 - Math.abs(2 * lightness - 1)); + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / X; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.lightness = (lightness * 100) | 0; + }; + + /*========== Get Methods ==========*/ + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + }; + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; + var a = ''; + var v = ''; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'rgb' + a + rgb + v + ')'; + return value; + }; + + Color.prototype.getHSLA = function getHSLA() { + if (this.format === 'HSV') { + var color = new Color(this); + color.setFormat('HSL'); + color.updateHSX(); + return color.getHSLA(); + } + + var a = ''; + var v = ''; + var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; + var x = parseFloat(this.a); + if (x !== 1) { + a = 'a'; + v = ', ' + x; + } + + var value = 'hsl' + a + hsl + v + ')'; + return value; + }; + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + }; + + /*=======================================================================*/ + /*=======================================================================*/ + + /*========== Capture Mouse Movement ==========*/ + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener('mousedown', function(e) { + callback(e); + document.addEventListener('mousemove', callback); + }); + + document.addEventListener('mouseup', function(e) { + document.removeEventListener('mousemove', callback); + }); + }; + + /*====================*/ + // Color Picker Class + /*====================*/ + + function ColorPicker(node) { + this.color = new Color(); + this.node = node; + this.subscribers = []; + + var type = this.node.getAttribute('data-mode'); + var topic = this.node.getAttribute('data-topic'); + + this.topic = topic; + this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; + this.color.setFormat(this.picker_mode); + + this.createPickingArea(); + this.createHueArea(); + + this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); + this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); + this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); + this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); + + this.createAlphaArea(); + + this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); + this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); + this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); + + this.createPreviewBox(); + this.createChangeModeButton(); + + this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); + this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); + + this.setColor(this.color); + pickers[topic] = this; + } + + /*************************************************************************/ + // Function for generating the color-picker + /*************************************************************************/ + + ColorPicker.prototype.createPickingArea = function createPickingArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'picking-area'; + picker.className = 'picker'; + + this.picking_area = area; + this.color_picker = picker; + setMouseTracking(area, this.updateColor.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createHueArea = function createHueArea() { + var area = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'hue'; + picker.className ='slider-picker'; + + this.hue_area = area; + this.hue_picker = picker; + setMouseTracking(area, this.updateHueSlider.bind(this)); + + area.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createAlphaArea = function createAlphaArea() { + var area = document.createElement('div'); + var mask = document.createElement('div'); + var picker = document.createElement('div'); + + area.className = 'alpha'; + mask.className = 'alpha-mask'; + picker.className = 'slider-picker'; + + this.alpha_area = area; + this.alpha_mask = mask; + this.alpha_picker = picker; + setMouseTracking(area, this.updateAlphaSlider.bind(this)); + + area.appendChild(mask); + mask.appendChild(picker); + this.node.appendChild(area); + }; + + ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { + var preview_box = document.createElement('div'); + var preview_color = document.createElement('div'); + + preview_box.className = 'preview'; + preview_color.className = 'preview-color'; + + this.preview_color = preview_color; + + preview_box.appendChild(preview_color); + this.node.appendChild(preview_box); + }; + + ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { + var wrapper = document.createElement('div'); + var input = document.createElement('input'); + var info = document.createElement('span'); + + wrapper.className = 'input'; + wrapper.setAttribute('data-topic', topic); + info.textContent = title; + info.className = 'name'; + input.setAttribute('type', 'text'); + + wrapper.appendChild(info); + wrapper.appendChild(input); + this.node.appendChild(wrapper); + + input.addEventListener('change', onChangeFunc); + input.addEventListener('click', function() { + this.select(); + }); + + this.subscribe(topic, function(value) { + input.value = value; + }); + }; + + ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { + + var button = document.createElement('div'); + button.className = 'switch_mode'; + button.addEventListener('click', function() { + if (this.picker_mode === 'HSV') + this.setPickerMode('HSL'); + else + this.setPickerMode('HSV'); + + }.bind(this)); + + this.node.appendChild(button); + }; + + /*************************************************************************/ + // Updates properties of UI elements + /*************************************************************************/ + + ColorPicker.prototype.updateColor = function updateColor(e) { + var x = e.pageX - this.picking_area.offsetLeft; + var y = e.pageY - this.picking_area.offsetTop; + var picker_offset = 5; + + // width and height should be the same + var size = this.picking_area.clientWidth; + + if (x > size) x = size; + if (y > size) y = size; + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + if (this.picker_mode === 'HSV') + this.color.setHSV(this.color.hue, saturation, value); + if (this.picker_mode === 'HSL') + this.color.setHSL(this.color.hue, saturation, value); + + this.color_picker.style.left = x - picker_offset + 'px'; + this.color_picker.style.top = y - picker_offset + 'px'; + + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('value', value); + this.notify('lightness', value); + this.notify('saturation', saturation); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { + var x = e.pageX - this.hue_area.offsetLeft; + var width = this.hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + // TODO 360 => 359 + var hue = ((359 * x) / width) | 0; + // if (hue === 360) hue = 359; + + this.updateSliderPosition(this.hue_picker, x); + this.setHue(hue); + }; + + ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { + var x = e.pageX - this.alpha_area.offsetLeft; + var width = this.alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + this.color.a = (x / width).toFixed(2); + + this.updateSliderPosition(this.alpha_picker, x); + this.updatePreviewColor(); + + this.notify('alpha', this.color.a); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setHue = function setHue(value) { + this.color.setHue(value); + + this.updatePickerBackground(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + this.notify('hue', this.color.hue); + + notify(this.topic, this.color); + }; + + // Updates when one of Saturation/Value/Lightness changes + ColorPicker.prototype.updateSLV = function updateSLV() { + this.updatePickerPosition(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + this.notify('hexa', this.color.getHexa()); + + notify(this.topic, this.color); + }; + + /*************************************************************************/ + // Update positions of various UI elements + /*************************************************************************/ + + ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { + var size = this.picking_area.clientWidth; + var value = 0; + var offset = 5; + + if (this.picker_mode === 'HSV') + value = this.color.value; + if (this.picker_mode === 'HSL') + value = this.color.lightness; + + var x = (this.color.saturation * size / 100) | 0; + var y = size - (value * size / 100) | 0; + + this.color_picker.style.left = x - offset + 'px'; + this.color_picker.style.top = y - offset + 'px'; + }; + + ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { + elem.style.left = Math.max(pos - 3, -2) + 'px'; + }; + + ColorPicker.prototype.updateHuePicker = function updateHuePicker() { + var size = this.hue_area.clientWidth; + var offset = 1; + var pos = (this.color.hue * size / 360 ) | 0; + this.hue_picker.style.left = pos - offset + 'px'; + }; + + ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { + var size = this.alpha_area.clientWidth; + var offset = 1; + var pos = (this.color.a * size) | 0; + this.alpha_picker.style.left = pos - offset + 'px'; + }; + + /*************************************************************************/ + // Update background colors + /*************************************************************************/ + + ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { + var nc = new Color(this.color); + nc.setHSV(nc.hue, 100, 100); + this.picking_area.style.backgroundColor = nc.getHexa(); + }; + + ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { + this.alpha_mask.style.backgroundColor = this.color.getHexa(); + }; + + ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { + this.preview_color.style.backgroundColor = this.color.getColor(); + }; + + /*************************************************************************/ + // Update input elements + /*************************************************************************/ + + ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { + var value = parseInt(e.target.value); + this.setHue(value); + this.updateHuePicker(); + }; + + ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { + var value = parseInt(e.target.value); + this.color.setSaturation(value); + e.target.value = this.color.saturation; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { + var value = parseInt(e.target.value); + this.color.setValue(value); + e.target.value = this.color.value; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { + var value = parseInt(e.target.value); + this.color.setLightness(value); + e.target.value = this.color.lightness; + this.updateSLV(); + }; + + ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { + var value = parseInt(e.target.value); + this.color.setByName('r', value); + e.target.value = this.color.r; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { + var value = parseInt(e.target.value); + this.color.setByName('g', value); + e.target.value = this.color.g; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { + var value = parseInt(e.target.value); + this.color.setByName('b', value); + e.target.value = this.color.b; + this.setColor(this.color); + }; + + ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { + var value = parseFloat(e.target.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + this.color.a = value.toFixed(2); + + e.target.value = this.color.a; + this.updateAlphaPicker(); + }; + + ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { + var value = e.target.value; + this.color.setHexa(value); + this.setColor(this.color); + }; + + /*************************************************************************/ + // Internal Pub/Sub + /*************************************************************************/ + + ColorPicker.prototype.subscribe = function subscribe(topic, callback) { + this.subscribers[topic] = callback; + }; + + ColorPicker.prototype.notify = function notify(topic, value) { + if (this.subscribers[topic]) + this.subscribers[topic](value); + }; + + /*************************************************************************/ + // Set Picker Properties + /*************************************************************************/ + + ColorPicker.prototype.setColor = function setColor(color) { + if(color instanceof Color !== true) { + console.log('Typeof parameter not Color'); + return; + } + + if (color.format !== this.picker_mode) { + color.setFormat(this.picker_mode); + color.updateHSX(); + } + + this.color.copy(color); + this.updateHuePicker(); + this.updatePickerPosition(); + this.updatePickerBackground(); + this.updateAlphaPicker(); + this.updateAlphaGradient(); + this.updatePreviewColor(); + + this.notify('red', this.color.r); + this.notify('green', this.color.g); + this.notify('blue', this.color.b); + + this.notify('hue', this.color.hue); + this.notify('saturation', this.color.saturation); + this.notify('value', this.color.value); + this.notify('lightness', this.color.lightness); + + this.notify('alpha', this.color.a); + this.notify('hexa', this.color.getHexa()); + notify(this.topic, this.color); + }; + + ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { + if (mode !== 'HSV' && mode !== 'HSL') + return; + + this.picker_mode = mode; + this.node.setAttribute('data-mode', this.picker_mode); + this.setColor(this.color); + }; + + /*************************************************************************/ + // UNUSED + /*************************************************************************/ + + var setPickerMode = function setPickerMode(topic, mode) { + if (pickers[topic]) + pickers[topic].setPickerMode(mode); + }; + + var setColor = function setColor(topic, color) { + if (pickers[topic]) + pickers[topic].setColor(color); + }; + + var getColor = function getColor(topic) { + if (pickers[topic]) + return new Color(pickers[topic].color); + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + }; + + var notify = function notify(topic, value) { + if (subscribers[topic] === undefined || subscribers[topic].length === 0) + return; + + var color = new Color(value); + for (var i in subscribers[topic]) + subscribers[topic][i](color); + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-color-picker'); + var size = elem.length; + for (var i = 0; i < size; i++) + new ColorPicker(elem[i]); + }; + + return { + init : init, + Color : Color, + RGBColor : RGBColor, + RGBAColor : RGBAColor, + HSVColor : HSVColor, + HSVAColor : HSVAColor, + HSLColor : HSLColor, + HSLAColor : HSLAColor, + setColor : setColor, + getColor : getColor, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPickerMode : setPickerMode + }; + +})(); + + + +/** + * UI-SlidersManager + */ + +var InputSliderManager = (function InputSliderManager() { + + var subscribers = {}; + var sliders = []; + + var InputComponent = function InputComponent(obj) { + var input = document.createElement('input'); + input.setAttribute('type', 'text'); + input.style.width = 50 + obj.precision * 10 + 'px'; + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + var value = parseFloat(e.target.value); + + if (isNaN(value) === true) + setValue(obj.topic, obj.value); + else + setValue(obj.topic, value); + }); + + return input; + }; + + var SliderComponent = function SliderComponent(obj, sign) { + var slider = document.createElement('div'); + var startX = null; + var start_value = 0; + + slider.addEventListener("click", function(e) { + document.removeEventListener("mousemove", sliderMotion); + setValue(obj.topic, obj.value + obj.step * sign); + }); + + slider.addEventListener("mousedown", function(e) { + startX = e.clientX; + start_value = obj.value; + document.body.style.cursor = "e-resize"; + + document.addEventListener("mouseup", slideEnd); + document.addEventListener("mousemove", sliderMotion); + }); + + var slideEnd = function slideEnd(e) { + document.removeEventListener("mousemove", sliderMotion); + document.body.style.cursor = "auto"; + slider.style.cursor = "pointer"; + }; + + var sliderMotion = function sliderMotion(e) { + slider.style.cursor = "e-resize"; + var delta = (e.clientX - startX) / obj.sensivity | 0; + var value = delta * obj.step + start_value; + setValue(obj.topic, value); + }; + + return slider; + }; + + var InputSlider = function(node) { + var min = parseFloat(node.getAttribute('data-min')); + var max = parseFloat(node.getAttribute('data-max')); + var step = parseFloat(node.getAttribute('data-step')); + var value = parseFloat(node.getAttribute('data-value')); + var topic = node.getAttribute('data-topic'); + var unit = node.getAttribute('data-unit'); + var name = node.getAttribute('data-info'); + var sensivity = node.getAttribute('data-sensivity') | 0; + var precision = node.getAttribute('data-precision') | 0; + + this.min = isNaN(min) ? 0 : min; + this.max = isNaN(max) ? 100 : max; + this.precision = precision >= 0 ? precision : 0; + this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); + this.topic = topic; + this.node = node; + this.unit = unit === null ? '' : unit; + this.sensivity = sensivity > 0 ? sensivity : 5; + value = isNaN(value) ? this.min : value; + + var input = new InputComponent(this); + var slider_left = new SliderComponent(this, -1); + var slider_right = new SliderComponent(this, 1); + + slider_left.className = 'ui-input-slider-left'; + slider_right.className = 'ui-input-slider-right'; + + if (name) { + var info = document.createElement('span'); + info.className = 'ui-input-slider-info'; + info.textContent = name; + node.appendChild(info); + } + + node.appendChild(slider_left); + node.appendChild(input); + node.appendChild(slider_right); + + this.input = input; + sliders[topic] = this; + setValue(topic, value); + }; + + InputSlider.prototype.setInputValue = function setInputValue() { + this.input.value = this.value.toFixed(this.precision) + this.unit; + }; + + var setValue = function setValue(topic, value, send_notify) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = parseFloat(value.toFixed(slider.precision)); + + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; + + slider.value = value; + slider.node.setAttribute('data-value', value); + + slider.setInputValue(); + + if (send_notify === false) + return; + + notify.call(slider); + }; + + var setMax = function setMax(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.max = value; + setValue(topic, slider.value); + }; + + var setMin = function setMin(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.min = value; + setValue(topic, slider.value); + }; + + var setUnit = function setUnit(topic, unit) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.unit = unit; + setValue(topic, slider.value); + }; + + var setStep = function setStep(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + slider.step = parseFloat(value); + setValue(topic, slider.value); + }; + + var setPrecision = function setPrecision(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + slider.precision = value; + + var step = parseFloat(slider.step.toFixed(value)); + if (step === 0) + slider.step = 1 / Math.pow(10, value); + + setValue(topic, slider.value); + }; + + var setSensivity = function setSensivity(topic, value) { + var slider = sliders[topic]; + if (slider === undefined) + return; + + value = value | 0; + + slider.sensivity = value > 0 ? value : 5; + }; + + var getNode = function getNode(topic) { + return sliders[topic].node; + }; + + var getPrecision = function getPrecision(topic) { + return sliders[topic].precision; + }; + + var getStep = function getStep(topic) { + return sliders[topic].step; + }; + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + }; + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + }; + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.value); + }; + + var createSlider = function createSlider(topic, label) { + var slider = document.createElement('div'); + slider.className = 'ui-input-slider'; + slider.setAttribute('data-topic', topic); + + if (label !== undefined) + slider.setAttribute('data-info', label); + + new InputSlider(slider); + return slider; + }; + + var init = function init() { + var elem = document.querySelectorAll('.ui-input-slider'); + var size = elem.length; + for (var i = 0; i < size; i++) + new InputSlider(elem[i]); + }; + + return { + init : init, + setMax : setMax, + setMin : setMin, + setUnit : setUnit, + setStep : setStep, + getNode : getNode, + getStep : getStep, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe, + setPrecision : setPrecision, + setSensivity : setSensivity, + getPrecision : getPrecision, + createSlider : createSlider, + }; + +})(); + + +'use strict'; + +window.addEventListener("load", function() { + ColorPickerTool.init(); +}); + +var ColorPickerTool = (function ColorPickerTool() { + + /*========== Get DOM Element By ID ==========*/ + + function getElemById(id) { + return document.getElementById(id); + } + + function allowDropEvent(e) { + e.preventDefault(); + } + + /*========== Make an element resizable relative to it's parent ==========*/ + + var UIComponent = (function UIComponent() { + + function makeResizable(elem, axis) { + var valueX = 0; + var valueY = 0; + var action = 0; + + var resizeStart = function resizeStart(e) { + e.stopPropagation(); + e.preventDefault(); + if (e.button !== 0) + return; + + valueX = e.clientX - elem.clientWidth; + valueY = e.clientY - elem.clientHeight; + + document.body.setAttribute('data-resize', axis); + document.addEventListener('mousemove', mouseMove); + document.addEventListener('mouseup', resizeEnd); + }; + + var mouseMove = function mouseMove(e) { + if (action >= 0) + elem.style.width = e.clientX - valueX + 'px'; + if (action <= 0) + elem.style.height = e.clientY - valueY + 'px'; + }; + + var resizeEnd = function resizeEnd(e) { + if (e.button !== 0) + return; + + document.body.removeAttribute('data-resize', axis); + document.removeEventListener('mousemove', mouseMove); + document.removeEventListener('mouseup', resizeEnd); + }; + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + if (axis === 'width') action = 1; + else if (axis === 'height') action = -1; + else axis = 'both'; + + handle.className = 'resize-handle'; + handle.setAttribute('data-resize', axis); + handle.addEventListener('mousedown', resizeStart); + elem.appendChild(handle); + }; + + /*========== Make an element draggable relative to it's parent ==========*/ + + var makeDraggable = function makeDraggable(elem, endFunction) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + var dragStart = function dragStart(e) { + e.preventDefault(); + e.stopPropagation(); + + if (e.target.getAttribute('data-draggable') !== 'true' || + e.target !== elem || e.button !== 0) + return; + + offsetLeft = e.clientX - elem.offsetLeft; + offsetTop = e.clientY - elem.offsetTop; + + document.addEventListener('mousemove', mouseDrag); + document.addEventListener('mouseup', dragEnd); + }; + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + document.removeEventListener('mousemove', mouseDrag); + document.removeEventListener('mouseup', dragEnd); + }; + + var mouseDrag = function mouseDrag(e) { + elem.style.left = e.clientX - offsetLeft + 'px'; + elem.style.top = e.clientY - offsetTop + 'px'; + }; + + elem.addEventListener('mousedown', dragStart, false); + }; + + return { + makeResizable : makeResizable, + makeDraggable : makeDraggable + }; + + })(); + + /*========== Color Class ==========*/ + + var Color = UIColorPicker.Color; + var HSLColor = UIColorPicker.HSLColor; + + /** + * ColorPalette + */ + var ColorPalette = (function ColorPalette() { + + var samples = []; + var color_palette; + var complementary; + + var hideNode = function(node) { + node.setAttribute('data-hidden', 'true'); + }; + + var ColorSample = function ColorSample(id) { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.node = node; + this.color = new Color(); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('click', this.pickColor.bind(this)); + + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { + this.color.copy(color); + var hue = (steps * degree + this.color.hue) % 360; + if (hue < 0) hue += 360; + this.color.setHue(hue); + this.updateBgColor(); + }; + + ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { + var saturation = color.saturation + value * steps; + if (saturation <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setSaturation(saturation); + this.updateBgColor(); + }; + + ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { + var lightness = color.lightness + value * steps; + if (lightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setLightness(lightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { + var brightness = color.value + value * steps; + if (brightness <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.setValue(brightness); + this.updateBgColor(); + }; + + ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { + var alpha = parseFloat(color.a) + value * steps; + if (alpha <= 0) { + this.node.setAttribute('data-hidden', 'true'); + return; + } + this.node.removeAttribute('data-hidden'); + this.color.copy(color); + this.color.a = parseFloat(alpha.toFixed(2)); + this.updateBgColor(); + }; + + ColorSample.prototype.pickColor = function pickColor() { + UIColorPicker.setColor('picker', this.color); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'palette-samples'); + }; + + var Palette = function Palette(text, size) { + this.samples = []; + this.locked = false; + + var palette = document.createElement('div'); + var title = document.createElement('div'); + var controls = document.createElement('div'); + var container = document.createElement('div'); + var lock = document.createElement('div'); + + container.className = 'container'; + title.className = 'title'; + palette.className = 'palette'; + controls.className = 'controls'; + lock.className = 'lock'; + title.textContent = text; + + controls.appendChild(lock); + container.appendChild(title); + container.appendChild(controls); + container.appendChild(palette); + + lock.addEventListener('click', function () { + this.locked = !this.locked; + lock.setAttribute('locked-state', this.locked); + }.bind(this)); + + for(var i = 0; i < size; i++) { + var sample = new ColorSample(); + this.samples.push(sample); + palette.appendChild(sample.node); + } + + this.container = container; + this.title = title; + }; + + var createHuePalette = function createHuePalette() { + var palette = new Palette('Hue', 12); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 12; i++) { + palette.samples[i].updateHue(color, 30, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var createSaturationPalette = function createSaturationPalette() { + var palette = new Palette('Saturation', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 11; i++) { + palette.samples[i].updateSaturation(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + /* Brightness or Lightness - depends on the picker mode */ + var createVLPalette = function createSaturationPalette() { + var palette = new Palette('Lightness', 11); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + if(color.format === 'HSL') { + palette.title.textContent = 'Lightness'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateLightness(color, -10, i); + } + else { + palette.title.textContent = 'Value'; + for(var i = 0; i < 11; i++) + palette.samples[i].updateBrightness(color, -10, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var isBlankPalette = function isBlankPalette(container, value) { + if (value === 0) { + container.setAttribute('data-collapsed', 'true'); + return true; + } + + container.removeAttribute('data-collapsed'); + return false; + }; + + var createAlphaPalette = function createAlphaPalette() { + var palette = new Palette('Alpha', 10); + + UIColorPicker.subscribe('picker', function(color) { + if (palette.locked === true) + return; + + for(var i = 0; i < 10; i++) { + palette.samples[i].updateAlpha(color, -0.1, i); + } + }); + + color_palette.appendChild(palette.container); + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var init = function init() { + color_palette = getElemById('color-palette'); + + createHuePalette(); + createSaturationPalette(); + createVLPalette(); + createAlphaPalette(); + + }; + + return { + init : init, + getSampleColor : getSampleColor + }; + + })(); + + /** + * ColorInfo + */ + var ColorInfo = (function ColorInfo() { + + var info_box; + var select; + var RGBA; + var HEXA; + var HSLA; + + var updateInfo = function updateInfo(color) { + if (color.a | 0 === 1) { + RGBA.info.textContent = 'RGB'; + HSLA.info.textContent = 'HSL'; + } + else { + RGBA.info.textContent = 'RGBA'; + HSLA.info.textContent = 'HSLA'; + } + + RGBA.value.value = color.getRGBA(); + HSLA.value.value = color.getHSLA(); + HEXA.value.value = color.getHexa(); + }; + + var InfoProperty = function InfoProperty(info) { + + var node = document.createElement('div'); + var title = document.createElement('div'); + var value = document.createElement('input'); + var copy = document.createElement('div'); + + node.className = 'property'; + title.className = 'type'; + value.className = 'value'; + copy.className = 'copy'; + + title.textContent = info; + value.setAttribute('type', 'text'); + + copy.addEventListener('click', function() { + value.select(); + }); + + node.appendChild(title); + node.appendChild(value); + node.appendChild(copy); + + this.node = node; + this.value = value; + this.info = title; + + info_box.appendChild(node); + }; + + var init = function init() { + + info_box = getElemById('color-info'); + + RGBA = new InfoProperty('RGBA'); + HSLA = new InfoProperty('HSLA'); + HEXA = new InfoProperty('HEXA'); + + UIColorPicker.subscribe('picker', updateInfo); + + }; + + return { + init: init + }; + + })(); + + /** + * ColorPicker Samples + */ + var ColorPickerSamples = (function ColorPickerSamples() { + + var samples = []; + var nr_samples = 0; + var active = null; + var container = null; + var samples_per_line = 10; + var trash_can = null; + var base_color = new HSLColor(0, 50, 100); + var add_btn; + var add_btn_pos; + + var ColorSample = function ColorSample() { + var node = document.createElement('div'); + node.className = 'sample'; + + this.uid = samples.length; + this.index = nr_samples++; + this.node = node; + this.color = new Color(base_color); + + node.setAttribute('sample-id', this.uid); + node.setAttribute('draggable', 'true'); + + node.addEventListener('dragstart', this.dragStart.bind(this)); + node.addEventListener('dragover' , allowDropEvent); + node.addEventListener('drop' , this.dragDrop.bind(this)); + + this.updatePosition(this.index); + this.updateBgColor(); + samples.push(this); + }; + + ColorSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + ColorSample.prototype.updatePosition = function updatePosition(index) { + this.index = index; + this.posY = 5 + ((index / samples_per_line) | 0) * 52; + this.posX = 5 + ((index % samples_per_line) | 0) * 52; + this.node.style.top = this.posY + 'px'; + this.node.style.left = this.posX + 'px'; + }; + + ColorSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + ColorSample.prototype.activate = function activate() { + UIColorPicker.setColor('picker', this.color); + this.node.setAttribute('data-active', 'true'); + }; + + ColorSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + }; + + ColorSample.prototype.dragStart = function dragStart(e) { + e.dataTransfer.setData('sampleID', this.uid); + e.dataTransfer.setData('location', 'picker-samples'); + }; + + ColorSample.prototype.dragDrop = function dragDrop(e) { + e.stopPropagation(); + this.color = Tool.getSampleColorFrom(e); + this.updateBgColor(); + }; + + ColorSample.prototype.deleteSample = function deleteSample() { + container.removeChild(this.node); + samples[this.uid] = null; + nr_samples--; + }; + + var updateUI = function updateUI() { + updateContainerProp(); + + var index = 0; + var nr = samples.length; + for (var i=0; i < nr; i++) + if (samples[i] !== null) { + samples[i].updatePosition(index); + index++; + } + + AddSampleButton.updatePosition(index); + }; + + var deleteSample = function deleteSample(e) { + trash_can.parentElement.setAttribute('drag-state', 'none'); + + var location = e.dataTransfer.getData('location'); + if (location !== 'picker-samples') + return; + + var sampleID = e.dataTransfer.getData('sampleID'); + samples[sampleID].deleteSample(); + console.log(samples); + + updateUI(); + }; + + var createDropSample = function createDropSample() { + var sample = document.createElement('div'); + sample.id = 'drop-effect-sample'; + sample.className = 'sample'; + container.appendChild(sample); + }; + + var setActivateSample = function setActivateSample(e) { + if (e.target.className !== 'sample') + return; + + unsetActiveSample(active); + Tool.unsetVoidSample(); + CanvasSamples.unsetActiveSample(); + active = samples[e.target.getAttribute('sample-id')]; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var getSampleColor = function getSampleColor(id) { + if (samples[id] !== undefined && samples[id]!== null) + return new Color(samples[id].color); + }; + + var updateContainerProp = function updateContainerProp() { + samples_per_line = ((container.clientWidth - 5) / 52) | 0; + var height = 52 * (1 + (nr_samples / samples_per_line) | 0); + container.style.height = height + 10 + 'px'; + }; + + var AddSampleButton = (function AddSampleButton() { + var node; + var _index = 0; + var _posX; + var _posY; + + var updatePosition = function updatePosition(index) { + _index = index; + _posY = 5 + ((index / samples_per_line) | 0) * 52; + _posX = 5 + ((index % samples_per_line) | 0) * 52; + + node.style.top = _posY + 'px'; + node.style.left = _posX + 'px'; + }; + + var addButtonClick = function addButtonClick() { + var sample = new ColorSample(); + container.appendChild(sample.node); + updatePosition(_index + 1); + updateUI(); + }; + + var init = function init() { + node = document.createElement('div'); + var icon = document.createElement('div'); + + node.className = 'sample'; + icon.id = 'add-icon'; + node.appendChild(icon); + node.addEventListener('click', addButtonClick); + + updatePosition(0); + container.appendChild(node); + }; + + return { + init : init, + updatePosition : updatePosition + }; + })(); + + var init = function init() { + container = getElemById('picker-samples'); + trash_can = getElemById('trash-can'); + + AddSampleButton.init(); + + for (var i=0; i<16; i++) { + var sample = new ColorSample(); + container.appendChild(sample.node); + } + + AddSampleButton.updatePosition(samples.length); + updateUI(); + + active = samples[0]; + active.activate(); + + container.addEventListener('click', setActivateSample); + + trash_can.addEventListener('dragover', allowDropEvent); + trash_can.addEventListener('dragenter', function() { + this.parentElement.setAttribute('drag-state', 'enter'); + }); + trash_can.addEventListener('dragleave', function(e) { + this.parentElement.setAttribute('drag-state', 'none'); + }); + trash_can.addEventListener('drop', deleteSample); + + UIColorPicker.subscribe('picker', function(color) { + if (active) + active.updateColor(color); + }); + + }; + + return { + init : init, + getSampleColor : getSampleColor, + unsetActiveSample : unsetActiveSample + }; + + })(); + + /** + * Canvas Samples + */ + var CanvasSamples = (function CanvasSamples() { + + var active = null; + var canvas = null; + var samples = []; + var zindex = null; + var tutorial = true; + + var CanvasSample = function CanvasSample(color, posX, posY) { + + var node = document.createElement('div'); + var pick = document.createElement('div'); + var delete_btn = document.createElement('div'); + node.className = 'sample'; + pick.className = 'pick'; + delete_btn.className = 'delete'; + + this.uid = samples.length; + this.node = node; + this.color = color; + this.updateBgColor(); + this.zIndex = 1; + + node.style.top = posY - 50 + 'px'; + node.style.left = posX - 50 + 'px'; + node.setAttribute('sample-id', this.uid); + + node.appendChild(pick); + node.appendChild(delete_btn); + + var activate = function activate() { + setActiveSample(this); + }.bind(this); + + node.addEventListener('dblclick', activate); + pick.addEventListener('click', activate); + delete_btn.addEventListener('click', this.deleteSample.bind(this)); + + UIComponent.makeDraggable(node); + UIComponent.makeResizable(node); + + samples.push(this); + canvas.appendChild(node); + return this; + }; + + CanvasSample.prototype.updateBgColor = function updateBgColor() { + this.node.style.backgroundColor = this.color.getColor(); + }; + + CanvasSample.prototype.updateColor = function updateColor(color) { + this.color.copy(color); + this.updateBgColor(); + }; + + CanvasSample.prototype.updateZIndex = function updateZIndex(value) { + this.zIndex = value; + this.node.style.zIndex = value; + }; + + CanvasSample.prototype.activate = function activate() { + this.node.setAttribute('data-active', 'true'); + zindex.setAttribute('data-active', 'true'); + + UIColorPicker.setColor('picker', this.color); + InputSliderManager.setValue('z-index', this.zIndex); + }; + + CanvasSample.prototype.deactivate = function deactivate() { + this.node.removeAttribute('data-active'); + zindex.removeAttribute('data-active'); + }; + + CanvasSample.prototype.deleteSample = function deleteSample() { + if (active === this) + unsetActiveSample(); + canvas.removeChild(this.node); + samples[this.uid] = null; + }; + + CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { + this.node.style.top = posY - this.startY + 'px'; + this.node.style.left = posX - this.startX + 'px'; + }; + + var canvasDropEvent = function canvasDropEvent(e) { + var color = Tool.getSampleColorFrom(e); + + if (color) { + var offsetX = e.pageX - canvas.offsetLeft; + var offsetY = e.pageY - canvas.offsetTop; + var sample = new CanvasSample(color, offsetX, offsetY); + if (tutorial) { + tutorial = false; + canvas.removeAttribute('data-tutorial'); + var info = new CanvasSample(new Color(), 100, 100); + info.node.setAttribute('data-tutorial', 'dblclick'); + } + } + + }; + + var setActiveSample = function setActiveSample(sample) { + ColorPickerSamples.unsetActiveSample(); + Tool.unsetVoidSample(); + unsetActiveSample(); + active = sample; + active.activate(); + }; + + var unsetActiveSample = function unsetActiveSample() { + if (active) + active.deactivate(); + active = null; + }; + + var createToggleBgButton = function createToggleBgButton() { + var button = document.createElement('div'); + var state = false; + button.className = 'toggle-bg'; + canvas.appendChild(button); + + button.addEventListener('click', function() { + console.log(state); + state = !state; + canvas.setAttribute('data-bg', state); + }); + }; + + var init = function init() { + canvas = getElemById('canvas'); + zindex = getElemById('zindex'); + + canvas.addEventListener('dragover', allowDropEvent); + canvas.addEventListener('drop', canvasDropEvent); + + createToggleBgButton(); + + UIColorPicker.subscribe('picker', function(color) { + if (active) active.updateColor(color); + }); + + InputSliderManager.subscribe('z-index', function (value) { + if (active) active.updateZIndex(value); + }); + + UIComponent.makeResizable(canvas, 'height'); + }; + + return { + init : init, + unsetActiveSample : unsetActiveSample + }; + + })(); + + var StateButton = function StateButton(node, state) { + this.state = false; + this.callback = null; + + node.addEventListener('click', function() { + this.state = !this.state; + if (typeof this.callback === "function") + this.callback(this.state); + }.bind(this)); + }; + + StateButton.prototype.set = function set() { + this.state = true; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.unset = function unset() { + this.state = false; + if (typeof this.callback === "function") + this.callback(this.state); + }; + + StateButton.prototype.subscribe = function subscribe(func) { + this.callback = func; + }; + + + /** + * Tool + */ + var Tool = (function Tool() { + + var samples = []; + var controls = null; + var void_sw; + + var createPickerModeSwitch = function createPickerModeSwitch() { + var parent = getElemById('controls'); + var icon = document.createElement('div'); + var button = document.createElement('div'); + var hsv = document.createElement('div'); + var hsl = document.createElement('div'); + var active = null; + + icon.className = 'icon picker-icon'; + button.className = 'switch'; + button.appendChild(hsv); + button.appendChild(hsl); + + hsv.textContent = 'HSV'; + hsl.textContent = 'HSL'; + + active = hsl; + active.setAttribute('data-active', 'true'); + + function switchPickingModeTo(elem) { + active.removeAttribute('data-active'); + active = elem; + active.setAttribute('data-active', 'true'); + UIColorPicker.setPickerMode('picker', active.textContent); + }; + + var picker_sw = new StateButton(icon); + picker_sw.subscribe(function() { + if (active === hsv) + switchPickingModeTo(hsl); + else + switchPickingModeTo(hsv); + }); + + hsv.addEventListener('click', function() { + switchPickingModeTo(hsv); + }); + hsl.addEventListener('click', function() { + switchPickingModeTo(hsl); + }); + + parent.appendChild(icon); + parent.appendChild(button); + }; + + var setPickerDragAndDrop = function setPickerDragAndDrop() { + var preview = document.querySelector('#picker .preview-color'); + var picking_area = document.querySelector('#picker .picking-area'); + + preview.setAttribute('draggable', 'true'); + preview.addEventListener('drop', drop); + preview.addEventListener('dragstart', dragStart); + preview.addEventListener('dragover', allowDropEvent); + + picking_area.addEventListener('drop', drop); + picking_area.addEventListener('dragover', allowDropEvent); + + function drop(e) { + var color = getSampleColorFrom(e); + UIColorPicker.setColor('picker', color); + }; + + function dragStart(e) { + e.dataTransfer.setData('sampleID', 'picker'); + e.dataTransfer.setData('location', 'picker'); + }; + }; + + var getSampleColorFrom = function getSampleColorFrom(e) { + var sampleID = e.dataTransfer.getData('sampleID'); + var location = e.dataTransfer.getData('location'); + + if (location === 'picker') + return UIColorPicker.getColor(sampleID); + if (location === 'picker-samples') + return ColorPickerSamples.getSampleColor(sampleID); + if (location === 'palette-samples') + return ColorPalette.getSampleColor(sampleID); + }; + + var setVoidSwitch = function setVoidSwitch() { + var void_sample = getElemById('void-sample'); + void_sw = new StateButton(void_sample); + void_sw.subscribe( function (state) { + void_sample.setAttribute('data-active', state); + if (state === true) { + ColorPickerSamples.unsetActiveSample(); + CanvasSamples.unsetActiveSample(); + } + }); + }; + + var unsetVoidSample = function unsetVoidSample() { + void_sw.unset(); + }; + + var init = function init() { + controls = getElemById('controls'); + + var color = new Color(); + color.setHSL(0, 51, 51); + UIColorPicker.setColor('picker', color); + + setPickerDragAndDrop(); + createPickerModeSwitch(); + setVoidSwitch(); + }; + + return { + init : init, + unsetVoidSample : unsetVoidSample, + getSampleColorFrom : getSampleColorFrom + }; + + })(); + + var init = function init() { + UIColorPicker.init(); + InputSliderManager.init(); + ColorInfo.init(); + ColorPalette.init(); + ColorPickerSamples.init(); + CanvasSamples.init(); + Tool.init(); + }; + + return { + init : init + }; + +})(); +</pre> +</div> + +<p>{{CSSRef}}</p> + +<p><font><font>이 도구를 사용하면 웹용 사용자 정의 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다. </font></font><font><font>또한 </font><font>HEXA 색상, RGB (빨강 / 녹색 / 파랑) 및 HSL (색조 / 채도 / 밝기)를 비롯하여 </font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><font>CSS</font></a><font> 에서 </font><font>지원하는 </font><font>다양한 </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><font><font>색상 형식</font></font></a><font><font> 간에 쉽게 변환 할 수 </font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><font>있습니다</font></a><font> . </font><font>RGB (rgba) 및 HSL (hsla) 형식에서도 알파 채널을 제어 할 수 있습니다.</font></font></p> + +<p><font><font>색상을 정의하는 매개 변수를 조정하면 세 가지 표준 웹 CSS 형식으로 모두 표시됩니다. </font><font>또한 현재 선택한 색상을 기반으로 HSL 및 HSV 용 팔레트와 알파가 생성됩니다. </font><font>"스포이드"스타일 색상 선택 도구 상자는 HSL 또는 HSV 형식으로 전환 할 수 있습니다. </font><font>도구의 바닥에있는 상자로 색상을 드래그하고 서로 위로 움직여 색상을 비교할 수 있습니다. </font><font>상대 Z 색인 값을 조정하여 서로를 앞뒤로 이동하십시오.</font></font></p> + +<p><font><font>이 도구는 </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML"><font><font>HTML</font></font></a><font><font> 에 적용 할 완벽한 CSS 색상을 식별하는 데 도움을줍니다 </font><font>.</font></font></p> + +<p> </p> + +<p> </p> + +<p><font><font>{{EmbedLiveSample ( 'ColorPicker_Tool', '100 %', '900')}}</font></font></p> + +<p><font><font>위에서 작성한 생성 된 색상은 달리 명시하지 않는 한 CSS 및 HTML에서 색상이 사용되는 모든 위치에서 사용할 수 있습니다.</font></font></p> + +<p> </p> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<p>For more on using color, see:</p> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Changing background styles using CSS</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a></li> +</ul> diff --git a/files/ko/web/css/css_columns/index.html b/files/ko/web/css/css_columns/index.html new file mode 100644 index 0000000000..efe31f5761 --- /dev/null +++ b/files/ko/web/css/css_columns/index.html @@ -0,0 +1,89 @@ +--- +title: CSS Multi-column Layout +slug: Web/CSS/CSS_Columns +tags: + - CSS + - CSS Multi-column Layout + - Layout + - Overview + - Reference +translation_of: Web/CSS/CSS_Columns +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Multi-column Layout</strong>은 다단 레이아웃을 정의하는 CSS 모듈입니다. 레이아웃에서 단의 숫자와 콘텐츠가 하나의 단에서 다른 단으로 흐르는 방식, 단 사이의 간격, 구분선과 구분선의 모양 등의 지원을 포함하고 있습니다.</p> + +<h2 id="참고">참고</h2> + +<h3 id="CSS_속성">CSS 속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("break-after")}}</li> + <li>{{cssxref("break-before")}}</li> + <li>{{cssxref("break-inside")}}</li> + <li>{{cssxref("column-count")}}</li> + <li>{{cssxref("column-fill")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("column-rule")}}</li> + <li>{{cssxref("column-rule-color")}}</li> + <li>{{cssxref("column-rule-style")}}</li> + <li>{{cssxref("column-rule-width")}}</li> + <li>{{cssxref("column-span")}}</li> + <li>{{cssxref("column-width")}}</li> + <li>{{cssxref("columns")}}</li> +</ul> +</div> + +<h3 id="관련_CSS_Fragmentation_속성">관련 CSS Fragmentation 속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("break-after")}}</li> + <li>{{cssxref("break-before")}}</li> + <li>{{cssxref("break-inside")}}</li> + <li>{{cssxref("orphans")}}</li> + <li>{{cssxref("widows")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">다단 레이아웃 기초 개념</a></dt> + <dd>다단 레이아웃 명세를 훑어봅니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Columns/Styling_Columns">단 꾸미기</a></dt> + <dd>구분선과 단 사이 간격을 조절합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Columns/Spanning_Columns">폭과 균형</a></dt> + <dd>요소가 모든 단에 걸쳐있도록 만들고, 한 단이 채워지는 방식을 조정합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">다단에서 오버플로 다루기</a></dt> + <dd>어떤 요소가 자신의 단을 넘쳤을 때 일어나는 일과, 컨테이너 너비에 맞추기에는 너무 많은 단이 들어있을 때 발생하는 일을 배웁니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">다단에서 콘텐츠 끊기</a></dt> + <dd>CSS Fragmentation 명세의 소개와 함께 단 콘텐츠를 끊는 법을 배웁니다.</dd> +</dl> + +<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 Multicol')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a> (CSS 플렉스박스)</li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> +</ul> diff --git a/files/ko/web/css/css_conditional_rules/index.html b/files/ko/web/css/css_conditional_rules/index.html new file mode 100644 index 0000000000..22576d5256 --- /dev/null +++ b/files/ko/web/css/css_conditional_rules/index.html @@ -0,0 +1,44 @@ +--- +title: CSS Conditional Rules +slug: Web/CSS/CSS_Conditional_Rules +tags: + - CSS + - CSS Conditional Rules + - Overview + - Reference +translation_of: Web/CSS/CSS_Conditional_Rules +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Conditional Rules</strong>는 프로세서 또는 스타일 시트에 적용되는 문서의 기능에만 기반을 두는 규칙 집합을 정의할 수 있는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="규칙">@규칙</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@document")}}</li> + <li>{{cssxref("@media")}}</li> + <li>{{cssxref("@supports")}}</li> +</ul> +</div> + +<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 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_containment/index.html b/files/ko/web/css/css_containment/index.html new file mode 100644 index 0000000000..bbfe8f3e7c --- /dev/null +++ b/files/ko/web/css/css_containment/index.html @@ -0,0 +1,123 @@ +--- +title: CSS Containment +slug: Web/CSS/CSS_Containment +translation_of: Web/CSS/CSS_Containment +--- +<p>{{CSSRef}}<br> + CSS Containment 사양의 목표는 개발자가 페이지의 하위 트리(subtree)를 페이지의 나머지 부분과 분리할 수 있도록 하여 웹 페이지의 성능을 향상시키는 것입니다. 브라우저가 페이지의 일부가 독립적임을 인식하면 렌더링을 최적화 하고 성능을 개선 할 수 있습니다. 사양은 단일 CSS 속성(property) {{cssxref("contain")}}을 정의합니다. 이 문서는 사양의 기본 목표를 설명합니다.</p> + +<h2 id="기본_예제">기본 예제</h2> + +<p>많은 웹 페이지에는 서로 독립적인 여러 섹션이 포함되어 있습니다. 예를들면 아래 마크업에서와 같이 아티클, 헤드라인, 콘텐츠 로 이루어진 목록입니다.</p> + +<pre class="brush: html notranslate"><h1>My blog</h1> +<article> + <h2>Heading of a nice article</h2> + <p>Content here.</p> +</article> +<article> + <h2>Another heading of another article</h2> + <p>More content here.</p> +</article></pre> + +<p>각 아티클에는 CSS에서 {{cssxref("contain")}} 속성의 값으로 <code>content</code> 가 적용되어 있습니다.</p> + +<pre class="brush: css notranslate">article { + contain: content; +}</pre> + +<p>각 아티클은 페이지의 다른 아티클과 독립적이므로 브라우저에 이러한 사실을 알리기 위해 <code>contain: content</code>가 포함되어 있습니다. 그러면 브라우저는 이 정보를 사용하여 컨텐츠를 렌더링하는 방법을 결정할 수 있습니다. 예를들어 볼 수 있는 영역 밖에있는 아티클은 렌더링하지 않을 수 있습니다. </p> + +<p>각 <code><article></code> 에 <code>contain</code> 속성의 값을 <code>content</code> 로 제공하면, 새 요소(element)가 삽입될 때 브라우저는 containing 요소들의 하위 트리 외부 영역을 relayout(reflow)하거나 repaint 할 필요가 없음을 인식합니다. <code><article></code> 이 내용에 따라 크기가 달라지도록 스타일을 지정하더라도(예: <code>height: auto</code>), 브라우저는 크기 변경을 고려해야 할 수 있습니다.</p> + +<p>우리는 <code>contain</code> 속성을 통해 각 아티클이 독립적이라고 말했습니다.</p> + +<p><code>content</code> 값은 <code>contain: layout paint</code>의 약어입니다. 브라주어에 요소의 내부 레이아웃이 페이지의 나머지 부분과 완전히 분리되어 있으며, 요소에 대한 모든 것이 경계 내부에 그려져 있음을 알려줍니다. overflow되어 보이는 것이 없습니다.</p> + +<p>이 정보는 페이지를 작성하는 웹 개발자에게 일반적으로 알려져 있으며, 사실 매우 분명합니다. 그러나 브라우저는 귀하의 의도를 추측할 수 없고, 아티클이 완전히 독립적일 것이라고 가정할 수 없습니다. 따라서 이 속성은 브라우저에게 이 사실을 설명하고, 그 정보를 기반으로 성능 최적화를 수행할 수 있는 좋은 방법을 제공합니다.</p> + +<h2 id="주요_개념_및_용어">주요 개념 및 용어</h2> + +<p>이 사양은 오로지 {{cssxref("contain")}} 이라는 하나의 속성(property)만 정의합니다. 이 속성의 값은 해당 요소에 적용 할 포함 유형을 나타냅니다.</p> + +<h3 id="Layout_containment">Layout containment</h3> + +<pre class="brush: css notranslate">article { + contain: layout; +}</pre> + +<p>Layout 은 일반적으로 전체 문서로 범위가 지정됩니다. 즉, 하나의 요소를 이동하면 전체 문서를 다른 곳으로 이동할 수 있는 것처럼 처리해야 합니다. 그러나 <code>contain: layout</code> 을 사용하면 브라우저에 이 요소만 확인하면 된다고 알려줄 수 있습니다. 요소 내부의 모든 항목은 해당 요소로 범위가 지정되고, 페이지의 나머지 부분에는 영향을 주지 않습니다. 그리고 containing box는 독립적인 formatting context를 설정합니다.</p> + +<p>추가사항</p> + +<ul> + <li><code>float</code> 레이아웃은 독립적으로 수행됩니다.</li> + <li>Margin 이 layout containment 경계를 가로질러 병합(collapse)되지 않습니다.</li> + <li>layout 컨테이너는 position: <code>absolute</code>/<code>fixed</code> 의 하위 항목에 대한 containing block이 됩니다.</li> + <li>containing box는 stacking context를 생성합니다. 따라서 {{cssxref("z-index")}} 를 사용할 수 있습니다.</li> +</ul> + +<h3 id="Paint_containment">Paint containment</h3> + +<pre class="brush: css notranslate">article { + contain: paint; +}</pre> + +<p>Paint containment 는 기본적으로 박스를 주요 박스(principal box)의 패딩 경계에 클립(clip - 맞춰서 채우기)합니다. overflow되어 보이는 것이 없습니다. <code>paint</code> containment 도 <code>layout</code> containment 와 마찬가지입니다. (위 참조).</p> + +<p>또다른 장점은 containing box가 화면 밖에 있으면, 브라우저가 contained 요소를 paint 할 필요가 없다는 것입니다. 이 때 요소가 box에 포함되어 있으므로 화면에 표시되지 않아야 합니다.</p> + +<h3 id="Size_containment">Size containment</h3> + +<pre class="brush: css notranslate">article { + contain: size; +}</pre> + +<p>Size containment 는 자체적으로 사용될 때 성능 최적화 방법을 많이 제공하지 않습니다. 그러나 이는 요소의 자식 크기가 요소 자체의 크기에 영향을 줄 수 없음을 의미합니다. 요소의 크기는 자식이 존재하지 않는 것처럼 계산됩니다.</p> + +<p><code>contain: size</code> 를 적용하면, 이를 적용한 요소의 크기도 지정해야 합니다. 수동으로 크기를 지정하지 않으면, 대부분의 경우 크기가 0이 됩니다.</p> + +<h3 id="Style_containment">Style containment</h3> + +<pre class="brush: css notranslate">article { + contain: style; +}</pre> + +<p>style containment 는 이름에도 불구하고 <a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>에서 얻을 수 있는 범위(scope) 스타일을 제공하지 않습니다. 주요 사용 사례는, 요소에서 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS Counter</a> 가 변경되어 나머지 트리에 영향을 미칠 수 있는 상황을 방지하는 것입니다.</p> + +<p><code>contain: style</code> 을 사용하면 {{cssxref("counter-increment")}} 와 {{cssxref("counter-set")}} 속성이 해당 하위 트리로만 범위가 지정된 새 카운터를 만들 수 있습니다.</p> + +<div class="blockIndicator note"> +<p><strong>주의</strong>: <code>style</code> containment 는 사양에서 "at-risk" 이며, 모든 곳에서 지원하지 않을 수 있습니다(현재 파이어폭스는 지원하지 않음).</p> +</div> + +<h3 id="Special_values">Special values</h3> + +<p>contain 에는 두 가지 특수한 값이 있습니다.</p> + +<ul> + <li><code>content</code></li> + <li><code>strict</code></li> +</ul> + +<p>위의 예에서 첫 번째를 만났습니다. <code>contain: content</code> 는 <code>layout</code> 과 <code>paint</code> containment를 모두 활성화합니다. 사양에서는 이 값을 "광범위하게 적용하기에 합리적으로 안전" 하다고 설명합니다. <code>size</code> containment 를 적용하지 않으므로 자식의 크기에 의존하고, 때문에 박스 크기가 0이 될 위험이 없습니다.</p> + +<p>가능한 많은 containment 를 얻으려면 <code>contain: strict</code> 를 사용할 수 있습니다. 이는 <code>contain: size layout paint</code> 와 같습니다. 또는 <code>style</code> containment 를 지원하는 브라우저에서는 다음과 같이 사용할 수 있습니다.</p> + +<pre class="brush: css notranslate">contain: strict; +contain: strict style;</pre> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<ul> + <li>{{cssxref("contain")}}</li> +</ul> + +<h2 id="External_resources">External resources</h2> + +<ul> + <li><a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">An Introduction to CSS Containment</a></li> + <li><a href="https://dev.opera.com/articles/css-will-change-property">Everything You Need to Know About the CSS <code>will-change</code> Property</a></li> +</ul> diff --git a/files/ko/web/css/css_device_adaptation/index.html b/files/ko/web/css/css_device_adaptation/index.html new file mode 100644 index 0000000000..bd55f655bc --- /dev/null +++ b/files/ko/web/css/css_device_adaptation/index.html @@ -0,0 +1,42 @@ +--- +title: CSS Device Adaptation +slug: Web/CSS/CSS_Device_Adaptation +tags: + - CSS + - CSS Device Adaptation + - Overview + - Reference +translation_of: Web/CSS/CSS_Device_Adaptation +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Device Adapation</strong>은 뷰포트의 크기, 줌 배율(factor) 및 방향을 정의할 수 있는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="규칙">@규칙</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@viewport")}}</li> +</ul> +</div> + +<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")}}</td> + <td>{{Spec2("CSS3 Device")}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..677cf2fdaf --- /dev/null +++ b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,211 @@ +--- +title: Aligning Items in a Flex Container +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +<p>{{CSSRef}}</p> + +<p class="summary">flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스는 <strong>flex 컨테이너</strong>를 의미합니다) 내부를 중앙 정렬 할 수 있게 되었습니다. 이 가이드에서 우리는 flexbox의 정렬 및 끝 마추기 기능에 대해 자세히 살펴볼 것입니다.</p> + +<p>박스 내부를 중앙 정렬 하기 위해 박스에 <code>align-items</code> 속성을 지정하면 교차 축에 대해 flex 항목을 정렬할 수 있습니다. 아래 경우, 교차 축은 수직 축입니다. <code>justify-content</code> 속성을 지정하면 flex 항목을 주축에 대해 정렬 할 수 있습니다. 아래 경우, 주축은 수평 방향입니다.</p> + +<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> + + + +<p>아래 예제의 코드를 살펴보세요. flex 컨테이너(역주: .box로 지정된 div 태그)나 flex 항목(역주: .box div로 지정된 div 태그)의 크기를 조절해도 flex 컨테이너 내부는 중앙 정렬됨을 보실 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> + +<h2 id="정렬_제어용_속성_목록">정렬 제어용 속성 목록</h2> + +<p>이 글에서 살펴볼 속성들은 다음과 같습니다.</p> + +<ul> + <li>{{cssxref("justify-content")}} — 주축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.</li> + <li>{{cssxref("align-items")}} — 교차축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.</li> + <li>{{cssxref("align-self")}} — 개별 flex 항목을 교차 축에 대해 정렬 하는 방식을 제어. flex 항목에 지정하는 속성.</li> + <li>{{cssxref("align-content")}} — described in the spec as for “packing flex lines”; controls space between flex lines on the cross axis.</li> +</ul> + +<p>또한, 이글에서 flexbox기반 정렬에서 margin 속성 값이 어떨게 쓰이는지 살펴볼 것입니다.</p> + +<div class="note"> +<p><strong>Note</strong>: The alignment properties in Flexbox have been placed into their own specification — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. It is expected that this spec will ultimately supersede the properties as defined in Flexbox Level One.</p> +</div> + +<h2 id="교차축">교차축</h2> + +<p><code>align-items</code>와 <code>align-self</code> 속성들은 flex 항목들을 교차축으로 정렬하는 것을 제어합니다. 만약, <code>flex-direction</code>이 <code>row</code>로 설정되어있다면 열 (column) 아래로 정렬을 하게되고, <code>flex-direction</code>이 <code>column</code>으로 설정되어있다면 행 (row)을 따라 정렬됩니다. </p> + +<p>가장 간단한 flex예시는 교차축을 이용합니다. <code>display: flex</code>를 컨테이너에 추가하게되면, 모든 자식 항목들이 열 (row), 즉 가로 방향으로 정렬이 되는 flex 항목이 됩니다. 이 경우 가장 큰 y축의 크기, 즉 높이가 가장 큰 자식 항목이 교차축의 높이를 정의하게 되고, 나머지 자식 항목들은 이 높이에 맞추어 높이가 늘어나게 됩니다. 만약 flex 컨테이너의 높이가 지정이 되어있다면, 자식 항목 내용에 상관없이 지정된 높이 만큼 모든 자식 항목들이 늘어나게됩니다. </p> + +<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p> + +<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p> + +<p>모든 항목들이 같은 높이를 갖게되는 이유는 교차축을 중심으로 정렬을 제어하는 속성인 <code>align-items</code>에 지정된 초기값이 <code>stretch</code>로 설정이 되어있기 때문입니다. </p> + +<p>이외에도 다른 값을 지정해서 항목들이 정렬되는 방식을 다르게 정의 할 수 있습니다:</p> + +<ul> + <li><code>align-items: flex-start</code></li> + <li><code>align-items: flex-end</code></li> + <li><code>align-items: center</code></li> + <li><code>align-items: stretch</code></li> + <li><code>align-items: baseline</code></li> +</ul> + +<p>아래의 예시를 보면, <code>align-items</code>값이 <code>stretch</code>로 지정이 되어있습니다. 여기에 다른 값들을 넣어서 항목들이 flex 컨테이너 안에서 어떻게 정렬이 되는지 확인해보세요.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p> + +<h3 id="align-self로_항목_한_개를_정렬하기"><code>align-self</code>로 항목 한 개를 정렬하기</h3> + +<p>The <code>align-items</code> property sets the <code>align-self</code> property on all of the flex items as a group. This means you can explicitly declare the <code>align-self</code> property to target a single item. The <code>align-self</code> property accepts all of the same values as <code>align-items</code> plus a value of <code>auto</code>, which will reset the value to that which is defined on the flex container.</p> + +<p>In this next live example, the flex container has <code>align-items: flex-start</code>, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a <code>first-child</code> selector and set that item to <code>align-items: stretch</code>; another item has been selected using its class of <code>selected</code> and given <code>align-self: </code><code>center</code>. You can change the value of <code>align-items</code> or change the values of <code>align-self</code> on the individual items to see how this works.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p> + +<h3 id="Changing_the_main_axis">Changing the main axis</h3> + +<p>So far we have looked at the behaviour when our <code>flex-direction</code> is <code>row</code>, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.</p> + +<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p> + +<p>If we change our <code>flex-direction</code> to column, <code>align-items</code> and <code>align-self</code> will align the items to the left and right.</p> + +<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p> + +<p>You can try this out in the example below, which has a flex container with <code>flex-direction: column</code> yet otherwise is exactly the same as the previous example.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p> + +<h2 id="Aligning_content_on_the_cross_axis_—_the_align-content_property">Aligning content on the cross axis — the align-content property</h2> + +<p>So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the <code>align-content</code> property to control the distribution of space between the rows. In the specification this is described as <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">packing flex lines</a>.</p> + +<p>For <code>align-content</code> to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.</p> + +<p>The <code>align-content</code> property takes the following values:</p> + +<ul> + <li><code>align-content: flex-start</code></li> + <li><code>align-content: flex-end</code></li> + <li><code>align-content: center</code></li> + <li><code>align-content: space-between</code></li> + <li><code>align-content: space-around</code></li> + <li><code>align-content: stretch</code></li> + <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li> +</ul> + +<p>In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of <code>align-content</code> is <code>space-between</code>, which means that the available space is shared out <em>between</em> the flex lines, which are placed flush with the start and end of the container on the cross axis.</p> + +<p>Try out the other values to see how the <code>align-content</code> property works.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p> + +<p>Once again we can switch our <code>flex-direction</code> to <code>column</code> in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p> + +<div class="note"> +<p><strong>Note</strong>: the value <code>space-evenly</code> is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.</p> +</div> + +<p>See the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentation for <code>justify-content</code> on MDN</a> for more details on all of these values and browser support.</p> + +<h2 id="Aligning_content_on_the_main_axis">Aligning content on the main axis</h2> + +<p>Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — <code>justify-content</code>. This is because we are only dealing with items as a group on the main axis. With <code>justify-content</code> we control what happens with available space, should there be more space than is needed to display the items.</p> + +<p>In our initial example with <code>display: flex</code> on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of <code>justify-content</code> being <code>flex-start</code>. Any available space is placed at the end of the items.</p> + +<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>The <code>justify-content</code> property accepts the same values as <code>align-content</code>.</p> + +<ul> + <li><code>justify-content: flex-start</code></li> + <li><code>justify-content: flex-end</code></li> + <li><code>justify-content: center</code></li> + <li><code>justify-content: space-between</code></li> + <li><code>justify-content: space-around</code></li> + <li><code>justify-content: stretch</code></li> + <li><code>justify-content: space-evenly</code> (not defined in the Flexbox specification)</li> +</ul> + +<p>In the example below, the value of <code>justify-content</code> is <code>space-between</code>. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p> + +<p>If the main axis is in the block direction because <code>flex-direction</code> is set to <code>column</code>, then <code>justify-content</code> will distribute space between items in that dimension as long as there is space in the flex container to distribute.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p> + +<h3 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h3> + +<p>Remember that with all of these alignment methods, the values of <code>flex-start</code> and <code>flex-end</code> are writing mode-aware. If the value of <code>justify-content</code> is <code>start</code> and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.</p> + +<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.</p> + +<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>The live example below has the <code>direction</code> property set to <code>rtl</code> to force a right-to-left flow for our items. You can remove this, or change the values of <code>justify-content</code> to see how flexbox behaves when the start of the inline direction is on the right.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p> + +<h2 id="Alignment_and_flex-direction">Alignment and flex-direction</h2> + +<p>The start line will also change if you change the <code>flex-direction</code> property — for example using <code>row-reverse</code> instead of <code>row</code>.</p> + +<p>In this next example I have items laid out with <code>flex-direction: row-reverse</code> and <code>justify-content: flex-end</code>. In a left to right language the items all line up on the left. Try changing <code>flex-direction: row-reverse</code> to <code>flex-direction: row</code>. You will see that the items now move to the right hand side.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p> + +<p>While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. <code>flex-start</code> will be where the start of a sentence of text would begin.</p> + +<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>You can switch them to display in the block direction for the language of your document by selecting <code>flex-direction: column</code>. Then <code>flex-start</code> will then be where the top of your first paragraph of text would start.</p> + +<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. <code>flex-start</code> will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.</p> + +<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<h2 id="Using_auto_margins_for_main_axis_alignment">Using auto margins for main axis alignment</h2> + +<p>We don’t have a <code>justify-items</code> or <code>justify-self</code> property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.</p> + +<p>A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a <code>justify-self</code> property, however consider the image below. I have three items on one side and two on the other. If I were able to use <code>justify-self</code> on item <em>d</em>, it would also change the alignment of item <em>e</em> that follows, which may or may not be my intention.</p> + +<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> + +<p>Instead we can target item 4 and separate it from the first three items by giving it a <code>margin-left</code> value of <code>auto</code>. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.</p> + +<p>In this live example, I have flex items arranged simply into a row with the basic flex values, and the class <code>push</code> has <code>margin-left: auto</code>. You can try removing this, or adding the class to another item to see how it works.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p> + +<h2 id="Future_alignment_features_for_Flexbox">Future alignment features for Flexbox</h2> + +<p>At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the <code>space-evenly</code> value for <code>align-content</code> and <code>justify-content</code> properties.</p> + +<p>The Box Alignment module also includes other methods of creating space between items, such as the <code>column-gap</code> and <code>row-gap</code> feature as seen in <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. The inclusion of these properties in Box Alignment means that in future we should be able to use <code>column-gap</code> and <code>row-gap</code> in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.</p> + +<p>My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, and I have also compared how alignment works in these specifications in my <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box Alignment in Flexbox</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Box Alignment in Grid Layout</a></li> +</ul> diff --git a/files/ko/web/css/css_flexible_box_layout/flexbox의_기본_개념/index.html b/files/ko/web/css/css_flexible_box_layout/flexbox의_기본_개념/index.html new file mode 100644 index 0000000000..1966114608 --- /dev/null +++ b/files/ko/web/css/css_flexible_box_layout/flexbox의_기본_개념/index.html @@ -0,0 +1,236 @@ +--- +title: flexbox의 기본 개념 +slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p class="summary">일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능에 대한 개요를 다룹니다. 더 자세한 내용은 가이드의 다른 글에서 탐구하게 될 것입니다.</p> + +<p>flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻입니다. 이는 행과 열을 함께 조절하는 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a>의 2차원 모델과는 대조됩니다.</p> + +<h2 id="flexbox의_두_개의_축">flexbox의 두 개의 축</h2> + +<p>flexbox를 다루려면 주축과 교차축이라는 두 개의 축에 대한 정의를 알아야 합니다. 주축은 {{cssxref("flex-direction")}} 속성을 사용하여 지정하며 교차축은 이에 수직인 축으로 결정됩니다. flexbox의 동작은 결국 이 두 개의 축에 대한 문제로 환원되기 때문에 이들이 어떻게 동작하는지 처음부터 이해하는 것이 중요합니다.</p> + +<h3 id="주축">주축</h3> + +<p>주축은 <code>flex-direction</code>에 의해 정의되며 4개의 값을 가질 수 있습니다:</p> + +<ul> + <li><code>row</code></li> + <li><code>row-reverse</code></li> + <li><code>column</code></li> + <li><code>column-reverse</code></li> +</ul> + +<p><code>row</code> 혹은 <code>row-reverse</code>를 선택하면 주축은 <strong>인라인 방향</strong>으로 행을 따릅니다.</p> + +<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p><code>column</code> 혹은 <code>column-reverse</code> 을 선택하면 주축은 페이지 상단에서 하단으로 <strong>블록 방향</strong>을 따릅니다.</p> + +<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> + +<h3 id="교차축">교차축</h3> + +<p>교차축은 주축에 수직하므로, 만약 <code>flex-direction</code>(주축)이 <code>row</code> 나 <code>row-reverse</code> 라면 교차축은 열 방향을 따릅니다.</p> + +<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> + +<p>주축이 <code>column</code> 혹은 <code>column-reverse</code> 라면 교차축은 행 방향을 따릅니다.</p> + +<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> + +<p>flex 요소를 정렬하고 끝을 맞추(justify)려면 어느 축이 어느 방향인지 이해하는 것이 중요합니다; flexbox는 주축, 교차축을 따라 항목을 정렬하고 끝을 맞추는 각종 속성들을 적용하는 방식으로 동작합니다.</p> + +<h2 id="시작선과_끝선">시작선과 끝선</h2> + +<p>flexbox가 쓰기 방법(writing mode)을 가정하지 않는다는 것은 상당히 중요합니다. 과거의 CSS는 왼쪽에서 오른쪽으로 향하는 가로 방향의 쓰기 방법에 치우쳐 있었습니다. 하지만 현대의 레이아웃은 다양한 쓰기 방법을 포괄해야 하므로, 더이상 텍스트가 문서의 왼쪽 상단에서 시작해서 오른쪽으로 향한다고 가정하지 않습니다. 새 라인이 항상 아래에 쌓인다고 가정하지도 않습니다.</p> + +<p>다른 글에서 flexbox와 쓰기 방법 명세(writing mode spec.)가 어떤 관련이 있는지 알아볼 수 있습니다. 그 전에, 이 글에서 flex 요소의 정렬 방향에 "왼쪽, 오른쪽, 위, 아래"를 사용하지 않는 이유를 알 수 있었으면 합니다.</p> + +<p><code>flex-direction</code>이 <code>row</code>고 영어 문장을 문서에 쓰고 있다면, 주축의 시작선은 왼쪽 끝, 끝선은 오른쪽 끝이 될 것입니다.</p> + +<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>아랍어 문장을 쓰고 있다면, 주축의 시작선은 오른쪽 끝, 끝 선은 왼쪽 끝이 될 것입니다.</p> + +<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>영어와 아랍어는 모두 가로 쓰기를 채택하고 있으므로 두 예시에서 교차축의 시작선은 <strong>flex 컨테이너</strong>의 위 끝이며 끝선은 아래 끝입니다.</p> + +<p>조금만 지나면 왼쪽-오른쪽으로 생각하는 것보다 시작선-끝선으로 생각하는 것이 금새 자연스러워질 것입니다. 동일한 패턴을 따르는 CSS 그리드 레이아웃 같은 방법을 다룰 때도 쉽게 적응할 수 있을 것입니다.</p> + +<h2 id="flex_컨테이너">flex 컨테이너</h2> + +<p>문서의 영역 중에서 flexbox가 놓여있는 영역을 <strong>flex 컨테이너</strong>라고 부릅니다. flex 컨테이너를 생성하려면 영역 내의 컨테이너 요소의 {{cssxref("display")}} 값을 <code>flex</code> 혹은 <code>inline-flex</code>로 지정합니다. 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 <strong>flex 항목</strong>이 됩니다. display 속성만 지정하여 flex 컨테이너를 생성하면 다른 flex 관련 속성들은 아래처럼 기본 값이 지정됩니다.</p> + +<ul> + <li>항목은 행으로 나열됩니다. (<code>flex-direction</code> 속성의 기본값은 <code>row</code>입니다).</li> + <li>항목은 주축의 시작 선에서 시작합니다.</li> + <li>항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있습니다.</li> + <li>항목은 교차축의 크기를 채우기 위해 늘어납니다.</li> + <li>{{cssxref("flex-basis")}} 속성은 <code>auto</code>로 지정됩니다.</li> + <li>{{cssxref("flex-wrap")}} 속성은 <code>nowrap</code>으로 지정됩니다.</li> +</ul> + +<p>이렇게되면 <strong>flex 항목</strong>들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬됩니다. 컨테이너의 크기보다 더 많은 항목이 있을 경우 행을 바꾸지 않고 주축 방향으로 흘러 넘치게 됩니다. 어떤 항목이 다른 항목보다 높이 값이 크다면 나머지 모든 항목들은 그에 맞게 교차축을 따라 늘어나게 됩니다.</p> + +<p>다음의 라이브 예시를 통해 어떻게 보여지는지 확인할 수 있습니다. flexbox의 초기 동작을 시험해보려면 항목을 추가하거나 수정해보시기 바랍니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p> + +<h3 id="flex-direction_지정">flex-direction 지정</h3> + +<p><strong>flex 컨테이너</strong>에 {{cssxref("flex-direction")}} 속성을 지정하면 flex 항목이 나열되는 방향을 변경할 수 있습니다. <code>flex-direction: row-reverse</code> 라고 지정하면 행으로 나열되는 것은 그대로지만 시작 선과 끝 선이 서로 바뀌게 됩니다.</p> + +<p><code>flex-direction</code>을 <code>column</code>으로 지정하면 주축이 변경되고 항목들은 열로 나열됩니다. <code>column-reverse</code>로 지정하면 그에 더해 시작 선과 끝 선이 서로 바뀌게 됩니다.</p> + +<p>다음의 라이브 예시는 <code>flex-direction</code>이 <code>row-reverse</code>로 지정되어 있습니다. <code>row</code>, <code>column</code>, <code>column-reverse</code>와 같은 값을 지정해서 어떻게 되는지 확인해보시기 바랍니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> + +<h2 id="flex-wrap을_이용한_복수_행_flex_컨테이너_지정">flex-wrap을 이용한 복수 행 flex 컨테이너 지정</h2> + +<p>flexbox는 1차원 모델이지만 <strong>flex 항목</strong>이 여러 행에 나열되도록 할 수 있습니다. 그 경우 각 행이 새로운 <strong>flex 컨테이너</strong>라고 생각해야 합니다. 공간 배분은 해당 행에서만 이루어지며 다른 행은 영향을 받지 않습니다.</p> + +<p>항목이 여러 행에 나열되도록 하려면 {{cssxref("flex-wrap")}} 속성의 값을 <code>wrap</code>으로 지정합니다. 그러면 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치됩니다. 아래의 라이브 예시에 있는 <strong>flex 항목</strong>은 폭이 지정되어 있으며 항목들의 폭의 합은 <strong>flex 컨테이너</strong>에 들어가기에는 너무 넓습니다. <code>flex-wrap</code>속성이 <code>wrap</code>으로 지정되어 있으므로 항목은 여러 행에 나열됩니다. 초깃값과 동일한 <code>nowrap</code>을 지정하고 flex항목에 대한 확대/축소 방식을 별도로 지정하지 않으면 <strong>flex 항목</strong>들은 컨테이너의 폭에 맞게 줄어듭니다. <code>nowrap</code>을 지정하면 항목이 전혀 줄어들 수 없거나 충분히 줄어들 수 없을 때 흘러넘치게 됩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p> + +<p><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a> 가이드에서 더 자세한 내용을 확인할 수 있습니다.</p> + +<h2 id="축약형_속성_flex-flow">축약형 속성 flex-flow</h2> + +<p><code>flex-direction</code> 속성과 <code>flex-wrap</code> 속성을 {{cssxref("flex-flow")}}라는 축약 속성으로 합칠 수 있습니다. 첫 번째 값은 <code>flex-direction</code>이고 두 번째 값은 <code>flex-wrap</code>입니다.</p> + +<p>다음의 라이브 예시에서 첫 번째 값을 <code>flex-direction</code>에 지정 가능한 값들(<code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>)로 바꿔보시기 바랍니다. 두 번째 값도 <code>wrap</code>이나 <code>nowrap</code>으로 바꿔보시기 바랍니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> + +<h2 id="flex_항목에_지정_가능한_속성들">flex 항목에 지정 가능한 속성들</h2> + +<p><strong>flex 항목</strong>에 적용할 수 있는 속성은 다음과 같습니다.</p> + +<ul> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-basis")}}</li> +</ul> + +<p>이 글에서는 위의 속성들에 대해 간략하게 살펴보겠습니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>에서 다룹니다.</p> + +<p>500 픽셀의 크기를 갖는 <strong>flex 컨테이너</strong> 내에 100 픽셀 크기의 자식 세 개가 존재할 때, <strong>사용가능한 공간 </strong>200 픽셀이 남게 됩니다. 기본적으로 flexbox는 이 공간을 마지막 자식 요소 다음에 빈공간으로 남겨둡니다.</p> + +<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>위의 세 가지 속성을 변경한다는 것은 <strong>flex 항목</strong>에게 <strong>사용가능한 공간</strong>을 분배하는 방식을 변경하는 것입니다. <strong>사용가능한 공간 </strong>개념은 <strong>flex 항목</strong>을 정렬할 때 특히 중요합니다.</p> + +<h3 id="flex-basis_속성"><code>flex-basis</code> 속성</h3> + +<p><code>flex-basis</code> 속성은 항목의 크기를 결정합니다. 이 속성의 기본값은 <code>auto</code>이며, 이 경우 브라우저는 항목이 크기를 갖는지 확인합니다. 위의 사진 예시의 경우 항목의 크기가 100 픽셀이므로 flex-basis의 값으로 100 픽셀이 사용됩니다.</p> + +<p><strong>flex 항목</strong>에 크기가 지정되어 있지 않으면, <strong>flex 항목</strong>의 내용물 크기가 flex-basis 값으로 사용됩니다. 따라서 <strong>flex 컨테이너</strong>에서 <code>display: flex</code> 속성만을 지정하면 flex항목들이 각 내용물 크기만큼 공간을 차지하게 됩니다.</p> + +<h3 id="flex-grow_속성"><code>flex-grow</code> 속성</h3> + +<p><code>flex-grow</code>값을 양수로 지정하면<strong> flex 항목</strong>별로 주축 방향 크기가 <code>flex-basis</code> 값 이상으로 늘어날 수 있게 됩니다. 위의 사진 예시에서 모든 항목의 flex-grow 값을 1로 지정하면 사용가능한 공간은 각 항목에게 동일하게 분배되며, 각 항목은 주축을 따라 분배받은 값만큼 사이즈를 늘려 공간을 차지합니다.</p> + +<p>첫 항목의 <code>flex-grow</code> 값을 2로 지정하고 나머지 두 개의 항목을 1로 지정한다면 각 항목에 지정된 <code>flex-grow</code> 값의 비율에 따라 남은 공간이 분배됩니다. 각 항목의 <code>flex-grow</code> 비율이 2:1:1 이므로 첫 항목에게 100 픽셀, 두 번째와 세 번째 항목에게 50 픽셀씩 분배됩니다.</p> + +<h3 id="flex-shrink_속성"><code>flex-shrink</code> 속성</h3> + +<p><code>flex-grow</code> 속성이 주축에서 남는 공간을 항목들에게 분배하는 방법을 결정한다면 <code>flex-shrink</code> 속성은 주축의 공간이 부족할때 각 항목의 사이즈를 줄이는 방법을 정의합니다. 만약 <strong>flex 컨테이너</strong>가 <strong>flex 항목</strong>을 모두 포함할 만큼 넉넉한 공간을 갖고 있지 않고 <code>flex-shrink</code> 값이 양수이면 <strong>flex 항목</strong>은 flex-basis에 지정된 크기보다 작아집니다. 또한, <code>flex-grow</code> 속성과 마찬가지로 더 큰 <code>flex-shrink</code> 값을 갖는 항목의 사이즈가 더 빨리 줄어듭니다.</p> + +<p>항목의 최소 크기는 실제 축소량을 계산할 때 고려되기 때문에 flex-shrink 속성이 flex-grow 속성에 비해 덜 일관된 모습을 보여줄지도 모릅니다. <code>flex-shrink</code> 속성이 항목의 사이즈를 결정하는 알고리즘에 관해서는 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>에서 자세히 살펴히보겠습니다.</p> + +<div class="note"> +<p><code>flex-grow</code> 와 <code>flex-shrink</code>의 값이 비율임을 유의하세요. <strong>flex 항목</strong>의 flex 속성을 모두 <code>1 1 200px</code> 로 지정하고 한 항목만 크기가 늘어나는 비율을 타 항목의 두배로 하고 싶으면 해당 <strong>flex 항목</strong>의 flex 속성을 <code>2 1 200px</code>로 지정하면 되지만, flex 속성 값을 모두 <code>10 1 200px</code>로 지정하고 늘어나는 비율을 두 배로 하고 싶은 항목의 flex 속성 값만 <code>20 1 200px</code>로 지정해도 동일하게 동작합니다.</p> +</div> + +<h3 id="축약형_속성_flex">축약형 속성 flex</h3> + +<p>보통은 <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code> 값을 각각 사용하지 않고 이 세 속성을 한번에 지정하는 {{cssxref("flex")}} 축약형을 많이 사용합니다. <code>flex</code> 축약형의 값은 <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code> 순서로 지정됩니다.</p> + +<p>다음의 라이브 예시에서 flex 축약형의 값들을 조절하면서 시험해 볼 수 있습니다. 첫 값이 <code>flex-grow</code>를 지정하며, 이 첫 값을 양수로 하면 <strong>flex 항목</strong>이 넓어질 수 있습니다. 두 번째 값은 <code>flex-shrink</code> 를 지정하며 이 두 번째 값에 양수를 지정하면 <strong>flex 항목</strong>이 좁아질 수 있습니다. 세 번째 값은 <code>flex-basis</code>를 지정하며 이 값은 <strong>flex 항목</strong>이 넓어지거나 좁아질 때 고려하는 기준 값입니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p> + +<p>flex 축약형 표현에 사용할 수 있는 미리 정의된 축약 값들이 아래에 나열되어 있습니다. 이 값들 만으로도 대부분의 경우(use-case)에 대응할 수 있을 것 입니다.</p> + +<ul> + <li><code>flex: initial</code></li> + <li><code>flex: auto</code></li> + <li><code>flex: none</code></li> + <li><code>flex: <positive-number></code></li> +</ul> + +<p><strong>flex 항목</strong>을 <code>flex: initial</code>로 지정하면 <code>flex: 0 1 auto</code> 로 지정한 것과 동일하게 동작합니다. 이 경우, <strong>flex 항목</strong>들은 <code>flex-grow</code>가 0이므로 <code>flex-basis</code>값보다 커지지 않고 <code>flex-shrink</code>가 1이므로 <strong>flex 컨테이너</strong> 공간이 모자라면 크기가 줄어듭니다. 또, <code>flex-basis</code>가 <code>auto</code>이므로 <strong>flex 항목</strong>은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지합니다.</p> + +<p><code>flex: auto</code> 로 지정하면 <code>flex: 1 1 auto</code>로 지정한 것과 동일하며, <code>flex:initial</code> 과는 주축 방향 여유 공간이 있을 때 <strong>flex 항목</strong>들이 늘어나서 주축 방향 여유 공간을 채우는 점만 다릅니다.</p> + +<p><code>flex: none</code>으로 지정하면 <code>flex: 0 0 auto</code>으로 지정한 것과 동일하며 <strong>flex 컨테이너</strong>의 크기 변화에도<strong> flex 항목</strong> 크기는 변하지 않고 <code>flex-basis</code>를 <code>auto</code>로 지정했을 때 정해지는 크기로 결정됩니다. </p> + +<p>이 축약형은 더 축약해서 <code>flex: 1</code> 이나 <code>flex: 2</code>처럼 쓸수도 있는데, 이는 <code>flex-grow</code> 만 지정하고 나머지는 1 0으로 사용한다는 뜻이다. 따라서 <code>flex: 2</code>는 <code>flex: 2 1 0</code>와 동일하게 처리됩니다.</p> + +<p>다음 라이브 예제에서 이 축약 값들을 시험해 볼 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p> + +<h2 id="정렬_끝_맞추기(justification)_flex_항목간_여유_공간_분배">정렬, 끝 맞추기(justification), flex 항목간 여유 공간 분배</h2> + +<p>flexbox의 주 기능 중 하나는 (주축과 교차축으로 표현되는) <strong>flex 컨테이너</strong> 공간 안에 <strong>flex 항목</strong>들을 정렬하고 끝 마추며 여유 공간을 항목 간에 분배하는 것입니다. </p> + +<p>역주) 이 절의 내용은 편의상 <strong>flex 컨테이너</strong>의 flex-direction를 row로 가정하고 '행'과 '열'로 표기했습니다.</p> + +<h3 id="align-items"><code>align-items</code></h3> + +<p>{{cssxref("align-items")}}는 <strong>flex 컨테이너</strong>에 지정하는 속성이며, 교차축을 따라 <strong>flex 항목</strong> 열을 정렬하는 방식을 지정합니다. </p> + +<p>이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 <code>stretch</code>이며 이 값을 지정하면 <strong>flex 항목</strong>의 높이는 <strong>flex 컨테이너</strong> 내 <strong>flex 항목</strong> 행의 최대 높이로 지정됩니다. 따라서, <strong>flex 항목</strong> 행이 하나 일 때는 <strong>flex 항목</strong>은 교차축 방향으로 <strong>flex 컨테이너</strong>를 가득 채우게 됩니다.</p> + +<p>이 속성을 <code>flex-start</code>로 지정하면<strong> flex 항목</strong>의 첫 열이 교차축 방향의 시작선에 정렬됩니다. <code>flex-end</code>로 지정하면 <strong>flex 항목</strong>의 첫 열이 교차축 방향의 끝선에 정렬됩니다. <code>center</code>로 지정하면 <strong>flex 항목</strong> 행에 배분된 공간의 가운데 라인에 정렬됩니다.</p> + +<p>다음 라이브 예제에서 이 값들을 시험해 볼 수 있습니다. - 이 시험을 위해 의도적으로 <strong>flex 컨테이너</strong>에 높이를 지정해 두었습니다.</p> + +<ul> + <li><code>stretch</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p> + +<h3 id="justify-content"><code>justify-content</code></h3> + +<p>{{cssxref("justify-content")}} 속성은 주축을 따라 <strong>flex 항목</strong> 행을 정렬하는 방식을 지정합니다.</p> + +<p>이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 <code>flex-start</code>이며 이 값을 지정하면 <strong>flex 항목</strong> 행 내의 항목들은 <strong>flex 컨테이너</strong>의 시작선에서 부터 정렬됩니다. <code>flex-end</code>로 지정하면 <strong>flex 항목</strong> 행의 마지막 항목이 <strong>flex 컨테이너</strong>의 끝선에서 정렬됩니다. <code>center</code>로 지정하면 <strong>flex 항목</strong>들이 <strong>flex 항목</strong> 행의 가운데 정렬됩니다.</p> + +<p><code>space-between</code>을 지정하면 주죽 방향 여유 공간을 <strong>flex 항목</strong> 사이의 공간에 균등 배분합니다. </p> + +<p><code>space-around</code>는 시작선 및 끝선과<strong> flex 항목</strong>간 공간도 균등 배분에 고려하므로 시작선 및 끝선과 <strong>flex 항목</strong> 간의 공간의 크기를 1로 배분한다면 <strong>flex 항목</strong> 사이의 공간은 2로 배분합니다. </p> + +<p><code>space-evenly</code>로 지정하면 여유 공간을 <strong>flex 항목</strong> 사이의 공간 및 시작선 및 끝선과 <strong>flex 항목</strong> 간의 공간에 모두 균등하게 배분합니다.</p> + +<p>다음 라이브 예제에서 <code>justify-content</code>에 지정할 수 있는 다음 값들을 시험해 볼 수 있습니다.</p> + +<ul> + <li><code>stretch</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> + <li><code>space-evenly</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p> + +<p>이 절에서 설명한 내용으로 대부분의 경우에 대응할 수 있지만, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> 에서 이 속성들을 더 자세히 살펴볼 것입니다.</p> + +<h2 id="Next_steps">Next steps</h2> + +<p>Flexbox의 개요를 살펴보았습니다. 다음 글 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>에서 이 규격이 다른 CSS 규격과 어떻게 연관되어 있는지 말씀드리겠습니다.</p> diff --git a/files/ko/web/css/css_flexible_box_layout/index.html b/files/ko/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..d098a530b4 --- /dev/null +++ b/files/ko/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,108 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<div>{{CSSRef}}</div> + +<p class="summary"><strong>CSS Flexible Box Layout</strong>은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 <a href="/ko/docs/Web/CSS">CSS</a> 모듈입니다. 플렉스 레이아웃 모델에서는, 플렉스 컨테이너의 자식을 어떤 방향으로도 배치할 수 있으며, 자식의 크기도 유연하게("플렉시블") 빈 공간을 채우거나, 컨테이너를 넘어가지 않도록 줄어듭니다. 자식 간의 수평 및 수직 정렬 또한 쉽게 조작할 수 있습니다.</p> + +<h2 id="기본_예제">기본 예제</h2> + +<p>다음 예제의 컨테이너는 <code>display: flex</code>를 적용한 상태입니다. 따라서 컨테이너의 세 자식은 플렉스 항목이 됩니다. <code>justify-content</code>의 값은 <code>space-between</code>으로, 각 아이템을 주축(가로축)에 균일한 간격으로 배치합니다. 그래서 같은 양의 공간이 자식 사이에 균일하게 생기며 왼쪽과 오른쪽 아이템이 플렉스 컨테이너의 양 모서리에 붙어서 배치됩니다. 또한 <code>align-items</code>의 기본값인 <code>stretch</code>로 인해, 각 항목의 높이가 플렉스 컨테이너의 높이까지 늘어나서 세 자식 모두 제일 높이가 큰 항목과 같은 높이가 되는 것도 확인할 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="CSS_속성">CSS 속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h3 id="정렬_속성">정렬 속성</h3> + +<p><code>align-content</code>, <code>align-self</code>, <code>align-items</code>, <code>justify-content</code> 속성은 플렉스박스 명세에서 처음 나왔지만, 지금은 박스 정렬 명세가 정의하며 플렉스박스 명세는 박스 정렬 명세를 참조하고 있습니다. 추가 정렬 속성도 박스 정렬 명세가 가지고 있습니다.</p> + +<div class="index"> +<ul> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("place-content")}}</li> + <li>{{cssxref("place-items")}}</li> + <li>{{cssxref("row-gap")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("gap")}}</li> +</ul> +</div> + +<h3 id="용어">용어</h3> + +<div class="index"> +<ul> + <li>{{Glossary("Flexbox", "플렉스박스")}}</li> + <li>{{Glossary("Flex Container", "플렉스 컨테이너")}}</li> + <li>{{Glossary("Flex Item", "플렉스 항목")}}</li> + <li>{{Glossary("Main Axis", "주축")}}</li> + <li>{{Glossary("Cross Axis", "교차축")}}</li> + <li>{{Glossary("Flex", "플렉스")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90">플렉스박스의 기본 개념</a></dt> + <dd>플렉스박스의 기능 개요입니다.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">다른 레이아웃과 플렉스박스의 관계</a></dt> + <dd>플렉스박스와 다른 레이아웃 방법, 그리고 다른 CSS 명세가 가진 관계를 설명합니다.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">플렉스 컨테이너의 아이템 정렬하기</a></dt> + <dd>박스 정렬 속성이 플렉스박스에서 동작하는 방식을 설명합니다.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">플렉스 아이템 배치하기</a></dt> + <dd>아이템의 순서와 방향을 바꾸는 여러 방법과, 이 때 발생할 수 있는 여러 문제를 다룹니다.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">플렉스 아이템의 주요 축 비율 조절하기</a></dt> + <dd><code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code> 속성을 설명합니다.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">플렉스 아이템 줄바꿈 마스터하기</a></dt> + <dd>여러 줄로 이뤄진 플렉스 컨테이너를 만드는 방법과, 컨테이너 아이템의 표시 방법 설정을 설명합니다.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">플렉스박스의 일반적인 용례</a></dt> + <dd>일반적인 플렉스박스 디자인 패턴입니다.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">플렉스박스의 하위 호환성</a></dt> + <dd>플렉스박스의 브라우저 상태, 상호 호환성 이슈와 함께 구형 브라우저와 이전 명세를 지원하는 방법을 설명합니다.</dd> +</dl> + +<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 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html b/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html new file mode 100644 index 0000000000..a9f75246aa --- /dev/null +++ b/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html @@ -0,0 +1,141 @@ +--- +title: 가변상자의 대표적인 사용례 +slug: Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례 +tags: + - 가변상자 + - 씨에스에스 + - 안내서 + - 용례 + - 패턴 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +<p>{{CSSRef}}</p> + +<p class="summary">이번 안내서에서는 흔히 볼 수 있는 가변상자 사용 사례 중 일부를 살펴 보겠습니다. 가변상자의 사용이 다른 조판 메서드보다 더 적합한 사례입니다.</p> + +<h2 id="왜_가변상자를_선택">왜 가변상자를 선택?</h2> + +<p>완벽한 브라우저 지원 환경에서 가변상자를 사용하기로 선택한 이유는 항목 모음을 한 방향 또는 다른 방향으로 배치하길 원하기 때문입니다. 우리가 항목을 배치할 때 해당 일차원의 항목 크기를 제어하거나 항목 간 간격을 제어하려고 합니다. 이것이 가변상자를 설계한 목적에 맞는 용도입니다. <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">가변상자와 여타 씨에스에스 조판 메서드의 관계</a>에서 가변상자와 씨에스에스 격자 조판의 차이점에 대해 자세히 읽을 수 있습니다. 그곳에선 가변상자가 씨에스에스 조판의 전체 그림에서 어떤 역할을 하고 있는지에 대해 논의합니다.</p> + +<p>실제로 격자 조판에 의해 더 잘 수행 될 수있는 작업이나 격자에 대한 대체품 및 정렬 기능을 얻기 위해 가변상자를 종종 사용합니다. 당 사용례는 블록 조판에서 <ruby><em>상자 정렬</em><rp> (</rp><rt>Box Alignment</rt><rp>) </rp></ruby>이 구현되고 나면 변경될 수 있습니다. 이 안내서에서는 오늘날 가변상자가 쓰일 수 있는 몇 가지 대표적인 사용례를 살펴봅니다.</p> + +<h2 id="탐색_메뉴">탐색 메뉴</h2> + +<p>탐색 메뉴의 일반적인 패턴은 항목 목록을 가로 막대로 표시하는 것입니다. 이 패턴은 기본적으로 가변상자 이전에는 달성하기 어려웠습니다. 이는(탐색 가로 막대) 가장 간단한 가변상자 예제를 형성하며 이상적인 가변상자 사용 사례로 간주될 수 있습니다.</p> + +<p>가로로 표시하려는 항목 집합이 있으면 잉여 공간이 생길 수밖에 없습니다. 우리는 그 공간으로 무엇을 해야할지 결정해야 하며 몇 가지 선택 옵션이 있습니다. 일번 선택은 우리가 항목 무리 이외의 공간을 표시합니다. 따라서 그 사이 또는 그 주변에 공백이 생깁니다. 또는 항목 내부 여분의 공간을 흡수하려면 항목 집합이 이 공간을 확장하고 점유할 수 있는 메소드가 필요합니다.</p> + +<h3 id="항목_외부에_공간_분배">항목 외부에 공간 분배</h3> + +<p>항목 사이 또는 주위에 공간을 분배시키기 위해 가변상자의 정렬 속성과 {{cssxref("justify-content")}} 속성을 사용합니다. 이 속성에 대한 자세한 내용은 기본 축을 기준으로 항목 정렬을 처리하는 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">가변 컨테이너의 항목 정렬</a>에서 확인할 수 있습니다.</p> + +<p>아래 실제 예에서 우리는 항목을 원래 크기로 표시하고 <code>justify-content: space-between</code>를 사용하여 항목 사이의 간격을 동일하게 만듭니다. <code>space-around</code> 값을 사용하거나, 지원이 될 경우 <code>space-evenly</code>를 사용해 공간이 분배되는 방식을 변경할 수 있습니다. <code>flex-start</code>를 사용하여 항목 끝에 공간을 배치하거나 <code>flex-end</code>를 사용하여 항목 앞에 배치하거나 <code>center</code>를 사용해 탐색 항목 중앙에 배치할 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p> + +<h3 id="항목_내부에_공간_분배">항목 내부에 공간 분배</h3> + +<p>탐색 메뉴를 위한 다른 패턴은 항목 사이에 공간을 만드는 것이 아니라 항목 자체 내에 사용 가능한 공간을 분배하는 것입니다. 이 경우, <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">주축을 따라 가변 항목의 비율 제어</a>에서 설명된대로 가변 속성을 사용하여 항목이 서로 비례하여 확대 및 축소되도록 합니다.</p> + +<p>모든 탐색 메뉴 항목의 너비를 동일하게 하려면 <code>flex: auto</code>를 사용하면 됩니다. 그것은 <code>flex: 1 1 auto</code>의 약칭으로 모든 항목이 자동이란 가변 기반에 따라 확대되거나 축소됩니다. 여기서 자동이란 항목이 길수록 더 많은 공간이 생긴다는 말입니다.</p> + +<p>아래의 실제 예제에서 <code>flex: auto</code>를 <code>flex: 1</code>로 변경해보십시요. 이것은 <code>flex: 1 1 0</code>의 약칭입니다. 모든 항목이 0의 가변 기반에서 작동하여 모든 공간을 고르게 배분할 수 있기 때문에 모든 항목이 동일한 너비가 됩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p> + +<h2 id="탐색_메뉴_분할">탐색 메뉴 분할</h2> + +<p>주축에서 항목을 정렬하는 또 다른 방법은 자동 여백을 사용하는 것입니다. 이를 통해 한 그룹의 항목이 왼쪽으로 정렬되고 다른 그룹이 오른쪽으로 정렬되는 탐색 모음(메뉴)의 디자인 패턴이 가능합니다.</p> + +<p>여기에서는 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">주축 정렬에 대한 자동 여백 사용</a>에서 설명된 자동 여백 기술을 사용합니다. 항목 무리는 <code>flex-start</code>를 사용해 주축에 정렬됩니다. 그것이 가변상자의 초기값 동작이며, 우리가 항목을 오른쪽으로 정렬하려면 왼쪽 여백을 자동으로 지정합니다. 클래스 지정을 한 항목에서 다른 항목으로 이동하여 분할이 발생하는 위치를 변경할 수 있습니다.</p> + +<p>또한 이 예제에서는 가변 항목에 여백을 사용하여 항목 사이에 간격을 만들고 컨테이너에 음의 여백을 사용하여 항목이 여전히 오른쪽 및 왼쪽 가장자리와 맞붙도록 합니다. <ruby><em>박스 정렬</em><rp> (</rp><rt>Box Alignment</rt><rp>) </rp></ruby> 규격의 <code>gap</code> 속성이 가변상자에 구현될 때까지 항목 간에 배수구를 만들려면 이 방식으로 여백을 사용해야 합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p> + +<h2 id="항목_중심에_놓기">항목 중심에 놓기</h2> + +<p>가변상자 이전에 개발자들은 웹 디자인에서 가장 어려운 문제는 수직 중심이라고 농담할겁니다. 다음 실제 예제에서 볼 수 있듯이 가변상자의 정렬 속성을 사용하여 간단하게 만들었습니다.</p> + +<p>항목에 <code>flex-start</code>를 지정해 시작 부분으로 정렬하거나 <code>flex-end</code>를 지정해 끝 부분에 항목을 정렬하는 식으로 정렬을 맘대로 조정할 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p> + +<p><ruby><em>박스 정렬</em><rp> (</rp><rt>Box Alignment</rt><rp>) </rp></ruby> 속성은 궁극적으로 블록 조판의 내용으로 구현될 예정이므로 미래에는 단일 아이템을 중앙에 배치하기 위해 컨테이너를 가변 컨테이너로 만들 필요는 없습니다. 그러나 당장은 하나의 것을 다른 것의 중심에 올바로 배치해야하는 경우 가변상자를 사용하는 게 맞습니다. 위의 예에서와 같이 컨테이너를 가변 컨테이너로 만든 다음 상위 요소에 대해 <code>align-items</code>을 사용하거나 가변 항목 자체를 <code>align-self</code>로 공략합니다.</p> + +<h2 id="바닥글을_아래로_밀어내는_카드_조판">바닥글을 아래로 밀어내는 카드 조판</h2> + +<p>가변상자 또는 씨에스에스 격자를 사용하여 카드 구성 요소의 목록을 조판하더라도, 이들 조판 메서드는 가변 또는 격자 구성 요소의 직계 자식에서만 작동합니다. 즉, 콘텐츠의 크기가 가변적이면 카드가 격자 영역의 높이나 가변 컨테이너의 높이까지 늘어납니다. 모든 내부 콘텐츠는 친숙한 블록 조판을 사용합니다. 즉, 콘텐츠가 적은 카드에서는 바닥글이 카드의 아래쪽에 고정되지 않고 콘텐츠의 밑단까지 차오릅니다.</p> + +<p><img alt="구성 요소의 내부가 (상위) 랩퍼와 함께 늘어나지 않음을 표시하는 두 개의 카드 구성 요소." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p> + +<p>가변상자가 이를 해결할 수 있습니다. 우리는 {{cssxref("flex-direction")}}<code>: column</code> 속성를 가진 카드를 가변 컨테이너로 만듭니다. 그런 다음 컨텐츠 영역을 <code>flex: 1</code>로 설정합니다. 이는 <code>flex: 1 1 0</code>의 축약형입니다. — 항목이 <code>0</code>의 가변 기준에서 커지거나 줄어들 수 있습니다. 이것이(컨텐츠 영역이) 커질 수 있는 유일한 항목이므로 가변 컨테이너에 있는 잉여 공간을 차지하고 바닥글을 바닥으로 밉니다. 라이브 예제에서 <code>flex</code> 속성을 제거하면 바닥글이 컨텐츠 바로 아래로 이동하는 방식을 볼 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p> + +<h2 id="미디어_객체">미디어 객체</h2> + +<p>미디어 객체는 웹 디자인에서 일반적인 패턴입니다. 이 패턴에는 한쪽에 이미지 나 다른 요소가 있고 오른쪽에 텍스트가 있습니다. 이상적으로 미디어 개체를 반대쪽으로 돌릴 수 있어야 합니다. 말하자면 이미지를 왼쪽에서 오른쪽으로 이동시키는 겁니다.</p> + +<p>이 패턴은 어디에서나 볼 수 있으며, 주석 상자용으로 쓰이기도 하고, 이미지와 설명을 표시해야하는 모든 곳에서 볼 수 있습니다. 가변상자를 사용하면 이미지를 포함하는 미디어 객체의 일부가 이미지에서 크기 정보를 가져온 다음 미디어 객체의 본문이 가변적으로 남은 공간을 차지할 수 있습니다.</p> + +<p>여러분은 아래 실제 예제에서 미디어 객체를 볼 수 있습니다. 정렬 속성을 사용하여 십자축의 항목을 <code>flex-start</code>로 정렬한 다음 <code>.content</code> 가변 항목을 <code>flex: 1</code>로 설정했습니다. 위의 열 조판 카드 패턴에서와 같이 <code>flex: 1</code>를 사용하면 카드가 커질 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p> + +<p>이 라이브 예제에서 시도할 수 있는 것은 디자인에서 미디어 개체를 제약하려는 여러 가지 방법과 관련이 있습니다.</p> + +<p>이미지가 너무 커지는 것을 방지하려면 이미지에 {{cssxref("max-width")}}를 추가하십시오. 미디어 객체의 그쪽 측면이 가변상자의 초기값(예: 100px)을 사용함에 따라 줄어들지만 커질 수는 없으며 <code>flex-basis</code>는 자동을 사용합니다. 이미지에 적용된 모든 {{cssxref("width")}} 또는 최대 너비는 <ruby><code>flex-basis</code><rp> (</rp><rt>가변 기준</rt><rp>) </rp></ruby>이 됩니다.</p> + +<pre class="brush: css">.image img { + max-width: 100px; +} +</pre> + +<p>또한 양쪽이 비례하여 커지거나 줄어들 수 있습니다. 양면을 <code>flex: 1</code>로 설정하면 0의 {{cssxref("flex-basis")}}에서 커지거나 줄어들기 때문에 두 개의 동일한 크기의 열이 생깁니다. 컨텐츠를 기준으로 사용하여 (컨텐츠와 이미지) 둘 다에 <code>flex: auto</code>로 설정하면 컨텐츠의 크기에 따라, 또는 이미지의 너비와 같은 가변 항목에 직접 적용되는 크기에 따라 커지거나 줄어들 수 있습니다.</p> + +<pre class="brush: css">.media .content { + flex: 1; + padding: 10px; +} + +.image { + flex: 1; +}</pre> + +<p>예를 들어 이미지가 있는 쪽을 <code>flex: 1</code>로 설정하고 콘텐츠 쪽을 <code>flex: 3</code>으로 설정하는 등 각면에 서로 다른 {{cssxref("flex-grow")}}를 부여할 수 있습니다. 즉, <code>flex-basis</code>를 <code>0</code>으로 사용하지만 해당 공간을 <code>flex-grow</code> 인수에 맞춰 서로 다르게 공간을 할당합니다. 그런 용도로 사용하는 가변 속성은 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">주축을 따라 가변 항목의 비율 제어</a> 안내서에서 자세히 설명되어 있습니다.</p> + +<pre class="brush: css">.media .content { + flex: 3; + padding: 10px; +} + +.image { + flex: 1; +}</pre> + +<h3 id="미디어_객체_방향_돌리기">미디어 객체 방향 돌리기</h3> + +<p>이미지가 오른쪽에 있고 콘텐츠가 왼쪽에 있도록 미디어 객체의 표시를 전환하려면 <code>flex-direction</code> 속성을 이용해 <code>row-reverse</code>로 설정할 수 있습니다. 미디어 개체가 이제 다른 방향으로 표시됩니다. 저는 그걸 달성하기 위해 라이브 예제에서 기존 <code>.media</code> 클래스와 함께 <code>flipped</code> 클래스를 추가했습니다. 즉, 에이치티엠엘에서 해당 클래스를 제거하여 디스플레이가 어떻게 변경되는지 확인할 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p> + +<h2 id="양식_컨트롤">양식 컨트롤</h2> + +<p>가변상자는 양식 컨트롤에 스타일을 적용할 때 특히 유용합니다. 양식에는 일반적으로 서로 정렬하고 싶은 다수의 마크업과 다수의 작은 요소를 포함할 수 있습니다. 일반적인 패턴은 {{htmlelement("input")}} 요소가 {{htmlelement("button")}}과 짝을 이루는 검색 양식의 경우나 방문자가 단순히 전자 메일 주소를 입력하도록 하려는 경우입니다.</p> + +<p>가변상자를 사용하면 이러한 유형의 조판을 쉽게 달성할 수 있습니다. 테두리를 지정하고 표시하도록 설정한 래퍼 클래스에 <code><button></code> 및 <code><input></code> 필드가 포함되어 있습니다. 거기에 테두리를 부여하고 <code>display: flex</code>를 설정했습니다. 그런 다음 가변 속성을 사용하여 <code><input></code> 필드가 커지도록 했고, 버튼은 그렇지 않습니다. 이것은 사용 가능한 공간이 변함에 따라 텍스트 필드가 커지거나 작아지는 한 쌍의 필드가 있음을 의미합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p> + +<p>버튼을 오른쪽에 올려 놓은 것처럼 레이블이나 아이콘을 왼쪽에 쉽게 추가 할 수 있습니다. 나는 레이블을 추가했으며 배경색에 대한 스타일링 이외에 조판을 변경할 필요가 없었습니다. 신축성있는 입력 필드는 이제 맘대로 이용할 공간이 조금 줄어들지만 두 항목의 지분이 고려된 후 남은 공간을 사용합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p> + +<p>이와 같은 패턴을 사용하면 디자인에 추가할 요소를 쉽게 수용할 수 있는 양식 요소 라이브러리를 훨씬 쉽게 만들 수 있습니다. 커지지 않는 항목과 커지는 항목을 혼합하는 식으로 가변상자의 유연성을 활용하고 있습니다.</p> + +<h2 id="결론">결론</h2> + +<p>위의 패턴을 살펴보면서 가변 상자를 사용하여 원하는 결과를 얻는 가장 좋은 방법을 여러분이 생각을 통해 파악되기 시작했길 희망해봅니다. 종종 하나 이상의 선택이 있습니다. 늘릴 수 없는 항목을 늘릴 수 있는 것과 혼합하거나, 콘텐츠를 사용하여 크기를 알리거나, 가변상자가 공간을 비례적으로 공유할 수 있도록 하십시오. 그것은 당신에게 달려 있습니다.</p> + +<p>보유 컨텐츠를 제시하는 가장 좋은 방법을 생각한 다음 가변상자 또는 기타 조판 방법이 컨텐츠를 선보이는 데 어떻게 도움이 되는지 살펴보십시오.</p> diff --git a/files/ko/web/css/css_flow_layout/index.html b/files/ko/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..32928121ff --- /dev/null +++ b/files/ko/web/css/css_flow_layout/index.html @@ -0,0 +1,46 @@ +--- +title: CSS Flow Layout +slug: Web/CSS/CSS_Flow_Layout +tags: + - CSS 흐름 레이아웃 + - 흐름 +translation_of: Web/CSS/CSS_Flow_Layout +--- +<div>{{CSSRef}}</div> + +<p class="summary"><em>일반적인 흐름 Normal Flow</em>, 또는 흐름 레이아웃 Flow Layout 은 그 레이아웃 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 요소가 보여지는 방식 입니다. 흐름이란 본질적으로 레이아웃 아래 서로 같이 동작하고 서로에게 서로가 알려지는 것들의 집합 입니다. 만약에 어느 하나가 <em>흐름에서 벗어나면</em> 그것은 독립적으로 동작하게 됩니다.</p> + +<p><em>일반적인 흐름</em>에서, <strong>인라인</strong> 요소들은 한줄러 늘어서 보여지게 되는데, 이는 문서의 <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">Writing Mode</a> 에 따라 문장 안의 단어들이 보여지는 방향을 따르게 됩니다. <strong>블록</strong> 요소들은 문서의 Writing Mode 에서의 단락이 하나씩 나눠져 보여지듯이 나타납니다. 그래서 영어에서는, 인라인 요소들은 왼쪽에서 시작하여 하나씩 보여지고, 블록 요소들은 맨 위에서부터 페이지를 따라 아래로 보여집니다.</p> + +<h2 id="기본적인_예">기본적인 예</h2> + +<p>아래의 예는 블록과 인라인 레벨 박스들을 설명합니다. 초록 테두리를 갖은 두개의 paragraph 요소들은 블록 레벨에 있어서 하나씩 위에서 아래로 나타납니다.</p> + +<p>첫번째 문장은 파란 바탕을 갖은 span 요소를 포함하고 있습니다. 이 요소는 인라인 레벨에 있으며 따라서 문장 내에 이어져 나타납니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p> + +<h2 id="Guides">Guides</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li> +</ul> + +<h2 id="Reference">Reference</h2> + +<h3 id="Glossary_Entries">Glossary Entries</h3> + +<ul> + <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> +</ol> +</section> diff --git a/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html new file mode 100644 index 0000000000..3a91f6ba92 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -0,0 +1,92 @@ +--- +title: 서식 상황 입문서 +slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +tags: + - BFC + - 대열 + - 블록 서식 상황 + - 서식 상황 + - 씨에스에스 + - 안내서 + - 조판 + - 중급 +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary">이 문서는 서식 상황의 개념을 소개합니다. 서식 상황에는 블록 서식 상황과 인라인 서식 상황, 가변 서식 상황을 포함한 여러 유형이 있습니다. 그들이 어떻게 동작하고 어떻게 그러한 동작을 활용할 수 있는지에 대한 기본 사항도 소개합니다.</span></p> + +<p>페이지의 모든 것은 서식 상황(<strong>formatting context</strong>)의 일부이거나 특정 방식으로 콘텐츠를 배치하도록 정의된 영역입니다. 블록 서식 상황(<strong>block formatting context</strong>)은 블록 조판 규칙에 따라 자식 요소를 배치하고, 가변 서식 상황(<strong>flex formatting context</strong>)은 자식을 {{Glossary("flex item", "flex items")}}로 취급해 배치합니다. 각 서식 상황은 해당 상황에 속했을 때 조판이 어떻게 동작하는지에 대한 특정 규칙을 가지고 있습니다.</p> + +<h2 id="블록_서식_상황">블록 서식 상황</h2> + +<p>문서의 최외각 요소는 우선 블록 조판 규칙을 수립합니다. 이를 일컬어 초기 블록 서식 상황(<strong>initial block formatting context</strong>)이라고 합니다. 이는 <code><html></code> 요소 블록 내부의 모든 요소는 블록 및 인라인 조판 규칙을 따르는 일반 대열에 따라 배치됨을 의미합니다. 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)에 참여하는 요소는 씨에스에스 상자 모델에 의해 윤곽이 제시된 규칙을 사용합니다. 이 모델은 요소의 여백, 테두리 및 패딩이 동일한 서식 상황에서 서로 다른 블록과 상호 작용하는 방법을 정의합니다.</p> + +<h3 id="새로운_블록_서식_상황_생성하기">새로운 블록 서식 상황 생성하기</h3> + +<p>단지 {{HTMLElement("html")}} 요소만이 블록 서식 상황을 생성할 능력을 갖춘 것은 아닙니다. 기본값으로 블록 조판인 모든 요소는 역시 자기 자손 요소에 대한 블록 서식 상황을 생성합니다. 또한 기본값으로 주어지지 않아도 블록 서식 상황을 생성하도록 할 수 있는 씨에스에스 속성이 있습니다. 동 속성이 유용한 까닭은 새로운 블록 서식 상황이 자체적으로 주 조판 내부의 소형 조판이 된다는 점에서 최외곽 문서와 매우 유사하게 작동하기 때문입니다. 블록 서식 상황은 그 내부에 모든 요소를 포함하고, {{cssxref("float")}} 및 {{cssxref("clear")}}는 동일한 서식 상황에 속한 항목에만 적용되며, 여백 축소는 동일한 서식 상황 요소 사이에만 이뤄집니다.</p> + +<p>우리 문서의 뿌리 요소인 ({{HTMLElement("html")}}) 이 외에도 새로운 블록 서식 상황은 다음과 같은 경우에 생성됩니다.</p> + +<ul> + <li>{{cssxref("float")}}를 사용으로 요소가 부동체가 되는 경우</li> + <li>절대 위치잡기한 요소, 여기에는 {{cssxref("position", "position: fixed", "#fixed")}} 혹은 {{cssxref("position", "position: sticky", "#sticky")}}가 포함됩니다.</li> + <li>{{cssxref("display", "display: inline-block", "#inline-block")}}이 적용된 요소</li> + <li><code>display: table-cell</code>이 적용된 테이블 셀 또는 요소, 여기에는 <code>display: table-*</code> 속성 무리를 사용한 익명 테이블 셀도 포함됩니다.</li> + <li><code>display: table-caption</code>이 적용된 테이블 캡션이나 요소</li> + <li><code>visible</code>이외의 대열이탈 값을 갖는 블록 요소</li> + <li><code>display: flow-root</code> 혹은 <code>display: flow-root list-item </code>가 적용된 요소</li> + <li>{{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code>, 또는 <code>strict</code>가 적용된 요소</li> + <li>{{Glossary("flex item", "flex items")}}</li> + <li>격자 항목</li> + <li><a href="/ko/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">다단 컨테이너</a></li> + <li>{{cssxref("column-span")}}이 <code>all</code>로 설정된 요소</li> +</ul> + +<p>블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하는 효과를 확인하기 위해 이들 중 몇 가지를 살펴봅시다.</p> + +<p>아래 예제에서, 우리는 테두리가 적용된 <code><div></code> 내부에 부동체 요소 하나를 가지고 있습니다. 해당 <code>div</code>의 콘텐츠는 부동체 요소와 나란히 부동해왔습니다. 동 부동체의 콘텐츠가 자기 옆에 있는 콘텐츠보다 키가 크기 때문에 하위 <code><div></code>의 테두리는 이제 부동체에 전체에 걸쳐 진행하고 있습니다. <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/대열과_탈대열">대열 요소와 탈대열 요소에 관한 안내서</a>에서 설명했듯이, 동 부동체는 대열에서 제외되어 <code><div></code> 요소의 배경과 테두리는 콘텐츠만 포함하지 부동체는 포함하지 않습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p> + +<p>새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하면 동 부동체를 포함할 겁니다. 그러려면 전형적인 방법은 <code>overflow: auto</code>를 설정하거나, 초깃값인 <code>overflow: visible</code> 이외의 다른 값을 설정하는 식이었습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p> + +<p><code>overflow: auto</code>를 지정하여 동 부동체를 포함하는 새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성했습니다. 우리의 <code>div</code>가 이제는 우리 조판 내부에 소형 조판이 되었습니다. 모든 자식 요소는 소형 조판 내부에 포함되게 됩니다.</p> + +<p>대열이탈(<code>overflow</code>)을 사용하여 새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하는 것이 문제가 되는 것은 대열이탈(<code>overflow</code>) 속성이 대열이탈 콘텐츠를 어떻게 다루고 싶은지 브라우저에 알려주기 위한 것입니다. 이 속성을 순수하게 블록 서식 상황을 생성할 목적으로 사용할 경우 원치 않는 스크롤 막대 또는 잘려 나간 그림자를 생기는 경우도 있습니다. 또한, 그 경우는 후진 개발자가 왔을 때 판독의 여지가 많지 않을 수 있습니다. 왜냐면 대열이탈을 무슨 목적으로 사용했는지 이유가 분명하지 않을 수 있기 때문입니다. 다음과 같이 하면 코드를 설명하는 데 좋은 아이디어가 될 것입니다.</p> + +<h3 id="display_flow-root을_사용하며_명시적으로_블록_서식_상황을_생성하기">display: flow-root을 사용하며 명시적으로 블록 서식 상황을 생성하기</h3> + +<p><code>display: flow-root</code> (또는 <code>display: flow-root list-item)</code>)를 컨테이너 블록상에 사용하면 잠재적인 문제가 될 수 있는 여타 부작용 없이 새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p> + +<p>{{HTMLElement("div")}}에 요소상에 <code>display: flow-root</code>을 적용하면, 컨테이너 내부의 모든 요소는 해당 컨테이너의 블록 서식 상황에 참여하게 되며, 부동체 무리는 동 요소 밑으로 돌출하지 않게 됩니다.</p> + +<p>대열뿌리(<code>flow-root</code>)라는 키워드 명명은 (마치 {{HTMLElement("html")}}의 경우처럼) 본질적으로 새로운 뿌리 요소와 같은 기능하는 어떤 것을 생성한다는 사실을 말해줍니다. 새로운 상황이 어떻게 생성되었으며 어떻게 해당 대열 조판이 기능하는지를 고려하면 그렇습니다.</p> + +<h2 id="인라인_서식_상황">인라인 서식 상황</h2> + +<p>인라인 서식 상황은 다른 서식 상황 내부에 존재하며 하나의 단락 상황처럼 생각될 수 있습니다. 단락은 텍스트상에 사용되는 {{HTMLElement("strong")}}, {{HTMLElement("a")}} 또는 {{HTMLElement("span")}} 등이 내부적으로 사용되는 인라인 서식 상황을 생성합니다.</p> + +<p>상자 모델은 인라인 서식 상황에 참여하는 항목에 100% 적용되지 않습니다. 가로쓰기 모드 라인에서 수평 패딩, 테두리 및 여백이 요소에 적용되고 텍스트를 왼쪽과 오른쪽으로 밀어냅니다. 그러나, 해당 요소 위와 아래에 여백은 적용되지 않습니다. 수직 패딩 및 테두리는 적용되지만 인라인 서식 상황에서 라인 상자가 패딩 및 테두리에 의해 밀려나지 않음으로 위와 아래에 내용이 겹칠 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p> + +<h2 id="기타_서식_상황">기타 서식 상황</h2> + +<p>이 안내서는 대열 조판을 다루므로 여타 가능한 서식 상황을 참조하지 않습니다. 따라서 어떤 유형의 서식 상황을 만드는 것이 서식 상황 속에 포함된 요소 무리가 작동하는 방식을 변화시킬 것인지 파악하는 것이 유용합니다. 이런 동작은 항상 에이치티엠엘 규격에 기술되어 있고, 또한 이곳 모질라 개발자 네트워크(MDN)에도 기술되어 있습니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이번 안내서에서는 블록 및 인라인 서식 상황과 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하는 중요한 주제를 자세히 살펴보았습니다. 다음 안내서에서는 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/%ED%9D%90%EB%A6%84_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC_%EC%93%B0%EA%B8%B0_%EB%AA%A8%EB%93%9C">어떻게 일반 대열과 서로 다른 쓰기 모드가 상호 작용</a>하는지에 대해 알아보겠습니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">불록 서식 상황</a></li> + <li><a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model">씨에스에스 기본 상자 모델</a></li> +</ul> diff --git a/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html b/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html new file mode 100644 index 0000000000..2b05d99f39 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html @@ -0,0 +1,72 @@ +--- +title: 대열과 탈대열 +slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열 +tags: + - 대열 + - 대열 조판 + - 씨에스에스 + - 씨에스에스 대열 조판 + - 안내서 + - 조판 + - 중급 +translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +--- +<div>{{CSSRef}}</div> + +<p class="summary"><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/%EC%9D%BC%EB%B0%98_%ED%9D%90%EB%A6%84_%EC%86%8D_%EB%B8%94%EB%A1%9D_%EB%B0%8F_%EC%9D%B8%EB%9D%BC%EC%9D%B8_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83">이전 안내서</a>에서 제가 일반 대열 속 블록 및 인라인 조판에 대해 설명하였습니다. 대열에 속한 모든 요소는 이 메서드를 사용하여 배치됩니다.</p> + +<p>다음 예제에서는 머리글, 단락, 목록 및 <code>strong</code> 요소가 포함된 마지막 단락이 있습니다. 머리글과 단락은 블록 레벨이며, <code>strong</code> 요소는 인라인입니다. 목록은 가변상자를 사용하여 항목을 행 내부로 정렬하지만 블록 및 인라인 조판에도 참여하고 있습니다. 컨테이너는 외곽에 <code>display</code> 유형이 <code>block</code> 대열에 참여하고 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p> + +<p>요소 무리 전체는 대열에 속해 있다고 말할 수 있습니다. 에이치티엠엘 소스에 나타나는 순서대로 요소 무리들이 웹페이지에 등장합니다.</p> + +<h2 id="항목을_대열_밖으로_빼내기">항목을 대열 밖으로 빼내기</h2> + +<p>대열에 속한 모든 요소는 다음과 구분된다:</p> + +<ul> + <li>부동 항목</li> + <li><code>position: absolute</code> 속성이 부여된 항목 (아울러 <code>position: fixed</code> 속성이 딸린 항목도 마찬가지로 동작합니다.)</li> + <li>뿌리 요소(<code>html</code>)</li> +</ul> + +<p>대열에서 벗어난 항목은 새로운 블록 서식 상황(BFC)를 생성하므로, 그 안에 있는 모든 것은 페이지의 나머지 부분과는 구분되는 소형 조판으로 볼 수 있다. 따라서 뿌리 요소는 우리 문서의 모든 내용에 해당하는 컨테이너이기 때문에 대열을 벗어나 있으며 당 문서에 대한 블록 서식 상황을 수립합니다.</p> + +<h3 id="부동_항목">부동 항목</h3> + +<p>이 예제에서 나는 <code>div</code>를 가지고 있고, 그 다음 두 단락을 갖고 있다. 문단에 배경색을 추가한 다음 <code>div</code> 요소를 왼쪽으로 부동시켰다. 이제 <code>div</code>는 대열에서 벗어났다.</p> + +<p>부동체는 우선 일반 대열에 속했던 애초의 위치를 기준으로 배치되었고, 그 뒤 대열에서 벗어나 최대한 왼쪽으로 이동합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p> + +<p>여러분은 부동체 밑에 펼쳐지고 있는 다음 단락의 배경색을 볼 수 있습니다. 동 단락의 라인 상자 무리만 부동체 주변 콘텐츠를 둘러싸는 효과를 위해 축소되었습니다. 우리 단락 형태의 상자는 여전히 일반 대열이라는 규칙에 따라 표시되고 있습니다. 바로 그런 까닭에 부동 항목 주위에 공간을 만들려면 동 항목에 여백을 추가해서 그 여백으로부터 라인 상자 무리를 밀려나도록 해야하는 겁니다. 대열에 속한 다음 순번 콘텐츠에는 그 어떤 것을 적용한다고 해도 그런 효과를 달성할 수 없습니다.</p> + +<h3 id="절대_위치잡기">절대 위치잡기</h3> + +<p>어떤 항목에 <code>position: absolute</code>나 <code>position: fixed</code>를 부여하면 동 항목이 대열에서 제거되며, 그것이 점유하고 있던 모든 공간이 제거됩니다. 다음 예제에서 나는 세 개의 단락 요소를 가지고 있으며, 두 번째 요소는 <code>position</code>와 <code>absolute</code>임에 더해 간격띄우기 값이 <code>top: 30px</code>에 <code>right: 30px</code> 해당됩니다. 그 (두 번째) 요소는 문서 대열에서 제거되었습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p> + +<p><code>position: fixed</code>를 사용해 대열에서 항목을 제거하지만, 간격띄우기는 컨테이너 블록이 아닌 브라우저 뷰포트가 기준입니다.</p> + +<p>위치잡기를 통해 대열에서 항목을 빼내면 콘텐츠의 중복 가능성을 관리해야 합니다. 대열에서 벗어나면 페이지의 다른 요소는 더 이상 요소가 존재한다는 것을 알지 못하므로 이에 반응하지 않습니다.</p> + +<h3 id="상대_위치잡기와_대열">상대 위치잡기와 대열</h3> + +<p>어떤 항목에 <code>position: relative</code> 위치잡기를 부여하면 그것은 대열에 잔류하지만, 당신은 간격띄우기 값을 사용하여 동 항목을 주변으로 밀어낼 수 있습니다. 그러나 아래 예제에서 볼 수 있듯이 그것이 일반 대열 위치에 그대로 남아 있게 됩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p> + +<p>일반 대열에 속해 있었던 어떤 항목을 제거하거나 이동할 때, 해당 항목 주변의 콘텐츠를 겹치지 않도록 관리해야 할 필요성이 있다는 것을 예상할 수밖에 없을 겁니다. 말하자면 부동체를 정리하거나 <code>position: absolute</code>가 적용된 요소가 여타 콘텐츠에 올라타지 않도록 담보해야 합니다. 이러한 이유로 요소 무리를 대열 속에서 제거하는 메서드는 그들 메서드가 가져올 영향을 파악한 상태에서 사용되어야 합니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이번 안내서에서는 매우 구체적인 유형의 위치잡기를 달성하기 위해 요소를 일반 대열에서 빼내는 여러 방법을 다루었습니다. 다음 안내서에서는 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">서식 상황 해설</a> 가운데에서 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 상황</a>을 생성하는 등의 관련 이슈를 살펴볼 겁니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li>서식 학습하기: <em><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9C%84%EC%B9%98%EC%9E%A1%EA%B8%B0">위치잡기</a></em></li> +</ul> diff --git a/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html b/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html new file mode 100644 index 0000000000..cc7753cb70 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html @@ -0,0 +1,122 @@ +--- +title: 일반 대열 속 블록 및 인라인 조판 +slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 +tags: + - 대열 + - 씨에스에스 + - 씨에스에스 대열 조판 + - 안내서 + - 여백 + - 조판 + - 중급 +translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +--- +<div>{{CSSRef}}</div> + +<p class="summary">이번 안내서에서는 블록 및 인라인 요소가 일반 대열의 일부일 때 어떻게 동작하는지에 대한 기본 사항을 살펴본다.</p> + +<p>일반 대열은 <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">씨에스에스 2.1규격</a>에 정의되어 있으며, 이는 일반 대열에 소속된 상자가<em> 서식 상황</em>의 일부가 된다는 것을 설명한다. 그 상자는 블록 또는 인라인이 될 수 있지만 동시에 양수겸장이 될 수는 없다. 블록 수준 상자는 <em>블록 서식 상황</em>에 참여하는 것으로, 인라인 수준 상자는 <em>인라인 서식 상황</em>에 참여하는 것으로 기술한다.</p> + +<p>블록 또는 인라인 서식 상황에 해당하는 요소의 동작은 이(CSS2.1) 규격에서 정의한다. 블록 형식 상황에 해당하는 요소의 경우 규격은 다음과 같다:</p> + +<blockquote> +<p>블록 서식 상황에서 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. 두 형제(동급) 상자 사이 수직 간격은 '여백' 속성에 의해 결정된다. 블록 서식 상황에 속하는 인접하는 블록 수준 상자 사이 수직 여백은 축소된다.<br> + 블록 서식 지정 상황에 속하는 각 상자의 왼쪽 바깥족 가장자리는 콘테이너 블록의 왼쪽 가장자리를 접한다. (오른쪽에서 왼쪽[아랍어] 방향 서식의 경우는 우측 가장자리를 접한다.)" - 9.4.1</p> +</blockquote> + +<p>인라인 서식 상황에 해당하는 요소의 경우:</p> + +<blockquote> +<p>인라인 서식 상황에서 상자는 콘테이너 블록의 상단에서 하나씩 차례로 수평으로 배치된다. 이 상자들 사이 수평 여백, 테두리 및 패딩은 준수된다. 상자는 다양한 방법으로 수직으로 정렬될 수 있다. 상자의 하단이나 상단에 맞춰 정렬되거나 텍스트의 기준선에 맞춰 정렬될 수 있다. 라인 형태를 띠는 여러 상자를 가두는 직사각형 영역을 라인 상자라고 한다. "- 9.4.2</p> +</blockquote> + +<p>씨에스에스 2.1 규격은 문서를 가로쓰기와 세로 쓰기 모드로 기술하고 있다. 예를 들어 블록 상자 사이의 수직 거리를 기술한다. 블록 및 인라인 요소의 동작 방식은 세로 쓰기 모드에서 동작할 때와 동일하다. 앞으로 게시될 대열 조판과 쓰기 모드에 관한 안내서에서 세로 쓰기 모드의 경우를 살펴볼 예정이다.</p> + +<h2 id="블록_서식_상황에_참여하는_요소">블록 서식 상황에 참여하는 요소</h2> + +<p>영어와 같은 가로쓰기 모드에서 블록 요소는 수직으로 다른 대상 요소 바로 밑에 배치된다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p> + +<p>세로 쓰기 모드에서는 수평으로 배치된다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p> + +<p>이 안내서에서 우리는 영어로 작업할 것이기 때문에 가로쓰기 모드를 다룬다. 그러나 기술된 내용 전체는 세로 쓰기 모드에서도 당연히 동일한 방식으로 작동한다.</p> + +<p>씨에스에스 규격에 정의된 대로 2개의 블록 상자 사이 여백이 바로 상자 요소 사이를 구분해주는 것이다. 우리는 그점을 눈으로 확인하기 위해 2개의 단락으로 매우 간단한 하나의 조판에 테두리를 추가했다. 기본 브라우저의 스타일시트는 상하 요소에 여백을 더하는 방식으로 단락 사이 간격을 추가한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p> + +<p>단락 요소의 여백을 <code>0</code>으로 설정하면, 테두리는 접촉한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p> + +<p>기본 설정에 따라 블록 요소는 인라인 방향에 포함된 모든 빈공간을 차지하므로 당해 단락은 펼쳐지면서 콘테이너 블록 내부를 최대한 차지할 수 있게 된다. 블록 너비를 적시하게 되면 옆 공간에 나란히 배치될 공간이 있다손치더라도 다른 대상 요소 바로 밑에 배치된다. 각 블록은 콘테이너 블록의 시작 가장자리에 맞춰 시작되며, 그 위치에 맞춰 해당 쓰기 모드에 포함되는 문장이 시작된다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p> + +<h3 id="여백_축소">여백 축소</h3> + +<p>씨에스에스 규격에 따라 블록 요소 사이의 여백이 <em>축소</em>된다. 즉, 하단 여백이 있는 요소 바로 뒤에 상단 여백을 가진 요소가 있으면 두 여백의 합이 전체 공간이 되는게 아니라 여백이 축소되는데, 본질적으로 두 여백 중 더 큰 것으로 갈음한다.</p> + +<p>아래의 예에 포함된 단락들은 <code>20px</code>의 상부 여백과 <code>40px</code>의 하부 여백을 갖고 있다. 단락 사이 여백의 크기는 <code>40px</code>이다. 왜냐면 두번째 단락의 상대적으로 작은 상부 여백이 첫번째 단락의 상대적으로 큰 하부 여백에 맞춰 축소되었기 때문이다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p> + +<p>여백 축소에 관해선 <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 축소 정복 </a>안내서에서 자세한 내용을 파악할 수 있다.</p> + +<div class="note"> +<p>참고: 여백의 축소 여부가 불확실할 경우 브라우저 개발툴에 나오는 상자 모델 값을 확인하십시오. 이렇게 하면 현재 일어나고 일을 파악하는 데 도움이 될 수 있는 실제 여백 크기를 알 수 있습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p> +</div> + +<h2 id="인라인_서식_상황에_참여하는_요소">인라인 서식 상황에 참여하는 요소</h2> + +<p>인라인 요소는 특정 쓰기 모드에서 문장이 진행하는 방향으로 하나씩 차례대로 표시한다. 인라인 요소를 상자로 간주하지 않는 경향이 있지만 씨에스에스에 속하는 모든 요소처럼 그들도 상자로 간주된다. 이 인라인 상자들은 하나씩 차례대로 배열되어 있다. 컨테이너 블락에 상자 전체를 위한 충분한 공간이 없으면 새 줄로 넘어간다. 생성된 라인은 라인 상자라고 통용된다.</p> + +<p>다음 예에서는 스트롱(strong) 요소를 내부에 포함하는 단락의 형태로 생성된 세개의 인라인 상자가 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p> + +<p><code>strong</code> 요소 전후로 단어를 감싼 상자들은 무명 상자라고 하며 모든 것이 상자로 둘러쳐 있음을 담보하기 위해 상자가 도입된 것이되 직접 대상화할 수 없는 요소이다.</p> + +<p>블록 방향의 라인 상자의 크기는(영어 단락 작업시 글 높이의 경우)는 내부에 있는 가장 큰 상자에 의해 정의된다. 다음 예에서 나는 스트롱 요소의 크기를 300%로 만들었고, 이제 그 콘텐츠가 해당 선상의 라인 상자 높이를 정의한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p> + +<p>블락과 인라인 상자의 동작 방식에 대해 자세한 내용은 <a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a> 안내서를 찾아보십시요.</p> + +<h2 id="display속성_및_대열_조판"><code>display</code>속성 및 대열 조판</h2> + +<p>씨에스에스 2.1에 존재하는 규칙 외에도 새로운 수준의 씨에스에스는 블록 및 인라인 상자의 동작을 추가로 기술한다. <code>display</code> 속성은 상자와 상자 속 상자의 동작 방법을 정의한다. 씨에스에스 디스플레이 모델 수준 3 내용을 보면 디스플레이 속성이 상자의 동작과 생성된 상자에 변화를 주는 방법에 대해 더 자세히 알 수 있다.</p> + +<p>요소의 디스플레이 유형은 외부 디스플레이 유형을 정의하며, 이 외부 디스플레이 유형은 상자가 동일 서식 상황에 속한 다른 요소와 어떻게 병행 표시되는지를 지정한다. 또한, (씨에스에스 디스플레이 모델 수준 3을 보면) 이 요소 내부에 속한 상자가 작동하는 방식을 지정하는 내부 디스플레이 유형도 정의한다. 이런 내용은 가변(flex) 조판를 고려할 때 명확하게 확인할 수 있다. 아래 예제에서 나에게 <code>display: flex</code>를 적용한 div 요소 하나가 있다. 가변 컨테이너는 블록 요소처럼 동작한다. 새 줄에 표시되고 인라인 진행 방향에서 차지할 수 있는 모든 공간을을 차지한다. 이것은 <code>block</code>의 외부 디스플레이 유형이다.</p> + +<p>그러나 가변 항목("Flex Item" 문자열 2개)은 가변 서식 상황에 참여하고 있다. 왜냐면 부모(class container)가 display: flex가 지정된 요소이고, 따라서 (상속에 의해) 내부 디스플레이 유형이 가변이므로 직계 자식의 경우 가변 서식 상황이 수립된다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p> + +<p>따라서 씨에스에스에 포함된 모든 상자가 이런 식으로 작동한다고 간주할 수 있다. 상자 자체는 외부 디스플레이 유형도 갖고있기 때문에 다른 상자와 병행 동작하는 방법을 알고 있다. 그리고 상자는 내부 디스플레이 유형도 갖고있어 자식의 동작 방식도 변경한다. 이어 해당 자식은 외부 및 내부 디스플레이 유형도 갖게된다. 앞 예제에서 가변 항목("Flex Item" 문자열 2개)은 가변 수준 상자가 되며, 따라서 그것의 외부 디스플레이 유형은 그것들이 가변 서식 상황의 일부가 되는 방식에 의해 결정된다. 그들 항목은 <em>대열</em> 디스플레이 유형을 갖게 되는데, 그 의미는 자식이 일반 대열에 참여한다는 것을 의미한다. 당해 가변 항목 내부에 중첩된 항목('children' 'are in' 'normal flow')은 디스플레이 유형이 바뀌지 않는한 블록 및 인라인 요소로 배치된다.</p> + +<p>외부 및 내부 디스플레이 유형이란 개념은 Flexbox(<code>display: flex</code>)와 Grid Layout(<code>display: grid</code>)과 같은 조판 메서드를 사용하는 컨테이너가 해당 메서드의 외부 디스플레이 유형이 <code>block</code>인 관계로 블록 및 인라인 조판에 계속해서 참여하고 있다는 것을 알려준다는 점에서 중요하다.</p> + +<h3 id="하나의_요소가_참여하는_대상의_서식_상황_변경">하나의 요소가 참여하는 대상의 서식 상황 변경</h3> + +<p>브라우저는 해당 요소의 통상적 타당성 여하에 따라 항목을 블록 또는 인라인 서식 맥락의 일부로 표시한다. 예들들면 단어를 강조를 강조하기 위해 스트롱 요소를 사용하며, 브라우저에 굵게 표시됩니다. 스트롱 요소가 블록 수준 요소로 표시되어 새 줄로 밀려나는 것은 일반적으로 타당하지 않다. 당신이 모든 스트롱 요소를 블록 요소로 표시하기를 원하면 당신은 <code>strong</code> 요소에 <code>display: block</code>를 설정함으로써 그렇게 할 수 있다. 즉, 항상 가장 의미론적으로 타당한 HTML 요소를 사용하여 콘텐츠를 표시한 다음 씨에스에스를 사용하여 표시되는 방식을 변경할 수 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이번 안내서에서 우리는 블록 요소나 인라인 요소일 경우처럼 일반 대열속에서 요소가 어떻게 표시되는지 살펴보았다. 이러한 요소에 정해진 기본 동작이 있는 관계로 씨에스에스 스타일 지정이 전혀 없는 에이치티엠엘 문서가 읽기 가능한 방식으로 표시된다. 일반 대열의 작동 방식을 이해하면 조판이 더 쉬워지는 데 그 이유는 요소가 표시되는 방식을 변경하는 출발점을 이해하는 것이기 때문이다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model">씨에스에스 기본 상자 모델</a></li> + <li><em><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></em> - 조판 살펴보기</li> + <li><a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a></li> + <li><a href="/ko/docs/Web/HTML/Block-level_elements">블락 수준 요소</a></li> +</ul> diff --git a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html new file mode 100644 index 0000000000..4d35855ee5 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html @@ -0,0 +1,92 @@ +--- +title: 대열 조판과 쓰기 모드 +slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 +tags: + - 대열 조판 + - 쓰기모드 + - 씨에스에스 + - 안내서 + - 지향 +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +--- +<p class="summary">어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/일반_대열_속_블록_및_인라인_조판">조판</a> 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.</p> + +<p>이것은 씨에스에스(CSS)에 포함된 쓰기 모드 사용에 대한 종합적인 안내서가 아니다. 이 글의 목적은 대열 조판이 쓰기 모드와 예상치 못한 방식으로 상호 작용하는 지점을 문서화하는 것이다. 이 문서의 <a href="#See_Also">참조 항목</a>과 <a href="#External_Resources">외부 리소스</a> 섹션은 쓰기 모드 관련 더 많은 링크를 제공하고 있다.</p> + +<h2 id="쓰기_모드_규격">쓰기 모드 규격</h2> + +<p>씨에스에스 쓰기 모드 수준 3 규격은 문서의 쓰기 모드가 대열 조판에 미치는 영향을 정의한다. 씨에스에스 쓰기 모드 소개란에서 전하는 <a href="https://drafts.csswg.org/css-writing-modes-3/#text-flow">규격은 다음과 같다.</a></p> + +<blockquote> +<p>씨에스에스에 포함되는 쓰기 모드는 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} 속성에 의해 결정된다. 쓰기 모드는 주로 인라인 기준 방향과 블록 대열 방향 여하에 따라 정의된다."</p> +</blockquote> + +<p>쓰기 모드 규격은 내용물이 라인에 정렬되는 방향에 따라 <em>인라인 기준 방향</em>을 정의한다. 기준 방향이 인라인 방향의 시작과 끝을 정의한다. 인라인 방향의 시작은 문장이 시작되는 곳이고, 인라인 방향의 끝은 새 줄로 넘어가기 전에 텍스트가 끝나는 곳이 끝나는 곳이다.</p> + +<p><em>블록 대열 방향</em>은 예로 단락의 경우처럼 블록 쓰기 모드에서 상자를 쌓는 방향이다. 씨에스에스 쓰기 모드 속성은 블록 대열 방향을 제어한다. 페이지 또는 페이지의 일부를 <code>vertical-lr</code>로 변경하고 싶다면, 대상 요소에 <code>writing-mode: vertical-lr</code>를 설정할 수 있고, 이로써 블록의 방향을 변경하는 것이고 아울러 인라인 방향도 변경된다.</p> + +<p>특정 언어일 경우 특정 쓰기 모드나 텍스트 방향을 사용하겠지만, 제목을 세로로 돌리는 등 창의적인 효과를 위해 그러한 속성을 사용할 수도 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}</p> + +<h2 id="writing-mode_속성_및_블록_대열"><code>writing-mode</code> 속성 및 블록 대열</h2> + +<p>{{cssxref("writing-mode")}} 속성은 <code>horizontal-tb</code>과 <code>vertical-rl</code>, <code>vertical-lr</code>를 속성값으로 받는다. 이들 속성값은 페이지 상에 블록의 대열 방향을 제어한다. 초기 값은 <code>horizontal-tb,</code>로써 가로 인라인 방향이 포함된 상단에서 하단으로 가는 블록 대열 방향이다. 영어와 같이 왼쪽에서 오른쪽 방향 언어과 오른쪽에서 왼쪽 방향 언어인 아랍어의 경우든 모두가 <code>horizontal-tb</code>이다.</p> + +<p>다음 예는 <code>horizontal-tb</code>를 사용하는 블록을 보여준다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}</p> + +<p>속성값 <code>vertical-rl</code>는 다음 예와 같이 세로 인라인 방향을 포함하는 오른쪽에서 왼쪽으로 가는 블록 대열 방향을 제공한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}</p> + +<p>마지막 예는 <code>vertical-lr</code>로써 세번 째로 가능한 <code>writing-mode</code> 속성값을 시연하고 있다. 이렇게 하면 왼쪽에서 오른쪽 블록 대열 방향과 세로 인라인 방향을 얻을 수 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}</p> + +<h2 id="부모와_다른_쓰기_모드를_가진_상자">부모와 다른 쓰기 모드를 가진 상자</h2> + +<p>중첩된 상자에 부모와 다른 쓰기 모드가 할당된 경우 인라인 수준 상자는 <code>display: inline-block</code>이 적용된 듯이 표시된다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}</p> + +<p>블록 수준 박스는 새로운 블록 서식 상황을 설정하게 되는데, 내부 디스플레이 유형이 <code>flow</code>일 경우 계산에 따른 디스플레이 유형인 <code>flow-root</code>를 얻게 된다는 뜻이다. 이것은 다음 예에서 보다시피 <code>horizontal-tb</code> 속성에 따라 표시되는 상자가 부동 요소를 포함하고 있는데, 그것이 포함된 까닭은 부모가 새로운 블록 대열 상황을 수립했기 때문이다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}</p> + +<h2 id="대체_요소">대체 요소</h2> + +<p>이미지와 같은 대체 요소는 <code>writing-mode</code>에 주어진 속성에 근거하여 (가로 세로) 쓰기 방향를 바꾸지 않는다. 그러나 텍스트를 포함하는 양식 컨트롤과 같은 대체 요소는 사용중인 쓰기 모드와 일치해야 한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}</p> + +<h2 id="논리적_속성_및_속성값">논리적 속성 및 속성값</h2> + +<p>당신이 <code>horizontal-tb</code> 이외의 쓰기 모드에서 작업하게 될 경우, 스크린의 물리적 크기에 매핑되는 많은 속성 및 속성값들이 이상하게 보일 것이다. 예를 들면 상자에 100px을 부여하면 쓰기 모드가 <code>horizontal-tb</code>일 경우에 인라인 방향의 크기(100px)를 통제하게 된다. 쓰기 모드가 <code>vertical-lr</code>일 상황에서 상자가 텍스트에 맞춰 회전하지 않기 때문에 블록 방향 크기를 상자가 제어한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}</p> + +<p>따라서 우리에게 {{cssxref("블록 크기")}} 및 {{cssxref("인라인 크기")}}라는 새로운 속성이 주어진다. 당해 블록에 <code>inline-size</code>를 100px 부여할 경우 가로쓰기 또는 세로 쓰기 모드 여부는 상관없어지며, <code>inline-size</code>일 경우 항상 인라인 방향의 크기를 의미하게 된다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}</p> + +<p><a href="/ko/docs/Web/CSS/CSS_Logical_Properties">씨에스에스 논리적 속성</a> 규격은 여백, 패딩 및 테두리를 제어하는 속성의 논리적 버전뿐만 아니라 일반적으로 물리적 방향 지정을 위해 대상 요소에 전형적으로 사용되는 다른 매핑을 포함하고 있다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>대부분의 경우, 문서의 쓰기 모드 또는 문서의 일부를 변경할 때 당신이 대상 요소에 기대하는 대로 대열 조판이 작동한다. 쓰기 모드는 세로 쓰기 언어를 올바르게 조판하거나 독창적 표현을 이유로 사용할 수 있다. 씨에스에스는 세로 쓰기 모드에서 작업할 때 크기의 척도를 요소의 인라인과 블록 크기에 기초할 수 있도록 논리적 속성과 속성값을 도입하는 방식으로 간편한 설정을 가능케 해준다. 이런 내용은 다른 쓰기 모드에서 작동할 수 있는 구성 요소를 만들 경우에 유용할 것이다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Writing_Modes">쓰기 모드</a></li> +</ul> + +<h2 id="외부_리소스">외부 리소스</h2> + +<ul> + <li><em><a href="https://24ways.org/2016/css-writing-modes/">씨에스에스 쓰기 모드</a></em>, 젠 시몬스가 소개하는 24가지 방식</li> +</ul> + +<div>{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}</div> diff --git a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html new file mode 100644 index 0000000000..697bdfacde --- /dev/null +++ b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html @@ -0,0 +1,73 @@ +--- +title: 대열 조판과 대열이탈 +slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 +tags: + - 가시성 + - 대열 조판 + - 대열이탈 + - 씨에스에스 + - 안내서 + - 조판 + - 중급 + - 텍스트 대열이탈 +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +--- +<p class="summary">컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.</p> + +<h2 id="오버플로은_무엇인가">오버플로은 무엇인가?</h2> + +<p>어떤 요소에 고정 높이 및 너비를 부여한 다음, 상자에 상당한 내용물을 추가하면 기본적인 오버플로 사례가 만들어 진다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p> + +<p>내용물이 상자 안으로 들어간다. 상자가 채워지면, 눈에 보이게 오버플로이 계속되면서 상자 밖으로 내용물이 표시되고, 후속 내용물 아래에 표시될 가능성까지 있다. 오버플로 동작 방식을 통제하는 속성은 오버플로 속성으로 초기값은 <code>visible</code>로 되어 있다. 그런 까닭에 오버플로한 내용물를 볼 수 있다.</p> + +<h2 id="오버플로_통제">오버플로 통제</h2> + +<p>오버플로된 내용물이 동작하는 방식을 통제하는 그 밖의 값들이 있다. 오버플로된 내용물을 감추려면 <code>hidden</code> 값을 사용한다. 이 값은 내용물을 보이지 않게 만들 수도 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p> + +<p><code>scroll</code> 값을 사용해서 상자의 내용물을 상자 안에 가둬두고 내용물을 볼 수 있게 스크롤 막대를 추가할 수 있다. 스크롤 막대는 내용물이 상자에 들어맞더라도 추가될 것이다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p> + +<p><code>auto</code> 값을 사용하면 상자안에 내용물이 들어맞을 경우 스크롤 막대 없이 내용물을 표시하게 된다. 만일 내용물이 들어맞지 않는다면 스크롤 막대가 추가되게 된다. 다음 예를 <code>overflow: scroll</code> 경우의 예와 비교하면 수직 스크롤 막대가 필요할 경우에도 <code>overflow scroll</code>의 예는 수평 및 수직 스크롤 막대가 있음을 알수 있다. 아래 <code>auto</code> 예제에서는 우리가 스크롤이 필요한 방향으로만 스크롤 막대를 추가한다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p> + +<p>이미 배운 바와 같이 기본값인 <code>visible</code> 이외에 살펴본 값 중의 어떤 값을 사용하게 되면 새로운 블록 서식 상황을 생성하게 된다.</p> + +<p>참고: <a href="https://www.w3.org/TR/css-overflow-3/">작업 초안 오버플로 수준 3</a>을 보면 추가적인 속성 값으로 <code>overflow: clip</code>이 있다. 이것은 <code>overflow: hidden</code>와 같이 작용하지만, 프로그래밍 방식의 스크롤이 불용되어 스크롤 할 수 상자가 된다. 또한, 이것은 블록 서식 상황을 생성하지 못한다.</p> + +<p>오버플로 속성은 실제로는 <code><a href="/en-US/docs/Web/CSS/overflow-x">overflow-x</a></code>와 <code><a href="/en-US/docs/Web/CSS/overflow-y">overflow-y</a></code> 속성의 약칭이다. 오버플로 값을 하나만 지정하면 이 값은 가로 세로 양 축에 모두 사용된다. 그러나 두 가지 값 모두를 지정할 수 있다. 첫번 째 경우에는 <code>overflow-x</code>를 수평 방향 값으로 두번째 경우에는 <code>overflow-y</code>를 수직 방향 값으로 사용하면 된다. 아래 예에서 나는 <code>overflow-y: scroll</code>만 지정함으로써 원치 않는 가로 스크롤 막대가 나타나지 않도록 했다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p> + +<h2 id="상대적_플로우_속성">상대적 플로우 속성</h2> + +<p>우리는 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/%ED%9D%90%EB%A6%84_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC_%EC%93%B0%EA%B8%B0_%EB%AA%A8%EB%93%9C">쓰기 모드와 플로우 레이아웃</a> 안내서에서 <code>block-size</code>와 <code>inline-size</code>라는 새로운 속성를 살펴보았는데, 이 속성은 물리적인 화면 크기에 레이아웃을 구속하기보다는 다양한 쓰기 모드에서 작업할 경우에 적합하다. 수준 3 오버플로 모듈에는 플로우에 상대적인 오버플로 속성들<code><a href="/en-US/docs/Web/CSS/@media/overflow-block">overflow-block</a></code>와 <code><a href="/en-US/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>도 포함되어 있다. 그것들은 <code>overflow-x</code>와 <code>overflow-y</code>에 대응하지만, 매핑은 문서의 쓰기 모드 여하에 달려 있다.</p> + +<p>이들 속성은 현재 브라우저에 구현이 되어 있지 않으므로, 현 시점에는 물리적인 속성을 사용하고 쓰기 모드에 맞게 조정해야 한다.</p> + +<h2 id="오버플로_표시">오버플로 표시</h2> + +<p>수준 3 오버플로 규격에서 우리는 콘텐츠가 오버플로 상황에서 내용물이 보여지는 방식을 개선하도록 도움을 줄 수 있는 몇 가지 속성을 보유하고 있다.</p> + +<h3 id="인라인축_오버플로">인라인축 오버플로</h3> + +<p><code>text-overflow</code> 속성은 인라인 방향의 텍스트 오버플로을 처리한다. 이 속성에는 두 가지 값 중에서 택일한다. <code>clip</code>의 경우는 오버플로하면 내용물이 잘려나간다. 이것이 초기값이므로 기본 동작이다. 또한, <code>ellipsis</code>의 경우는 줄임표를 렌더링하는 것인데, 사용 중인 언어와 쓰기 모드에 따라서는 더 나은 문자로 대체될 수도 있다.</p> + +<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p> + +<h3 id="블록축_오버플로">블록축 오버플로</h3> + +<p>이 글의 작성 시점에 명칭을 두고 아직 논의의 여지가 있지만, <code>block-overflow</code>란 속성도 있다. 이 제안으로 텍스트가 블록 크기를 오버플로할 때 줄임표를 추가할 수 있게 된다.</p> + +<p>이것은 예를 들어 문서 목록이 있고 제한된 양의 텍스트만 취하는 고정 높이 상자에 목록을 표시하는 경우에 유용하다. 상자나 제목을 클릭할 때 클릭할 내용이 더 많다는 것을 독자들이 인지하지 못할 수도 있다. 줄임표는 더 많은 내용이 있다는 사실을 분명하게 보여준다. 이 규격은 일련의 내용 또는 규칙적인 줄임표를 삽입할 수 있게 한다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>웹 상의 연속적인 미디어에 있는지 또는 인쇄 또는 EPUB와 같은 페이징 미디어 형식에 있는지 여부는 어떤 레이아웃 메서드를 처리할 때 어떻게 내용물이 오버플로하게 되는지 이해를 돕는데 유용하다. 일반 대열에서 오버플로이 어떻게 작동하는지 이해함으로써 격자나 가변상자 같은 레이아웃 방식에 포함된 오버플로 내용물의 파장을 더 쉽게 이해할 수 있어야 한다.</p> + +<div>{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}</div> diff --git a/files/ko/web/css/css_fonts/index.html b/files/ko/web/css/css_fonts/index.html new file mode 100644 index 0000000000..eef480caa7 --- /dev/null +++ b/files/ko/web/css/css_fonts/index.html @@ -0,0 +1,102 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +tags: + - CSS + - CSS Fonts + - Overview + - Reference +translation_of: Web/CSS/CSS_Fonts +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Fonts</strong>는 글꼴 관련 속성 및 글꼴 자원이 로드되는 법을 정의하는 CSS 모듈입니다. 이는 글꼴의 스타일을 정의할 수 있습니다, 글꼴 패밀리, 크기 또는 굵기 및 한 문자에 여러 자체(glyph)가 있는 글꼴에 사용되는 이형(variant) 자체와 같은 줄높이도 정의할 수 있습니다.</p> + +<h2 id="참고">참고</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("font")}}</li> + <li>{{cssxref("font-family")}}</li> + <li>{{cssxref("font-feature-settings")}}</li> + <li>{{cssxref("font-kerning")}}</li> + <li>{{cssxref("font-language-override")}}</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("font-size-adjust")}}</li> + <li>{{cssxref("font-stretch")}}</li> + <li>{{cssxref("font-style")}}</li> + <li>{{cssxref("font-synthesis")}}</li> + <li>{{cssxref("font-variant")}}</li> + <li>{{cssxref("font-variant-alternates")}}</li> + <li>{{cssxref("font-variant-caps")}}</li> + <li>{{cssxref("font-variant-east-asian")}}</li> + <li>{{cssxref("font-variant-ligatures")}}</li> + <li>{{cssxref("font-variant-numeric")}}</li> + <li>{{cssxref("font-variant-position")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("line-height")}}</li> +</ul> +</div> + +<h3 id="규칙">@규칙</h3> + +<dl> + <dt>{{cssxref("@font-face")}}</dt> + <dd> + <div class="index"> + <ul> + <li>{{cssxref("@font-face/font-family", "font-family")}}</li> + <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li> + <li>{{cssxref("@font-face/font-style", "font-style")}}</li> + <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> + <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> + <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> + <li>{{cssxref("@font-face/src", "src")}}</li> + <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> + </ul> + </div> + </dd> + <dt>{{cssxref("@font-feature-values")}}</dt> +</dl> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt> + <dd>In this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">OpenType font features guide</a></dt> + <dd>Font features or variants refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. These are all referred to as OpenType Features, and are made available to use on the web via specific properties and a low-level control property — {{cssxref("font-feature-settings")}}. This article provides you with all you need to know about using OpenType font features in CSS.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a></dt> + <dd><strong>Variable fonts</strong> are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.</dd> +</dl> + +<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 Fonts')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font', '')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_generated_content/index.html b/files/ko/web/css/css_generated_content/index.html new file mode 100644 index 0000000000..6d1acc3c8e --- /dev/null +++ b/files/ko/web/css/css_generated_content/index.html @@ -0,0 +1,43 @@ +--- +title: CSS Generated Content +slug: Web/CSS/CSS_Generated_Content +tags: + - CSS + - CSS Generated Content + - Overview + - Reference +translation_of: Web/CSS/CSS_Generated_Content +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Generated Content</strong>는 요소에 콘텐츠를 추가하는 법을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("content")}}</li> + <li>{{cssxref("quotes")}}</li> +</ul> +</div> + +<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('CSS2.1')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..ce1ce28415 --- /dev/null +++ b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,765 @@ +--- +title: Basic concepts of grid layout +slug: Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout +tags: + - CSS + - CSS 그리드 + - 가이드 + - 레이아웃 +--- +<p><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃(Grid Layout)</a>은 CSS에 2차원의 그리드 시스템을 도입했습니다. 그리드는 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있습니다. 이 문서에서는 CSS 그리드 레이아웃 및 CSS 그리드 레이아웃 레벨 1 명세서에 포함된 새로운 기술 용어를 소개합니다. 이번 개요에 소개된 기능은 나머지 안내 문서에서 자세히 설명합니다.</p> + +<h2 id="그리드가_무엇인가요">그리드가 무엇인가요?</h2> + +<p>그리드는 수평선과 수직선이 교차해서 이루어진 집합체입니다 - 하나의 집합체는 세로 열을 그리고 다른 하나는 가로 행을 정의합니다. 각 요소는 이러한 열과 행으로 된 라인을 따라 생성된 그리드에 배치할 수 있습니다. CSS 그리드 레이아웃에는 다음과 같은 기능이 있습니다:</p> + +<h3 id="고정되거나_혹은_유연한_트랙_크기">고정되거나 혹은 유연한 트랙 크기</h3> + +<p>예를 들면, 픽셀 단위를 써서 트랙 크기가 고정된 그리드를 만들 수 있습니다. 이렇게 하면, 원하시는 레이아웃에 꼭 맞도록 픽셀 크기를 지정해서 그리드를 설정하실 수 있습니다. 또한, 퍼센트 혹은 이런 목적에 적합하도록 설계된 새로운 <code>fr</code> 단위의 가변 크기를 지정해서, 좀 더 유연한 성질의 그리드를 만들 수도 있습니다.</p> + +<h3 id="아이템_배치">아이템 배치</h3> + +<p>아이템은 라인 번호, 이름 또는 그리드 영역을 지정해서 그리드의 정확한 위치에 배치할 수 있습니다. 그리드는 또 명확하게 위치가 지정되지 않은 아이템을 알아서 적절히 배치하는 알고리즘도 가지고 있습니다.</p> + +<h3 id="콘텐츠를_담기_위한_추가_트랙의_생성">콘텐츠를 담기 위한 추가 트랙의 생성</h3> + +<p>그리드 레이아웃으로 그리드를 명시적으로 정의할 수 있지만, 지정된 그리드 밖에 따로 추가되는 콘텐츠에 대응하여 필요에 따라 행과 열을 추가할 수 있도록 표준 문서에서 기술하고 있습니다. 일 예로 “컨테이너에 들어갈 수 있는 만큼의 세로 열”을 추가하는 기능이 포함되었습니다.</p> + +<h3 id="정렬_제어">정렬 제어</h3> + +<p>그리드에는 정렬 기능이 있어서 그리드 영역에 아이템을 배치한 후 어떻게 정렬할지, 그리고 전체 그리드가 정렬되는 방식을 제어할 수 있습니다.</p> + +<h3 id="겹치는_콘텐츠_제어">겹치는 콘텐츠 제어</h3> + +<p>그리드 셀에 하나 이상의 아이템을 배치하거나 그리드 영역을 부분적으로 서로 겹치게 할 수 있습니다. 이렇게 생긴 중첩의 우선순위는 나중에 {{cssxref("z-index")}} 프로퍼티로 제어할 수 있습니다.</p> + +<p>그리드는 아주 강력한 기능을 담은 표준이라서 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">플랙스박스(flexbox)</a>와 같은 CSS의 다른 부분과 결합하면, 이전에는 CSS에서 불가능했던 레이아웃을 만들 수 있도록 도와줍니다. 이 모든 것은 <strong>그리드 컨테이너</strong>에서 그리드를 생성하는 것부터 시작합니다.</p> + +<h2 id="그리드_컨테이너">그리드 컨테이너</h2> + +<p><em>그리드 컨테이너</em>는 요소에 <code>display: grid</code> 또는 <code>display: inline-grid</code>를 선언하여 만듭니다. 이렇게 하면 해당 요소 <em>바로 밑에 있는 모든 자식 요소</em>는 <em>그리드 아이템</em>이 됩니다.</p> + +<p>다음 예제에는 클래스로 wrapper라는 이름을 가진 div이 있고, 안에는 다섯 개의 자식 요소가 있습니다.</p> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>이제 <code>.wrapper</code> 요소를 그리드 컨테이너로 지정합니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('그리드_컨테이너', '200', '330') }}</p> + +<p>바로 밑에 있는 모든 자식 요소는 이제 그리드 아이템이 됩니다. 이렇게 하면 웹 브라우저에서 보이는 모습이 그리드로 전환하기 전과 별 차이가 없는데, 이는 그리드가 우선 아이템을 단일 열 형태의 구조를 가진 그리드를 생성하였기 때문입니다. 이 시점에서 Firefox Developer Edition에서 작업하는 것이 유용하실 텐데, 여기엔 개발자 도구의 일부로 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> 기능을 제공합니다. Firefox에서 이 예제의 그리드를 검사해보면, <code>grid</code> 값 바로 옆에 작은 아이콘이 보이실 겁니다. 이 아이콘을 클릭하면 해당 요소의 그리드가 브라우저 창 위에 중첩되어 표시됩니다.</p> + +<p><img alt="그리드를 살펴보기 위해 개발자 도구에 있는 그리드 하이라이터를 사용하는 모습" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p> + +<p>CSS 그리드 레이아웃을 배우면서 작업하실 때 이 도구를 사용하면 그리드에서 발생하는 상황을 시각적으로 더 잘 파악하실 수 있습니다.</p> + +<p>이제 이것을 전형적인 그리드 형태의 모양으로 만들어 주려면 세로 방향의 트랙을 더 추가하면 됩니다.</p> + +<h2 id="그리드_트랙">그리드 트랙</h2> + +<p>그리드의 행과 열은 {{cssxref("grid-template-columns")}} 및 {{cssxref("grid-template-rows")}} 프로퍼티로 정의합니다. 이렇게 하면, 그리드 트랙도 함께 정의됩니다. <em>그리드 트랙</em>은 그리드에 그려진 두 라인 사이의 공간을 나타냅니다. 아래 그림에서는 그리드의 첫 번째 가로 행에 놓여있는 트랙이 돋보이게 표시된 것을 확인하실 수 있습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p> + +<p>앞의 예제에서 <code>grid-template-columns</code> 프로퍼티를 추가하고 세로 열에 놓이게 될 트랙의 크기를 정의해 줍니다.</p> + +<p>이제 200픽셀의 너비를 가진 세로 열 방향의 트랙 세 개를 생성합니다. 자식 아이템들은 이제 그리드에 있는 각자의 그리드 셀 위에 배치됩니다.</p> + +<div id="grid_first"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 200px 200px 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> +</div> + +<h3 id="fr_단위">fr 단위</h3> + +<p>트랙은 모든 종류의 길이 단위를 써서 정의할 수 있습니다. 또한, 그리드에는 유연한 크기의 그리드 트랙을 생성하는 데 사용할 수 있는 단위를 추가로 소개하고 있습니다. 새로 소개된 <code>fr</code> 단위는 그리드 컨테이너에 남아 있는 사용 가능한 공간의 일정 비율을 나타냅니다. 다음에 정의된 그리드에서는 남아 있는 공간에 따라 확장 및 축소되는 같은 너비의 트랙 3개를 생성합니다.</p> + +<div id="fr_unit_ls"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> +</div> + +<p>다음 예제에서는 <code>2fr</code> 크기의 트랙 하나와 <code>1fr</code> 트랙 두 개를 지정하였습니다. 사용 가능한 공간은 4개로 나뉘면서, 공간 두 개는 첫 번째 트랙에 제공하고 나머지 공간 한 부분씩을 다음 두 트랙에 각각 제공합니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} +</pre> + +<p>이번 마지막 예에서는 고정된 크기의 트랙과 비율 단위로 지정한 트랙이 섞여 있습니다. 첫 번째 트랙은 500픽셀의 공간을 차지하므로 이 고정 너비는 사용 가능한 공간에서 제외됩니다. 나머지 공간은 3개의 부분으로 나뉘며 2개의 유연한 트랙에 비율에 맞게 할당됩니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 500px 1fr 2fr; +} +</pre> + +<h3 id="repeat()_표기법으로_트랙_나열"><code>repeat()</code> 표기법으로 트랙 나열</h3> + +<p>많은 트랙을 포함하는 커다란 그리드는 <code>repeat()</code> 표기법을 사용하여 트랙의 전체 또는 일부분을 반복해서 나열해 줄 수 있습니다. 예를 들어 다음과 같이 정의된 그리드의 경우:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<p>다음과 같이 작성할 수도 있습니다:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>반복 표기법은 트랙의 목록 중 일부분에만 사용할 수도 있습니다. 아래 예제에서는 처음엔 20픽셀 크기의 트랙을 생성하고 다음에 <code>1fr</code> 크기의 트랙을 6번 반복해서 채운 후 마지막에 20픽셀 트랙을 붙여서 그리드를 완성합니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 20px repeat(6, 1fr) 20px; +} +</pre> + +<p>반복 표기법은 트랙의 목록도 함께 나열해서 지정할 수 있는데, 이렇게 하면 트랙의 반복 패턴을 생성해서 사용하게 됩니다. 다음 예제는 그리드가 10개의 트랙으로 구성되어 있으며, <code>1fr</code> 크기의 트랙 다음에 <code>2fr</code> 크기 트랙이 위치하고, 이 형태가 5회 반복됩니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(5, 1fr 2fr); +} +</pre> + +<h3 id="잠재적_그리고_명시적_그리드">잠재적 그리고 명시적 그리드</h3> + +<p>지금까지는 그리드 예제를 만들 때마다 {{cssxref("grid-template-columns")}} 프로퍼티를 써서 세로 열의 트랙을 정의해 주었습니다만, 가로 행은 그리드가 콘텐츠에 맞게 알아서 새로운 행을 만들도록 했습니다. 이렇게 만들어진 행은 잠재적 그리드 안에서 생성됩니다. 명시적 그리드는 {{cssxref("grid-template-columns")}} 및 {{cssxref("grid-template-rows")}}로 직접 정의한 행과 열로 이루어진 그리드를 말합니다. 만약에 이렇게 정의된 그리드 밖에 무언가를 배치할 땐, 늘어난 콘텐츠 양 때문에 더 많은 그리드 트랙이 필요하고, 그리드는 잠재적 그리드에 새로운 행과 열을 만들게 됩니다. 이렇게 해서 생긴 트랙은 기본적으로 크기가 자동으로 정해지는데, 트랙 내부의 내용물에 따라 크기가 조정됩니다.</p> + +<p>물론 잠재적 그리드에서 생성된 트랙의 크기는 {{cssxref("grid-auto-rows")}} 및 {{cssxref("grid-auto-columns")}} 프로퍼티를 써서 지정해줄 수도 있습니다.</p> + +<p>아래 예제에서는 잠재적 그리드에서 생성된 트랙의 높이가 반드시 200픽셀이 되도록 <code>grid-auto-rows</code>를 사용하여 하였습니다.</p> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('잠재적_그리고_명시적_그리드', '230', '420') }}</p> + +<h3 id="트랙_크기_조정과_minmax()">트랙 크기 조정과 <code>minmax()</code></h3> + +<p>명시적 그리드를 설정하거나 자동으로 생성된 행이나 열의 크기를 정의할 때, 트랙의 최소 크기를 정해도 나중에 추가되는 콘텐츠에 맞게 늘어나도록 하고 싶을 때가 있을 겁니다. 예를 들면, 가로 행의 높이가 100픽셀 밑으로 줄어드는 것은 막고 싶지만, 콘텐츠가 300픽셀 높이까지 늘어나면 그에 따라 행의 높이도 같이 늘어나길 원할 때가 있습니다.</p> + +<p>이런 경우를 고려해서 그리드는 {{cssxref("minmax", "minmax()")}} 함수를 제공하고 있습니다. 다음 예제에서는 {{cssxref("grid-auto-rows")}} 값에 <code>minmax()</code> 를 사용하였습니다. 자동으로 생성된 행의 높이는 최소 100픽셀이고 최댓값은 <code>auto</code>입니다. <code>auto</code>를 지정하면 크기는 콘텐츠의 크기를 살피게 되는데, 가로 행에 있는 가장 높은 셀의 크기만큼 자동으로 늘어나서 부족한 공간을 메꿔줍니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two + <p>I have some more content in.</p> + <p>This makes me taller than 100 pixels.</p> + </div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('트랙_크기_조정과_minmax()', '240', '470') }}</p> + +<h2 id="그리드_라인">그리드 라인</h2> + +<p>그리드를 정의할 때 라인이 아닌 그리드 트랙을 정의한다는 점을 명심해야 합니다. 그러면 그리드는 아이템을 배치할 때 쓸 수 있게 번호가 매겨진 라인을 자동으로 제공합니다. 아래 그림처럼, 그리드가 세 개의 세로 열(Column)과 두 개의 가로 행(Row)으로 이루어져 있다면, 네 개의 Grid Line이 Column으로 자리 잡게 됩니다.</p> + +<p><img alt="번호가 매겨진 그리드 라인을 보여주는 다이어그램." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p> + +<p>라인은 문서의 작성 모드에 따라 번호가 매겨집니다. 왼쪽에서 오른쪽으로 쓰는 언어에서는 라인 1이 그리드의 왼쪽에 있습니다. 반대로 오른쪽에서 왼쪽으로 쓰는 언어에서는 그리드의 오른쪽에 있게 됩니다. 또한, 라인에 이름도 지정할 수 있으며, 자세한 방법은 이 시리즈의 후반부에서 살펴보겠습니다.</p> + +<h3 id="라인을_이용한_아이템_배치">라인을 이용한 아이템 배치</h3> + +<p>라인에 기반을 둔 배치 방법에 대해서는 다음에 더 자세히 탐구해 볼 예정입니다. 이번 예제에서는 아주 간단한 방법을 알아보겠습니다. 아이템을 배치할 때 트랙이 아닌 라인의 관점에서 정의해 보겠습니다.</p> + +<p>아래 예제에선 처음 두 개의 아이템을 세 개의 열 방향 트랙으로 구성된 그리드 위에 {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} 그리고 {{cssxref("grid-row-end")}} 프로퍼티를 써서 배치합니다. 왼쪽에서 오른쪽으로 작업하면서, 첫 번째 아이템은 세로 열 방향의 1번 라인에 배치되고 세로 열 방향 4번 라인까지 확장됩니다. 이 경우에는 그리드의 맨 오른쪽 라인까지 해당합니다. 그리고 가로 방향의 라인을 기준으로 1번 라인부터 시작해서 행 3번 라인까지 차지하면서 결국, 두 개의 가로 행 트랙을 가로질러 걸치게 됩니다.</p> + +<p>두 번째 아이템은 그리드 세로 열의 1번 라인에서 시작해서 트랙 하나에 걸쳐 있습니다. 여기엔 기본값을 사용해서 마지막 라인은 지정할 필요가 없습니다. 가로 행 방향 라인을 기준으로 3번의 라인부터 5번 라인까지 두 개의 가로 행 트랙에 걸쳐 있습니다. 나머지 아이템은 그리드 빈 자라에 자동으로 배치됩니다.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 5; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('라인을_이용한_아이템_배치', '230', '420') }}</p> + +<p>파이어폭스 개발자 도구에 있는 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a>를 사용하면 아이템이 그리드 라인에 어떻게 배치되어 있는지 이해하기 훨씬 쉽다는 점도 잊지 마십시오.</p> + +<h2 id="그리드_셀">그리드 셀</h2> + +<p><em>그리드 셀</em>은 그리드에 있는 가장 작은 구성원입니다. 개념상 테이블에 있는 셀과 비슷합니다. 앞의 예제에서 보셨듯이, 부모 요소에 그리드를 정의하면 자식 아이템은 지정된 그리드 셀에 각자 하나씩 나열되어 배치됩니다. 아래 그림에서는 그리드의 첫 번째 셀을 강조 표시했습니다.</p> + +<p><img alt="강조 표시된 그리드의 첫 번째 셀" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p> + +<h2 id="그리드_영역">그리드 영역</h2> + +<p>아이템은 행 또는 열 방향 어느 쪽으로든 하나 이상의 셀에 걸쳐있을 수 있으며 이렇게 해서 <em>그리드 영역</em>을 만듭니다. 그리드 영역은 직사각형이어야 하며, 예를 들어 L 자 형태의 영역을 생성할 수 없습니다. 아래 강조 표시된 그리드 영역은 2개의 행과 2개의 열 트랙에 걸쳐 있습니다.</p> + +<p><img alt="그리드 영역의 예" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p> + +<h2 id="경계_여백">경계 여백</h2> + +<p>그리드 셀 사이의 <em>경계 여백</em> 혹은 <em>간격은</em> {{cssxref("grid-column-gap")}} 및 {{cssxref("grid-row-gap")}} 프로퍼티를 지정해서 생성할 수 있으며, 짧게 {{cssxref("grid-gap")}}으로 지정할 수도 있습니다. 아래의 예제에서는 세로 열 사이의 간격은 10픽셀이고 가로 행 사이의 간격은 <code>1em</code>입니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 10px; + grid-row-gap: 1em; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('경계_여백') }}</p> + +<p>간격이 차지하는 공간은 길이가 유연한 <code>fr</code> 단위로 지정한 트랙에 할당하기 전에 우선 고려되어 배분됩니다. 그래서 일반 그리드 트랙처럼 간격은 크기 조정의 목적으로 활용될 수 있으나, 이 공간에는 아무것도 배치할 수 없습니다. 라인 기반 위치 지정 측면에선 간격은 그저 굵은 선처럼 작용합니다.</p> + +<h2 id="중첩_그리드">중첩 그리드</h2> + +<p>그리드 아이템은 자기 자신이 그리드 컨테이너가 될 수도 있습니다. 다음 예제는 이전에 생성했던 3개의 세로 열로 구성된 그리드가 있으며, 여기에 따로 위치가 지정된 두 개의 아이템을 배치해 놓은 모습입니다. 이번 경우엔 첫 번째 아이템이 몇 개의 하위 아이템을 포함하고 있습니다. 이 아이템들은 그리드 바로 밑에 있는 요소가 아니므로 그리드 레이아웃에 관여하지 않고 정상적인 문서 흐름에 따라 표시됩니다.</p> + +<div> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<p><img alt="문서 흐름에 따라 표시된 중첩 그리드" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p> + +<p>만약에 <code>box1에</code> <code>display: grid를</code> 설정하면, 여기에 트랙을 정의할 수 있게 되면서 또 하나의 그리드를 생성하게 됩니다. 이렇게 해서 그 밑의 아이템들은 새 그리드 정의에 따라 배치됩니다.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('중첩_그리드', '600', '340') }}</p> + +<p>이 경우 중첩된 그리드는 상위 부모 요소의 그리드와 아무런 관계가 없습니다. 예제에서 볼 수 있듯이 부모 요소의 {{cssxref("grid-gap")}}을 그대로 물려받지 않았고, 중첩된 그리드의 라인은 부모 요소의 그리드 라인과도 일렬로 정렬되지 않은 것을 확인하실 수 있습니다.</p> + +<h3 id="서브_그리드">서브 그리드</h3> + +<p>레벨 1 그리드 표준에는 <em>서브 그리드(subgrid)</em>라는 기능이 있어서 부모 요소에 있는 그리드 트랙의 정의를 중첩된 그리드에도 적용해서 생성할 수 있도록 하였습니다.</p> + +<div class="note"> +<p>서브 그리드는 아직 모든 브라우저에서 구현되지 않았고 나중에 표준이 변경될 수도 있습니다.</p> +</div> + +<p>최근 작성된 표준에 따르면, 위 중첩 그리드 예시에 썼던 <code>display: grid</code> 대신 <code>display: subgrid</code>를 써주고 트랙의 정의는 제거합니다. 이렇게 하면 중첩된 그리드는 부모 요소의 그리드 트랙을 그대로 참고해서 아이템을 배치하게 됩니다.</p> + +<p>중첩된 그리드는 행과 열 모두에 걸쳐 있음을 유의해야 합니다. 서브 그리드를 작업할 때는 잠재적 그리드의 개념을 적용할 수 없습니다. 즉, 부모 요소의 그리드에 모든 하위 아이템들을 담을 만큼의 충분한 행과 열의 트랙이 있는지 꼭 확인해야 합니다.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: subgrid; +} +</pre> + +<h2 id="z-index를_이용한_아이템_중첩도_조정"><code>z-index</code>를 이용한 아이템 중첩도 조정</h2> + +<p>그리드 아이템은 서로 같은 셀을 차지할 수 있습니다. 앞서 라인 번호로 아이템의 위치를 지정했던 예제로 돌아가서, 여기에 다음과 같이 두 아이템이 서로 자리가 겹치도록 수정합니다.</p> + +<div id="l_ex"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> + +<p><code>box2</code> 아이템은 이제 <code>box1</code>과 겹치게 되고, 소스 순서에서 나중에 위치하므로 맨 위에 표시됩니다.</p> + +<h3 id="중첩의_순서_조정">중첩의 순서 조정</h3> + +<p>위치를 따로 지정한 아이템과 마찬가지로, 아이템이 위아래로 중첩되는 순서는 <code>z-index</code> 프로퍼티를 써서 제어할 수 있습니다. 만약에 <code>box2</code>에 <code>box1</code> 보다 더 낮은 <code>z-index</code>를 지정하면 <code>box1</code> 아래로 중첩되어 표시됩니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + z-index: 2; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; + z-index: 1; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('중첩의_순서_조정', '230', '420') }}</p> + +<h2 id="다음_단계">다음 단계</h2> + +<p>이 글에서는 Grid 레이아웃 표준 문서에 나와 있는 내용을 아주 간단히 살펴보았습니다. 코드 예제를 좀 더 연구해 보시고, <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">안내서의 다음 부분으로 넘어가서 CSS 그리드 레이아웃의 세부 사항을 조금 더 심도 있게 살펴보시기 바랍니다</a>.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li> + <li data-default-state="open"><a href="#"><strong>가이드</strong></a> + <ol> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>용어집</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/ko/web/css/css_grid_layout/grid_template_areas/index.html b/files/ko/web/css/css_grid_layout/grid_template_areas/index.html new file mode 100644 index 0000000000..10bfeb4262 --- /dev/null +++ b/files/ko/web/css/css_grid_layout/grid_template_areas/index.html @@ -0,0 +1,533 @@ +--- +title: Grid template areas +slug: Web/CSS/CSS_Grid_Layout/Grid_template_areas +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +--- +<p><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">이전 가이드</a>에서 우리는 그리드 라인에 대해서 살펴보았으며, 이 라인을 기준으로 어떻게 아이템들을 배치하는지 알아보았습니다. CSS 그리드 레이아웃으로 작업할 땐 거기엔 항상 라인이 있을 것이고, 이것은 아이템들을 그리드에 배치할 때 사용할 수 있는 아주 직관적인 방법이 될 수 있습니다. 그렇지만, 아이템을 그리드에 배치할 때 사용할 수 있는 또 다른 방법이 있는데, 이것은 독자적으로 혹은 라인 기준 배치 방법과 함께 혼용해서 사용할 수 있습니다. 이 방법은 이름이 지명된 템플릿 영역을 사용하여 아이템을 배치하는 작업과 연관돼 있으며, 이 방법이 정확히 어떻게 작동하는지 알아보겠습니다. 이것이 때때로 왜 그리드 레이아웃의 ascii-art 방식이라고 일컬어지는지 쉽게 눈치채실 수 있을 겁니다!</p> + +<h2 id="그리드_영역의_이름_짓기">그리드 영역의 이름 짓기</h2> + +<p>여러분은 이미 {{cssxref("grid-area")}} 프로퍼티와 마주친 적이 있을 겁니다. 이 프로퍼티는 그리드 영역의 위치를 잡는데 사용되는 모두 네 개의 라인 값을 취합니다.</p> + +<pre class="brush: css">.box1 { + grid-area: 1 / 1 / 4 / 2; +} +</pre> + +<p>이렇게 모두 네 개의 라인을 정의하는 작업은, 영역을 둘러싸는 라인을 지정해서 해당 영역이 차지하게 될 자리를 정의해 주는 것이라 할 수 있습니다.</p> + +<p><img alt="라인으로 정의된 그리드 영역" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p> + +<p>이와 더불어서, 각 영역에 이름을 붙여서 정의할 수도 있으며, 각 영역의 위치는 {{cssxref("grid-template-areas")}} 프로퍼티의 값을 지정해서 정의할 수 있습니다. 영역의 이름은 원하시는 것 아무거나 선택해서 사용하실 수 있습니다. 예를 들어, 아래에 보이는 레이아웃을 만들고자 할 때, 다음과 같이 네 개의 주요 영역으로 구분할 수 있습니다.</p> + +<ul> + <li>a header</li> + <li>a footer</li> + <li>a sidebar</li> + <li>the main content</li> +</ul> + +<p><img alt="단순하게 헤더와 푸터가 있는 두 개의 열로 구성된 레이아웃을 보여주는 그림" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p> + +<p>여기서 각 영역의 이름은 {{cssxref("grid-area")}} 프로퍼티로 지정할 수 있습니다. 이것은 아직 아무런 레이아웃도 생성하지 않지만, 이렇게 해서 레이아웃에 사용될 영역의 이름을 갖게 됩니다.</p> + +<div id="Grid_Area_1"> +<pre class="brush: css">.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} +</pre> + +<p>이제 영역의 이름들을 정의하였으니 다음엔 원하는 레이아웃을 생성할 차례입니다. 이번엔, 아이템에 직접 지정된 라인 번호를 써서 아이템을 배치하는 대신에, 전체 레이아웃을 그리드 컨테이너에서 정의해 줍니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "ft ft ft ft ft ft ft ft ft"; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p> </p> + +<pre class="brush: html"><div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div></pre> + +<p>{{ EmbedLiveSample('Grid_Area_1', '300', '330') }}</p> +</div> + +<p>이 방법을 쓰면 각각의 그리드 아이템들에 아무것도 지정해 줄 필요가 없으며, 그리드 컨테이너에서 모든 작업이 이루어집니다. 보셨다시피, 레이아웃은 {{cssxref("grid-template-areas")}} 프로퍼티의 값으로 기술됩니다.</p> + +<h2 id="그리드_셀_비워두기">그리드 셀 비워두기</h2> + +<p>먼젓번 예제에서는, 그리드의 모든 곳이 빈 곳 없이 영역들로 채워져 있습니다. 하지만, 다음에 소개될 레이아웃 방법을 써서 특정 그리드 셀이 공간으로 채워지도록 만들 수도 있습니다. 셀을 공간으로 남겨두려면 마침표 글자(<code>.</code>)를 사용하시면 됩니다. 예제 중 footer 부분을 main으로 표시된 콘텐츠 바로 아래에만 표시되도록 하려면, sidebar 밑에 있는 세 개의 셀을 비워두면 됩니다.</p> + +<pre class="brush: css">.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + ". . . ft ft ft ft ft ft"; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div></pre> + +<p>{{ EmbedLiveSample('그리드_셀_비워두기', '300', '330') }}</p> + +<p>위 예제에서 레이아웃 정의 부분을 더 깔끔하게 보이도록 하려면 여러 개의 <code>.</code> 글자를 사용할 수도 있습니다. 여기서 마침표 사이가 하얀 공간으로 서로 띄워져 있지 않은 한 오직 하나의 셀로 계산됩니다. 아주 복잡한 레이아웃의 경우, 행과 열이 깔끔하게 정렬돼 있다면 훨씬 이해하기 쉬운 장점이 있을 겁니다. 이렇게 하면, CSS를 작업하면서 실제 레이아웃이 어떤 모습으로 보일지 쉽게 눈으로 확인하실 수도 있다는 뜻입니다.</p> + +<h2 id="다중_셀에_걸쳐_확장하기">다중 셀에 걸쳐 확장하기</h2> + +<p>앞선 예제에선 영역들이 다중 셀에 걸쳐서 확장되었는데, 이것은 그리드 영역의 이름을 빈 여백을 사이에 두고 여러 번 반복해서 이루었습니다. 여기서 <code>grid-template-areas</code> 값으로 지정한 부분은 깔끔하게 위아래로 줄이 맞아 떨어지도록 여분의 공백을 추가할 수도 있습니다. 위 예제에선, <code>main</code> 부분과 정렬되도록 <code>hd</code>와 <code>ft</code> 영역 이름에 공백이 추가된 것을 확인하실 수 있습니다.</p> + +<p>영역 이름을 연달아 늘어놓아서 만들어진 영역은 직사각형이어야 하며, 이 시점에서 L 모양의 영역을 만들 수는 없습니다. 표준 명세서에선 아마도 다음번 레벨에서 이 기능이 추가될 수도 있음을 명시하고 있습니다. 그렇지만, 영역을 열 방향과 마찬가지로 행 방향으로도 쉽게 확장할 수 있습니다. 예를 들어, 사이드바 영역에 있는 비어있는 셀을 뜻하는 <code>.</code> 대신에 그 자리를 <code>sd</code>로 대치해서 footer 밑부분까지 확장하도록 정의해 줄 수 있습니다.</p> + +<pre class="brush: css">.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "sd sd sd ft ft ft ft ft ft"; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div></pre> +</div> + +<p>{{ EmbedLiveSample('다중_셀에_걸쳐_확장하기', '300', '330') }}</p> + +<p>{{cssxref("grid-template-areas")}} 값은 그리드 전체를 나타내야 하며, 그렇지 않으면 틀린 것으로 간주하여 결국 프로퍼티는 무시됩니다. 이 얘기는 각 줄의 셀 숫자가 모두 같아야 한다는 뜻이며, 비어있는 경우는 마침표 문자를 써서 셀이 비어있음을 표시해 주어야 합니다. 또한, 영역이 직사각형이 아니라면 유효하지 않은 그리드를 생성하게 됩니다.</p> + +<h2 id="미디어_큐어리(media_queries)를_이용한_그리드_재정의">미디어 큐어리(media queries)를 이용한 그리드 재정의</h2> + +<p>이제는 레이아웃이 CSS의 한 부분으로 들어오면서, 서로 다른 브레이크포인트에 대응해서 변하게 만드는 것이 훨씬 쉬워졌습니다. 이 작업은 그리드를 재정의하거나, 그리드에 있는 아이템의 위치를 바꿔줄 수도 있으며, 혹은 한꺼번에 두 가지 모두를 진행할 수도 있습니다.</p> + +<p>이 작업을 할 때 주의할 점은, 미디어 큐어리 밖에서 영역의 이름을 정의해야 한다는 것입니다. 이렇게 해야 가령 콘텐츠 영역의 경우, 그리드 위 어느 곳에 배치되든 상관없이 항상 해당 영역을 <code>main</code>으로 지칭할 수 있게 됩니다.</p> + +<p>위 예제에 있는 레이아웃을 가지고, 만약 너비가 좁을 때는 아주 단순한 레이아웃을 형성하도록 단일 열 형태의 그리드를 정의해서 아이템들이 서로 중첩되도록 하였습니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.header { + grid-area: hd; +} +.footer { + grid-area: ft; +} +.content { + grid-area: main; +} +.sidebar { + grid-area: sd; +} + +.wrapper { + display: grid; + grid-auto-rows: minmax(100px, auto); + grid-template-columns: 1fr; + grid-template-areas: + "hd" + "main" + "sd" + "ft"; +} +</pre> + +<p>그러고 나서, 미디어 큐어리 안에서 남아있는 공간이 넓다면 두 개의 열로 된 레이아웃을 구성하도록 다시 정의해 주었으며, 공간이 더 넓으면 세 개의 열로 된 형태의 레이아웃 띠도록 하였습니다. 넓은 형태의 레이아웃의 경우, 아홉 개의 열 트랙 그리드는 그대로 놔두었으며, <code>grid-template-areas</code>를 써서 아이템들이 어디에 배치될지를 다시 정의해 준 점을 주목해 주십시오.</p> + +<pre class="brush: css">@media (min-width: 500px) { + .wrapper { + grid-template-columns: repeat(9, 1fr); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "sd sd sd ft ft ft ft ft ft"; + } +} +@media (min-width: 700px) { + .wrapper { + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd main main main main main ft ft"; + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div></pre> +</div> + +<p>{{ EmbedLiveSample('미디어_큐어리(media_queries)를_이용한_그리드_재정의', '550', '330') }}</p> + +<h2 id="UI_요소를_위한_grid-tempate-areas_사용">UI 요소를 위한 <code>grid-tempate-areas</code> 사용</h2> + +<p>온라인에서 찾을 수 있는 많은 그리드 예제들을 보면 주로 주요 페이지 레이아웃에만 그리드를 사용한다고 느끼실 수 있습니다만, 그리드는 큰 요소만큼이나 작은 요소에서도 유용하게 사용될 수 있습니다. 특히나 {{cssxref("grid-template-areas")}}를 쓰면 요소가 어떻게 보일지 코드를 보면 쉽게 이해할 수 있어서 아주 유용합니다.</p> + +<p>아주 간단한 예로 “미디어 오브젝트”를 만들어 보겠습니다. 이 컴포넌트의 한쪽은 그림이나 다른 미디어를 위한 공간이 차지하고 다른 쪽은 주 내용이 위치하게 됩니다. 그림은 박스의 오른쪽 혹은 왼쪽에 표시될 수 있습니다.</p> + +<p><img alt="미디어 오브젝트 디자인의 한 예를 보여주는 그림" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p> + +<p>여기서 그리드는 두 개의 열 트랙으로 구성되어 있으며, 그림이 들어가는 공간의 열 트랙의 크기는 <code>1fr</code>이며 글자 내용이 들어가는 공간의 크기는 <code>3fr</code>입니다. 만약에 고정된 너비의 그림 영역을 원하시면, 그림이 들어가는 열의 너비는 픽셀값으로 설정하고, 글자 영역에는 <code>1fr</code>을 지정하실 수 있습니다. 그러면 <code>1fr</code> 크기의 단일 열 트랙이 남은 공간을 모두 차지하게 됩니다.</p> + +<p>그림이 위치하는 영역의 그리드 이름으로 <code>img</code>를 지정하고 글자 영역은 <code>content</code>라 부르기로 하고, <code>grid-template-areas</code> 프로퍼티를 써서 다음과 같이 배치하게 됩니다.</p> + +<div id="Media_1"> +<pre class="brush: css">* {box-sizing: border-box;} + +.media { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 400px; +} +.media { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-areas: "img content"; + margin-bottom: 1em; +} + +.media .image { + grid-area: img; + background-color: #ffd8a8; +} + +.media .text { + grid-area: content; + padding: 10px; + +} +</pre> + +<pre class="brush: html"><div class="media"> + <div class="image"></div> + <div class="text">This is a media object example. + We can use grid-template-areas to switch around the image and text part of the media object. + </div> +</div></pre> + +<p>{{ EmbedLiveSample('Media_1', '300', '200') }}</p> +</div> + +<h3 id="박스의_반대편에_그림_표시하기">박스의 반대편에 그림 표시하기</h3> + +<p>반대로 그림이 박스의 맞은편에 표시되기를 원하실 때도 있을 겁니다. 이렇게 하려면, <code>1fr</code> 크기의 트랙을 마지막에 위치하도록 하고, 단순하게 {{cssxref("grid-template-areas")}}의 값을 뒤집어서 그리드를 다시 정의해주면 됩니다.</p> + +<div id="Media_2"> +<pre class="brush: css">* {box-sizing: border-box;} + +.media { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + max-width: 400px; +} +.media { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-areas: "img content"; + margin-bottom: 1em; +} + +.media.flipped { + grid-template-columns: 3fr 1fr; + grid-template-areas: "content img"; +} + +.media .image { + grid-area: img; + background-color: #ffd8a8; +} + +.media .text { + grid-area: content; + padding: 10px; + +} +</pre> + +<pre class="brush: html"><div class="media flipped"> + <div class="image"></div> + <div class="text">This is a media object example. + We can use grid-template-areas to switch around the image and text part of the media object. + </div> +</div></pre> + +<p>{{ EmbedLiveSample('Media_2', '300', '200') }}</p> +</div> + +<h2 id="그리드_정의_단축용법">그리드 정의 단축용법</h2> + +<p>지금까지 그리드 위에 아이템을 배치하는 여러 가지 방법과 또 그리드를 정의하는 다양한 프로퍼티들을 살펴보았습니다. 이번에는 그리드를 정의하는 데 사용할 수 있는 몇 가지 단축용법을 살펴보고 또 이 모든 것을 CSS 한 줄로 정의하는 법을 알아볼 차례입니다.</p> + +<p>이것은 분명 다른 개발자나 심지어 미래의 나 자신도 금방 이해하기 어려울 수도 있습니다. 하지만, 표준 명세서에 기술된 용법 중 하나로서, 개별적으로 사용하진 않더라도, 공개된 예제나 다른 개발자가 사용하는 것을 목격할 수 있을 겁니다.</p> + +<p>단축용법을 쓰기 전에 꼭 명심해야 할 것은 단축용법은 단번에 많은 프로퍼티의 설정이 가능할 뿐만 아니라, 정의하지 않은, 혹은 정의할 수 없는 것들도 그들의 <strong>초깃값으로 재설정되도록 작용</strong>한다는 점입니다. 그러므로 단축용법을 사용할 땐 다른 곳에서 적용했던 것들이 재설정될 수도 있다는 점을 주의하십시오.</p> + +<p>그리드 컨테이너에서 사용할 수 있는 단축용법에는 두 가지가 있는데, 하나는 명시적 그리드 단축용법으로 <code>grid-template</code>이 있고, 나머지는 그리드 정의 단축용법으로 <code>grid</code>가 있습니다.</p> + +<h3 id="grid-template"><code>grid-template</code></h3> + +<p>{{cssxref("grid-template")}} 프로퍼티는 다음과 같은 프로퍼티들을 설정합니다:</p> + +<ul> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> +</ul> + +<p>이 프로퍼티는, 잠재적으로 생성되는 열과 행 트랙에 영향을 끼치는 것이 아닌, 명시적 그리드를 정의할 때 조정할 수 있는 것들을 설정하는 것이어서 명시적 그리드 단축용법이라 불립니다.</p> + +<p>다음에 있는 코드는 {{cssxref("grid-template")}}를 써서 이 가이드 앞부분에서 만들었던 레이아웃과 똑같은 레이아웃을 만들었습니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template: + "hd hd hd hd hd hd hd hd hd" minmax(100px, auto) + "sd sd sd main main main main main main" minmax(100px, auto) + "ft ft ft ft ft ft ft ft ft" minmax(100px, auto) + / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; +} +</pre> + +<p>첫 번째 값은 <code>grid-template-areas</code> 값에 해당합니다. 하지만 각 행의 마지막에 해당 행의 크기도 함께 선언해 주었습니다. 여기에 있는 <code>minmax(100px, auto)</code>가 이 역할을 합니다.</p> + +<p>그리고 <code>grid-template-areas</code> 뒤에 옆으로 누운 슬래시(/)가 있고, 바로 그 뒤에 세로 행 트랙들을 위한 명시적 트랙 목록이 정의되어 있습니다.</p> + +<h3 id="grid"><code>grid</code></h3> + +<p>{{cssxref("grid")}} 단축용법은 한 발 더 나가 잠재적 그리드를 정의하는 데 사용되는 프로퍼티들도 같이 설정합니다. 그래서 여기서 설정하는 프로퍼티들은 다음과 같습니다:</p> + +<ul> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> +</ul> + +<p>이 프로퍼티는 또 {{cssxref("grid-gap")}} 프로퍼티를 <code>0</code>으로 재설정합니다만, 이 단축용법에서는 이 간격을 지정해줄 수는 <em>없습니다</em>.</p> + +<p>이 용법은 {{cssxref("grid-template")}} 단축용법과 똑같은 방법으로 사용할 수 있습니다만, 이렇게 하면 설정했던 다른 프로퍼티 값들을 재설정하게 된다는 점을 주의하셔야 합니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid: "hd hd hd hd hd hd hd hd hd" minmax(100px, auto) + "sd sd sd main main main main main main" minmax(100px, auto) + "ft ft ft ft ft ft ft ft ft" minmax(100px, auto) + / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; +} +</pre> + +<p>이 단축용법이 제공하는 다른 기능은 나중에 자동 배치와 <code>grid-auto-flow</code> 프로퍼티를 알아보는 가이드에서 다시 살펴보겠습니다.</p> + +<p>만약 지금까지의 초반 가이드들을 쭉 훑어보셨다면, 이제 라인을 기준으로 한 배치나 이름이 지명된 영역을 사용해서 그리드 레이아웃을 만드실 수 있는 위치까지 도달하셨습니다. 다음엔 충분한 시간을 가지고 그리드를 사용해서 몇몇 일반적인 레이아웃 패턴을 만들어 보시도록 하십시오. 앞으로 더 배워야 할 많은 새로운 기술 용어들이 있지만, 이들의 문법은 비교적 이해하기 쉬울 겁니다. 여러 예제를 다루시면서, 지금까지 다루지 않았던 것들에 대한 여러 의문점과 복잡한 사용 사례들을 마주칠 수 있을 겁니다. 이번 가이드의 나머지 부분에서는 표준 명세서에 있는 좀 더 자세한 사항들을 알아 볼 예정입니다. 그래서 앞으로 소개될 기술을 가지고 좀 더 복잡한 고급 레이아웃을 만들 수 있게 되시길 바랍니다.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li> + <li data-default-state="open"><a href="#"><strong>가이드</strong></a> + <ol> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>용어집</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/ko/web/css/css_grid_layout/index.html b/files/ko/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..f3d2b42199 --- /dev/null +++ b/files/ko/web/css/css_grid_layout/index.html @@ -0,0 +1,253 @@ +--- +title: CSS 그리드 레이아웃 +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - Grid Layout + - Grids + - 개요 + - 그리드 + - 그리드 레이아웃 + - 레이아웃 + - 참고 +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p><strong>CSS 그리드 레이아웃(Grid Layout)</strong>은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.</p> + +<p>테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다.</p> + +<h2 id="Basic_Example" name="Basic_Example">기본 예제</h2> + +<p>아래 예제는 3개의 세로 열 트랙으로 이루어졌으며, 저절로 채워지며 생성되는 가로 행 트랙은 높이가 최소 100픽셀 이상, 콘텐츠 최대치까지 자동으로 늘어나는 구조의 그리드를 보여줍니다. 각 아이템은 그리드 라인을 기준으로 배치되었습니다.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="wrapper"> + <div class="one">One</div> + <div class="two">Two</div> + <div class="three">Three</div> + <div class="four">Four</div> + <div class="five">Five</div> + <div class="six">Six</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +.one { + grid-column: 1 / 3; + grid-row: 1; +} +.two { + grid-column: 2 / 4; + grid-row: 1 / 3; +} +.three { + grid-column: 1; + grid-row: 2 / 5; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="참고">참고</h2> + +<h3 id="CSS_프로퍼티">CSS 프로퍼티</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> +</div> + +<h3 id="CSS_함수">CSS 함수</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="CSS_데이터_타입">CSS 데이터 타입</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="용어집_목록">용어집 목록</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="가이드">가이드</h2> + +<div class="index"> +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">그리드 레이아웃과 다른 레이아웃 방법과의 관계</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> +</ul> +</div> + +<h2 id="외부_문서">외부 문서</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> + <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> + <li><a href="http://cssgridgarden.com">Grid Garden</a> - A game for learning CSS grid</li> +</ul> + +<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('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li> + <li data-default-state="open"><a href="#"><strong>가이드</strong></a> + <ol> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>용어집</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html new file mode 100644 index 0000000000..bc0957fb2e --- /dev/null +++ b/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -0,0 +1,497 @@ +--- +title: Layout using named grid lines +slug: Web/CSS/CSS_Grid_Layout/Layout_using_named_grid_lines +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +--- +<p>이전 가이드에선 그리드 트랙을 정의하면 생성되는 라인을 사용해서 아이템을 배치하는 법을 살펴보았으며, 또한 이름이 명명된 템플릿 영역을 가지고 어떻게 아이템들을 배치하는지도 알아보았습니다. 이번 가이드에선 이름이 주어진 라인을 쓰는 상황에서 이 두 가지 방법이 서로 어떻게 작용하는지 알아보겠습니다. 라인에 이름을 지어 주는 것이 매우 유용할 때도 있지만, 이름과 트랙 크기가 혼합돼서 사용되는 그리드 용법을 보고 있으면 매우 헷갈릴 수도 있습니다. 하지만 몇 가지 예제를 가지고 작업해 보시면 점점 명확해지면서 나중엔 작업하기도 훨씬 수월해지실 겁니다.</p> + +<h2 id="그리드를_정의할_때_라인의_이름_짓는_법">그리드를 정의할 때 라인의 이름 짓는 법</h2> + +<p><code>grid-template-rows</code> 그리고 <code>grid-template-columns</code> 프로퍼티로 그리드를 정의할 때 그리드에 있는 모든 라인 혹은 일부 라인들에 이름을 지어 줄 수 있습니다. 본보기로 라인을 기준으로 아이템을 배치하는 방법을 설명한 가이드에서 만들었던 간단한 레이아웃을 예로 들어 보겠습니다. 이번엔 이름이 주어진 라인을 써서 그리드를 만들 겁니다.</p> + +<div id="example_named_lines"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>그리드를 정의할 때, 그리드 라인의 이름은 대괄호 안에 적어줍니다. 여기서 라인 이름은 원하시는 것 아무거나 다 괜찮습니다. 여기선 컨테이너를 감싸는 행과 열 방향의 시작과 끝 라인 모두의 이름을 정의해 주었습니다. 그리드에 있는 모든 라인의 이름을 다 붙여줄 필요는 없습니다만, 그리드 가운데에 있는 블록의 행과 열 방향의 라인 이름을 <code>content-start</code> 그리고 <code>content-end</code>라는 이름을 정의해 주었습니다. 이런 식으로 레이아웃의 몇몇 주요 라인들에만 이름을 붙여주시면 됩니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; + grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; +} +</pre> + +<p>이렇게 라인들에 이름을 짓고 나면, 라인 번호 대신에 이름을 써서 아이템을 배치할 수 있게 됩니다.</p> + +<pre class="brush: css">.box1 { + grid-column-start: main-start; + grid-row-start: main-start; + grid-row-end: main-end; +} + +.box2 { + grid-column-start: content-end; + grid-row-start: main-start; + grid-row-end: content-end; +} + +.box3 { + grid-column-start: content-start; + grid-row-start: main-start; +} + +.box4 { + grid-column-start: content-start; + grid-column-end: main-end; + grid-row-start: content-end; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('example_named_lines', '500', '330') }}</p> +</div> + +<p>라인을 기준으로 배치할 때 적용할 수 있는 다른 모든 사항은 여기서도 똑같은 방식으로 작동하며 이름이 주어진 라인과 라인 번호를 섞어서 사용하실 수도 있습니다. 이름이 주어진 라인의 사용은 그리드를 재정의하는 반응형 디자인을 만들고자 할 때, 미디어 쿼리에서 라인 번호를 바꿔가면서 일일이 콘텐츠의 위치를 다시 정의해 줄 필요가 없다는 장점이 있습니다. 다만, 그리드를 정의할 때 라인의 이름은 항상 같은 것을 사용하도록 주의해야 합니다.</p> + +<h3 id="라인에_여러_개의_이름_지어주기">라인에 여러 개의 이름 지어주기</h3> + +<p>라인의 이름을 정할 때 하나 이상의 이름을 붙여주고 싶을 때가 있는데, 예를 들어 sidebar-end 그리고 main-start를 함께 표기하고자 할 때가 있습니다. 이럴 땐 <code>[sidebar-end main-start]</code>처럼 대괄호 안에서 공백을 사이에 두고 이름을 추가해 주면 됩니다. 그러면 해당 라인은 둘 중 아무 이름을 써도 같은 것을 가리키게 됩니다.</p> + +<h2 id="이름이_주어진_라인으로_만들어지는_잠재적_그리드_영역">이름이 주어진 라인으로 만들어지는 잠재적 그리드 영역</h2> + +<p>라인의 이름을 지어줄 때는 원하시는 이름 아무거나 붙여주셔도 된다고 말씀드린 바 있습니다. 여기에 붙이는 이름은 <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a>로서, 저자가 정의해 준 이름이 됩니다. 이름을 지을 때 명세서에 나타날 수 있는 단어는 피하시는 게 좋으며 <code>span</code>과 같이 혼동을 줄 수 있는 것도 사용하지 말아야 합니다. 그리고 이름에 따옴표가 포함되면 안 됩니다.</p> + +<p>이름은 아무거나 선택하실 수 있지만, 위 예제에 나와 있는 것처럼 만약에 영역 주변에 있는 라인의 이름 끝에 <code>-start</code> 혹은 <code>-end</code>를 붙이면, 그리드는 전체 이름 중 꼬리 부분을 뗀 주요 이름만으로 명명된 영역을 생성하게 됩니다. 위 예제에선, 열과 행의 라인 모두 <code>content-start</code>와 <code>content-end</code>라는 이름이 주어져 있습니다. 이 말은 <code>content</code>라는 이름의 영역이 자동으로 만들어 지면서, 원하시면 어떠한 요소든 해당 영역에 이 이름을 써서 배치할 수 있게 된다는 뜻입니다.</p> + +<div id="implicit_areas_from_lines"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>다음 예제에선 위에서와 똑 같은 그리드를 정의해 주었지만, 이번엔 <code>content</code>라는 이름을 가진 영역에 하나의 아이템을 배치하였습니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; + grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; +} +.thing { + grid-area: content; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="thing">I am placed in an area named content.</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}</p> +</div> + +<p>여기선 라인의 이름을 지어 주면서 해당 라인이 감싸는 영역이 자동으로 만들어졌기 때문에, <code>grid-template-areas</code>를 써서 영역의 위치를 일일이 정의해 줄 필요가 없습니다.</p> + +<h2 id="이름이_주어진_영역으로_만들어지는_잠재적_그리드_라인">이름이 주어진 영역으로 만들어지는 잠재적 그리드 라인</h2> + +<p>지금까지 라인에 이름을 지어 주면 어떻게 해당 이름으로 된 영역도 함께 만들어지는지 살펴보았으며, 이는 역으로도 작용합니다. 이름이 주어진 템플릿 영역은 그에 어울리는 이름이 붙여진 라인을 생성하면서, 이를 이용해서 아이템을 배치할 수 있게 됩니다. 이전 그리드 템플릿 영역에 관한 가이드에서 만들었던 레이아웃을 그대로 가져와서, 여기에 영역을 지정해서 만들어진 라인을 써서 레이아웃에 적용해 본다면 이것이 어떻게 작동하는지 쉽게 이해하실 수 있을 겁니다.</p> + +<p>다음 예제에선 <code>overlay</code>라는 이름의 클래스를 지정한 추가 div 요소를 더하였습니다. <code>grid-area</code> 프로퍼티를 써서 이름이 주어진 영역을 생성하였고, <code>grid-template-areas</code> 프로퍼티에서 레이아웃을 정의해 주었습니다. 영역의 이름은 다음과 같습니다:</p> + +<ul> + <li><code>hd</code></li> + <li><code>ft</code></li> + <li><code>main</code></li> + <li><code>sd</code></li> +</ul> + +<p>이렇게 해서 만들어진 열과 행 라인의 이름은 다음과 같습니다:</p> + +<ul> + <li><code>hd-start</code></li> + <li><code>hd-end</code></li> + <li><code>sd-start</code></li> + <li><code>sd-end</code></li> + <li><code>main-start</code></li> + <li><code>main-end</code></li> + <li><code>ft-start</code></li> + <li><code>ft-end</code></li> +</ul> + +<p>이름이 주어진 라인의 모습은 아래 그림에서 확인할 수 있는데, 몇몇 라인들은 두 개의 이름을 가지고 있는 것을 확인하실 수 있습니다. 예를 들면, <code>sd-end</code>와 <code>main-start</code>는 같은 열 방향의 라인을 가리키고 있습니다.</p> + +<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p> + +<p>여기서 잠재적으로 이름이 주어진 라인을 써서 <code>overlay</code> 요소를 배치하는 방법은 이름을 직접 지정한 라인을 써서 아이템을 배치하는 방법과 똑같습니다.</p> + +<div id="implicit_lines_from_area"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-template-areas: + "hd hd hd hd hd hd hd hd hd" + "sd sd sd main main main main main main" + "ft ft ft ft ft ft ft ft ft"; +} + +.header { + grid-area: hd; +} + +.footer { + grid-area: ft; +} + +.content { + grid-area: main; +} + +.sidebar { + grid-area: sd; +} + +.wrapper > div.overlay { + z-index: 10; + grid-column: main-start / main-end; + grid-row: hd-start / ft-end; + border: 4px solid rgb(92,148,13); + background-color: rgba(92,148,13,.4); + color: rgb(92,148,13); + font-size: 150%; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> + <div class="overlay">Overlay</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}</p> +</div> + +<p>이름이 주어진 영역으로부터 라인이 생성되고 또 라인에 이름을 정해주면 거기에 맞는 영역이 만들어지면서, 이를 이용해 아이템을 배치할 수 있다는 점을 고려한다면, 그리드 레이아웃을 만들기 시작할 때 미리 계획해서 이름을 정하는 데 약간의 시간을 할애할 가치가 있음을 알 수 있습니다. 이름을 선택할 때 자신과 자기 팀원들 모두가 쉽게 이해할 수 있는 것으로 정한다면 모두에게 여러분이 만든 레이아웃을 쉽게 이용하는 데 도움을 줄 수 있을 것입니다.</p> + +<h2 id="repeat()을_써서_같은_이름을_가진_여러_개의_라인_만들기">repeat()을 써서 같은 이름을 가진 여러 개의 라인 만들기</h2> + +<p>만약에 그리드에 있는 모든 라인에 독자적인 이름을 지어 주길 원하신다면, 트랙을 정의할 때 반복 용법을 사용하는 대신 대괄호 안에다 이름을 일일이 추가해줘야 해서 약간 장황하게 트랙의 정의를 작성하셔야 합니다. 반복 용법을 사용하게 되면 여러 라인이 같은 이름을 갖게 되는데, 이 또한 매우 유용할 수도 있습니다.</p> + +<p>다음 예제에서는 같은 너비를 가진 열두 개의 열로 구성된 그리드를 생성합니다. 여기선 1fr 너비의 열 트랙을 정의하기 전에 <code>[col-start]</code>라는 라인 이름을 함께 정의해 주었습니다. 이렇게 하면 <code>1fr</code> 너비의 세로 열 전면에 똑같이 <code>col-start</code>라는 이름이 주어진 12개의 열 방향의 라인으로 구성된 그리드를 만들게 됩니다.</p> + +<div id="multiple_lines_same_name"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p> </p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); +}</pre> + +<p>이렇게 그리드를 생성하고 나면 여기에다 아이템을 배치할 수 있게 됩니다. 여러 개의 라인 이름을 <code>col-start</code>라는 이름으로 지어 주었기 때문에 <code>col-start</code> 라인을 기준 시작 지점으로 아이템을 배치하게 되면 그리드는 첫 번째에 있는 <code>col-start</code>라는 이름의 라인을 사용하게 되는데, 여기선 맨 왼쪽에 있는 라인이 여기에 해당합니다. 또 다른 라인을 가리키려면 이름과 함께 해당 라인의 번호를 더해주면 됩니다. 아이템을 <code>col-start</code>라는 이름의 첫 번째 라인으로부터 다섯 번째 라인까지 걸치도록 배치하려면 다음과 같이 정의해 줍니다:</p> + +<pre class="brush: css">.item1 { + grid-column: col-start / col-start 5 +} +</pre> + +<p>또한, 여기선 <code>span</code> 키워드를 쓰실 수도 있습니다. 다음 아이템은 <code>col-start</code> 이름을 가진 일곱 번째 라인부터 세 개의 라인에 걸치도록 배치하였습니다.</p> + +<pre class="brush: css">.item2 { + grid-column: col-start 7 / span 3; +} +</pre> + +<p class="brush: html"> </p> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">I am placed from col-start line 1 to col-start 5</div> + <div class="item2">I am placed from col-start line 7 spanning 3 lines</div> +</div></pre> + +<p>{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}</p> +</div> + +<p>이 레이아웃을 Firefox Grid Highlighter에서 살펴보면 세로 열 라인이 어떻게 구성되어 있는지 그리고 또 아이템들이 이 라인들에 따라 어떻게 배치되었는지 확인하실 수 있습니다.</p> + +<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p> + +<p>반복 용법은 또한 트랙의 목록을 나열해서 사용할 수 있으며, 오직 하나의 트랙 크기만 반복하도록 쓰실 필요는 없습니다. 아래의 코드는 여덟 개의 트랙으로 구성된 그리드를 만드는데, 상대적으로 더 좁은 <code>1fr</code> 너비의 <code>col1-start</code>라는 라인 이름이 지정된 세로 열 트랙 다음으로 <code>3fr</code> 너비의 <code>col2-start</code>라는 라인 이름이 지정된 세로 열 트랙으로 구성되어 있습니다.</p> + +<pre class="brush: css">.wrapper { + grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr); +} +</pre> + +<p>만약에 반복 용법에 사용된 두 개의 라인이 서로 겹치게 된다면 그 둘은 나중에 하나로 합쳐지는데, 이는 반복 용법을 쓰지 않고 트랙을 정의할 때 하나의 라인에 여러 개의 이름을 지정해 주는 것과 똑같은 결과를 만들어 냅니다. 다음 정의에선 <code>1fr</code> 너비의 트랙 네 개를 생성하는데, 각 트랙은 서로 시작과 마지막을 지점에 있는 라인을 갖게 됩니다.</p> + +<pre class="brush: css">.wrapper { + grid-template-columns: repeat(4, [col-start] 1fr [col-end] ); +} +</pre> + +<p>반복 표기법을 쓰지 않고 이번에 정의한 것과 같도록 작성해 준다면 다음과 같이 써줄 수 있습니다.</p> + +<pre class="brush: css">.wrapper { + grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end]; +} +</pre> + +<p>트랙 목록을 사용했다면 <code>span</code> 키워드를 써서, 단지 몇 개의 라인들을 걸치게 할지 정해줄 뿐만 아니라, 특정 이름의 라인 몇 개를 걸쳐서 자리를 잡게 할지도 정해 줄 수 있습니다.</p> + +<div id="span_line_number"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr); +} + +.item1 { + grid-column: col1-start / col2-start 2 +} + +.item2 { + grid-row: 2; + grid-column: col1-start 2 / span 2 col1-start; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">I am placed from col1-start line 1 to col2-start line 2</div> + <div class="item2">I am placed from col1-start line 2 spanning 2 lines named col1-start</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('span_line_number', '500', '330') }}</p> +</div> + +<p>최근 세 개의 가이드를 통해서 여러분은 그리드를 이용해 아이템을 배치하는 방법이 아주 다양하다는 것을 발견하셨을 겁니다. 처음엔 이것이 너무 복잡하다고 느끼실 수도 있겠지만, 이 모든 것을 다 이해하고 사용하실 필요는 없다는 점을 기억하시기 바랍니다. 실상황에서 간단하고 명확한 레이아웃을 구현할 경우에는 이름이 지명된 템플릿 영역을 쓰는 것이 적당할 것입니다. 이것은 레이아웃이 어떤 모습을 보여줄지 시각적으로 좋은 묘사를 제공하며, 또한 그리드에 있는 아이템을 이리저리 쉽게 옮길 수도 있습니다.</p> + +<p>또한, 예를 들어 만약에 다중 칼럼에 꼭 들어맞는 레이아웃을 가지고 작업할 때는 이 가이드 마지막 부분에서 설명한 이름이 지정된 라인들을 사용했던 그리드가 제격입니다. 만약에 Foundation 혹은 Boostrap과 같은 프레임워크에서 채용한 그리드 시스템을 고려하신다면, 이들은 12개의 세로 열 그리드를 기준으로 하고 있습니다. 프레임워크에서는 세로 열을 모두 합쳐 최대 100%를 차지하도록 하는 모든 계산이 코드 속에 포함되어 있습니다. 하지만, 그리드 레이아웃에서 이 그리드 "프레임워크"를 구현하는데 필요한 코드는 아래처럼 아주 간단하게 작성할 수 있습니다:</p> + +<div class="three_column"> +<pre class="brush: css">.wrapper { + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(12, [col-start] 1fr); +} +</pre> + +<p>그러면 페이지 레이아웃에 이 프레임워크를 그대로 가져다 쓰실 수 있습니다. 예를 들어, 헤더와 푸터가 있는 세 개의 세로 열 레이아웃을 구현한다면 아래와 같은 마크업을 작성할 수 있습니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > * { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-header">I am the header</header> + <aside class="side1">I am sidebar 1</aside> + <article class="content">I am the main article</article> + <aside class="side2">I am sidebar 2</aside> + <footer class="main-footer">I am the footer</footer> +</div> +</pre> + +<p>그러면 이것을 이번에 작성한 그리드 레이아웃 프레임워크를 써서 다음과 같이 배치할 수 있습니다.</p> + +<pre class="brush: css">.main-header, +.main-footer { + grid-column: col-start / span 12; +} + +.side1 { + grid-column: col-start / span 3; + grid-row: 2; +} + +.content { + grid-column: col-start 4 / span 6; + grid-row: 2; +} + +.side2 { + grid-column: col-start 10 / span 3; + grid-row: 2; +} +</pre> + +<p>{{ EmbedLiveSample('three_column', '500', '330') }}</p> + +<p>다시 한번 말씀드리지만, Firefox Grid Highlighter는 지금까지 우리가 배치했던 아이템들이 그리드 위에 어떻게 놓였는지 확인할 때 아주 유용하답니다.</p> + +<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p> +</div> + +<p>필요한 건 이게 전부 다입니다. 복잡한 계산 작업도 필요하지 않고, 그리드가 1fr 크기의 세로 열 트랙에 공간을 할당하기 전에, 자동으로 10픽셀 크기의 경계 여백 트랙이 차지하는 공간을 알아서 제거해 줍니다. 차차 여러분만의 레이아웃을 만들다 보면, 용법에 점점 더 익숙해 지면서 자기에게 맞는 작업 방식을 터득하게 되고, 나중에 만들고자 하는 프로젝트의 유형에 따라 적당한 것을 고를 수 있는 요령이 생기게 되실 겁니다. 우선은 지금까지 소개된 여러 방법들을 가지고 몇몇 자주 쓰이는 레이아웃의 형태들을 만들어 보신다면, 아마도 곧 가장 효율적인 자기만의 작업 방식을 찾으실 수 있을 겁니다. 그러면, 다음 가이드에선 배치 관련 프로퍼티를 전혀 쓰지 않고도 아이템들이 그리드 위에 알아서 배치되도록 만드는 방법을 알아보겠습니다.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li> + <li data-default-state="open"><a href="#"><strong>가이드</strong></a> + <ol> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>용어집</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html new file mode 100644 index 0000000000..91b32582b4 --- /dev/null +++ b/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -0,0 +1,649 @@ +--- +title: Line-based placement with CSS Grid +slug: Web/CSS/CSS_Grid_Layout/Line-based_placement_with_CSS_grid +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +--- +<p><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념을 다룬 문서</a>에서 라인 번호를 사용하여 그리드에 아이템을 배치하는 방법을 잠깐 살펴본 적이 있습니다. 이번 문서에서는 이 기본적 기능이 어떻게 작동하는지를 자세히 살펴보겠습니다.</p> + +<p>그리드를 연구할 때는 번호가 매겨진 라인부터 시작하는 것이 가장 논리적일 겁니다. 왜냐하면, 그리드 레이아웃을 쓸 때마다 거기엔 항상 번호가 매겨진 라인이 있기 때문입니다. 행과 열의 각 라인에는 번호가 매겨져 있으며, 라인에 번호를 매길 때는 1번부터 시작합니다. 그리드 라인은 문서의 작성 모드를 기준으로 번호가 매겨진다는 것을 명심하십시오. 영어와 같이 왼쪽에서 오른쪽으로 읽히는 언어로 쓰인 문서에서는 1번 라인이 그리드의 맨 왼쪽에 위치합니다. 반대로 오른쪽에서 왼쪽으로 읽히는 언어의 문서에서는 1번 라인이 그리드의 맨 오른쪽에 위치하게 됩니다. 문서 작성 모드와 그리드 사이의 상호 작용에 대해서는 나중에 자세히 알아보겠습니다.</p> + +<h2 id="간단한_예제">간단한 예제</h2> + +<p>아주 간단한 예로, 세 개의 세로 열 트랙과 세 개의 가로 행 트랙으로 구성된 그리드의 예를 들어보겠습니다. 여기엔 각 방향으로 4개의 라인이 있습니다.</p> + +<p>그리드 컨테이너 안에는 네 개의 자식 요소가 있습니다. 이것들을 아무런 조건 없이 그대로 그리드 위에 위치시키면, 자동 배치 규칙에 따라 각 아이템은 처음에 있는 네 개의 셀 위에 놓이게 됩니다. 여기서 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox의 Grid Highlighter</a>를 사용하면 그리드의 열과 행이 어떻게 정의되어 있는지 확인하실 수 있습니다.</p> + +<p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('간단한_예제', '300', '330') }}</p> + +<h2 id="라인_번호로_아이템_배치하기">라인 번호로 아이템 배치하기</h2> + +<p>아이템들을 그리드 위 어느 곳에 자리 잡게 할지 조정할 때는 라인을 기준으로 배치할 수 있습니다. 우선 아래 예제에서는 첫 번째 아이템을 그리드의 맨 왼쪽부터 시작해서 하나의 열 트랙에 자리하도록 하였습니다. 또한, 그리드 상단에 있는 첫 번째 행부터 시작해서 네 번째 행까지 확장하도록 하였습니다.</p> + +<div id="Line_Number"> +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 1; + grid-row-end: 4; +} +</pre> + +<p>몇몇 아이템의 위치를 지정해주면, 그리드에 있는 나머지 다른 아이템들은 자동 배치 규칙에 따라 연달아 놓이게 됩니다. 이 규칙은 나중에 가이드에서 어떻게 작동하는지 자세히 살펴볼 예정입니다만, 그리드와 작업하시면 자리를 지정하지 않은 아이템은 그리드의 비어있는 셀에 자동 배치되는 것을 자주 목격하실 수 있습니다.</p> + +<p>각 아이템을 개별적으로 지정해서 행과 열 트랙에 걸쳐 네 개의 아이템들을 모두 배치할 수 있습니다. 원하시면 여기에 몇몇 셀들을 그냥 비워 둘 수도 있습니다. 그리드 레이아웃의 장점 중 하나는, 비어 있는 공간으로 다른 요소가 떠올라 채워지는 것을 막기 위해 마진을 써서 밀어낼 필요가 없어서, 흰 여백이 들어간 디자인을 쉽게 구현할 수 있다는 점입니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.box2 { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} +.box3 { + grid-column-start: 2; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 2; +} +.box4 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 3; + grid-row-end: 4; +} +</pre> + +<p>{{ EmbedLiveSample('Line_Number', '300', '330') }}</p> +</div> + +<div id="Grid_Shorthands"> +<h2 id="grid-column과_grid-row_단축용법"><code>grid-column</code>과 <code>grid-row</code> 단축용법</h2> + +<p>앞의 예제에선 각 아이템을 배치하기 위해 상당히 많은 코드가 작성되었습니다. 그래서 여기엔 분명 {{glossary("shorthand properties", "단축용법")}}이 있을 거란 예상을 충분히 할 수 있습니다. 실제 {{cssxref("grid-column-start")}}와 {{cssxref("grid-column-end")}} 프로퍼티는 {{cssxref("grid-column")}}으로 합칠 수 있으며, {{cssxref("grid-row-start")}}와 {{cssxref("grid-row-end")}}는 {{cssxref("grid-row")}} 프로퍼티로 정의할 수 있습니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column: 1 / 2; + grid-row: 1 / 4; +} +.box2 { + grid-column: 3 / 4; + grid-row: 1 / 3; +} +.box3 { + grid-column: 2 / 3; + grid-row: 1 / 2; +} +.box4 { + grid-column: 2 / 4; + grid-row: 3 / 4; +} +</pre> + +<p>{{ EmbedLiveSample('Grid_Shorthands', '300', '330') }}</p> +</div> + +<h3 id="기본_폭(spans)">기본 폭(spans)</h3> + +<p>위 예제에선, 프로퍼티의 사용법을 설명하려고 모든 행과 열의 마지막 라인을 지정하였습니다. 하지만, 아이템이 오직 하나의 트랙만 차지한다면 <code>grid-column-end</code>와 <code>grid-row-end</code> 값은 생략할 수 있습니다. 그리드는 기본적으로 하나의 트랙에 걸치게 돼 있습니다. 이 말은 처음의 장황했던 예제가 다음처럼 단축될 수도 있습니다:</p> + +<div id="End_Lines"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-row-start: 1; + grid-row-end: 4; +} +.box2 { + grid-column-start: 3; + grid-row-start: 1; + grid-row-end: 3; +} +.box3 { + grid-column-start: 2; + grid-row-start: 1; +} +.box4 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 3; +} +</pre> + +<p>{{ EmbedLiveSample('End_Lines', '300', '330') }}</p> +</div> + +<p>또한, 단축용법을 사용했던 예제 중 오직 하나의 트랙에 걸쳐 있는 아이템의 경우에는 뒤로 누운 슬래쉬와 두 번째 값을 생략하고 다음처럼 정의할 수 있습니다.</p> + +<div id="New_Shorthand"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column: 1 ; + grid-row: 1 / 4; +} +.box2 { + grid-column: 3 ; + grid-row: 1 / 3; +} +.box3 { + grid-column: 2 ; + grid-row: 1 ; +} +.box4 { + grid-column: 2 / 4; + grid-row: 3 ; +} +</pre> + +<p>{{ EmbedLiveSample('New_Shorthand', '300', '330') }}</p> +</div> + +<h2 id="grid-area_프로퍼티"><code>grid-area</code> 프로퍼티</h2> + +<p>우리는 여기서 한 발 더 나가 각 영역을 단 하나의 프로퍼티인 {{cssxref("grid-area")}}로 정의할 수도 있습니다. <code>grid-area</code> 값의 순서는 다음과 같습니다.</p> + +<ul> + <li>grid-row-start</li> + <li>grid-column-start</li> + <li>grid-row-end</li> + <li>grid-column-end</li> +</ul> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-area: 1 / 1 / 4 / 2; +} +.box2 { + grid-area: 1 / 3 / 3 / 4; +} +.box3 { + grid-area: 1 / 2 / 2 / 3; +} +.box4 { + grid-area: 3 / 2 / 4 / 4; +} +</pre> + +<p>{{ EmbedLiveSample('grid-area_프로퍼티', '300', '330') }}</p> + +<p><code>grid-area</code> 값의 순서는 약간 이상하게 보일 수도 있는데, 예를 들어 마진과 패딩을 단축용법을 써서 지정할 때의 순서와 완전 정반대입니다. 하지만, 그리드가 CSS 문서 작성 모드(CSS Writing Modes) 표준 명세서에 정의된 문서 흐름과 관련된 방향을 채용해서 사용한다는 것을 알게 되면 이해하기 쉽습니다. 차후에 그리드가 문서 작성 모드에 따라 어떻게 작용하는지 알아볼 예정입니다만, 개념상 다음과 같이 문서 흐름과 관련된 네 가지 방향이 있습니다:</p> + +<ul> + <li>block-start</li> + <li>block-end</li> + <li>inline-start</li> + <li>inline-end</li> +</ul> + +<p>예를 들자면, 영문으로 쓰인 문서는 왼쪽에서 오른쪽으로 읽습니다. 이 경우 block-start는 그리드 컨테이너의 맨 위쪽에 있는 가로 행 라인이 차지하고, block-end는 컨테이너의 매 마지막 행에 있는 라인에 해당합니다. inline-start는 항상 현재의 문서 작성 모드에 따라 텍스트가 써지는 시작 지점이기 때문에 맨 왼쪽에 있는 세로 열 라인이 여기에 해당하고, inline-end는 그리드의 오른쪽 마지막 끝에 있는 세로 열 라인이 됩니다.</p> + +<p><code>grid-area</code> 프로퍼티를 써서 그리드 영역을 지정할 땐, 우선 시작 라인인 <code>block-start</code>와 <code>inline-start</code>를 먼저 정의하고, 나중에 마지막 라인으로 <code>block-end</code>와 <code>inline-end</code>를 정의합니다. 이것은 보통 우리가 top, right, bottom 그리고 left 순서의 물리적 프로퍼티를 사용하는 데 익숙하다는 점을 생각하면 이상하게 보일 수도 있지만, 웹사이트의 문서 작성 모드가 여러 방향일 수 있다는 점을 고려하면 이해가 쉬우실 겁니다.</p> + +<h2 id="거꾸로_세기">거꾸로 세기</h2> + +<p>우리는 또한 그리드의 블록(block)과 인라인(inline) 지점의 끝에서부터 거꾸로 셀 수도 있는데, 영문 문서의 경우 이것은 맨 오른쪽 세로 열 라인과 마지막 가로 행 라인이 여기에 해당합니다. 이 라인들은 <code>-1</code>로 지칭할 수 있으며, 여기서 거꾸로 셀 수도 있습니다. 그래서 끝에서 두 번째 라인은 <code>-2</code>가 됩니다. 한 가지 주의할 점은, 여기서 말하는 마지막 라인은 <em>명시적으로</em> <code>grid-template-columns</code>와 <code>grid-template-rows</code>로 정의한 그리드에 있는 마지막 라인을 가리키며, 이 바깥에 있는 <em>잠재적 그리드</em>에 추가된 행이나 열을 고려하지는 않습니다.</p> + +<p>다음 예제에는 아이템을 배치할 때 그리드의 오른쪽과 아래에서부터 작업을 시작해서 이전에 작성했던 레이아웃을 거꾸로 뒤집어 보았습니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column-start: -1; + grid-column-end: -2; + grid-row-start: -1; + grid-row-end: -4; +} +.box2 { + grid-column-start: -3; + grid-column-end: -4; + grid-row-start: -1; + grid-row-end: -3; +} +.box3 { + grid-column-start: -2; + grid-column-end: -3; + grid-row-start: -1; + grid-row-end: -2; +} +.box4 { + grid-column-start: -2; + grid-column-end: -4; + grid-row-start: -3; + grid-row-end: -4; +} +</pre> + +<p>{{ EmbedLiveSample('거꾸로_세기', '300', '330') }}</p> + +<h3 id="그리드_전체에_걸치도록_아이템_늘리기">그리드 전체에 걸치도록 아이템 늘리기</h3> + +<p>아이템을 그리드 전체에 걸치도록 늘리려 할 때 유용한 방법으로 다음과 같이 그리드의 시작과 끝의 라인을 지정해줄 수 있습니다:</p> + +<pre class="brush: css">.item { + grid-column: 1 / -1; +} +</pre> + +<h2 id="경계_여백_혹은_간격">경계 여백 혹은 간격</h2> + +<p>CSS 그리드 표준 명세서에는 {{cssxref("grid-column-gap")}}과 {{cssxref("grid-row-gap")}} 프로퍼티를 써서 열과 행 트랙 사이에 경계 여백을 정의해 줄 수 있는 기능이 포함되어 있습니다. 이것은 다중 칼럼 레이아웃에 있는 {{cssxref("column-gap")}} 프로퍼티와 비슷하게 작용해서 트랙 사이의 간격을 지정합니다.</p> + +<p>간격은 오직 그리드의 트랙 사이에서만 위치하고, 컨테이너의 위나 아래 혹은 왼쪽과 오른쪽에 공간을 추가하지 않습니다. 이전 예제에 있는 그리드 컨테이너에 여기에 소개한 프로퍼티를 사용하여 간격을 추가한 모습을 아래에서 확인하실 수 있습니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column: 1 ; + grid-row: 1 / 4; +} +.box2 { + grid-column: 3 ; + grid-row: 1 / 3; +} +.box3 { + grid-column: 2 ; + grid-row: 1 ; +} +.box4 { + grid-column: 2 / 4; + grid-row: 3 ; +} +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); + grid-column-gap: 20px; + grid-row-gap: 1em; +} +</pre> + +<p>{{ EmbedLiveSample('경계_여백_혹은_간격', '300', '350') }}</p> + +<h3 id="그리드_간격의_단축용법">그리드 간격의 단축용법</h3> + +<p>앞서 소개한 두 개의 프로퍼티 또한 단축용법인 {{cssxref("grid-gap")}}으로 표현해 줄 수 있습니다. 만약에 <code>grid-gap</code> 값으로 하나만 지정하면, 열과 행 간격 모두에 같이 적용됩니다. 그리고 두 개의 값을 지정하면, 처음 것은 <code>grid-row-gap</code>에 사용되고 두 번째 것은 <code>grid-column-gap</code>에 사용됩니다.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); + grid-gap: 1em 20px; +} +</pre> + +<p>라인을 기준으로 한 아이템 배치 관점에서 보면, 이 간격은 마치 라인에 너비를 더한 것처럼 작용합니다. 특정 라인을 시작으로 배치되는 아이템은 간격 다음에 있는 지점에서부터 놓이게 되며, 간격을 차지하거나 그 안에 배치될 수 없습니다. 만약에 경계 여백이 일반 트랙처럼 작용하길 원하시면, 대신에 해당 목적의 트랙을 따로 지정해서 사용하길 바랍니다.</p> + +<h2 id="span_키워드_사용법"><code>span</code> 키워드 사용법</h2> + +<p>번호를 붙여서 시작과 마지막 라인을 지정하는 법과 더불어, 시작 라인을 지정한 후 원하는 만큼의 영역을 가로질러 확장하는 트랙의 수를 지정해서 사용하실 수도 있습니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 100px); +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.box1 { + grid-column: 1; + grid-row: 1 / span 3; +} +.box2 { + grid-column: 3; + grid-row: 1 / span 2; +} +.box3 { + grid-column: 2; + grid-row: 1; +} +.box4 { + grid-column: 2 / span 2; + grid-row: 3; +} +</pre> + +<p>{{ EmbedLiveSample('span_키워드_사용법', '300', '330') }}</p> + +<p>또한, <code>grid-row-start</code>/<code>grid-row-end</code> 그리고 <code>grid-column-start/grid-column-end</code> 값에도 <code>span</code> 키워드가 쓰일 수 있습니다. 다음의 두 예제에서는 서로 같은 그리드 영역을 만듭니다. 첫 번째 예제에서는 가로 열의 시작 라인을 지정한 후에, 마지막 라인은 3개의 라인을 가로질러 위치하도록 설정하였습니다. 그래서 영역은 1번 라인부터 시작해서 3개의 라인을 가로질러 4번 라인까지 차지하게 됩니다.</p> + +<pre>.box1 { + grid-column-start: 1; + grid-row-start: 1; + grid-row-end: span 3; +} +</pre> + +<p>두 번째 예제에선, 아이템이 끝나는 지점에 있는 마지막 라인을 지정한 다음 시작 라인을 <code>span 3</code>으로 설정하였습니다. 이 얘기는 아이템이 지정한 마지막 가로 열 라인으로부터 위쪽으로 확장해야 한다는 뜻입니다. 이렇게 하면, 영역은 4번 라인부터 시작해서 3개의 라인을 가로질러 1번 라인까지 차지하게 됩니다.</p> + +<pre>.box1 { + grid-column-start: 1; + grid-row-start: span 3; + grid-row-end: 4; +} +</pre> + +<p>그리드 라인을 기준으로 아이템을 배치하는 법에 익숙해지시려면, 다양한 수의 열로 이뤄진 그리드에 아이템들을 배치하시면서 몇 가지 일반적 레이아웃을 만들어보는 여러 시도를 해보시기 바랍니다. 여기서 주의할 점은 모든 아이템의 위치를 일일이 지정하지 않았다면, 나머지 아이템들은 자동 배치 규칙에 따라 배치된다는 것을 명심하시기 바랍니다. 이런 레이아웃이 원하시는 것일 수도 있지만, 만약에 의도치 않은 곳에 아이템이 표시된다면, 해당 아이템의 위치를 지정해 주었는지 꼭 확인해 보십시오.</p> + +<p>또한, 그리드에 배치된 아이템들은 원하시면 명확히 지정해서 서로 자리가 겹치게 할 수도 있다는 것을 잊지 마십시오. 이렇게 하면 특이하고 멋진 효과를 만들어 낼 수도 있습니다만, 만약에 시작 혹은 마지막 라인을 잘못 지정해 놓았다면, 의도치 않은 곳에서 서로 겹쳐 버리는 결과를 가져올 수도 있습니다. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a>는 배우시면서 매우 유용하게 사용될 수 있는데, 특히나 그리드가 상당히 복잡한 경우에는 더 그렇습니다.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li> + <li data-default-state="open"><a href="#"><strong>가이드</strong></a> + <ol> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>용어집</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..8483386140 --- /dev/null +++ b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,625 @@ +--- +title: Relationship of grid layout to other layout methods +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_grid_layout +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +<p>CSS 그리드 레이아웃은 레이아웃 작업을 위한 전체 시스템 중의 일부로서, 다른 CSS 기술과 함께 어우러져 작동하도록 설계되었습니다. 이번 가이드에서는 이미 사용하고 계신 다른 기술과 그리드가 어떻게 잘 어울리는지 설명해 드리겠습니다.</p> + +<h2 id="그리드와_플랙스박스">그리드와 플랙스박스</h2> + +<p>CSS 그리드 레이아웃과 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS 플랙스박스(Flexbox) 레이아웃</a>의 기본 차이점이라면, 플랙스박스는 한 줄로 된 행 <em>혹은</em> 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었다는 점입니다. 하지만, 그리드는 행과 열 모두를 염두에 둔 2차원적 레이아웃을 고려해서 설계되었습니다. 그러나 두 기술은 몇 가지 공통된 면모를 공유하고 있어서, 이미 플랙스박스 사용법을 익히셨다면 그리드를 이해하는 데도 도움이 될 만한 둘 사이의 유사점을 목격하실 수도 있습니다.</p> + +<h3 id="1차원적_대비_2차원적_레이아웃">1차원적 대비 2차원적 레이아웃</h3> + +<p>간단한 예를 들면, 1차원 및 2차원 레이아웃의 차이점은 확연해집니다.</p> + +<p>첫 번째 예제에서는 플랙스박스를 써서 일련의 네모난 상자들을 배치하였습니다. 컨테이너 안에는 다섯 개의 자식 아이템이 있고, 플랙스 기준값 200픽셀을 기반으로 아이템이 늘어나거나 줄어들도록 flex 프로퍼티 값을 지정하였습니다.</p> + +<p>또한, {{cssxref("flex-wrap")}} 프로퍼티 값으로 <code>wrap</code>을 지정해서, 만약 컨테이너 안에 있는 공간이 플랙스 기준값 너비의 아이템들을 모두 나열하지 못할 만큼 좁아진다면, 다음 행으로 줄 바꿈 하도록 하였습니다.</p> + +<div id="onedtwod"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: flex; + flex-wrap: wrap; +} +.wrapper > div { + flex: 1 1 200px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p> + +<p>위의 그림에서 보시다시피, 두 개의 아이템이 다음 행으로 줄 바꿈 한 것을 확인하실 수 있습니다. 이 아이템들은 남은 공간을 공유하며 아래 위치한 아이템들은 위에 있는 것들과는 일렬로 정렬되지 않았습니다. 이는 플랙스 아이템이 다음 열로 감길 때, 새로운 각각의 행 (또는 세로 열 기준으로 작업할 경우 각각의 열)이 새로운 플랙스 컨테이너가 되기 때문입니다. 그래서 공간의 분배는 가로 행을 기준으로 이루어집니다.</p> + +<p>여기서 자주 던지는 질문으로, 그러면 이런 아이템을 어떻게 하면 일렬로 정렬할 수 있을까입니다. 이럴 땐 2차원적 레이아웃 방법을 고려해 볼 수 있습니다. 아이템을 정렬할 때 행과 열을 기준으로 제어하고 싶다면, 이런 경우엔 그리드가 제격입니다.</p> + +<h3 id="CSS_그리드를_이용한_동일_레이아웃_구현">CSS 그리드를 이용한 동일 레이아웃 구현</h3> + +<p>다음 예제에선 그리드를 써서 똑같은 레이아웃을 만들어 보았습니다. 이번엔 <code>1fr</code> 크기로 된 세 개의 세로 열 트랙으로 이루어져 있습니다. 아이템 자체에는 아무것도 설정할 필요가 없고, 아이템들은 생성된 그리드의 각 셀에 하나씩 배치됩니다. 보시다시피 아이템들은 행과 열에 줄지어서 그리드 위에 정확히 맞추어져 있습니다. 아이템이 다섯 개인 경우, 2번째 행의 끝부분은 빈 곳으로 남게 됩니다.</p> + +<div class="Two_Dimensional_With_Grid"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p> +</div> + +<p>그리드와 플랙스박스 둘 사이의 선택을 고민할 때 자신에게 던질 수 있는 간단한 질문으로:</p> + +<ul> + <li>레이아웃을 조정할 때 오직 가로 행 <u><em>혹은</em></u> 세로 열 만이 고려 대상이라면 – 플랙스박스를 사용하십시오</li> + <li>레아아웃을 조정할 때 가로 행과 세로 열 <u><em>모두</em></u>를 염두에 두어야 한다면 – 그리드를 사용하십시오</li> +</ul> + +<h3 id="콘텐츠_중심_혹은_레이아웃_먼저">콘텐츠 중심 혹은 레이아웃 먼저?</h3> + +<p>1차원 대비 2차원의 차이점 외에도, 레이아웃을 할 때 플랙스박스와 그리드 중에서 어떤 것을 써야 할지를 결정하는 또 다른 요인이 있습니다. 플랙스박스는 좀 더 콘텐츠에 초점이 맞춰져 있습니다. 플랙스박스의 이상적인 사용 사례는 여러 아이템을 컨테이너에 고르게 배치하려는 경우입니다. 여기서 콘텐츠의 크기가 각 아이템이 차지하는 공간을 결정합니다. 아이템이 새로운 줄로 줄 바꿈 되면, 아이템의 크기와 <em>해당 줄</em>의 사용 가능한 공간에 따라 간격이 조정됩니다.</p> + +<p>그리드는 레이아웃을 먼저 고려하게 됩니다. CSS 그리드 레이아웃을 사용할 때는 우선 레이아웃을 작성한 다음 그 위에 아이템을 배치하거나, 자동 배치 규칙을 통해 견고하게 짜인 그리드 위에 놓인 그리드 셀에 아이템을 배치하게 됩니다. 콘텐츠의 크기에 따라 조절되는 트랙을 만들 수도 있지만, 이렇게 하면 전체 트랙을 변경하게 됩니다.</p> + +<p>플랙스박스를 사용하면서 그 특유의 유연성 때문에 제약을 느낀다면, CSS 그리드 레이아웃을 고려해 보시는 것도 좋을 겁니다. 예를 들어 윗줄에 있는 다른 아이템과 일렬로 정렬되게 하려고 굳이 플랙스 아이템에 퍼센트 너비를 지정해야 할 때가 있는데, 이 경우 그리드가 더 나은 선택이 될 수 있습니다.</p> + +<h3 id="박스_정렬">박스 정렬</h3> + +<p>플랙스박스의 기능 중 많은 사람이 가장 흥미롭게 여겼던 것은 처음으로 적절한 정렬 제어 기능을 제공한다는 것입니다. 그래서 이젠 박스를 페이지의 중앙에 손쉽게 배치할 수도 있게 되었습니다. 플렉스 아이템은 플렉스 컨테이너의 높이만큼 늘어날 수도 있어서, 같은 높이의 칼럼 레이아웃을 구현할 수도 있습니다. 이것은 개발자가 아주 오랫동안 원했던 것이어서, 그동안 최소한 시각적 효과라도 흉내 내기 위해 온갖 종류의 꼼수를 고안해 내기도 했었습니다.</p> + +<p>플랙스박스 표준 명세서에 있는 정렬 프로퍼티는 <a href="https://drafts.csswg.org/css-align/">박스 정렬 레벨(Box Alignment Level) 3</a>의 새로운 표준에 추가되었습니다. 이 말은 그리드 레이아웃을 비롯한 다른 표준에서도 사용할 수 있다는 뜻입니다. 그래서 미래에는 다른 레이아웃 방법에도 똑같이 적용될 수 있습니다.</p> + +<p>이 가이드 시리즈의 후반부에서 박스 정렬에 관해 자세히 알아볼 것이며 또한, 그리드 레이아웃에서 어떻게 작동하는지도 살펴보겠습니다. 하지만 여기서는 플랙스박스와 그리드를 비교하는 간단한 예제를 살펴보겠습니다.</p> + +<p>플랙스박스를 사용하는 첫 번째 예제에는 컨테이너 안에 세 개의 아이템이 있습니다. 감싸고 있는 요소에 {{cssxref("min-height")}}를 지정해서, 플랙스 컨테이너의 높이를 정의해 줍니다. 플렉스 컨테이너의 {{cssxref("align-items")}} 값을 <code>flex-end</code>로 설정하여 아이템이 플랙스 컨테이너의 끝에 정렬되도록 했습니다. 또한, <code>box1</code>에 {{cssxref("align-self")}} 프로퍼티를 설정하여 기본값을 덮어씌우면서 컨테이너의 높이 만큼 늘어나게 하였고, <code>box2</code>에는 플랙스 컨테이너의 시작 지점에 정렬되도록 하였습니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: flex; + align-items: flex-end; + min-height: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: flex-start; +} +</pre> + +<p>{{ EmbedLiveSample('박스_정렬', '300', '230') }}</p> + +<h3 id="CSS_그리드에서의_정렬">CSS 그리드에서의 정렬</h3> + +<p>다음 두 번째 예제에서는 그리드를 써서 앞에서와 똑같은 레이아웃을 구현했습니다. 이번에는 그리드 레이아웃에 적용할 때 쓰는 박스 정렬 프로퍼티를 사용하였습니다. 그래서 <code>flex-start</code>와 <code>flex-end</code>가 아닌 <code>start</code>와 <code>end</code>를 써서 정렬합니다. 그리드 레이아웃의 경우 해당 그리드 영역을 기준으로 내부에 있는 아이템들을 정렬합니다. 이번 경우에는 단일 그리드 셀로 되어 있지만, 그리드 영역이 여러 그리드 셀로 구성되어 있을 수도 있습니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: end; + grid-auto-rows: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: start; +} +</pre> + +<p>{{ EmbedLiveSample('CSS_그리드에서의_정렬', '200', '310') }}</p> + +<h3 id="fr_단위와_flex-basis"><code>fr</code> 단위와 <code>flex-basis</code></h3> + +<p>우리는 이미 <code>fr</code> 단위가 어떻게 그리드 컨테이너 속 사용 가능한 공간을 비율에 따라 그리드 트랙에 할당하는지 보았습니다. <code>fr</code> 단위가 {{cssxref("minmax", "minmax()")}} 함수와 결합하면 플랙스박스의 <code>flex</code> 프로퍼티와 매우 유사한 동작을 구현할 수 있으며, 동시에 2차원 레이아웃을 구성할 수도 있습니다.</p> + +<p>이전의 1차원과 2차원 레이아웃의 차이점을 보여주는 예제를 살펴보면, 두 레이아웃이 반응하는 방식에 차이가 있다는 점을 아실 수 있습니다. 플랙스 레이아웃의 경우, 브라우저 창을 더 넓거나 좁게 드래그하면, 플랙스 박스는 사용 가능한 공간에 따라 각 행에 나열되는 아이템의 수를 적절하게 조정합니다. 공간이 많다면 5개의 아이템 모두가 한 행에 들어갈 수 있을 것이며, 컨테이너 너비가 매우 좁다면 단지 하나의 아이템이 들어갈 만한 공간이 남을 수도 있을 겁니다.</p> + +<p>반면에, 그리드 버전에는 항상 세 개의 열 트랙이 있게 됩니다. 트랙 자체가 넓어지거나 줄어들 수 있지만, 그리드를 정의할 때 세 개를 지정했으면 무조건 세 개의 트랙이 있게 됩니다.</p> + +<h4 id="자동으로_채워지는_그리드_트랙">자동으로 채워지는 그리드 트랙</h4> + +<p>트랙의 목록을 생성할 때 반복 표기법과 <code>auto-fill</code> 및 <code>auto-fit</code> 프로퍼티를 사용하면 지정한 행과 열에 맞추면서도 플랙스박스와 유사한 효과를 내도록 콘텐츠를 정렬할 수도 있습니다.</p> + +<p>다음 예제에서는 반복 표기법을 지정할 때 정수 대신 <code>auto-fill</code> 키워드를 사용하였고 기준 크기가 200픽셀이 되도록 트랙 목록을 설정했습니다. 즉, 그리드는 컨테이너에 200픽셀 너비의 세로 열 트랙을 채울 수 있을 만큼의 개수를 생성하게 됩니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, 200px); +} +</pre> + +<p>{{ EmbedLiveSample('자동으로_채워지는_그리드_트랙', '500', '170') }}</p> + +<h3 id="변동_가능한_트랙의_수">변동 가능한 트랙의 수</h3> + +<p>이것은 플랙스박스와 완전히 똑같지는 않습니다. 플랙스박스 예제에서는 아이템이 다음 줄로 행 바꿈 하기 전에는 기본값인 200픽셀보다 더 넓었습니다. 그리드에서는 <code>auto-fill</code>과 {{cssxref("minmax", "minmax()")}} 함수를 결합해서 비슷한 결과를 얻을 수 있습니다. 다음 예제에선 <code>minmax</code>를 써서 자동으로 채워지는 트랙을 만들었습니다. 트랙은 최소 200픽셀부터 시작해서 최대 <code>1fr</code>까지 늘어날 수 있도록 설정하였습니다. 브라우저는 우선 200픽셀 크기의 아이템을 (그리드 간격도 함께 고려해서) 컨테이너에 몇 개로 채울 수 있을지 계산을 하고 나서, 남아있는 공간을 최대치 <code>1fr</code> 기준으로 아이템들끼리 공유하면서 서로 늘어나도록 합니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} +</pre> + +<p>{{ EmbedLiveSample('변동_가능한_트랙의_수', '500', '170') }}</p> + +<p>이렇게 해서, 크기와 개수가 변동적인 트랙들로 구성된 그리드를 만들 수 있게 되었으며, 동시에 아이템들을 일정한 행과 열로 정렬할 수도 있음을 확인하였습니다.</p> + +<h2 id="그리드와_단독으로_위치를_지정한_요소">그리드와 단독으로 위치를 지정한 요소</h2> + +<p>그리드는 단독으로 위치 지정된 요소와 상호 작용하면서, 그리드 또는 그리드 영역 내에 아이템을 배치할 때 유용하게 사용될 수 있습니다. 표준 명세서에는 그리드 컨테이너가 요소를 감싸는 컨테이닝 블록(containing block)으로서, 그리드 컨테이너가 단독으로 위치를 지정한 아이템의 부모 요소일 때 동작하는 방식을 정의하고 있습니다.</p> + +<h3 id="컨테이닝_블록으로서의_그리드_컨테이너">컨테이닝 블록으로서의 그리드 컨테이너</h3> + +<p>그리드 컨테이너를 컨테이닝 블록으로 만들려면, 다른 단독으로 위치를 지정한 아이템을 감싸고 있는 요소를 컨테이닝 블록을 만들 때와 마찬가지로, 컨테이너에 position 프로퍼티로 relative 값을 추가해야 합니다. 이렇게 하면, 그리드 아이템에 <code>position: absolute</code>를 지정할 경우 그리드 컨테이너가 컨테이닝 블록이 되며, 또 해당 아이템에 그리드 위칫값이 추가로 지정되었을 때는, 배치된 그리드 영역이 컨테이닝 블록으로 작용합니다.</p> + +<p>아래 예제에서는 네 개의 하위 아이템을 감싸는 wrapper 클래스의 블록이 있습니다. 3번 아이템은 단독으로 위치가 지정되었으며 라인을 기반으로 그리드에 배치되었습니다. 그리드 컨테이너에 <code>position: relative</code>를 지정해서 이 아이템이 위치를 잡을 때 참고하는 기준 요소가 됩니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3"> + This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into. + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; + position: relative; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: absolute; + top: 40px; + left: 40px; +} +</pre> + +<p>{{ EmbedLiveSample('컨테이닝_블록으로서의_그리드_컨테이너', '500', '330') }}</p> + +<p>여기서 아이템이 그리드의 세로 열 2번 라인부터 4번 라인까지, 그리고 가로 행 1번 라인을 시작으로 그리드 영역을 차지하고 있는 것을 확인하실 수 있습니다. 하지만, 단독으로 위치를 지정한 일반 아이템의 경우와 마찬가지로 문서 흐름에서 제외되면서, 자동 배치 규칙에 따라 해당 공간에 다른 아이템들을 배치하게 됩니다. 또한, 이로 인해 아이템이 추가 행을 생성하지 않게 되면서 가로 행 3번 라인까지 확장하지 않게 되었습니다.</p> + +<p>만약에 <code>.box3</code>의 규칙 중에 <code>position: absolute</code>를 없애버리면, 위치를 지정하지 않았을 경우 표시될 원래의 자리로 돌아가는 것을 확인하실 수 있습니다.</p> + +<h3 id="부모_요소로서의_그리드_컨테이너">부모 요소로서의 그리드 컨테이너</h3> + +<p>만약에 단독으로 위치를 지정한 자식 요소가 그리드 컨테이너에 속해 있지만, 해당 컨테이너가 위치를 참고하는 새로운 기준 요소로 정의되지 않았다면, 앞의 예제에서처럼 일반 배치 흐름에서 배제됩니다. 위치의 기준이 되는 요소는, 다른 레이아웃 방법에 공통으로 적용되는 것과 마찬가지로, 새로운 위치 기준 요소로 정의된 요소가 맡게 됩니다. 이번 경우에 만약 위에 있는 감싸는 요소에서 <code>position: relative</code>를 삭제한다면, 위치의 기준이 되는 것은 아래의 그림에서 보여주듯이 최상위 도큐먼트 오브젝트에 해당하는 기본 뷰포트(viewport)가 맡게 됩니다.</p> + +<p><img alt="부모 요소로서의 그리드 컨테이너 모습을 담은 그림" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> + +<p>여기도 마찬가지로 해당 아이템은, 다른 아이템들의 크기 조정과 자동 배치와 관련해서, 더는 그리드 레이아웃에 관여하지 않게 됩니다.</p> + +<h3 id="부모_요소가_그리드_영역일_때">부모 요소가 그리드 영역일 때</h3> + +<p>만약에 단독으로 위치를 지정한 아이템이 그리드 영역 안에 자리 잡고 있다면, 해당 영역을 위치의 기준이 되는 요소로 정의할 수 있습니다. 아래 예제에서는 전과 같은 그리드가 정의되어 있습니다만, 이번엔 그리드의 <code>.box3</code> 안에 또 하나의 아이템을 중첩해 놓았습니다.</p> + +<p><code>.box3</code>의 position 값으로 relative를 지정했으며 그 밑에 있는 아이템에는 원래의 위치에서 벗어난 값을 따로 지정하였습니다. 이 경우 위치의 기준이 되는 요소는 그리드 영역이 됩니다.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three + <div class="abspos"> + This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area. + </div> + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: relative; +} +.abspos { + position: absolute; + top: 40px; + left: 40px; + background-color: rgba(255,255,255,.5); + border: 1px solid rgba(0,0,0,0.5); + color: #000; + padding: 10px; +} +</pre> + +<p>{{ EmbedLiveSample('부모_요소가_그리드_영역일_때', '500', '420') }}</p> + +<h2 id="그리드와_display_contents">그리드와 <code>display: contents</code></h2> + +<p>마지막으로 눈여겨볼 또 하나의 레이아웃 표준과 관련된 상호 작용으로 CSS 그리드 레이아웃과 <code>display: contents</code> 사이의 상호 작용이 있습니다. display 프로퍼티의<code>contents</code> 값은 <a href="https://drafts.csswg.org/css-display/#box-generation">Display 표준 명세서</a>에 새로 정의된 것으로 다음과 같이 설명되어 있습니다:</p> + +<blockquote> +<p>“요소 자신은 어떠한 박스도 생성하지 않지만, 대신 포함하고 있는 하위 자식 요소와 가상 요소(pseudo-elements)가 평소처럼 박스를 생성하게 됩니다. 그래서 박스 생성과 레이아웃을 구현할 때, 문서의 계층 구조상 해당 요소가 아래 자식 요소와 가상 요소로 대체된 것처럼 다루어집니다.”</p> +</blockquote> + +<p>만약에 아이템에 <code>display:</code> <code>contents</code>를 지정하면 보통 해당 요소가 만드는 박스는 사라지고, 자식 요소의 박스가 한 단계 상승한 것처럼 그 자리를 차지하게 됩니다. 이 얘기는 그리드 아이템의 자식 요소가 그리드 아이템이 될 수도 있다는 뜻입니다. 이상하게 들리시죠? 다음에 간단한 예를 들어보겠습니다. 아래 마크업에는 그리드가 있고, 이 그리드에 있는 첫 번째 아이템이 세 개의 열 트랙 모두를 가로지르도록 설정하였습니다. 또한, 이 아이템은 세 개의 중첩된 아이템들을 포함하고 있습니다. 이 아이템들은 컨테이너 바로 밑에 있는 자식 요소가 아니므로, 그리드 레이아웃의 일원으로 참여하지 않으면서 보통의 일반 블록 레이아웃으로 표시됩니다.</p> + +<div id="Display_Contents_Before"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; +} + +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p> +</div> + +<p>이제 <code>.box1</code>에 <code>display:</code> <code>contents</code>규칙을 추가하면, 해당 아이템이 차지하고 있는 박스가 사라지면서 하위 아이템들이 그리드 아이템 자격을 얻게 되어 자동 배치 규칙에 따라 알아서 배치됩니다.</p> + +<div id="Display_Contents_After"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + display: contents; +} +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p> +</div> + +<p>이것은 중첩된 아이템을 그리드의 일부분인 것처럼 작용하게 하는 방법으로 사용될 수 있으며, 또한 서브 그리드가 구현된다면 해결될 수 있는 문제를 피해 가는 방법이 될 수도 있습니다. 물론, 플랙스박스에서도 비슷하게 <code>display:</code> <code>contents</code>를 이용해서 중첩된 아이템이 플랙스 아이템처럼 작용하도록 만들 수도 있습니다.</p> + +<p>이번 가이드에서 보셨듯이 CSS 그리드 레이아웃은 단지 여러분이 구현해 볼 수 있는 여러 기술 중 한 부분일 뿐입니다. 원하시는 다양한 효과를 얻기 위해서 다른 레이아웃 기술끼리 서로 혼합해서 사용하는 것을 두려워하지 마십시오.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li> + <li data-default-state="open"><a href="#"><strong>가이드</strong></a> + <ol> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values, and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>용어집</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..a2ace369cf --- /dev/null +++ b/files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,56 @@ +--- +title: CSS로 이미지 스프라이트 구현하기 +slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +tags: + - Advanced + - CSS + - CSS Image + - Graphics + - Guide + - Sprites + - Web + - 스프라이트 +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +<div>{{CSSRef}}</div> + +<p><strong>이미지 스프라이트</strong>는 여러 개의 이미지가 필요한 아주 많은 웹앱에서 사용합니다. 이미지 각각을 별도의 파일로 추가하는 대신, 이미지를 하나의 파일로 만들어서 포함하면 HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> HTTP/2를 사용할 땐 오히려 작은 요청을 여러 번 날리는 게 네트워크 사용량에 더 좋을 수도 있습니다.</p> +</div> + +<h2 id="구현">구현</h2> + +<p><code>toolbtn</code> 클래스가 부여된 모든 아이템에 어떤 이미지가 부여된다고 가정해 봅시다.</p> + +<pre class="brush:css notranslate">.toolbtn { + background: url(myfile.png); + display: inline-block; + height: 20px; + width: 20px; +}</pre> + +<p>배경 이미지의 위치는 속성에 지정된 {{cssxref("url()")}} 값 다음에 x, y 2개 값으로 지정할 수도 있고, {{cssxref("background-position")}} 속성으로 지정할 수 있습니다.</p> + +<pre class="brush:css notranslate">#btn1 { + background-position: -20px 0px; +} + +#btn2 { + background-position: -40px 0px; +}</pre> + +<p>이 CSS 는 ID 가 'btn1' 인 엘리먼트를 왼쪽으로 20 pixel 이동시키고 ID 가 'btn2' 인 엘리먼트를 왼쪽으로 40 pixel 이동시킬 것입니다 (앞서 보인 이미지 룰에 의해 두 엘리먼트에 <code>toolbtn</code> 클래스가 부여됐다고 가정합시다).</p> + +<p>비슷하게, 마우스 호버 상태를 만들 수도 있습니다.</p> + +<pre class="brush:css notranslate">#btn:hover { + background-position: <var><pixels shifted right></var>px <var><pixels shifted down></var>px; +}</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Full working demo at CSS Tricks</a></li> +</ul> diff --git a/files/ko/web/css/css_images/index.html b/files/ko/web/css/css_images/index.html new file mode 100644 index 0000000000..99c37da296 --- /dev/null +++ b/files/ko/web/css/css_images/index.html @@ -0,0 +1,107 @@ +--- +title: CSS Images +slug: Web/CSS/CSS_Images +tags: + - CSS + - CSS Images + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Images +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Images</strong>는 사용할 수 있는 이미지의 유형({{cssxref("<image>")}} 자료형, 포함하는 URL, 그레이디언트 및 그 외의 다른 유형 이미지), 이미지의 크기 조정 방법, 그리고 이미지 및 다른 대체 콘텐츠가 각기 다른 레이아웃 모델과 상호작용하는 법을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("image-orientation")}}</li> + <li>{{CSSxRef("image-rendering")}}</li> + <li>{{CSSxRef("image-resolution")}}</li> + <li>{{CSSxRef("object-fit")}}</li> + <li>{{CSSxRef("object-position")}}</li> +</ul> +</div> + +<h3 id="함수">함수</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li> + <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li> + <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li> + <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> + <li>{{CSSxRef("conic-gradient")}}</li> + <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li> + <li>{{CSSxRef("url", "url()")}}</li> + <li>{{CSSxRef("element", "element()")}}</li> + <li>{{CSSxRef("_image", "image()")}}</li> + <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li> +</ul> +</div> + +<h3 id="자료형">자료형</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("<uri>")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a></dt> + <dd>CSS 이미지의 특정 유형인 "그레이디언트"를 소개하고, 그 사용법을 보입니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">CSS에서 이미지 스프라이트 구현하기</a></dt> + <dd>다수의 이미지를 하나의 문서로 합쳐서 다운로드 요청을 절약하고 페이지 속도를 향상하는 방법을 소개합니다.</dd> +</dl> + +<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('CSS4 Images')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}</td> + <td>{{Spec2('Compat')}}</td> + <td><code>-webkit</code> 접두어 달린 그러데이션 값 함수 표준화</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td></td> + </tr> + <tr> + <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#url', '<url>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_images/using_css_gradients/index.html b/files/ko/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..061ef36536 --- /dev/null +++ b/files/ko/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,750 @@ +--- +title: CSS 그레이디언트 사용하기 +slug: Web/CSS/CSS_Images/Using_CSS_gradients +tags: + - Advanced + - CSS + - CSS Images + - Example + - Gradients + - Guide + - Web +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS 그레이디언트</strong>는 {{cssxref("<image>")}} 자료형의 특별한 종류인 {{cssxref("<gradient>")}}로 나타내며 두 개 이상의 색 간의 점진적 전환을 표현합니다. 그레이디언트에는 선형({{cssxref("linear-gradient")}} 함수), 방사형({{cssxref("radial-gradient")}} 함수), 각진 원형({{cssxref("conic-gradient")}} 함수) 세 종류가 있으며, 각각의 변형본으로 계속해서 반복하는 {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} 함수도 있습니다.</p> + +<p>그레이디언트는 배경처럼 <code><image></code>를 사용하는 곳에는 어디에나 적용할 수 있습니다. 그레이디언트는 동적으로 생성하므로, 비슷한 효과를 보기 위해 래스터 이미지를 사용하는 방식을 사용하지 않아도 됩니다. 또한 브라우저가 직접 생성하므로 확대했을 때 래스터 이미지보다 좋은 품질을 보이며 크기 조절도 즉시 가능합니다.</p> + +<p>우선 선형 그레이디언트의 소개로 시작하여, 모든 유형의 그레이디언트에서 통용되는 기능을 선형으로 설명하고, 그 후에 방사형과 각진 원형, 마지막으로 반복 그레이디언트에 대해 알아보겠습니다.</p> + +<h2 id="선형_그레이디언트_사용하기">선형 그레이디언트 사용하기</h2> + +<p>선형 그레이디언트는 직선으로 진행하는 색상 무늬를 생성합니다.</p> + +<div> +<h3 id="기본_선형_그레이디언트">기본 선형 그레이디언트</h3> + +<p>가장 기본적인 그레이디언트 종류를 생성하기 위해서는 두 가지의 색만 지정하면 됩니다. 각각의 색을 "색상 정지점"이라고 부릅니다. 최소 두 가지가 필요하지만, 제한 없이 원하는 만큼 추가할 수 있습니다.</p> + +<div class="hidden"> +<pre class="brush: html notranslate" dir="rtl"><div class="simple-linear"></div></pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.simple-linear { + background: linear-gradient(blue, pink); +}</pre> + +<p>{{ EmbedLiveSample('기본_선형_그레이디언트', 120, 120) }}</p> +</div> + +<div> +<h3 id="방향_전환">방향 전환</h3> + +<p>기본적으로, 선형 그레이디언트는 위에서 아래로 진행합니다. 그러나 방향을 지정함으로써 그레이디언트를 회전할 수 있습니다.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="horizontal-gradient"></div></pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.horizontal-gradient { + background: linear-gradient(to right, blue, pink); +} +</pre> + +<p>{{ EmbedLiveSample('방향_전환', 120, 120) }}</p> +</div> + +<div> +<h3 id="대각선_그레이디언트">대각선 그레이디언트</h3> + +<p>그레이디언트가 한쪽 모서리에서 다른 쪽 모서리를 잇는 대각선 방향으로 진행하도록 할 수도 있습니다.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="diagonal-gradient"></div></pre> + +<pre class="brush: css notranslate">div { + width: 200px; + height: 100px; +}</pre> +</div> + +<pre class="brush: css notranslate">.diagonal-gradient { + background: linear-gradient(to bottom right, blue, pink); +} +</pre> + +<p>{{ EmbedLiveSample('대각선_그레이디언트', 200, 100) }}</p> +</div> + +<div> +<h3 id="각도_사용">각도 사용</h3> + +<p>더 정밀하게 방향을 지정하고 싶다면 특정 각도를 지정할 수 있습니다.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="angled-gradient"></div></pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.angled-gradient { + background: linear-gradient(70deg, blue, pink); +} +</pre> + +<p>{{ EmbedLiveSample('각도_사용', 120, 120) }}</p> + +<p>각도를 사용할 때 <code>0deg</code> 는 아래쪽에서 위쪽으로 진행하는 선형 그레이디언트를, <code>90deg</code> 는 왼쪽에서 오른쪽으로, 등등 시계 방향으로 회전합니다. 음의 각도는 시계 반대 방향으로 회전합니다.</p> + +<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p> +</div> + +<h2 id="색상_선언_효과_생성">색상 선언 & 효과 생성</h2> + +<p>All<span class="js-about-item-abstr"> CSS gradient types are a range of position-dependent colors. The colors produced by CSS gradients can vary continuously with position, producing smooth color transitions. It is also possible to create bands of solid colors, and hard transitions between two colors. The following are valid for all gradient functions:</span></p> + +<div> +<h3 id="두_개보다_많은_색_사용하기">두 개보다 많은 색 사용하기</h3> + +<p>You don't have to limit yourself to two colors—you may use as many as you like! By default, colors are evenly spaced along the gradient.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="auto-spaced-linear-gradient"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.auto-spaced-linear-gradient { + background: linear-gradient(red, yellow, blue, orange); +} +</pre> + +<p>{{ EmbedLiveSample('두_개보다_많은_색_사용하기', 120, 120) }}</p> +</div> + +<div> +<h3 id="Positioning_color_stops">Positioning color stops</h3> + +<p>You don't have to leave your color stops at their default positions. To fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. If you specify the location as a percentage, <code>0%</code> represents the starting point, while <code>100%</code> represents the ending point; however, you can use values outside that range if necessary to get the effect you want. If you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at <code>0%</code> and the last color stop being at <code>100%</code>, and any other color stops being half way between their adjacent color stops.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="multicolor-linear"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.multicolor-linear { + background: linear-gradient(to left, lime 28px, red 77%, cyan); +} +</pre> + +<p>{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}</p> +</div> + +<div> +<h3 id="Creating_hard_lines">Creating hard lines</h3> + +<p>To create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location. In this example, the colors share a color stop at the <code>50%</code> mark, halfway through the gradient:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="striped"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.striped { + background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); +}</pre> + +<p>{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}</p> +</div> + +<div> +<h3 id="Gradient_hints">Gradient hints</h3> + +<p>By default, the gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient. In this example, we've moved the midpoint of the transition from the 50% mark to the 10% mark.</p> + +<div class="hidden"> +<pre class="brush: html notranslate" dir="rtl"><div class="color-hint"></div> +<div class="simple-linear"></div></pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; float: left; margin-right: 10px; +}</pre> +</div> + +<pre class="brush: css notranslate">.color-hint { + background: linear-gradient(blue, 10%, pink); +} +.simple-linear { + background: linear-gradient(blue, pink); +}</pre> + +<p>{{ EmbedLiveSample('Gradient_hints', 120, 120) }}</p> +</div> + +<div> +<h3 id="Creating_color_bands_stripes">Creating color bands & stripes</h3> + +<p>To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. The color will reach full saturation at the first color stop, maintain that saturation through to the second color stop, and transition to the adjacent color stop's color through the adjacent color stop's first position.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="multiposition-stops"></div> +<div class="multiposition-stop2"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; + float: left; margin-right: 10px; box-sizing: border-box; +}</pre> +</div> + +<pre class="brush: css notranslate">.multiposition-stops { + background: linear-gradient(to left, + lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); + background: linear-gradient(to left, + lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); +} +.multiposition-stop2 { + background: linear-gradient(to left, + lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% ); + background: linear-gradient(to left, + lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); +} +</pre> + +<p>{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}</p> + +<p>In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.</p> + +<p>In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.</p> + +<p>In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.</p> +</div> + +<div> +<h3 id="Controlling_the_progression_of_a_gradient">Controlling the progression of a gradient</h3> + +<p>By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to hilight the difference the color hint can make:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="colorhint-gradient"></div> <div class="regular-progression"></div> + +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; + float: left; margin-right: 10px; box-sizing: border-box; +}</pre> +</div> + +<pre class="brush: css notranslate">.colorhint-gradient { + background: linear-gradient(to top, black, 20%, cyan); +} +.regular-progression { + background: linear-gradient(to top, black, cyan); +} +</pre> + +<p>{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}</p> +</div> + +<h3 id="Overlaying_gradients">Overlaying gradients</h3> + +<p>Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="layered-image"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 300px; + height: 150px; +}</pre> +</div> + +<pre class="brush: css notranslate">.layered-image { + background: linear-gradient(to right, transparent, mistyrose), + url("https://mdn.mozillademos.org/files/15525/critters.png"); +} +</pre> + +<p>{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}</p> + +<h3 id="Stacked_gradients">Stacked gradients</h3> + +<p>You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="stacked-linear"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 200px; + height: 200px; +}</pre> +</div> + +<pre class="brush: css notranslate">.stacked-linear { + background: + linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), + linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), + linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); +} +</pre> + +<p>{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}</p> + +<h2 id="Using_radial_gradients">Using radial gradients</h2> + +<p>Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.</p> + +<h3 id="A_basic_radial_gradient">A basic radial gradient</h3> + +<p>As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="simple-radial"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 240px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.simple-radial { + background: radial-gradient(red, blue); +} +</pre> + +<p>{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}</p> + +<h3 id="Positioning_radial_color_stops">Positioning radial color stops</h3> + +<p>Again like linear gradients, you can position each radial color stop with a percentage or absolute length.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-gradient"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-gradient { + background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); +} +</pre> + +<p>{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}</p> + +<h3 id="Positioning_the_center_of_the_gradient">Positioning the center of the gradient</h3> + +<p>You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-gradient"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 240px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-gradient { + background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); +} +</pre> + +<p>{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}</p> + +<h3 id="Sizing_radial_gradients">Sizing radial gradients</h3> + +<p>Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default.</p> + +<h4 id="Example_closest-side_for_ellipses">Example: closest-side for ellipses</h4> + +<p>This example uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-ellipse-side"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 240px; + height: 100px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-ellipse-side { + background: radial-gradient(ellipse closest-side, + red, yellow 10%, #1e90ff 50%, beige); +} +</pre> + +<p>{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}</p> + +<h4 id="Example_farthest-corner_for_ellipses">Example: farthest-corner for ellipses</h4> + +<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-ellipse-far"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 240px; + height: 100px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-ellipse-far { + background: radial-gradient(ellipse farthest-corner at 90% 90%, + red, yellow 10%, #1e90ff 50%, beige); +} +</pre> + +<p>{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}</p> + +<h4 id="Example_closest-side_for_circles">Example: closest-side for circles</h4> + +<p>This example uses <code>closest-side</code>, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="radial-circle-close"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 240px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.radial-circle-close { + background: radial-gradient(circle closest-side at 25% 75%, + red, yellow 10%, #1e90ff 50%, beige); +} +</pre> + +<p>{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}</p> + +<h3 id="Stacked_radial_gradients">Stacked radial gradients</h3> + +<p>Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="stacked-radial"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 200px; + height: 200px; +}</pre> +</div> + +<pre class="brush: css notranslate">.stacked-radial { + background: + radial-gradient(circle at 50% 0, + rgba(255,0,0,.5), + rgba(255,0,0,0) 70.71%), + radial-gradient(circle at 6.7% 75%, + rgba(0,0,255,.5), + rgba(0,0,255,0) 70.71%), + radial-gradient(circle at 93.3% 75%, + rgba(0,255,0,.5), + rgba(0,255,0,0) 70.71%) beige; + border-radius: 50%; +} +</pre> + +<p>{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}</p> + +<h2 id="Using_conic_gradients">Using conic gradients</h2> + +<p>The <strong><code>conic-gradient()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels, but they can also be used for creating checker boards and other intersting effects.</p> + +<p>The conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient, and the color-stops are percentages or degrees: absolute lengths are not valid.</p> + +<p>In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.</p> + +<div> +<h3 id="A_basic_conic_gradient">A basic conic gradient</h3> + +<p>As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="simple-conic"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.simple-conic { + background: conic-gradient(red, blue); +} +</pre> + +<p>{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }}</p> +</div> + +<div> +<h3 id="Positioning_the_conic_center">Positioning the conic center</h3> + +<p>Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="conic-gradient"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.conic-gradient { + background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%); +} +</pre> + +<p>{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }}</p> +</div> + +<div> +<h3 id="Changing_the_angle">Changing the angle</h3> + +<p>Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="conic-gradient"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.conic-gradient { + background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple); +} +</pre> + +<p>{{ EmbedLiveSample('Changing_the_angle', 120, 120) }}</p> +</div> + +<h2 id="Using_repeating_gradients">Using repeating gradients</h2> + +<p>The {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("conic-gradient")}} functions don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, and {{cssxref("repeating-conic-gradient")}} functions are available to offer this functionality.</p> + +<p>The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.</p> + +<div> +<h3 id="Repeating_linear_gradients">Repeating linear gradients</h3> + +<p>This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="repeating-linear"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.repeating-linear { + background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px); +} +</pre> + +<p>{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}</p> +</div> + +<div> +<h3 id="Multiple_repeating_linear_gradients">Multiple repeating linear gradients</h3> + +<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/en-US/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p> + +<p>In this case the gradient lines are 300px, 230px, and 300px long.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="multi-repeating-linear"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 600px; + height: 400px; +}</pre> +</div> + +<pre class="brush: css notranslate">.multi-repeating-linear { + background: + repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px, + rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px, + rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px, + rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px, + rgba(255, 0, 0, 0.5) 300px), + repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px, + rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px, + rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px, + rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px, + rgba(255, 0, 0, 0.5) 230px), + repeating-linear-gradient(23deg, red 50px, orange 100px, + yellow 150px, green 200px, blue 250px, + indigo 300px, violet 350px, red 370px); +} +</pre> + +<p>{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}</p> +</div> + +<h3 id="Plaid_gradient">Plaid gradient</h3> + +<p>To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="plaid-gradient"></div></pre> + +<pre class="brush: css notranslate">div { + width: 200px; + height: 200px; +}</pre> +</div> + +<pre class="brush: css notranslate">.plaid-gradient { + background: + repeating-linear-gradient(90deg, transparent, transparent 50px, + rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, + transparent 56px, transparent 63px, + rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, + transparent 69px, transparent 116px, + rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), + repeating-linear-gradient(0deg, transparent, transparent 50px, + rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, + transparent 56px, transparent 63px, + rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, + transparent 69px, transparent 116px, + rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), + repeating-linear-gradient(-45deg, transparent, transparent 5px, + rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px), + repeating-linear-gradient(45deg, transparent, transparent 5px, + rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px); + + background: + repeating-linear-gradient(90deg, transparent 0 50px, + rgba(255, 127, 0, 0.25) 50px 56px, + transparent 56px 63px, + rgba(255, 127, 0, 0.25) 63px 69px, + transparent 69px 116px, + rgba(255, 206, 0, 0.25) 116px 166px), + repeating-linear-gradient(0deg, transparent 0 50px, + rgba(255, 127, 0, 0.25) 50px 56px, + transparent 56px 63px, + rgba(255, 127, 0, 0.25) 63px 69px, + transparent 69px 116px, + rgba(255, 206, 0, 0.25) 116px 166px), + repeating-linear-gradient(-45deg, transparent 0 5px, + rgba(143, 77, 63, 0.25) 5px 10px), + repeating-linear-gradient(45deg, transparent 0 5px, + rgba(143, 77, 63, 0.25) 5px 10px); +} +</pre> + +<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p> + +<h3 id="Repeating_radial_gradients">Repeating radial gradients</h3> + +<p>This example uses {{cssxref("repeating-radial-gradient")}} to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="repeating-radial"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 120px; + height: 120px; +}</pre> +</div> + +<pre class="brush: css notranslate">.repeating-radial { + background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); +} +</pre> + +<p>{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}</p> + +<h3 id="Multiple_repeating_radial_gradients">Multiple repeating radial gradients</h3> + +<div class="hidden"> +<pre class="brush: html notranslate"><div class="multi-target"></div> +</pre> + +<pre class="brush: css notranslate">div { + width: 250px; + height: 150px; +}</pre> +</div> + +<pre class="brush: css notranslate">.multi-target { + background: + repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5), + rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px, + rgba(255,255,255,0.5) 30px) top left no-repeat, + repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5), + rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px, + rgba(255,255,255,0.5) 20px) top left no-repeat yellow; + background-size: 200px 200px, 150px 150px; +} +</pre> + +<p>{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>Gradient functions: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li> + <li>Gradient-related CSS data types: {{cssxref("<gradient>")}}, {{cssxref("<image>")}}</li> + <li>Gradient-related CSS properties: {{cssxref("background")}}, {{cssxref("background-image")}}</li> + <li><a class="external" href="http://lea.verou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a></li> + <li><a class="external" href="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a></li> + <li><a href="https://cssgenerator.org/gradient-css-generator.html">Gradient CSS Generator</a></li> +</ul> diff --git a/files/ko/web/css/css_lists_and_counters/index.html b/files/ko/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..7d3ecd8e4f --- /dev/null +++ b/files/ko/web/css/css_lists_and_counters/index.html @@ -0,0 +1,57 @@ +--- +title: CSS Lists and Counters +slug: Web/CSS/CSS_Lists_and_Counters +tags: + - CSS + - CSS Lists + - Overview + - Reference +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Lists</strong>는 리스트 배치 방법, 리스트 마커를 스타일 할 수 있는 법을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("list-style-image")}}</li> + <li>{{cssxref("list-style-type")}}</li> + <li>{{cssxref("list-style-position")}}</li> + <li>{{cssxref("list-style")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="/ko/docs/Consistent_List_Indentation">일관된 리스트 들여쓰기</a></dt> + <dd>서로 다른 브라우저 사이에 일관된 들여쓰기를 이루는 법을 설명합니다.</dd> +</dl> + +<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 Lists')}}</td> + <td>{{Spec2('CSS3 Lists')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..4557bc725c --- /dev/null +++ b/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,148 @@ +--- +title: CSS 카운터 사용하기 +slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +tags: + - CSS + - CSS Counter Styles + - Guide + - Layout + - Reference + - Web + - 번호 + - 카운터 +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS counters</strong>를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.</p> + +<h2 id="Counters_사용하기">Counters 사용하기</h2> + +<h3 id="카운터_값_조작하기">카운터 값 조작하기</h3> + +<p>CSS counter를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성(초깃값 <code>0</code>)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 {{cssxref("counter-increment")}}에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.</p> + +<h3 id="카운터_표시하기">카운터 표시하기</h3> + +<p>Counter의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.</p> + +<p><code>counter()</code> 함수는 'counter(name)'와 'counter(name, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수<code>decimal</code>)으로 뿌려집니다.</p> + +<p><code>counters()</code> 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수<code>decimal</code>)로 렌더링 됩니다.</p> + +<h3 id="기본_예제">기본 예제</h3> + +<p>여기서는 제목 앞에 숫자를 붙여봅니다.</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">body { + counter-reset: section; /* counter 이름을 'section'으로 지정합니다. + 초깃값은 0입니다. */ +} + +h3::before { + counter-increment: section; /* section의 카운터 값을 1씩 증가시킵니다. */ + content: counter(section); /* section의 카운터 값을 표시합니다. */ +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><h3>Introduction</h3> +<h3>Body</h3> +<h3>Conclusion</h3></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("Basic_example", "100%", 150)}}</p> + +<h2 id="중첩_카운터">중첩 카운터</h2> + +<p>CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. {{cssxref("counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.</p> + +<h3 id="중첩_카운터_예제">중첩 카운터 예제</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">ol { + counter-reset: section; /* ol 요소마다 + 이름이 section인 + 새 인스턴스를 생성합니다. */ + list-style-type: none; +} + +li::before { + counter-increment: section; /* 해당 인스턴스 안에서 + section 카운터 값 증가 */ + content: counters(section, ".") " "; /* section 카운터 값을 + 마침표(.)로 구분해 결합하여 + 표시합니다. */ +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><ol> + <li>item</li> <!-- 1 --> + <li>item <!-- 2 --> + <ol> + <li>item</li> <!-- 2.1 --> + <li>item</li> <!-- 2.2 --> + <li>item <!-- 2.3 --> + <ol> + <li>item</li> <!-- 2.3.1 --> + <li>item</li> <!-- 2.3.2 --> + </ol> + <ol> + <li>item</li> <!-- 2.4.1 --> + <li>item</li> <!-- 2.4.2 --> + <li>item</li> <!-- 2.4.3 --> + </ol> + </li> + <li>item</li> <!-- 2.4 --> + </ol> + </li> + <li>item</li> <!-- 3 --> + <li>item</li> <!-- 4 --> +</ol> +<ol> + <li>item</li> <!-- 1 --> + <li>item</li> <!-- 2 --> +</ol></pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}</p> + +<h2 id="Specifications">Specifications</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("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td> + <td>{{Spec2("CSS3 Lists")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("counter-reset")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("@counter-style")}}</li> +</ul> diff --git a/files/ko/web/css/css_logical_properties/index.html b/files/ko/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..e46148c67f --- /dev/null +++ b/files/ko/web/css/css_logical_properties/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Logical Properties and Values +slug: Web/CSS/CSS_Logical_Properties +tags: + - CSS + - CSS Logical Properties + - Overview + - Reference +translation_of: Web/CSS/CSS_Logical_Properties +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Logical Properties and Values</strong>는 레이아웃을 제어하는 물리 속성에 논리 맵핑을 정의하는 CSS 모듈입니다.</p> + +<h3 id="블록과_인라인">블록과 인라인</h3> + +<p>Logical properties and values use the abstract terms <em>block</em> and <em>inline</em> to describe the direction in which they flow. The physical meaning of these terms depends on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>.</p> + +<dl> + <dt><a id="블록_치수" name="블록_치수">블록 치수</a></dt> + <dd>The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.</dd> + <dt><a id="인라인_치수" name="인라인_치수">인라인 치수</a></dt> + <dd>The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.</dd> +</dl> + +<h2 id="참고서">참고서</h2> + +<h3 id="크기_속성">크기 속성</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h3 id="안팎_여백_테두리_속성">안팎 여백, 테두리 속성</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li> + <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li> + <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li> + <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li> + <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li> + <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h3 id="플로트와_위치_속성">플로트와 위치 속성</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li> + <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li> + <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h3 id="기타_속성">기타 속성</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li> + <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (<code>block</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}} keywords)</span></li> + <li>{{CSSxRef("text-align")}} (<code>end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}} keywords)</span></li> +</ul> +</div> + +<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('CSS Logical Properties')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_masks/index.html b/files/ko/web/css/css_masks/index.html new file mode 100644 index 0000000000..5a48e0af6e --- /dev/null +++ b/files/ko/web/css/css_masks/index.html @@ -0,0 +1,68 @@ +--- +title: CSS Masking +slug: Web/CSS/CSS_Masks +tags: + - CSS + - CSS Masking + - Overview + - Reference +translation_of: Web/CSS/CSS_Masking +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Masking</strong>은 마스킹 및 클리핑을 포함해 시각 요소의 부분 또는 전체를 숨기기 위한 수단을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("clip")}} {{deprecated_inline}}</li> + <li>{{cssxref("clip-path")}}</li> + <li>{{cssxref("clip-rule")}}</li> + <li>{{cssxref("mask")}}</li> + <li>{{cssxref("mask-border")}}</li> + <li>{{cssxref("mask-border-mode")}}</li> + <li>{{cssxref("mask-border-outset")}}</li> + <li>{{cssxref("mask-border-repeat")}}</li> + <li>{{cssxref("mask-border-slice")}}</li> + <li>{{cssxref("mask-border-source")}}</li> + <li>{{cssxref("mask-border-width")}}</li> + <li>{{cssxref("mask-clip")}}</li> + <li>{{cssxref("mask-composite")}}</li> + <li>{{cssxref("mask-image")}}</li> + <li>{{cssxref("mask-mode")}}</li> + <li>{{cssxref("mask-origin")}}</li> + <li>{{cssxref("mask-position")}}</li> + <li>{{cssxref("mask-repeat")}}</li> + <li>{{cssxref("mask-size")}}</li> + <li>{{cssxref("mask-type")}}</li> +</ul> +</div> + +<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("CSS Masks")}}</td> + <td>{{Spec2("CSS Masks")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<div id="compat-mobile"> </div> diff --git a/files/ko/web/css/css_miscellaneous/index.html b/files/ko/web/css/css_miscellaneous/index.html new file mode 100644 index 0000000000..fbd9a1fbc9 --- /dev/null +++ b/files/ko/web/css/css_miscellaneous/index.html @@ -0,0 +1,43 @@ +--- +title: CSS Miscellaneous +slug: Web/CSS/CSS_Miscellaneous +tags: + - CSS + - Overview + - Reference +translation_of: Web/CSS/CSS_Miscellaneous +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">이 페이지는 한참 실험 중이거나 다른 어떤 부류와도 맞지 않은 CSS 속성을 포함합니다.</span></p> + +<h2 id="참고">참고</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("all")}}</li> + <li>{{cssxref("clip")}}</li> + <li>{{cssxref("clip-path")}}</li> + <li>{{cssxref("display")}}</li> + <li>{{cssxref("ime-mode")}}</li> + <li>{{cssxref("initial-letter")}}</li> + <li>{{cssxref("initial-letter-align")}}</li> + <li>{{cssxref("mask-type")}}</li> + <li>{{cssxref("text-rendering")}}</li> + <li>{{cssxref("will-change")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<p><em>없음.</em></p> + +<h2 id="스펙">스펙</h2> + +<p><em>이 속성은 서로 거의 관련이 없습니다. 스펙은 개별 페이지를 참조하세요.</em></p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p><em>이 속성은 서로 거의 관련이 없습니다. 브라우저 내 가용성은 개별 페이지를 참조하세요.</em></p> diff --git a/files/ko/web/css/css_namespaces/index.html b/files/ko/web/css/css_namespaces/index.html new file mode 100644 index 0000000000..d3082bdb8b --- /dev/null +++ b/files/ko/web/css/css_namespaces/index.html @@ -0,0 +1,42 @@ +--- +title: CSS Namespaces +slug: Web/CSS/CSS_Namespaces +tags: + - CSS + - CSS Namespaces + - Overview + - Reference +translation_of: Web/CSS/CSS_Namespaces +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Namespaces</strong>는 CSS에서 <a href="/ko/docs/Namespaces">XML 네임스페이스</a>를 지정할 수 있는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="규칙">@규칙</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@namespace")}}</li> +</ul> +</div> + +<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 Namespaces")}}</td> + <td>{{Spec2("CSS3 Namespaces")}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_pages/index.html b/files/ko/web/css/css_pages/index.html new file mode 100644 index 0000000000..72f7f39dd3 --- /dev/null +++ b/files/ko/web/css/css_pages/index.html @@ -0,0 +1,73 @@ +--- +title: CSS Paged Media +slug: Web/CSS/CSS_Pages +tags: + - CSS + - CSS Paged Media + - CSS Reference + - Overview +translation_of: Web/CSS/CSS_Pages +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Paged Media</strong>는 페이지 전환을 처리하는 방법을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="CSS_속성">CSS 속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("page-break-after")}}</li> + <li>{{cssxref("page-break-before")}}</li> + <li>{{cssxref("page-break-inside")}}</li> +</ul> +</div> + +<h3 id="규칙">@규칙</h3> + +<div class="index"> +<ul> + <li>{{cssxref('@page')}}</li> +</ul> +</div> + +<h3 id="의사_클래스">의사 클래스</h3> + +<div class="index"> +<ul> + <li>{{cssxref(':blank')}}</li> + <li>{{cssxref(':first')}}</li> + <li>{{cssxref(':left')}}</li> + <li>{{cssxref(':right')}}</li> +</ul> +</div> + +<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 Paged Media')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fragmentation')}}</td> + <td>{{Spec2('CSS3 Fragmentation')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_positioning/index.html b/files/ko/web/css/css_positioning/index.html new file mode 100644 index 0000000000..bd2a5f4f33 --- /dev/null +++ b/files/ko/web/css/css_positioning/index.html @@ -0,0 +1,61 @@ +--- +title: CSS Positioning +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - Overview + - Reference +translation_of: Web/CSS/CSS_Positioning +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Positioning</strong>은 요소를 페이지에 배치하는 방법을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="CSS_속성">CSS 속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("clear")}}</li> + <li>{{cssxref("float")}}</li> + <li>{{cssxref("left")}}</li> + <li>{{cssxref("position")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("z-index")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index">CSS z-index 이해하기</a></dt> + <dd>쌓임 문맥의 개념을 소개하고 몇 가지 예와 함께 z축 순서의 동작을 설명합니다.</dd> +</dl> + +<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 Positioning') }}</td> + <td>{{ Spec2('CSS3 Positioning') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..9621937b5f --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,157 @@ +--- +title: z-index 적용 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p> +<h3 id="cssxrefz-index_적용">{{ cssxref("z-index") }} 적용</h3> +<p>처음 예제에서(<a href="/ko/CSS/Understanding_z-index/Stacking_without_z-index" title="ko/CSS/Understanding_z-index/Stacking_without_z-index">z-index가 없는 경우의 쌓임</a>) 엘리먼트들이 기본적으로 어떻게 쌓이는지 설명했다. 만약 다른 쌓임 순서를 적용하고 싶다면 먼저 엘리먼트에 {{ cssxref("position") }} 속성을 지정하고 {{ cssxref("z-index") }} 속성을 지정해야한다. </p> +<p>z-index 속성은 하나의 정수 값을 가질 수 있다(양수, 음수 모두 가능하다). 이 값은 해당 엘리먼트의 z축 상의 위치를 나타낸다. 만약 당신이 z축에 익숙하지 않다면 여러 레이어가 쌓여있는 페이지를 상상해보라. 각 레이어는 번호가 붙어있고 높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 렌더링된다. </p> +<p><strong>다시한번 경고!</strong> z-index는 <a href="/en/CSS/position" title="position">position</a> 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.</p> +<ul> + <li><em>가장 아래(사용자로부터 가장 멀다)</em></li> + <li>...</li> + <li>Layer -3</li> + <li>Layer -2</li> + <li>Layer -1</li> + <li>Layer 0 <em>기본 렌더링 레이어</em></li> + <li>Layer 1</li> + <li>Layer 2</li> + <li>Layer 3</li> + <li>...</li> + <li><em>가장 위(사용자로부터 가장 가깝다)</em></li> +</ul> +<div class="note"> + <p><strong>노트:</strong></p> + <ul> + <li>z-index 속성을 지정하지 않으면 엘리먼트는 기본 렌더링 레이어(레이어 0)에 렌더링된다. </li> + <li>만약 몇개의 엘리먼트들이 같은 z-index 속성 값을 가지면 (엘리먼트들이 같은 레이어에 위치한다) <a href="/ko/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">z-index가 없는 경우의 쌓임</a> 쌓임 규칙을 적용한다.</li> + </ul> +</div> +<p>다음 예제에서는 레이어들의 쌓임 순서가 z-index를 이용하여 바뀌어있다. DIV#5는 position 속성이 지정되지 않았으므로 z-index 속성 값은 쌓임 순서를 결정하는데에 아무 영향을 미치지 않는다. </p> +<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/912/=Understanding_zindex_03.png"></p> +<h3 id="Example_source_code"><strong>Example source code</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { + opacity: 0.7; + font: 12px Arial; +} + +span.bold { font-weight: bold; } + +#normdiv { + z-index: 8; + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv1 { + z-index: 3; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv2 { + z-index: 2; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#absdiv1 { + z-index: 5; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#absdiv2 { + z-index: 1; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +</style></head> + +<body> + +<br /><br /> + +<div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; + <br />z-index: 5; +</div> + +<div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; + <br />z-index: 3; +</div> + +<div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; + <br />z-index: 2; +</div> + +<div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 1; +</div> + +<div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning + <br />z-index: 8; +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..2887faf021 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,32 @@ +--- +title: CSS z-index 이해하기 +slug: Web/CSS/CSS_Positioning/Understanding_z_index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<p>우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다. </p> +<blockquote> + <p style=""><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p> +</blockquote> +<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> +<p>위에 소개된 CSS 스타일 규칙을 보면 기본 렌더링 레이어(layer 0) 이외의 추가적인 레이어를 생성하고 여기에 박스를 위치시킬수 있다는 것을 알 수 있다. 레이어의 Z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다. 큰 정수는 화면을 보고있는 사용자에게 가까운 것을 의미한다. Z축 위치는 {{ cssxref("z-index") }} 속성 값을 설정함으로써 바꿀 수 있다.</p> +<p>엘리먼트의 Z축 위치를 결정하는 것은 굉장히 간단해 보인다. {{ cssxref("z-index") }} 라는 하나의 프로퍼티를 사용하고 이 프로퍼티는 하나의 정수 값을 가진다. 그러나 {{ cssxref("z-index") }} 속성이 복잡한 HTML 계층적 엘리먼트들에 지정되었을 때에는 동작을 이해하기 힘들고 심지어 예측하지 못할 때도 있다. 이것은 엘리먼트들의 쌓임 순서를 결정하는 규칙(이하 쌓임 규칙)이 복잡하기 때문이다. 오로지 이 규칙만을 설명하기 위한 CSS 명세 섹션이 있을 정도다. (<a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a>)</p> +<p>이 문서에서는 몇가지 간단한 예를 들어 쌓임 규칙에 대해 설명하려고 한다. </p> +<ol> + <li><a href="/ko/CSS/Understanding_z-index/Stacking_without_z-index" title="ko/CSS/Understanding_z-index/Stacking_without_z-index">z-index가 없는 경우의 쌓임</a> : 기본 쌓임 규칙</li> + <li><a href="/ko/CSS/Understanding_z-index/Stacking_and_float" title="ko/CSS/Understanding_z-index/Stacking_and_float">floating 엘리먼트의 쌓임</a> : floating 엘리먼트들은 어떻게 다루어지는가</li> + <li><a href="/ko/CSS/Understanding_z-index/Adding_z-index" title="ko/CSS/Understanding_z-index/Adding_z-index">z-index 적용</a> : 기본 쌓임 순서를 변경하기 위해 z-index 사용하기</li> + <li><a href="/ko/CSS/Understanding_z-index/The_stacking_context" title="ko/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락(stacking context) 이야기</a> : 쌓임 맥락(stacking context) 이야기 </li> + <li><a href="/ko/CSS/Understanding_z-index/Stacking_context_example_1" title="ko/CSS/Understanding_z-index/Stacking_context_example_1">쌓임 맥락 예제1</a> : 2레벨 HTML 계층구조, 마지막 레벨에서 z-index가 지정된 경우</li> + <li><a href="/ko/CSS/Understanding_z-index/Stacking_context_example_2" title="ko/CSS/Understanding_z-index/Stacking_context_example_2">쌓임 맥락 예제2</a> : 2레벨 HTML 계층구조, 모든 레벨에서 z-index가 지정된 경우</li> + <li><a href="/ko/CSS/Understanding_z-index/Stacking_context_example_3" title="ko/CSS/Understanding_z-index/Stacking_context_example_3">쌓임 맥락 예제3</a> : 3레벨 HTML 계층구조, 두번째 레벨에서 z-index가 지정된 경우</li> +</ol> +<p><small><em>저자의 말: 검토를 해준 Wladimir Palant씨와 Rod Whiteley씨에게 감사의 말을 전합니다.</em></small></p> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">원본 문서 정보</h3> + <ul> + <li>저자(s): Paolo Lombardi</li> + <li>이 문서는 <a class="external" href="http://www.yappy.it">YappY</a>에 이탈리어로 게재된 문서의 영어 번역판입니다. <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> 아래에서 공유할 수 있습니다.</li> + <li>마지막 수정일: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index" } ) }} </p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..4430c5cdf3 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,146 @@ +--- +title: floating 엘리먼트의 쌓임 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p> +<h3 id="floating_엘리먼트의_쌓임">floating 엘리먼트의 쌓임</h3> +<p>floating 엘리먼트들의 쌓임 순서는 약간 다르다. floating 엘리먼트들은 position이 지정된 블록과 지정되지 않은 블록 사이에 쌓인다. </p> +<ol> + <li>뿌리 엘리먼트의 배경과 테두리</li> + <li>자식 엘리먼트들은 HTML에서 등장하는 순서대로</li> + <li>floating 엘리먼트</li> + <li>position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li> +</ol> +<p>사실 다음 예제에서 보는 것처럼 position이 지정되지 않은 엘리먼트(DIV #4)의 배경과 테두리는 floating 엘리먼트들에 의해 영향을 받지 않는다. 반면 컨텐츠는 영향을 받는다. 이것은 CSS 표준 float 명세에 따른 것이다. </p> +<p>위의 규칙 리스트를 수정하여 이 명세를 포함시켜보자. </p> +<ol> + <li>뿌리 엘리먼트의 배경과 테두리</li> + <li>자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li> + <li>floating 엘리먼트</li> + <li>inline 자식 엘리먼트는 보통의 흐름대로</li> + <li>position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li> +</ol> +<div class="note"> + <strong>노트:</strong> 아래 예제에서 position이 지정되지 않은 엘리먼트 이외에는 모든 엘리먼트가 쌓임 순서를 보여주기 위해 반투명하게 설정되었다. 만약 position이 지정되지 않은 엘리먼트 (DIV #4)의 투명도를 낮추면 이상한 일이 일어난다. 배경과 테두리가 (원래에는 floating 엘리먼트 아래에 있어야 함에도 불구하고) floating 엘리먼트와 position이 지정된 엘리먼트 사이에 보이는 것이다. 이것이 명세의 일부인지 아니면 버그인지 확실하지 않다. 투명도를 적용하는것이 새로운 쌓임 맥락(stacking context)를 만드는 것일까?</div> +<p><img alt="Example of stacking rules with floating boxes" class="internal" src="/@api/deki/files/911/=Understanding_zindex_02.png"></p> +<h3 id="Example_source_code"><strong>Example source code</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { + font: 12px Arial; +} + +span.bold { font-weight: bold; } + +#absdiv1 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 200px; + top: 10px; + right: 140px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#normdiv { + /*opacity: 0.7;*/ + height: 100px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 10px 0px 10px; + text-align: left; +} + +#flodiv1 { + opacity: 0.7; + margin: 0px 10px 0px 20px; + float: left; + width: 150px; + height: 200px; + border: 1px dashed #009900; + background-color: #ccffcc; + text-align: center; +} + +#flodiv2 { + opacity: 0.7; + margin: 0px 20px 0px 10px; + float: right; + width: 150px; + height: 200px; + border: 1px dashed #009900; + background-color: #ccffcc; + text-align: center; +} + +#absdiv2 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 100px; + top: 130px; + left: 100px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +</style></head> + +<body> + +<br /><br /> + +<div id="absdiv1"> +<br /><span class="bold">DIV #1</span> +<br />position: absolute; +</div> + +<div id="flodiv1"> +<br /><span class="bold">DIV #2</span> +<br />float: left; +</div> + +<div id="flodiv2"> +<br /><span class="bold">DIV #3</span> +<br />float: right; +</div> + +<br /> + +<div id="normdiv"> +<br /><span class="bold">DIV #4</span> +<br />no positioning +</div> + +<div id="absdiv2"> +<br /><span class="bold">DIV #5</span> +<br />position: absolute; +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_et_float" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..9444e2bb5e --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,120 @@ +--- +title: 쌓임 맥락 예제1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p> +<h3 id="쌓임_맥락_예제1">쌓임 맥락 예제1</h3> +<p>기본 예제부터 시작하자. 쌓임 맥락의 뿌리에는 두개의 DIV #1과 DIV #3가 있다. 두 DIV는 모두 position 속성 값이 relative로 지정되었지만 z-index 속성 값은 지정되지 않았다. DIV #1 안에는 position 속성 값이 absolute로 지정된 DIV #2가 있고 DIV #3 안에도 position 속성 값이 absolute가 지정된 DIV #4가 있다. DIV #2와ㅏ DIV #4 모두 z-index 속성 값은 지정되지 않았다. </p> +<p>유일한 쌓임 맥락은 뿌리 엘리먼트다. z-index가 없는 엘리먼트들은 HTML 문서에서 등장 순서대로 쌓인다. </p> +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p> +<p>DIV #2의 z-index 속성 값을 0또는 auto가 아닌 양의 정수로 지정하면 다른 DIV들 보다 위에 렌더링된다. </p> +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p> +<p>DIV #4의 z-index 속성 값을 DIV #2의 z-index 속성 값보다 큰 값으로 지정하면 DIV #4는 DIV #2보다 위에 렌더링된다. </p> +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p> +<p>마지막 예제에서 DIV #2와 DIV #4는 형제가 아니다. 왜냐하면 둘의 부모가 다르기 때문이다. 그럼에도 불구하고 DIV #2와 DIV #4의 쌓임 순서를 z-index 속성 값을 지정함으로써 바꿀 수 있었다. 왜냐하면 DIV #1과 DIV #3은 z-index 속성 값이 지정되지 않았고 따라서 쌓임 맥락을 만들지 않았기 때문이다. 따라서 DIV #2와 DIV #4는 둘 다 뿌리 엘리먼트의 쌓임 맥락에 속해있고, z-index 속성 값을 변경하여 쌓임 순서를 바꿀 수 있다. </p> +<p>쌓임 맥락의 용어로 설명하자면 DIV #1과 DIV #3은 뿌리 엘리먼트에 <em>동화되었다.</em> 이 예제의 DIV들은 다음과 같은 쌓임 맥락 계층 구조를 이룬다. </p> +<ul> + <li>뿌리 쌓임 맥락 + <ul> + <li>DIV #2 (z-index 1)</li> + <li>DIV #4 (z-index 2)</li> + </ul> + </li> +</ul> +<div class="note"> + <strong>Note:</strong> DIV #1과 DIV #3은 투명하지 않다. 투명도를 1보다 적은 값으로 지정하게 되면 내부적으로 쌓임 맥락을 만든다는걸 기억하자. 이건 마치 z-index 값을 설정한 것과 비슷하다. 이 예제는 부모 엘리먼트들이 쌓임 맥락을 형성하지 않을 때 어떤 일이 일어나는지 보여준다. </div> +<h3 id="예제_소스_코드"><strong>예제 소스 코드</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +#div1,#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#div2 { + opacity: 0.8; + z-index: 1; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#div4 { + opacity: 0.8; + z-index: 2; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +} + + +</style></head> + +<body> + +<br /> + +<div id="div1"> +<br /><span class="bold">DIV #1</span> +<br />position: relative; + <div id="div2"> + <br /><span class="bold">DIV #2</span> + <br />position: absolute; + <br />z-index: 1; + </div> +</div> + +<br /> + +<div id="div3"> +<br /><span class="bold">DIV #3</span> +<br />position: relative; + <div id="div4"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 2; + </div> +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" style="display: none;"> </span></li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_1" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..cf794c3428 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,123 @@ +--- +title: 쌓임 맥락 예제2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p> +<h3 id="쌓임_맥락_예제2">쌓임 맥락 예제2</h3> +<p>굉장히 간단하지만 <em>쌓임 맥락</em>을 이해하는데 도움이 되는 예제를 하나 소개하려 한다. 이전 예제에서 본 4개의 DIV가 있다. 이번에는 두 레벨의 DIV 모두 z-index 속성 값을 지정했다. </p> +<p><img alt="Stacking context example 2" class="internal" src="/@api/deki/files/917/=Understanding_zindex_06.png"></p> +<p>z-index 속성 값이 2인 DIV #2는 z-index 속성 값이 1인 DIV #3 위에 있다. 왜냐하면 DIV #2와 DIV #3은 같은 쌓임 맥락(루트 엘리먼트)에 속하고 DIV #2의 z-index 값이 더 크기 때문이다. </p> +<p>이상한 점은 z-index 속성 값이 2인 DIV #2가 z-index 속성 값이 10인 DIV #4보다 위에 있다는 점이다. 이것은 이 두 DIV가 같은 쌓임 맥락에 속해있지 않기 때문이다. DIV #4는 DIV #3이 만든 쌓임 맥락에 속해있고 DIV #3과 DIV #3의 모든 자식 엘리먼트는 DIV #2보다 아래에 있다. </p> +<p>이 상황을 더 잘 이해하기 위해서 쌓임 맥락 계층을 그려보자. </p> +<ul> + <li>루트 엘리먼트 쌓임 맥락 + <ul> + <li>DIV #2 (z-index 2)</li> + <li>DIV #3 (z-index 1) + <ul> + <li>DIV #4 (z-index 10)</li> + </ul> + </li> + </ul> + </li> +</ul> +<div class="note"> + <strong>Note:</strong> 일반적인 HTML 계층 구조가 쌓임 맥락 계층 구조와 다르다는걸 상기하자. 쌓임 맥락을 만들지 않는 엘리먼트들은 쌓임 맥락 계층 구조에서 사라진다. </div> +<h3 id="예제_소스_코드"><strong>예제 소스 코드</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +#div2 { z-index: 2; } +#div3 { z-index: 1; } +#div4 { z-index: 10; } + +#div1,#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#div2 { + opacity: 0.8; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#div4 { + opacity: 0.8; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +} + + +</style></head> + +<body> + +<br /> + +<div id="div1"> +<br /><span class="bold">DIV #1</span> +<br />position: relative; + <div id="div2"> + <br /><span class="bold">DIV #2</span> + <br />position: absolute; + <br />z-index: 2; + </div> +</div> + +<br /> + +<div id="div3"> +<br /><span class="bold">DIV #3</span> +<br />position: relative; +<br />z-index: 1; + <div id="div4"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 10; + </div> +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_2" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..d632745924 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,167 @@ +--- +title: 쌓임 맥락 예제3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <span class="title"><a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index">CSS z-index 이해하기</a></span></p> +<h3 id="쌓임_맥락_예제3">쌓임 맥락 예제3</h3> +<p>마지막 예제는 멀티 레벨 HTML 계층 구조에서 z-index 속성 값을 지정할때 생기는 문제에 대해 다룰 것이다. </p> +<p>몇개의 position 속성 값이 지정된 3-레벨 계층 메뉴를 생각하자. 두번째 레벨과 세번째 레벨의 메뉴는 그들의 부모에 마우스를 갖다 대거나 클릭했을 때 보인다. 이 메뉴를 클래스 선택자를 통해 스타일링 해보자. </p> +<p>만약 세 메뉴가 부분적으로 겹친다면 쌓임을 해결하는 것이 문제가 된다. </p> +<p><img alt="Stacking context example 3" class="internal" src="/@api/deki/files/918/=Understanding_zindex_07.png"></p> +<p>첫번째 레벨 메뉴는 position 속성 값만이 relative로 지정되어있다. 따라서 이는 쌓임 맥락을 형성하지 않는다. (역자: z-index 속성 값을 지정하지 않았다.) </p> +<p>두번째 레벨 메뉴는 position 속성 값이 absolute로 지정되었다. 두번째 레벨 메뉴를 모든 첫번째 레벨 메뉴보다 위에 두기 위해서 z-index 속성 값이 사용되었다. 따라서 모든 두번째 레벨 메뉴에 쌓임 맥락이 생성되고 세번째 레벨 메뉴는 부모의 쌓임 맥락에 속하게 된다. </p> +<p>따라서 세번째 레벨 메뉴는 그 부모의 다음 두번째 레벨 메뉴 아래에 놓이게 된다. 왜냐하면 모든 두번째 레벨 메뉴는 같은 z-index 속성 값을 가지고 기본 쌓임 규칙을 적용받기 때문이다. (역자: 같은 z-index 속성 값을 가지는 형제 엘리먼트들은 HTML 문서상에서 나중에 등장한 것이 위에 쌓인다.)</p> +<p>이 상황을 더 잘 이해하기 위해 쌓임 맥락 계층 구조를 그려보자.</p> +<ul> + <li>뿌리 엘리먼트 쌓임 맥락 + <ul> + <li>LEVEL #1 + <ul> + <li>LEVEL #2 (z-index: 1) + <ul> + <li>LEVEL #3</li> + <li>...</li> + <li>LEVEL #3</li> + </ul> + </li> + <li>LEVEL #2 (z-index: 1)</li> + <li>...</li> + <li>LEVEL #2 (z-index: 1)</li> + </ul> + </li> + <li>LEVEL #1</li> + <li>...</li> + <li>LEVEL #1</li> + </ul> + </li> +</ul> +<p>이 문제를 해결하는 방법에는 1) 서로 다른 메뉴를 겹치지 않게 배치하기, 2) 클래스 선택자 뿐만 아니라 id 선택자를 이용하여 각각의 엘리먼트에 z-index 속성 값을 지정하기, 3) HTML 구조를 단순화하여 멀티 레벨 메뉴를 사용하지 않기 등이 있다. </p> +<div class="note"> + <strong>노트:</strong> 소스 코드에는 두번째 레벨 메뉴와 세번째 레벨 메뉴들이 position 속성이 absolute로 지정된 컨테이너에 싸여있는 것을 볼 수 있다. 이는 여러개의 엘리먼트들의 위치를 한꺼번에 지정하는데 유용하다. </div> +<h3 id="예제_소스_코드"><strong>예제 소스 코드</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +div.lev1 { + width: 250px; + height: 70px; + position: relative; + border: 2px outset #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#container1 { + z-index: 1; + position: absolute; + top: 30px; + left: 75px; +} + +div.lev2 { + opacity: 0.9; + width: 200px; + height: 60px; + position: relative; + border: 2px outset #990000; + background-color: #ffdddd; + padding-left: 5px; +} + +#container2 { + z-index: 1; + position: absolute; + top: 20px; + left: 110px; +} + +div.lev3 { + z-index: 10; + width: 100px; + position: relative; + border: 2px outset #000099; + background-color: #ddddff; + padding-left: 5px; +} + +</style></head> + +<body> + +<br /> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> + + <div id="container1"> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + + <div id="container2"> + + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + + </div> + + </div> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + </div> + + </div> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> +</ul> +<p> </p> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_3" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..04e826dc17 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,145 @@ +--- +title: z-index가 없는 경우의 쌓임 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p> +<h3 id="z-index가_없는_경우의_쌓임">z-index가 없는 경우의 쌓임</h3> +<p>만약 모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다음 순서로 아래에서부터 위로 쌓인다.</p> +<ol> + <li>뿌리 엘리먼트의 배경과 테두리</li> + <li>자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li> + <li>position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li> +</ol> +<p>다음 예제에는 위의 쌓임 규칙을 설명하기 위한 적당한 크기의 엘리먼트들이 준비되어있다. </p> +<div class="note"> + <p><strong>노트:</strong></p> + <ul> + <li>주어진 동일한 엘리먼트들의 그룹은 모두 z-index가 설정되지 않았다. DIV #1 부터 DIV #4 까지는 position 속성이 설정되었다. 엘리먼트의 position속성 값과는 상관 없이 HTML 계층 구조대로 쌓임을 알 수 있다. </li> + <li> + <p>position 속성이 지정되지 않은 블록(DIV #5)은 항상 position이 지정된 엘리먼트 이전에 렌더링 된다. 따라서 position이 지정된 엘리먼트 아래에 보인다. 설령 HTML 문서상에서 먼저 나오더라도 position이 지정되지 않은 엘리먼트는 지정된 엘리먼트보다 아래에 보인다. </p> + </li> + </ul> +</div> +<p><img alt="understanding_zindex_01.png" class="internal default" src="/@api/deki/files/910/=understanding_zindex_01.png"></p> +<p> </p> +<h3 id="Example" name="Example">예제</h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { + font: 12px Arial; +} + +span.bold { font-weight: bold; } + +#normdiv { + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv1 { + opacity: 0.7; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv2 { + opacity: 0.7; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#absdiv1 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#absdiv2 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +</style></head> + +<body> + +<br /><br /> + +<div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; +</div> + +<div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; +</div> + +<div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; +</div> + +<div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; +</div> + +<div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning +</div> + +</body></html> + +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li> +</ul> +<p> </p> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..0e55368fa2 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,240 @@ +--- +title: 쌓임 맥락 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +tags: + - Advanced + - CSS + - Guide + - Reference + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary"><strong>쌓임 맥락</strong>(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다.</span> Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지합니다.</p> + +<h2 id="쌓임_맥락">쌓임 맥락</h2> + +<p>이전 글 <a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index 사용하기</a>에서 보았듯, 특정 요소의 렌더링 순서는 자신의 <code>z-index</code> 속성 값에 영향을 받습니다. 이는 그 요소들이 가진 특별한 속성으로 인해 <strong>쌓임 맥락</strong>이 생성되기 때문입니다.</p> + +<p>쌓임 맥락은, 문서 어디에서나, 다음 조건을 만족하는 요소가 생성합니다.</p> + +<ul> + <li>문서의 루트 요소. (<code><html></code>)</li> + <li>{{cssxref("position")}}이 <code>absolute</code> 또는 <code>relative</code>이고, {{cssxref("z-index")}}가 <code>auto</code>가 아닌 요소.</li> + <li>{{cssxref("position")}}이 <code>fixed</code> 또는 <code>sticky</code>인 요소. (<code>sticky</code>는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)</li> + <li>플렉스({{cssxref("flexbox")}}) 컨테이너의 자식 중 {{cssxref("z-index")}}가 <code>auto</code>가 아닌 요소.</li> + <li>그리드({{cssxref("grid")}}) 컨테이너의 자식 중 {{cssxref("z-index")}}가 <code>auto</code>가 아닌 요소.</li> + <li>{{cssxref("opacity")}}가 1보다 작은 요소. (<a href="http://www.w3.org/TR/css3-color/#transparency">불투명도 명세</a> 참고)</li> + <li>{{cssxref("mix-blend-mode")}}가 <code>normal</code>이 아닌 요소.</li> + <li>다음 속성 중 하나라도 <code>none</code>이 아닌 값을 가진 요소. + <ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("filter")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("clip-path")}}</li> + <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li> + </ul> + </li> + <li>{{cssxref("isolation")}}이 <code>isolate</code>인 요소.</li> + <li>{{cssxref("-webkit-overflow-scrolling")}}이 <code>touch</code>인 요소.</li> + <li>{{cssxref("will-change")}}의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.</li> + <li>{{cssxref("contain")}}이 <code>layout</code>, <code>paint</code>, 또는 둘 중 하나를 포함하는 값(<code>strict</code>, <code>content</code> 등)인 요소.</li> +</ul> + +<p>쌓임 맥락 안의 자식 요소는 이전에 설명했던 규칙을 동일하게 사용해 쌓입니다. 중요한 것은, 자식의 <code>z-index</code> 값은 부모에게만 의미가 있다는 점입니다. 하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다.</p> + +<p>요약하면,</p> + +<ul> + <li>쌓임 맥락이 다른 쌓임 맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다.</li> + <li>쌓임 맥락은 형제 쌓임 맥락과 완전히 분리됩니다. 쌓임을 처리할 땐 자손 요소만 고려합니다.</li> + <li>각각의 쌓임 맥락은 독립적입니다. 어느 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째 부모 쌓임 맥락 안에 배치합니다.</li> +</ul> + +<div class="note"><strong>참고:</strong> 모든 요소가 쌓임 맥락을 생성하는 건 아니므로, 쌓임 맥락의 계층 구조는 HTML 요소 계층 구조의 부분집합입니다. 자신의 쌓임 맥락을 만들지 않은 요소는 '부모 쌓임 맥락에 의해 <strong>동화된다</strong>'라고 표현할 수 있겠습니다.</div> + +<h2 id="예시"><strong>예시</strong></h2> + +<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> + +<p>위의 예시에서, 모든 요소는 각자의 포지션과 <code>z-index</code>로 인해 자신의 쌓임 맥락을 형성합니다. 쌓임 맥락의 계층 구조는 다음과 같습니다.</p> + +<ul> + <li>루트 + <ul> + <li>DIV #1</li> + <li>DIV #2</li> + <li>DIV #3 + <ul> + <li>DIV #4</li> + <li>DIV #5</li> + <li>DIV #6</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>DIV #4, DIV #5, DIV #6은 DIV #3의 자식이므로, DIV #3 내부에서만 셋의 쌓임을 처리했다는 것을 이해하는게 중요합니다. DIV #3 내부의 요소의 쌓기와 렌더링이 끝난 후에는, 전체 DIV #3을 루트 요소의 쌓임 맥락 하에서 형제 DIV와 쌓습니다.</p> + +<div class="note"> +<p><strong>참고:</strong></p> + +<ul> + <li>DIV #4는 DIV #1보다 z-index 속성 값이 더 크지만 DIV #1보다 아래에 렌더링 되었다. 왜냐하면 DIV #1의 z-index 속성 값인 5는 뿌리 엘리먼트의 쌓임 맥락 안에서 유효하나 DIV #4의 z-index 속성 값인 6은 DIV #3의 쌓임 맥락 안에서만 유효하기 때문이다. DIV #4는 자신이 속하는 DIV #3의 z-index 속성 값이 4이므로 DIV #1 아래에 쌓였다.</li> + <li>같은 이유로 DIV #2는 DIV #5 아래에 렌더링 되었다. DIV #5는 DIV #2보다 z-index 값이 작지만 뿌리 엘리먼트의 쌓임 맥락안에서 유효한 DIV #5가 속한 DIV #3의 z-index 값이 DIV #2의 z-index 값 보다 더 크기 때문이다.</li> + <li>DIV #3의 z-index 속성 값인 4는 DIV #4, DIV #5, DIV #6의 z-index 속성값과 독립적이다. 왜냐하면 다른 쌓임 맥락에 속해있기 때문이다.</li> + <li>렌더링 순서를 이해하는 쉬운 방법은 z-index를 "버전 번호" 처럼 생각하는 것이다. 자식 엘리먼트는 부모 엘리먼트 버전 번호의 마이너 버전이다. 이 방법은 왜 z-index가 1인 DIV #5가 z-index가 2인 DIV #2 위에 쌓였는지, z-index가 6인 DIV #4가 z-index가 5인 DIV #1 아래에 쌓였는지 이해하게 해준다. 우리 예제에서는 + <ul> + <li>뿌리 엘리먼트 + <ul> + <li>DIV #2 - z-index가 2</li> + <li>DIV #3 - z-index가 4 + <ul> + <li>DIV #5 - z-index가 1인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.1이다.</li> + <li>DIV #6 - z-index가 3인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.3이다.</li> + <li>DIV #4 - z-index가 6인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.6이다.</li> + </ul> + </li> + <li>DIV #1 - z-index가 5</li> + </ul> + </li> + </ul> + </li> +</ul> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><code><div id="div1"> + <h1>Division Element #1</h1> + <code>position: relative;<br/> + z-index: 5;</code> +</div> + +<div id="div2"> + <h1>Division Element #2</h1> + <code>position: relative;<br/> + z-index: 2;</code> +</div> + +<div id="div3"> + <div id="div4"> + <h1>Division Element #4</h1> + <code>position: relative;<br/> + z-index: 6;</code> + </div> + + <h1>Division Element #3</h1> + <code>position: absolute;<br/> + z-index: 4;</code> + + <div id="div5"> + <h1>Division Element #5</h1> + <code>position: relative;<br/> + z-index: 1;</code> + </div> + + <div id="div6"> + <h1>Division Element #6</h1> + <code>position: absolute;<br/> + z-index: 3;</code> + </div> +</div></code></pre> + +<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3> + +<pre class="brush: css notranslate"><code>* { + margin: 0; +} +html { + padding: 20px; + font: 12px/20px Arial, sans-serif; +} +div { + opacity: 0.7; + position: relative; +} +h1 { + font: inherit; + font-weight: bold; +} +#div1, +#div2 { + border: 1px dashed #696; + padding: 10px; + background-color: #cfc; +} +#div1 { + z-index: 5; + margin-bottom: 190px; +} +#div2 { + z-index: 2; +} +#div3 { + z-index: 4; + opacity: 1; + position: absolute; + top: 40px; + left: 180px; + width: 330px; + border: 1px dashed #900; + background-color: #fdd; + padding: 40px 20px 20px; +} +#div4, +#div5 { + border: 1px dashed #996; + background-color: #ffc; +} +#div4 { + z-index: 6; + margin-bottom: 15px; + padding: 25px 10px 5px; +} +#div5 { + z-index: 1; + margin-top: 15px; + padding: 5px 10px; +} +#div6 { + z-index: 3; + position: absolute; + top: 20px; + left: 180px; + width: 150px; + height: 125px; + border: 1px dashed #009; + padding-top: 125px; + background-color: #ddf; + text-align: center; +}</code></pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample('예제', '100%', '396') }}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, <code>z-index</code> on the last level</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, <code>z-index</code> on all levels</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, <code>z-index</code> on the second level</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li> + <li>Last Updated Date: July 9, 2005</li> +</ul> +</div> diff --git a/files/ko/web/css/css_ruby/index.html b/files/ko/web/css/css_ruby/index.html new file mode 100644 index 0000000000..e7266af671 --- /dev/null +++ b/files/ko/web/css/css_ruby/index.html @@ -0,0 +1,45 @@ +--- +title: CSS Ruby +slug: Web/CSS/CSS_Ruby +tags: + - CSS + - CSS Ruby + - Overview + - Reference +translation_of: Web/CSS/CSS_Ruby +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Ruby</strong>는 행간 주석의 형태로 기본 텍스트와 함께 작게 실행되는 텍스트인 ruby 주석 표시와 관련된 렌더링 모델 및 서식 컨트롤을 제공하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("ruby-align")}}</li> + <li>{{cssxref("ruby-position")}}</li> +</ul> +</div> + +<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 Ruby')}}</td> + <td>{{Spec2('CSS3 Ruby')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<div id="compat-mobile"> </div> diff --git a/files/ko/web/css/css_scroll_snap_points/index.html b/files/ko/web/css/css_scroll_snap_points/index.html new file mode 100644 index 0000000000..1603df3f02 --- /dev/null +++ b/files/ko/web/css/css_scroll_snap_points/index.html @@ -0,0 +1,50 @@ +--- +title: CSS Scroll Snap Points +slug: Web/CSS/CSS_Scroll_Snap_Points +tags: + - CSS + - CSS Scroll Snap + - Overview + - Reference +translation_of: Web/CSS/CSS_Scroll_Snap_Points +--- +<p>{{CSSRef}}{{deprecated_header}}</p> + +<p><strong>CSS Scroll Snap Points</strong>는 물리보다는 논리상 방향과 차원 맵핑을 통해 레이아웃을 제어하는 능력을 제공하는 속성 및 값을 정의하는 CSS 모듈입니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 같은 기능을 정의하는 최신 명세는 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap">CSS Scroll Snap</a>입니다.</p> +</div> + +<h2 id="참고">참고</h2> + +<h3 id="CSS_속성">CSS 속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("scroll-snap-coordinate")}}</li> + <li>{{cssxref("scroll-snap-destination")}}</li> + <li>{{cssxref("scroll-snap-points-x")}}</li> + <li>{{cssxref("scroll-snap-points-y")}}</li> + <li>{{cssxref("scroll-snap-type")}}</li> +</ul> +</div> + +<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("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}</td> + <td>{{Spec2("CSS Scroll Snap Points")}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_selectors/index.html b/files/ko/web/css/css_selectors/index.html new file mode 100644 index 0000000000..eb5af87d66 --- /dev/null +++ b/files/ko/web/css/css_selectors/index.html @@ -0,0 +1,133 @@ +--- +title: CSS 선택자 +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - Guide + - Overview + - Reference + - Selectors + - 선택자 +translation_of: Web/CSS/CSS_Selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p class="summary"><span class="seoSummary"><strong>CSS 선택자</strong>는 CSS 규칙을 적용할 요소를 정의합니다.</span></p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않습니다.</p> +</div> + +<h2 id="기본_선택자">기본 선택자</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/Universal_selectors">전체 선택자</a></dt> + <dd>모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.<br> + <strong>구문:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br> + <strong>예제:</strong> <code>*</code>은 문서 내의 모든 요소와 일치합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Type_selectors">유형 선택자</a></dt> + <dd>주어진 노드 이름을 가진 모든 요소를 선택합니다.<br> + <strong>구문:</strong> <code><var>elementname</var></code><br> + <strong>예제:</strong> <code>input</code>은 모든 {{HTMLElement("input")}} 요소와 일치합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a></dt> + <dd>주어진 <code>class</code> 특성을 가진 모든 요소를 선택합니다.<br> + <strong>구문:</strong> <code>.<var>classname</var></code><br> + <strong>예제:</strong> <code>.index</code>는 "index" 클래스를 가진 모든 요소와 일치합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/ID_selectors">ID 선택자</a></dt> + <dd><code>id</code> 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.<br> + <strong>구문:</strong> <code>#<var>idname</var></code><br> + <strong>예제:</strong> <code>#toc</code>는 "toc" ID를 가진 요소와 일치합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Attribute_selectors">특성 선택자</a></dt> + <dd>주어진 특성을 가진 모든 요소를 선택합니다.<br> + <strong>구문:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br> + <strong>예제:</strong> <code>[autoplay]</code>는 <code>autoplay</code> 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.</dd> +</dl> + +<h2 id="그룹_선택자">그룹 선택자</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/Selector_list">선택자 목록</a></dt> + <dd><code>,</code>는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다.<br> + <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br> + <strong>예제:</strong> <code>div, span</code>은 모든 {{HTMLElement("span")}}과 {{HTMLElement("div")}} 요소와 일치합니다.</dd> +</dl> + +<h2 id="결합자">결합자</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a></dt> + <dd><code> </code> (공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다.<br> + <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br> + <strong>예제:</strong> <code>div span</code>은 {{HTMLElement("div")}} 요소 안에 위치하는 모든 {{HTMLElement("span")}} 요소와 일치합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a></dt> + <dd><code>></code> 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.<br> + <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> > <var>B</var></code><br> + <strong>예제:</strong> <code>ul > li</code>는 {{HTMLElement("ul")}} 요소 바로 아래에 위치하는 모든 {{HTMLElement("li")}} 요소와 일치합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a></dt> + <dd><code>~</code> 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.<br> + <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br> + <strong>예제:</strong> <code>p ~ span</code>은 {{HTMLElement("p")}} 요소를 뒤따르는 모든 {{HTMLElement("span")}} 요소와 일치합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Adjacent_sibling_combinator">인접 형제 결합자</a></dt> + <dd><code>+</code> 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.<br> + <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br> + <strong>예제:</strong> <code>h2 + p</code>는 {{HTMLElement("h2")}} 바로 뒤에 위치하는 {{HTMLElement("p")}} 요소와 일치합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Column_combinator">열 결합자</a> {{Experimental_Inline}}</dt> + <dd><code>||</code> 결합자는 같은 열에 속하는 노드를 선택합니다.<br> + <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br> + <strong>예제:</strong> <code>col || td</code>는 {{HTMLElement("col")}}의 범위에 속하는 모든 {{HTMLElement("td")}} 요소와 일치합니다.</dd> +</dl> + +<h2 id="의사_클래스요소">의사 클래스/요소</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a></dt> + <dd>의사 <code>:</code>은 문서 트리가 포함하지 않는 상태 정보에 기반해 요소를 선택할 수 있습니다.<br> + <strong>예제:</strong> <code>a:visited</code>는 사용자가 방문한 모든 {{HTMLElement("a")}} 요소와 일치합니다.</dd> + <dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">의사 요소</a></dt> + <dd>의사 <code>::</code>는 HTML이 포함하지 않는 개체를 선택합니다.<br> + <strong>예제:</strong> <code>p::first-line</code>은 모든 {{HTMLElement("p")}} 요소의 첫 번째 줄과 일치합니다.</dd> +</dl> + +<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("CSS4 Selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br> + Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Added the <code>></code> child and <code>+</code> adjacent sibling combinators.<br> + Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p><a href="/ko/docs/Web/CSS/Pseudo-classes#명세">의사 클래스</a>와 <a href="/ko/docs/Web/CSS/Pseudo-elements#명세">의사 요소</a>의 명세 표에서 각각의 상세 정보를 볼 수 있습니다.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Specificity">CSS 명시도</a></li> +</ul> diff --git a/files/ko/web/css/css_shapes/index.html b/files/ko/web/css/css_shapes/index.html new file mode 100644 index 0000000000..f814002c56 --- /dev/null +++ b/files/ko/web/css/css_shapes/index.html @@ -0,0 +1,80 @@ +--- +title: CSS Shapes +slug: Web/CSS/CSS_Shapes +tags: + - CSS + - CSS Shapes + - Overview + - Reference +translation_of: Web/CSS/CSS_Shapes +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Shapes</strong>는 CSS에서 사용하기 위한 기하학적 도형을 설명한다. 레벌1 명세에 의하면 떠있는 요소에 CSS Shapes를 적용할 수 있다. 명세의 정의에 의하면 떠있는 요소의 모양을 정의 하거나 요소 상자의 사각형을 따르는 대신 테두리 선을 따라 감싸지도록 하는 방법 등 다양한 방법을 정의하고 있다. </p> + +<h2 id="Basic_Example" name="Basic_Example">기본 예제</h2> + +<p>아래 예제는 왼쪽에 떠있는 이미지에 shape-outside속성에 circle(50%) 값이 적용된 모습을 볼수 있다. 이런식으로 원모양을 만들면 도옇의 둘래를 따라 주변 텍스트가 흘러내리는것을 볼수 있다. 둘러싼 텍스트가 도형의 모양을 따라 길이가 변하게 되었다. </p> + +<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("shape-outside")}}</li> + <li>{{cssxref("shape-margin")}}</li> + <li>{{cssxref("shape-image-threshold")}}</li> +</ul> +</div> + +<h3 id="자료형">자료형</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<basic-shape>")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Overview of CSS Shapes</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Shapes from Box Values</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Basic Shapes</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Shapes from Images</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit Shape Paths in CSS — Firefox Developer Tools</a></li> +</ul> + +<h2 id="외부_자료">외부 자료</h2> + +<ul> + <li><a href="https://codepen.io/KristopherVanSant/post/css-shapes-resources">A list of CSS Shapes resources</a></li> + <li><a href="https://alistapart.com/article/css-shapes-101">CSS Shapes 101</a></li> + <li><a href="https://www.sarasoueidan.com/blog/css-shapes/">Creating non-rectangular layouts with CSS Shapes</a></li> + <li><a href="https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498">How To Use CSS Shapes In Your Web Design</a></li> + <li><a href="https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/">How To Get Started With CSS Shapes</a></li> + <li><a href="https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5">What I Learned In One Weekend With CSS Shapes</a></li> + <li><a href="https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/">CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components</a></li> +</ul> + +<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("CSS Shapes")}}</td> + <td>{{Spec2("CSS Shapes")}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_table/index.html b/files/ko/web/css/css_table/index.html new file mode 100644 index 0000000000..ad712ec39e --- /dev/null +++ b/files/ko/web/css/css_table/index.html @@ -0,0 +1,48 @@ +--- +title: CSS Table +slug: Web/CSS/CSS_Table +tags: + - CSS + - CSS Table + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Table +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Table</strong>은 표 데이터의 배치법을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("border-collapse")}}</li> + <li>{{cssxref("border-spacing")}}</li> + <li>{{cssxref("caption-side")}}</li> + <li>{{cssxref("empty-cells")}}</li> + <li>{{cssxref("table-layout")}}</li> + <li>{{cssxref("vertical-align")}}</li> +</ul> +</div> + +<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("CSS2.1", "tables.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_text/index.html b/files/ko/web/css/css_text/index.html new file mode 100644 index 0000000000..9edc21d716 --- /dev/null +++ b/files/ko/web/css/css_text/index.html @@ -0,0 +1,71 @@ +--- +title: CSS Text +slug: Web/CSS/CSS_Text +tags: + - CSS + - CSS Text + - Guide + - Overview +translation_of: Web/CSS/CSS_Text +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Text</strong>는 줄 바꿈, 정돈 및 정렬, 공백 처리 및 텍스트 변환 같은 텍스트 조작을 수행하는 법을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("hanging-punctuation")}}</li> + <li>{{cssxref("hyphens")}}</li> + <li>{{cssxref("letter-spacing")}}</li> + <li>{{cssxref("line-break")}}</li> + <li>{{cssxref("overflow-wrap")}}</li> + <li>{{cssxref("tab-size")}}</li> + <li>{{cssxref("text-align")}}</li> + <li>{{cssxref("text-align-last")}}</li> + <li>{{cssxref("text-indent")}}</li> + <li>{{cssxref("text-justify")}}</li> + <li>{{cssxref("text-size-adjust")}}</li> + <li>{{cssxref("text-transform")}}</li> + <li>{{cssxref("white-space")}}</li> + <li>{{cssxref("word-break")}}</li> + <li>{{cssxref("word-spacing")}}</li> +</ul> +</div> + +<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('CSS Logical Properties')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>텍스트 방향성에 독립된 일부 속성 갱신.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_text_decoration/index.html b/files/ko/web/css/css_text_decoration/index.html new file mode 100644 index 0000000000..e01c36d116 --- /dev/null +++ b/files/ko/web/css/css_text_decoration/index.html @@ -0,0 +1,69 @@ +--- +title: CSS Text Decoration +slug: Web/CSS/CSS_Text_Decoration +tags: + - CSS + - CSS Text Decoration + - Overview + - Reference +translation_of: Web/CSS/CSS_Text_Decoration +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Text Decoration</strong>은 밑줄, 텍스트 그림자 및 강조 표시 등 텍스트 장식에 관련된 기능을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("letter-spacing")}}</li> + <li>{{cssxref("text-align")}}</li> + <li>{{cssxref("text-decoration")}}</li> + <li>{{cssxref("text-decoration-color")}}</li> + <li>{{cssxref("text-decoration-line")}}</li> + <li>{{cssxref("text-decoration-style")}}</li> + <li>{{cssxref("text-emphasis")}}</li> + <li>{{cssxref("text-emphasis-color")}}</li> + <li>{{cssxref("text-emphasis-position")}}</li> + <li>{{cssxref("text-emphasis-style")}}</li> + <li>{{cssxref("text-indent")}}</li> + <li>{{cssxref("text-rendering")}}</li> + <li>{{cssxref("text-shadow")}}</li> + <li>{{cssxref("text-transform")}}</li> + <li>{{cssxref("white-space")}}</li> + <li>{{cssxref("word-spacing")}}</li> +</ul> +</div> + +<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 Text Decoration')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<div id="compat-mobile"> </div> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("backface-visibility")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("perspective-origin")}}</li> + <li>{{cssxref("rotate")}}</li> + <li>{{cssxref("scale")}}</li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("transform-box")}}</li> + <li>{{cssxref("transform-origin")}}</li> + <li>{{cssxref("transform-style")}}</li> + <li>{{cssxref("translate")}}</li> +</ul> +</div> + +<h3 id="Data_types">Data types</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<transform-function>")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt> + <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd> +</dl> + +<h2 id="Specifications">Specifications</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('CSS3 Transforms') }}</td> + <td>{{ Spec2('CSS3 Transforms') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> 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 +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS 변형</strong>(transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 본 가이드는 변형 사용법의 기초를 제시합니다.</p> + +<p>CSS 변형은 HTML 요소에 선형 아핀 변형(affine linear transformation)을 적용하는 여러 개의 CSS 속성을 조합해 구현합니다. 변형은 평면과 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함합니다.</p> + +<div class="warning"> +<p><a href="/ko/docs/Web/CSS/CSS_Box_Model">박스 모델</a>에 따라 배치된 요소만 <code>transform</code>을 적용할 수 있습니다. 한 가지 예를 들자면, <code>display: block</code>속성을 가진 요소는 박스 모델을 따릅니다. </p> +</div> + +<h2 id="CSS_변형_속성">CSS 변형 속성</h2> + +<p>CSS 변형을 정의할 때 중요한 두 가지 속성은 {{cssxref("transform")}}과 {{cssxref("transform-origin")}}입니다.</p> + +<dl> + <dt>{{cssxref("transform-origin")}}</dt> + <dd>원점의 위치를 지정합니다. 기본값은 요소의 중심이며 변경할 수 있습니다. 회전, 확대, 비틀기 등 하나의 점을 기준으로 하는 변형에서 사용합니다.</dd> + <dt>{{cssxref("transform")}}</dt> + <dd>요소에 적용할 변형을 지정합니다. 여러 개의 변형 목록을 공백으로 구분하여 대입하면 순차적으로 합성한 결과물을 적용합니다. 합성은 오른쪽부터 왼쪽으로 진행합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<p>다음 이미지는 변형하지 않은 MDN 로고입니다.</p> + +<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"></p> + +<h3 id="회전">회전</h3> + +<p>MDN 로고를 90도 회전합니다.</p> + +<pre class="brush: html notranslate"><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"></pre> + +<p>{{EmbedLiveSample('회전', 'auto', 240) }}</p> + +<h3 id="비틀고_옮기기">비틀고 옮기기</h3> + +<p>MDN 로고를 10도 비틀고 X축으로 150픽셀 옮깁니다.</p> + +<pre class="brush: html notranslate"><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"></pre> + +<p>{{EmbedLiveSample('비틀고_옮기기') }}</p> + +<h2 id="3D_전용_CSS_속성">3D 전용 CSS 속성</h2> + +<p>3D 공간에서의 CSS 변환은 좀 더 복잡합니다. 우선 원근감을 부여해 3D 공간을 설정한 후에, 2D 요소가 그 안에서 어떻게 행동할지 설정해야 합니다..</p> + +<h3 id="원근">원근</h3> + +<p>처음으로 정할 항목은 {{cssxref("perspective")}}입니다. 우리가 입체라고 느낄 수 있는 건 원근감 덕분입니다. 요소가 관찰자에서 멀어질 수록 더 작게 보입니다.</p> + +<p>{{page("/ko/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}</p> + +<p>다음으로는 {{cssxref("perspective-origin")}} 속성으로 관찰자의 위치를 정해야 합니다. 기본값은 중앙으로, 언제나 충분한 위치는 아닙니다.</p> + +<p>{{page("/ko/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}</p> + +<p>모든 과정을 마쳤다면 3D 공간의 요소를 작업할 수 있습니다.</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using device orientation with 3D Transforms</a></li> +</ul> diff --git a/files/ko/web/css/css_transitions/index.html b/files/ko/web/css/css_transitions/index.html new file mode 100644 index 0000000000..e32bb60c42 --- /dev/null +++ b/files/ko/web/css/css_transitions/index.html @@ -0,0 +1,59 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - CSS Transitions + - Overview + - Reference +translation_of: Web/CSS/CSS_Transitions +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Transitions</strong>는 특정 CSS 속성의 값을 점진적으로 바꿀 수 있는 CSS 모듈입니다. 타이밍 함수, 시간 등 여러 속성을 통해 값이 바뀌는 방식을 조절할 수 있습니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("transition")}}</li> + <li>{{cssxref("transition-delay")}}</li> + <li>{{cssxref("transition-duration")}}</li> + <li>{{cssxref("transition-property")}}</li> + <li>{{cssxref("transition-timing-function")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="/ko/docs/Web/Guide/CSS/Using_CSS_transitions">CSS 트랜지션 사용하기</a></dt> + <dd>CSS 트랜지션을 사용하는 법이 단계별로 적혀있습니다. 각각의 CSS 트랜지션 속성의 설명과, 서로 합치면 어떻게 동작하는지 설명합니다.</dd> +</dl> + +<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('CSS3 Transitions')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Animations">CSS Animations</a>를 사용하면 값의 전환을 CSS Transitions보다 더 세밀하게 조절할 수 있습니다.</li> +</ul> diff --git a/files/ko/web/css/css_transitions/using_css_transitions/index.html b/files/ko/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..c81a169965 --- /dev/null +++ b/files/ko/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1058 @@ +--- +title: CSS 트랜지션 사용하기 +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +tags: + - Advanced + - CSS + - CSS Transitions + - Guide +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS 트랜지션</strong>은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.</p> + +<p>두 상태 사이의 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.</p> + +<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p> + +<p>CSS transitions는 여러분이 <span style="line-height: 1.5;">(명시적으로 목록을 작성해서) </span><span style="line-height: 1.5;">어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) </span>트랜지션을<span style="line-height: 1.5;"> 얼마나 지속할지, 그리고 (</span><span style="line-height: 1.5;">예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 </span><span style="line-height: 1.5;">타이밍 함수를 정의해서) 어떻게 </span><span style="line-height: 1.5;">트랜지션을</span><span style="line-height: 1.5;"> 실행하는지 </span><span style="line-height: 1.5;">결정하게 합니다.</span></p> + +<h2 id="애니메이션_가능한_CSS_속성은">애니메이션 가능한 CSS 속성은?</h2> + +<p><span style="line-height: 1.5;">웹 작성자는 어떤 속성을 어떤 방식으로 움직일지를 정의할 수 있습니다. 이것은 복잡한 </span>트랜지션<span style="line-height: 1.5;">을 생성할 수 있게 합니다. 어떤 속성은 움직이게 하는 것이 말이 되지 않으므로, </span><a href="/en-US/docs/CSS/CSS_animated_properties" style="line-height: 1.5;" title="/en-US/docs/">애니메이션 가능한 속성의 집합</a><span style="line-height: 1.5;">은 유한한 집합으로 제한됩니다.</span></p> + +<div class="note">노트: 애니메이션 가능한 속성의 집합은 변할 수 있습니다. 개발자는 주의해서 진행해야 합니다.</div> + +<p class="note">또한, <span style="line-height: 1.5;">종종 auto 값은</span><span style="line-height: 1.5;"> 매우 복잡한 경우입니다. 스펙은 그러한 어떤 값에서 시작하고 끝나도록 움직이도록 요구하지 않습니다. Gecko 기반의 유저 에이전트처럼 몇몇은 이 요구사항을 구현했고, WebKit 기반의 유저 에이전트 같은 다른 것들은 덜 엄격합니다. 애니메이션에 auto를 사용하면 </span><span style="line-height: 1.5;">이는 브라우저와 버전에 따라 </span><span style="line-height: 1.5;">예상하지 못한 결과를 초래할 수 있으며 피해야 합니다.</span></p> + +<h3 id="다수의_애니메이션이_적용된_속성_예제">다수의 애니메이션이 적용된 속성 예제</h3> + +<h4 id="HTML_내용">HTML 내용</h4> + +<pre class="brush: html; highlight:[3]"><body> + <p>아래 박스는 width, height, background-color, transform을 위한 트랜지션을 결합합니다. 박스 위에 마우스를 올려 속성들의 애니메이션을 보세요.</p> + <div class="box"></div> +</body></pre> + +<h4 id="CSS_내용">CSS 내용</h4> + +<pre class="brush: css; highlight:[8,9]">.box { + border-style: solid; + border-width: 1px; + display: block; + width: 100px; + height: 100px; + background-color: #0000FF; + -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s; + transition:width 2s, height 2s, background-color 2s, transform 2s; +} +.box:hover { + background-color: #FFCCCC; + width:200px; + height:200px; + -webkit-transform:rotate(180deg); + transform:rotate(180deg); +} + +</pre> + +<p>{{ EmbedLiveSample('%EB%8B%A4%EC%88%98%EC%9D%98_%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EC%9D%B4_%EC%A0%81%EC%9A%A9%EB%90%9C_%EC%86%8D%EC%84%B1_%EC%98%88%EC%A0%9C', '600', '300', '', 'Web/Guide/CSS/Using_CSS_transitions') }}</p> + +<h2 id="트랜지션_정의에_사용한_CSS_속성">트랜지션 정의에 사용한 CSS 속성</h2> + +<p>CSS 트랜지션은 단축(shorthand) 속성 {{cssxref("transition")}}을 사용하여 제어합니다. 이것은 트랜지션을 설정하는 가장 좋은 방법입니다. 파라미터 목록의 길이가 싱크가 맞지 않는 것을 피하기가 더 쉬워지기 때문입니다. 싱크가 맞지 않으면 CSS를 디버그하는데 많은 시간을 들여야 해서 크게 좌절할 수 있습니다.</p> + +<p>여러분은 아래의 서브 속성으로 트랜지션의 개별 컴포넌트를 제어할 수 있습니다:</p> + +<p><strong>(이 트랜지션은 단지 예제를 목적으로 계속해서 루프를 돕니다. 그리고 CSS <code>transition들은 시작에서 종료까지 어떤 속성의 변화만을 시각화합니다. 그 루프를 시각화하려면 </code>CSS <code><a href="/en-US/docs/CSS/animation" title="/en-US/docs/CSS/animation">animation</a> 속성을 살펴보세요.</code>)</strong></p> + +<dl> + <dt>{{ cssxref("transition-property") }}</dt> + <dd>트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다. 또한, 다른 모든 속성에 대한 변화는 보통 때와 같이 즉시 일어납니다.</dd> + <dt>{{ cssxref("transition-duration") }}</dt> + <dd>트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다. + <div> + <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 0.5s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:0.5s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:0.5s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:0.5s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transformv color; + transition-duration:0.5s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div> + </div> + + <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 1s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top -webkit-transform color; + -webkit-transition-duration:1s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform color; + transition-duration:1s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; + -webkit-transition-duration:1s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:1s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_1s",275,150)}}</div> + </div> + + <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 2s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:2s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:2s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_2s",275,150)}}</div> + </div> + + <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-duration: 4s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:4s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:4s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("duration_4s",275,150)}}</div> + </div> + </div> + </dd> + <dt>{{ cssxref("transition-timing-function") }}</dt> + <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. <em>Timing functions</em>는 트랜지션의 중간값을 계산하는 방법을 결정합니다. 대부분의 <a href="/en-US/docs/CSS/timing-function" title="/en-US/docs/CSS/timing-function">타이밍 함수</a>는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있습니다. <a href="http://easings.net/" title="http://easings.net/">Easing Functions Cheat Sheet</a>에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있습니다. + <div class="cleared"> + <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: ease</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div> + </div> + + <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: linear</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div> + </div> + + <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: step-end</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: step-end; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: step-end; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: step-end; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: step-end; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div> + </div> + + <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-timing-function: steps(4, end)</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: steps(4, end); + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: steps(4, end); +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: steps(4, end); + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: steps(4, end); +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div> + </div> + </div> + </dd> + <dt>{{ cssxref("transition-delay") }}</dt> + <dd>속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다. + <div> + <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 0.5s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:0.5s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:0.5s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> + </div> + + <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 1s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:1s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:1s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_1s",275,150)}}</div> + </div> + + <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 2s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:2s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:2s; + transition-timing-function: linear; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_2s",275,150)}}</div> + </div> + + <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> + <p><code>transition-delay: 4s</code></p> + + <div style="display: none;"> + <pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + + <pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:4s; + transition-timing-function: ease-in-out; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:4s; + transition-timing-function: ease-in-out; +} +</pre> + + <pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> + </div> + + <div>{{EmbedLiveSample("delay_4s",275,150)}}</div> + </div> + </div> + </dd> +</dl> + +<p>다음과 같이 단축 CSS 문법을 사용합니다.</p> + +<pre class="brush:css;">div { + transition: <property> <duration> <timing-function> <delay>; +}</pre> + +<h2 id="트랜지션_완료_감지하기">트랜지션 완료 감지하기</h2> + +<p>트랜지션을 완료하면 발생하는 단일 이벤트가 있습니다. 모든 표준을 따르는 브라우저에서 그 이벤트는 <code>transitionend이며, </code>WebKit에서는 <code>webkitTransitionEnd입니다. 자세한 내용은 맨 아래의 호환성 테이블을 참고하세요. </code><code>transitionend 이벤트는 두 속성을 제공합니다.</code></p> + +<dl> + <dt><code>propertyName</code></dt> + <dd>트랜지션을 완료한 CSS 속성의 이름을 나타내는 문자열</dd> + <dt><code>elapsedTime</code></dt> + <dd>이벤트가 발생한 시점에 해당 트랜지션이 진행된 시간을 초로 나타내는 실수<span style="line-height: 1.5;">. 이 값은 {{ cssxref("transition-delay") }} 값에 영향을 받지 않습니다.</span></dd> +</dl> + +<p>평소대로 {{ domxref("element.addEventListener()") }} 메소드를 사용하여 이 이벤트를 모니터링할 수 있습니다.</p> + +<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true); +</pre> + +<div class="note"><strong>노트: </strong>트랜지션을 중단하면 <code style="font-size: 14px;">transitionend</code><span style="line-height: 1.5;"> 이벤트는 </span><span style="line-height: 1.5em;">발생하지 않습니다. 트랜지션을 완료하기 전에 애니메이션하고 있는 속성의 값이 바뀌기 때문입니다.</span></div> + +<h2 id="속성값_목록이_다른_개수를_가진_경우">속성값 목록이 다른 개수를 가진 경우</h2> + +<p>어떤 속성의 값 목록이 다른 것보다 짧다면, 일치되도록 그 값을 반복합니다. 예를 들면,</p> + +<pre class="brush: css">div { + transition-property: opacity, left, top, height; + transition-duration: 3s, 5s; +} +</pre> + +<p>위는 아래와 같이 처리합니다.</p> + +<pre class="brush: css">div { + transition-property: opacity, left, top, height; + transition-duration: 3s, 5s, 3s, 5s; +}</pre> + +<p>비슷하게, 어떤 속성의 값 목록이 {{ cssxref("transition-property") }} 목록보다 길다면, 그것은 끝을 잘라냅니다. 그래서, 아래의 CSS가 있다면,</p> + +<pre class="brush: css">div { + transition-property: opacity, left; + transition-duration: 3s, 5s, 2s, 1s; +}</pre> + +<p>위를 아래와 같이 해석합니다.</p> + +<pre class="brush: css">div { + transition-property: opacity, left; + transition-duration: 3s, 5s; +}</pre> + +<h2 id="간단한_예제">간단한 예제</h2> + +<p>이 예제는 사용자가 마우스를 해당 요소 위에 올려놓고 애니메이션 효과가 시작할 때까지 2초의 딜레이가 있는 4초짜리 폰트 크기 트랜지션을 수행합니다.</p> + +<pre class="brush: css">#delay1 { + position: relative; + transition-property: font-size; + transition-duration: 4s; + transition-delay: 2s; + font-size: 14px; +} + +#delay1:hover { + transition-property: font-size; + transition-duration: 4s; + transition-delay: 2s; + font-size: 36px; +} +</pre> + +<h2 id="메뉴_하이라이팅에_트랜지션_사용">메뉴 하이라이팅에 트랜지션 사용</h2> + +<p>CSS의 흔한 사용은 <span style="line-height: 1.5;">사용자가 마우스 커서를 메뉴 위에 올려놓을 때 그 메뉴 </span><span style="line-height: 1.5;">아이템을 하이라이팅하는 것입니다. 트랜지션을 사용하여 효과를 훨씬 더 매력적으로 만들 수 있습니다.</span></p> + +<p>코드 스니핏(snippets, 역자주: 재활용이 가능한 소스 조각)을 보기 전에, <span style="line-height: 1.5;">(여러분의 브라우저가 트랜지션을 지원한다고 가정하면) </span><a class="external" href="/samples/cssref/transitions/sample2" style="line-height: 1.5;" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/">라이브 데모</a><span style="line-height: 1.5;">를 보고 싶을지도 모르겠습니다. 그것이 사용한 </span><a class="external" href="/samples/cssref/transitions/sample2/transitions.css" style="line-height: 1.5;" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css">CSS를 직접</a> <span style="line-height: 1.5;">볼 수도 있습니다.</span></p> + +<p>우선 HTML을 사용하여 메뉴를 설정합니다.</p> + +<pre class="brush: html"><div class="sidebar"> + <p><a class="menuButton" href="home">Home</a></p> + <p><a class="menuButton" href="about">About</a></p> + <p><a class="menuButton" href="contact">Contact Us</a></p> + <p><a class="menuButton" href="links">Links</a></p> +</div> +</pre> + +<p>그리고 우리 메뉴의 모습과 느낌(look and feel)을<span style="line-height: 1.5;"> CSS로 만듭니다. 관련 부분이 여기 있습니다.</span></p> + +<pre class="brush: css">.menuButton { + position: relative; + transition-property: background-color, color; + transition-duration: 1s; + transition-timing-function: ease-out; + text-align: left; + background-color: grey; + left: 5px; + top: 5px; + height: 26px; + color: white; + border-color: black; + font-family: sans-serif; + font-size: 20px; + text-decoration: none; + box-shadow: 2px 2px 1px black; + padding: 2px 4px; + border: solid 1px black; +} + +.menuButton:hover { + position: relative; + transition-property: background-color, color; + transition-duration: 1s; + transition-timing-function: ease-out; + background-color:white; + color:black; + box-shadow: 2px 2px 1px black; +} +</pre> + +<p>이 CSS는 그 요소가 <span style="line-height: 1.5;">{{ cssxref(":hover") }} 상태일 때 배경과</span><span style="line-height: 1.5;"> 텍스트 색상 모두를 변경하면서 메뉴의 모습을 설정합니다.</span></p> + +<p>그 효과를 장황하게 설명하는 대신, <a class="external" href="/en/CSS/CSS_transitions#Browser_compatibility" style="line-height: 1.5;" title="en/CSS/CSS_transitions#Browser_compatibility">브라우저가 트랜지션을 지원한다면, </a><a href="/samples/cssref/transitions/sample2" style="line-height: 1.5;" title="https://developer.mozilla.org/samples/cssref/transitions/sample2">라이브 샘플을 살펴보세요</a><span style="line-height: 1.5;">.</span></p> + +<h2 id="트랜지션을_이용하여_JavaScript_기능_부드럽게_하기">트랜지션을 이용하여 JavaScript 기능 부드럽게 하기</h2> + +<p>트랜지션은 JavaScript 기능에 아무것도 하지 않고 훨씬 더 부드럽게 보이도록 하는 훌륭한 도구입니다. 아래 예제를 보세요.</p> + +<pre class="brush: html"><p>Click anywhere to move the ball</p> +<div id="foo"></div> +</pre> + +<p>JavaScript를 사용하여 공을 어떤 위치로 움직이는 효과가 일어나게 할 수 있습니다.</p> + +<pre class="brush: js">var f = document.getElementById('foo'); +document.addEventListener('click', function(ev){ + f.style.left = (ev.clientX-25)+'px'; + f.style.top = (ev.clientY-25)+'px'; +},false); +</pre> + +<p>추가 노력 없이 <span style="line-height: 1.5;">CSS로 </span><span style="line-height: 1.5;">이것을 부드럽게 할 수 있습니다. 단순히 그 요소에 트랜지션을 추가하면 어떠한 변화도 부드럽게 일어날 것입니다.</span></p> + +<pre class="brush: css">p { + padding-left: 60px; +} + +#foo { + border-radius: 50px; + width: 50px; + height: 50px; + background: #c00; + position: absolute; + top: 0; + left: 0; + transition: all 1s; +} +</pre> + +<p>여기에서 확인할 수 있습니다. <a class="external" href="http://jsfiddle.net/RwtHn/5/" title="http://jsfiddle.net/RwtHn/5/">http://jsfiddle.net/RwtHn/5/</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('CSS3 Transitions', '', '') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<div id="compat-mobile"> </div> + +<ul> + <li><span class="external"><a href="http://techstream.org/Web-Design/Dock-Menu-with-CSS3" title="CSS3 Dock Menu using CSS transitions">CSS3 Dock Menu</a> using CSS transitions</span></li> + <li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li> +</ul> diff --git a/files/ko/web/css/css_types/index.html b/files/ko/web/css/css_types/index.html new file mode 100644 index 0000000000..a819349900 --- /dev/null +++ b/files/ko/web/css/css_types/index.html @@ -0,0 +1,100 @@ +--- +title: CSS 자료형 +slug: Web/CSS/CSS_Types +tags: + - CSS + - CSS Data Type + - Overview + - Reference + - 자료형 +translation_of: Web/CSS/CSS_Types +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary"><strong>CSS 자료형</strong>은 CSS 속성과 함수가 받아들이는, 키워드와 단위를 포함한 일반적인 값을 정의합니다.</span> 자료형은 <a href="https://www.w3.org/TR/css3-values/#component-types">Component value type</a>의 특별한 종류입니다.</p> + +<p>형식 구문에서 자료형을 나타낼 땐 부등호 "<"와 ">"로 감싸서 표기합니다.</p> + +<h2 id="참고서">참고서</h2> + +<div class="index"> +<ul> + <li>{{cssxref("<angle>")}}</li> + <li>{{cssxref("<angle-percentage>")}}</li> + <li>{{cssxref("<angular-color-hint>")}}</li> + <li>{{cssxref("<angular-color-stop>")}}</li> + <li>{{cssxref("<attr-fallback>")}}</li> + <li>{{cssxref("<attr-name>")}}</li> + <li>{{cssxref("<basic-shape>")}}</li> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("<calc-product>")}}</li> + <li>{{cssxref("<calc-sum>")}}</li> + <li>{{cssxref("<calc-value>")}}</li> + <li>{{cssxref("<color>")}}</li> + <li>{{cssxref("<color-stop>")}}</li> + <li>{{cssxref("<color-stop-angle>")}}</li> + <li>{{cssxref("<counter-style>")}}</li> + <li>{{cssxref("<custom-ident>")}}</li> + <li>{{cssxref("<dimension>")}}</li> + <li>{{cssxref("<filter-function>")}}</li> + <li>{{cssxref("<flex>")}}</li> + <li>{{cssxref("<frequency>")}}</li> + <li>{{cssxref("<frequency-percentage>")}}</li> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("<ident>")}}</li> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("<integer>")}}</li> + <li>{{cssxref("<length>")}}</li> + <li>{{cssxref("<length-percentage>")}}</li> + <li>{{cssxref("<number>")}}</li> + <li>{{cssxref("<number-percentage>")}}</li> + <li>{{cssxref("<percentage>")}}</li> + <li>{{cssxref("<position>")}}</li> + <li>{{cssxref("<quote>")}}</li> + <li>{{cssxref("<ratio>")}}</li> + <li>{{cssxref("<resolution>")}}</li> + <li>{{cssxref("<shape-box>")}}</li> + <li>{{cssxref("<shape-radius>")}}</li> + <li>{{cssxref("<string>")}}</li> + <li>{{cssxref("<time>")}}</li> + <li>{{cssxref("<time-percentage>")}}</li> + <li>{{cssxref("<timing-function>")}}</li> + <li>{{cssxref("<toggle-value>")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li>{{cssxref("<type-or-unit>")}}</li> + <li>{{cssxref("<url>")}}</li> + <li>{{cssxref("<url-modifier>")}}</li> + <li>{{cssxref("<zero>")}}</li> +</ul> +</div> + +<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('CSS4 Values') }}</td> + <td>{{ Spec2('CSS4 Values') }}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Values') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Values_and_Units">CSS 단위와 값</a></li> + <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 단위와 값 소개</a></li> +</ul> diff --git a/files/ko/web/css/css_variables/index.html b/files/ko/web/css/css_variables/index.html new file mode 100644 index 0000000000..56efa433e7 --- /dev/null +++ b/files/ko/web/css/css_variables/index.html @@ -0,0 +1,37 @@ +--- +title: CSS Custom Properties for Cascading Variables +slug: Web/CSS/CSS_Variables +translation_of: Web/CSS/CSS_Variables +--- +<div>{{cssref}}</div> + +<p><strong>CSS Custom Properties for Cascading Variables</strong></p> + +<p>캐스케이딩 변수를 위한 CSS 사용자지정 속성은, 반복적으로 사용가능한 사용자지정 속성을 만들 수 있게 해주는 모듈입니다.</p> + +<h2 id="CSS_속성">CSS 속성</h2> + +<div class="index"> +<ul> + <li>{{cssxref("--*")}}</li> +</ul> +</div> + +<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("CSS3 Variables")}}</td> + <td>{{Spec2("CSS3 Variables")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_writing_modes/index.html b/files/ko/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..a69bc088cc --- /dev/null +++ b/files/ko/web/css/css_writing_modes/index.html @@ -0,0 +1,57 @@ +--- +title: CSS Writing Modes +slug: Web/CSS/CSS_Writing_Modes +tags: + - CSS + - CSS Writing Modes + - Overview + - Reference +translation_of: Web/CSS/CSS_Writing_Modes +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Writing Modes</strong>는 다양한 국제 쓰기 모드를 정의하는 CSS 모듈입니다, 좌에서 우(가령 Latin 및 Indic 스크립트에 사용됨), 우에서 좌(가령 Hebrew 또는 Arabic 스크립티에 사용됨), 양방향(좌에서 우 및 우에서 좌 스크립트를 섞을 때 사용됨) 및 세로(가령 일부 Asian 스크립트에 사용됨) 등.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("glyph-orientation-horizontal")}}</li> + <li>{{cssxref("text-combine-upright")}}</li> + <li>{{cssxref("text-orientation")}}</li> + <li>{{cssxref("unicode-bidi")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> +</div> + +<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 Writing Modes')}}</td> + <td>{{Spec2('CSS3 Writing Modes')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_단위와_값/index.html b/files/ko/web/css/css_단위와_값/index.html new file mode 100644 index 0000000000..94d8ceabd6 --- /dev/null +++ b/files/ko/web/css/css_단위와_값/index.html @@ -0,0 +1,497 @@ +--- +title: CSS 단위와 값 +slug: Web/CSS/CSS_단위와_값 +tags: + - CSS + - 값과 단위 + - 안내서 + - 참조 +translation_of: Web/CSS/CSS_Values_and_Units +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary">모든 CSS 선언은 속성 / 값 쌍을 포함합니다. 속성에 따라 값은 하나의 정수 또는 키워드, 여러 개의 키워드, 단위가 있거나 없는 값의 나열이 될 수 있습니다. CSS 속성에 허용되는 공통적인 자료형(단위와 값)의 집합이 있습니다.</span> 아래는 이들 자료형 대부분에 대한 개요입니다. 더 자세한 정보를 보려면 각 자료형의 페이지를 참고하세요.</p> + +<h2 id="텍스트_자료형">텍스트 자료형</h2> + +<ul> + <li>{{cssxref("<custom-ident>")}}</li> + <li><code><ident></code>로서 미리 정의된 키워드</li> + <li>{{cssxref("<string>")}}</li> + <li>{{cssxref("<url>")}}</li> +</ul> + +<p>텍스트 자료형은 <code><string></code>이거나, 연속된 문자를 따옴표로 감싼 것, 또는 따옴표로 감싸지 않은 "CSS 식별자"인 <code><ident></code>가 될 수 있습니다. <code><string></code>은 작은따옴표 또는 큰따옴표로 감싸져야 합니다. 사양에서 <code><ident></code> 또는 <code><custom-ident></code>의 목록에 포함되어 있는 CSS 식별자는 따옴표로 감싸서는 안 됩니다.</p> + +<p>CSS 사양에서는 웹 개발자가 정의할 수 있는 값들, 가령 키프레임 애니메이션이나 서체 가족의 이름, 그리드 영역 같은 것들을 {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}}, 또는 둘 다로서 목록에 표시합니다.</p> + +<p>사용자가 정의한 텍스트 값을 따옴표로 감싸는 것과 감싸지 않는 것 모두가 허용되는 경우, 사양에서는 <code><custom-ident> | <string></code>로서 이를 목록에 표시하며, 이는 따옴표가 선택 사항임을 의미합니다. 애니메이션 이름이 바로 그런 경우입니다:</p> + +<pre class="brush: css notranslate">@keyframe validIdent { + /* keyframes go here */ +} +@keyframe 'validString' { + /* keyframes go here */ +}</pre> + +<p>몇몇 텍스트 값은 따옴표로 감싸지 않는 경우 유효하지 않습니다. 예를 들어, {{cssxref("grid-area")}}의 값은 <code><custom-ident></code>일 수 있으므로, 만약 <code>content</code>라는 이름의 그리드 영역이 있을 때 아래처럼 이를 따옴표 없이 사용할 수 있습니다:</p> + +<pre class="brush: css notranslate">.item { + grid-area: content; +} +</pre> + +<p>반면, {{cssxref("<string>")}}인 자료형의 경우, 예를 들어 {{cssxref("content")}} 속성의 문자열 값은 따옴표로 감싸져야 합니다:</p> + +<pre class="brush: css notranslate">.item::after { + content: "This is my content."; +} +</pre> + +<p>일반적으로 이모지를 포함해 여러분이 원하는 아무 이름이나 만들 수 있지만, <code>none</code>, <code>unset</code>, <code>initial</code>, <code>inherit</code>, 숫자 또는 2개의 대시로 시작하는 이름은 식별자가 될 수 없으며, 대부분의 경우 미리 정의된 다른 CSS 키워드와 동일한 이름을 사용하고 싶지는 않을 것입니다. 더 자세한 내용을 보려면 {{cssxref("<custom-ident>")}}와 {{cssxref("<string>")}}의 참조 페이지를 확인하세요.</p> + +<h3 id="미리_정의된_키워드_값">미리 정의된 키워드 값</h3> + +<p>미리 정의된 키워드 값은 특정 속성의 사양에 정의된 텍스트 값입니다. 이 키워드들은 CSS 식별자이기도 해서 따옴표 없이 사용됩니다.</p> + +<p>CSS 사양 또는 MDN의 속성 페이지에서 CSS 속성의 값에 대한 문법을 보면, 허용되는 키워드가 아래와 같은 형태로 나열됩니다. 아래는 {{cssxref("float")}}에 허용되는 미리 정의된 키워드 값입니다.</p> + +<pre class="syntaxbox notranslate">left <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre> + +<p>이런 값들은 따옴표 없이 사용됩니다:</p> + +<pre class="brush: css notranslate"><code>.box { + float: left; +} +</code></pre> + +<h3 id="CSS_전체에_공유되는_값">CSS 전체에 공유되는 값</h3> + +<p>한 속성의 사양의 일부로서 존재하는 미리 정의된 키워드와 더불어, 모든 CSS 속성은 CSS 전체에 걸쳐 공유되는 값인 {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}을 받아들일 수 있으며, 이들은 기본 동작을 명시적으로 지정합니다.</p> + +<p><code>initial</code> 키워드는 속성의 초기 값으로 지정된 값을 표현합니다. <code>inherit</code> 키워드는 해당 요소의 부모에 적용된 동일 속성의 계산값을 표현하며, 해당 속성이 상속된다고 가정합니다.</p> + +<p><code>unset</code> 키워드는 <code>inherit</code> 또는 <code>initial</code>처럼 동작하는데, 해당 속성이 상속되는 경우 전자, 아닌 경우 후자로 동작합니다.</p> + +<p>네번째 값으로 {{cssxref("revert")}}가 Cascade Level 4 사양에 추가되었지만, 지금은 브라우저 지원 상태가 좋지 않습니다.</p> + +<h3 id="URL">URL</h3> + +<p>{{cssxref("<url>")}} 자료형은 함수 표기법을 사용하며, 함수가 URL에 해당하는 <code><string></code>을 받는 형태입니다. 이것은 절대 URL 또는 상대 URL일 수 있습니다. 예를 들어, 배경 이미지를 넣고 싶을 때 다음 중 아무거나 사용할 수 있습니다.</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url("images/my-background.png"); +}</code> + +<code>.box { + background-image: url("https://www.exammple.com/images/my-background.png"); +}</code> +</pre> + +<p><code>url()</code> 의 매개변수는 따옴표로 감싸거나 감싸지 않을 수 있습니다. 감싸지 않는 경우, 이는 <code><url-token></code>으로 해석되어 특정 문자를 이스케이프하는 등의 추가적인 할 일이 생깁니다. 더 자세한 내용을 보려면 {{cssxref("<url>")}}를 확인하세요.</p> + +<h2 id="숫자_자료형">숫자 자료형</h2> + +<ul> + <li>{{cssxref("<integer>")}}</li> + <li>{{cssxref("<number>")}}</li> + <li>{{cssxref("<dimension>")}}</li> + <li>{{cssxref("<percentage>")}}</li> +</ul> + +<h3 id="정수">정수</h3> + +<p>정수는 1개 이상의 10진수 숫자(<code>0</code>부터 <code>9</code>)로, 예를 들어 <code>1024</code>나 <code>-55</code>가 이에 속합니다. 정수 앞에는 <code>+</code> 또는 <code>-</code> 기호를 덧붙일 수 있는데, 기호와 정수 사이에 공백이 없어야 합니다.</p> + +<h3 id="숫자">숫자</h3> + +<p>{{cssxref("<number>")}}는 실수를 나타내며, 소수점과 소수부분을 포함할 수도 있고 포함하지 않을 수도 있습니다. 예를 들어 <code>0.255</code>, <code>128</code>, <code>-1.2</code>가 이에 속합니다. 숫자 앞에도 <code>+</code>나 <code>-</code> 기호를 덧붙일 수 있습니다.</p> + +<h3 id="치수">치수</h3> + +<p>{{cssxref("<dimension>")}}은 <code><number></code>에 단위를 붙인 것으로, 예를 들면 <code>45deg</code>, <code>100ms</code>, <code>10px</code>가 이에 속합니다. 덧붙인 단위 식별자는 대소문자를 구별하지 않습니다. 숫자와 단위 식별자 사이에는 공백 또는 다른 문자가 들어갈 수 없습니다: 즉, <code>1 cm</code>는 유효하지 않습니다.</p> + +<p>CSS는 치수를 사용해 아래와 같은 것들을 표시합니다:</p> + +<ul> + <li>{{cssxref("<length>")}} (거리 단위)</li> + <li>{{cssxref("<angle>")}}</li> + <li>{{cssxref("<time>")}}</li> + <li>{{cssxref("<frequency>")}}</li> + <li>{{cssxref("<resolution>")}}</li> +</ul> + +<p>다음 절에서 이것들을 다룹니다.</p> + +<h4 id="거리_단위">거리 단위</h4> + +<p>거리 단위, 또는 길이가 값으로 허용되는 속성은 {{cssxref("<length>")}} 자료형으로 표시됩니다. CSS에는 2가지 종류의 길이가 있습니다: 상대적 길이와 절대적 길이입니다.</p> + +<p>상대적 길이 단위는 다른 무언가와 비교해 상대적인 길이를 나타냅니다. 예를 들어, <code>em</code>은 해당 요소의 폰트 크기에 상대적이며 <code>vh</code>는 뷰포트의 높이에 상대적입니다.</p> + +<table class="standard-table"> + <caption> + <h4 id="상대적_길이_단위들">상대적 길이 단위들</h4> + </caption> + <thead> + <tr> + <th scope="col">단위</th> + <th scope="col">비교의 대상</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>해당 요소의 폰트 크기</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>해당 요소의 폰트의 x높이</td> + </tr> + <tr> + <td><code>cap</code></td> + <td>해당 요소의 폰트의 대문자 높이(대문자의 공칭 높이)</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>해당 요소의 폰트의 좁은 문자가 평균적으로 나아가는 길이, “0” (ZERO, U+0030) 문자로 대표됨.</td> + </tr> + <tr> + <td><code>ic</code></td> + <td>해당 요소의 폰트의 전각 문자가 평균적으로 나아가는 길이, “水” (CJK 물 표의 문자, U+6C34) 문자로 대표됨.</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>루트 요소의 폰트 크기</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>해당 요소의 줄 높이</td> + </tr> + <tr> + <td><code>rlh</code></td> + <td>루트 요소의 줄 높이</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>뷰포트 너비의 1%</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>뷰포트 높이의 1%</td> + </tr> + <tr> + <td><code>vi</code></td> + <td>루트 요소의 인라인 축 방향으로 뷰포트 길이의 1%</td> + </tr> + <tr> + <td><code>vb</code></td> + <td>루트 요소의 블록 축 방향으로 뷰포트 길이의 1%</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>뷰포트의 길이 중 더 짧은 것의 1%</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>뷰포트의 길이 중 더 긴 것의 1%</td> + </tr> + </tbody> +</table> + +<p>절대적 길이 단위는 인치 또는 센티미터의 물리적 길이로 고정적입니다. 그래서 이 단위들의 다수는 인쇄물과 같은 고정된 크기의 매체로 출력되는 경우에 유용합니다. 예를 들어, <code>mm</code>는 물리적인 밀리미터, 즉 센티미터의 1/10입니다.</p> + +<table class="standard-table"> + <caption> + <h4 id="절대적_길이_단위">절대적 길이 단위</h4> + </caption> + <thead> + <tr> + <th scope="col">단위</th> + <th scope="col">이름</th> + <th scope="col">다음과 동일함</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>센티미터</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>밀리미터</td> + <td>1mm = 1cm의 1/10</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>쿼터-밀리미터</td> + <td>1Q = 1cm의 1/40</td> + </tr> + <tr> + <td><code>in</code></td> + <td>인치</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>피카</td> + <td>1pc = 1in의 1/16</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>포인트</td> + <td>1pt = 1in의 1/72</td> + </tr> + <tr> + <td><code>px</code></td> + <td>픽셀</td> + <td>1px = 1in의 1/96</td> + </tr> + </tbody> +</table> + +<p>길이 값을 포함할 때 길이가 <code>0</code>이면, 단위 식별자가 필요하지 않습니다. 그 외의 경우 단위 식별자가 필요합니다. 단위 식별자는 대소문자를 구별하지 않으며, 값의 숫자 부분 이후에 공백 없이 바로 나와야 합니다.</p> + +<h4 id="각도_단위">각도 단위</h4> + +<p>각도 값은 {{cssxref("<angle>")}} 자료형으로 표시되며 다음의 값이 허용됩니다:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">단위</th> + <th scope="col">이름</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>deg</code></td> + <td>도</td> + <td>360도가 완전한 원을 이룹니다.</td> + </tr> + <tr> + <td><code>grad</code></td> + <td>그라디안</td> + <td>400 그라디안이 완전한 원을 이룹니다.</td> + </tr> + <tr> + <td><code>rad</code></td> + <td>라디안</td> + <td>2π 라디안이 완전한 원을 이룹니다.</td> + </tr> + <tr> + <td><code>turn</code></td> + <td>턴</td> + <td>1턴이 완전한 원을 이룹니다.</td> + </tr> + </tbody> +</table> + +<h4 id="시간_단위">시간 단위</h4> + +<p>시간 단위는 {{cssxref("<time>")}} 자료형으로 표시됩니다. 시간 단위를 포함할 때는 단위 식별자인 <code>s</code> 또는 <code>ms</code>가 반드시 필요합니다. 아래의 값이 허용됩니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">단위</th> + <th scope="col">이름</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>s</code></td> + <td>초</td> + <td></td> + </tr> + <tr> + <td><code>ms</code></td> + <td>밀리초</td> + <td>1,000 밀리초는 1초와 같습니다.</td> + </tr> + </tbody> +</table> + +<h4 id="진동수_단위">진동수 단위</h4> + +<p>진동수 단위는 {{cssxref("<frequency>")}} 자료형으로 표시됩니다. 아래 값이 허용됩니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">단위</th> + <th scope="col">이름</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Hz</code></td> + <td>헤르츠</td> + <td>1초당 발생한 횟수를 나타냅니다.</td> + </tr> + <tr> + <td><code>kHz</code></td> + <td>킬로헤르츠</td> + <td>1 킬로헤르츠는 1000 헤르츠와 같습니다.</td> + </tr> + </tbody> +</table> + +<p><code>1Hz</code>, 또는 <code>1hz</code>, <code>1HZ</code>는 초당 진동수입니다.</p> + +<h4 id="해상도_단위">해상도 단위</h4> + +<p>해상도 단위는 {{cssxref("<resolution>")}}로 표시됩니다. 이것들은 스크린과 같은 그래픽 표시에서 CSS 인치당, 센티미터당, 픽셀당 몇 개의 점을 포함할 수 있는지를 나타냄으로써 점 1개의 크기를 표현합니다. 다음의 값이 허용됩니다:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">단위</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>dpi</code></td> + <td>인치당 점의 수.</td> + </tr> + <tr> + <td><code>dpcm</code></td> + <td>센티미터당 점의 수.</td> + </tr> + <tr> + <td><code>dppx</code>, <code>x</code></td> + <td>픽셀당 점의 수.</td> + </tr> + </tbody> +</table> + +<h3 id="퍼센트">퍼센트</h3> + +<p>{{cssxref("<percentage>")}}는 다른 값의 일부분을 표현하는 자료형입니다.</p> + +<p>퍼센트 값은 언제나 다른 양, 예컨대 길이와 같은 것에 상대적입니다. 퍼센트를 허용하는 속성은 그 퍼센트가 참조하는 양 또한 정의합니다. 이 양은 같은 요소가 갖는 다른 속성의 값이거나, 조상 요소가 갖는 속성의 값이거나, 이 요소를 포함하는 블록의 치수 등이 될 수 있습니다.</p> + +<p>예를 들면, 어떤 박스의 {{cssxref("width")}}를 퍼센트로 지정한 경우, 그 박스의 부모의 계산된 너비의 퍼센트를 참조합니다:</p> + +<pre class="brush: css notranslate">.box { + width: 50%; +}</pre> + +<h3 id="퍼센트와_치수_함께_사용하기">퍼센트와 치수 함께 사용하기</h3> + +<p>일부 속성은 두 자료형 중 하나를 선택해서, 예를 들면 <code><length></code> <strong>또는</strong> <code><percentage></code>를 골라서 치수를 지정할 수 있습니다. 이 경우 사양에는 허용되는 값이 {{cssxref("<length-percentage>")}}처럼 조합된 단위로 기술됩니다. 다음은 가능한 다른 조합입니다:</p> + +<ul> + <li>{{cssxref("<frequency-percentage>")}}</li> + <li>{{cssxref("<angle-percentage>")}}</li> + <li>{{cssxref("<time-percentage>")}}</li> +</ul> + +<h3 id="특별한_자료형_다른_사양에서_정의된_것들">특별한 자료형 (다른 사양에서 정의된 것들)</h3> + +<ul> + <li>{{cssxref("<color>")}}</li> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("<position>")}}</li> +</ul> + +<h4 id="색깔">색깔</h4> + +<p>{{cssxref("<color>")}} 값은 요소의 외관 색깔(예: 배경색)을 지정하며, <a href="https://drafts.csswg.org/css-color-3/">CSS Color Module</a>에 정의되어 있습니다.</p> + +<h4 id="이미지">이미지</h4> + +<p>{{cssxref("<image>")}} 값은 CSS에서 사용될 수 있는 다양한 종류의 이미지를 지정하며, <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a>에 정의되어 있습니다.</p> + +<h4 id="위치">위치</h4> + +<p>{{cssxref("<position>")}} 자료형은 배치 영역 안에서 객체의 2D 위치를, 예컨대 컨테이너 안에서 배경 이미지의 위치 같은 것을 정의합니다. 이 자료형은 {{cssxref("background-position")}}으로 해석되므로 <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders specification</a>에 명시되어 있습니다.</p> + +<h3 id="함수_표기법">함수 표기법</h3> + +<ul> + <li>{{cssxref("calc()")}}</li> + <li>{{cssxref("min", "min()")}}</li> + <li>{{cssxref("max", "max()")}}</li> + <li>{{cssxref("clamp", "clamp()")}}</li> + <li>{{cssxref("toggle", "toggle()")}}</li> + <li>{{cssxref("attr", "attr()")}}</li> +</ul> + +<p><a href="/en-US/docs/Web/CSS/CSS_Functionals">함수 표기법</a>은 더 복잡한 자료형을 표현하거나 CSS가 특별한 처리를 하도록 지시하는 자료형의 값입니다. 이 문법은 함수의 이름으로 시작해서 바로 왼쪽 괄호 <code>(</code>가 뒤따르고, 함수의 인자를 나열한 다음, 오른쪽 괄호 <code>)</code>로 끝납니다. 함수는 여러 개의 인자를 받을 수 있으며, CSS 속성 값과 비슷한 형식을 가집니다.</p> + +<p>공백 문자는 허용되지만, 괄호 안에서는 선택 사항입니다. (단 <code>min()</code>, <code>max()</code>, <code>clamp()</code> 함수 페이지의 주의 사항에서 공백 문자에 대한 내용을 확인하세요.)</p> + +<p><code>rgba()</code>와 같은 몇몇 레거시 함수 표기법이 콤마를 사용하지만, 일반적으로 콤마는 목록에서 아이템을 구분하기 위해 사용됩니다. 콤마가 인자를 구분하기 위해 사용된 경우, 콤마 전후의 공백 문자는 선택 사항입니다.</p> + +<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("CSS4 Values")}}</td> + <td>{{Spec2("CSS4 Values")}}</td> + <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code>, <code>rlh</code> 단위 추가.<br> + <code>min()</code>, <code>max()</code>, <code>clamp()</code> 함수 표기법 추가<br> + <code>toggle()</code> 추가</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Values")}}</td> + <td>{{Spec2("CSS3 Values")}}</td> + <td><code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>, <code>vmax</code>, <code>Q</code> 추가</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Colors")}}</td> + <td>{{Spec2("CSS4 Colors")}}</td> + <td><code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 함수에 콤마 없는 문법 추가. <code>rgb()</code>와 <code>hsl()</code>에 알파 값 허용하며 <code>rgba()</code>와 <code>hsla()</code>를 그것들의 (지원이 중단된) 별칭으로 전환.<br> + 색깔 키워드 <code>rebeccapurple</code> 추가. 4자리와 8자리의 16진수 색깔 값 추가, 마지막 숫자(들)이 알파 값을 의미함.<br> + <code>hwb()</code>, <code>device-cmyk()</code>, <code>color()</code> 함수 추가.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Colors")}}</td> + <td>{{Spec2("CSS3 Colors")}}</td> + <td>system-colors를 지원 중단으로 표시. SVG 색깔 추가. <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 함수 추가.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Images")}}</td> + <td>{{Spec2("CSS4 Images")}}</td> + <td> + <p><code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code> 추가</p> + </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Images")}}</td> + <td>{{Spec2("CSS3 Images")}}</td> + <td>이미지를 처음으로 정의함.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>첫번째 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Types">CSS의 기본 자료형</a></li> + <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 개론: 값과 단위</a></li> +</ul> diff --git a/files/ko/web/css/cursor/index.html b/files/ko/web/css/cursor/index.html new file mode 100644 index 0000000000..113920f9ee --- /dev/null +++ b/files/ko/web/css/cursor/index.html @@ -0,0 +1,315 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Property + - Reference + - Web +translation_of: Web/CSS/cursor +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>cursor</code></strong> 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">/* 키워드 값 */ +cursor: pointer; +cursor: auto; + +/* URL, 대체용 키워드 */ +cursor: url(hand.cur), pointer; + +/* URL과 좌표 및 대체 키워드 +crsor: url(cursor1.png) 4 12, auto; +cursor: url(cursor2.png) 2 2, pointer; + +/* 전역 값 */ +cursor: inherit; +cursor: initial; +cursor: unset; +</pre> + +<p><code>cursor</code> 속성은 쉼표로 구분한 0개 이상의 <code>{{anch("<url>")}}</code>과, 필수로 지정해야 하는 키워드 값으로 이루어집니다. 각각의 <code><url></code>은 이미지 파일을 가리켜야 합니다. 브라우저는 첫 번째 이미지를 불러오려 시도하고, 실패했을 땐 다음 이미지를, 모두 실패하거나 지정한 이미지가 처음부터 없었다면 키워드 값을 사용합니다.</p> + +<p><code><url></code>은 공백으로 구분한 숫자 쌍을 받을 수 있습니다. 두 숫자는 이미지의 좌상단 모서리를 기준으로, 커서가 상호작용하는 부분의 <a href="#<x><y>">x, y 좌표</a>를 나타냅니다.</p> + +<p>아래 예제는 <code><url></code> 값으로 이미지 두 개를 지정했고, 두 번째 이미지는 <code><x><y></code> 좌표도 설정했으며 모두 불러올 수 없으면 <code>progress</code> 키워드를 사용합니다.</p> + +<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><a id="<url>" name="<url>"><code id="<url>"><url></code></a></dt> + <dd>이미지 파일을 가리키는 <code>url(…)</code>, 또는 쉼표로 구분한 <code>url(…), url(…), …</code> 목록. 일부 커서 이미지를 사용할 수 없을 때를 대비해 여러 이미지를 지정할 수 있습니다. 이미지를 사용할 경우 URL이 아닌 값(하나 이상의 키워드 값)을 목록의 맨 뒤에 붙여야 합니다. <a href="/ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property"><code>cursor</code> 속성값으로 URL 사용하기</a>를 참고하세요.</dd> + <dt><a id="<x><y>" name="<x><y>"><code><x></code> <code><y></code></a> {{experimental_inline}}</dt> + <dd>xy 좌표. 32 미만의 {{cssxref("<number>")}}여야 합니다.</dd> + <dt><span id="Keyword values">키워드 값</span></dt> + <dd> + <p><em>행 위로 마우스를 올리면 현재 브라우저에서 보이는 모습을 확인할 수 있습니다.</em></p> + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">카테고리</th> + <th scope="col">CSS 값</th> + <th scope="col">예제</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr style="cursor: auto;"> + <th rowspan="3" scope="row">일반</th> + <td><code>auto</code></td> + <td></td> + <td>사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 <code>text</code>를 사용합니다.</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td> + <td>플랫폼에 따라 다른 기본 커서. 보통 화살표입니다.</td> + </tr> + <tr style="cursor: none;"> + <td><code>none</code></td> + <td></td> + <td>커서 없음.</td> + </tr> + <tr style="cursor: context-menu;"> + <th rowspan="5" scope="row" style="cursor: auto;">링크와 상태</th> + <td><code>context-menu</code></td> + <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td> + <td>콘텍스트 메뉴 사용 가능.</td> + </tr> + <tr style="cursor: help;"> + <td><code>help</code></td> + <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td> + <td>도움말 사용 가능.</td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td> + <td>링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다.</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td> + <td>프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (<code>wait</code>과 반대)</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td> + <td>프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (<code>progress</code>와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다.</td> + </tr> + <tr style="cursor: cell;"> + <th rowspan="4" scope="row" style="cursor: auto;">선택</th> + <td><code>cell</code></td> + <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td> + <td>표의 칸이나 여러 칸을 선택할 수 있음.</td> + </tr> + <tr style="cursor: crosshair;"> + <td><code>crosshair</code></td> + <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td> + <td>십자 커서. 종종 비트맵 선택에 사용합니다.</td> + </tr> + <tr style="cursor: text;"> + <td><code>text</code></td> + <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td> + <td>글씨 선택 가능. 보통 I빔 모양입니다.</td> + </tr> + <tr style="cursor: vertical-text;"> + <td><code>vertical-text</code></td> + <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td> + <td>세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다.</td> + </tr> + <tr style="cursor: alias;"> + <th rowspan="7" scope="row" style="cursor: auto;">드래그 앤 드롭</th> + <td><code>alias</code></td> + <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td> + <td>별칭이나 바로가기를 만드는 중.</td> + </tr> + <tr style="cursor: copy;"> + <td><code>copy</code></td> + <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td> + <td>복사하는 중.</td> + </tr> + <tr style="cursor: move;"> + <td><code>move</code></td> + <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td> + <td>움직이는 중.</td> + </tr> + <tr style="cursor: no-drop;"> + <td><code>no-drop</code></td> + <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td> + <td>현재 위치에 놓을 수 없음.<br> + {{bug("275173")}}: Windows와 Mac OS X에서 <code>no-drop</code>은 <code>not-allowed</code>와 같습니다.</td> + </tr> + <tr style="cursor: not-allowed;"> + <td><code>not-allowed</code></td> + <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td> + <td>요청한 행동을 수행할 수 없음.</td> + </tr> + <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"> + <td><code>grab</code></td> + <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td> + <td>잡을 수 있음. (잡아서 이동)</td> + </tr> + <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;"> + <td><code>grabbing</code></td> + <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td> + <td>잡고 있음. (잡아서 이동)</td> + </tr> + <tr style="cursor: all-scroll;"> + <th rowspan="15" scope="row" style="cursor: auto;">크기 조절과 스크롤</th> + <td><code>all-scroll</code></td> + <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td> + <td>모든 방향으로 이동 가능. (패닝)<br> + {{bug("275174")}}: Windows에서 <code>all-scroll</code>은 <code>move</code>와 같습니다.</td> + </tr> + <tr style="cursor: col-resize;"> + <td><code>col-resize</code></td> + <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td> + <td>항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를 세로로 분리한 모양을 사용합니다.</td> + </tr> + <tr style="cursor: row-resize;"> + <td><code>row-resize</code></td> + <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td> + <td>항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용합니다.</td> + </tr> + <tr style="cursor: n-resize;"> + <td><code>n-resize</code></td> + <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td> + <td rowspan="8" style="cursor: auto;">움직일 수 있는 모서리. 예를 들어, <code>se-resize</code> 커서는 움직임이 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의 양방향 화살표를 대신 보여줍니다. 즉 <code>n-resize</code>와 <code>s-resize</code>는 <code>ns-resize</code>와 같습니다.</td> + </tr> + <tr style="cursor: e-resize;"> + <td><code>e-resize</code></td> + <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: s-resize;"> + <td><code>s-resize</code></td> + <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: w-resize;"> + <td><code>w-resize</code></td> + <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: ne-resize;"> + <td><code>ne-resize</code></td> + <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nw-resize;"> + <td><code>nw-resize</code></td> + <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: se-resize;"> + <td><code>se-resize</code></td> + <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: sw-resize;"> + <td><code>sw-resize</code></td> + <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: ew-resize;"> + <td><code>ew-resize</code></td> + <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td> + <td rowspan="4" style="cursor: auto;">양방향 크기 조절 커서.</td> + </tr> + <tr style="cursor: ns-resize;"> + <td><code>ns-resize</code></td> + <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nesw-resize;"> + <td><code>nesw-resize</code></td> + <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td> + </tr> + <tr style="cursor: nwse-resize;"> + <td><code>nwse-resize</code></td> + <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;"> + <th rowspan="2" scope="row" style="cursor: auto;">확대와 축소</th> + <td><code>zoom-in</code></td> + <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>확대/축소할 수 있음.</p> + </td> + </tr> + <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;"> + <td><code>zoom-out</code></td> + <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="사용_일람">사용 일람</h2> + +<p>비록 명세에 cursor의 크기 제한은 정해져있지 않지만, 각각의 {{Glossary("user agent", "사용자 에이전트")}}가 별도로 최대 크기를 규정할 수도 있습니다. 이 때, 크기를 넘어가는 이미지를 사용할 경우, 보통 사용자 에이전트는 해당 이미지를 완전히 무시합니다.</p> + +<p>{{anch("브라우저 호환성")}} 항목에서 커서 크기 제한을 찾아보세요.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush:css">.foo { + cursor: crosshair; +} + +.bar { + cursor: zoom-in; +} + +/* URL을 쓸 땐 키워드 값 필수 */ +.baz { + cursor: url("hyper.cur"), auto; +} +</pre> + +<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('CSS3 Basic UI', '#cursor', 'cursor')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("css.properties.cursor")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property"><code>cursor</code> 속성값으로 URL 사용하기</a></li> + <li>{{cssxref("pointer-events")}}</li> +</ul> diff --git a/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html b/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..416718c17f --- /dev/null +++ b/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,70 @@ +--- +title: cursor 속성값에 URL 사용 +slug: Web/CSS/cursor/Using_URL_values_for_the_cursor_property +tags: + - CSS + - CSS_2.1 + - Cross-browser_Development + - Web Development +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +<p><a href="ko/Gecko">Gecko</a> 1.8 (<a href="ko/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0)은 URL 값을 <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2 커서 속성</a>값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.</p> + +<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3> + +<p>이 속성의 문법은 다음과 같습니다:</p> + +<pre class="eval">cursor: [<url>,]* keyword; +</pre> + +<p>즉, URL을 지정하지 않거나 혹은 다수의 콤마로 분리된 URL값들을 지정할 수 있으며, 이 값들 뒤엔 <strong>반드시</strong> <a href="ko/CSS">CSS</a>규정에 정의된 <code>auto</code> 나 <code>pointer</code>같은 키워드들이 따라와야 합니다.</p> + +<p>예를 들면, 다음과 같은 값이 지정될 수 있습니다:</p> + +<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://www.example.com/bar.gif</span>), auto; +</pre> + +<p>우선 foo.cur의 로딩이 시도 되고, 만약 이 파일이 없거나 어떤 다른 이유로 파일이 부적합할 경우, bar.gif를 로드하게 되고 이것 마저 사용할 수 없게 되면, <code>auto</code>가 사용될 것입니다.</p> + +<p>커서 값에 대한 CSS3 <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">syntax</a> 지원은 Gecko 1.8beta3에 부가되었으며, 따라서 Firefox 1.5에서 사용할 수 있습니다. 이 기능은 커서 이미지의 바운더리에 부착시킬 커서의 핫스팟의 좌표를 지정할 수 있게 해줍니다. 만일 아무것도 지정되지 않을 경우, 핫스팟의 좌표는 이미지 파일 자체에서 (CUR 와 XBN 파일의 경우) 읽어 들이거나 이미지의 좌측 상단 코너로 지정됩니다. CSS3 문법의 예문은 다음과 같습니다:</p> + +<pre class="eval">cursor: url(foo.png) 4 12, auto; +</pre> + +<p>첫번째 숫자는 x좌표이며, 두번째 숫자는 y좌표입니다. 이 예문은 이미지의 왼쪽 위 (0,0)로부터 (4, 12)의 위치의 픽셀을 핫스팟으로 지정할 것입니다.</p> + +<h3 id=".EC.A0.9C.EC.95.BD_.EC.82.AC.ED.95.AD" name=".EC.A0.9C.EC.95.BD_.EC.82.AC.ED.95.AD">제약 사항</h3> + +<p>Gecko가 지원하는 모든 이미지 포팻이 사용가능합니다. 즉, BMP, JPG, CUR, GIF 등의 이미지를 사용할 수 있습니다. 그러나, ANI는 지원되지 않습니다. animated GIF 이미지로 지정해도, 커서는 animated 커서가 되지는 않을 것입니다. 이런 문제점은 향후 릴리즈에서 제거될 것입니다.</p> + +<p>Gecko는 커서의 크기에 관해서 어떤 제약을 두고 있지는 않습니다만, 다른 운영체제나 플랫폼들과의 최대의 호환성을 유지하기 위해 커서 크기를 32x32로 제한할것을 권장합니다. 특히, 이보다 큰 커서는 윈도우 9x (95, 98, ME) 에서 작동하지 않을 것입니다.</p> + +<p>투명 커서는 XP보다 이전 윈도우 릴리즈에서는 지원되지 않으며, 이는 운영체제의 제약사항입니다. 투명기능은 모든 플랫폼에서 작동합니다.</p> + +<p>모질라의 윈도우, OS/2 그리고 리눅스(GTK+ 2.4 나 그 이후 버전 사용) 릴리즈에서만 커서로 URL값이 지원됩니다. 다른 플랫폼들에대한 지원은 향후 릴리즈에 추가될 것입니다.(Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})</p> + +<h3 id=".EB.8B.A4.EB.A5.B8_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80.EB.93.A4.EA.B3.BC.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1" name=".EB.8B.A4.EB.A5.B8_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80.EB.93.A4.EA.B3.BC.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1">다른 브라우저들과의 호환성</h3> + +<p>마이크로소프트 인터넷 익스플로러(MSIE)도 <code>cursor</code>속성으로 URL 값을 지원합니다. 그러나, CUR 과 ANI 포맷만을 지원합니다.</p> + +<p><code>cursor</code>속성 문법도 또한 제약이 덜한 관계로</p> + +<pre class="eval">cursor: url(foo.cur); +</pre> + +<p>이나</p> + +<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto; +</pre> + +<p>와 같은 값도 MSIE에선 작동할 것입니다. 그러나 이런 값은 Gecko에선 작동하지 않을 것입니다. Gecko와의 호환성을 위해서 또 CSS규약에 따라, 항상 URL 리스트를 먼저 나열하시고, 정확히 하나의 키워드 값을 그 뒤에 사용하십시오.</p> + +<h3 id="To-do" name="To-do">To-do</h3> + +<dl> + <dd><em>To-do: document what MSIE does with CSS 3 hotspot locations</em></dd> +</dl> + +<p><span class="comment">Interwiki Language Links</span></p> + +<p>{{ languages( { "ja": "ja/Using_URL_values_for_the_cursor_property" } ) }}</p> diff --git a/files/ko/web/css/descendant_combinator/index.html b/files/ko/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..2d351f2c8e --- /dev/null +++ b/files/ko/web/css/descendant_combinator/index.html @@ -0,0 +1,108 @@ +--- +title: 자손 결합자 +slug: Web/CSS/Descendant_combinator +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<p><span class="seoSummary">보통 한 칸의 공백 문자로 표현하는 <strong>자손 결합자</strong>(<code> </code>)는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택합니다.</span> 자손 결합자를 활용하는 선택자를 자손 선택자라고 부릅니다.</p> + +<pre class="brush: css no-line-numbers">/* List items that are descendants of the "my-things" list */ +ul.my-things li { + margin: 2em; +}</pre> + +<p>기술적으로, 자손 결합자는 하나 이상의 {{Glossary("CSS")}} 공백 문자이므로 스페이스 외에도 캐리지 리턴, 폼 피드, 새 줄, 탭 문자도 해당합니다. 또한 결합자를 구성하는 공백 문자는 CSS 주석을 임의의 개수만큼 포함할 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><var>selector1</var> <var>selector2</var> { + <var>/* property declarations */</var> +}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">li { + list-style-type: disc; +} + +li li { + list-style-type: circle; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li> + <div>Item 1</div> + <ul> + <li>Subitem A</li> + <li>Subitem B</li> + </ul> + </li> + <li> + <div>Item 2</div> + <ul> + <li>Subitem A</li> + <li>Subitem B</li> + </ul> + </li> +</ul> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "100%", 160)}}</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("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.descendant")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a></li> +</ul> diff --git a/files/ko/web/css/display-internal/index.html b/files/ko/web/css/display-internal/index.html new file mode 100644 index 0000000000..8aea8a152b --- /dev/null +++ b/files/ko/web/css/display-internal/index.html @@ -0,0 +1,131 @@ +--- +title: <display-internal> +slug: Web/CSS/display-internal +tags: + - CSS + - CSS 데이터 타입 + - CSS 디스플레이 + - display-internal + - 자료형 + - 참조 +translation_of: Web/CSS/display-internal +--- +<div>{{CSSRef}}</div> + +<p class="summary"><code>table</code>과 <code>ruby</code> 같은 몇몇 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식이나 자손들로 채울 수 있는 다양한 역할을 가지고 있습니다. 이 페이지는 이러한 "내재적인" 디스플레이 값을 정의하며, 이들은 특정 레이아웃 모드 안에서만 의미를 가집니다.</p> + +<h2 id="문법">문법</h2> + +<p>유효한 <code><display-internal></code> 값들:</p> + +<dl> + <dt><code>table-row-group</code></dt> + <dd>이 요소는 {{HTMLElement("tbody")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>table-header-group</code></dt> + <dd>이 요소는 {{HTMLElement("thead")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>table-footer-group</code></dt> + <dd>이 요소는 {{HTMLElement("tfoot")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>table-row</code></dt> + <dd>이 요소는 {{HTMLElement("tr")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>table-cell</code></dt> + <dd>이 요소는 {{HTMLElement("td")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>table-column-group</code></dt> + <dd>이 요소는 {{HTMLElement("colgroup")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>table-column</code></dt> + <dd>이 요소는 {{HTMLElement("col")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>table-caption</code></dt> + <dd>이 요소는 {{HTMLElement("caption")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>ruby-base</code> {{Experimental_Inline}}</dt> + <dd>이 요소는 {{HTMLElement("rb")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>ruby-text</code> {{Experimental_Inline}}</dt> + <dd>이 요소는 {{HTMLElement("rt")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>ruby-base-container</code> {{Experimental_Inline}}</dt> + <dd>이 요소는 익명의 박스로 만들어지는 {{HTMLElement("rbc")}} HTML 요소처럼 동작합니다.</dd> + <dt><code>ruby-text-container</code> {{Experimental_Inline}}</dt> + <dd>이 요소는 {{HTMLElement("rtc")}} HTML 요소처럼 동작합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="CSS_테이블의_예시">CSS 테이블의 예시</h3> + +<p>다음 예시에서는 CSS 테이블 레이아웃을 이용해 간단한 폼을 배치합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><main> + <div> + <label for="name">Name</label> + <input type="text" id="name" name="name"> + </div> + <div> + <label for="age">Age</label> + <input type="text" id="age" name="age"> + </div> +</main></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">main { + display: table; +} + +div { + display: table-row; +} + +label, input { + display: table-cell; + margin: 5px; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}</p> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">사양</th> + <th scope="col">상태</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}}</td> + <td>{{Spec2('CSS3 Display')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">이 페이지의 호환성 표는 구조화된 데이터로부터 생성되었습니다. 데이터에 기여하시려면, <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 확인한 뒤 저희에게 풀 리퀘스트를 보내주세요.</div> + +<h3 id="Table_관련_값의_지원">Table 관련 값의 지원</h3> + +<p><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-footer-group</code>, <code>table-header-group</code>, <code>table-row</code>, <code>table-row-group</code></p> + +<p>{{Compat("css.properties.display.table_values", 10)}}</p> + +<h3 id="Ruby_관련_값의_지원">Ruby 관련 값의 지원</h3> + +<p><code>ruby</code>, <code>ruby-base</code>, <code>ruby-base-container</code>, <code>ruby-text</code>, <code>ruby-text-container</code></p> + +<p>{{Compat("css.properties.display.ruby_values", 10)}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{CSSxRef("display")}} + <ul> + <li>{{CSSxRef("<display-outside>")}}</li> + <li>{{CSSxRef("<display-inside>")}}</li> + <li>{{CSSxRef("<display-listitem>")}}</li> + <li>{{CSSxRef("<display-box>")}}</li> + <li>{{CSSxRef("<display-legacy>")}}</li> + </ul> + </li> +</ul> diff --git a/files/ko/web/css/display/index.html b/files/ko/web/css/display/index.html new file mode 100644 index 0000000000..559a1bf4a2 --- /dev/null +++ b/files/ko/web/css/display/index.html @@ -0,0 +1,234 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Display + - CSS Property + - Reference + - display +translation_of: Web/CSS/display +--- +<div>{{CSSRef}}</div> + +<p class="summary"><strong><code>display</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소를 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout">블록과 인라인</a> 요소 중 어느 쪽으로 처리할지와 함께, <a href="/ko/docs/Web/CSS/CSS_Flow_Layout">플로우</a>, <a href="/ko/docs/Web/CSS/CSS_Grid_Layout">그리드</a>, <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">플렉스</a>처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.</p> + +<p class="summary"><code>display</code> 속성은, 형식적으로는 요소의 내부와 외부 디스플레이 유형을 설정합니다. 외부 디스플레이 유형은 플로우 레이아웃에 요소가 참여하는 방법을 나타내고, 내부 디스플레이 유형은 자식의 레이아웃 방식을 설정합니다. <code>display</code>의 일부 값은 자신만의 명세를 가지고 있습니다. 이 문서의 끝에서 찾을 수 있는 명세표를 참고하세요.</p> + +<h2 id="구문">구문</h2> + +<p><code>display</code> 속성은 키워드 값을 사용해 지정합니다. 키워드는 6개의 카테고리로 분류할 수 있습니다.</p> + +<pre>.container { + display: <display-keyword>; +} +</pre> + +<h3 id="바깥쪽">바깥쪽</h3> + +<dl> + <dt>{{CSSxRef("<display-outside>")}}</dt> + <dd>요소의 외부 디스플레이 유형을 설정하는 키워드입니다. 외부 디스플레이 유형은 플로우 레이아웃에서 요소 자신의 역할과 마찬가지입니다.</dd> +</dl> + +<p>{{page("/ko/docs/Web/CSS/display-outside", "Syntax")}}</p> + +<h3 id="안쪽">안쪽</h3> + +<dl> + <dt>{{CSSxRef("<display-inside>")}}</dt> + <dd>요소의 내부 디스플레이 유형을 설정하는 키워드입니다. 내부 디스플레이 유형은 대체 요소가 아닌 요소의 콘텐츠 서식과 배치 방법을 나타냅니다.</dd> +</dl> + +<p>{{page("/ko/docs/Web/CSS/display-inside", "Syntax")}}</p> + +<h3 id="리스트_아이템">리스트 아이템</h3> + +<dl> + <dt>{{cssxref("<display-listitem>")}}</dt> + <dd>요소가 콘텐츠 블록 박스를 생성하고, 리스트 아이템 인라인 박스를 분리합니다.</dd> +</dl> + +<p>{{page("/ko/docs/Web/CSS/display-listitem", "Syntax")}}</p> + +<h3 id="내부적">내부적</h3> + +<dl> + <dt>{{cssxref("<display-internal>")}}</dt> + <dd><code>table</code>, <code>ruby</code> 등 일부 레이아웃 모델은 복잡한 내부 구조를 가지며, 자식과 자손이 채워넣을 여러가지 역할을 지닙니다. 이 항목은 그런 특정 레이아웃 모드에서만 의미를 갖는 "내부적"인 값을 정의합니다.</dd> +</dl> + +<p>{{page("/ko/docs/Web/CSS/display-internal", "Syntax")}}</p> + +<h3 id="박스">박스</h3> + +<dl> + <dt>{{CSSxRef("<display-box>")}}</dt> + <dd>요소의 디스플레이 박스를 생성해야 하는지 지정합니다.</dd> +</dl> + +<p>{{page("/ko/docs/Web/CSS/display-box", "Syntax")}}</p> + +<h3 id="레거시">레거시</h3> + +<dl> + <dt>{{CSSxRef("<display-legacy>")}}</dt> + <dd>CSS 2는 <code>display</code> 속성에 단일 키워드만 사용했으므로, 같은 레이아웃 모드를 위해 블록 레벨과 인라인 레벨 키워드를 각각 필요로 했습니다.</dd> +</dl> + +<p>{{page("/ko/docs/Web/CSS/display-legacy", "Syntax")}}</p> + +<p>The Level 3 specification details two values for the <code>display</code> property — enabling the specification of the outer and inner display type explicitly — but this is not yet well-supported by browsers.</p> + +<p>The display-legacy methods allow the same results with single keyword values, and should be favoured by developers until the two keyword values are better supported. For example, using two values you might specify an inline flex container as follows:</p> + +<pre class="brush: css">.container { + display: inline flex; +}</pre> + +<p>This can currently be specified using a single value.</p> + +<pre class="brush: css">.container { + display: inline-flex; +} +</pre> + +<h3 id="전역">전역</h3> + +<pre class="brush: css">display: inherit; +display: initial; +display: unset; +</pre> + +<h2 id="안내서_및_예제">안내서 및 예제</h2> + +<p>The individual pages for the different types of value that <code>display</code> can have set on it feature multiple examples of those values in action — see the {{anch("Syntax")}} section. In addition, see the following material, which covers the various values of display in depth.</p> + +<h3 id="CSS_Flow_Layout_display_block_display_inline">CSS Flow Layout (<code>display: block</code>, <code>display: inline</code>)</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li> +</ul> + +<h3 id="display_flex"><code>display: flex</code></h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic concepts of flexbox</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items Along the Main Axis</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering Flex Items</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards Compatibility of Flexbox</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of Flexbox</a></li> +</ul> + +<h3 id="display_grid"><code>display: grid</code></h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic Concepts of Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> +</ul> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<h3 id="display_none"><code>display: none</code></h3> + +<p>Using a <code>display</code> value of <code>none</code> on an element will remove it from the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a>. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.</p> + +<p>If you want to visually hide the element, a more accessible alternative is to use <a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">a combination of properties</a> to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.</p> + +<h3 id="display_contents"><code>display: contents</code></h3> + +<p>Current implementations in most browsers will remove from the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> any element with a <code>display</code> value of <code>contents</code> (but descendants will remain). This will cause the element itself to no longer be announced by screen reading technology. This is incorrect behavior according to the <a href="https://drafts.csswg.org/css-display/#valdef-display-contents">CSS specification</a>.</p> + +<ul> + <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents | Hidde de Vries</a></li> + <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li> +</ul> + +<h3 id="Tables">Tables</h3> + +<p>Changing the <code>display</code> value of a {{HTMLElement("table")}} element to <code>block</code>, <code>grid</code>, or <code>flex</code> will alter its representation in the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a>. This will cause the table to no longer be announced properly by screen reading technology.</p> + +<ul> + <li><a class="external" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li> + <li><a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Display', '#the-display-properties', 'display')}}</td> + <td>{{Spec2('CSS3 Display')}}</td> + <td>Added <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code>, and multi-keyword values.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td> + <td>{{Spec2('CSS3 Ruby')}}</td> + <td>Added <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, and <code>ruby-text-container</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td> + <td>{{Spec2('CSS3 Grid')}}</td> + <td>Added the grid box model values.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Added the flexible box model values.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Added the table model values and <code>inline-block<em>.</em></code></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#display', 'display')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition. Basic values: <code>none</code>, <code>block</code>, <code>inline</code>, and <code>list-item</code>.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.display", 10)}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting contexts explained</a></li> + <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li> + <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li> +</ul> 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..e995c42c68 --- /dev/null +++ b/files/ko/web/css/filter-function/blur()/index.html @@ -0,0 +1,40 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur() +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/blur() +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary"><strong><code>blur()</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 함수는 주어진 이미지에 <a href="https://en.wikipedia.org/wiki/Gaussian_blur">가우시안 블러</a>를 적용합니다</span>. 반환 값은 {{cssxref("<filter-function>")}}입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">blur(<em>radius</em>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>radius</code></dt> + <dd>{{cssxref("<length>")}}로 지정한 블러 효과의 지름. 가우시안 함수의 표준 편차, 즉 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정합니다. 따라서 큰 값은 이미지를 더 흐리게 만듭니다. <code>0</code>은 주어진 입력 결과를 그대로 반환합니다. 보간 시, 누락 값은 0입니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">blur(0) /* 변화 없음 */ +blur(8px) /* 8px 블러 */ +blur(1.17rem) /* 1.17rem 블러 */</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> 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..1fe4b03327 --- /dev/null +++ b/files/ko/web/css/filter-function/brightness()/index.html @@ -0,0 +1,41 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness() +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/brightness() +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary"><strong><code>brightness()</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다.</span> 반환 값은 {{cssxref("<filter-function>")}}입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-brightness.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">brightness(<em>amount</em>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>amount</code></dt> + <dd>{{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 밝기. <code>100%</code> 미만의 값은 이미지를 어둡게 만들고, <code>100%</code>를 초과하는 값은 밝게 합니다. <code>0%</code>는 이미지를 완전한 검은색으로 바꾸고 <code>100%</code>는 주어진 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 <code>1</code>입니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">brightness(0%) /* 완전한 검정 */ +brightness(0.4) /* 40% 밝기 */ +brightness(1) /* 변화 없음 */ +brightness(200%) /* 두 배 밝기 */</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> 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..19828a4bbb --- /dev/null +++ b/files/ko/web/css/filter-function/contrast()/index.html @@ -0,0 +1,41 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast() +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/contrast() +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary"><code><strong>contrast()</strong></code> <a href="/ko/docs/Web/CSS">CSS</a> 함수는 주어진 이미지의 대비를 조절합니다.</span> 반환 값은 {{cssxref("<filter-function>")}}입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-contrast.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">contrast(<em>amount</em>)</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>amount</code></dt> + <dd>{{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 대비. <code>100%</code> 미만의 값은 이미지의 대비를 낮추고, <code>100%</code>를 초과하는 값은 높입니다. <code>0%</code>는 이미지를 완전히 회색으로 바꾸고 <code>100%</code>는 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 <code>1</code>입니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">contrast(0) /* 완전히 회색 */ +contrast(65%) /* 대비 65% */ +contrast(1) /* 변화 없음 */ +contrast(200%) /* 대비 두 배 */</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> diff --git a/files/ko/web/css/filter-function/index.html b/files/ko/web/css/filter-function/index.html new file mode 100644 index 0000000000..ee62fc49f6 --- /dev/null +++ b/files/ko/web/css/filter-function/index.html @@ -0,0 +1,210 @@ +--- +title: <filter-function> +slug: Web/CSS/filter-function +tags: + - CSS + - CSS Data Type + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <code><strong><filter-function></strong></code> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 입력 이미지의 모습을 변형할 수 있는 그래픽 효과를 나타냅니다.</span> {{cssxref("filter")}}와 {{cssxref("backdrop-filter")}} 속성에서 사용합니다.</p> + +<h2 id="구문">구문</h2> + +<p><code><filter-function></code> 자료형은 다음 목록의 필터 중 하나를 사용해 지정할 수 있습니다. 각 함수는 매개변수를 받아야 하며, 유효하지 않은 값을 전달하면 필터를 적용하지 않습니다.</p> + +<dl> + <dt>{{cssxref("filter-function/blur", "blur()")}}</dt> + <dd>이미지를 흐리게 만듭니다.</dd> + <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt> + <dd>이미지의 밝기를 조절합니다.</dd> + <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt> + <dd>이미지의 대비를 조절합니다.</dd> + <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt> + <dd>이미지의 뒤에 그림자를 적용합니다.</dd> + <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt> + <dd>이미지를 흑백으로 변환합니다.</dd> + <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</dt> + <dd>이미지의 전체 색조를 조절합니다.</dd> + <dt>{{cssxref("filter-function/invert", "invert()")}}</dt> + <dd>이미지의 색을 반전합니다.</dd> + <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt> + <dd>이미지의 투명도를 조절합니다.</dd> + <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt> + <dd>이미지의 채도를 조절합니다.</dd> + <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt> + <dd>이미지에 세피아 톤을 적용합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="필터_함수_비교">필터 함수 비교</h3> + +<p>이 예제는 간단한 그래픽과 함께 여러 가지 필터를 선택할 수 있는 선택 메뉴와, 필터의 값을 조절할 수 있는 슬라이더를 제공합니다. 컨트롤을 조절하면 필터가 실시간으로 변화하므로 각 필터의 효과를 편리하게 알아볼 수 있습니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div></div> +<ul> + <li> + <label for="filter-select">필터 함수 선택:</label> + <select id="filter-select"> + <option selected>blur</option> + <option>brightness</option> + <option>contrast</option> + <option>drop-shadow</option> + <option>grayscale</option> + <option>hue-rotate</option> + <option>invert</option> + <option>opacity</option> + <option>saturate</option> + <option>sepia</option> + </select> + </li> + <li> + <input type="range"><output></output> + </li> + <li> + <p>Current value: <code></code></p> + </li> +</ul></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 300px; + height: 300px; + background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; +} + +li { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +} + +input { + width: 60% +} + +output { + width: 5%; + text-align: center; +} + +select { + width: 40%; + margin-left: 2px; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">const selectElem = document.querySelector('select'); +const divElem = document.querySelector('div'); +const slider = document.querySelector('input'); +const output = document.querySelector('output'); +const curValue = document.querySelector('p code'); + +selectElem.addEventListener('change', () => { + setSlider(selectElem.value); + setDiv(selectElem.value); +}); + +slider.addEventListener('input', () => { + setDiv(selectElem.value); +}); + +function setSlider(filter) { + if(filter === 'blur') { + slider.value = 0; + slider.min = 0; + slider.max = 30; + slider.step = 1; + slider.setAttribute('data-unit', 'px'); + } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') { + slider.value = 1; + slider.min = 0; + slider.max = 4; + slider.step = 0.05; + slider.setAttribute('data-unit', ''); + } else if(filter === 'drop-shadow') { + slider.value = 0; + slider.min = -20; + slider.max = 40; + slider.step = 1; + slider.setAttribute('data-unit', 'px'); + } else if(filter === 'opacity') { + slider.value = 1; + slider.min = 0; + slider.max = 1; + slider.step = 0.01; + slider.setAttribute('data-unit', ''); + } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { + slider.value = 0; + slider.min = 0; + slider.max = 1; + slider.step = 0.01; + slider.setAttribute('data-unit', ''); + } else if(filter === 'hue-rotate') { + slider.value = 0; + slider.min = 0; + slider.max = 360; + slider.step = 1; + slider.setAttribute('data-unit', 'deg'); + } +} + +function setDiv(filter) { + if(filter === 'drop-shadow') { + divElem.style.filter = `${selectElem.value}(${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(Math.abs(slider.value/2))}${slider.getAttribute('data-unit')})`; + } else { + divElem.style.filter = `${selectElem.value}(${slider.value}${slider.getAttribute('data-unit')}`; + } + + updateOutput(); + updateCurValue(); +} + +function updateOutput() { + output.textContent = slider.value; +} + +function updateCurValue() { + curValue.textContent = `필터: ${divElem.style.filter}`; +} + +setSlider(selectElem.value); +setDiv(selectElem.value);</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('필터_함수_비교', '100%', 500)}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comments</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}</td> + <td>{{ Spec2('Filters 1.0') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>자료형을 사용하는 속성: {{cssxref("filter")}}, {{cssxref("backdrop-filter")}}</li> +</ul> diff --git a/files/ko/web/css/filter/index.html b/files/ko/web/css/filter/index.html new file mode 100644 index 0000000000..8020311f12 --- /dev/null +++ b/files/ko/web/css/filter/index.html @@ -0,0 +1,1138 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - CSS Property + - Reference + - SVG + - SVG Filter + - 'recipe:css-property' +translation_of: Web/CSS/filter +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>filter</code></strong> 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다.</span> 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.</p> + +<p>CSS 표준은 미리 정의된 효과를 내는 몇 가지 함수를 포함하고 있습니다. <a href="/ko/docs/Web/SVG/Element/filter">SVG 필터 요소</a>를 가리키는 URL 참조를 사용하여 SVG 필터를 적용할 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css notranslate">/* SVG 필터를 가리키는 URL */ +filter: url("filters.svg#filter-id"); + +/* <filter-function> 값 */ +filter: blur(5px); +filter: brightness(0.4); +filter: contrast(200%); +filter: drop-shadow(16px 16px 20px blue); +filter: grayscale(50%); +filter: hue-rotate(90deg); +filter: invert(75%); +filter: opacity(25%); +filter: saturate(30%); +filter: sepia(60%); + +/* 다중 값 */ +filter: contrast(175%) brightness(3%); + +/* 필터 없음 */ +filter: none; + +/* 전역 값 */ +filter: inherit; +filter: initial; +filter: unset;</pre> + +<p>함수를 사용하려면 다음 구문을 사용하세요.</p> + +<pre class="syntaxbox notranslate">filter: <filter-function> [<filter-function>]* | none +</pre> + +<p>SVG {{SVGElement("filter")}} 요소에 대한 참조를 사용하려면 다음 구문을 사용하세요.</p> + +<pre class="syntaxbox notranslate">filter: url(svg-url#element-id) +</pre> + +<h3 id="보간">보간</h3> + +<p>보간의 처음과 끝 필터의 함수 목록 길이가 같고, 그 안에 {{cssxref("<url>")}} 값이 없으면, 각 필터 함수는 스스로의 특정 규칙을 따라 보간됩니다. 함수의 길이가 서로 다를 때는 긴 필터 목록에만 존재하는 필터를 짧은 필터 목록에 추가하며, 이 때 추가된 필터의 값으로는 누락 값(누락 시의 기본값)을 사용합니다. 이후 각 필터 함수는 서로 동일한 길이일 때와 같은 방식으로 보간합니다. 만약 한쪽의 필터가 <code>none</code>일 경우 다른 쪽 필터 목록을 모두 가져오고, 각각에 누락 값을 대입한 후 보간합니다. 이 외의 경우에는 이산적 보간을 사용합니다.</p> + +<h2 id="함수">함수</h2> + +<p><code>filter</code> 속성은 <code>none</code> 또는 아래의 함수를 하나 이상 사용해 지정할 수 있습니다. 어떤 함수의 매개변수가 유효하지 않다면, 그 함수는 <code>none</code>을 반환합니다. 따로 명시하지 않으면 백분율 값(<code>34%</code> 등)을 받는 함수는 그 백분율의 소수 표기(<code>0.34</code> 등)도 받을 수 있습니다.</p> + +<h3 id="SVG_필터">SVG 필터</h3> + +<h4 id="url"><code>url()</code></h4> + +<p><a href="/ko/docs/Web/SVG/Element/filter">SVG 필터</a>를 가리키는 URI를 받습니다. 외부 XML 파일에 포함된 필터도 가능합니다.</p> + +<pre class="brush: css notranslate">filter: url(resources.svg#c1)</pre> + +<h3 id="필터_함수">필터 함수</h3> + +<h4 id="blur"><code>blur()</code></h4> + +<p>{{cssxref("filter-function/blur", "blur()")}} 함수는 주어진 이미지에 가우시안 블러를 적용합니다. <code>radius</code> 값은 정규 분포의 표준 편차, 즉 화면에서 혼합할 픽셀의 수를 지정하므로 값이 클수록 이미지가 흐려집니다. 보간 시 누락값은 <code>0</code>입니다. 매개변수는 CSS 길이로 명시되어 있지만 백분율 값은 받지 않습니다.</p> + +<pre class="brush: css notranslate">filter: blur(5px) +</pre> + +<div id="blur_example" style="display: none;"> +<pre class="brush: html notranslate"> <table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> + <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" > + <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> + </filter> + <image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table></pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:blur(5px); + -webkit-filter:blur(5px); + -o-filter:blur(5px); + -ms-filter:blur(5px); + filter:blur(5px); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + height: 100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> + </filter> +</svg></pre> + +<p>{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}</p> + +<h4 id="brightness"><code>brightness()</code></h4> + +<p>{{cssxref("filter-function/brightness", "brightness()")}} 함수는 주어진 이미지에 선형 배수를 적용하여 이미지를 밝거나 어둡게 표시합니다. <code>0%</code>일 경우 완전히 검은색 이미지가 되고, <code>100%</code>일 경우 이미지가 그대로 유지되며, 이외의 값은 효과의 선형 배수로 작용합니다. <code>100%</code>보다 큰 값도 허용되며, 이때는 더 밝은 이미지가 생성됩니다. 보간 시 누락값은 <code>1</code>입니다.</p> + +<pre class="brush: css notranslate">filter: brightness(0.5)</pre> + +<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="[amount]"/> + <feFuncG type="linear" slope="[amount]"/> + <feFuncB type="linear" slope="[amount]"/> + </feComponentTransfer> + </filter> +</svg></pre> + +<div id="brightness_example" style="display: none;"> +<pre class="brush: html notranslate"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> + <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="2"/> + <feFuncG type="linear" slope="2"/> + <feFuncB type="linear" slope="2"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:brightness(2); + -webkit-filter:brightness(2); + -o-filter:brightness(2); + -ms-filter:brightness(2); + filter:brightness(2); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + height:100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}</p> + +<h4 id="contrast"><code>contrast()</code></h4> + +<p>{{cssxref("filter-function/constrast", "constrast()")}} 함수는 주어진 이미지의 대비를 조정합니다. <code>0%</code>일 경우 완전히 회색 이미지가 되고, <code>100%</code>일 경우 이미지가 그대로 유지됩니다. <code>100%</code>보다 큰 값도 허용되며, 이때는 대비가 더 큰 이미지가 생성됩니다. 보간 시 누락값은 <code>1</code>입니다.</p> + +<pre class="brush: css notranslate">filter: contrast(200%) +</pre> + +<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + </feComponentTransfer> + </filter> +</svg></pre> + +<div id="contrast_example" style="display: none;"> +<pre class="brush: html notranslate"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="2" intercept="-0.5"/> + <feFuncG type="linear" slope="2" intercept="-0.5"/> + <feFuncB type="linear" slope="2" intercept="-0.5"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:contrast(200%); + -webkit-filter:contrast(200%); + -o-filter:contrast(200%); + -ms-filter:contrast(200%); + filter:contrast(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}</p> + +<h4 id="drop-shadow"><code>drop-shadow()</code></h4> + +<p>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 함수는 주어진 이미지에 그림자 효과를 적용합니다. 이때 추가하는 그림자는, 주어진 이미지의 알파 마스크에 특정한 색상과 오프셋, 흐림 효과를 적용하고 이미지 밑에 합성한 것입니다. 이 함수는 <code>inset</code> 키워드를 제외하고 (CSS3 Backgrounds에 정의된) <code><shadow></code> 자료형의 매개변수를 그대로 받을 수 있습니다. <code>drop-shadow()</code>는 보다 확립된 {{cssxref("box-shadow")}} 속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다. <code><shadow></code> 값의 매개변수는 다음과 같습니다.</p> + +<dl> + <dt><code><offset-x></code> <code><offset-y></code> <small>(필수)</small></dt> + <dd>그림자 오프셋을 설정하는 두 {{cssxref("<length>")}} 값입니다. <code><offset-x></code>는 가로 거리를 지정하며, 음수일 경우 그림자가 왼쪽에 배치됩니다. <code><offset-y></code>는 세로 거리를 지정하며, 음수일 경우 그림자가 위쪽에 배치됩니다. 가능한 단위는 {{cssxref("<length>")}}를 참조하세요.<br> + 두 값이 모두 <code>0</code>이면 그림자가 요소 바로 밑에 배치되며, <code><blur-radius></code>나 <code><spread-radius></code>를 설정한 경우 흐림 효과를 표시할 수 있습니다.</dd> + <dt><code><blur-radius></code> <small>(선택)</small></dt> + <dd>세 번째 {{cssxref("<length>")}} 값입니다. 클수록 흐려지는 반경이 커지고 그림자가 옅어집니다. 음수 값은 사용할 수 없습니다. 값을 지정하지 않으면 <code>0</code>으로 취급하여 그림자 가장자리가 날카로워집니다.</dd> + <dt><code><color></code> <small>(선택)</small></dt> + <dd>가능한 키워드 및 표기법은 {{cssxref("<color>")}}를 참조하세요. 값을 지정하지 않았을 때의 색상은 브라우저에 따라 다릅니다. 보통 {{cssxref("<color>")}} 속성의 값을 사용하지만, 현재 사파리는 투명한 그림자를 그리는 것을 주의하세요.</dd> +</dl> + +<pre class="brush: css notranslate">filter: drop-shadow(16px 16px 10px black)</pre> + +<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> + <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> + <feFlood flood-color="[color]"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> +</svg></pre> + +<div id="shadow_example" style="display: none;"> +<pre class="brush: html notranslate"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + <feOffset dx="16" dy="16"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /> +</svg><div></td> + <td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td> + </tr> + <tr> + <td><img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> + <td><img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> + <td> + <div class="svg-container"> + <svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"> + <filter id="drop-shadow2"> + <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> + <feOffset dx="8" dy="10"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /></span> + </svg> + <div> + </td> + <td><img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: drop-shadow(16px 16px 10px black); + -webkit-filter: drop-shadow(16px 16px 10px black); + -o-filter: drop-shadow(16px 16px 10px black); + -ms-filter: drop-shadow(16px 16px 10px black); + filter: drop-shadow(16px 16px 10px black); +} +#img12 { + width:100%; + height:auto; + -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +#irregular-shape { + width: 64%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3, #img13 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('shadow_example','100%','300px','','','no-codepen')}}</p> + +<h4 id="grayscale"><code>grayscale()</code></h4> + +<p>{{cssxref("filter-function/grayscale", "grayscale()")}} 함수는 주어진 이미지를 흑백으로 변환합니다. <code>amount</code> 값은 흑백으로 전환하는 비율을 지정합니다. <code>100%</code>일 경우 완전히 흑백 이미지가 되고, <code>0%</code>일 경우 이미지가 그대로 유지되며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 <code>0</code>입니다.</p> + +<pre class="brush: css notranslate">filter: grayscale(100%)</pre> + +<div id="grayscale_example" style="display: none;"> +<pre class="brush: html notranslate"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"> + <filter id="grayscale"> + <feColorMatrix type="matrix" + values="0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> +</svg><div></td> + <td><img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:grayscale(100%); + -webkit-filter:grayscale(100%); + -o-filter:grayscale(100%); + -ms-filter:grayscale(100%); + filter:grayscale(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('grayscale_example','100%','209px','','','no-codepen')}}</p> + +<h4 id="hue-rotate"><code>hue-rotate()</code></h4> + +<p>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 함수는 주어진 이미지에 색조 회전을 적용합니다. <code>angle</code> 값은 입력 샘플을 조절할 색상환 각도입니다. <code>0deg</code>일 경우 이미지가 그대로 유지됩니다. 보간 시 누락 값은 <code>0</code>입니다. 최댓값이 존재하지는 않지만, <code>360deg</code> 이상의 값은 <code>0deg</code>와 <code>360deg</code> 사이를 순환합니다.</p> + +<pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre> + +<div id="huerotate_example" style="display: none;"> +<pre class="brush: html notranslate"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" + values="90"/> + </filter> + <image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /> +</svg><div></td> + <td><img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:hue-rotate(90deg); + -webkit-filter:hue-rotate(90deg); + -o-filter:hue-rotate(90deg); + -ms-filter:hue-rotate(90deg); + filter:hue-rotate(90deg); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgHueRotate" > + <feColorMatrix type="hueRotate" values="[angle]" /> + <filter /> +</svg></pre> + +<p>{{EmbedLiveSample('huerotate_example','100%','221px','','','no-codepen')}}</p> + +<h4 id="invert"><code>invert()</code></h4> + +<p>{{cssxref("filter-function/invert", "invert()")}} 함수는 주어진 이미지의 색을 반전합니다. <code>amount</code> 값이 변형 정도를 지정합니다. <code>100%</code>일 경우 색을 정반대로 바꾸고, <code>0%</code>일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 <code>0</code>입니다.</p> + +<pre class="brush: css notranslate">filter: invert(100%)</pre> + +<div id="invert_example" style="display: none;"> +<pre class="brush: html notranslate"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"> + <filter id="invert"> + <feComponentTransfer> + <feFuncR type="table" tableValues="1 0"/> + <feFuncG type="table" tableValues="1 0"/> + <feFuncB type="table" tableValues="1 0"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /> +</svg><div></td> + <td><img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: invert(100%); + -webkit-filter: invert(100%); + -o-filter: invert(100%); + -ms-filter: invert(100%); + filter: invert(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('invert_example','100%','407px','','','no-codepen')}}</p> + +<h4 id="opacity"><code>opacity()</code></h4> + +<p>{{cssxref("filter-function/opacity", "opacity()")}} 함수는 주어진 이미지의 불투명도를 설정합니다. <code>amount</code> 값이 변형 정도를 지정합니다. <code>0%</code>일 경우 완전히 투명해지고, <code>100%</code>일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 즉 주어진 이미지 샘플을 <code>amount</code>와 곱하는 것과 같습니다. 보간 시 누락 값은 <code>1</code>입니다. 이 함수는 보다 확립된 {{cssxref("opacity")}} 속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다.</p> + +<pre class="brush: css notranslate">filter: opacity(50%)</pre> + +<div id="opacity_example" style="display: none;"> +<pre class="brush: html notranslate"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"> + <filter id="opacity"> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.5"> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /> +</svg><div></td> + <td><img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: opacity(50%); + -webkit-filter: opacity(50%); + -o-filter: opacity(50%); + -ms-filter: opacity(50%); + filter: opacity(50%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('opacity_example','100%','210px','','','no-codepen')}}</p> + +<h4 id="saturate"><code>saturate()</code></h4> + +<p>{{cssxref("filter-function/saturate", "saturate()")}} 함수는 주어진 이미지의 채도를 변경합니다. <code>amount</code> 값이 변형 정도를 지정합니다. <code>0%</code>일 경우 완전히 무채색이 되고, <code>100%</code>일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. <code>100%</code>보다 큰 값도 허용되며, 이때는 원본보다 채도가 큰 이미지를 생성합니다. 보간 시 누락 값은 <code>1</code>입니다.</p> + +<pre class="brush: css notranslate">filter: saturate(200%)</pre> + +<div id="saturate_example" style="display: none;"> +<pre class="brush: html notranslate"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"> + <filter id="saturate"> + <feColorMatrix type="saturate" + values="2"/> + </filter> + <image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /> +</svg><div></td> + <td><img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: saturate(200%); + -webkit-filter: saturate(200%); + -o-filter: saturate(200%); + -ms-filter: saturate(200%); + filter: saturate(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('saturate_example','100%','332px','','','no-codepen')}}</p> + +<h4 id="sepia"><code>sepia()</code></h4> + +<p>{{cssxref("filter-function/sepia", "sepia()")}} 함수는 주어진 이미지를 세피아로 변환합니다. <code>amount</code> 값이 변형 정도를 지정합니다. <code>100%</code>일 경우 완전히 세피아가 되고, <code>0%</code>에서는 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 <code>0</code>입니다.</p> + +<pre class="brush: css notranslate">filter: sepia(100%)</pre> + +<div id="sepia_example" style="display: none;"> +<pre class="brush: html notranslate"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"> + <filter id="sepia"> + <feColorMatrix type="matrix" + values="0.393 0.769 0.189 0 0 + 0.349 0.686 0.168 0 0 + 0.272 0.534 0.131 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /> +</svg><div></td> + <td><img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: sepia(100%); + -webkit-filter: sepia(100%); + -o-filter: sepia(100%); + -ms-filter: sepia(100%); + filter: sepia(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('sepia_example','100%','229px','','','no-codepen')}}</p> + +<h2 id="함수_조합">함수 조합</h2> + +<p>원하는 만큼 함수를 조합해서 그려지는 모습을 바꿀 수 있습니다. 다음 에제는 이미지의 대비와 밝기를 동시에 높입니다.</p> + +<pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre> + +<div id="combination_example" style="display: none;"> +<pre class="brush: html notranslate"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css notranslate">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: contrast(175%) brightness(103%); + -webkit-filter: contrast(175%) brightness(103%); + -o-filter: contrast(175%) brightness(103%); + -ms-filter: contrast(175%) brightness(103%); + filter: contrast(175%) brightness(103%); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('combination_example','100%','209px','','','no-codepen')}}</p> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="필터_함수_적용하기">필터 함수 적용하기</h3> + +<p>미리 정의된 함수는 다음 예제처럼 사용할 수 있습니다. 각 함수 문서에서 더 자세한 내용을 살펴보세요.</p> + +<pre class="brush: css notranslate">.mydiv { + filter: grayscale(50%); +} + +/* 모든 이미지를 50% 흑백 처리하고 10px 흐리게 */ +img { + filter: grayscale(0.5) blur(10px); +}</pre> + +<h3 id="SVG_필터_적용하기">SVG 필터 적용하기</h3> + +<p>URL 함수와 SVG 리소스를 사용하는 방법은 다음과 같습니다.</p> + +<pre class="brush: css notranslate">.target { + filter: url(#c1); +} + +.mydiv { + filter: url(commonfilters.xml#large-blur); +}</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('Filters 1.0', '#FilterProperty', 'filter') }}</td> + <td>{{ Spec2('Filters 1.0') }}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.filter")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="internal" href="/ko/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">HTML 콘텐츠에 SVG 효과 적용하기</a></li> + <li>{{cssxref("mask")}} 속성</li> + <li><a class="internal" href="/ko/docs/Web/SVG">SVG</a></li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a> (HTML5Rocks! 글)</li> +</ul> diff --git a/files/ko/web/css/filter_effects/index.html b/files/ko/web/css/filter_effects/index.html new file mode 100644 index 0000000000..dfd022f08e --- /dev/null +++ b/files/ko/web/css/filter_effects/index.html @@ -0,0 +1,70 @@ +--- +title: Filter Effects +slug: Web/CSS/Filter_Effects +tags: + - CSS + - Filter Effects + - Guide + - Overview + - Reference +translation_of: Web/CSS/Filter_Effects +--- +<div>{{CSSRef}}</div> + +<p><strong>Filter Effects</strong>는 요소의 렌더링을 문서에 표시하기 전에 전처리하는 방법을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("backdrop-filter")}}</li> + <li>{{cssxref("filter")}}</li> +</ul> +</div> + +<h3 id="자료형">자료형</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> +</div> + +<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('Filters 1.0', '#FilterProperty', 'filter') }}</td> + <td>{{ Spec2('Filters 1.0') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<h3 id="backdrop-filter_속성"><code>backdrop-filter</code> 속성</h3> + +<div> + + +<p>{{Compat("css.properties.backdrop-filter")}}</p> + +<h3 id="filter_속성"><code>filter</code> 속성</h3> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.filter")}}</p> +</div> +</div> diff --git a/files/ko/web/css/flex-basis/index.html b/files/ko/web/css/flex-basis/index.html new file mode 100644 index 0000000000..6e162086ad --- /dev/null +++ b/files/ko/web/css/flex-basis/index.html @@ -0,0 +1,209 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex-basis +--- +<div>{{CSSRef}}</div> + +<p><strong><code>flex-basis</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 플렉스 아이템의 초기 크기를 지정합니다. {{cssxref("box-sizing")}}을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div> + + + +<div class="note"> +<p><strong>참고:</strong> <code>auto</code> 값을 가지지 않은 <code>flex-basis</code>와 {{cssxref("width")}}({{cssxref("flex-direction")}}<code>: column</code>인 경우 {{cssxref("height")}}) 값을 동시에 적용한 경우 <code>flex-basis</code>가 우선합니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* <'width'> 지정 */ +flex-basis: 10em; +flex-basis: 3px; +flex-basis: auto; + +/* 원본 크기 키워드 */ +flex-basis: fill; +flex-basis: max-content; +flex-basis: min-content; +flex-basis: fit-content; + +/* 플렉스 아이템 내용 크기에 따라 조절 */ +flex-basis: content; + +/* 전역 값 */ +flex-basis: inherit; +flex-basis: initial; +flex-basis: unset; +</pre> + +<p><code>flex-basis</code> 속성값은 <code>content</code> 키워드를 사용하거나, <code><a href="#<'width'>"><'width'></a></code>를 나타내는 단위를 사용합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><a id="<'width'>" name="<'width'>"><code><'width'></code></a></dt> + <dd>{{cssxref("<length>")}}, 플렉스 컨테이너의 크기에 상대적인 {{cssxref("<percentage>")}}, <code>auto</code> 키워드 중 하나. 음수 값은 유효하지 않습니다.</dd> + <dt><a id="content" name="content"><code>content</code></a></dt> + <dd>플렉스 아이템의 콘텐츠 크기에 따라 자동으로 크기가 변합니다.</dd> + <dd> + <div class="note"><strong>참고:</strong> <code>content</code> 키워드는 Flexible Box Layout의 첫 배포에 포함되지 않아, 일부 오래 된 구현체에서는 지원하지 않을 수 있습니다. <code>flex-basis</code>와 주 크기({{cssxref("width")}}, {{cssxref("height")}}) 속성을 동시에 <code>auto</code>로 설정하면 동일한 효과를 볼 수 있습니다.</div> + + <div class="note"> + <p id="comment_text_0"><strong>역사:</strong></p> + + <ul> + <li>원래 <code>flex-basis: auto</code>의 뜻은 자신의 <code>width</code> 또는 <code>height</code> 속성의 값을 사용하라는 것이었습니다.</li> + <li>그 후 <code>flex-basis: auto</code>는 자동 크기조절로 바뀌고, 기존의 <code>auto</code>는 <code>main-size</code>로 바뀌었습니다. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>bug 1032922</a>에서 구현 기록을 볼 수 있습니다.</li> + <li>그러나 위의 변경점은 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>bug 1093316</a>에서 되돌려져 <code>auto</code> 가 다시 <code>width</code> / <code>height</code> 속성을 가리키게 됐고, 대신 새로운 <code>content</code> 키워드가 자동 크기조절을 맡게 됐습니다. ({{bug("1105111")}}에서 볼 수 있습니다)</li> + </ul> + </div> + </dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="container"> + <li class="flex flex1">1: flex-basis test</li> + <li class="flex flex2">2: flex-basis test</li> + <li class="flex flex3">3: flex-basis test</li> + <li class="flex flex4">4: flex-basis test</li> + <li class="flex flex5">5: flex-basis test</li> +</ul> + +<ul class="container"> + <li class="flex flex6">6: flex-basis test</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.container { + font-family: arial, sans-serif; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + flex-wrap: wrap; +} + +.flex { + background: #6AB6D8; + padding: 10px; + margin-bottom: 50px; + border: 3px solid #2E86BB; + color: white; + font-size: 20px; + text-align: center; + position: relative; +} + +.flex:after { + position: absolute; + z-index: 1; + left: 0; + top: 100%; + margin-top: 10px; + width: 100%; + color: #333; + font-size: 18px; +} + +.flex1 { + flex-basis: auto; +} + +.flex1:after { + content: 'auto'; +} + +.flex2 { + flex-basis: max-content; +} + +.flex2:after { + content: 'max-content'; +} + +.flex3 { + flex-basis: min-content; +} + +.flex3:after { + content: 'min-content'; +} + +.flex4 { + flex-basis: fit-content; +} + +.flex4:after { + content: 'fit-content'; +} + +.flex5 { + flex-basis: content; +} + +.flex5:after { + content: 'content'; +} + +.flex6 { + flex-basis: fill; +} + +.flex6:after { + content: 'fill'; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', '860', '360', '')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.flex-basis")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS 플렉스박스 안내서: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS 플렉스박스 안내서: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> + <li>{{cssxref("width")}}</li> +</ul> diff --git a/files/ko/web/css/flex-direction/index.html b/files/ko/web/css/flex-direction/index.html new file mode 100644 index 0000000000..9d3ae04a49 --- /dev/null +++ b/files/ko/web/css/flex-direction/index.html @@ -0,0 +1,155 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex-direction +--- +<div>{{CSSRef}}</div> + +<p><strong><code>flex-direction</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div> + + + +<p><code>row</code>와 <code>row-reverse</code>의 경우 플렉스 컨테이너의 방향성에 영향을 받음을 참고하세요. 컨테이너의 <code>dir</code> 값이 <code>ltr</code>이라면 <code>row</code>는 왼쪽부터 시작하는 가로축을, <code>row-reverse</code>는 오른쪽부터 시작하는 가로축을 나타냅니다. 그러나 <code>dir</code> 값이 <code>rtl</code>이라면 <code>row</code>가 오른쪽부터 시작하는 가로축을, <code>row-reverse</code>가 왼쪽부터 시작하는 가로축을 나타냅니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 한 줄의 글을 작성하는 방향대로 */ +flex-direction: row; + +/* <row>처럼, 대신 역방향 */ +flex-direction: row-reverse; + +/* 글 여러 줄이 쌓이는 방향대로 */ +flex-direction: column; + +/* <column>처럼, 대신 역방향 */ +flex-direction: column-reverse; + +/* 전역 값 */ +flex-direction: inherit; +flex-direction: initial; +flex-direction: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>row</code></dt> + <dd>플렉스 컨테이너의 주축이 글의 작성 방향과 동일합니다. 주축의 시작점과 끝점이 콘텐츠 방향과 동일합니다.</dd> + <dt><code>row-reverse</code></dt> + <dd><code>row</code>와 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.</dd> + <dt><code>column</code></dt> + <dd>플렉스 컨테이너의 주축이 블록 축과 동일합니다. 주축의 시작점과 끝점이, 글 작성 모드의 이전 지점 및 이후 지점과 동일합니다.</dd> + <dt><code>column-reverse</code></dt> + <dd><code>column</code>과 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><h4>This is a Column-Reverse</h4> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> +</div> +<h4>This is a Row-Reverse</h4> +<div id="content1"> + <div class="box1" style="background-color:red;">A</div> + <div class="box1" style="background-color:lightblue;">B</div> + <div class="box1" style="background-color:yellow;">C</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#content { + width: 200px; + height: 200px; + border: 1px solid #c3c3c3; + display: -webkit-flex; + -webkit-flex-direction: column-reverse; + display: flex; + flex-direction: column-reverse; +} + +.box { + width: 50px; + height: 50px; +} + +#content1 { + width: 200px; + height: 200px; + border: 1px solid #c3c3c3; + display: -webkit-flex; + -webkit-flex-direction: row-reverse; + display: flex; + flex-direction: row-reverse; +} + +.box1 { + width: 50px; + height: 50px; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample('예제', '', '300') }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>flex-direction</code> 속성에 <code>row-reverse</code> 또는 <code>column-reverse</code> 값을 사용하면 DOM 구조와 그 시각적 표현에 차이가 생깁니다. 이는 낮은 시력으로 스크린 리더 등 접근성 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적(CSS) 순서가 중요하다고 해도, 스크린 리더 사용자는 그 순서가 어떻게 되는지 알 수 없습니다.</p> + +<ul> + <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li> + <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.flex-direction")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS 플렉스박스 가이드: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS 플렉스박스 가이드: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> +</ul> diff --git a/files/ko/web/css/flex-flow/index.html b/files/ko/web/css/flex-flow/index.html new file mode 100644 index 0000000000..33d68c5188 --- /dev/null +++ b/files/ko/web/css/flex-flow/index.html @@ -0,0 +1,91 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex-flow +--- +<div>{{CSSRef}}</div> + +<p><strong><code>flex-flow</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 {{cssxref("flex-direction")}}, {{cssxref("flex-wrap")}} 속성의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* flex-flow: <'flex-direction'> */ +flex-flow: row; +flex-flow: row-reverse; +flex-flow: column; +flex-flow: column-reverse; + +/* flex-flow: <'flex-wrap'> */ +flex-flow: nowrap; +flex-flow: wrap; +flex-flow: wrap-reverse; + +/* flex-flow: <'flex-direction'>과 <'flex-wrap'> */ +flex-flow: row nowrap; +flex-flow: column wrap; +flex-flow: column-reverse wrap-reverse; + +/* 전역 값 */ +flex-flow: inherit; +flex-flow: initial; +flex-flow: unset; +</pre> + +<h3 id="값">값</h3> + +<p>자세한 내용은 {{cssxref("flex-direction")}}과 {{cssxref("flex-wrap")}} 속성을 참고하세요.</p> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush:css;highlight:3">element { + /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */ + flex-flow: column-reverse wrap; +} +</pre> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Flexbox','#flex-flow-property','flex-flow') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.flex-flow")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS 플렉스박스 가이드: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS 플렉스박스 가이드: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li> +</ul> diff --git a/files/ko/web/css/flex-grow/index.html b/files/ko/web/css/flex-grow/index.html new file mode 100644 index 0000000000..544fe486cc --- /dev/null +++ b/files/ko/web/css/flex-grow/index.html @@ -0,0 +1,123 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - NeedsContent + - Reference +translation_of: Web/CSS/flex-grow +--- +<div>{{CSSRef}}</div> + +<p><strong><code>flex-grow</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property 는 <code>flex-item</code> 요소가, <code>flex-container</code> 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 <strong>형제 요소</strong>로 렌더링 된 모든 <code>flex-item</code> 요소들이 동일한 <code>flex-grow</code> 값을 갖는다면, <code>flex-container</code> 내부에서 동일한 공간을 할당받습니다. 하지만 <code>flex-grow</code> 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.</p> + +<p>보통 <code>flex-grow</code>를 사용할땐, {{ Cssxref("flex-shrink") }}, {{ Cssxref("flex-basis") }} 속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 {{ Cssxref("flex") }} 속성을 이용해 <strong>축약형</strong>으로 사용합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">/* <number> values */ +flex-grow: 3; +flex-grow: 0.6; + +/* Global values */ +flex-grow: inherit; +flex-grow: initial; +flex-grow: unset; +</pre> + +<p><code>flex-grow</code> 속성에 대한 값은 <code><a href="#<number>"><number></a></code> 단독으로 표현합니다.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><a id="<number>" name="<number>"><code><number></code></a></dt> + <dd>관련 링크를 참고하세요. {{cssxref("<number>")}}. 단, 음수값은 허용되지 않습니다.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<div id="Live_Sample"> +<pre class="brush: html"><h4>This is a Flex-Grow</h4> +<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> + <div class="box1" style="background-color:brown;">D</div> + <div class="box1" style="background-color:lightgreen;">E</div> + <div class="box" style="background-color:brown;">F</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#content { + display: flex; + + justify-content: space-around; + flex-flow: row wrap; + align-items: stretch; +} + +.box { + flex-grow: 1; + border: 3px solid rgba(0,0,0,.2); +} + +.box1 { + flex-grow: 2; + border: 3px solid rgba(0,0,0,.2); +} +</pre> +</div> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}</p> + +<h2 id="Specifications">Specifications</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('CSS3 Flexbox','#flex-grow-property','flex-grow')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.flex-grow")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> + <li><a href="https://css-tricks.com/flex-grow-is-weird/">`flex-grow` is weird. Or is it?</a> article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works</li> +</ul> diff --git a/files/ko/web/css/flex-shrink/index.html b/files/ko/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..14a6f5427f --- /dev/null +++ b/files/ko/web/css/flex-shrink/index.html @@ -0,0 +1,123 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - NeedsContent + - Reference +translation_of: Web/CSS/flex-shrink +--- +<div>{{CSSRef}}</div> + +<p><strong><code>flex-shrink</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property는 <code>flex-item</code> 요소의 <code>flex-shrink</code> 값을 설정하는 속성입니다. 만약 <code>flex-item</code> 요소의 크기가 <code>flex-container</code> 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 <code>flex-container</code> 요소 내부에서 <code>flex-item</code> 요소의 크기가 <strong>축소</strong>됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">/* <number> values */ +flex-shrink: 2; +flex-shrink: 0.6; + +/* Global values */ +flex-shrink: inherit; +flex-shrink: initial; +flex-shrink: unset; +</pre> + +<p>The <code>flex-shrink</code> property is specified as a single <code><a href="#<number>"><number></a></code>.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><a id="<number>" name="<number>"><code><number></code></a></dt> + <dd>관련 링크를 참고하세요{{cssxref("<number>")}}. 단, 음수값은 허용되지 않습니다.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<div id="Live_Sample"> +<pre class="brush: html"><p>The width of content is 500px; the flex-basis of the flex items is 120px.</p> +<p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p> +<p>The width of D and E is less than the others.</p> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> + <div class="box1" style="background-color:brown;">D</div> + <div class="box1" style="background-color:lightgreen;">E</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#content { + display: flex; + width: 500px; +} + +#content div { + flex-basis: 120px; + border: 3px solid rgba(0,0,0,.2); +} + +.box { + flex-shrink: 1; +} + +.box1 { + flex-shrink: 2; +} +</pre> +</div> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example', 500, 300) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.flex-shrink")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> +</ul> + +<p><nobr></nobr></p> diff --git a/files/ko/web/css/flex-wrap/index.html b/files/ko/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..7ee27b4386 --- /dev/null +++ b/files/ko/web/css/flex-wrap/index.html @@ -0,0 +1,159 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex-wrap +--- +<div>{{ CSSRef}}</div> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> property는 <code>flex-item</code> 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</div> + + + +<p>여기를 참고하면 관련된 더욱 자세한 정보를 얻을 수 있습니다. <a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">flex-wrap: nowrap; /* Default value */ +flex-wrap: wrap; +flex-wrap: wrap-reverse; + +/* Global values */ +flex-wrap: inherit; +flex-wrap: initial; +flex-wrap: unset; +</pre> + +<p><code>flex-wrap</code> 속성의 값으로, 다음 목록 중 하나의 키워드를 선택할 수 있습니다.</p> + +<h3 id="Values">Values</h3> + +<p>아래는 사용 가능한 속성값들입니다:</p> + +<dl> + <dt><code>nowrap</code></dt> + <dd>기본 설정값으로, <code>flex-container</code> 부모요소 영역을 벗어나더라도 <code>flex-item</code> 요소들을 <strong>한 줄</strong>에 배치합니다. 시작점은 {{cssxref("flex-direction")}} 에 의해 결정된 방향으로 적용됩니다.</dd> + <dt><code>wrap</code></dt> + <dd><code>flex-item</code> 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치됩니다. <code>nowrap</code> 속성과 마찬가지로 요소가 배치되는 시작점은 {{cssxref("flex-direction")}} 에 의해 결정됩니다. 일반적으로 위에서 아래로 쌓이는 순서입니다.</dd> + <dt><code>wrap-reverse</code></dt> + <dd><code>wrap</code> 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됩니다.</dd> + <dt> + <h3 id="Formal_syntax">Formal syntax</h3> + </dt> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<div id="Live_Sample"> +<pre class="brush: html"><h4>This is an example for flex-wrap:wrap </h4> +<div class="content"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +<h4>This is an example for flex-wrap:nowrap </h4> +<div class="content1"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +<h4>This is an example for flex-wrap:wrap-reverse </h4> +<div class="content2"> + <div class="red">1</div> + <div class="green">2</div> + <div class="blue">3</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Common Styles */ +.content, +.content1, +.content2 { + color: #fff; + font: 100 24px/100px sans-serif; + height: 150px; + text-align: center; +} + +.content div, +.content1 div, +.content2 div { + height: 50%; + width: 50%; +} +.red { + background: orangered; +} +.green { + background: yellowgreen; +} +.blue { + background: steelblue; +} + +/* Flexbox Styles */ +.content { + display: flex; + flex-wrap: wrap; +} +.content1 { + display: flex; + flex-wrap: nowrap; +} +.content2 { + display: flex; + flex-wrap: wrap-reverse; +} + +</pre> +</div> + +<h3 id="Results">Results</h3> + +<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.flex-wrap")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li> +</ul> diff --git a/files/ko/web/css/flex/index.html b/files/ko/web/css/flex/index.html new file mode 100644 index 0000000000..d7bd9f9d3d --- /dev/null +++ b/files/ko/web/css/flex/index.html @@ -0,0 +1,267 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>flex</code></strong> <a href="/ko/docs/CSS" title="CSS">CSS</a> 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.</span> <code>flex</code>는 {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}}, {{cssxref("flex-basis")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div> + + + +<p>대부분의 경우, <code>flex</code>의 값에는 <code>auto</code>, <code>initial</code>, <code>none</code>이나 단위 없는 양의 수를 사용해야 합니다. 각 값의 적용 효과를 보려면 아래 플렉스 컨테이너의 크기를 조절해보세요.</p> + +<div id="flex"> +<pre class="hidden brush: html"><div class="flex-container"> + <div class="item auto">auto</div> + <div class="item auto">auto</div> + <div class="item auto">auto</div> +</div> + +<div class="flex-container"> + <div class="item auto">auto</div> + <div class="item initial">initial</div> + <div class="item initial">initial</div> +</div> + +<div class="flex-container"> + <div class="item auto">auto</div> + <div class="item auto">auto</div> + <div class="item none">none</div> +</div> + +<div class="flex-container"> + <div class="item initial">initial</div> + <div class="item none">none</div> + <div class="item none">none</div> +</div> + +<div class="flex-container"> + <div class="item four">4</div> + <div class="item two">2</div> + <div class="item one">1</div> +</div> +</pre> + +<pre class="hidden brush: css">* { + box-sizing: border-box; +} + +.flex-container { + background-color: #F4F7F8; + resize: horizontal; + overflow: hidden; + display: flex; + margin: 1em; +} + +.item { + margin: 1em; + padding: 0.5em; + width: 110px; + min-width: 0; + background-color: #1B5385; + color: white; + font-family: monospace; + font-size: 13px; +} + +.initial { + flex: initial; +} + +.auto { + flex: auto; +} + +.none { + flex: none; +} + +.four { + flex: 4; +} + +.two { + flex: 2; +} + +.one { + flex: 1; +} +</pre> + +<p>{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}</p> + +<p>기본적으로 플렉스 아이템은 콘텐츠의 최소 너비 미만으로 줄어들지 않습니다. {{cssxref("min-width")}}나 {{cssxref("min-height")}} 값을 지정해 바꿀 수 있습니다.</p> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush: css">/* Keyword values */ +flex: auto; +flex: initial; +flex: none; + +/* One value, unitless number: flex-grow */ +flex: 2; + +/* One value, length or percentage: flex-basis */ +flex: 10em; +flex: 30%; + +/* Two values: flex-grow | flex-basis */ +flex: 1 30px; + +/* Two values: flex-grow | flex-shrink */ +flex: 2 2; + +/* Three values: flex-grow | flex-shrink | flex-basis */ +flex: 2 2 10%; + +/* Global values */ +flex: inherit; +flex: initial; +flex: unset;</pre> + +<p><code>flex</code> 속성은 한 개에서 세 개의 값을 사용해 지정할 수 있습니다.</p> + +<ul> + <li><strong>값이 한 개일 때</strong>, 그 값은 다음 중 하나여야 합니다. + + <ul> + <li>{{cssxref("<number>")}}를 지정하면 <code><flex-grow></code>입니다.</li> + <li>{{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}를 지정하면 <code><flex-basis></code>입니다.</li> + <li><code>none</code>, <code>auto</code>, <code>initial</code> 중 하나를 지정할 수 있습니다.</li> + </ul> + </li> + <li><strong>값이 두 개일때</strong>, 첫 번째 값은 {{cssxref("<number>")}}여야 하며 <code><flex-grow></code>가 됩니다. 두 번째 값은 다음 중 하나여야 합니다. + <ul> + <li>{{cssxref("<number>")}}를 지정하면 <code><flex-shrink></code>입니다.</li> + <li>{{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 또는 <code>auto</code>를 지정하면 <code><flex-basis></code>입니다.</li> + </ul> + </li> + <li><strong>값이 세 개일 때</strong>는 다음 순서를 따라야 합니다. + <ol> + <li><code><flex-grow></code>에 사용할 {{cssxref("<number>")}}</li> + <li><code><flex-shrink></code>에 사용할 {{cssxref("<number>")}}</li> + <li><code><flex-basis></code>에 사용할 {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 또는 <code>auto</code></li> + </ol> + </li> +</ul> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt><code>initial</code></dt> + <dd>아이템 크기가 각각의 <code>width</code>와 <code>height</code> 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수는 있지만, 남은 공간을 채우려 늘어나지는 않습니다. <code>flex: 0 1 auto</code>와 동일합니다.</dd> + <dt><code>auto</code></dt> + <dd>아이템 크기가 각각의 <code>width</code>와 <code>height</code> 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수 있으며, 남은 공간을 채우기 위해 늘어날 수도 있습니다. <code>flex: 1 1 auto</code>와 동일합니다.</dd> + <dt><code>none</code></dt> + <dd>아이템 크기가 각각의 <code>width</code>와 <code>height</code> 속성에 따라 정해지며, 컨테이너의 크기에 관계 없이 변하지 않습니다. <code>flex: 0 0 auto</code>와 동일합니다.</dd> + <dt><a id="<'flex-grow'>" name="<'flex-grow'>"><code><'flex-grow'></code></a></dt> + <dd>플렉스 아이템의 {{cssxref("flex-grow")}}를 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 <code>0</code>입니다.</dd> + <dt><a id="<'flex-shrink'>" name="<'flex-shrink'>"><code><'flex-shrink'></code></a></dt> + <dd>플렉스 아이템의 {{cssxref("flex-shrink")}}를 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 <code>1</code>입니다.</dd> + <dt><a id="<'flex-basis'>" name="<'flex-basis'>"><code><'flex-basis'></code></a></dt> + <dd>플렉스 아이템의 {{cssxref("flex-basis")}}를 지정합니다. <code>0</code>을 지정하려면 <code><flex-grow></code> 또는 <code><flex-shrink></code>로 읽히지 않도록 단위를 붙여야 합니다. 생략 시 기본값은 <code>auto</code>입니다.</dd> +</dl> + +<div class="note"> +<p>한 개 또는 두 개의 단위 없는 숫자 값을 사용할 때, <code><flex-basis></code>의 값은 <code>auto</code>가 아니라 <code>0</code>이 됩니다. 더 자세한 정보는 <a href="https://drafts.csswg.org/css-flexbox/#flex-common">플렉시블 박스 레이아웃 모듈</a> 초안에서 확인할 수 있습니다.</p> +</div> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">#flex-container { + display: flex; + flex-direction: row; +} + +#flex-container > .flex-item { + flex: auto; +} + +#flex-container > .raw-item { + width: 5rem; +} +</pre> + +<pre class="brush: html"><div id="flex-container"> + <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> + <div class="raw-item" id="raw">Raw box</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: js">var flex = document.getElementById("flex"); +var raw = document.getElementById("raw"); +flex.addEventListener("click", function() { + raw.style.display = raw.style.display == "none" ? "block" : "none"; +}); +</pre> + +<pre class="brush: css">#flex-container { + width: 100%; + font-family: Consolas, Arial, sans-serif; +} + +#flex-container > div { + border: 1px solid #f00; + padding: 1rem; +} + +#flex-container > .raw-item { + border: 1px solid #000; +} +</pre> +</div> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제','100%','60')}}</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.flex")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>CSS 플렉스박스 안내서: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS 플렉스박스 안내서: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> +</ul> diff --git a/files/ko/web/css/float/index.html b/files/ko/web/css/float/index.html new file mode 100644 index 0000000000..149f9e39a5 --- /dev/null +++ b/files/ko/web/css/float/index.html @@ -0,0 +1,215 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference +translation_of: Web/CSS/float +--- +<div>{{CSSRef}}</div> + +<p>CSS 속성(property) <strong><code>float</code></strong> 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div> + + + +<p>부동<strong>(floating) 요소</strong> 는 <code>float</code> 의 계산값(computed value)이 <code>none</code>이 아닌 요소입니다.</p> + +<p>{{cssinfo}}</p> + +<p><code>float</code> 은 블록 레이아웃의 사용을 뜻하기 때문에, 일부 경우에 {{cssxref("display")}} 값의 계산값을 수정합니다:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">지정값(Specified value)</th> + <th scope="col">계산값</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>inline</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-block</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-table</code></td> + <td><code>table</code></td> + </tr> + <tr> + <td><code>table-row</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-row-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>flex</code></td> + <td><code>flex</code>, 다만 <code>float</code> 은 이러한 요소에 효과가 없음</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td><code>inline-flex</code>, 다만 <code>float</code> 은 이러한 요소에 효과가 없음</td> + </tr> + <tr> + <td><em>그외</em></td> + <td><em>변화없음</em></td> + </tr> + </tbody> +</table> + +<div class="note"><strong>주의: </strong>JavaScript에서 이 속성을 {{domxref("element.style")}} 객체의 멤버로서 참조한다면, 당신은 <code>cssFloat</code>으로 철자를 써야 합니다. 또한 Internet Explorer 8 이전 버전에서는 <code>styleFloat</code>으로 썼음을 주의하세요. 이는 DOM 멤버의 이름은 dash(-)로 구분된 CSS 이름의 카멜케이스(camel-case) 명이다는 규칙의 예외(이고 "class"는 "className"으로 <label>의 "for"는 "htmlFor"로 이스케이프할 필요와 같이 "float"이 JavaScript에서 예약어란 사실 때문)입니다.</div> + +<h2 id="구문">구문</h2> + +<pre class="brush:css">/* 키워드 값 */ +float: left; +float: right; +float: none; +float: inline-start; +float: inline-end; + +/* 전역 값 */ +float: inherit; +float: initial; +float: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>left</code></dt> + <dd>는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드입니다.</dd> + <dt><code>right</code></dt> + <dd>는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드입니다.</dd> + <dt><code>none</code></dt> + <dd>는 요소가 부동하지 않아야 함을 나타내는 키워드입니다.</dd> + <dt><code>inline-start</code></dt> + <dd>는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.</dd> + <dt><code>inline-end</code></dt> + <dd>는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { border: solid red; max-width: 70ex; } +h4 { float: left; margin: 0; }</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <h4>HELLO!</h4> + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. +</div></pre> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h3 id="float이_위치_지정되는_법">float이 위치 지정되는 법</h3> + +<p>위에서 말한 바와 같이, 요소가 부동되면 문서의 보통 흐름에서 빠집니다. 부동된 요소는 포함 박스나<em> 다른 부동된 요소</em>의 가장자리(edge)에 닿을 때까지 좌나 우로 이동됩니다.</p> + +<p>아래 이미지에는, 빨간 사각형이 세 개 있습니다. 둘은 좌에 부동되고 하나는 우에 부동됩니다. "왼쪽" 두 번째 빨간 사각형은 첫 번째 사각형 오른쪽에 놓임을 주의하세요. 추가 사각형은 그들이 포함 박스를 채울 때까지 계속해서 오른쪽으로 쌓입니다. 그 후엔 다음 줄로 넘어갑니다(wrap).</p> + +<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p> + +<h3 id="float_지우기">float 지우기</h3> + +<p>위 예제에서, 부동된 요소는 안에 텍스트가 부동된 블록보다 세로가 더 짧습니다. 그러나, 텍스트가 모든 부동 요소 하단 아래로 넘어갈 만큼 길지 않다면, 예상치 못한 결과를 볼 수 있습니다. 예를 들어, 위 단락(paragraph)이 오직 "Lorem ipsum dolor sit amet,"만 읽고 "Floats Example" 머릿글(heading)처럼 같은 스타일의 다른 머릿글이 이어졌다면, 두 번째 머릿글은 빨간 박스 사이에 보입니다. 아마도, 우리는 다음 머릿글이 완전히 왼쪽으로 정렬되기를 원합니다. 이를 달성하기 위해, 우리는 float을 지워야(clear) 합니다.</p> + +<p>이 예제에서 float을 지우는 가장 간단한 방법은 우리가 왼쪽으로 정렬되는 지 확인하고 싶은 새 머릿글에 {{Cssxref("clear")}} 속성을 추가하는 것입니다:</p> + +<pre class="brush:css">h2.secondHeading { clear: both; } +</pre> + +<p>그러나, 이 방법은 우리가 머릿글이 가로로 옆에 계속 보이기를 원하는 같은 블록 형식 문맥(<a href="/ko/docs/Web/Guide/CSS/Block_formatting_context" rel="internal">block formatting context</a>) 내에 다른 요소가 없을 때만 동작합니다. 우리 <code>h2</code> 좌우로 부동되는 사이드바(sidebar)인 형제(sibling)가 있다면, <code>clear</code> 사용은 강제로 머릿글이 두 사이드바 아래로 나타나게 하고 이는 아마 우리가 원하는 게 아닙니다.</p> + +<p>그들 아래 요소의 float을 지우는 게 선택사항이 아니라면, 다른 방법(approach)은 부동 요소가 담긴 컨테이너의 블록 형식 문맥을 제한하는 겁니다. 다시 위 예제를 참조하면, 빨간 박스 셋은 모두 <code>p</code> 요소 내에 있는 걸로 보입니다. 우리는 박스를 포함하도록 늘어나지만, 그 하단 밖(밑)으로 사라지지 않게 <code>hidden</code> 혹은 <code>auto</code> 로 p의 {{Cssxref("overflow")}} 속성을 설정할 수 있습니다:</p> + +<pre class="brush:css">p.withRedBoxes { overflow: hidden; height: auto; } +</pre> + +<div class="note"><strong>주의:</strong> <code>overflow</code> 를 <code>scroll</code> 로 설정하면 부동된 모든 자식(child) 요소도 포함합니다. 하지만 스크롤바가 콘텐츠의 높이에 상관없이 보입니다. 그 컨테이너가 콘텐츠를 수용하기 위해 늘어야(grow) 함을 나타내는 기본(default)임에도 불구하고, 여기에서 우리는 <code>height</code> 를 <code>auto</code> 로 설정하고 있습니다.</div> + +<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('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td><code>inline-start</code> 및 <code>inline-end </code>값이 추가됨.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>많은 새 값이, 아직 모두 분명히 정의되지 않음. 새 기능과 관련 없는 행동의 차이는 모두 의도치 않은 걸로 예상됩니다. 그러므로 보고해 주세요.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>변화 없음</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#float', 'float')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("css.properties.float")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li> +</ul> diff --git a/files/ko/web/css/font-family/index.html b/files/ko/web/css/font-family/index.html new file mode 100644 index 0000000000..2653a7e6fc --- /dev/null +++ b/files/ko/web/css/font-family/index.html @@ -0,0 +1,177 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference +translation_of: Web/CSS/font-family +--- +<div>{{CSSRef}}</div> + +<p>CSS <strong><code>font-family</code></strong> 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정할 수 있게 해줍니다. </p> + +<p>{{EmbedInteractiveExample("pages/css/font-family.html")}}</p> + +<p>값은 콤마로 구분하여 대체가 될 수 있음을 나타냅니다. 브라우저는 폰트 목록에서 컴퓨터에 설치되어 있거나 {{cssxref("@font-face")}} 규칙을 이용하여 다운로드 받을 수 있는 폰트 중 가장 첫번째 폰트를 선택할 것입니다.</p> + +<p>웹 제작자는 font-family 목록에 최소 한 개의 generic family를 추가해야 하는데, 시스템이나 {{cssxref("@font-face")}} 규칙을 이용 해 다운로드 받은 폰트 중에 특정 폰트가 있다는 것을 보장할 수 없기 때문입니다. generic family는 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. </p> + +<p>font-size를 설정하거나 다른 폰트 관련 속성들을 한꺼번에 지정하는 경우 {{cssxref("font")}}가 단축형으로 자주 사용됩니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css">/* A font family name and a generic family name */ +font-family: Gill Sans Extrabold, sans-serif; +font-family: "Goudy Bookletter 1911", sans-serif; + +/* A generic family name only */ +font-family: serif; +font-family: sans-serif; +font-family: monospace; +font-family: cursive; +font-family: fantasy; +font-family: system-ui; + +/* Global values */ +font-family: inherit; +font-family: initial; +font-family: unset; +</pre> + +<p>The <code>font-family</code> property lists one or more font families, separated by commas. Each font family is specified as either a <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">{{anch("family-name", "<family-name>")}}</span></font> or a <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">{{anch("generic-name", "<generic-name>")}}</span></font> value.</p> + +<p>The example below lists two font families, the first with a <code><family-name></code> and the second with a <code><generic-name></code>:</p> + +<pre>font-family: Gill Sans Extrabold, sans-serif; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt id="family-name"><code><family-name></code></dt> + <dd>The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted.</dd> + <dt id="generic-name"><code><generic-name></code></dt> + <dd> + <p>Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:</p> + + <dl> + <dt><code>serif</code></dt> + <dd style="font-family: serif;">Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.<br> + E.g. <span style="font-family: lucida bright,serif;">Lucida Bright</span>, <span style="font-family: lucida fax,serif;">Lucida Fax</span>, <span style="font-family: palatino,serif;">Palatino</span>, <span style="font-family: palatino linotype,serif;">"Palatino Linotype"</span>, <span style="font-family: palladio,serif;">Palladio</span>, <span style="font-family: urw palladio,serif;">"URW Palladio"</span>, <span style="font-family: serif;">serif</span>.</dd> + <dt><code>sans-serif</code></dt> + <dd style="font-family: sans-serif;">Glyphs have stroke endings that are plain.<br> + E.g. <span style="font-family: open sans,sans-serif;">"Open Sans"</span>, <span style="font-family: fira sans,sans-serif;">"Fira Sans"</span>, <span style="font-family: lucida sans,sans-serif;">"Lucida Sans"</span>, <span style="font-family: lucida sans unicode,sans-serif;">"Lucida Sans Unicode"</span>, <span style="font-family: trebuchet ms,sans-serif;">"Trebuchet MS"</span>, <span style="font-family: liberation sans,sans-serif;">"Liberation Sans"</span>, <span style="font-family: nimbus sans l,sans-serif;">"Nimbus Sans L"</span>, <span style="font-family: sans-serif;">sans-serif</span>.</dd> + <dt><code>monospace</code></dt> + <dd style="font-family: monospace;">All glyphs have the same fixed width.<br> + E.g. <span style="font-family: fira mono,monospace;">"Fira Mono"</span>, <span style="font-family: dejavu sans mono,monospace;">"DejaVu Sans Mono"</span>, <span style="font-family: menlo,monospace;">Menlo</span>, <span style="font-family: consolas,monospace;">Consolas</span>, <span style="font-family: liberation mono,monospace;">"Liberation Mono"</span>, <span style="font-family: monaco,monospace;">Monaco</span>, <span style="font-family: lucida console,monospace;">"Lucida Console"</span>, <span style="font-family: monospace;">monospace.</span></dd> + <dt><code>cursive</code></dt> + <dd style="font-family: cursive;">Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.<br> + E.g. <span style="font-family: brush script mt,cursive;">"Brush Script MT</span>", <span style="font-family: brush script std,cursive;">"Brush Script Std</span>", <span>"Lucida Calligraphy"</span>, <span>"Lucida Handwriting"</span>, <span style="font-family: apple chancery,cursive;">"Apple Chancery"</span>, <span style="font-family: cursive;">cursive</span>.</dd> + <dt><code>fantasy</code></dt> + <dd style="font-family: fantasy;">Fantasy fonts are primarily decorative fonts that contain playful representations of characters.<br> + E.g. <span style="font-family: papyrus,fantasy;">Papyrus</span>, <span style="font-family: herculanum,fantasy;">Herculanum</span>, <span style="font-family: party let,fantasy;">Party LET</span>, <span style="font-family: curlz mt,fantasy;">Curlz MT</span>, <span style="font-family: harrington,fantasy;">Harrington</span>, <span style="font-family: fantasy;">fantasy</span>.</dd> + <dt><code>system-ui</code></dt> + <dd>Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.</dd> + </dl> + </dd> +</dl> + +<h3 id="유효한_폰트_패밀리_이름">유효한 폰트 패밀리 이름</h3> + +<p>Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.</p> + +<p>For example, the following declarations are valid:</p> + +<pre class="brush:css">font-family: Gill Sans Extrabold, sans-serif; +font-family: "Goudy Bookletter 1911", sans-serif;</pre> + +<p>The following declarations are <strong>invalid</strong>:</p> + +<pre class="brush:css example-bad">font-family: Goudy Bookletter 1911, sans-serif; +font-family: Red/Black, sans-serif; +font-family: "Lucida" Grande, sans-serif; +font-family: Ahem!, sans-serif; +font-family: test@foo, sans-serif; +font-family: #POUND, sans-serif; +font-family: Hawaii 5-0, sans-serif;</pre> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="Some_common_font_families">Some common font families</h3> + +<pre class="brush: css">.serif { + font-family: Times, Times New Roman, Georgia, serif; +} + +.sansserif { + font-family: Verdana, Arial, Helvetica, sans-serif; +} + +.monospace { + font-family: Lucida Console, Courier, monospace; +} + +.cursive { + font-family: cursive; +} + +.fantasy { + font-family: fantasy; +} +</pre> + +<div class="hidden"> +<pre class="syntaxbox"><div class="serif">This is an example of a serif font.</div> +<div class="sansserif">This is an example of a sans-serif font.</div> +<div class="monospace">This is an example of a monospace font.</div> +<div class="cursive">This is an example of a cursive font.</div> +<div class="fantasy">This is an example of a fantasy font.</div></pre> +</div> + +<p>{{ EmbedLiveSample('Some_common_font_families','600','120') }}</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('CSS4 Fonts', '#generic-font-families', 'generic font families')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Adds new generic font families, specifically: <code>system-ui</code>, <code>emoji</code>, <code>math</code>, and <code>fangsong</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-family', 'font-family')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("css.properties.font-family")}}</p> diff --git a/files/ko/web/css/font-feature-settings/index.html b/files/ko/web/css/font-feature-settings/index.html new file mode 100644 index 0000000000..ad3bcb430b --- /dev/null +++ b/files/ko/web/css/font-feature-settings/index.html @@ -0,0 +1,128 @@ +--- +title: font-feature-settings +slug: Web/CSS/font-feature-settings +translation_of: Web/CSS/font-feature-settings +--- +<div>{{CSSRef}}</div> + +<p><strong><code>font-feature-settings</code></strong> CSS 속성은 오픈타입 폰트의 다양한 오픈타입 피처를 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}</div> + + + +<h2 id="문법">문법</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 기본값 사용 */ +font-feature-settings: normal; + +/* 오픈타입 피처 태그에 대해 값 설정 */ +font-feature-settings: "smcp"; +font-feature-settings: "smcp" on; +font-feature-settings: "swsh" 2; +font-feature-settings: "smcp", "swsh" 2; + +/* 전역 값 사용 */ +font-feature-settings: inherit; +font-feature-settings: initial; +font-feature-settings: unset;</pre> + +<p>가능하다면 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>인 {{cssxref("font-variant")}} 속성을 사용하거나, 각각의 피처와 연관된 {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}} 등을 사용하는 것이 <code>font-feature-settings</code>를 직접 사용하는 것에 비해 더 효율적이고, 예측 가능하게 동작하며 이해하기도 쉽습니다.</p> + +<p>이는 <code>font-feature-settings</code>는 원래 작은 대문자(Small caps)와 같이 접근할 수 있는 다른 방법이 없는 오픈타입 피처를 제어하기 위해 만들어진 저수준의 기능이기 때문입니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>기본값을 이용하여 텍스트를 표시합니다.</dd> + <dt><code><feature-tag-value></code></dt> + <dd>텍스트를 렌더링할 때, 오픈타입 피처를 활성화하거나 비활성화하기 위해 피처 태그 목록을 렌더링 엔진에 전달합니다. 피처 태그는 4개의 ASCII 문자로 이루어진 {{cssxref("<string>")}}이어야 합니다. 만약 태그가 네 글자보다 짧거나, 유니코드 <code>U+20</code> – <code>U+7E</code> 범위 바깥에 있는 문자를 포함한다면 속성 전체가 무효처리됩니다.<br> + 값은 양의 정수 값을 가집니다. 각각 <code>1</code>, <code>0</code>과 같은 의미를 가지는 키워드 <code>on</code> 과 <code>off</code>도 사용할 수 있습니다. 아무런 값이 설정되지 않았다면 기본값은 <code>1</code>입니다. <a href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt" title="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">stylistic alternates</a>와 같이 Boolean 타입이 아닌 오픈타입 피처의 경우, 값은 선택되어야 하는 글리프(글자)를 의미합니다. Boolean 타입인 경우에는 스위치라고 생각하시면 됩니다.</dd> + <dd></dd> +</dl> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예시">예시</h2> + +<h3 id="다양한_오픈타입_피처_활성화">다양한 오픈타입 피처 활성화</h3> + +<pre class="brush:css notranslate">/* 작은 대문자(small-caps) 대체 글리프를 사용합니다. */ +.smallcaps { font-feature-settings: "smcp" on; } + +/* 대문자와 소문자를 모두 작은 대문자로 변환합니다.(문장부호도 영향을 받습니다.)*/ +.allsmallcaps { font-feature-settings: "c2sc", "smcp"; } + +/* 영문 대문자 "O"와 구분하기 위해 대각선이 그려진 숫자 0을 사용합니다. */ +.nicezero { font-feature-settings: "zero"; } + +/* '역사적인' 형태를 사용하기 위해 'hist' 피처를 활성화합니다. */ +.hist { font-feature-settings: "hist"; } + +/* 표준합자(common ligatures)를 비활성화 합니다. 기본값은 활성 상태입니다. */ +.noligs { font-feature-settings: "liga" 0; } + +/* 고정폭 숫자(tabular figures)를 사용합니다. */ +td.tabular { font-feature-settings: "tnum"; } + +/* 자동 분수 입력을 활성화합니다. */ +.fractions { font-feature-settings: "frac"; } + +/* 가능한 swash 문자 중 두번째를 사용합니다. */ +.swash { font-feature-settings: "swsh" 2; } + +/* 스타일 세트(stylistic set) 7번을 사용합니다. */ +.fancystyle { + font-family: Gabriola; /* available on Windows 7, and on Mac OS */ + font-feature-settings: "ss07"; +} +</pre> + +<h2 id="Specifications">Specifications</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('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.font-feature-settings")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("@font-face/font-display", "font-display")}}</li> + <li>{{cssxref("@font-face/font-family", "font-family")}}</li> + <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> + <li>{{cssxref("@font-face/font-style", "font-style")}}</li> + <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> + <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> + <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li> + <li>{{cssxref("@font-face/src", "src")}}</li> + <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> + <li><a href="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Using the whole font</a><br> + <em>(<strong>Note:</strong> The <code>-moz</code> syntax is the old one. On Gecko, use the <code>-ms</code> syntax but with <code>-moz</code>.)</em></li> +</ul> diff --git a/files/ko/web/css/font-size/index.html b/files/ko/web/css/font-size/index.html new file mode 100644 index 0000000000..9f2a57e17c --- /dev/null +++ b/files/ko/web/css/font-size/index.html @@ -0,0 +1,220 @@ +--- +title: font-size +slug: Web/CSS/font-size +translation_of: Web/CSS/font-size +--- +<div>{{CSSRef}}</div> + +<p><strong><code>font-size</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 <code>em</code> 과 <code>ex</code> {{cssxref("<length>")}} 단위로 계산된 다른 항목들의 크기를 바꿉니다.</p> + +<p>{{EmbedInteractiveExample("pages/css/font-size.html")}}</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css notranslate">/* <absolute-size> 값 */ +font-size: xx-small; +font-size: x-small; +font-size: small; +font-size: medium; +font-size: large; +font-size: x-large; +font-size: xx-large; + +/* <relative-size> 값 */ +font-size: larger; +font-size: smaller; + +/* <length> 값 */ +font-size: 12px; +font-size: 0.8em; + +/* <percentage> 값 */ +font-size: 80%; + +/* 전역 값 */ +font-size: inherit; +font-size: initial; +font-size: unset; +</pre> + +<p>The <code>font-size</code> property is specified in one of the following ways:</p> + +<ul> + <li>As one of the <a href="https://developer.mozilla.org/ko/docs/Web/CSS/font-size$edit#absolute-size">absolute-size</a> or <a href="https://developer.mozilla.org/ko/docs/Web/CSS/font-size$edit#relative-size">relative-size</a> keywords</li> + <li>As a <code><length></code> or a <code><percentage></code>, relative to the parent element's font size</li> +</ul> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></dt> + <dd>키워드는 사용자의 기본 폰트(<code>medium</code>) 크기에 따라 정해집니다. <code><font size="1"></code> 부터 <code><font size="7"></code> 와 같은 HTML 과 유사하게 표현됩니다. 기본 유저 폰트 크기는 <code><font size="3">입니다</code>.</dd> + <dt><code>larger, smaller</code></dt> + <dd>키워드에 따라 부모 엘리먼트의 폰트 크기에서 일정 비율로 늘이거나 줄입니다.</dd> + <dd><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>{{cssxref("<length>")}}</strong></span></font></dd> + <br> + <dd> + <p>{{cssxref("<length>")}}는 항상 양수입니다. 만약 단위가 <code>em</code> 이나 <code>ex </code>로 표현되어 있으면, 부모 엘리먼트의 크기에 상대적으로 정해집니다. 예를 들어, 0.5em 은 부모 엘리먼트 폰트 크기의 절반이 현재 엘리먼트의 폰트 크기입니다. 만약 단위가 <code>rem</code>으로 지정되어 있다면, 폰트 크기는 <code>html</code> (루트) 엘리먼트의 폰트 크기에 따라 상대적으로 정해집니다.</p> + </dd> + <dt><code>{{cssxref("<percentage>")}}</code></dt> + <dd>양수인 {{cssxref("<percentage>")}} 는, 부모 엘리먼트의 폰트 크기의 비율입니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Possible_approaches" name="Possible_approaches">접근법</h2> + +<p>폰트 크기는 키워드나 pixel과 em처럼 수치 단위처럼 여러가지 방법으로 지정할 수 있습니다. 각 웹 페이지에 맞는 적합한 방법을 선택해야 합니다.</p> + +<h3 id="Keywords" name="Keywords">키워드</h3> + +<p>키워드는 웹의 폰트 크기를 정하는 좋은 방법입니다. 키워드로 엘리먼트의 폰트 크기를 정하면 웹 페이지의 모든 페이지의 폰트 크기가 상대적으로 지정되어 쉽게 전체 페이지의 폰트 크기를 늘이거나 줄일 수 있습니다.</p> + +<h3 id="Pixels" name="Pixels">픽셀</h3> + +<p>픽셀 단위의 정확함이 필요하면, 폰트 크기를 픽셀 단위로 (<code>px</code>) 설정하는 것이 좋은 선택입니다. px 값은 정적이고 운영체제 독립적이며 브라우저 독립적인 방법으로 브라우저에 글자들이 정확히 몇 픽셀 높이로 렌더링 되어야 하는지를 정할 수 있습니다다. 브라우저가 비슷한 효과를 내기 위해 각기 다른 방법을 사용하기 때문에 렌더링된 결과가 브라우저마다 아주 조금씩 달라질 수 있습니다.</p> + +<p>폰트 크기 설정을 조합해서 쓸 수 있습니다다. 예를 들어, 부모 엘리먼트의 크기를 <code>16px</code> 로 정하고 자식 엘리먼트의 크기를 <code>larger</code>로 설정하면, 자식엘리먼트의 폰트 크기는 페이지에 있는 부모 엘리먼트보다 크게 보입니다.</p> + +<div class="note"><strong>참고:</strong> 폰트 크기를 픽셀로 정하는 것은 사용자가 폰트 크기를 브라우저를 이용해 바꿀 수 없기 때문에 <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">접근성이 떨어집니다</a></em>. (예를 들어 시각에 제약이 있는 사용자가 폰트 크기를 웹 디자이너가 설정한 크기보다 더 크게 설정하려고 할 수 있습니다.) 그러므로, 접근성 높은 페이지를 만들고자 한다면, 폰트 크기를 픽셀 단위로 설정하는 것을 지양해야 합니다.</div> + +<h3 id="Ems" name="Ems"><code>em</code> 값</h3> + +<p>폰트 크기를 설정하는 또 하나의 방법은 <code>em</code> 값으로 설정하는 것입니다. <code>em</code> 값은 동적입니다. <code>font-size</code> 속성을 정의할 때, em 은 부모 엘리먼트의 폰트 크기와 같습니다. 만약, 전체 페이지에서 폰트 크기를 정의하지 않으면 높은 가능성으로 브라우저 기본인 16px로 지정됩니다. 따라서 기본 값일때 1em = 16px 이고 2em = 32px 를 나타냅니다. 만약 body 엘리먼트의 <code>font-size</code> 를 20px로 정한 경우, 1em = 20px 이고 2em = 40px 입니다. 2 라는 값은 현재 크기의 배수를 나타냄을 주의해야 합니다.</p> + +<p>em 표현을 pixel 값으로 표현해야 한다면 이 공식을 사용할 수 있습니다.</p> + +<pre class="notranslate">em = 구하고자 하는 엘리먼트의 pixel 값 / 부모 엘리먼트의 font-size pixel 값</pre> + +<p>예를 들어 페이지의 폰트 크기가 1em이고, 브라우저 기본 값이 1em = 16px로 정의되어 있다고 가정해보겠습니다. 만약 12px 폰트 크기로 지정하고 싶다면 0.75em(12/16 = 0.75) 로 정해야 합니다. 비슷하게, 10px로 정하고 싶다면 0.625em(10/16 = 0.625) 로 정합니다. 22px 은 1.375em 으로 표현합니다.</p> + +<p>문서 전체의 폰트 크기를 정할때 많이 쓰이는 방법은 body 태그의 폰트 크기를 10px 과 같은 62.5% (기본값 16px의 62.5%) 나 0.625em 으로 정하는 것 입니다. 이제 다른 엘리먼트의 폰트 크기를 계산하기 쉬운 px 을 10으로 나눈 em 단위를 이용해서 설정할 수 있습니다. 이 경우 6px = 0.6em 로, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em 로 표현합니다.</p> + +<pre class="brush:css notranslate">body { + font-size: 62.5%; /* font-size 1em = 10px 브라우저의 기본 설정 */ +} +span { + font-size: 1.6em; /* 1.6em = 16px */ +}</pre> + +<p>em 은 자동적으로 폰트의 크기를 적용해주기 때문에 CSS 에서 유용한 단위입니다.</p> + +<p>중요하게 기억할 점은, em 값은 합성 값입니다. 위의 CSS 에 아래 HTML 을 적용해보겠습니다.</p> + +<pre class="brush: html notranslate"><div> +<span>Outer <span>inner</span> outer</span> +</div> +</pre> + +<p>그 결과는</p> + +<p>{{EmbedLiveSample("Ems", 400, 40)}}</p> + +<p>브라우저의 기본 <code>font-size</code> 가 16px 이라고 가정해보면, "outer" 는 16px 로 그려지고 , "inner" 는 25.6px로 그려집니다. 왜냐하면 span의 <code>font-size</code> 가 1.6 em 으로 부모의 <code>font-size</code>에 상대적인데, 그 부모의 <code>font-size</code>도 상대적으로 계산되기 때문입니다. 이러한 동작을 <strong>합성</strong>이라고 부릅니다.</p> + +<h3 id="Rems" name="Rems"><code>rem</code></h3> + +<p><code>rem</code> 값은 합성 문제를 회피하기 위해 고안되었습니다. <code>rem</code> 값은 부모 엘리먼트가 아니라 최상위 <code>html</code> 엘리먼트에 상대적입니다. 다르게 표현하면, rem 은 부모 크기에 의해 폰크 크기가 정해지지 않도록 하여 합성 문제를 제거합니다.</p> + +<p>아래 CSS 는 이전 예제와 거의 동일합니다. 딱 하나 다른 점은 단위가 <code>rem</code> 으로 바뀌었습니다.</p> + +<pre class="brush: css notranslate">html { + font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ +} +span { + font-size: 1.6rem; +} +</pre> + +<p>이 CSS 를 같은 HTML 에 적용하면 이렇게 보입니다</p> + +<pre class="brush: html notranslate"><span>Outer <span>inner</span> outer</span></pre> + +<p>{{EmbedLiveSample("Rems", 400, 40)}}</p> + +<p>이 예제에서 "outer inner outer" 는 모두 16px 로 보입니다 (브라우저의 기본 폰트 설정이 16px 인 경우).</p> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="Example_1" name="Example_1">예제 1</h3> + +<pre class="brush: css notranslate">/* 문단 텍스트의 크기를 매우 크게 설정 */ +p { font-size: xx-large } + +/* h1 (제목 1)을 주변 텍스트보다 2.5배 큼 */ +h1 { font-size: 250% } + +/* span 태그 안의 텍스트를 16px 로 설정 */ +span { font-size: 16px; } +</pre> + +<h3 id="예제_2">예제 2</h3> + +<pre class="brush: css notranslate">.small { + font-size: xx-small; +} +.larger { + font-size: larger; +} +.point { + font-size: 24pt; +} +.percent { + font-size: 200%; +} +</pre> + +<pre class="brush: html notranslate"><span><h1 class="small">Small H1</h1> +<h1 class="larger">Larger H1</h1></span> +<span><h1 class="point">24 point H1</h1> +<h1 class="percent">200% H1</h1></span></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('예제_2','600','200')}}</p> + +<h2 id="Notes" name="Notes">참고</h2> + +<p>{{Cssxref("font-size")}} 속성의 <code>em</code> 과 <code>ex</code> 단위는 부모 엘리먼트의 폰트 크기에 상대적입니다(자기 엘리먼트의 폰트 크기에 상대적인 다른 속성과는 다르게). 이는 <code>em</code> 단위와 퍼센트 단위가 {{Cssxref("font-size")}} 에서 동일하게 동작함을 의미합니다.</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>font-size</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<p>{{Compat("css.properties.font-size")}}</p> diff --git a/files/ko/web/css/font-synthesis/index.html b/files/ko/web/css/font-synthesis/index.html new file mode 100644 index 0000000000..99810d8517 --- /dev/null +++ b/files/ko/web/css/font-synthesis/index.html @@ -0,0 +1,111 @@ +--- +title: font-synthesis +slug: Web/CSS/font-synthesis +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-synthesis +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>font-synthesis</code></strong> 속성은 브라우저가 굵은 글꼴과 이탤릭 글꼴을 합성하는 것을 허용할지 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/font-synthesis.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<p><code>font-synthesis</code>는 다음 방법 중 하나를 사용해 지정합니다.</p> + +<ul> + <li><code>none</code> 키워드.</li> + <li><code>weight</code> 또는 <code>style</code> 키워드.</li> + <li><code>weight</code>와 <code>style</code> 키워드.</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt><code>none</code></dt> + <dd>굵은 글꼴과 이탤릭 글꼴의 합성을 금지합니다.</dd> + <dt><code>weight</code></dt> + <dd>필요한 경우 굵은 글꼴을 합성할 수 있습니다.</dd> + <dt><code>style</code></dt> + <dd>필요한 경우 이탤릭 글꼴을 합성할 수 있습니다.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>대부분의 표준 서양 글꼴은 이탤릭과 굵은 글꼴을 포함하고 있으나 상용 글꼴은 그렇지 않은 경우도 많습니다. 한국, 중국, 일본을 포함한 비 알파벳 문화권의 문자 체계는 보통 이런 변형을 포함하지 않으며 브라우저의 글꼴 합성으로 인해 가독성이 떨어질 수 있습니다. 이 두 가지 경우에 대해 <code>font-synthesis</code>를 사용해 기본 글꼴 합성을 끄는 것이 좋을 수도 있습니다.</p> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="글꼴_합성_비활성화">글꼴 합성 비활성화</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><em class="syn">절 합성하세요! Synthesize!</em> +<br/> +<em class="no-syn">절 합성하지 마세요! Synthesize!</em> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">em { + font-weight: bold; +} +.syn { + font-synthesis: style weight; +} +.no-syn { + font-synthesis: none; +} +</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('글꼴_합성_비활성화', '', '50') }}</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('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.font-synthesis")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("font-style")}}</li> + <li>{{cssxref("font-weight")}}</li> +</ul> diff --git a/files/ko/web/css/font-weight/index.html b/files/ko/web/css/font-weight/index.html new file mode 100644 index 0000000000..bc3ff93c1c --- /dev/null +++ b/files/ko/web/css/font-weight/index.html @@ -0,0 +1,283 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +translation_of: Web/CSS/font-weight +--- +<div>{{CSSRef}}</div> + +<h2 id="요약">요약</h2> + +<p><strong><code>font-weight</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 <code>normal</code> 나 <code>bold</code> 일 때만 가능하다. </p> + +<p>{{cssinfo}}</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css">font-weight: normal; +font-weight: bold; + +/* Relative to the parent */ +font-weight: lighter; +font-weight: bolder; + +font-weight: 100; +font-weight: 200; +font-weight: 300; +font-weight: 400; +font-weight: 500; +font-weight: 600; +font-weight: 700; +font-weight: 800; +font-weight: 900; + +/* Global values */ +font-weight: inherit; +font-weight: initial; +font-weight: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>보통 폰트 가중치. <code>400</code> 과 같음.</dd> + <dt><code>bold</code></dt> + <dd>굵은 폰트 가중치. <code>700</code> 과 같음.</dd> + <dt><code>lighter</code></dt> + <dd>(가능한 폰트 가중치 중) 부모 요소(element) 보다 얇은 폰트 가중치.</dd> + <dt><code>bolder</code></dt> + <dd>(가능한 폰트 가중치 중) 부모 요소 보다 굵은 폰트 가중치.</dd> + <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt> + <dd>normal 과 bold 이외를 제공하는 폰트를 위한 숫자형 폰트 가중치.</dd> +</dl> + +<h3 id="대비책(Fallback)">대비책(Fallback)</h3> + +<p>만약 정확히 주어진 가중치를 사용할 수없다면, 실제로 렌더링 되는 가중치를 결정하기 위해 다음과 같은 경험적 접근이 적용된다:</p> + +<ul> + <li>만약 <code>500</code> 초과의 가중치가 주어지면, 가능한 굵은(darker) 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 얇은(lighter) 가중치 중 가장 가까운 것).</li> + <li>만약 <code>400</code> 미만의 가중치가 주어지면, 가능한 얇은 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 굵은 가중치 중 가장 가까운 것).</li> + <li>만약 가중치가 <code>400</code> 이 주어지면, <code>500</code> 이 사용된다. 만약 <code>500</code> 이 불가능하면, <code>500</code> 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.</li> + <li>만약 가중치가 <code>500</code> 이 주어지면, <code>400</code> 이 사용된다. 만약 <code>400</code> 이 불가능하면, <code>400</code> 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.</li> +</ul> + +<p>이것은 <code>normal</code> 과 <code>bold</code> 만 지원하는 폰트일 경우, 100-500 은 normal, 600-900 은 bold 임을 의미한다.</p> + +<h3 id="상대적_가중치의_의미">상대적 가중치의 의미</h3> + +<p><code>lighter</code> 나 <code>bolder</code> 가 주어진 경우, 요소의 절대적인 가중치를 계산하기 위해 다음 차트가 사용된다:</p> + +<table> + <thead> + <tr> + <th>상속된 값</th> + <th><code>bolder</code></th> + <th><code>lighter</code></th> + </tr> + </thead> + <tbody> + <tr> + <th>100</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>200</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>300</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>400</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>500</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>600</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>700</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>800</th> + <td>900</td> + <td>700</td> + </tr> + <tr> + <th>900</th> + <td>900</td> + <td>700</td> + </tr> + </tbody> +</table> + +<h3 id="일반적인_가중치_이름_매핑">일반적인 가중치 이름 매핑</h3> + +<p>100~900 의 가중치 값들은 다음의 일반적인 두께 이름으로 대응된다:</p> + +<dl> + <dt><code>100</code></dt> + <dd>Thin (Hairline)</dd> + <dt><code>200</code></dt> + <dd>Extra Light (Ultra Light)</dd> + <dt><code>300</code></dt> + <dd>Light</dd> + <dt><code>400</code></dt> + <dd>Normal</dd> + <dt><code>500</code></dt> + <dd>Medium</dd> + <dt><code>600</code></dt> + <dd>Semi Bold (Demi Bold)</dd> + <dt><code>700</code></dt> + <dd>Bold</dd> + <dt><code>800</code></dt> + <dd>Extra Bold (Ultra Bold)</dd> + <dt><code>900</code></dt> + <dd>Black (Heavy)</dd> +</dl> + +<h3 id="보간">보간</h3> + +<p><code>font-weight</code> 값은 100 단위로 보간된다. 보간은 실수 공간에서 이루어지며 100의 배수에 가까운 값으로 어림한다. 100의 배수 중간의 값들은 양의 무한대 방향의 가까운 값으로 어림한다.</p> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Alice was beginning to get very tired of sitting by her sister on the + bank, and of having nothing to do: once or twice she had peeped into the + book her sister was reading, but it had no pictures or conversations in + it, 'and what is the use of a book,' thought Alice 'without pictures or + conversations?' +</p> + +<div>I'm heavy<br/> + <span>I'm lighter</span> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">/* Set paragraph text to be bold. */ +p { + font-weight: bold; +} + +/* Set div text to two steps darker than + normal but less than a standard bold. */ +div { + font-weight: 600; +} + +/* Sets text enclosed within span tag + to be one step lighter than the parent. */ +span { + font-weight: lighter; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("Examples","400","300")}}</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('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>변경사항 없음</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td><code>font-weight</code> 이 animatable 로 정의됨</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>변경사항 없음</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>6.0</td> + <td>6.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ko/web/css/font/index.html b/files/ko/web/css/font/index.html new file mode 100644 index 0000000000..209669ed77 --- /dev/null +++ b/files/ko/web/css/font/index.html @@ -0,0 +1,345 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference +translation_of: Web/CSS/font +--- +<div>{{CSSRef}}</div> + +<p><strong><code>font</code></strong> CSS 속성은 {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, {{cssxref("font-family")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div> + + + +<p>다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정하며 이 과정에서 다른 속성으로 설정한 값을 덮어 쓸 수도 있습니다. <code>font</code> 속성으로 설정할 수 없는 {{cssxref("font-stretch")}}, {{ cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}}의 값도 초기값으로 돌아갑니다.</p> + +<h2 id="구문">구문</h2> + +<p><code>font</code> 속성은 하나의 키워드를 지정해 시스템 폰트를 사용하도록 설정할 수도 있고, 여러 글꼴 관련 속성의 단축 속성으로도 사용할 수 있습니다.</p> + +<p><code>font</code>를 시스템 폰트 키워드로 사용하려면 <code>{{anch("caption")}}</code>, <code>{{anch("icon")}}</code>, <code>{{anch("menu")}}</code>, <code>{{anch("message-box")}}</code>, <code>{{anch("small-caption")}}</code>, <code>{{anch("status-bar")}}</code> 중 하나를 사용해야 합니다.</p> + +<p><code>font</code>를 단축 속성으로 사용하려면,</p> + +<ul> + <li>다음 속성의 값을 포함해야 합니다. + <ul> + <li>{{cssxref("<font-size>")}}</li> + <li>{{cssxref("<font-family>")}}</li> + </ul> + </li> + <li>다음 속성의 값을 포함할 수 있습니다. + <ul> + <li>{{cssxref("<font-style>")}}</li> + <li>{{cssxref("<font-variant>")}}</li> + <li>{{cssxref("<font-weight>")}}</li> + <li>{{cssxref("<line-height>")}}</li> + </ul> + </li> + <li><code>font-style</code>, <code>font-variant</code>, <code>font-weight</code>는 <code>font-size</code>의 앞에 와야 합니다.</li> + <li><code>font-variant</code>는 CSS 2.1에서 정의한 <code>normal</code>과 <code>small-caps</code>만 사용할 수 있습니다.</li> + <li><code>line-height</code>는 <code>font-size</code> 바로 다음에 와야 하며 "/"로 구분해야 합니다. 예: "<code>16px/3</code>"</li> + <li><code>font-family</code>는 마지막 값이어야 합니다.</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt id="<'font-style'>"><code><'font-style'></code></dt> + <dd>{{cssxref("font-style")}} 참고</dd> + <dt id="<'font-variant'>"><code><'font-variant'></code></dt> + <dd>{{cssxref("font-variant")}} 참고</dd> + <dt id="<'font-weight'>"><code><'font-weight'></code></dt> + <dd>{{cssxref("font-weight")}} 참고</dd> + <dt id="<'font-stretch'>"><code><'font-stretch'></code></dt> + <dd>{{cssxref("font-stretch")}} 참고</dd> + <dt id="<'font-size'>"><code><'font-size'></code></dt> + <dd>{{cssxref("font-size")}} 참고</dd> + <dt id="<'line-height'>"><code><'line-height'></code></dt> + <dd>{{cssxref("line-height")}} 참고</dd> + <dt id="<'font-family'>"><code><'font-family'></code></dt> + <dd>{{cssxref("font-family")}} 참고</dd> +</dl> + +<h4 id="시스템_폰트_키워드">시스템 폰트 키워드</h4> + +<dl> + <dt id="caption"><code>caption</code></dt> + <dd>버튼, 드랍다운 메뉴 등 설명이 붙은 컨트롤에 사용하는 시스템 폰트.</dd> + <dt id="icon"><code>icon</code></dt> + <dd>아이콘 이름에 사용하는 시스템 폰트.</dd> + <dt id="menu"><code>menu</code></dt> + <dd>드랍다운 메뉴, 메뉴 리스트 등 메뉴에서 사용하는 시스템 폰트.</dd> + <dt id="message-box"><code>message-box</code></dt> + <dd>다이얼로그 창에 사용하는 폰트.</dd> + <dt id="small-caption"><code>small-caption</code></dt> + <dd>소형 컨트롤에 사용하는 시스템 폰트.</dd> + <dt id="status-bar"><code>status-bar</code></dt> + <dd>창의 상태표시줄에 사용하는 시스템 폰트.</dd> + <dt>추가 시스템 폰트 키워드</dt> + <dd>각 브라우저마다 더 많은 키워드를 접두사와 함께 구현하고 있습니다. Gecko는 <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code>, <code>-moz-field</code>를 가지고 있습니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">/* 글씨 크기 12픽셀, 줄 높이 14픽셀, 글꼴 sans-serif */ +p { font: 12px/14px sans-serif } + +/* 글씨 크기 부모 또는 기본값(부모가 없을 경우)의 80%, 글꼴 sans-serif */ +p { font: 80% sans-serif } + +/* 글씨 굵기 굵게, 스타일 기울이기, 글씨 크기 크게, 글꼴 serif */ +p { font: bold italic large serif } + +/* 창의 상태표시줄과 같은 글꼴 사용 */ +p { font: status-bar } +</pre> + +<p id="HTML_Content" style="display: none;">HTML Content</p> + +<pre class="brush: html" style="display: none;"><p> + Change the radio buttons below to see the generated shorthand and it's effect. +</p> +<form action="createShortHand()"> + <div class="cf"> + <div class="setPropCont"> + font-style<br/> + <input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()"> <label for="font-style-none">none</label><br/> + <input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()"> <label for="font-style-normal">normal</label><br/> + <input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()"> <label for="font-style-italic">italic</label><br/> + <input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()"> <label for="font-style-oblique">oblique</label> + </div> + + <div class="setPropCont"> + font-variant<br> + <input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()"> <label for="font-variant-none">none</label><br/> + <input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()"> <label for="font-variant-normal">normal</label><br/> + <input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()"> <label for="font-variant-small-caps">small-caps</label> + </div> + + <div class="setPropCont"> + font-weight<br/> + <input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()"> <label for="font-weight-none">none</label><br/> + <input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()"> <label for="font-weight-normal">normal</label><br/> + <input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()"> <label for="font-weight-bold">bold</label> + </div> + + <div class="setPropCont"> + font-size<br/> + <input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()"> <label for="font-size-12px">12px</label><br/> + <input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()"> <label for="font-size-16px">16px</label><br/> + <input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()"> <label for="font-size-24px">24px</label> + </div> + + <div class="setPropCont"> + line-height<br/> + <input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()"> <label for="line-height-none">none</label><br/> + <input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()"> <label for="line-height-1.2">1.2</label><br/> + <input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()"> <label for="line-height-3">3</label> + </div><br/> + + <div class="setPropCont fontfamily"> + font-family<br/> + <input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')"> <label for="font-family-courier">courier</label><br/> <input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()"> <label for="font-family-serif">serif</label><br /> + <input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()"> <label for="font-family-sans-serif">sans-serif</label><br /> <input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()"> <label for="font-family-arial">Arial</label><br /> + <input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()"> <label for="font-family-monospace">monospace</label><br /> <input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()"> <label for="font-family-cursive">cursive</label><br /> + <input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()"> <label for="font-family-fantasy">fantasy</label><br /> <input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()"> <label for="font-family-system-ui">system-ui</label><br /> + </div> + </div> + + <div class="cf propInputs"> + <div class="propInputCont tar"> + font : + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_font_style"><br/> + font-style <br/> + optional + + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_font_variant"> <br/> + font-variant <br/> + optional + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_font_weight"> <br/> + font-weight <br/> + optional + </div> + <div class="propInputCont"> + <input type="text" class="curCss mandatory" id="input_font_size"> <br/> + font-size <br/> + mandatory + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_line_height"> <br/> + line-height <br/> + optional + </div> + <div class="propInputCont"> + <input type="text" class="curCss mandatory" id="input_font_family"> <br/> + font-family <br/> + mandatory + </div> + </div> +</form> + +<div class="fontShortHand"> + This is some sample text. +</div> +<br/><br/><br/><br/><br/><br/> +</pre> + +<p id="CSS_Content" style="display: none;">CSS Content</p> + +<pre class="brush: css" style="display: none;">body, input { + font: 14px arial; + overflow: hidden; +} + +.propInputCont { + float: left; + text-align: center; + margin-right: 5px; + width: 80px; +} + +.setPropCont { + float: left; + margin-right: 5px; + width: 120px; +} + +.propInputs, .setPropCont { + margin-bottom: 1em; +} + +.curCss { + border: none; + border-bottom: 1px solid black; + text-align: center; + width: 80px; +} + +.mandatory { + border-bottom-color: red; +} + +.cf:before, +.cf:after { + content: " "; + display: table; +} + +.cf:after { + clear: both; +} + +.tar { + width: 40px; + text-align: right; +} +.fontfamily { + display: inline-block; +}</pre> + +<p id="JavaScript_Content" style="display: none;">JavaScript Content</p> + +<pre class="brush: js" style="display: none;">var textAreas = document.getElementsByClassName("curCss"), + shortText = "", + getCheckedValue, + setCss, + getProperties, + injectCss; + +getProperties = function () { + shortText = + getCheckedValue("font_style") + " " + + getCheckedValue("font_variant") + " " + + getCheckedValue("font_weight") + " " + + getCheckedValue("font_size") + + getCheckedValue("line_height") + " " + + getCheckedValue("font_family"); + + return shortText; +} + +getCheckedValue = function(radio_name) { + oRadio = document.forms[0].elements[radio_name]; + for (var i = 0; i < oRadio.length; i++) { + if(oRadio[i].checked) { + var propInput = "input_" + radio_name, + curElemName = "input_" + radio_name, + curElem = document.getElementById(curElemName); + curElem.value = oRadio[i].value; + + return oRadio[i].value; + } + } +} + +setCss = function () { + getProperties(); + injectCss(shortText); +} + +injectCss = function(cssFragment) { + old = document.body.getElementsByTagName("style"); + if (old.length > 1) { + old[1].parentElement.removeChild(old[1]); + } + css = document.createElement("style"); + css.innerHTML = ".fontShortHand{font: " + cssFragment + "}"; + document.body.appendChild(css); +} + +setCss();</pre> + +<p>{{ EmbedLiveSample('예제','100%', '380px')}}</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('CSS3 Fonts', '#font-prop', 'font')}}</td> + <td>{{ Spec2('CSS3 Fonts')}}</td> + <td>Added support for <code>font-stretch</code> values.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}</td> + <td>{{ Spec2('CSS2.1')}}</td> + <td>Added support for keywords.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#font', 'font')}}</td> + <td>{{ Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.font")}}</p> diff --git a/files/ko/web/css/frequency/index.html b/files/ko/web/css/frequency/index.html new file mode 100644 index 0000000000..6b3d88b859 --- /dev/null +++ b/files/ko/web/css/frequency/index.html @@ -0,0 +1,75 @@ +--- +title: <frequency> +slug: Web/CSS/frequency +tags: + - CSS + - CSS Data Type + - Reference + - Web +translation_of: Web/CSS/frequency +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS </a><strong><code><frequency></code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 목소리의 높낮이 등 주파수를 나타냅니다. 현재 어떤 CSS 속성도 <code><frequency></code>를 사용하지 않습니다.</p> + +<h2 id="구문">구문</h2> + +<p><code><frequency></code> 자료형은 {{cssxref("<number>")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성핳합니다. 다른 CSS 단위와 마찬가지로 숫자와 단위 문자 사이에 공백은 존재하지 않습니다.</p> + +<h3 id="단위">단위</h3> + +<dl> + <dt><code><a id="Hz" name="Hz">Hz</a></code></dt> + <dd>헤르츠로 주파수를 나타냅니다. 예시: <code>0Hz</code>, <code>1500Hz</code>, <code>10000Hz</code>.</dd> + <dt><code><a id="kHz" name="kHz">kHz</a></code></dt> + <dd>킬로헤르츠로 주파수를 나타냅니다. 예시: <code>0kHz</code>, <code>1.5kHz</code>, <code>10kHz</code>.</dd> +</dl> + +<div class="note"> +<p><strong>참고:</strong> <code>0</code>은 단위와 상관없이 언제나 같은 값을 나타내지만, 주파수에서는 단위를 생략할 수 없습니다. 즉 <code>0</code>은 유효한 주파수가 아니며 <code>0Hz</code>나 <code>0kHz</code>를 나타내지 않습니다. 단위 문자가 대소문자를 구분하지 않기는 하지만, <a href="https://ko.wikipedia.org/wiki/%EA%B5%AD%EC%A0%9C%EB%8B%A8%EC%9C%84%EA%B3%84">SI</a>에서 명시한 대로 "H"는 대문자로 표기하는 게 좋습니다.</p> +</div> + +<h2 id="예제"><span>예제</span></h2> + +<h3 id="유효한_주파수">유효한 주파수</h3> + +<pre class="notranslate">12Hz 양의 정수 +4.3Hz 실수 +14KhZ 단위가 대소문자를 구분하지 않지만, SI 표준에서 벗어난 표기는 비추천 ++0Hz 0, 양의 부호와 단위 +-0kHz 0, 음의 부호와 단위</pre> + +<h3 id="유효하지_않은_주파수">유효하지 않은 주파수</h3> + +<pre class="example-bad notranslate">12.0 단위가 없으므로 <number>지만 <frequency>가 아님 +7 Hz 수와 단위 사이에 공백은 불허 +0 <length>는 단위 없는 0을 받을 수 있지만, <frequency>는 불가능</pre> + +<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('CSS3 Values', '#frequency', '<frequency>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>참고:</strong> <code><frequency></code>는 <a class="external" href="https://www.w3.org/TR/CSS2/aural.html#q19.0" title="http://www.w3.org/TR/CSS2/">CSS Level 2</a>의, 지금은 사용하지 않는 청각적 <a href="/ko/docs/Web/CSS/@media#미디어_특성">미디어 특성</a>에서 음성의 높낮이를 설정할 때 사용했습니다. 이후 CSS3에서 다시 추가됐지만, 지금으로써는 어떤 CSS 속성에서도 사용하지 않습니다.</p> +</div> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.frequency")}}</p> diff --git a/files/ko/web/css/gap/index.html b/files/ko/web/css/gap/index.html new file mode 100644 index 0000000000..7aca4dc713 --- /dev/null +++ b/files/ko/web/css/gap/index.html @@ -0,0 +1,220 @@ +--- +title: gap (grid-gap) +slug: Web/CSS/gap +tags: + - CSS + - CSS Flexible Boxes + - CSS Grid + - CSS Multi-column Layout + - CSS Property + - Reference +translation_of: Web/CSS/gap +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>gap</code></strong> 속성은 행과 열 사이의 간격(거터)을 설정합니다. {{CSSxRef("row-gap")}}과 {{CSSxRef("column-gap")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다.</span></p> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<div>{{EmbedInteractiveExample("pages/css/grid-gap.html")}}</div> + +<div class="note"> +<p>원래 <a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>은 접두사를 붙인 <code>grid-gap</code> 속성을 정의했었으며, 현재 <code>gap</code>으로 대체하는 과정 중에 있습니다. 그러나 <code>grid-gap</code>만 구현하고 그리드 레이아웃용 <code>gap</code>은 구연하지 않은 브라우저를 지원하려면 위의 대화형 예제처럼 접두사 속성을 사용해야 합니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css; no-line-numbers">/* 단일 <length> 값 */ +gap: 20px; +gap: 1em; +gap: 3vmin; +gap: 0.5cm; + +/* 단일 <percentage> 값 */ +gap: 16%; +gap: 100%; + +/* 이중 <length> 값 */ +gap: 20px 10px; +gap: 1em 0.5em; +gap: 3vmin 2vmax; +gap: 0.5cm 2mm; + +/* 이중 또는 혼합 <percentage> 값 */ +gap: 16% 100%; +gap: 21px 82%; + +/* calc() 값 */ +gap: calc(10% + 20px); +gap: calc(20px + 10%) calc(10% - 5px); + +/* 전역 값 */ +gap: inherit; +gap: initial; +gap: unset; +</pre> + +<p><code>gap</code>은 <code><'row-gap'></code> 값을 사용해 지정하며, 선택적으로 <code><'column-gap'></code>을 추가할 수 있습니다. <code><'column-gap'></code>을 생략한 경우 <code><'row-gap'></code>과 동일한 값을 사용합니다.</p> + +<p><code><'row-gap'></code>과 <code><'column-gap'></code>은 각각 <code><length></code> 또는 <code><percentage></code>를 사용해 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt>{{CSSxRef("<length>")}}</dt> + <dd>그리드 선을 분할하는 간격의 너비.</dd> + <dt>{{CSSxRef("<percentage>")}}</dt> + <dd>그리드 선을 분할하는 간격의 너비. 요소 크기에 상대적입니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="플렉스_레이아웃">플렉스 레이아웃</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html;"><div id="flexbox"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight[5]">#flexbox { + display: flex; + flex-wrap: wrap; + width: 300px; + gap: 20px 5px; +} + +#flexbox > div { + border: 1px solid green; + background-color: lime; + flex: 1 1 auto; + width: 100px; + height: 50px; + +} +</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("플렉스_레이아웃", "auto", "120px")}}</p> + +<h3 id="그리드_레이아웃">그리드 레이아웃</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html;"><div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<div class="hidden"> +<pre class="brush: css">#grid { + grid-gap: 20px 5px; +} +</pre> +</div> + +<pre class="brush: css; highlight[5]">#grid { + display: grid; + height: 200px; + grid-template: repeat(3, 1fr) / repeat(3, 1fr); + gap: 20px 5px; +} + +#grid > div { + border: 1px solid green; + background-color: lime; +} +</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("그리드_레이아웃", "auto", "120px")}}</p> + +<h3 id="다열_레이아웃">다열 레이아웃</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><p class="content-box"> + This is some multi-column text with a 40px column + gap created with the CSS <code>gap</code> property. + Don't you think that's fun and exciting? I sure do! +</p> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css; highlight[3]">.content-box { + column-count: 3; + gap: 40px; +} +</pre> + +<h4 id="결과_3">결과</h4> + +<p>{{EmbedLiveSample("다열_레이아웃", "auto", "120px")}}</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("CSS3 Box Alignment", "#propdef-gap", "gap")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<h3 id="플렉스_레이아웃_지원">플렉스 레이아웃 지원</h3> + +<p>{{Compat("css.properties.gap.flex_context")}}</p> + +<h3 id="그리드_레이아웃_지원">그리드 레이아웃 지원</h3> + +<p>{{Compat("css.properties.gap.grid_context")}}</p> + +<h3 id="다열_레이아웃_지원">다열 레이아웃 지원</h3> + +<p>{{Compat("css.properties.gap.multicol_context")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>관련 CSS 속성: {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}}</li> + <li>그리드 레이아웃 안내서: <a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></li> +</ul> diff --git a/files/ko/web/css/general_sibling_combinator/index.html b/files/ko/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..7fb79bd5f0 --- /dev/null +++ b/files/ko/web/css/general_sibling_combinator/index.html @@ -0,0 +1,80 @@ +--- +title: 일반 형제 결합자 +slug: Web/CSS/General_sibling_combinator +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/General_sibling_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<p><strong>일반 형제 결합자</strong>(<code>~</code>)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있을 필요는 없습니다.</p> + +<pre class="brush: css no-line-numbers">/* 서로 형제인 문단 중 이미지 뒤쪽인 경우에만 선택 */ +img ~ p { + color: red; +}</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">former_element ~ target_element { <em>style properties</em> } +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p ~ span { + color: red; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>이건 빨강이 아닙니다.</span> +<p>여기 문단이 있습니다.</p> +<code>그리고 코드도 있습니다.</code> +<span>이제 빨강입니다!</span> +<code>더 많은 코드가 있습니다.</code> +<span>이것도 빨강입니다!</span> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "100%", 120)}}</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("CSS4 Selectors", "#general-sibling-combinators", "subsequent-sibling combinator")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Renames it the "subsequent-sibling" combinator.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#general-sibling-combinators", "general sibling combinator")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.general_sibling")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/인접_형제_선택자">인접 형제 결합자</a></li> +</ul> diff --git a/files/ko/web/css/getting_started/javascript/index.html b/files/ko/web/css/getting_started/javascript/index.html new file mode 100644 index 0000000000..2f9fd8f53b --- /dev/null +++ b/files/ko/web/css/getting_started/javascript/index.html @@ -0,0 +1,144 @@ +--- +title: JavaScript +slug: Web/CSS/Getting_Started/JavaScript +tags: + - 'CSS:Getting_Started' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<p>이 페이지는 입문서의 II 부입니다. II 부는 모질라에서의 CSS의 범위(scope)를 보여주는 예제들을 포함하고 있습니다.</p> +<p>II 부의 각 페이지는 CSS 가 다른 기술(technologies)들과 어떻게 상호작용하는지 설명하고 있습니다. 이 페이지들은 이들 다른 기술들을 사용하는 방법들을 가르치기위해서 디자인 되지는 않았습니다. 이 들 기술들을 자세히 배우려면 다른 입문서를 보세요.</p> +<p>대신 이 페이지들은 CSS의 다양한 사용법을 설명하기 위해서 디자인되었습니다. 이들 페이지들을 사용하려면, CSS에 대해 좀 알고 있어야만 합니다, 그러나, 다른 분야 기술들에대한 어떤 지식을 필요로하지는 않습니다.</p> +<h3 id=".EC.A0.95.EB.B3.B4:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28JavaScript.29" name=".EC.A0.95.EB.B3.B4:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28JavaScript.29">정보: 자바스크립트(JavaScript)</h3> +<p>자바스크립트(JavaScript)는 + <i> + 프로그래밍 언어</i> + 입니다. 모질라 애플리케이션( 예를 들면, 모질라 브라우저) 사용할 때, 컴퓨터가 실행시키는 코드의 많은 부분이 자바스크립트로 쓰여져 있습니다.</p> +<p>자바스크립트는 스타일 시트와 상호작용하여, 문서 스타일을 동적으로 변화시키는 프로그램을 쓸 수 있게 해줍니다.</p> +<p>이렇게 하는데 세가지 방법이 있습니다:</p> +<ul> + <li>문서의 스타일 시트 리스트와 함께 작동함으로써 — 예: 스타일 시트를 첨가, 제거, 또는 수정함으로써</li> + <li>스타일 시트의 규칙(rules)와 함께 작동함으로써 — 예: 규칙을 첨가, 제거, 또는 수정 함으로써</li> + <li>DOM내의 각 엘리먼트(element)와 함께 작동함으로써 — 예: 문서 스타일을 문서의 스타일 시트와는 독립적으로 수정함으로써</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + More details</caption> + <tbody> + <tr> + <td>모질라에서의 자바스트립트에 대해 더 많은 정보를 원하시면, 이 위키(wiki)에 있는 <a href="ko/JavaScript">JavaScript</a>페이지를 보세요.</td> + </tr> + </tbody> +</table> +<h3 id=".EC.95.A1.EC.85.98:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.98.88.EC.A0.9C.28demonstration.29" name=".EC.95.A1.EC.85.98:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.98.88.EC.A0.9C.28demonstration.29">액션: 자바스크립트 예제(demonstration)</h3> +<p>새로은 HTML 문서 <code>doc5.html</code>를 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE> +<LINK rel="stylesheet" type="text/css" href="style5.css"> +<SCRIPT type="text/javascript" src="script5.js"></SCRIPT> +</HEAD> + +<BODY> +<H1>JavaScript sample</H1> + +<DIV id="square"></DIV> + +<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON> + +</BODY> +</HTML> +</pre> +</div> +<p>새로운 CSS 파일 <code>style5.css</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:</p> +<div style="width: 48em;"> + <pre>/*** JavaScript demonstration ***/ +#square { + width: 20em; + height: 20em; + border: 2px inset gray; + margin-bottom: 1em; + } + +button { + padding: .5em 2em; + } +</pre> +</div> +<p>새로운 텍스트 파일 <code>script5.js</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:</p> +<div style="width: 48em;"> + <pre>// JavaScript demonstration +function doDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "#fa4" + button.setAttribute("disabled", "true") + setTimeout(clearDemo, 2000, button) + } + +function clearDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "transparent" + button.removeAttribute("disabled") + } +</pre> +</div> +<p>브라우저에서 문서을 열고 버튼을 누르세요.</p> +<p>이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:</p> +<table> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><b>JavaScript demonstration</b></p> + <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;"> + <div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><b>JavaScript demonstration</b></p> + <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;"> + <div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p>이 예제에서 주의할 점:</p> +<ul> + <li>HTML 문서는 전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.</li> + <li>스크립트는 DOM안의 개개의 엘리먼트(element)와 함께 작동합니다. 스크립트는 사각형(square)의 스타일을 직접 수정합니다. 스크립트는 버튼의 스타일을 속성(attribute)을 변경함으로써 간접적으로 수정합니다.</li> + <li>자바스크립트에서 <code>document.getElementById("square")</code> 는 그 기능상 CSS 선별자(selector) <code>#square</code> 와 유사합니다.</li> + <li>자바스크립트에서 <code>backgroundColor</code>는 CSS 속성 <code>background-color</code>에 상응합니다.</li> + <li>브라우저는 버튼이 사용할 수 없게 되었을 때 그 모습을 바꾸어 주는 <code>button{{ mediawiki.external('disabled=\"true\"') }}</code>에 대한 내장된 CSS 규칙을 가지고 있습니다.</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>스크립트를 변경해서 사각형(square)이 색이 변할 때 오른쪽으로 20em 점프했다가 이후 되 돌아오게 만드세요.</td> + </tr> + </tbody> +</table> +<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4> +<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p> +<p>이 예제에서 HTML 문서가 단지 버튼 엘리먼트만이 스크립트를 사용함에도 불구하고 스크립트에 링크를 가지고 있었습니다. 모질라는 CSS를 확장해서 자바스크립트 코드를 (내용물과 다른 스타일 시트들도) 선택된 엘리먼트에 링크할 수 있게 합니다. 다음 페이지에서는 다음을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XBL_bindings">XBL bindings</a></b></p> diff --git a/files/ko/web/css/getting_started/svg_graphics/index.html b/files/ko/web/css/getting_started/svg_graphics/index.html new file mode 100644 index 0000000000..d8ca001fb2 --- /dev/null +++ b/files/ko/web/css/getting_started/svg_graphics/index.html @@ -0,0 +1,195 @@ +--- +title: SVG graphics +slug: Web/CSS/Getting_Started/SVG_graphics +tags: + - 'CSS:Getting_Started' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +<p>이 페이지는 그래픽을 만들기 위한 특별한 언어 SVG를 설명합니다.</p> +<p>SVG 기능이 있는 모질라 브라우저에서 작동하는 간단한 예제를 만듭니다.</p> +<h3 id=".EC.A0.95.EB.B3.B4:_SVG" name=".EC.A0.95.EB.B3.B4:_SVG">정보: SVG</h3> +<p> + <i> + SVG</i> + (Scalable Vector Graphics, 스케일러블 벡터 그래픽)은 그래픽을 만들어내기 위한 XML-기반 언어입니다.</p> +<p>움직이지 않는 이미지(static image)를 위해 사용될 수 있으며, 또한 애니메이션 과 사용자 인터페이스를 위해서도 사용될 수 있습니다.</p> +<p>다른 XML-기반 언어들과 같이, SVG는 CSS 스타일 시트를 지원하여 그래픽에 사용되는 스타일을 그래픽의 내용물과 분리시킬 수 있게 합니다.</p> +<p>또한, 다른 문서 마크업 언어들과 함께 사용되는 스타일 시트들도 이미지가 요구되는 곳에 SVG 그래픽의 URL을 지정할 수 있습니다. 예를들면, HTML 문서와 함께 사용하는 스타일 시트에서 <code>background</code> 속성 값에 SVG값의 URL을 지정할 수 있습니다.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + More details</caption> + <tbody> + <tr> + <td>이글을 쓰는 시점에서(2005년 중반), 모질라 브라우저의 몇몇 최근 빌드만이 SVG 지원을 내장하고 있었습니다. + <p><a class="external" href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>에서 제공되는 것 같은 플럭인(plugin)을 인스톨하면 다른 버전에서도 SVG 지원을 추가할 수 있습니다.</p> + <p>모질라에서의 SVG에 관한 더많은 정보를 원하시면, 이 위키안의 <a href="ko/SVG">SVG</a> 페이지를 보세요.</p> + </td> + </tr> + </tbody> +</table> +<h3 id=".EC.95.A1.EC.85.98:_SVG_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_SVG_.EC.98.88.EC.A0.9C">액션: SVG 예제</h3> +<p>새로운 SVG 문서를 텍스트 파일 <code>doc8.svg</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><?xml version="1.0" standalone="no"?> + +<?xml-stylesheet type="text/css" href="style8.css"?> + +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + +<title>SVG demonstration</title> +<desc>Mozilla CSS Getting Started - SVG demonstration</desc> + +<defs> + <g id="segment" class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g id="quadrant"> + <use xlink:href="#segment"/> + <use xlink:href="#segment" transform="rotate(18)"/> + <use xlink:href="#segment" transform="rotate(36)"/> + <use xlink:href="#segment" transform="rotate(54)"/> + <use xlink:href="#segment" transform="rotate(72)"/> + </g> + <g id="petals"> + <use xlink:href="#quadrant"/> + <use xlink:href="#quadrant" transform="rotate(90)"/> + <use xlink:href="#quadrant" transform="rotate(180)"/> + <use xlink:href="#quadrant" transform="rotate(270)"/> + </g> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> + </defs> + +<text id="heading" x="-280" y="-270"> + SVG demonstration</text> +<text id="caption" x="-280" y="-250"> + Move your mouse pointer over the flower.</text> + +<g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" + stroke="none" fill="url(#fade)"/> + <use id="outer-petals" xlink:href="#petals"/> + <use id="inner-petals" xlink:href="#petals" + transform="rotate(9) scale(0.33)"/> + </g> + +</svg> +</pre> +</div> +<p>새로운 CSS 문서를 텍스트 파일 <code>style8.css</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre>/*** SVG demonstration ***/ + +/* page */ +svg { + background-color: beige; + } + +#heading { + font-size: 24px; + font-weight: bold; + } + +#caption { + font-size: 12px; + } + +/* flower */ +#flower:hover { + cursor: crosshair; + } + +/* gradient */ +#fade-stop-1 { + stop-color: blue; + } + +#fade-stop-2 { + stop-color: white; + } + +/* outer petals */ +#outer-petals { + opacity: .75; + } + +#outer-petals .segment-fill { + fill: azure; + stroke: lightsteelblue; + stroke-width: 1; + } + +#outer-petals .segment-edge { + fill: none; + stroke: deepskyblue; + stroke-width: 3; + } + +#outer-petals .segment:hover > .segment-fill { + fill: plum; + stroke: none; + } + +#outer-petals .segment:hover > .segment-edge { + stroke: slateblue; + } + +/* inner petals */ +#inner-petals .segment-fill { + fill: yellow; + stroke: yellowgreen; + stroke-width: 1; + } + +#inner-petals .segment-edge { + fill: none; + stroke: yellowgreen; + stroke-width: 9; + } + +#inner-petals .segment:hover > .segment-fill { + fill: darkseagreen; + stroke: none; + } + +#inner-petals .segment:hover > .segment-edge { + stroke: green; + } +</pre> +</div> +<p>문서를 SVG 기능이 있는(SVG-enabled) 브라우저에서 여세요. 마우스 포인터(mouse pointer)를 그래픽위로 움직여 보세요.</p> +<p>이 위키페이지는 SVG를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 다음과 같이 보입니다:</p> +<table style="border: 2px outset #36b;"> + <tbody> + <tr> + <td><img alt="SVG demonstration"></td> + </tr> + </tbody> +</table> +<p>이 예제에서 주의할 점:</p> +<ul> + <li>SVG 문서는 전처럼 스타일 시트에 링크되어 있습니다.</li> + <li>SVG는 그 자신만의 CSS 스타일 시트와 값을 가지고 있습니다. 이들중 몇가지는 HTML을 위한 CSS의 속성과 비슷합니다.</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>스타일 시트를 변경해서, 마우스 포인터가 안쪽 꽃잎들 중 한개 위에 오게 되면, 바깥 쪽 꽃잎이 작동하는 방식은 바뀌지 않은채 모든 안쪽꽃잎 색이 핑크(pink)색으로 변하게 하세요</td> + </tr> + </tbody> +</table> +<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4> +<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p> +<p>이 예제에서 SVG 기능이 있는(SVG enabled) 브라우저는 이미 SVG 엘리먼트를 디스플레이하는 방법을 알고 있습니다. 스타일 시트는 단지 그 디스플레이를 특정 방식으로 수정할 뿐 입니다. 그러나 디스플레이하는 방식이 미리 지정되어 있지 않은 범용(general-purpose) XML 문서를 위해서 CSS를 사용할 수있습니다. 다음 페이지에서는 이를 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XML_data">XML data</a></b></p> +<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pl": "pl/CSS/Na_pocz\u0105tek/Grafika_SVG" } ) }}</p> diff --git a/files/ko/web/css/getting_started/xbl_bindings/index.html b/files/ko/web/css/getting_started/xbl_bindings/index.html new file mode 100644 index 0000000000..6799095812 --- /dev/null +++ b/files/ko/web/css/getting_started/xbl_bindings/index.html @@ -0,0 +1,198 @@ +--- +title: XBL bindings +slug: Web/CSS/Getting_Started/XBL_bindings +tags: + - 'CSS:Getting_Started' +translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets +--- +<p>이 페이지는 모질라에서 CSS를 사용하여 복잡한 애플리케이션의 구조를 향상시켜 코드와 자원(resources)을 보다 쉽게 재사용(recycle)할 수 있게 만드는 방법을 설명합니다.</p> +<p>이 테크닉을 간단한 예제에 적용시켜 봅니다.</p> +<h3 id=".EC.A0.95.EB.B3.B4:_XBL_.EB.B0.94.EC.9D.B8.EB.94.A9.28bindings.29" name=".EC.A0.95.EB.B3.B4:_XBL_.EB.B0.94.EC.9D.B8.EB.94.A9.28bindings.29">정보: XBL 바인딩(bindings)</h3> +<p>마크업 언어와 CSS에서 제공되는 구조(structure)는 각 부분이 독립적이고(self-contained) 재 사용되어야 하는 복잡한 애플리케이션에 이상적이라고는 할 수 없습니다. 스타일 시트들을 다른 파일들에 저장할 수 있고, 스크립트들도 다른 파일들에 저장 해 놓을 수 있으나, 문서에서 이들 파일들을 하나의 전체로서 링크해야만 합니다.</p> +<p>또 다른 구조적 제한사항은 내용물에 관한 것입니다. CSS를 사용하여 선택된 엘리먼트들에 내용물을 제공해 줄 수 있으나, 내용물은 텍스트와 이미지에 한정되어 있으며, 그 위치지정은(positioning) 선택된 엘리먼트의 앞 또는 뒤로 한정되어 있습니다.</p> +<p>모질라는 이러한 제한 사항들을 극복할 미케니즘을 제공합니다: + <i> + XBL</i> + (XML 바인딩 언어, XML Binding Language)가 바로 그것입니다. XBL을 사용해서 선택된 엘리먼트를 다음의 것들과 링크시킬 수 있습니다:</p> +<ul> + <li>에리먼트의 스타일 시트</li> + <li>엘리먼트의 내용물</li> + <li>엘리먼트의 속성(property)과 메소드(method)</li> + <li>엘리먼트의 이벤트 핸들러(event hadler)</li> +</ul> +<p>문서 레벨에서 모든것을 링크시키는 것을 피할 수 있기 때문에, 유지와 재사용이 쉬운 독립적인 부분들을 만들어 낼 수 있습니다.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + More details</caption> + <tbody> + <tr> + <td>XBL 바인딩에 대한 더 많은 정보를 원하시면, 이 위키의 <a href="ko/XBL">XBL</a> 페이지를 보세요.</td> + </tr> + </tbody> +</table> +<h3 id=".EC.95.A1.EC.85.98:_XBL_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_XBL_.EC.98.88.EC.A0.9C">액션: XBL 예제</h3> +<p>새로운 HTML 문서 <code>doc6.html</code>를 만드세요. 아래의 내용물을 복사해서 붙여넣으세요.</p> +<div style="width: 48em;"> + <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE> +<LINK rel="stylesheet" type="text/css" href="style6.css"></strong> +</HEAD> + +<BODY> +<H1>XBL demonstration</H1> +<DIV id="square">Click Me</DIV> +</BODY> + +</HTML> +</pre> +</div> +<p>새로운 CSS 파일 <code>style6.css</code>을 만드세요. 이 스타일 시트는 문서 스타일을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.</p> +<div style="width: 48em;"> + <pre>/*** XBL demonstration ***/ +#square { + -moz-binding: url("square.xbl#square"); + } +</pre> +</div> +<p>새로운 텍스트 파일 <code>square.xbl</code>을 만드세요. 이 스타일 시트는 XBL 바인딩(binding)을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<p> </p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><?xml version="1.0"?> +<!DOCTYPE bindings> +<bindings xmlns="http://www.mozilla.org/xbl"> + +<binding id="square"> + + <resources> + <stylesheet src="bind6.css"/> + </resources> + + <content xmlns="http://www.w3.org/1999/xhtml"> + <div anonid="square"/> + <button anonid="button" type="button"> + <xbl:children/> + </button> + </content> + + <implementation> + + <field name="square"><![CDATA[ + document.getAnonymousElementByAttribute(this, "anonid", "square") + ]]></field> + + <field name="button"><![CDATA[ + document.getAnonymousElementByAttribute(this, "anonid", "button") + ]]></field> + + <method name="doDemo"> + <body><![CDATA[ + this.square.style.backgroundColor = "#cf4" + this.square.style.marginLeft = "20em" + this.button.setAttribute("disabled", "true") + setTimeout(this.clearDemo, 2000, this) + ]]></body> + </method> + + <method name="clearDemo"> + <parameter name="me"/> + <body><![CDATA[ + me.square.style.backgroundColor = "transparent" + me.square.style.marginLeft = "0" + me.button.removeAttribute("disabled") + ]]></body> + </method> + + </implementation> + + <handlers> + <handler event="click" button="0"><![CDATA[ + if (event.originalTarget == this.button) this.doDemo() + ]]></handler> + </handlers> + + </binding> + +</bindings> +</pre> +</div> +<p>새로운 CSS 파일 <code>bind6.css</code>을 만드세요. 이 새 스타일 시트는 바인딩에대한 스타일(style for the binding)을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.</p> +<div style="width: 48em;"> + <pre>/*** XBL demonstration ***/ +[anonid="square"] { + width: 20em; + height: 20em; + border: 2px inset gray; + } + +[anonid="button"] { + margin-top: 1em; + padding: .5em 2em;" + } +</pre> +</div> +<p>브라우저에서 문서을 열고 버튼을 누르세요.</p> +<p>이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:</p> +<table> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border: 2px outset #36b; padding: 0 4em .5em .5em;"> + <tbody> + <tr> + <td> + <p><b>XBL demonstration</b></p> + <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white; margin-right: 5em;"> + <div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 0 4em .5em .5em;"> + <tbody> + <tr> + <td> + <p><b>XBL demonstration</b></p> + <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #cf4; margin-left: 5em;"> + <div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p>이 예제에서 주의할 점:</p> +<ul> + <li>HTML 문서는 전처럼 문서의 스타일 시트에 링크되어 있습니다. 그러나 어떤 자바스크립트 코드에도 링크되어 있지 않습니다.</li> + <li>문서는 아무 버튼도 포함하고 있지 않습니다. 문서는 버튼 레이블(label)의 텍스트만을 포함하고 있습니다. 버튼은 바인딩(binding)에 의해서 더해집니다.</li> + <li>문서 스타일 시트는 바인딩(binding)에 링크되어 있습니다.</li> + <li>바인딩(binding)은 그 자신의 스타일에 링크되어 있고, 그 자신의 내용물과 자바스크립트 코드를 지원합니다. 따라서, 바인딩은 독립적으로(self-contained) 되어있습니다.</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> + <caption> + Challenges</caption> + <tbody> + <tr> + <td>XBL 파일을 수정해서 사각형(square)이 색이 바뀔 때 오른쪽으로 점핑하는 대신 폭이(width) 2배가 되도록 하세요. + <p>DOM Inspector tool을 사용하여 문서를 조사해서 추가된 내용물을 확인해 보세요.</p> + </td> + </tr> + </tbody> +</table> +<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4> +<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p> +<p>이 문서에서, 사각형(square)과 버튼은 독립적인 HTML 문서내에서 작동하는 + <i> + 위젯(widget)</i> + 이 되었습니다. 모질라는 사용자 인터페이스를 만들어내는 데 특별한 마크업 언어를 가지고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></b></p> +<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pl": "pl/CSS/Na_pocz\u0105tek/Wi\u0105zania_XBL" } ) }}</p> diff --git a/files/ko/web/css/getting_started/xml_data/index.html b/files/ko/web/css/getting_started/xml_data/index.html new file mode 100644 index 0000000000..fc674a29e4 --- /dev/null +++ b/files/ko/web/css/getting_started/xml_data/index.html @@ -0,0 +1,186 @@ +--- +title: XML data +slug: Web/CSS/Getting_Started/XML_data +tags: + - 'CSS:Getting_Started' +translation_of: Archive/Beginner_tutorials/XML_data +--- +<p>이 페이지는 XML 데이터와 함께 CSS를 사용할 수 있는 방법에 대한 예제들을 담고 있습니다. +</p><p>샘플 XML 문서와 이 문서를 브라우저에 디스플레이할 때 사용할 수 있는 스타일 시트를 만듭니다. +</p> +<h3 id=".EC.A0.95.EB.B3.B4:_XML_.EB.8D.B0.EC.9D.B4.ED.84.B0" name=".EC.A0.95.EB.B3.B4:_XML_.EB.8D.B0.EC.9D.B4.ED.84.B0"> 정보: XML 데이터 </h3> +<p><i><a href="ko/XML">XML</a></i>(확장 마크업 언어, eXtensible Markup Lanugage)는 모든 종류의 구조화 된 데이터를 위한 범용(general-purpose) 언어입니다. +</p><p>디폴트로, 모질라 브라우저는 XML을 XML파일의 원래 데이터와 매우 유사한 포맷으로 디스플레이합니다. +데이터의 구조를 정의하는 실제 택들을 볼 수 있습니다. +</p><p>CSS 스타일 시트를 XML 문서와 링크함으로써, 이를 디스플레이하는 다른 방식을 정의할 수 있습니다. +이를 위해, 스타일 시트는 XML 문서의 택들과 HTML에 의해 사용되는 디스플레이 유형들(types)에 매핑(map)시키는 규칙들을 사용합니다. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Example +</caption><tbody><tr> +<td> XML 문서의 데이터는 <code>html:input</code> 택들을 사용합니다. 문서의 <small>INFO</small> 엘리먼트들이 HTML 단락처럼 디스플레이 되기 원한다고 가정합시다. +<p>문서의 스타일 시트에 <small>INFO</small>엘리먼트가 어떻게 디스플레이 될 것인지 지정합니다: +</p> +<div style="width: 30em;"> +<pre class="eval">INFO { + display: block; + margin: 1em 0; + } +</pre> +</div> +</td></tr></tbody></table> +<p>가장 흔한 <code>display</code> 속성 값은 다음과 같습니다: +</p> +<table style="margin-left: 2em;"> +<tbody><tr> +<td style="padding-right: 2em;"><code>block</code></td><td>HTML의 <small>DIV</small>처럼 나타남 (머리글, 문단 등) +</td></tr> +<tr> +<td><code>inline</code></td><td>HTML의 <small>SPAN</small>처럼 나타남 (문서의 강조) +</td></tr></tbody></table> +<p>HTML에서와 같은 방식으로 폰트, 스페이싱(spacing) 그리고 다른 세부사항들을 지정하는 자기 자신의 스타일 규칙을 더하세요. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> +<caption>More details +</caption><tbody><tr> +<td> <code>display</code>의 다른 값들은 그 엘리먼트를 리스트 아이템 처럼 , 또는 표의 컴포넌트(component) 처럼 디스플레이 합니다. +<p>디스플레이 유형들(types)의 완전한 리스트를 원하시면, CSS 규약의 <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a>을 보세요. +</p><p>CSS 만을 사용하면, 디스플레이의 구조가 문서의 구조와 똑 같을 것입니다. +다른 기술을 사용해서 디스플레이 구조를 수정할 수 있습니다 — 예를 들면, XBL로 내용물을 더할 수 있으며 자바스크립트로 DOM을 수정할 수 있습니다. +</p><p>모질라에서의 XML에 관해서 더 많은 정보를 원하시면, 이 위키의 <a href="ko/XML">XML</a> 페이지를 보세요. +</p> +</td></tr></tbody></table> +<h3 id=".EC.95.A1.EC.85.98:_XML_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_XML_.EC.98.88.EC.A0.9C"> 액션: XML 예제 </h3> +<p>새로운 XML 문서를 텍스트 파일 <code>doc9.xml</code>로 만드세요. +아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0"?> +<!-- XML demonstration --> + +<?xml-stylesheet type="text/css" href="style9.css"?> + +<!DOCTYPE planet> +<planet> + +<ocean> +<name>Arctic</name> +<area>13,000</area> +<depth>1,200</depth> +</ocean> + +<ocean> +<name>Atlantic</name> +<area>87,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Pacific</name> +<area>180,000</area> +<depth>4,000</depth> +</ocean> + +<ocean> +<name>Indian</name> +<area>75,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Southern</name> +<area>20,000</area> +<depth>4,500</depth> +</ocean> + +</planet> +</pre></div> +<p>새로운 CSS 문서를 텍스트 파일 <code>style9.css</code>로 만드세요. +아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** XML demonstration ***/ + +planet:before { + display: block; + width: 8em; + font-weight: bold; + font-size: 200%; + content: "Oceans"; + margin: -.75em 0px .25em -.25em; + padding: .1em .25em; + background-color: #cdf; + } + +planet { + display: block; + margin: 2em 1em; + border: 4px solid #cdf; + padding: 0px 1em; + background-color: white; + } + +ocean { + display: block; + margin-bottom: 1em; + } + +name { + display: block; + font-weight: bold; + font-size: 150%; + } + +area { + display: block; + } + +area:before { + content: "Area: "; + } + +area:after { + content: " million km\B2"; + } + +depth { + display: block; + } + +depth:before { + content: "Mean depth: "; + } + +depth:after { + content: " m"; + } +</pre></div> +<p>브라우저에서 문서를 여세요: +</p> +<table style="border: 2px outset #36b; padding: 1em;"> +<tbody><tr> +<td><div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;"> +<p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p> +<p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><b>Arctic</b><br> +Area: 13,000 million km²<br> +Mean depth: 1,200 m</p> +<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>Atlantic</b><br> +Area: 87,000 million km²<br> +Mean depth: 3,900 m</p> +<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>. . .</b></p> +</div> +</td></tr></tbody></table> +<p>이 예제에서 주의할 점: +</p> +<ul><li>수퍼스크립트(superscript) 2 ("million km²" 에 있는)는 CSS파일에 <code>\B2</code>로 코딩되어있는 유니코드(Unicode) 문자입니다. +</li><li>헤딩(heading) "Oceans"는 음수인 상단 마진(negative top margin)을 갖고 있어 보더의 상단에 디스플레이 되도록 위쪽으로 이동 됩니다. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> +<caption>Challenge +</caption><tbody><tr> +<td> 스타일 시트를 변경해서 문서를 표로 디스플레이하게 하세요. +<p>(수정할 예문들을 원하시면, CSS 규약의 <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> 챕터를 보세요.) </p> +</td></tr></tbody></table> +<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80"> 그럼 다음은 </h4> +<p>이 페이지를 이해하기 어렵거나 다른 코멘트가 있다면 <a>Discussion</a>에 기여하세요. +</p><p>이 페이지는 입문서의 마지막 페이지입니다. +모질라에서의 CSS에 관한 더 많은 정보를 원하시면, 이 위키의 <a href="ko/CSS">CSS</a> 메인 페이지(main page)를 보세요. +</p>{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pl": "pl/CSS/Na_pocz\u0105tek/Dane_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML" } ) }} diff --git a/files/ko/web/css/getting_started/xul_user_interfaces/index.html b/files/ko/web/css/getting_started/xul_user_interfaces/index.html new file mode 100644 index 0000000000..cd08f23579 --- /dev/null +++ b/files/ko/web/css/getting_started/xul_user_interfaces/index.html @@ -0,0 +1,315 @@ +--- +title: XUL user interfaces +slug: Web/CSS/Getting_Started/XUL_user_interfaces +tags: + - 'CSS:Getting_Started' +translation_of: Archive/Beginner_tutorials/XUL_user_interfaces +--- +<p>이 페이지는 사용자 인터페이스를 만드는 모질라의 특별한 언어를 설명합니다.</p> +<p>모질라 브라우저에서 작동하는 간단한 예제를 만들어봅니다.</p> +<h3 id=".EC.A0.95.EB.B3.B4:_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4" name=".EC.A0.95.EB.B3.B4:_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4">정보: 사용자 인터페이스</h3> +<p>HTML가 사용자 인터페이스에 대한 지원를 하고 있으나, 하나의 독립적인 애플리케이션을 만드는데 필요한 모든 기능을 지원하고 있지는 못합니다.</p> +<p>모질라는 사용자 인터페이스를 만드는 특별한 언어를 제공함으로써 이런 제한사항을 극복하고 있습니다: 이 언어가 바로 + <i> + XUL</i> + 입니다. (XML 사용자-인터페이스 언어(XML User-interface Language)로서 보통 " + <i> + 줄(zool)</i> + "라고 읽습니다.)</p> +<p>XUL에는 많은 흔히사용되는 사용자 인터페이스가 내장되어 있습니다. 예를 들면, XUL은 대화창(dialogue), 위저드(wizard) 같은 특별한 윈도우들 뿐만아니라 상태 바(status bar), 메뉴, 툴 바(tool bar), 그리고 브라우저까지 제공합니다.</p> +<p>더 많은 특화된 기능들은 이 입문서에서 보아 온 다른 기술들(CSS 스타일, 자바스크립트 코드 그리고 XBL 바인딩)과 함께 XUL을 사용함으로써 만들어 낼 수 있습니다.</p> +<p>다른 XML-기반 언어들과 같이, XUL은 CSS 스타일 시트를 사용합니다.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + More details</caption> + <tbody> + <tr> + <td>XUL 사용자 인터페이스에 관한 더 많은 정보를 원하시면, 이 위키의 <a href="ko/XUL">XUL</a> 페이지를 보세요.</td> + </tr> + </tbody> +</table> +<h3 id=".EC.95.A1.EC.85.98:_XUL_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_XUL_.EC.98.88.EC.A0.9C">액션: XUL 예제</h3> +<p>새로운 XUL 문서를 텍스트 파일 <code>doc7.xul</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><?xml version="1.0"?> +<?xml-stylesheet type="text/css" href="style7.css"?> +<!DOCTYPE window> + +<window + xmlns="http&58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + title="CSS Getting Started - XUL demonstration" + onload="init();"> + +<script type="application/x-javascript" src="script7.js"/> + +<label class="head-1" value="XUL demonstration"/> + +<vbox> + + <groupbox class="demo-group"> + <caption label="Day of week calculator"/> + <grid> + <columns> + <column/> + <column/> + </columns> + <rows> + <row> + <label class="text-prompt" value="Date:" + accesskey="D" control="date-text"/> + <textbox id="date-text" type="timed" + timeout="750" oncommand="refresh();"/> + </row> + <row> + <label value="Day:"/> + <hbox id="day-box"> + <label class="day" value="Sunday" disabled="true"/> + <label class="day" value="Monday" disabled="true"/> + <label class="day" value="Tuesday" disabled="true"/> + <label class="day" value="Wednesday" disabled="true"/> + <label class="day" value="Thursday" disabled="true"/> + <label class="day" value="Friday" disabled="true"/> + <label class="day" value="Saturday" disabled="true"/> + </hbox> + </row> + </rows> + </grid> + <hbox class="buttons"> + <button id="clear" label="Clear" accesskey="C" + oncommand="clearDate();"/> + <button id="today" label="Today" accesskey="T" + oncommand="setToday();"/> + </hbox> + </groupbox> + + <statusbar> + <statusbarpanel id="status"/> + </statusbar> + +</vbox> + +</window> +</pre> +</div> +<p>새로운 CSS 파일 <code>style7.css</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre>/*** XUL demonstration ***/ +window { + -moz-box-align: start; + background-color: -moz-dialog; + font: -moz-dialog; + padding: 2em; + } + +.head-1 { + font-weight: bold; + font-size: 200%; + padding-left: 5px; + } + + +/* the group box */ +.demo-group { + padding: 1em; + } + +.demo-group grid { + margin-bottom: 1em; + } + +.demo-group column { + margin-right: .5em; + } + +.demo-group row { + margin-bottom: .5em; + } + +.demo-group .buttons { + -moz-box-pack: end; + } + + +/* the day-of-week labels */ +.day { + margin-left: 1em; + } + +.day[disabled] { + color: #777; + } + +.day:first-child { + margin-left: 4px; + } + + +/* the left column labels */ +.text-prompt { + padding-top: .25em; + } + + +/* the date input box */ +#date-text { + max-width: 8em; + } + + +/* the status bar */ +statusbar { + width: 100%; + border: 1px inset -moz-dialog; + margin: 4px; + padding: 0px 4px; + } + +#status { + padding: 4px; + } + +#status[warning] { + color: red; + } +</pre> +</div> +<p>새로운 텍스트 파일 <code>script7.js</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre>// XUL demonstration + +var dateBox, dayBox, currentDay, status; // elements + +// called by window onLoad +function init() { + dateBox = document.getElementById("date-text") + dayBox = document.getElementById("day-box") + status = document.getElementById("status") + setToday(); + } + +// called by Clear button +function clearDate() { + dateBox.value = "" + refresh() + } + +// called by Today button +function setToday() { + var d = new Date() + dateBox.value = (d.getMonth() + 1) + + "/" + d.getDate() + + "/" + d.getFullYear() + refresh() + } + +// called by Date textbox +function refresh() { + var d = dateBox.value + var theDate = null + + showStatus(null) + if (d != "") { + try { + var a = d.split("/") + var theDate = new Date(a[2], a[0] - 1, a[1]) + showStatus(theDate) + } + catch (ex) {} + } + setDay(theDate) + } + +// internal +function setDay(aDate) { + if (currentDay) currentDay.setAttribute("disabled", "true") + if (aDate == null) currentDay = null + else { + var d = aDate.getDay() + currentDay = dayBox.firstChild + while (d-- > 0) currentDay = currentDay.nextSibling + currentDay.removeAttribute("disabled") + } + dateBox.focus(); + } + +function showStatus(aDate) { + if (aDate == null) { + status.removeAttribute("warning") + status.setAttribute("label", "") + } + else if (aDate === false || isNaN(aDate.getTime())) { + status.setAttribute("warning", "true") + status.setAttribute("label", "Date is not valid") + } + else { + status.removeAttribute("warning") + status.setAttribute("label", aDate.toLocaleDateString()) + } + } +</pre> +</div> +<p>정확히 의도하신대로 결과를 보고 싶으시면, 브라우저의 디폴트 씸(default theme)을 사용하세요. 다른 씸(theme)을 사용하고 계시면, 씸이 몇가지 사용자 인터페이스 스타일을 변경해서 예제가 좀 이상하게 보일 수 도 있습니다.</p> +<p>브라우저에서 문서를 열고 인터페이스를 사용하세요.</p> +<p>이 위키페이지는 XUL과 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다.</p> +<p>다음과 같이 보입니다:</p> +<table style="border: 2px outset #36b; background-color: threedface; padding: 1em; cursor: default; white-space: nowrap; margin: .5em 0;"> + <tbody> + <tr> + <td> + <p style="font-size: 150%; font-weight: bold; margin: 0; padding: 0;">XUL demonstration</p> + <div style="position: relative; border: 2px groove threedhighlight; margin-top: 1em;"> + <p style="float: left; margin: -1em 0 0 .5em; padding: 0; background-color: threedface;">Day of week calculator</p> + <table style="background-color: threedface; margin: .5em; padding-right: .5em;"> + <tbody> + <tr> + <td style="padding-right: .5em;"><u>D</u>ate:</td> + <td style="background-color: white; border: 1px solid #000; width: 8em; float: left; cursor: text; padding: .15em .25em;">6/27/2005</td> + </tr> + <tr> + <td>Day:</td> + <td style="color: graytext;">Sunday <span style="color: #000;">Monday</span> Tuesday Wednesday Thurdsay Friday Saturday</td> + </tr> + <tr> + <td> </td> + <td> + <div style="float: right; margin-top: .5em;"> + <p><span style="border: 2px outset threedface; padding: .25em 1em;"><u>C</u>lear</span> <span style="border: 2px outset threedface; padding: .25em 1em;"><u>T</u>oday</span></p> + </div> + </td> + </tr> + </tbody> + </table> + </div> + <div style="border: 1px inset threedface; margin-top: 1em;"> + <p style="margin: 0; padding: .25em .5em;">June 27, 2005</p> + </div> + </td> + </tr> + </tbody> +</table> +<p>이 예제에서 주의할 점:</p> +<ul> + <li>XUL문서는 이전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.</li> + <li>스크립트는 이 예제에서 중요하지 않습니다.</li> + <li>보게되는 대부분의 스타일은 브라우저의 씸(theme)에의해서 정해집니다.</li> +</ul> +<p>문서의 스타일 시트를 잘 검토해서 그안의 모든 규칙들을 확실히 이해하도록 하세요. 이해하지 못하는 규칙이 있으면, 코멘트 아웃(comment out)한 다음 브라우저를 리프레쉬해서 문서에 나타나는 효과를 보도록 하세요.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>DOM 조사 도구(DOM Inspector tool)을 사용해서 Date textbox를 검사하세요. Date textbox는 XBL 바인딩으로 만들어진 다른 엘리먼트들로 이루어져 있습니다. + <p><code>html:input</code> 엘리먼트의 + <i> + 클래스</i> + 를 찾아내세요. 이 엘리먼트가 실질적으로 샤용자 입력을 받고 있습니다.</p> + <p>이 지식을 이용해서, 스타일 시트에 규칙을 하나 더해서 Date box가 키보드 포거스를 가지게 될때 배경색이 희미한 푸른색으로 되게 하세요.(그러나 키보드 포커스가 다른 데 있을 경우 힌색이 되게 하세요.)</p> + </td> + </tr> + </tbody> +</table> +<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4> +<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p> +<p>이 예제에서 대부분의 사용자 인터페이스에 공통적으로 사용되는 표준적인 사각형 도형들을 보았습니다. 모질라는 스타일을 지정하는 CSS스타일 시트를 이용하여 도형을 만들어내는 쓰는 특별한 그래픽 언어도 지원하고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/SVG_graphics">SVG graphics</a></b></p> +<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pl": "pl/CSS/Na_pocz\u0105tek/XUL-owe_interfejsy_u\u017cytkownika" } ) }}</p> diff --git a/files/ko/web/css/gradient/index.html b/files/ko/web/css/gradient/index.html new file mode 100644 index 0000000000..aebfab76bf --- /dev/null +++ b/files/ko/web/css/gradient/index.html @@ -0,0 +1,160 @@ +--- +title: <gradient> +slug: Web/CSS/gradient +tags: + - CSS + - CSS Data Type + - CSS Images + - Graphics + - Layout + - Reference + - 그라데이션 + - 그레이디언트 +translation_of: Web/CSS/gradient +--- +<div>{{CSSRef}}</div> + +<p><strong><code><gradient></code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("<image>")}}의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>CSS 그레이디언트는 <a href="/ko/docs/Web/CSS/image#no_intrinsic">원본 크기가 없습니다</a>. 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다.</p> + +<h2 id="구문">구문</h2> + +<h3 id="그레이디언트_함수">그레이디언트 함수</h3> + +<p><code><gradient></code> 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.</p> + +<h4 id="선형_그레이디언트">선형 그레이디언트</h4> + +<p>가상의 선을 따라 여러 색 사이를 전이합니다. {{cssxref("linear-gradient()")}} 함수를 사용해 생성합니다.</p> + +<div class="hidden"> +<pre class="brush: html"><div class="linear-gradient">선형 그레이디언트</div> +</pre> + +<pre class="brush: css">div { + width: 240px; + height: 80px; +}</pre> +</div> + +<pre class="brush: css">.linear-gradient { + background: linear-gradient(to right, + red, orange, yellow, green, blue, indigo, violet); +}</pre> + +<p>{{EmbedLiveSample('선형_그레이디언트', 240, 80)}}</p> + +<h4 id="원형_그레이디언트">원형 그레이디언트</h4> + +<p>중심점으로부터 바깥으로 여러 색 사이를 전이합니다. {{cssxref("radial-gradient()")}} 함수를 사용해 생성합니다.</p> + +<div class="hidden"> +<pre class="brush: html"><div class="radial-gradient">원형 그레이디언트</div> +</pre> + +<pre class="brush: css">div { + width: 240px; + height: 80px; +}</pre> +</div> + +<pre class="brush: css">.radial-gradient { + background: radial-gradient(red, yellow, rgb(30, 144, 255)); +} +</pre> + +<p>{{EmbedLiveSample('원형_그레이디언트', 240, 80)}}</p> + +<h4 id="반복_그레이디언트">반복 그레이디언트</h4> + +<p>요소를 꽉 채울 때까지 그레이디언트를 필요한 만큼 반복합니다. {{cssxref("repeating-linear-gradient()")}}나 {{cssxref("repeating-radial-gradient()")}} 함수를 사용해 생성합니다.</p> + +<div class="hidden"> +<pre class="brush: html"><div class="linear-repeat">반복하는 선형 그레이디언트</div> +<br> +<div class="radial-repeat">반복하는 원형 그레이디언트</div> +</pre> + +<pre class="brush: css">div { + width: 240px; + height: 80px; +}</pre> +</div> + +<pre class="brush: css">.linear-repeat { + background: repeating-linear-gradient(to top left, + lightpink, lightpink 5px, white 5px, white 10px); +} + +.radial-repeat { + background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); +}</pre> + +<p>{{EmbedLiveSample('반복_그레이디언트', 220, 180)}}</p> + +<h4 id="원뿔_그레이디언트">원뿔 그레이디언트</h4> + +<p>원을 따라 여러 색 사이를 전이합니다. {{cssxref("conic-gradient", "conic-gradient()")}} 함수를 사용해 생성합니다.</p> + +<div class="hidden"> +<pre class="brush: html"><div class="conic-gradient">원뿔 그레이디언트</div> +</pre> + +<pre class="brush: css">div { + width: 200px; + height: 200px; +}</pre> +</div> + +<pre class="brush: css">.conic-gradient { + background: conic-gradient(lightpink, white, powderblue); +} +</pre> + +<p>{{EmbedLiveSample('원뿔_그레이디언트', 240, 80)}}</p> + +<h2 id="보간">보간</h2> + +<p>색과 관련한 다른 보간과 마찬가지로, 그레이디언트도 색과 투명도가 동시에 변할 때 예상하지 못한 회색이 등장하는걸 방지하기 위해 알파 채널을 미리 곱한 색 공간을 사용해 계산합니다. 오래 된 브라우저에서 {{cssxref("<color>", "", "#transparent_키워드")}} 키워드를 사용할 땐 다르게 행동할 수 있음을 주의하세요.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#gradients', '<gradient>')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>Adds conic-gradient.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.image.gradient")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/CSS/Using_CSS_gradients" title="Using gradients">CSS 그레이디언트 사용하기</a></li> + <li>그레이디언트 함수: {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> +</ul> diff --git a/files/ko/web/css/grid-area/index.html b/files/ko/web/css/grid-area/index.html new file mode 100644 index 0000000000..9daba54c7b --- /dev/null +++ b/files/ko/web/css/grid-area/index.html @@ -0,0 +1,206 @@ +--- +title: grid-area +slug: Web/CSS/grid-area +tags: + - CSS + - CSS Grid + - CSS Property + - Reference +translation_of: Web/CSS/grid-area +--- +<p><strong><code>grid-area</code></strong> 속성은 {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} and {{cssxref("grid-column-end")}} 값을 한번에 설정하는 <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> property 입니다. 해당 속성값은 grid item의 크기와 위치를 결정합니다., specifying a grid item’s size and location within the {{glossary("grid rows", "grid row")}} by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its {{glossary("grid areas", "grid area")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid-area.html")}}</div> + + + +<p>If four <code><grid-line></code> values are specified, <code>grid-row-start</code> is set to the first value, <code>grid-column-start</code> is set to the second value, <code>grid-row-end</code> is set to the third value, and <code>grid-column-end</code> is set to the fourth value.</p> + +<p>When <code>grid-column-end</code> is omitted, if <code>grid-column-start</code> is a {{cssxref("<custom-ident>")}}, <code>grid-column-end</code> is set to that <code><custom-ident></code>; otherwise, it is set to <code>auto</code>.</p> + +<p>When <code>grid-row-end</code> is omitted, if <code>grid-row-start</code> is a <code><custom-ident></code>, <code>grid-row-end</code> is set to that <code><custom-ident></code>; otherwise, it is set to <code>auto</code>.</p> + +<p>When <code>grid-column-start</code> is omitted, if <code>grid-row-start</code> is a <code><custom-ident></code>, all four longhands are set to that value. Otherwise, it is set to <code>auto</code>.</p> + +<p>The grid-area property can also be set to a {{cssxref("<custom-ident>")}} which acts as a name for the area, which can then be placed using {{cssxref("grid-template-areas")}}.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Keyword values */ +grid-area: auto; +grid-area: auto / auto; +grid-area: auto / auto / auto; +grid-area: auto / auto / auto / auto; + +/* <custom-ident> values */ +grid-area: some-grid-area; +grid-area: some-grid-area / another-grid-area; + +/* <integer> && <custom-ident>? values */ +grid-area: some-grid-area 4; +grid-area: some-grid-area 4 / 2 another-grid-area; + +/* span && [ <integer> || <custom-ident> ] values */ +grid-area: span 3; +grid-area: span 3 / span some-grid-area; +grid-area: 2 span / another-grid-area span; + +/* Global values */ +grid-area: inherit; +grid-area: initial; +grid-area: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement or a default span of <code>1</code>.</dd> + <dt><code><custom-ident></code></dt> + <dd>If there is a named line with the name '<code><custom-ident>-start</code>'/'<code><custom-ident>-end</code>', it contributes the first such line to the grid item’s placement. + <p class="note"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-area: foo;</code> will choose the start/end edge of that named grid area (unless another line named <code>foo-start</code>/<code>foo-end</code> was explicitly specified before it).</p> + + <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code><custom-ident></code>.</p> + </dd> + <dt><code><integer> && <custom-ident>?</code></dt> + <dd>Contributes the <em>n</em>th grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. + <p>If a name is given as a {{cssxref("<custom-ident>")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p> + + <p>An {{cssxref("<integer>")}} value of <code>0</code> is invalid.</p> + </dd> + <dt><code>span && [ <integer> || <custom-ident> ]</code></dt> + <dd>Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is <em>n</em> lines from the opposite edge. + <p>If a name is given as a {{cssxref("<custom-ident>")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p> + + <p>If the {{cssxref("<integer>")}} is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML_content">HTML content</h3> + +<pre class="brush: html"><div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> +</div></pre> + +<h3 id="CSS_content">CSS content</h3> + +<pre class="brush: css; highlight[9]">#grid { + display: grid; + height: 100px; + grid-template: repeat(4, 1fr) / 50px 100px; +} + +#item1 { + background-color: lime; + grid-area: 2 / 2 / auto / span 3; +} + +#item2 { + background-color: yellow; +} + +#item3 { + background-color: blue; +} +</pre> + +<p>{{EmbedLiveSample("Example", "100%", "150px")}}</p> + +<h2 id="Specifications">Specifications</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("CSS3 Grid", "#propdef-grid-area", "grid-area")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.grid-area")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li> + <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/ko/web/css/grid/index.html b/files/ko/web/css/grid/index.html new file mode 100644 index 0000000000..7515db99be --- /dev/null +++ b/files/ko/web/css/grid/index.html @@ -0,0 +1,192 @@ +--- +title: grid +slug: Web/CSS/grid +tags: + - CSS + - CSS Grid + - CSS Property + - Reference +translation_of: Web/CSS/grid +--- +<p><strong><code>grid</code></strong> CSS 속성은 <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> property 입니다. 외재적인 속성인 ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}), 값과 내재적인 속성인 ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}), 값을 한번에 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div> + + + +<div class="note"> +<p><strong>Note:</strong> You can only specify the explicit <em>or</em> the implicit grid properties in a single <code>grid</code> declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* <'grid-template'> values */ +grid: none; +grid: "a" 100px "b" 1fr; +grid: [linename1] "a" 100px [linename2]; +grid: "a" 200px "b" min-content; +grid: "a" minmax(100px, max-content) "b" 20%; +grid: 100px / 200px; +grid: minmax(400px, min-content) / repeat(auto-fill, 50px); + +/* <'grid-template-rows'> / + [ auto-flow && dense? ] <'grid-auto-columns'>? values */ +grid: 200px / auto-flow; +grid: 30% / auto-flow dense; +grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; +grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; + +/* [ auto-flow && dense? ] <'grid-auto-rows'>? / + <'grid-template-columns'> values */ +grid: auto-flow / 200px; +grid: auto-flow dense / 30%; +grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); +grid: auto-flow dense 40% / [line1] minmax(20em, max-content); + +/* Global values */ +grid: inherit; +grid: initial; +grid: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><'grid-template'></code></dt> + <dd>{{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}} 값을 내포하고 있는 {{cssxref("grid-template")}}의 값을 정의합니다.</dd> + <dt><code><'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?</code></dt> + <dd>{{cssxref("grid-template-rows")}} (and the {{cssxref("grid-template-columns")}} property to <code>none</code>)은 auto-flow 값을 설정합니다. {{cssxref("grid-auto-columns")}} (and setting {{cssxref("grid-auto-rows")}} to <code>auto</code>)은 auto-repeat를 설정합니다. {{cssxref("grid-auto-flow")}} 또한 마찬가지로 auto-repeat에 영향을 줍니다. 만약 이 값이 생략되었다면 그 기본값은 <code>dense</code> 입니다. + <p><code><font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">만약 </span></font>grid</code> 의 sub-properties가 있다면, 해당 값으로 초기화 됩니다.</p> + </dd> + <dt><code>[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'></code></dt> + <dd>{{cssxref("grid-template-columns")}} (and the {{cssxref("grid-template-rows")}} property to <code>none</code>)은 auto-flow 값을 설정합니다. {{cssxref("grid-auto-rows")}} (and setting {{cssxref("grid-auto-columns")}} to <code>auto</code>)은 열(row)에 대한 auto-repeat를 설정합니다. {{cssxref("grid-auto-flow")}} 또한 마찬가지로 auto-repeat에 영향을 줍니다. 만약 이 값이 생략되었다면 그 기본값은 <code>dense</code> 입니다. + <p><code><font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">만약 </span></font>grid</code> 의 sub-properties가 있다면, 해당 값으로 초기화 됩니다.</p> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div id="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">#container { + display: grid; + grid: repeat(2, 60px) / auto-flow 80px; +} + +#container > div { + background-color: #8ca0ff; + width: 50px; + height: 50px; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", "100%", 150)}}</p> + +<h2 id="Specifications">Specifications</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("CSS3 Grid", "#propdef-grid", "grid")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.grid")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related CSS properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/ko/web/css/height/index.html b/files/ko/web/css/height/index.html new file mode 100644 index 0000000000..8682d0c2c5 --- /dev/null +++ b/files/ko/web/css/height/index.html @@ -0,0 +1,175 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/height +--- +<div>{{CSSRef}}</div> + +<p><strong><code>height</code></strong> CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, {{cssxref("box-sizing")}}이 <code>border-box</code>라면 테두리 영역의 높이를 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/height.html")}}</div> + + + +<p>{{cssxref("min-height")}}와 {{cssxref("max-height")}} 속성은 <code>height</code>를 덮어씁니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 */ +height: auto; + +/* <length> */ +height: 120px; +height: 10em; + +/* <percentage> */ +height: 75%; + +/* 전역 값 */ +height: inherit; +height: initial; +height: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>높이의 절대값.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 높이의 백분율.</dd> + <dt><code>border-box</code> {{experimental_inline}}</dt> + <dd>앞선 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}가 요소의 보더 박스에 적용.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>앞선 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}가 요소의 콘텐츠 박스에 적용.</dd> + <dt><code>auto</code></dt> + <dd>브라우저가 요소의 너비를 계산하고 선택.</dd> + <dt><code>fill</code> {{experimental_inline}}</dt> + <dd>글쓰기 방향에 따라 <code>fill-available</code> 인라인 크기 또는 <code>fill-available</code> 블록 크기를 사용.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>본질적인 선호 높이.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>본질적인 최소 높이.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>컨테이닝 블록 너비에서 수평 여백, 테두리, 패딩을 제외한 값.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>다음 중 더 큰 값. + <ul> + <li>본질적인 최소 너비</li> + <li>본질적인 선호 너비와 사용 가능한 너비 중 작은 값</li> + </ul> + </dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="taller">제 키는 50픽셀입니다.</div> +<div id="shorter">제 키는 25픽셀입니다.</div> +<div id="parent"> + <div id="child"> + 제 키는 부모의 절반입니다. + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 250px; + margin-bottom: 5px; + border: 2px solid blue; +} + +#taller { + height: 50px; +} + +#shorter { + height: 25px; +} + +#parent { + height: 100px; +} + +#child { + height: 50%; + width: 75%; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 'auto', 240)}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>페이지를 확대하거나 글꼴 크기를 늘렸을 때 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">height</span></font> 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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('CSS3 Box', '#width-and-height', 'height')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Lists <code>height</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#height', 'height')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Adds new sizing keywords for width and height.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.height")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/CSS/box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li> +</ul> diff --git a/files/ko/web/css/hyphens/index.html b/files/ko/web/css/hyphens/index.html new file mode 100644 index 0000000000..82f963023f --- /dev/null +++ b/files/ko/web/css/hyphens/index.html @@ -0,0 +1,159 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/hyphens +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>hyphens</code></strong> 속성은 여러 줄에 걸치는 텍스트에서 단어에 붙임표를 추가하는 방식을 설정합니다.</span> 붙임표를 아예 방지할 수도 있고, 수동으로 지정한 곳에서만 발생하도록 나타낼 수도 있으며, 브라우저가 자동으로 적절한 곳에 붙임표를 삽입하도록 허용할 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>붙임표 규칙은 언어별로 다릅니다. HTML의 언어는 <code><a href="/ko/docs/Web/HTML/Global_attributes/lang">lang</a></code> 특성으로 알아낼 수 있으며, 브라우저는 lang 특성과 해당 언어에 적합한 붙임표 규칙이 모두 사용 가능할 때에만 붙임표를 추가합니다. XML에서는 <code><a href="/ko/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 특성을 사용해야 합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 명세는 붙임표 규칙을 명시하지 않고 있으므로 동작 방식이 브라우저마다 다를 수 있습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +hyphens: none; +hyphens: manual; +hyphens: auto; + +/* 전역 값 */ +hyphens: inherit; +hyphens: initial; +hyphens: unset; +</pre> + +<p><code>hyphens</code> 속성은 아래 목록 중 하나의 키워드를 사용해 지정할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>none</code></dt> + <dd>단어 내의 문자가 줄 바꿈 위치를 나타내더라도 단어를 내에서 줄을 바꾸지 않습니다. 줄 바꿈은 공백 문자에서만 발생합니다.</dd> + <dt><code>manual</code></dt> + <dd>단어 내의 줄 바꿈 위치를 나타내는 문자에서는 줄을 바꿀 수 있습니다. 아래의 {{anch("줄 바꿈 위치 제안")}}에서 자세한 정보를 알아보세요.</dd> + <dt><code>auto</code></dt> + <dd>브라우저가 단어 내의 적합한 붙임표 위치를 자유롭게 골라서 줄을 바꿀 수 있습니다. 단, 줄 바꿈 위치를 제안(아래의 {{anch("줄 바꿈 위치 제안")}} 을 보세요)한 경우에는 해당 위치를 사용합니다.</dd> +</dl> + +<div class="note"> +<p><strong>참고:</strong> 적합한 붙임표 규칙을 선택할 수 있도록 언어를 제대로 명시해야 <code>auto</code> 값의 동작도 정확해집니다. HTML <code>lang</code> 특성을 사용해 해당 언어의 붙임표 규칙을 사용할 것을 확실하게 지정하세요.</p> +</div> + +<h2 id="줄_바꿈_위치_제안">줄 바꿈 위치 제안</h2> + +<p>아래의 두 가지 Unicode 문자를 사용해서 수동으로 줄 바꿈 위치를 제안할 수 있습니다.</p> + +<dl> + <dt>U+2010 (HYPHEN)</dt> + <dd>붙임표, "하드" 하이픈 문자는 눈에 보이는 줄 바꿈 위치를 나타냅니다. 실제로 줄이 바뀌지는 않더라도 붙임표를 볼 수 있습니다.</dd> + <dt>U+00AD (SHY)</dt> + <dd>투명한 "소프트" 하이픈("<strong>s</strong>oft" <strong>hy</strong>phen)입니다. 눈에 보이지 않으며, 브라우저가 붙임표를 사용해 단어를 끊을 위치로 선택합니다. HTML에서는 <code>&shy;</code>를 사용해 입력하세요.</dd> +</dl> + +<div class="blockIndicator note"> +<p>HTML {{htmlelement("wbr")}} 요소로 인한 줄 바꿈으로는 붙임표가 추가되지 않습니다.</p> +</div> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="붙임표_줄_바꿈_지정하기">붙임표 줄 바꿈 지정하기</h3> + +<p>다음 예제는 <code>hyphens</code> 속성에 사용할 수 있는 세 개 값을 시연합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><dl> + <dt><code>none</code>: no hyphen; overflow if needed</dt> + <dd lang="en" class="none">An extreme&shy;ly long English word</dd> + <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt> + <dd lang="en" class="manual">An extreme&shy;ly long English word</dd> + <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt> + <dd lang="en" class="auto">An extreme&shy;ly long English word</dd> +</dl> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">dd { + width: 55px; + border: 1px solid black; + } +dd.none { + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} +dd.manual { + -webkit-hyphens: manual; + -ms-hyphens: manual; + hyphens: manual; +} +dd.auto { + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} +</pre> + +<h4 id="결과">결과</h4> + +<figure> +<p>{{EmbedLiveSample("붙임표_줄_바꿈_지정하기", "100%", 490)}}</p> +</figure> + +<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("CSS3 Text", "#hyphens-property", "hyphens")}}</td> + <td>{{Spec2("CSS3 Text")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.properties.hyphens")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref("content")}}</li> + <li>{{cssxref("overflow-wrap")}} (이전 이름 <code>word-wrap</code>)</li> + <li>{{cssxref("word-break")}}</li> +</ul> diff --git a/files/ko/web/css/id_selectors/index.html b/files/ko/web/css/id_selectors/index.html new file mode 100644 index 0000000000..10df449707 --- /dev/null +++ b/files/ko/web/css/id_selectors/index.html @@ -0,0 +1,85 @@ +--- +title: ID 선택자 +slug: Web/CSS/ID_selectors +tags: + - CSS + - Reference + - Selectors + - 선택자 +translation_of: Web/CSS/ID_selectors +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>ID 선택자</strong>는 요소의 {{htmlattrxref("id")}} 특성 값을 비교하여, 완전히 동일한 <code>id</code>를 가진 요소를 선택합니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* id="demo" 요소 선택 */ +#demo { + border: red 2px solid; +}</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">#id_value { <em>style properties</em> }</pre> + +<p>위의 구문은 <a href="/ko/docs/Web/CSS/Attribute_selectors">특성 선택자</a>를 사용한 다음 구문과 동일합니다.</p> + +<pre class="syntaxbox notranslate">[id=id_value] { <em>style properties</em> }</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#identified { + background-color: skyblue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="identified">특별한 ID를 가진 요소에요!</div> +<div>이건 그냥 div에요.</div> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("Example", '100%', 50)}}</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("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.id")}}</p> diff --git a/files/ko/web/css/image-rendering/index.html b/files/ko/web/css/image-rendering/index.html new file mode 100644 index 0000000000..85522966f0 --- /dev/null +++ b/files/ko/web/css/image-rendering/index.html @@ -0,0 +1,120 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +tags: + - CSS + - CSS Images + - CSS Property + - Reference +translation_of: Web/CSS/image-rendering +--- +<div>{{CSSRef}}</div> + +<p><strong><code>image-rendering</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.</p> + +<p>예를들어, 100x100 픽셀의 이미지가 있는데 페이지에서 요구하는 이미지는 200x200픽셀 (혹은 50x50px)이라면, 이미지는 새로운 면적만큼의 특정 알고리즘으로 인해 확대(혹은 축소)됩니다. 스케일링은 사용자의 상호작용(줌기능) 으로 인해 일어날겁니다.</p> + +<p>{{cssinfo}}</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css">/* 키워드 값 */ +image-rendering: auto; +image-rendering: crisp-edges; +image-rendering: pixelated; + +/* 전역 값 */ +image-rendering: inherit; +image-rendering: initial; +image-rendering: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><strong>auto</strong></code></dt> + <dd>기본값입니다.<br> + 이미지의 스케일링 알고리즘은 이미지를 최대치로 활용해서 나타냅니다. 특히, 스케일링 알고리즘은 이중선형보간법같은 알고리즘이 보기에 괜찮은 "부드러운"색상을 나타냅니다. 사진같은 종류의 것들을 위해 GEcko엔진 1.9버전(파이어폭스 3.0) 에서는 이중선형 리샘플링(고품질) 을 사용해왔습니다.</dd> +</dl> + +<dl> +</dl> + +<dl> + <dt><code><strong>crisp-edges</strong></code></dt> + <dd>이미지 스케일링 알고리즘은 반드시 색상대조와 이미지의 표준을 맞게 보존해야 합니다. 그리고 smooth 하지 못한 색상 혹은 이미지의 흐림효과 또한 알고리즘 공정에 있어야합니다. 이 속성은 픽셀아트같은 의도되어 만들어진 이미지들에게 필요합니다.</dd> + <dt><code><strong>pixelated</strong></code></dt> + <dd>이미지 스케일링을 크게 확대할 때는 "nearest neighbor" 혹은 비슷한 알고리즘을 반드시 사용해야 합니다. 그래서 이미지의 큰 픽셀로 구성해서 나타낼 수 있습니다. 이미지를 작게 축소할 때는 "auto" 속성과 같습니다.</dd> +</dl> + +<div class="note">The values <span id="cke_bm_145S" style="display: none;"> </span><code>optimizeQuality</code> and <code>optimizeSpeed</code> present in early draft (and coming from its SVG counterpart) are defined as synonyms for the <code>auto</code> value.</div> + +<h3 id="공식_문법">공식 문법</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush:css;">/* applies to GIF and PNG images; avoids blurry edges */ + +img[src$=".gif"], img[src$=".png"] { + image-rendering: -moz-crisp-edges; /* Firefox */ + image-rendering: -o-crisp-edges; /* Opera */ + image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ + image-rendering: crisp-edges; + -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ + } + +</pre> + +<pre class="brush:css;">div { + background: url(chessboard.gif) no-repeat 50% 50%; + image-rendering: -moz-crisp-edges; /* Firefox */ + image-rendering: -o-crisp-edges; /* Opera */ + image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ + image-rendering: crisp-edges; + -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ +}</pre> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h3 id="Live_Examples">Live Examples</h3> + +<h4 id="image-rendering_auto">image-rendering: auto;</h4> + +<p style="image-rendering: auto;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p> + +<h4 id="image-rendering_pixelated_(-ms-interpolation-mode_nearest-neighbor)">image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)</h4> + +<p style="-ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p> + +<h4 id="image-rendering_crisp-edges_(-webkit-optimize-contrast)">image-rendering: crisp-edges; (-webkit-optimize-contrast)</h4> + +<p style="image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: crisp-edges;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></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('CSS3 Images', '#the-image-rendering', 'image-rendering')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Though initially close from the SVG <code>image-rendering</code> property, the values are quite different now.</p> +</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 지원</h2> + +<p>{{Compat("css.properties.image-rendering")}}</p> diff --git a/files/ko/web/css/image/index.html b/files/ko/web/css/image/index.html new file mode 100644 index 0000000000..7d68b3fadc --- /dev/null +++ b/files/ko/web/css/image/index.html @@ -0,0 +1,175 @@ +--- +title: <image> +slug: Web/CSS/image +tags: + - CSS + - CSS Data Type + - CSS Images + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/image +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code><image></code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 2차원 이미지를 나타냅니다.</span> 이미지는 {{cssxref("<url>")}}로 참조하는 일반 이미지, {{cssxref("<gradient>")}} 또는 {{cssxref("element")}}를 사용해 동적으로 생성하는 이미지 두 종류가 있습니다. 다른 이미지 함수로는 {{cssxref("imagefunction", "image()")}}, {{cssxref("image-set")}}, {{cssxref("cross-fade")}} 등이 있습니다. 이미지는 {{CSSxRef("background-image")}}, {{CSSxRef("border-image")}}, {{CSSxRef("content")}}, {{CSSxRef("cursor")}}, {{CSSxRef("list-style-image")}} 등 많은 속성에 사용할 수 있습니다.</p> + +<h2 id="이미지_유형">이미지 유형</h2> + +<p>CSS는 다음 이미지 종류를 처리할 수 있습니다.</p> + +<ul> + <li><strong>본질적인 크기</strong>(원래 크기)를 가진 이미지. JPEG, PNG 등 <a href="https://ko.wikipedia.org/wiki/%EB%9E%98%EC%8A%A4%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4">래스터 포맷</a>.</li> + <li><strong>여러 개의 본질적인 크기</strong>를 가진 이미지. 하나의 파일이 이미지의 여러 버전을 가지고 있는 경우. 일부 .ico 파일 등. 이 때, 본질적인 크기는 제일 크고 컨테이닝 박스와 가로세로 비율이 제일 비슷한 이미지를 따라갑니다.</li> + <li>본질적인 크기는 없지만 <strong>본질적인 종횡비</strong>를 가진 이미지. SVG 등 <a href="https://ko.wikipedia.org/wiki/%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4">벡터 포맷</a>.</li> + <li id="no_intrinsic"><strong>본질적인 크기도, 종횡비도 없는</strong> 이미지. CSS 그레이디언트 등.</li> +</ul> + +<p>CSS는 객체의 구체적인 크기를 (1) 그 본질적인 크기, (2) {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} 등 CSS 속성으로 설정한 크기, (3) 아래 표에 나열한, 이미지를 설정한 속성에 따른 기본값을 통해 결정합니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">객체 유형 (CSS 속성)</th> + <th scope="col">객체 크기의 기본값</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{CSSxRef("background-image")}}</td> + <td>요소의 배경 위치 영역 크기</td> + </tr> + <tr> + <td>{{CSSxRef("list-style-image")}}</td> + <td><code>1em</code> 문자의 크기</td> + </tr> + <tr> + <td>{{CSSxRef("border-image-source")}}</td> + <td>요소의 테두리 이미지 영역 크기</td> + </tr> + <tr> + <td>{{CSSxRef("cursor")}}</td> + <td>브라우저가 정의한, 클라이언트 시스템의 일반적인 커서 사이즈</td> + </tr> + <tr> + <td>{{CSSxRef("mask-image")}}</td> + <td>?</td> + </tr> + <tr> + <td>{{CSSxRef("shape-outside")}}</td> + <td>?</td> + </tr> + <tr> + <td>{{CSSxRef("mask-border-source")}}</td> + <td>?</td> + </tr> + <tr> + <td>{{cssxref("@counter-style")}}의 {{CSSxRef("symbols")}}</td> + <td>실험적 기능. 지원 시엔 브라우저가 정의한, 클라이언트 시스템의 일반적인 커서 사이즈</td> + </tr> + <tr> + <td>의사 요소의 {{CSSxRef("content")}} ({{CSSxRef("::after")}}/{{CSSxRef("::before")}})</td> + <td>300px × 150px 사각형</td> + </tr> + </tbody> +</table> + +<p>구체적인 크기는 다음 알고리즘을 사용해 계산합니다.</p> + +<ul> + <li>너비와 높이 모두 지정한 크기가 있다면 그 값을 구체적인 크기로 사용합니다.</li> + <li>너비 또는 높이만 지정한 크기가 있고, 본질적인 종횡비가 있다면 그 값으로 다른 크기를 계산해 사용하고, 지정한 크기가 본질적인 크기와 일치하면 다른 크기도 본질적인 크기를 사용하고, 모두 아니면 객체 크기의 기본값을 사용합니다.</li> + <li>너비도 높이도 지정한 크기가 없다면, 객체 크기의 기본값을 넘지 않는 한도에서 이미지의 본질적인 종횡비를 사용해 구체적인 크기를 결정합니다. 본질적인 종횡비가 없으면 요소의 종횡비를 사용하며, 요소도 가지고 있지 않으면 객체 크기의 기본값에서 가져옵니다.</li> +</ul> + +<div class="note"><strong>참고:</strong> 모든 브라우저가 모든 속성에 모든 유형의 이미지를 지원하는건 아닙니다. {{anch("브라우저 호환성")}} 항목을 참고하세요.</div> + +<h2 id="구문">구문</h2> + +<p><code><image></code> 자료형은 다음 중 하나로 나타낼 수 있습니다.</p> + +<ul> + <li>{{CSSxRef("<url>")}} 자료형</li> + <li>{{CSSxRef("<gradient>")}} 자료형</li> + <li>{{CSSxRef("element")}} 함수로 정의한 웹페이지의 일부</li> + <li>{{CSSxRef("image()")}} 함수로 정의한 이미지, 이미지 조각, 단일 색</li> + <li>{{CSSxRef("cross-fade")}} 함수로 정의한 두 개 이상 이미지의 혼합</li> + <li>{{CSSxRef("image-set")}} 함수로 정의한 이미지 중 적절한 해상도</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="유효한_이미지">유효한 이미지</h3> + +<pre class="brush: css example-good">url(test.jpg) /* "test.jpg"가 실제로 이미지일 때 <url> */ +linear-gradient(blue, red) /* <gradient> */ +element(#realid) /* "realid"가 페이지에 존재하는 ID일 때 + element() 함수로 참조한 웹페이지의 일부 */ +image(ltr 'arrow.png#xywh=0,0,16,16', red) + /* "arrow.png"가 지원되는 이미지일 때 <url>의 일부, 원본의 좌상단부터 16x16 + 지원하지 않는 이미지일 때 빨강 단색 + RTL 언어에서는 이미지아 가로방향 반전됨 */ +cross-fade(20% url(twenty.png), url(eighty.png)) + /* 혼합 이미지, "twenty.png" 불투명도 20% + "eighty.png" 불투명도 80% */ +image-set('test.jpg' 1x, 'test-2x.jpg' 2x) + /* 여러 해상도의 이미지 묶음 */</pre> + +<h3 id="유효하지_않은_이미지">유효하지 않은 이미지</h3> + +<pre class="brush: css example-bad">nourl.jpg /* 이미지 파일은 url() 함수로 정의해야 함 */ +url(report.pdf) /* url() 함수가 가리키는 파일은 이미지여야 함 */ +element(#fakeid) /* 요소 ID가 페이지에 존재해야 함 */ +image(z.jpg#xy=0,0) /* 이미지 조각은 xywh=#,#,#,# 형식으로 작성해야 함 */ +image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 각각의 이미지가 다른 해상도를 가져야 함 */ +</pre> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>브라우저는 배경 이미지에 대한 어떠한 정보도 보조 기술에 제공하지 않습니다. 스크린 리더 사용자에게 특히 큰 영향을 주는데, 스크린 리더가 배경 이미지의 존재를 표현하지 않으므로 사용자도 이미지에 대해 알 수 없기 때문입니다. 이미지가 문서의 목적을 이해하는 것에 중요한 정보를 포함하는 경우 문서에 구조적으로 포함하는 편이 좋습니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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("CSS4 Images", "#typedef-image", "<image>")}}</td> + <td>{{Spec2("CSS4 Images")}}</td> + <td>Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, and {{CSSxRef("image-resolution")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Images", "#typedef-image", "<image>")}}</td> + <td>{{Spec2("CSS3 Images")}}</td> + <td>Initial definition. Before this, there was no explicitly defined <code><image></code> data type. Images could only be defined using the <code>url()</code> functional notation.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.image")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{CSSxRef("<gradient>")}}</li> + <li>{{CSSxRef("element")}}</li> + <li>{{CSSxRef("imagefunction", "image()")}}</li> + <li>{{CSSxRef("image-set")}}</li> + <li>{{CSSxRef("cross-fade")}}</li> +</ul> diff --git a/files/ko/web/css/index.html b/files/ko/web/css/index.html new file mode 100644 index 0000000000..7c5210e812 --- /dev/null +++ b/files/ko/web/css/index.html @@ -0,0 +1,96 @@ +--- +title: 'CSS: Cascading Style Sheets' +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Layout + - Reference + - 'l10n:priority' + - 스타일시트 +translation_of: Web/CSS +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>(<strong>CSS</strong>)는 <a href="/ko/docs/HTML" title="HyperText Markup Language">HTML</a>이나 <a href="/ko/docs/XML">XML</a>(<a href="/ko/docs/SVG">SVG</a>, <a href="/ko/docs/XHTML">XHTML</a> 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 <a href="/ko/docs/Web/API/StyleSheet">스타일시트</a> 언어입니다.</span> CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다.</p> + +<p>CSS는 <strong>오픈 웹</strong>의 핵심 언어 중 하나이며 <a class="external" href="http://w3.org/Style/CSS/#specs">W3C 명세</a>에 따라 브라우저끼리 표준을 맞춥니다. 레벨 단위로 개발한 CSS1은 더 이상 사용하지 않고, 다음 레벨인 CSS2.1은 권고안이며, 레벨보다 작은 단위인 모듈로 나뉜 <a href="/ko/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>은 표준화 과정을 밟고 있습니다.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>CSS 소개</span> + + <p>웹 개발을 처음 하신다면 <a href="/ko/docs/Learn/Getting_started_with_the_web/CSS_기본">CSS 기본</a> 문서를 읽어 CSS가 무엇인지와 사용법을 배워보세요.</p> + </li> + <li><span>CSS 자습서</span> + <p>시작하는 완전한 초보자를 돕는 <a href="/ko/docs/CSS/Getting_Started" title="Getting Started">단계별 입문서</a>. 필요한 기초를 모두 제공합니다.</p> + </li> + <li><span>CSS 참고서</span> + <p>숙련된 개발자를 위한 <a href="/ko/docs/Web/CSS/Reference">전체 CSS 참고서</a>는 CSS의 모든 속성과 개념을 설명합니다.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="자습서">자습서</h2> + +<dl> + <dt><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a></dt> + <dd>선택자, 속성, 규칙 작성, HTML에 CSS 적용하기, 길이와 색 등 단위 지정하기, 종속과 상속, 박스 모델, 디버깅 등 CSS의 작동 원리와 기본을 배웁니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/Styling_text">텍스트 꾸미기</a></dt> + <dd>글꼴, 굵기, 기울이기, 줄 간격과 글자 간격, 그림자 등 텍스트 스타일의 기초를 논합니다. 사용자 설정 글꼴 적용, 목록과 링크 꾸미기로 마무리합니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/Styling_boxes">박스 꾸미기</a></dt> + <dd>웹 페이지 레이아웃의 기초 중 하나인 박스 스타일을 살펴봅니다. 박스 모델에 대해 복습하고, 마진, 테두리, 패딩, 배경색, 이미지, 그림자, 필터 등 박스 레이아웃을 조절하는 법을 배웁니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a></dt> + <dd>텍스트를 꾸미고 박스를 변형하는 등 CSS 기초를 살펴보았으니, 이제 화면이나 서로에게 상대적인 위치에 올바르게 배치하는 법을 배웁니다. 필요한 전제조건은 다루었으니 각기 다른 디스플레이 설정, 플로팅과 포지션을 사용하는 전통적인 레이아웃법 및 플렉스박스 등 새로운 방법 등 더 깊은 영역을 배웁니다.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="참고서">참고서</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Reference">CSS 참고서</a>: 숙련된 웹 개발자를 위해 CSS의 모든 속성과 개념을 설명합니다.</li> + <li>CSS 핵심 개념 + <ul> + <li><a href="/ko/docs/Web/CSS/Syntax">언어 구문과 형태</a></li> + <li><a href="/ko/docs/Web/CSS/Specificity">명시도</a>, <a href="/ko/docs/Web/CSS/inheritance">상속</a>, <a href="/ko/docs/Web/CSS/Cascade">종속</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Values_and_Units">CSS 단위와 값</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a>과 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a></li> + <li><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a></li> + <li><a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>과 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a></li> + <li><a href="/ko/docs/Web/CSS/initial_value">초기값</a>, <a href="/ko/docs/Web/CSS/computed_value">계산값</a>, <a href="/ko/docs/Web/CSS/used_value">사용값</a>, <a href="/ko/docs/Web/CSS/actual_value">실제값</a></li> + <li><a href="/ko/docs/Web/CSS/Shorthand_properties">CSS 단축 속성</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS 플렉스 박스 레이아웃</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li> + <li><a href="/ko/docs/Web/CSS/Media_Queries">미디어 쿼리</a></li> + <li><a href="/ko/docs/Web/CSS/animation">애니메이션</a></li> + </ul> + </li> +</ul> + +<h2 id="쿡북">쿡북</h2> + +<p><a href="/ko/docs/Web/CSS/Layout_cookbook">CSS 레이아웃 쿡북</a>은 여러분의 웹 사이트에서도 구현해야 할 수 있는, 흔히 쓰이는 레이아웃 패턴을 모아놓은 문서입니다. 프로젝트의 시작 코드는 물론이고, 레이아웃 명세를 사용하는 각기 다른 방법과 개발자로서 고를 수 있는 선택지를 제공합니다.</p> + +<h2 class="Tools" id="CSS_개발_도구">CSS 개발 도구</h2> + +<ul> + <li>CSS가 유효한지 검사하는 <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation 서비스</a>. 매우 유용한 디버깅 도구입니다.</li> + <li><a href="/ko/docs/Tools">Firefox 개발자 도구</a>는 <a href="/ko/docs/Tools/Page_Inspector">검사기</a>와 <a href="/ko/docs/Tools/Style_Editor">스타일 편집기</a> 도구를 통해 페이지의 실시간 CSS 보기와 편집을 허용합니다.</li> + <li>Firefox 전용 <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">웹 개발자 확장</a>도 특정 사이트를 주시해 CSS를 추적하고 실시간 편집을 가능케 합니다.</li> + <li><a href="/ko/docs/Web/CSS/Tools">기타 CSS 도구.</a></li> +</ul> +</div> +</div> +</section> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/Demos_of_open_web_technologies#CSS">CSS 데모</a>: 최신 CSS 기술을 사용한 데모를 탐색하며 영감을 얻어보세요.</li> + <li>흔히 CSS를 적용하는 웹 언어: <a href="/ko/docs/HTML">HTML</a>, <a href="/ko/docs/SVG">SVG</a>, <a href="/ko/docs/Glossary/XHTML">XHTML</a>, <a href="/ko/docs/Web/XML/XML_Introduction">XML</a>.</li> + <li>CSS를 광범위하게 사용하는 Mozilla 기술: <a href="/ko/docs/Mozilla/Firefox">Firefox</a>, <a href="/ko/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/ko/docs/Mozilla/Add-ons">확장기능</a>과 <a href="/ko/docs/Mozilla/Add-ons/Themes">테마</a>.</li> + <li><a href="https://stackoverflow.com/questions/tagged/css">Stack Overflow의 CSS 질문</a></li> +</ul> diff --git a/files/ko/web/css/index/index.html b/files/ko/web/css/index/index.html new file mode 100644 index 0000000000..953130cd26 --- /dev/null +++ b/files/ko/web/css/index/index.html @@ -0,0 +1,10 @@ +--- +title: CSS documentation index +slug: Web/CSS/Index +tags: + - CSS + - Index + - MDN Meta +translation_of: Web/CSS/Index +--- +<p>{{Index("/ko/docs/Web/CSS")}}</p> diff --git a/files/ko/web/css/inherit/index.html b/files/ko/web/css/inherit/index.html new file mode 100644 index 0000000000..71f7890cc3 --- /dev/null +++ b/files/ko/web/css/inherit/index.html @@ -0,0 +1,77 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - CSS Cascade + - Layout + - Reference + - Web +translation_of: Web/CSS/inherit +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">CSS <strong><code>inherit</code></strong> 키워드를 사용한 속성은 부모 요소로부터 해당 속성의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>을 받아 사용합니다.</span> CSS {{cssxref("all")}} 단축 속성을 포함한 모든 속성에 사용할 수 있습니다.</p> + +<p>상속되는 속성(<a href="/en/CSS/inheritance" title="en/CSS/inheritance">inherited properties</a>)의 경우, 이는 기본 동작(behavior)을 강화하고 오직 다른 규칙을 재정의(override)해야 합니다. 상속되지 않는 속성(<a href="/en/CSS/inheritance" title="en/CSS/inheritance">non-inherited properties</a>)은, 이는 보통 비교적 거의 의미가 없는 동작을 지정하고 당신은 대신 {{cssxref("initial")}} 혹은 {{cssxref("all")}} 속성에 {{cssxref("unset")}} 사용을 고려할 지도 모릅니다.</p> + +<p>상속(Inheritance)은 심지어 부모 요소가 포함(containing) 블록이 아니더라도, 항상 문서 트리 내 부모 요소로부터입니다.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: css"> /* h2를 green으로 만듦 */ + h2 { color: green; } + + /* 부모 요소의 color를 사용하도록 sidebar 내의 h2를 홀로 남김 */ + #sidebar h2 { color: inherit; } +</pre> + +<p>이 예제에서 sidebar 내부의 <code>h2</code> 요소는 다른 색일지도 모릅니다. 예를 들어, 그 중 하나는 규칙과 일치하는 div의 자식이라면</p> + +<pre class="brush: css"> div#current { color: blue; } +</pre> + +<p>파란색이 됩니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>명세</th> + <th>상태</th> + <th>설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Cascade', '#inherit', 'inherit') }}</td> + <td>{{Spec2('CSS4 Cascade')}}</td> + <td>Level 3에 변화 없음.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>{{ SpecName('CSS2.1') }}에서 두드러진 변화 없음</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("css.types.global_keywords.inherit")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="internal" href="/ko/docs/Web/CSS/inheritance">상속</a></li> + <li>{{cssxref("initial")}}을 사용해 속성의 초깃값을 사용하세요.</li> + <li>{{cssxref("unset")}}을 사용해 속성의 상속값 또는 초깃값을 사용하세요.</li> + <li>{{cssxref("revert")}}를 사용해 사용자 에이전트가 지정한 값(또는 사용자가 수정한 값)으로 속성을 되돌리세요.</li> + <li>{{cssxref("all")}} 속성을 사용하면 요소의 모든 속성을 한꺼번에 <code>initial</code>, <code>inherit</code>, <code>revert</code>, <code>unset</code>할 수 있습니다.</li> +</ul> diff --git a/files/ko/web/css/inheritance/index.html b/files/ko/web/css/inheritance/index.html new file mode 100644 index 0000000000..db14ed6cd8 --- /dev/null +++ b/files/ko/web/css/inheritance/index.html @@ -0,0 +1,54 @@ +--- +title: 상속 +slug: Web/CSS/inheritance +tags: + - CSS + - Guide + - Inheritance + - Layout + - Web +translation_of: Web/CSS/inheritance +--- +<div>{{cssref}}</div> + +<p>MDN 내 각 <a href="/ko/docs/Web/CSS/CSS_Reference">CSS 속성(property) 정의</a> 페이지의 요약절은 그 속성이 기본(default)으로 상속되는지("Inherited: Yes") 혹은 상속되지 않는지("Inherited: no") 쓰여 있습니다. 이 상속 여부는 요소의 속성에 어떤 값이 지정되지 않을 때 일어나는 일을 제어합니다.</p> + +<h2 id="Inherited_properties" name="Inherited_properties">상속되는 속성</h2> + +<p>요소의 <strong>상속되는 속성</strong>에 값이 지정되지 않은 경우, 요소는 부모 요소의 해당 속성의 <a href="/ko/docs/Web/CSS/computed_value" title="computed value">계산값</a>을 얻습니다. 오직 문서의 루트 요소만 속성의 요약절에 주어진 <a href="/ko/docs/Web/CSS/initial_value" title="initial value">초기값</a>을 얻습니다.</p> + +<p>상속되는 속성의 대표적인 예는 {{ Cssxref("color") }} 속성입니다. 주어진 스타일 규칙:</p> + +<pre class="brush: css">p { color: green }</pre> + +<p>과 마크업:</p> + +<pre class="brush: html"><p>This paragraph has <em>emphasized text</em> in it.</p></pre> + +<p><code>em</code> 요소는 <code>p</code> 요소로부터 {{ Cssxref("color") }} 속성값을 상속했기 때문에, "emphasized text"는 녹색으로 보입니다. 속성의 초기값(페이지가 어떤 색을 지정하지 않았을 때 루트 요소에 사용된 색)을 얻지 <em>않</em>습니다.</p> + +<h2 id="Non-inherited_properties" name="Non-inherited_properties">상속되지 않는 속성</h2> + +<p>요소의 <strong>상속되지 않는 속성</strong>(Mozilla 코드에서는 가끔 <strong>reset 속성</strong>으로 불림)에 어떤 값이 지정되지 않는 경우, 요소는 그 속성의 <a href="/ko/docs/Web/CSS/initial_value" title="initial value">초기값</a>을 얻습니다(속성의 요약절에 지정된 대로).</p> + +<p>상속되지 않는 속성의 대표적인 예는 {{ Cssxref("border") }} 속성입니다. 주어진 스타일 규칙:</p> + +<pre class="brush: css"> p { border: medium solid }</pre> + +<p>과 마크업:</p> + +<pre class="brush: html"> <p>This paragraph has <em>emphasized text</em> in it.</p></pre> + +<p>"emphasized text"는 테두리가 없습니다({{ Cssxref("border-style") }}의 초기값이 <code>none</code>이기 때문에).</p> + +<h2 id="Notes" name="Notes">참고</h2> + +<p>{{ Cssxref("inherit") }} 키워드는 작성자가 명시적으로 상속을 지정할 수 있게 합니다. 상속되는 속성과 상속되지 않는 속성 모두에 작동합니다.</p> + +<h2 id="See_Also" name="See_Also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Reference" title="CSS Reference">CSS 참고서</a></li> + <li>{{ CSS_key_concepts() }}</li> + <li>{{ Cssxref("inherit") }}</li> +</ul> diff --git a/files/ko/web/css/initial/index.html b/files/ko/web/css/initial/index.html new file mode 100644 index 0000000000..3205718d3d --- /dev/null +++ b/files/ko/web/css/initial/index.html @@ -0,0 +1,78 @@ +--- +title: initial +slug: Web/CSS/initial +tags: + - CSS + - CSS Cascade + - CSS Value + - Layout + - Reference + - Web + - 초기값 + - 초기화 + - 초깃값 +translation_of: Web/CSS/initial +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>initial</code></strong> 키워드는 속성의 <a href="/ko/docs/Web/CSS/initial_value">초깃값(기본값)</a>을 요소에 적용합니다.</span> 초깃값은 브라우저가 지정합니다. 모든 속성에서 사용할 수 있으며, {{cssxref("all")}}에 지정할 경우 모든 CSS 속성을 초깃값으로 재설정합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <a href="/ko/docs/Web/CSS/inheritance#Inherited_properties" title="inherited properties">상속 속성</a>의 초깃값은 예상치 못한 값일 수도 있습니다. 따라서, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}} 키워드의 사용을 대신 고려해보세요.</p> +</div> + +<h2 id="예제">예제</h2> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + <span>This text is red.</span> + <em>This text is in the initial color (typically black).</em> + <span>This is red again.</span> +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p { + color: red; +} + +em { + color: initial; +}</pre> + +<p>{{EmbedLiveSample('예제')}}</p> + +<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('CSS4 Cascade', '#initial', 'initial') }}</td> + <td>{{Spec2('CSS4 Cascade')}}</td> + <td>Level 3에서 변화 없음.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}</td> + <td>{{Spec2('CSS3 Cascade')}}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility"><nobr>브라우저 호환성</nobr></h2> + +<div>{{Compat("css.types.global_keywords.initial")}}</div> + +<h2 id="See_also" name="See_also">참조</h2> + +<ul> + <li>{{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}, {{cssxref("all")}}</li> +</ul> diff --git a/files/ko/web/css/initial_value/index.html b/files/ko/web/css/initial_value/index.html new file mode 100644 index 0000000000..2a764918ed --- /dev/null +++ b/files/ko/web/css/initial_value/index.html @@ -0,0 +1,51 @@ +--- +title: 초깃값 +slug: Web/CSS/initial_value +tags: + - CSS + - Reference +translation_of: Web/CSS/initial_value +--- +<div>{{cssref}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>초깃값</strong>은 속성의 기본값으로, 속성 정의 표가 명시하고 있습니다. 초깃값의 사용처는 상속 여부에 따라 다릅니다.</p> + +<ul> + <li><a href="/ko/docs/Web/CSS/inheritance#Inherited_properties">상속 속성</a>의 경우, <a href="/ko/docs/Web/CSS/specified_value">지정값</a>이 없는 이상 초깃값은 <strong>루트 요소에만</strong> 쓰입니다.</li> + <li><a href="/ko/docs/Web/CSS/inheritance#Non-inherited_properties">비상속 속성</a>의 경우, <a href="/ko/docs/Web/CSS/specified_value">지정값</a>이 없는 이상 초깃값은 <strong>모든 요소</strong>에 쓰입니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> {{cssxref("initial")}} 키워드를 사용해 명시적으로 초깃값을 지정할 수 있습니다.</p> +</div> + +<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><a href="https://drafts.csswg.org/css-cascade-4/#initial-values">CSS Cascade 4</a></td> + <td></td> + <td>Formal definition.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Implicit definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/ko/web/css/integer/index.html b/files/ko/web/css/integer/index.html new file mode 100644 index 0000000000..a6de2d4b1c --- /dev/null +++ b/files/ko/web/css/integer/index.html @@ -0,0 +1,93 @@ +--- +title: <integer> +slug: Web/CSS/integer +tags: + - CSS + - CSS Data Type + - Reference + - Web +translation_of: Web/CSS/integer +--- +<div>{{CSSRef}}</div> + +<p><strong><code><integer></code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("<number>")}}의 종류 중 하나로 소수점이 없는 완전한 수, 즉 정수를 표현합니다. 정수는 {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("z-index")}} 등 다양한 속성에서 사용할 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<p><code><integer></code> 자료형은 하나 이상의 0부터 9까지의 10진수 숫자로 구성하며, 선택적으로 <code>+</code>, <code>-</code>로 부호를 표시할 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.</p> + +<div class="note"><strong>참고:</strong> 공식적으로 정해진 <code><integer></code> 값의 범위는 없습니다. Opera 12.1은 최대 2<sup>15</sup>-1, IE는 2<sup>20</sup>-1, 그 외 브라우저는 더 큰 값도 지원합니다. CSS3 Values 논의 중 최소한의 범위를 설정하자는 말이 많아서 가장 최근인 <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">2012년 4월 LC 단계</a>에서는 [-2<sup>27</sup>-1; 2<sup>27</sup>-1]으로 결정했습니다. 2<sup>24</sup>-1과 2<sup>30</sup>-1처럼 다른 값도 <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">제안</a>됐습니다. 하지만 최신 명세는 범위를 지정하고 있지 않습니다.</div> + +<h2 id="보간">보간</h2> + +<p>애니메이션에서 <code><integer></code> 자료형의 값은 이산적으로 1씩 변화합니다. 계산은 유동소수점 실수를 사용하며 최종 결과인 이산값은 <a href="https://ko.wikipedia.org/wiki/%EB%B0%94%EB%8B%A5_%ED%95%A8%EC%88%98%EC%99%80_%EC%B2%9C%EC%9E%A5_%ED%95%A8%EC%88%98" title="http://en.wikipedia.org/wiki/Floor_function">버림 함수</a>를 사용해 얻습니다. 보간의 속도는 애니메이션과 연결된 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/single-transition-timing-function" rel="nofollow">타이밍 함수</a>가 결정합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="유효한_정수">유효한 정수</h3> + +<pre>12 양의 정수 (부호 표시 없음) ++123 양의 정수 (+ 부호) +-456 음의 정수 +0 0 ++0 0, 양의 부호 +-0 0, 음의 부호 +</pre> + +<h3 id="유효하지_않은_정수">유효하지 않은 정수</h3> + +<pre class="example-bad">12.0 정수를 표현하지만 <interger>가 아닌 <number> +12. 소수점은 불허 ++---12 하나의 +/-만 허용 +ten 글자는 불허 +_5 특수문자는 불허 +\35 유니코드 이스케이프 문자는 정수를 표현하더라도 불허 (\35: 5) +\4E94 아라비아 숫자 외의 다른 표현은 이스케이프 후에도 불허 (\4E94: 일본어 五). +3e4 과학적 표기법 불허 +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Values', '#integers', '<integer>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#integers', '<integer>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Explicit definition.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '', '<integer>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Implicit definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.integer")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("<number>")}}</li> +</ul> diff --git a/files/ko/web/css/isolation/index.html b/files/ko/web/css/isolation/index.html new file mode 100644 index 0000000000..ffeb6140f9 --- /dev/null +++ b/files/ko/web/css/isolation/index.html @@ -0,0 +1,114 @@ +--- +title: isolation +slug: Web/CSS/isolation +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/isolation +--- +<div>{{CSSRef}}</div> + +<p><strong><code>isolation</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소가 새로운 {{glossary("stacking context", "쌓임 맥락")}}을 생성해야 하는지 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div> + + + +<p>{{cssxref("mix-blend-mode")}}와 함께 사용했을 때 특히 유용합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 값 */ +isolation: auto; +isolation: isolate; + +/* 전역 값 */ +isolation: inherit; +isolation: initial; +isolation: unset; +</pre> + +<p><code>isolation</code> 속성은 다음 키워드 값 중 하나를 사용해 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>요소에 적용한 속성 중 새로운 쌓임 맥락을 요구하는 속성이 있을 때만 쌓임 맥락을 생성합니다.</dd> + <dt><code>isolate</code></dt> + <dd>항상 새로운 쌓임 맥락을 생성합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><div id="b" class="a"> + <div id="d"> + <div class="a c">auto</div> + </div> + <div id="e"> + <div class="a c">isolate</div> + </div> +</div> +</pre> + +<pre class="brush: css">.a { + background-color: rgb(0,255,0); +} +#b { + width: 200px; + height: 210px; +} +.c { + width: 100px; + height: 100px; + border: 1px solid black; + padding: 2px; + mix-blend-mode: difference; +} +#d { + isolation: auto; +} +#e { + isolation: isolate; +}</pre> + +<p>{{ EmbedLiveSample('예제', 230, 230) }}</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('Compositing', '#isolation', 'Isolation') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.isolation")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}</li> +</ul> diff --git a/files/ko/web/css/layout_mode/index.html b/files/ko/web/css/layout_mode/index.html new file mode 100644 index 0000000000..607a699b21 --- /dev/null +++ b/files/ko/web/css/layout_mode/index.html @@ -0,0 +1,32 @@ +--- +title: 레이아웃 모드 +slug: Web/CSS/Layout_mode +tags: + - CSS + - Guide + - Layout + - Reference +translation_of: Web/CSS/Layout_mode +--- +<div>{{cssref}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>레이아웃 모드</strong>, 줄여서 <strong>레이아웃</strong>은 형제(sibling) 및 조상(ancestor) 박스와 상호 작용하는 방식을 기반으로 박스의 위치와 크기를 결정하는 알고리즘입니다. 그 중 몇 가지입니다:</p> + +<ul> + <li>블록 레이아웃(<em>block layout</em>), 문서 배치를 위해 설계됨. 블록 레이아웃은 요소(element)를 <a href="/ko/docs/Web/CSS/float"><em>float</em></a> 하거나 여러 단(<a href="/ko/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts"><em>multiple columns</em></a>)에 걸쳐 배치하는 기술 같은 문서 중심 기능을 포함합니다.</li> + <li>인라인 레이아웃(<em>inline layout</em>), 텍스트 배치를 위해 설계됨.</li> + <li>테이블 레이아웃(<em>table layout</em>), 표 배치를 위해 설계됨.</li> + <li>위치지정 레이아웃(<em>positioned layout</em>), 다른 요소와 상호 작용이 많이 없는 요소의 위치지정을 위해 설계됨.</li> + <li>신축 박스 레이아웃(<a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes"><em>flexible box layout</em></a>), 부드럽게 크기조정이 될 수 있는 복잡한 페이지 배치를 위해 설계됨. {{experimental_inline}}</li> + <li>그리드 레이아웃(<em>grid layout</em>), 고정된 격자(grid)에 상대적인 요소 배치를 위해 설계됨. {{experimental_inline}}</li> +</ul> + +<div class="note"> +<p><strong>참고:</strong> CSS 속성(<a href="/ko/docs/Web/CSS/CSS_Reference">CSS properties</a>) 모두가 모든 <em>레이아웃 모드</em>에 적용되지는 않습니다. 속성 대부분은 한 두 모드에 적용되고 속성이 다른 레이아웃 모드에 참여하는 요소에 설정되면 효과가 없습니다.</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/ko/web/css/length-percentage/index.html b/files/ko/web/css/length-percentage/index.html new file mode 100644 index 0000000000..7ab06ee4ff --- /dev/null +++ b/files/ko/web/css/length-percentage/index.html @@ -0,0 +1,55 @@ +--- +title: <length-percentage> +slug: Web/CSS/length-percentage +tags: + - CSS + - CSS Date Type + - Reference +translation_of: Web/CSS/length-percentage +--- +<div>{{CSSRef}}</div> + +<p><strong><code><length-percentage></code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{Cssxref("<length>")}} 또는 {{Cssxref("<percentage>")}}인 값을 나타냅니다.</p> + +<h2 id="구문">구문</h2> + +<p>{{Cssxref("<length>")}}와 {{Cssxref("<percentage>")}} 문서에서 각 자료형의 구문을 살펴보세요.</p> + +<h2 id="calc()에서_사용하기"><code>calc()</code>에서 사용하기</h2> + +<p><code><length-percentage></code>를 허용한다면 백분율이 길이로 이행한다는 뜻이므로 {{cssxref("calc", "calc()")}}와 함께 사용할 수 있습니다. 따라서 아래의 {{cssxref("width")}} 값 모두 유효합니다.</p> + +<pre class="syntaxbox example-good">width: 200px +width: 20% +width: calc(100% - 200px) +</pre> + +<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('CSS4 Values', '#mixed-percentages', '<length-percentage>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#mixed-percentages', '<length-percentage>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Defines <code><length-percentage></code>. Adds <code>calc()</code></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.length-percentage")}}</p> diff --git a/files/ko/web/css/length/index.html b/files/ko/web/css/length/index.html new file mode 100644 index 0000000000..e2e5b3925b --- /dev/null +++ b/files/ko/web/css/length/index.html @@ -0,0 +1,252 @@ +--- +title: <length> +slug: Web/CSS/length +tags: + - CSS + - CSS Data Type + - Layout + - Reference + - Web + - length +translation_of: Web/CSS/length +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS </a><strong><code><length></code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 거리 값을 나타냅니다. {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, {{Cssxref("text-shadow")}} 등 다양한 속성에 사용할 수 있습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{cssxref("<percentage>")}} 값을 일부 속성의 <code><length></code> 값으로 사용할 수는 있지만 <code><percentage></code>와 <code><length></code> 는 다릅니다. {{cssxref("<length-percentage>")}}를 참고하세요.</p> +</div> + +<h2 id="구문">구문</h2> + +<p><code><length></code> 자료형은 {{cssxref("<number>")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위와 마찬가지로 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 <code>0</code> 뒤에는 단위를 붙이지 않아도 됩니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 일부 속성은 음의 <code><length></code>를 받지만 다른 속성은 그렇지 않습니다.</p> +</div> + +<h3 id="단위">단위</h3> + +<h4 id="상대길이_단위">상대길이 단위</h4> + +<p>상대길이는 어떤 다른 거리와의 상대적 비율을 표현합니다. 어떤 다른 거리란 단위에 따라 특정 문자, {{cssxref("line-height")}}, 아니면 {{glossary("viewport", "뷰포트")}}일 수 있습니다.</p> + +<h5 id="글꼴_상대_길이">글꼴 상대 길이</h5> + +<p>글꼴 상대 길이는 <code><length></code> 값을 특정 문자나 현재 요소가 사용하는 글꼴의 특정 속성을 기준으로 설정합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 아래 단위들, 특히 <code>em</code>과 <code>rem</code>은 사용자가 글꼴 크기를 늘려도 <a href="https://24ways.org/2006/compose-to-a-vertical-rhythm">페이지의 수직 흐름을 유지</a>하는, 확대 가능한 레이아웃을 만들기 위해 많이 쓰입니다.</p> +</div> + +<dl> + <dt><code><a id="cap" name="cap">cap</a></code> {{experimental_inline}}</dt> + <dd>요소 {{cssxref("font")}}의 "cap height"(영문 대문자의 평균 높이 값)를 나타냅니다.</dd> + <dt><code><a id="ch" name="ch">ch</a></code></dt> + <dd>요소 {{cssxref("font")}}의 문자 "0"(영, 유니코드 U+0030)의 너비를 나타냅니다.</dd> + <dd>문자 "0"의 너비를 측정하는 것이 불가능하거나 실용적이지 않은 경우 너비 0.5em에 높이 1em이라고 가정해야 합니다.</dd> + <dt><code><a id="em" name="em">em</a></code></dt> + <dd>요소 {{cssxref("font-size")}}의 계산값. 요소의 {{cssxref("font-size")}} 속성에 사용한다면 상속받는 <code>font-size</code> 값을 나타냅니다.</dd> + <dt><code><a id="ex" name="ex">ex</a></code></dt> + <dd>요소 {{cssxref("font")}}의 {{interwiki("wikipedia", "x높이")}}를 나타냅니다. "x"문자를 가진 글꼴에서는 보통 소문자 높이와 같습니다. 많은 글꼴에서 <code>1ex ≈ 0.5em</code>입니다.</dd> + <dt><code><a id="ic" name="ic">ic</a></code> {{experimental_inline}}</dt> + <dd>"水" (한중일 한자 "물", U+6C34) 문자를 렌더링할 때 사용하는 글꼴에서의 너비를 나타냅니다.</dd> + <dt><code><a id="lh" name="lh">lh</a></code> {{experimental_inline}}</dt> + <dd>요소가 {{cssxref("line-height")}}를 가지고 있는 경우, <code>line-height</code>의 계산값을 절대 길이로 변환해 나타냅니다.</dd> + <dt><code><a id="rem" name="rem">rem</a></code></dt> + <dd>루트 요소(보통 {{HTMLElement("html")}})의 {{cssxref("font-size")}}를 나타냅니다. 루트 요소의 <code>font-size</code>에 사용할 경우 최초값(보통 브라우저 기본값은 <code>16px</code>이나 사용자 설정으로 변할 수 있음)을 나타냅니다.</dd> + <dt><code><a id="rlh" name="rlh">rlh</a></code> {{experimental_inline}}</dt> + <dd>루트 요소(보통 {{HTMLElement("html")}})의 {{cssxref("line-height")}}를 절대 길이로 변환해 나타냅니다. 루트 요소의 {{cssxref("font-size")}}나 <code>line-height</code>에 사용할 경우 최초값을 나타냅니다.</dd> +</dl> + +<h5 id="뷰포트_백분율_길이">뷰포트 백분율 길이</h5> + +<p>뷰포트 백분율 길이는 <code><length></code> 값을 {{glossary("viewport", "뷰포트")}}, 즉 문서에서 볼 수 있는 부분의 크기를 기준으로 설정합니다. 뷰포트 길이는 {{cssxref("@page")}} 선언 블록에서는 유효하지 않습니다.</p> + +<dl> + <dt><code><a id="vh" name="vh">vh</a></code></dt> + <dd>뷰포트의 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 높이 1%와 같습니다.</dd> + <dt><code><a id="vw" name="vw">vw</a></code></dt> + <dd>뷰포트의 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비 1%와 같습니다.</dd> + <dt><code><a id="vi" name="vi">vi</a></code> {{experimental_inline}}</dt> + <dd>초기 컨테이닝 블록의 <a href="/ko/docs/Web/CSS/CSS_Logical_Properties#인라인_치수">인라인 축</a> 크기 1%와 같습니다.</dd> + <dt><code><a id="vb" name="vb">vb</a></code> {{experimental_inline}}</dt> + <dd>초기 컨테이닝 블록의 <a href="/ko/docs/Web/CSS/CSS_Logical_Properties#블록_치수">블록 축</a> 크기 1%와 같습니다.</dd> + <dt><code><a id="vmin" name="vmin">vmin</a></code></dt> + <dd><code>vw</code>와 <code>vh</code> 중 작은 것과 같습니다.</dd> + <dt><code><a id="vmax" name="vmax">vmax</a></code></dt> + <dd><code>vw</code>와 <code>vh</code> 중 큰 것과 같습니다.</dd> +</dl> + +<h4 id="절대길이_단위">절대길이 단위</h4> + +<p>절대길이 단위는 프린트 등 출력 수단의 크기를 알 수 있을 때의 물리적 측정 거리를 나타냅니다. 구현은 어떤 단위를 물리적인 실제 거리에 맞춰 기준으로 삼고, 나머지 단위를 상대적으로 계산해 설정합니다. 기준 단위는 화면 등 저해상도 장치와 프린터 등 고해상도 장치에서 다릅니다.</p> + +<p>저해상도 장치에서 <code>px</code> 단위는 물리적인 픽셀을 의미하며 나머지는 이에 상대적입니다. 따라서 <code>1in</code>은 <code>96px</code>로 정의하며 이는 <code>72pt</code>와 동일합니다. 그러나 인치(<code>in</code>), 센티미터(<code>cm</code>), 밀리미터(<code>mm</code>) 등 이렇게 정의하는 단위가 같은 이름을 가진 물리적인 측정 단위와 일치하지 않을 수 있다는 문제점이 있습니다.</p> + +<p>고해상도 장치에서 인치(<code>in</code>), 센티미터(<code>cm</code>), 밀리미터(<code>mm</code>)가 기준이 되어 물리적 거리와 동일합니다. 그래서 px 단위도 이에 맞춰 1인치의 1/96로 정의합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 많은 사용자가 {{glossary("user agent", "사용자 에이전트")}}의 기본 글꼴 크기를 늘려 읽기 쉽도록 설정합니다. 절대길이는 사용자 설정을 따르지 않기 때문에 접근성 문제를 유발할 수 있습니다. 따라서 <code>font-size</code>를 설정할 땐 <code>em</code>, <code>rem</code> 등 상대길이를 선택하세요.</p> +</div> + +<dl> + <dt><code><a id="px" name="px">px</a></code></dt> + <dd>1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만, 프린터나 고해상도 화면에서는 1/96 <code>in</code>을 맞출 수 있도록 여러 개의 장치 픽셀을 의미합니다.</dd> + <dt><code><a id="cm" name="cm">cm</a></code></dt> + <dd>1 센티미터, <code>1cm</code> = <code>96px/2.54</code>.</dd> + <dt><code><a id="mm" name="mm">mm</a></code></dt> + <dd>1 밀리미터, <code>1mm</code> = 1/10 <code>cm</code>.</dd> + <dt><code><a id="q" name="q">Q</a></code> {{experimental_inline}}</dt> + <dd>1/4 밀리미터, <code>1Q</code> = 1/40 <code>cm</code>.</dd> + <dt><code><a id="in" name="in">in</a></code></dt> + <dd>1 인치, <code>1in</code> = <code>2.54cm</code> = <code>96px</code>.</dd> + <dt><code><a id="pc" name="pc">pc</a></code></dt> + <dd>1 피카, <code>1pc</code> = <code>12pt</code> = 1/6<code>1in</code>.</dd> + <dt><code><a id="pt" name="pt">pt</a></code></dt> + <dd>One point. <code>1pt</code> = 1/72nd of <code>1in</code>.</dd> +</dl> + +<h2 id="보간">보간</h2> + +<p>애니메이션에서 <code><length></code> 자료형의 값은 부동소수점 실수로 간주하며 보간은 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>을 사용합니다. 보간 속도는 애니메이션에 연결된 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="길이_단위_비교">길이 단위 비교</h3> + +<p>아래 데모에서는 주어진 하나의 입력 칸에 <code>300px</code>, <code>50%</code>, <code>30vw</code> 등 <code><length></code> 값을 입력한 후 <kbd>Return</kbd>을 누르면 그 길이만큼의 막대를 생성합니다.</p> + +<p>서로 다른 길이 단위를 입력하고 비교해보세요.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="outer"> + <div class="input-container"> + <label>길이:</label> + <input type="text" id="length"> + </div> + <div class="inner"> + + </div> +</div> +<div class="results"> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; + font-weight: bold; + box-sizing: border-box; +} + +.outer { + width: 100%; + height: 50px; + background-color: #eee; + position: relative; +} + +.inner { + height: 50px; + background-color: #999; + box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), + inset -3px -3px 5px rgba(0,0,0,0.5); +} + +.result { + height: 20px; + background-color: #999; + box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), + inset -3px -3px 5px rgba(0,0,0,0.5); + background-color: orange; + display: flex; + align-items: center; + margin-top: 10px; +} + +.result code { + position: absolute; + margin-left: 20px; +} + +.results { + margin-top: 10px; +} + +.input-container { + position: absolute; + display: flex; + justify-content: flex-start; + align-items: center; + height: 50px; +} + +label { + margin: 0 10px 0 20px; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">const inputDiv = document.querySelector('.inner'); +const inputElem = document.querySelector('input'); +const resultsDiv = document.querySelector('.results'); + +inputElem.addEventListener('change', () => { + inputDiv.style.width = inputElem.value; + + const result = document.createElement('div'); + result.className = 'result'; + result.style.width = inputElem.value; + result.innerHTML = `<code>너비: ${inputElem.value}</code>`; + resultsDiv.appendChild(result); + + inputElem.value = ''; + inputElem.focus(); +})</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('길이_단위_비교','100%', 700)}}</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('CSS4 Values', '#lengths', '<length>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td>Adds the <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, and <code>rlh</code> units.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#lengths', '<length>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Adds the <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, and <code>Q</code> units.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Explicit definition of the <code>em</code>, <code>pt</code>, <code>pc</code>, and <code>px</code> units.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#length-units', '<length>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition. Implicit definition of the <code>em</code>, <code>pt</code>, <code>pc</code>, and <code>px</code> units.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.length")}}</p> diff --git a/files/ko/web/css/letter-spacing/index.html b/files/ko/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..4f7acc93f5 --- /dev/null +++ b/files/ko/web/css/letter-spacing/index.html @@ -0,0 +1,135 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 글자 간격 +translation_of: Web/CSS/letter-spacing +--- +<div>{{CSSRef}}</div> + +<p><strong><code>letter-spacing</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 글자 사이의 간격을 조절합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 키워드 값 */ +letter-spacing: normal; + +/* <length> 값 */ +letter-spacing: 0.3em; +letter-spacing: 3px; +letter-spacing: .3px; + +/* 전역 값 */ +letter-spacing: inherit; +letter-spacing: initial; +letter-spacing: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>현재 글꼴의 기본 간격. <code>0</code>과 달리, <code>auto</code>는 {{glossary("user agent", "사용자 에이전트")}}가 양쪽 정렬을 위해 간격을 임의로 조절할 수 있습니다.</dd> + <dt>{{cssxref("<length>")}}</dt> + <dd>기본 간격에 <strong>추가</strong>할 글자간 간격. 음수 값을 지정할 수 있지만 구현에 따라 한계가 있을 수 있습니다. 사용자 에이전트가 간격을 줄이거나 늘리지 않습니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="normal">글자 간격</p> +<p class="em-wide">글자 간격</p> +<p class="em-wider">글자 간격</p> +<p class="em-tight">글자 간격</p> +<p class="px-wide">글자 간격</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.normal { letter-spacing: normal; } +.em-wide { letter-spacing: 0.4em; } +.em-wider { letter-spacing: 1em; } +.em-tight { letter-spacing: -0.05em; } +.px-wide { letter-spacing: 6px; } +</pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample('예제', 440, 185) }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>letter-spacing</code> 값의 절댓값이 너무 크면 스타일을 적용한 글을 읽기 힘들어집니다. 지나치게 큰 값으로는 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로 따로 보입니다. 반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없습니다.</p> + +<p>글꼴마다 문자의 너비가 다르므로 읽기에 용이한 간격은 상황에 따라 다릅니다. 모든 글꼴에 적합한 하나의 값은 존재하지 않습니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>letter-spacing</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial SVG definition.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.letter-spacing")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{cssxref("font-kerning")}}</li> +</ul> diff --git a/files/ko/web/css/line-break/index.html b/files/ko/web/css/line-break/index.html new file mode 100644 index 0000000000..76fabd4316 --- /dev/null +++ b/files/ko/web/css/line-break/index.html @@ -0,0 +1,112 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - i18n + - l10n + - 'recipe:css-property' +translation_of: Web/CSS/line-break +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>line-break</code></strong> 속성은 한중일(CJK) 3개국어의 텍스트 줄을 어디서 바꿀지 지정합니다.</p> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +line-break: auto; +line-break: loose; +line-break: normal; +line-break: strict; +line-break: anywhere; + +/* 전역 값 */ +line-break: inherit; +line-break: initial; +line-break: unset; +</pre> + +<h2 id="구문">구문</h2> + +<h3 id="값">값</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>기본 줄 바꿈 규칙을 사용합니다.</dd> + <dt><code>loose</code></dt> + <dd>가장 자유로운 줄 바꿈 규칙을 사용합니다. 보통 신문 등 짧은 줄에서 사용합니다.</dd> + <dt><code>normal</code></dt> + <dd>가장 흔한 줄 바꿈 규칙을 사용합니다.</dd> + <dt><code>strict</code></dt> + <dd>가장 엄격한 줄 바꿈 규칙을 사용합니다.</dd> + <dt><code>anywhere</code></dt> + <dd> + <p>모든 타이포그래피 글자 단위 주위에서 줄을 바꿀 수 있습니다. 줄 바꿈 위치는 모든 문장 부호, 공백, 단어 중간을 포함하며 GL, WJ, ZWJ 문자 클래스가 나타내는 줄 바꿈 제한 및 {{cssxref("word-break")}}가 요구하는 규칙 모두 무시할 수 있습니다. 붙임표는 사용하지 않습니다.</p> + </dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="줄_바꿈_지정하기">줄 바꿈 지정하기</h3> + +<p>줄 바꿈이 "々", "ぁ", "。"의 주위에서 어떻게 발생하는지 살펴보세요.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div lang="ja"> + <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> + <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } +.auto { line-break: auto; } +.loose { line-break: loose; } +.normal { line-break: normal; } +.strict { line-break: strict; } +.anywhere { line-break: anywhere; } +</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('줄_바꿈_지정하기', 200, 400) }}</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('CSS3 Text', '#line-break-property', 'line-break')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.line-break")}}</p> diff --git a/files/ko/web/css/linear-gradient()/index.html b/files/ko/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..74635f0434 --- /dev/null +++ b/files/ko/web/css/linear-gradient()/index.html @@ -0,0 +1,204 @@ +--- +title: linear-gradient +slug: Web/CSS/linear-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Graphics + - Layout + - Reference + - Web + - gradient + - 그라데이션 + - 그레이디언트 +translation_of: Web/CSS/linear-gradient() +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>linear-gradient()</code></strong> 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 {{cssxref("<image>")}}의 특별한 종류인 {{cssxref("<gradient>")}} 자료형입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">/* 45도로 기울어진 파랑 시작 빨강 종료 그레이디언트 */ +linear-gradient(45deg, blue, red); + +/* 우하단에서 좌상단으로, 파랑 시작 빨강 종료 그레이디언트 */ +linear-gradient(to left top, blue, red); + +/* 색상 정지점: 아래에서 위로, + 파랑에서 시작해 길이의 40%에서 초록으로, + 빨강 종료 그레이디언트 */ +linear-gradient(0deg, blue, green 40%, red); + +/* 색상 힌트: 왼쪽에서 오른쪽으로, + 빨강에서 시작해 길이의 10% 지점에서 중간 색상으로, + 나머지 90% 길이 동안 파랑으로 변하는 그레이디언트 */ +linear-gradient(.25turn, red, 10%, blue); + +/* 다중 위치 색상 정지점: 45도 기울어진, + 좌하단 절반 빨강, 우상단 파랑 절반에 + 두 색이 만나는 지점을 정확히 나누는 그레이디언트 */ +linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code><side-or-corner></code></dt> + <dd>그레이디언트 축의 시작점. 지정할 경우, <code>to</code> 이후 최대 두 개의 방향을 나타내는 키워드를 사용할 수 있습니다. 하나는 수평 방향(<code style="font-size: 14px;">left</code> 또는 <code>right</code>)이고, 다른 하나는 수직 방향(<code>top</code> 또는 <code>bottom</code>)입니다. 방향 키워드의 순서는 상관하지 않으며, 기본값은 <code>to bottom</code>입니다.</dd> + <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> 값은 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>와 같습니다. 나머지 값은 각도로 변환됩니다.</dd> + <dt>{{cssxref("<angle>")}}</dt> + <dd>그레이디언트 축의 방향. <code>0deg</code>는 <code>to top</code>과 같습니다. 0 이상의 값을 지정하면 축이 시계방향으로 돌아갑니다.</dd> + <dt><code><linear-color-stop></code></dt> + <dd>색상 정지점의 {{CSSxRef("<color>")}} 값과 하나 혹은 두 개의 선택적인 정지점 위치. (각각 그레이디언트 축 위의 {{cssxref("<percentage>")}} 또는 {{CSSxRef("<length>")}})</dd> + <dt><code><color-hint></code></dt> + <dd><code>color-hint</code>는 두 인접한 색상 정지점 사이에서 그레이디언트가 진행하는 방식을 지정하는 보간 힌트입니다. 길이는 두 정지점 간의 길이에서 어느 지점에 그 중간 색에 도달해야 하는지 지정합니다. 생략할 경우 가운데에서 중간 색에 도달합니다.</dd> + <dd> + <div class="note"> + <p><strong>참고:</strong> <a href="#다중_위치_색상_정지점을_가진_그레이디언트">CSS 그레이디언트에서의 색상 정지점 렌더링</a>은 <a href="/ko/docs/Web/SVG/Tutorial/Gradients">SVG 그레이디언트</a>에서의 색상 정지점과 동일한 규칙을 따라갑니다.</p> + </div> + </dd> +</dl> + +<h2 id="설명">설명</h2> + +<p>다른 그레이디언트와 마찬가지로, 선형 그레이디언트는 본질 크기를 가지지 않습니다. 즉 기본 크기나 선호 크기, 선호 비율이 없으며, 실제 크기는 그레이디언트를 적용한 요소의 크기와 동일해집니다.</p> + +<p>반복하여 컨테이너를 채우는 선형 그레이디언트가 필요하면 {{cssxref("repeating-linear-gradient")}} 함수를 사용하세요.</p> + +<p><code><gradient></code>는 <code><image></code>의 한 종류로서 <code><image></code>를 사용하는 곳에만 적용할 수 있습니다. 따라서 <code>linear-gradient()</code>는 {{cssxref("background-color")}}와 같은 {{cssxref("<color>")}} 자료형을 받는 속성에는 사용할 수 없습니다.</p> + +<h3 id="선형_그레이디언트의_구성">선형 그레이디언트의 구성</h3> + +<p>선형 그레이디언트는 하나의 축(그레이디언트 라인)과 두 개 이상의 색상 정지점으로 정의할 수 있습니다. 축 위의 점은 모두 고유한 색을 가집니다. <code>linear-gradient()</code> 함수는 부드러운 그레이디언트를 만들기 위해 축과 직교하는 무수한 선을 그리며, 각 수직선의 색은 축과 교차하는 점의 색과 일치합니다.</p> + +<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; font-size: 13.63636302948px; height: 383px; line-height: 19.0909080505371px; width: 309px;">그레이디언트 축은 그레이디언트 이미지를 담은 직사각형의 중심점과 각도로 정의할 수 있습니다. 그레이디언트 색상은 시작점과 종료점, 그리고 그 사이의 다른 정지점 등 두 개 이상의 색상 정지점이 정의합니다.</p> + +<p>시작점은 그레이디언트 축의 한 점으로, 첫 번째 색상이 시작하는 지점입니다. 종료점은 마지막 색상이 끝나는 지점입니다. 두 점은 직사각형에서 자신과 같은 사분면에 위치하는 꼭지점으로부터 시작하여 그레이디언트 축과 직교하는 지점으로 정의합니다. 종료점은 시작점의 대칭점으로 간단하게 알아둘 수도 있습니다. 이렇게 다소 복잡한 정의로 인해, 시작점과 가장 가까운 꼭지점이 시작점의 색을, 종료점과 가장 가까운 꼭지점이 종료점의 색을 갖는 특이한 효과를 확인할 수도 있습니다. 이 효과는 "매직 코너"라고 불리기도 합니다.</p> + +<h4 id="그레이디언트_만들기">그레이디언트 만들기</h4> + +<p>그레이디언트 축에 색상 정지점을 더 추가하여, 다양한 색 사이로 전환하는, 고도로 맞춤화한 그레이디언트를 만들 수 있습니다. 색상 정지점의 위치는 {{cssxref("<length>")}}나 {{cssxref("<percentage>")}}를 사용해 명시적으로 지정할 수 있습니다. 따로 위치를 정하지 않으면 이전 정지점과 다음 정지점의 중간 지점에 위치합니다. 다음 두 그레이디언트는 동일합니다.</p> + +<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre> + +<p>기본적으로 그레이디언트에서 색상 전환은 하나의 색상 정지점에서 다른 색상 정지점으로 부드럽게 일어나고, 가운데 지점은 두 색상의 사이값을 가집니다. 그러나 두 색의 사이에 색상 힌트를 넣어서 직접 색의 중간 지점을 정할 수도 있습니다. 다음 예제의 그레이디언트는 시작점에서 10% 지점까지 완전한 빨강이고, 90% 지점까지는 빨강에서 파랑으로 서서히 전환하며, 마지막 10%는 완전한 파랑입니다. 그러나 빨강과 파랑 사이 전환의 중간 지점은 50%가 아닌 30% 지점이 됩니다.</p> + +<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre> + +<p>두 개 이상의 색상 정지점을 같은 위치에 배치하면 부드럽게 전환하는 대신 이전 색과 다음 색이 경계선을 그리며 바로 바뀝니다.</p> + +<p>색상 정지점의 순서는 오름차순이어야 합니다. 다음 정지점의 위치가 이전 정지점보다 앞이면, 이전 정지점의 위치를 재설정하고 색 전환도 경계선을 그리며 일어납니다. 다음 그레이디언트는 30% 지점에서 빨강에서 노랑으로 바뀌고, 65% 지점까지 파랑으로 전환합니다.</p> + +<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%); +</pre> + +<p>색상 정지점이 여러 위치를 가질 수도 있습니다. 색상을 선언할 때 인접한 두 정지점의 위치를 모두 포함할 수 있습니다. 다음 세 그레이디언트는 모두 같습니다.</p> + +<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); +linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); +linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre> + +<p>기본적으로, 0% 지점에 색을 할당하지 않으면 처음으로 선언한 색이 0%에 배치됩니다. 비슷하게 100% 지점에 색이 없는 경우 마지막 색이 100% 지점까지 도달합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="45도_기울어진_그레이디언트">45도 기울어진 그레이디언트</h3> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + width: 100vw; + height: 100vh; +}</pre> +</div> + +<pre class="brush: css notranslate">body { + background: linear-gradient(45deg, red, blue); +} +</pre> + +<p>{{EmbedLiveSample("45도_기울어진_그레이디언트", 120, 120)}}</p> + +<h3 id="축의_60_지점에서_시작하는_그레이디언트">축의 60% 지점에서 시작하는 그레이디언트</h3> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + width: 100vw; + height: 100vh; +}</pre> +</div> + +<pre class="brush: css notranslate">body { + background: linear-gradient(135deg, orange 60%, cyan); +}</pre> + +<p>{{EmbedLiveSample("축의_60_지점에서_시작하는_그레이디언트", 120, 120)}}</p> + +<h3 id="다중_위치_색상_정지점을_가진_그레이디언트">다중 위치 색상 정지점을 가진 그레이디언트</h3> + +<p>이 예제는 다중 위치 색상 정지점을 사용하면서, 인접한 색상 정지점의 위치를 같게 하여 줄무늬 효과를 냅니다.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + width: 100vw; + height: 100vh; +}</pre> +</div> + +<pre class="brush: css notranslate">body { + background: linear-gradient(to right, + red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); +}</pre> + +<p>{{EmbedLiveSample("다중_위치_색상_정지점을_가진_그레이디언트", 120, 120)}}</p> + +<h3 id="더_많은_예제">더 많은 예제</h3> + +<p><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a> 문서에서 더 많은 예제를 확인하세요.</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>Adds interpolation hints.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a></li> + <li>다른 그레이디언트 함수: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li> + <li>{{CSSxRef("<image>")}}</li> + <li>{{cssxref("element()")}}</li> + <li>{{cssxref("_image","image()")}}</li> + <li>{{cssxref("image-set","image-set()")}}</li> + <li>{{cssxref("cross-fade")}}</li> +</ul> diff --git a/files/ko/web/css/margin-bottom/index.html b/files/ko/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..f374be0438 --- /dev/null +++ b/files/ko/web/css/margin-bottom/index.html @@ -0,0 +1,100 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-bottom +--- +<div>{{CSSRef}}</div> + +<p><strong><code>margin-bottom</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 아래쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a><sup>margin area</sup>을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div> + + + +<p>{{HTMLElement("span")}}, {{HTMLElement("code")}} 등 <a href="/ko/docs/Web/CSS/Replaced_element">비대체</a><sup>non-replaced</sup> 인라인 요소에는 효과가 없습니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush: css">/* <length> 값 */ +margin-bottom: 10px; /* 절대 길이 */ +margin-bottom: 1em; /* 글씨 크기에 상대적 */ +margin-bottom: 5%; /* 가장 가까운 블록 컨테이너의 너비에 상대적 */ + +/* 키워드 값 */ +margin-bottom: auto; + +/* 전역 값 */ +margin-bottom: inherit; +margin-bottom: initial; +margin-bottom: unset;</pre> + +<p><code>margin-bottom</code> 속성은 키워드 <code>auto</code>, <code><length></code>, <code><percentage></code>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>바깥 여백 크기의 고정 값.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>바깥 여백 크기와 블록 컨테이너 너비의 비율.</dd> + <dt><code>auto</code></dt> + <dd>브라우저가 적절한 값 선택. {{cssxref("margin")}}을 참고하세요.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush:css;">.content { margin-bottom: 5%; } +.sidebox { margin-bottom: 10px; } +.logo { margin-bottom: -5px; } +#footer { margin-bottom: 1em; } +</pre> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Box', '#the-margin', 'margin-bottom')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>margin-bottom</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Removes its effect on inline elements.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.margin-bottom")}}</p> diff --git a/files/ko/web/css/margin-left/index.html b/files/ko/web/css/margin-left/index.html new file mode 100644 index 0000000000..9e1d9b9953 --- /dev/null +++ b/files/ko/web/css/margin-left/index.html @@ -0,0 +1,160 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +tags: + - CSS + - CSS Property + - Layout + - Reference +translation_of: Web/CSS/margin-left +--- +<div>{{CSSRef}}</div> + +<p><strong><code>margin-left</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 왼쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a><sup>margin area</sup>을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +margin-left: 20px; /* 절대 길이 */ +margin-left: 1em; /* 글씨 크기에 상대적 */ +margin-left: 5%; /* 가장 가까운 블록 컨테이너의 너비에 상대적 */ + +/* 키워드 값 */ +margin-left: auto; + +/* 전역 값 */ +margin-left: inherit; +margin-left: initial; +margin-left: unset; +</pre> + +<p><code>margin-left</code> 속성은 키워드 <code>auto</code>, <code><length></code>, <code><percentage></code>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>바깥 여백 크기의 고정 값.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>바깥 여백 크기와 블록 컨테이너 너비의 비율.</dd> + <dt><code>auto</code></dt> + <dd>사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. <code>margin-left</code>와 <code>margin-right</code>의 값이 모두 <code>auto</code>라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다. + <table class="standard-table"> + <thead> + <tr> + <th scope="col">{{cssxref("display")}} 값</th> + <th scope="col">{{cssxref("float")}} 값</th> + <th scope="col">{{cssxref("position")}} 값</th> + <th scope="col"><code>auto</code>의 계산 값</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th> + <th><em>any</em></th> + <th><code>static</code> or <code>relative</code></th> + <td><code>0</code></td> + <td>인라인 레이아웃 모드</td> + </tr> + <tr> + <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> + <th><em>any</em></th> + <th><code>static</code> or <code>relative</code></th> + <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the element inside its parent.</td> + <td>블록 레이아웃 모드</td> + </tr> + <tr> + <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> + <th><code>left</code> or <code>right</code></th> + <th><code>static</code> or <code>relative</code></th> + <td><code>0</code></td> + <td>블록 레이아웃 모드 (플로팅 요소)</td> + </tr> + <tr> + <th><em>any </em><code>table-*</code><em>, except </em><code>table-caption</code></th> + <th><em>any</em></th> + <th><em>any</em></th> + <td><code>0</code></td> + <td>내부 <code>table-*</code> 요소는 바깥 여백을 가지지 않습니다. 대신 {{ cssxref("border-spacing") }}을 사용하세요.</td> + </tr> + <tr> + <th><em>any, except <code>flex</code>,</em> <code>inline-flex</code><em>, or </em><code>table-*</code></th> + <th><em>any</em></th> + <th><em><code>fixed</code></em> or <code>absolute</code></th> + <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the border area inside the available <code>width</code>, if fixed.</td> + <td>절대위치 레이아웃 모드</td> + </tr> + <tr> + <th><code>flex</code>, <code>inline-flex</code></th> + <th><em>any</em></th> + <th><em>any</em></th> + <td><code>0</code>, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal <code>auto</code> margins.</td> + <td>플렉스박스 레이아웃 모드</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: css">.content { margin-left: 5%; } +.sidebox { margin-left: 10px; } +.logo { margin-left: -5px; } +</pre> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Box', '#the-margin', 'margin-left') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-left') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>margin-left</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Defines the behavior of <code>margin-right</code> on flex items.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Removes its effect on inline elements.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin-left', 'margin-left') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.margin-left")}}</p> diff --git a/files/ko/web/css/margin-right/index.html b/files/ko/web/css/margin-right/index.html new file mode 100644 index 0000000000..8547ce5bcd --- /dev/null +++ b/files/ko/web/css/margin-right/index.html @@ -0,0 +1,159 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-right +--- +<div>{{CSSRef}}</div> + +<p><strong><code>margin-right</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 오른쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a><sup>margin area</sup>을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +margin-right: 20px; /* 절대 길이 */ +margin-right: 1em; /* 글씨 크기에 상대적 */ +margin-right: 5%; /* 가장 가까운 블록 컨테이너의 너비에 상대적 */ + +/* 키워드 값 */ +margin-right: auto; + +/* 전역 값 */ +margin-right: inherit; +margin-right: initial; +margin-right: unset; +</pre> + +<p><code>margin-right</code> 속성은 키워드 <code>auto</code>, <code><length></code>, <code><percentage></code>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>바깥 여백 크기의 고정 값.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>바깥 여백 크기와 블록 컨테이너 너비의 비율.</dd> + <dt><code>auto</code></dt> + <dd>사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. <code>margin-left</code>와 <code>margin-right</code>의 값이 모두 <code>auto</code>라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다. + <table class="standard-table"> + <thead> + <tr> + <th scope="col">{{cssxref("display")}} 값</th> + <th scope="col">{{cssxref("float")}} 값</th> + <th scope="col">{{cssxref("position")}} 값</th> + <th scope="col"><code>auto</code>의 계산 값</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th> + <th><em>any</em></th> + <th><code>static</code> or <code>relative</code></th> + <td><code>0</code></td> + <td>인라인 레이아웃 모드</td> + </tr> + <tr> + <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> + <th><em>any</em></th> + <th><code>static</code> or <code>relative</code></th> + <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the element inside its parent.</td> + <td>블록 레이아웃 모드</td> + </tr> + <tr> + <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th> + <th><code>left</code> or <code>right</code></th> + <th><code>static</code> or <code>relative</code></th> + <td><code>0</code></td> + <td>블록 레이아웃 모드 (플로팅 요소)</td> + </tr> + <tr> + <th><em>any </em><code>table-*</code><em>, except </em><code>table-caption</code></th> + <th><em>any</em></th> + <th><em>any</em></th> + <td><code>0</code></td> + <td>내부 <code>table-*</code> 요소는 바깥 여백을 가지지 않습니다. 대신 {{ cssxref("border-spacing") }}을 사용하세요.</td> + </tr> + <tr> + <th><em>any, except <code>flex</code>,</em> <code>inline-flex</code><em>, or </em><code>table-*</code></th> + <th><em>any</em></th> + <th><em><code>fixed</code></em> or <code>absolute</code></th> + <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the border area inside the available <code>width</code>, if fixed.</td> + <td>절대위치 레이아웃 모드</td> + </tr> + <tr> + <th><code>flex</code>, <code>inline-flex</code></th> + <th><em>any</em></th> + <th><em>any</em></th> + <td><code>0</code>, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal <code>auto</code> margins.</td> + <td>플렉스박스 레이아웃 모드</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: css">.content { margin-right: 5%; } +.sidebox { margin-right: 10px; } +.logo { margin-right: -5px; } +</pre> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Box', '#the-margin', 'margin-right') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>margin-right</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Defines the behavior of <code>margin-right</code> on flex items.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Removes its effect on inline elements.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin-right', 'margin-right') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.margin-right")}}</p> diff --git a/files/ko/web/css/margin-top/index.html b/files/ko/web/css/margin-top/index.html new file mode 100644 index 0000000000..008ab67ade --- /dev/null +++ b/files/ko/web/css/margin-top/index.html @@ -0,0 +1,100 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-top +--- +<div>{{CSSRef}}</div> + +<p><strong><code>margin-top</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 위쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a><sup>margin area</sup>을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div> + + + +<p>{{HTMLElement("span")}}, {{HTMLElement("code")}} 등 <a href="/ko/docs/Web/CSS/Replaced_element">비대체</a><sup>non-replaced</sup> 인라인 요소에는 효과가 없습니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush: css">/* <length> 값 */ +margin-top: 10px; /* 절대 길이 */ +margin-top: 1em; /* 글씨 크기에 상대적 */ +margin-top: 5%; /* 가장 가까운 블록 컨테이너의 너비에 상대적 */ + +/* 키워드 값 */ +margin-top: auto; + +/* 전역 값 */ +margin-top: inherit; +margin-top: initial; +margin-top: unset;</pre> + +<p><code>margin-top</code> 속성은 키워드 <code>auto</code>, <code><length></code>, <code><percentage></code>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>바깥 여백 크기의 고정 값.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>바깥 여백 크기와 블록 컨테이너 너비의 비율.</dd> + <dt><code>auto</code></dt> + <dd>브라우저가 적절한 값 선택. {{cssxref("margin")}}을 참고하세요.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush:css;">.content { margin-top: 5%; } +.sidebox { margin-top: 10px; } +.logo { margin-top: -5px; } +#footer { margin-top: 1em; } +</pre> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Box', '#the-margin', 'margin-top')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>margin-top</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Removes its effect on inline elements.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.margin-top")}}</p> diff --git a/files/ko/web/css/margin/index.html b/files/ko/web/css/margin/index.html new file mode 100644 index 0000000000..a1048fb37e --- /dev/null +++ b/files/ko/web/css/margin/index.html @@ -0,0 +1,176 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin +--- +<div>{{CSSRef}}</div> + +<p><strong><code>margin</code></strong> CSS 속성은 요소의 네 방향 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a>을 설정합니다. {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}의 단축 속성입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div> + + + +<p>위와 아래 여백은 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>가 아닌 {{HTMLElement("span")}}, {{HTMLElement("code")}} 등 인라인 요소에선 아무 효과도 없습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">margin</span></font>은 요소의 주위에 빈 공간을 추가합니다. 반면 {{cssxref("padding")}}은 요소의 <strong>내부</strong>에 빈 공간을 만듭니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">/* 네 면 모두 적용 */ +margin: 1em; +margin: -3px; + +/* 세로방향 | 가로방향 */ +margin: 5% auto; + +/* 위 | 가로방향 | 아래 */ +margin: 1em auto 2em; + +/* 위 | 오른쪽 | 아래 | 왼쪽 */ +margin: 2px 1em 0 auto; + +/* 전역 값 */ +margin: inherit; +margin: initial; +margin: unset; +</pre> + +<p><code>margin</code> 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("<length>")}}, {{cssxref("<percentage>")}} 또는 키워드 <code>{{anch("auto")}}</code> 중 하나입니다. 음수 값은 요소와 이웃의 거리가 더 가까워지도록 합니다.</p> + +<ul> + <li><strong>한 개의 값</strong>은 모든 네 면의 여백을 설정합니다.</li> + <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 여백을 설정합니다.</li> + <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 여백을 설정합니다.</li> + <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 여백을 지정합니다. (시계방향)</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt><a id="<length>" name="<length>">{{cssxref("length")}}</a></dt> + <dd>여백의 크기로 고정값 사용.</dd> + <dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt> + <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율 사용.</dd> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있습니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="center">이 요소는 중앙 정렬입니다.</div> +<div class="outside">이 요소는 컨테이너 밖으로 빠져 나갔습니다.</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.center { + margin: auto; + background: lime; + width: 66%; +} + +.outside { + margin: 3rem 0 0 -3rem; + background: cyan; + width: 66%; +}</pre> + +<p>{{ EmbedLiveSample('간단한_예제') }}</p> + +<h3 id="더_많은_예제">더 많은 예제</h3> + +<pre class="brush: css">margin: 5%; /* 모두 5% */ + +margin: 10px; /* 모두 10px */ + +margin: 1.6em 20px; /* 상하: 1.6em */ + /* 좌우: 20px */ + +margin: 10px 3% -1em; /* 상: 10px */ + /* 좌우: 3% */ + /* 하: -1em */ + +margin: 10px 3px 30px 5px; /* 상: 10px */ + /* 우: 3px */ + /* 하: 30px */ + /* 좌: 5px */ + +margin: 2em auto; /* 상하: 2em */ + /* 수평 중앙정렬 */ + +margin: auto; /* 상하: 0 */ + /* 수평 중앙정렬 */</pre> + +<h2 id="참고">참고</h2> + +<h3 id="수평_중앙정렬">수평 중앙정렬</h3> + +<p>현대 브라우저에서 어떤 요소를 중앙에 배치하려면 {{cssxref("display")}}<code>: flex; </code>{{cssxref("justify-content")}}<code>: center;</code>를 사용하면 됩니다.</p> + +<p>하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 <code>margin: 0 auto;</code>를 대신 사용하세요.</p> + +<h3 id="여백_상쇄">여백 상쇄</h3> + +<p>두 개 요소의 위와 아래 여백은 종종 합쳐져 하나의 여백이 되고, 그 크기는 둘 중 더 큰 여백과 같아집니다. 더 자세한 정보는 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄 정복</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('CSS3 Box', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>margin</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Removes its effect on inline elements.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.properties.margin")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 기본 박스 모델 입문</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄 정복</a></li> + <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li> +</ul> diff --git a/files/ko/web/css/mask/index.html b/files/ko/web/css/mask/index.html new file mode 100644 index 0000000000..ca23758e02 --- /dev/null +++ b/files/ko/web/css/mask/index.html @@ -0,0 +1,117 @@ +--- +title: mask +slug: Web/CSS/mask +tags: + - CSS + - CSS Property + - Layout + - Reference + - SVG + - Web +translation_of: Web/CSS/mask +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>mask</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다.</span></p> + +<div class="note"> +<p><code>mask</code> 는 {{cssxref("mask-border")}}를 초기값으로 재정의합니다. 그러므로 캐스캐이드 이전 단계에 어떠한 마스크 설정을 덮어씌우는 개별 속성아니 여타 다른 속성보다는 <code>mask</code> 를 사용하는 것을 추천합니다. This will ensure that <code>mask-border</code> has also been reset to allow the new styles to take effect.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css">/* 키워드 값 */ +mask: none; + +/* 이미지 값 */ +mask: url(mask.png); /* 마스크로 사용되는 이미지 */ +mask: url(masks.svg#star); /* 마스크로 사용되는 SVG 그래픽 내 요소 */ + +/* 조합형 값 */ +mask: url(masks.svg#star) luminance; /* 밝기 조절용 마스크로 사용되는 SVG 그래픽 내 요소 */ +mask: url(masks.svg#star) 40px 20px; /* 위로부터 40px, 아래부터 20px에 위치하는 마스크로 사용되는 SVG 그래픽 내 요소 */ +mask: url(masks.svg#star) 0 0/50px 50px; /* 가로, 세로 각각 50px 사이즈의 마스크로 사용되는 SVG 그래픽 내 요소 */ +mask: url(masks.svg#star) repeat-x; /* 수평으로 반복되는 마스크로 사용되는 SVG 그래픽 내 요소 */ +mask: url(masks.svg#star) stroke-box; /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */ +mask: url(masks.svg#star) exclude; /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */ + +/* 글로벌 값 */ +mask: inherit; +mask: initial; +mask: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code><mask-reference></code></dt> + <dd>마스크 이미지 파일 설정하기. {{cssxref("mask-image")}}를 확인하세요.</dd> + <dt><code><masking-mode></code></dt> + <dd>마스크 이미지의 마스킹 모드 설정하기. {{cssxref("mask-mode")}}를 확인하세요.</dd> + <dt><code><position></code></dt> + <dd>마스크 이미지의 위치 설정하기. {{cssxref("mask-position")}}를 확인하세요.</dd> + <dt><code><bg-size></code></dt> + <dd>마스크 이미지의 크기 설정하기. {{cssxref("mask-size")}}를 확인하세요.</dd> + <dt><code><repeat-style></code></dt> + <dd>마스크 이미지의 반복 설정하기. See {{cssxref("mask-repeat")}}를 확인하세요.</dd> + <dt><code><geometry-box></code></dt> + <dd>단 하나의 <geometry-box> 값만 주어진다면 {{cssxref("mask-origin")}}와(과)( {{cssxref("mask-clip")}} 모두 같은 값으로 설정하는 것을 의미합니다. 두개의<geometry-box> 값이 주어진다면 첫번째 값은 {{cssxref("mask-origin")}}을(를), 두번쨰 값은 {{cssxref("mask-clip")}}를 설정하는 것을 의미합니다.</dd> + <dt><code><geometry-box> | no-clip</code></dt> + <dd>마스크 이미지에 영향을 받는 구역을 설정하기. {{cssxref("mask-clip")}}를 확인하세요.</dd> + <dt><code><compositing-operator></code></dt> + <dd>현재 마스크 레이어 위의 합성 설정하기. {{cssxref("mask-composite")}}를 확인하세요.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">.target { + mask: url(#c1) luminance; +} + +.anothertarget { + mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude; +} +</pre> + +<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 Masks", "#the-mask", 'mask')}}</td> + <td>{{Spec2("CSS Masks")}}</td> + <td>Extends its usage to HTML elements.<br> + Extends its syntax by making it a shorthand for the new <code>mask-*</code> properties defined in that specification.</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.properties.mask")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref("clip-path")}}, {{Cssxref("filter")}}</li> + <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">HTML에 SVG 효과 적용하기</a></li> + <li><a href="/en-US/docs/SVG">SVG</a></li> +</ul> diff --git a/files/ko/web/css/max-height/index.html b/files/ko/web/css/max-height/index.html new file mode 100644 index 0000000000..3c2dfc18de --- /dev/null +++ b/files/ko/web/css/max-height/index.html @@ -0,0 +1,127 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/max-height +--- +<div>{{CSSRef}}</div> + +<p><strong><code>max-height</code></strong> <a href="/en-US/docs/CSS">CSS</a> 속성은 요소의 최대 높이를 설정합니다. <code>max-height</code>는 {{cssxref("height")}} 속성의 <a href="/ko/docs/Web/CSS/used_value">사용값</a>이 자신의 값보다 커지는걸 방지합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div> + + + +<p><code>max-height</code>가 {{cssxref("height")}}를 재설정하고, {{cssxref("min-height")}}가 <code>max-height</code>를 재설정합니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +max-height: 3.5em; + +/* <percentage> 값 */ +max-height: 75%; + +/* 키워드 값 */ +max-height: none; +max-height: max-content; +max-height: min-content; +max-height: fit-content; +max-height: fill-available; + +/* 전역 값 */ +max-height: inherit; +max-height: initial; +max-height: unset; +</pre> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>고정 길이로 나타낸 최대 높이.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 높이에 대한 백분율로 나타낸 최대 높이.</dd> +</dl> + +<h4 id="키워드_값">키워드 값</h4> + +<dl> + <dt><code>none</code></dt> + <dd>최대 높이를 정하지 않음.</dd> + <dt><code>max-content</code> {{experimental_inline()}}</dt> + <dd>본질적인 선호 높이.</dd> + <dt><code>min-content</code> {{experimental_inline()}}</dt> + <dd>본질적인 최소 높이.</dd> + <dt><code>fill-available</code> {{experimental_inline()}}</dt> + <dd>컨테이닝 블록의 높이에서 세로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 <code>available</code>로 구현함을 참고하세요.)</dd> + <dt><code>fit-content</code> {{experimental_inline()}}</dt> + <dd><code>max-content</code>와 동일.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">table { max-height: 75%; } + +form { max-height: none; } +</pre> + +<h2 id="접근성_참고사항">접근성 참고사항</h2> + +<p>페이지의 확대 또는 글씨 크기를 키운 후에도 <code>max-height</code>를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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('CSS3 Sizing', '#width-height-keywords', 'max-height') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>max-height</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.max-height")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델 입문</a>, {{cssxref("box-sizing")}}</li> + <li>{{cssxref("height")}}, {{cssxref("min-height")}}</li> +</ul> diff --git a/files/ko/web/css/max-width/index.html b/files/ko/web/css/max-width/index.html new file mode 100644 index 0000000000..92f8727cbf --- /dev/null +++ b/files/ko/web/css/max-width/index.html @@ -0,0 +1,173 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/max-width +--- +<div>{{CSSRef}}</div> + +<p><strong><code>max-width</code></strong> <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> 속성은 요소의 최대 너비를 설정합니다. <code>max-width</code>는 {{cssxref("width")}} 속성의 <a href="/ko/docs/Web/CSS/used_value">사용값</a>이 자신의 값보다 커지는걸 방지합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div> + + + +<p><code>max-width</code>가 {{cssxref("width")}}를 재설정하고, {{cssxref("min-height")}}가 <code>max-width</code>를 재설정합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +max-width: 3.5em; + +/* <percentage> 값 */ +max-width: 75%; + +/* 키워드 값 */ +max-width: none; +max-width: max-content; +max-width: min-content; +max-width: fit-content; +max-width: fill-available; + +/* 전역 값 */ +max-width: inherit; +max-width: initial; +max-width: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>고정 길이로 나타낸 최대 너비.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비에 대한 백분율로 나타낸 최대 너비.</dd> +</dl> + +<h4 id="키워드_값">키워드 값</h4> + +<dl> + <dt><code>none</code></dt> + <dd>최대 너비를 정하지 않음.</dd> + <dt><code>max-content</code> {{experimental_inline()}}</dt> + <dd>본질적인 선호 높이.</dd> + <dt><code>min-content</code> {{experimental_inline()}}</dt> + <dd>본질적인 최소 높이.</dd> + <dt><code>fill-available</code> {{experimental_inline()}}</dt> + <dd>컨테이닝 블록의 높이에서 가로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 <code>available</code>로 구현함을 참고하세요.)</dd> + <dt><code>fit-content</code> {{experimental_inline()}}</dt> + <dd><code>max-content</code>와 동일.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<p>다음 예제에서, 자식(<code>child</code>) 요소의 너비는 150픽셀과 부모(<code>parent</code>) 요소의 너비 중 더 작은 값이 됩니다.</p> + +<div id="basic-max-width-demo"> +<pre class="brush: html"><div id="parent"> + <div id="child"> + Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis. + </div> +</div> +</pre> + +<pre class="brush: css">#parent { + background: lightblue; + width: 300px; +} + +#child { + background: gold; + width: 100%; + max-width: 150px; +} +</pre> +</div> + +<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p> + +<p><code>fit-content</code> 값을 사용하여 해당 요소의 내용이 필요로 하는 너비만 차지하도록 설정할 수 있습니다.</p> + +<div id="fit-content-demo"> +<pre class="brush: html" style="display: none;"><div id="parent"> + <div id="child"> + Child Text + </div> +</div> +</pre> + +<pre class="brush: css">#parent { + background: lightblue; + width: 300px; +} + +#child { + background: gold; + width: 100%; + max-width: -moz-fit-content; + max-width: -webkit-fit-content; +} +</pre> +</div> + +<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>페이지의 확대 또는 글씨 크기를 키운 후에도 <code>max-width</code>를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords.<em> </em>(Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>max-width</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.max-width")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델 입문</a></li> + <li>{{cssxref("box-sizing")}}, {{cssxref("width")}}, {{ Cssxref("min-width") }}</li> +</ul> diff --git a/files/ko/web/css/media_queries/index.html b/files/ko/web/css/media_queries/index.html new file mode 100644 index 0000000000..c3f4e87226 --- /dev/null +++ b/files/ko/web/css/media_queries/index.html @@ -0,0 +1,103 @@ +--- +title: 미디어 쿼리 +slug: Web/CSS/Media_Queries +tags: + - CSS + - CSS 미디어 쿼리 + - Media Queries + - Overview + - Reference + - 미디어 쿼리 + - 반응형 디자인 +translation_of: Web/CSS/Media_Queries +--- +<div>{{CSSRef}}</div> + +<p><strong>미디어 쿼리</strong>는 다양한 기기 특성과 파라메터의 존재 여부에 따라 사이트, 혹은 앱을 조정할 수 있습니다.</p> + +<p>미디어 쿼리는 <a href="/ko/docs/Web/Progressive_web_apps">반응형 디자인</a>의 핵심 구성 요소입니다. 예를 들어, 미디어 쿼리는 작은 기기에 맞춰 폰트 사이즈를 줄어들게 하거나, 세로 모드(portrait mode)일 때 단락의 패딩 값을 증가시킬 수도 있습니다. 혹은 터치 스크린에서 버튼 사이즈를 키울 수도 있습니다.</p> + +<p><a href="/ko/docs/Web/CSS">CSS</a>에서는 {{cssxref("@media")}} <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 사용해서 스타일 시트의 일부를 조건부로 적용합니다. 이 스타일 시트는 미디어 쿼리의 결과에 기반한 스타일 시트입니다. {{cssxref("@import")}}를 사용해서 조건부로 전체 스타일시트를 적용해보세요.</p> + +<h3 id="HTML에서의_미디어_쿼리">HTML에서의 미디어 쿼리</h3> + +<p><a href="/ko/docs/Web/HTML">HTML</a>에서 미디어 쿼리는 다양한 요소에 적용될 수 있습니다.:</p> + +<ul> + <li>{{HTMLElement("link")}} 요소의 {{htmlattrxref("media", "link")}} 속성에서는, 링크된 리소스 (일반적으로 CSS)가 적용되어야하는 미디어를 정의합니다.</li> + <li>{{HTMLElement("source")}} 요소의 {{htmlattrxref("media", "source")}} 속성에서는, 해당 소스가 적용되어야하는 미디어를 정의합니다. (이건 {{HTMLElement("picture")}} 요소 안에서만 유효합니다.)</li> + <li>{{HTMLElement("style")}} 요소의 {{htmlattrxref("media", "style")}} 속성에서는, 스타일이 적용되어야하는 미디어를 정의합니다.</li> +</ul> + +<h3 id="JavaScript에서의_미디어_쿼리">JavaScript에서의 미디어 쿼리</h3> + +<p><a href="/ko/docs/Web/JavaScript">JavaScript</a>에서는, {{domxref("Window.matchMedia()")}} 메소드로 미디어 쿼리를 테스트할 수 있습니다. {{domxref("MediaQueryList.addListener()")}} 메소드를 사용하면 쿼리가 변경될 때마다 사이트나 앱에서 알림을 받을 수도 있습니다. 이러한 기능을 사용하면, 사이트나 앱이 기기 구성, 방향 또는 상태의 변화에 따라 응답할 수도 있습니다.</p> + +<p><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>에서 프로그래밍 방식으로 미디어 쿼리를 사용하는 방법에 대해 자세히 배워보세요.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="규칙">@규칙</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@import")}}</li> + <li>{{cssxref("@media")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries">미디어 쿼리 사용하기</a></dt> + <dd>미디어 쿼리 표현식을 구성하는데 사용되는 미디어 쿼리, 구문 및 연산자와 미디어 기능을 소개합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">프로그래밍 방식으로 미디어 쿼리 테스트하기</a></dt> + <dd>자바스크립트 코드에서 어떻게 미디어 쿼리를 사용해 디바이스의 상태를 확인하는지, 그리고 미디어 쿼리가 변경될 때(사용자가 화면을 회전시키거나 브라우저를 리사이즈 할 때와 같은 상황)마다 알림을 보내기 위해 어떻게 리스너를 설정하는지에 대해 설명합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">접근성을 위한 미디어 쿼리</a></dt> + <dd>미디어 쿼리를 사용해 사용자가 웹사이트를 더 잘 이해할 수 있게 만들어보세요.</dd> +</dl> + +<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('CSS5 Media Queries')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("@supports")}} 를 사용하면 브라우저가 지원하는 다양한 CSS 기술들에 대한 스타일을 적용할 수 있습니다.</li> +</ul> diff --git a/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html new file mode 100644 index 0000000000..d48d431b7d --- /dev/null +++ b/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html @@ -0,0 +1,93 @@ +--- +title: 접근성을 위한 미디어 쿼리 사용하기 +slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +tags: + - '@media' + - CSS + - 미디어 속성 + - 접근성 +translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +--- +<p><strong>미디어쿼리(Media Queries)</strong>는 장애를 가진 사용자가 웹사이트를 더 쉽게 이해할 수 있도록 도울 수 있습니다.</p> + +<h2 id="애니메이션_동작_축소하기(Reduced_Motion)">애니메이션 동작 축소하기(Reduced Motion)</h2> + +<p>깜빡이거나 반짝이는 애니메이션은 주의력결핍 과잉행동증후군(注意力缺乏過剩行動症候群 : ADHD)와 같은 인식장애를 가진 사람들에게 문제가 될 수 있다. 이러한 종류의 애니메이션 동작들은 시력 장애, 간질이나 편두통과 암소시성 민감증을 유발할 수 있습니다.</p> + +<p>또한, 이 애니메이션 동작을 줄이는.방법을 통해 배터리가 부족한 사람이나 보급형 스마트폰 및 컴퓨터를 사용하는 사람들에게 도음을 줄 수 있습니다.</p> + +<h3 id="문법"><strong>문법</strong></h3> + +<dl> + <dt><code><dfn>no-preference</dfn></code></dt> + <dd>사용자가 디바이스에서 애니메이션 축소와 관련된 기능을 설정하지 않았을 경우에 적용될 스타일을 나타냅니다.</dd> + <dt><code><dfn>reduce</dfn></code></dt> + <dd>사용자가 디바이스에서 애니메이션 축소와 관련된 기능을 설정하였을 경우에 적용될 스타일을 나타냅니다.</dd> +</dl> + +<h3 id="예제"><strong>예제</strong></h3> + +<p>이 예시는 디바이스에서 애니메이션 축소와 관련된 기능을 설정하지 않으면 애니메이션 효과가 축소되지 않습니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="animation">animated box</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.animation { + -webkit-animation: vibrate 0.3s linear infinite both; + animation: vibrate 0.3s linear infinite both; +} + +@media (prefers-reduced-motion: reduce) { + .animation { + animation: none; + } +} +</pre> + +<h2 id="고대비_모드_(High_Contrast_Mode)">고대비 모드 (High Contrast Mode)</h2> + +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p><strong>-ms-high-contrast</strong> <a href="/en-US/docs/Web/CSS">CSS media 속성</a>은 애플리케이션이 고대비 모드로 표시되고 있는지의 여부에따라 어떤 색상으로 웹사이트를 표시할 지를 정의하는 <a href="/en-US/docs/Web/CSS/Microsoft_extensions">Microsoft 확장기능</a>입니다.</p> + +<p> 이 미디어 속성은 저시력 사용자나 대비에 민감한 문제가 있는 사람뿐만 아니라 직사광선 아래에서 컴퓨터나 휴대폰을 사용하는 사람에게도 도움이 됩니다.</p> + +<h3 id="문법_2"><strong>문법</strong></h3> + +<p><strong><code>-ms-high-contrast</code></strong> 미디어 속성(Media Feature)은 다음 값 중 하나를 지정하여 사용할 수 있습니다.</p> + +<h3 id="속성값"><strong>속성값</strong></h3> + +<dl> + <dt><code>active</code></dt> + <dd> + <p>시스템이 색상과 관계없이 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.</p> + </dd> + <dt><code>black-on-white</code></dt> + <dd> + <p>시스템이 검은색-흰 색 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.</p> + </dd> + <dt><code>white-on-black</code></dt> + <dd> + <p>시스템이 흰 색-검은 색 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.</p> + </dd> +</dl> + +<h3 id="예제_2"><strong>예제</strong></h3> + +<p>다음 선언된 스타일들은 시스템과 애플리케이션에서 고대비 모드의 색상 변화에 따라 스타일을 일치시켜줍니다.</p> + +<pre class="brush: css">@media screen and (-ms-high-contrast: active) { + /* 모든 고대비 모드에 대한 스타일 규칙입니다 */ +} +@media screen and (-ms-high-contrast: black-on-white) { + div { background-image: url('image-bw.png'); } +} +@media screen and (-ms-high-contrast: white-on-black) { + div { background-image: url('image-wb.png'); } +} +</pre> diff --git a/files/ko/web/css/min-height/index.html b/files/ko/web/css/min-height/index.html new file mode 100644 index 0000000000..80c27230af --- /dev/null +++ b/files/ko/web/css/min-height/index.html @@ -0,0 +1,123 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/min-height +--- +<div>{{CSSRef}}</div> + +<p><strong><code>max-height</code></strong> <a href="/en-US/docs/CSS">CSS</a> 속성은 요소의 최소 높이를 설정합니다. <code>min-height</code>는 {{cssxref("height")}} 속성의 <a href="/ko/docs/Web/CSS/used_value">사용값</a>이 자신의 값보다 작아지는걸 방지합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div> + + + +<p><code>min-height</code>가 {{cssxref("max-height")}} 또는 {{cssxref("height")}}보다 커지면 요소의 높이는 <code>min-height</code>의 값을 사용합니다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +min-height: 3.5em; + +/* <percentage> 값 */ +min-height: 10%; + +/* 키워드 값 */ +min-height: max-content; +min-height: min-content; +min-height: fit-content; +min-height: fill-available; + +/* 전역 값 */ +min-height: inherit; +min-height: initial; +min-height: unset; +</pre> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>고정 길이로 나타낸 최대 높이. 음수 값은 유효하지 않습니다.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 높이에 대한 백분율로 나타낸 최대 높이. 음수 값은 유효하지 않습니다.</dd> +</dl> + +<h4 id="키워드_값">키워드 값</h4> + +<dl> + <dt><code>auto</code></dt> + <dd>최소 높이를 정하지 않음.</dd> +</dl> + +<dl> + <dt><code>max-content</code> {{ experimental_inline() }}</dt> + <dd>본질적인 선호 높이.</dd> + <dt><code>min-content</code> {{ experimental_inline() }}</dt> + <dd>본질적인 최소 높이.</dd> + <dt><code>fill-available</code> {{ experimental_inline() }}</dt> + <dd>컨테이닝 블록의 높이에서 세로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 <code>available</code>로 구현함을 참고하세요.)</dd> + <dt><code>fit-content</code> {{ experimental_inline() }}</dt> + <dd>CSS3 Box 모듈에 따라 <code>min-content</code>의 다른 이름. CSS3 Sizing 모듈은 더 복잡한 알고리즘을 정의하지만, 모든 브라우저에서 실험 기능으로도 구현하지 않습니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">table { min-height: 75%; } + +form { min-height: 0; } +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Adds the <code>auto</code> keyword and uses it as the initial value.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>min-height</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.min-height")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델 입문</a>, {{cssxref("box-sizing")}}</li> + <li>{{ Cssxref("height") }}, {{ Cssxref("max-height") }}</li> +</ul> diff --git a/files/ko/web/css/min-width/index.html b/files/ko/web/css/min-width/index.html new file mode 100644 index 0000000000..50bab2c8d9 --- /dev/null +++ b/files/ko/web/css/min-width/index.html @@ -0,0 +1,122 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/min-width +--- +<div>{{CSSRef}}</div> + +<p><strong><code>min-width</code></strong> <a href="/en-US/docs/CSS">CSS</a> 속성은 요소의 최소 너비를 설정합니다. <code>min-width</code>는 {{cssxref("width")}} 속성의 <a href="/ko/docs/Web/CSS/used_value">사용값</a>이 자신의 값보다 작아지는걸 방지합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div> + + + +<p><code>min-width</code>가 {{cssxref("max-width")}} 또는 {{cssxref("width")}}보다 커지면 요소의 높이는 <code>min-width</code>의 값을 사용합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +min-width: 3.5em; + +/* <percentage> 값 */ +min-width: 10%; + +/* 키워드 값 */ +min-width: max-content; +min-width: min-content; +min-width: fit-content; +min-width: fill-available; + +/* 전역 값 */ +min-width: inherit; +min-width: initial; +min-width: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>고정 길이로 나타낸 최대 너비. 음수 값은 유효하지 않습니다.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비에 대한 백분율로 나타낸 최대 너비. 음수 값은 유효하지 않습니다.</dd> +</dl> + +<h4 id="키워드_값">키워드 값</h4> + +<dl> + <dt><code>auto</code></dt> + <dd>최소 너비를 정하지 않음.</dd> + <dt><code>max-content</code> {{ experimental_inline() }}</dt> + <dd>본질적인 선호 높이.</dd> + <dt><code>min-content</code> {{ experimental_inline() }}</dt> + <dd>본질적인 최소 높이.</dd> + <dt><code>fill-available</code>{{ experimental_inline() }}</dt> + <dd>컨테이닝 블록의 너비에서 가로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 <code>available</code>로 구현함을 참고하세요.)</dd> + <dt><code>fit-content</code> {{ experimental_inline() }}</dt> + <dd><code>min(max-content, max(min-content, fill-available))</code>과 같음.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush:css;">table { min-width: 75%; } + +form { min-width: 0; } +</pre> + +<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('CSS3 Sizing', '#width-height-keywords', 'min-width') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Adds the <code>auto</code> keyword and uses it as the initial value.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>min-width</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.min-width")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델 입문</a>, {{cssxref("box-sizing")}}</li> + <li>{{ Cssxref("width") }}, {{ Cssxref("max-width") }}</li> +</ul> diff --git a/files/ko/web/css/mix-blend-mode/index.html b/files/ko/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..069bb0122f --- /dev/null +++ b/files/ko/web/css/mix-blend-mode/index.html @@ -0,0 +1,651 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/mix-blend-mode +--- +<div>{{CSSRef}}</div> + +<p><strong><code>mix-blend-mode</code> </strong><a href="/ko/docs/Web/API/CSS">CSS</a> 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css">/* 키워드 값 */ +mix-blend-mode: normal; +mix-blend-mode: multiply; +mix-blend-mode: screen; +mix-blend-mode: overlay; +mix-blend-mode: darken; +mix-blend-mode: lighten; +mix-blend-mode: color-dodge; +mix-blend-mode: color-burn; +mix-blend-mode: hard-light; +mix-blend-mode: soft-light; +mix-blend-mode: difference; +mix-blend-mode: exclusion; +mix-blend-mode: hue; +mix-blend-mode: saturation; +mix-blend-mode: color; +mix-blend-mode: luminosity; + +/* 전역 값 */ +mix-blend-mode: initial; +mix-blend-mode: inherit; +mix-blend-mode: unset; +</pre> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<blend-mode>")}}</dt> + <dd>적용할 혼합 모드.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<div class="hidden" id="mix-blend-mode"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="note">Blending in isolation (no blending with the background)</div> + <div class="row isolate"> + <div class="cell"> normal + <div class="container normal"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <defs> + <linearGradient id="red"> + <stop offset="0" stop-color="hsl(0,100%,50%)" /> + <stop offset="100%" stop-color="hsl(0,0%,100%)" /> + </linearGradient> + <linearGradient id="green"> + <stop offset="0" stop-color="hsl(120,100%,50%)" /> + <stop offset="100%" stop-color="hsl(120,0%,100%)" /> + </linearGradient> + <linearGradient id="blue"> + <stop offset="0" stop-color="hsl(240,100%,50%)" /> + <stop offset="100%" stop-color="hsl(240,0%,100%)" /> + </linearGradient> + </defs> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> multiply + <div class="container multiply"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> darken + <div class="container darken"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> screen + <div class="container screen"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> lighten + <div class="container lighten"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> overlay + <div class="container overlay"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-dodge + <div class="container color-dodge"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-burn + <div class="container color-burn"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hard-light + <div class="container hard-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> soft-light + <div class="container soft-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> difference + <div class="container difference"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> exclusion + <div class="container exclusion"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hue + <div class="container hue"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> saturation + <div class="container saturation"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color + <div class="container color"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> luminosity + <div class="container luminosity"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + </div> + + <div class="note">Blending globally (blend with the background)</div> + <div class="row"> + <div class="cell"> normal + <div class="container normal"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> multiply + <div class="container multiply"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> darken + <div class="container darken"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> screen + <div class="container screen"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> lighten + <div class="container lighten"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> overlay + <div class="container overlay"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-dodge + <div class="container color-dodge"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-burn + <div class="container color-burn"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hard-light + <div class="container hard-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> soft-light + <div class="container soft-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> difference + <div class="container difference"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> exclusion + <div class="container exclusion"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hue + <div class="container hue"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> saturation + <div class="container saturation"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color + <div class="container color"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> luminosity + <div class="container luminosity"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; + background: #EEE; +} + +.grid { + width: 100%; + display: flex; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; + height: auto; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; + height: auto; +} + +.cell { + margin: .5em; + padding: .5em; + background-color: #FFF; + overflow: hidden; + text-align: center; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em .5em 0; + font: .8em sans-serif; + text-align: left; + white-space: nowrap; +} + +.note + .row .cell { + margin-top: 0; +} + +.container { + position: relative; + background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%), + linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%); + width: 150px; + height: 150px; + margin: 0 auto; +} + +.R { + transform-origin: center; + transform: rotate(-30deg); + fill: url(#red); +} + +.G { + transform-origin: center; + transform: rotate(90deg); + fill: url(#green); +} + +.B { + transform-origin: center; + transform: rotate(210deg); + fill: url(#blue); +} + +.isolate .group { isolation: isolate; } + +.normal .item { mix-blend-mode: normal; } +.multiply .item { mix-blend-mode: multiply; } +.screen .item { mix-blend-mode: screen; } +.overlay .item { mix-blend-mode: overlay; } +.darken .item { mix-blend-mode: darken; } +.lighten .item { mix-blend-mode: lighten; } +.color-dodge .item { mix-blend-mode: color-dodge; } +.color-burn .item { mix-blend-mode: color-burn; } +.hard-light .item { mix-blend-mode: hard-light; } +.soft-light .item { mix-blend-mode: soft-light; } +.difference .item { mix-blend-mode: difference; } +.exclusion .item { mix-blend-mode: exclusion; } +.hue .item { mix-blend-mode: hue; } +.saturation .item { mix-blend-mode: saturation; } +.color .item { mix-blend-mode: color; } +.luminosity .item { mix-blend-mode: luminosity; }</pre> +</div> + +<div>{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}</div> + +<h3 id="HTML_예제">HTML 예제</h3> + +<pre class="brush: html"><div class="isolate"> + <div class="circle circle-1"></div> + <div class="circle circle-2"></div> + <div class="circle circle-3"></div> +</div></pre> + +<pre class="brush: css">.circle { + width: 80px; + height: 80px; + border-radius: 50%; + mix-blend-mode: screen; + position: absolute; +} + +.circle-1 { + background: red; +} + +.circle-2 { + background: lightgreen; + left: 40px; +} + +.circle-3 { + background: blue; + left: 20px; + top: 40px; +} + +.isolate { + isolation: isolate; /* Without isolation, the background color will be taken into account */ + position: relative; +}</pre> + +<p>{{EmbedLiveSample("HTML_예제", "100%", "180")}}</p> + +<h3 id="SVG_예제">SVG 예제</h3> + +<p>다음은 이전의 예제를 SVG로 구현한 것입니다.</p> + +<pre class="brush: html"><svg> + <g class="isolate"> + <circle cx="40" cy="40" r="40" fill="red"/> + <circle cx="80" cy="40" r="40" fill="lightgreen"/> + <circle cx="60" cy="80" r="40" fill="blue"/> + </g> +</svg></pre> + +<pre class="brush:css">circle { mix-blend-mode: screen; } +.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */ +</pre> + +<p>{{EmbedLiveSample("SVG_예제", "100%", "180")}}</p> + +<h2 id="Specifications" name="Specifications">명세</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('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.mix-blend-mode")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("background-blend-mode")}}</li> +</ul> diff --git a/files/ko/web/css/number/index.html b/files/ko/web/css/number/index.html new file mode 100644 index 0000000000..cc336a6ec2 --- /dev/null +++ b/files/ko/web/css/number/index.html @@ -0,0 +1,85 @@ +--- +title: <number> +slug: Web/CSS/number +tags: + - CSS + - CSS Data Type + - Layout + - Reference + - Web +translation_of: Web/CSS/number +--- +<div>{{CSSRef}}</div> + +<p><strong><code><number></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">자료형</a>은 숫자, 즉 정수 또는 실수를 표현합니다.</p> + +<h2 id="구문">구문</h2> + +<p><code><number></code> 구문은 {{cssxref("<integer>")}} 구문을 확장합니다. 소수점 이하 값은 <code>.</code> 뒤로 한 개 이상의 10진수 숫자를 붙여 표현하며, 정수 뒤에 이어 붙일 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.</p> + +<h2 id="보간">보간</h2> + +<p>애니메이션에서 <code><number></code> 자료형의 값은 유동소수점 실수를 사용해 보간합니다. 보간의 속도는 애니메이션과 연결된 <a href="/ko/docs/Web/CSS/single-transition-timing-function" rel="nofollow">timing function</a>이 결정합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="유효한_숫자">유효한 숫자</h3> + +<pre class="syntaxbox example-good">12 <integer>는 <number> +4.01 양의 실수 +-456.8 음의 실수 +0.0 0 ++0.0 0, 양의 부호 +-0.0 0, 음의 부호 +.60 앞의 0 없는 소수점 이하 값 +10e3 과학적 표기법 +-3.4e-2 복잡한 과학적 표기법 +</pre> + +<h3 id="유효하지_않은_숫자">유효하지 않은 숫자</h3> + +<pre class="syntaxbox example-bad">12. 소수점 뒤에 최소 하나의 숫자가 존재해야 함 ++-12.2 하나의 +/-만 허용 +12.1.1 하나의 소수점만 허용 +</pre> + +<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('CSS3 Values', '#numbers', '<number>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '<number>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Explicit definition.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '', '<number>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Implicit definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> +<p>{{Compat("css.types.number")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("<integer>")}}</li> +</ul> diff --git a/files/ko/web/css/object-fit/index.html b/files/ko/web/css/object-fit/index.html new file mode 100644 index 0000000000..3c44025c12 --- /dev/null +++ b/files/ko/web/css/object-fit/index.html @@ -0,0 +1,170 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - CSS Images + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/object-fit +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>object-fit</code></strong> 속성은 {{HTMLElement("img")}}나 {{HTMLElement("video")}} 요소와 같은 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.</p> + +<p>{{cssxref("object-position")}} 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<p><code>object-fit</code> 속성은 다음 목록 중 하나의 키워드를 사용해 지정합니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt><code>contain</code></dt> + <dd>대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 <a href="https://ko.wikipedia.org/wiki/%EB%A0%88%ED%84%B0%EB%B0%95%EC%8A%A4">"레터박스"</a>처럼 됩니다.</dd> + <dt><code>cover</code></dt> + <dd>대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.</dd> + <dt><code>fill</code></dt> + <dd>요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다.</dd> + <dt><code>none</code></dt> + <dd>대체 콘텐츠의 크기를 조절하지 않습니다.</dd> + <dt><code>scale-down</code></dt> + <dd><code>none</code>과 <code>contain</code> 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택합니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="이미지에_object-fit_지정">이미지에 <code>object-fit</code> 지정</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><section> + <h2>object-fit: fill</h2> + <img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <h2>object-fit: contain</h2> + <img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <h2>object-fit: cover</h2> + <img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <h2>object-fit: none</h2> + <img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <h2>object-fit: scale-down</h2> + <img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> +</section></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">h2 { + font-family: Courier New, monospace; + font-size: 1em; + margin: 1em 0 0.3em; +} + +div { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: flex-start; + height: 940px; +} + +img { + width: 150px; + height: 100px; + border: 1px solid #000; +} + +.narrow { + width: 100px; + height: 150px; + margin-top: 10px; +} + +.fill { + object-fit: fill; +} + +.contain { + object-fit: contain; +} + +.cover { + object-fit: cover; +} + +.none { + object-fit: none; +} + +.scale-down { + object-fit: scale-down; +} +</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('이미지에_object-fit_지정', 500, 1100) }}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS4 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.object-fit")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>이미지 관련 다른 CSS 속성: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> + <li>{{cssxref("background-size")}}</li> +</ul> diff --git a/files/ko/web/css/object-position/index.html b/files/ko/web/css/object-position/index.html new file mode 100644 index 0000000000..a53f4e988b --- /dev/null +++ b/files/ko/web/css/object-position/index.html @@ -0,0 +1,123 @@ +--- +title: object-position +slug: Web/CSS/object-position +tags: + - CSS + - CSS Property + - Layout + - Reference + - Replaced Elements + - 대체 요소 +translation_of: Web/CSS/object-position +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>object-position</code></strong> 속성은 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>의 콘텐츠 정렬 방식을 지정합니다.</span> 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다.</p> + +<p>대체 요소 객체의 고유 크기(수정을 가하지 않은 원래 크기)를 조정해 요소 박스에 맞추는 방법은 {{cssxref("object-fit")}} 속성으로 지정할 수 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* <position> 값 */ +object-position: center top; +object-position: 100px 50px; + +/* 전역 값 */ +object-position: inherit; +object-position: initial; +object-position: unset; +</pre> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<position>")}}</dt> + <dd>객체의 2D 위치를 지정하는 한 개에서 네 개의 값. 상대와 절대 오프셋을 사용할 수 있습니다.</dd> +</dl> + +<div class="note"> +<p><strong>참고:</strong> 콘텐츠가 대체 요소의 박스 바깥으로 나가도록 지정할 수도 있습니다.</p> +</div> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">예제</h2> + +<h3 id="이미지_콘텐츠_위치_지정">이미지 콘텐츠 위치 지정</h3> + +<h4 id="HTML">HTML</h4> + +<p>두 개의 {{htmlelement("img")}} 요소가 MDN 로고를 가리키는 코드입니다.</p> + +<pre class="brush: html notranslate"><img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> +<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> +</pre> + +<h4 id="CSS">CSS</h4> + +<p>다음 CSS는 두 <code><img></code> 요소 모두에 적용할 스타일과 함께, 각각 별도로 적용할 <code>object-position</code> 속성도 지정하고 있습니다.</p> + +<pre class="brush: css notranslate">img { + width: 300px; + height: 250px; + border: 1px solid black; + background-color: silver; + margin-right: 1em; + object-fit: none; +} + +#object-position-1 { + object-position: 10px; +} + +#object-position-2 { + object-position: 100% 10%; +} +</pre> + +<p>첫 번째 이미지는 요소 박스의 왼쪽 경계로부터 10픽셀 떨어진 곳으로 배치됩니다. 두 번째 이미지는 요소 박스의 오른쪽 경계와 자신의 오른쪽 모서리를 서로 겹치고, 박스의 위쪽 경계로부터 박스 높이의 10% 떨어진 지점으로 배치됩니다.</p> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('이미지_콘텐츠_위치_지정', '100%','600px') }}</p> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Images', '#the-object-position', 'object-position')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.object-position")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>이미지 관련 다른 CSS 속성: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> +</ul> diff --git a/files/ko/web/css/opacity/index.html b/files/ko/web/css/opacity/index.html new file mode 100644 index 0000000000..6132b0380a --- /dev/null +++ b/files/ko/web/css/opacity/index.html @@ -0,0 +1,144 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Property + - Reference + - 색 +translation_of: Web/CSS/opacity +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>opacity</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 불투명도를 설정합니다.</span> 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div> + + + +<p><code>opacity</code>는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다.</p> + +<p><code>opacity</code> 값이 <code>1</code>이 아니면 요소를 새로운 <a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">쌓임 맥락</a>에 배치합니다.</p> + +<p>자식 요소는 불투명하게 유지하고 싶다면 {{cssxref("background")}} 속성을 대신 사용하세요.</p> + +<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre> + +<h2 id="구문">구문</h2> + +<h3 id="값">값</h3> + +<dl> + <dt><code><alpha-value></code></dt> + <dd>채널의 불투명도(알파 채널의 값)를 나타내는 <code>0.0</code> 이상 <code>1.0</code> 이하의 {{cssxref("number")}}, 또는 0% 이상 100% 이하의 {{cssxref("percentage")}}. 범위 밖의 숫자는 구문 상 유효하지만, 실제 적용 시에는 범위에 맞춰 나머지 값은 버려집니다. + <table class="standard-table"> + <tbody> + <tr> + <th>값</th> + <th>뜻</th> + </tr> + <tr> + <td><code>0</code></td> + <td>요소가 완전히 투명해 보이지 않음.</td> + </tr> + <tr> + <td><code>0</code>과 <code>1</code> 사이의 아무 <code><number></code></td> + <td>요소가 반투명해 뒤의 내용을 볼 수 있음.</td> + </tr> + <tr> + <td><code>1</code> (기본값)</td> + <td>요소가 불투명함.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<pre class="brush: css">div { background-color: yellow; } +.light { + opacity: 0.2; /* 배경 위로 겨우 볼 수 있음 */ +} +.medium { + opacity: 0.5; /* 배경 위로 조금 더 잘 보임 */ +} +.heavy { + opacity: 0.9; /* 배경 위로 뚜렷하게 보임 */ +} +</pre> + +<pre class="brush: html"><div class="light">겨우 보이는 글</div> +<div class="medium">좀 더 잘 보이는 글</div> +<div class="heavy">쉽게 보이는 글</div> +</pre> + +<p>{{EmbedLiveSample('기본_예제', '640', '64')}}</p> + +<h3 id="hover_시_다른_불투명도_적용"><code>:hover</code> 시 다른 불투명도 적용</h3> + +<pre class="brush: css">img.opacity { + opacity: 1; +} + +img.opacity:hover { + opacity: 0.5; + filter: alpha(opacity=50); + zoom: 1; +}</pre> + +<pre class="brush: html"><img src="//developer.mozilla.org/static/img/opengraph-logo.png" + alt="MDN logo" width="128" height="146" + class="opacity"></pre> + +<p>{{EmbedLiveSample('hover_시_다른_불투명도_적용', '150', '175')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>글씨의 투명도를 조절했다면, 낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.</p> + +<p>색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">웹 콘텐츠 접근성 가이드라인</a>(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 <a href="/ko/docs/Web/CSS/font-weight">굵은</a> 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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('CSS3 Transitions', '#animatable-css', 'opacity')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>opacity</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.opacity", 2)}}</p> diff --git a/files/ko/web/css/order/index.html b/files/ko/web/css/order/index.html new file mode 100644 index 0000000000..8b25e38777 --- /dev/null +++ b/files/ko/web/css/order/index.html @@ -0,0 +1,110 @@ +--- +title: order +slug: Web/CSS/order +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/order +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>order</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다.</span> 컨테이너 아이템의 정렬 순서는 오름차순 <code>order</code> 값이고, 같은 값일 경우 소스 코드의 순서대로 정렬됩니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* <integer> 값 */ +order: 5; +order: -5; + +/* 전역 값 */ +order: inherit; +order: initial; +order: unset;</pre> + +<div class="note"> +<p><strong>참고</strong>: <code>order</code> 속성은 논리적인 순서나 탭 순서와는 전혀 상관 없이 <strong>화면에 보이는 순서</strong>에만 영향을 줍니다. 따라서 비시각적 매체에 적용해선 안됩니다.</p> +</div> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>아이템의 순서.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush:html;"><header>...</header> +<main> + <article>Article</article> + <nav>Nav</nav> + <aside>Aside</aside> +</main> +<footer>...</footer></pre> + +<p>위와 같은 기본적인 HTML에서, 다음 CSS 코드는 콘텐츠 블록을 감싸는, 고전적인 양쪽 사이드바 레이아웃을 만듭니다. Flexible Box Layout 모듈이 자동으로 모든 블록의 높이를 동일하게 하며 가능한 가로축 공간을 모두 분배합니다.</p> + +<pre class="brush:css;">main { display: flex; text-align:center; } +main > article { flex:1; order: 2; } +main > nav { width: 200px; order: 1; } +main > aside { width: 200px; order: 3; }</pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>order</code> 속성을 사용하면 실제 DOM 순서와 화면에 보여지는 콘텐츠의 순서가 서로 연결되지 않습니다. 이는 낮은 시각으로 스크린 리더 등 보조 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적 순서(CSS)가 중요하더라도 스크린 리더 사용자는 제대로 된 읽기 순서를 알 수 없습니다.</p> + +<ul> + <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the keyboard navigation disconnect — Tink</a></li> + <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">Source Order Matters | Adrian Roselli</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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('CSS3 Flexbox', '#order-property', 'order')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.order")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS 플렉스박스 안내서: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">플렉스박스의 기본 개념</a></em></li> + <li>CSS 플렉스박스 안내서: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">플렉스 아이템의 순서 정하기</a></em></li> + <li>CSS 그리드 안내서: <em><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS 그리드 레이아웃과 접근성</a></em></li> +</ul> diff --git a/files/ko/web/css/outline-style/index.html b/files/ko/web/css/outline-style/index.html new file mode 100644 index 0000000000..cc483e5010 --- /dev/null +++ b/files/ko/web/css/outline-style/index.html @@ -0,0 +1,256 @@ +--- +title: outline-style +slug: Web/CSS/outline-style +tags: + - CSS + - CSS Outline + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/outline-style +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>outline-style</code></strong> 속성은 요소 외곽선의 스타일을 설정합니다.</span> 외곽선은 요소의 <a href="/ko/docs/Web/CSS/border">테두리</a> 바깥에 그려지는 선입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/outline-style.html")}}</div> + + + +<p>외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +outline-style: auto; +outline-style: none; +outline-style: dotted; +outline-style: dashed; +outline-style: solid; +outline-style: double; +outline-style: groove; +outline-style: ridge; +outline-style: inset; +outline-style: outset; + +/* 전역 값 */ +outline-style: inherit; +outline-style: initial; +outline-style: unset; +</pre> + +<p><code>outline-style</code> 속성은 다음 값 중 하나를 사용해 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt> + <p><code>auto</code></p> + </dt> + <dd style="outline: 8px auto red;">사용자 에이전트가 사용자 지정 외곽선을 그릴 수 있도록 허용합니다.</dd> + <dt> + <p><code>none</code></p> + </dt> + <dd>외곽선을 제거합니다. {{cssxref("outline-width")}}가 <code>0</code>입니다.</dd> + <dt> + <p><code>dotted</code></p> + </dt> + <dd style="outline: 8px dotted red;">외곽선을 점 여러 개로 그립니다.</dd> + <dt> + <p><code>dashed</code></p> + </dt> + <dd style="outline: 8px dashed red;">외곽선을 짧은 선 여러 개로 그립니다.</dd> + <dt> + <p><code>solid</code></p> + </dt> + <dd style="outline: 8px solid red;">외곽선을 하나의 선으로 그립니다.</dd> + <dt> + <p><code>double</code></p> + </dt> + <dd style="outline: 8px double red;">외곽선을 두 개의 선으로 그립니다. {{cssxref("outline-width")}}는 두 선과 그 사이의 간격을 합친 값입니다.</dd> + <dt> + <p><code>groove</code></p> + </dt> + <dd style="outline: 8px groove red;">외곽선을 마치 파낸 것처럼 그립니다.</dd> + <dt> + <p><code>ridge</code></p> + </dt> + <dd style="outline: 8px ridge red;"><code>groove</code>의 반대입니다. 외곽선을 마치 튀어나온 것처럼 그립니다.</dd> + <dt> + <p><code>inset</code></p> + </dt> + <dd style="outline: 8px inset red;">요소가 페이지 안에 박힌 것처럼 외곽선을 그립니다.</dd> + <dt> + <p><code>outset</code></p> + </dt> + <dd style="outline: 8px outset red;"><code>inset</code>의 반대입니다. 요소가 페이지 밖으로 나온 것처럼 그립니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="외곽선_스타일을_auto로_설정하기">외곽선 스타일을 <code>auto</code>로 설정하기</h3> + +<p><code>auto</code> 값은 사용자 지정 스타일을 의미합니다. <q cite="https://www.w3.org/TR/css-ui-3/#outline-style">일반적으로 플랫폼 기본 사용자 인터페이스 스타일이거나, CSS에서 나타낼 수 있는 것보다 더 풍부한 스타일 (예컨대 둥근 꼭짓점에 바깥쪽 픽셀은 반투명하여 빛나는 것처럼 보이는 외곽선)입니다.</q></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div> + <p class="auto">Outline Demo</p> +</div> </pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.auto { + outline-style: auto; /* same result as "outline: auto" */ +} + +/* To make the Demo clearer */ +* { outline-width: 10px; padding: 15px; } </pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('외곽선_스타일을_auto로_설정하기') }}</p> + +<h3 id="외곽선_스타일을_dashed_dotted로_설정하기">외곽선 스타일을 <code>dashed</code>, <code>dotted</code>로 설정하기</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div> + <div class="dotted"> + <p class="dashed">Outline Demo</p> + </div> +</div> </pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">.dotted { + outline-style: dotted; /* same result as "outline: dotted" */ +} +.dashed { + outline-style: dashed; +} + +/* To make the Demo clearer */ +* { outline-width: 10px; padding: 15px; } </pre> + +<h4 id="결과_2">결과</h4> + +<p>{{ EmbedLiveSample('외곽선_스타일을_dashed_dotted로_설정하기') }}</p> + +<h3 id="외곽선_스타일을_solid_double로_설정하기">외곽선 스타일을 <code>solid</code>, <code>double</code>로 설정하기</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><div> + <div class="solid"> + <p class="double">Outline Demo</p> + </div> +</div> </pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css notranslate">.solid { + outline-style: solid; +} +.double { + outline-style: double; +} + +/* To make the Demo clearer */ +* { outline-width: 10px; padding: 15px; } </pre> + +<h4 id="결과_3">결과</h4> + +<p>{{ EmbedLiveSample('외곽선_스타일을_solid_double로_설정하기') }}</p> + +<h3 id="외곽선_스타일을_groove_ridge로_설정하기">외곽선 스타일을 <code>groove</code>, <code>ridge</code>로 설정하기</h3> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html notranslate"><div> + <div class="groove"> + <p class="ridge">Outline Demo</p> + </div> +</div></pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css notranslate">.groove { + outline-style: groove; +} +.ridge { + outline-style: ridge; +} + +/* To make the Demo clearer */ +* { outline-width: 10px; padding: 15px; }</pre> + +<h4 id="결과_4">결과</h4> + +<p>{{ EmbedLiveSample('외곽선_스타일을_groove_ridge로_설정하기') }}</p> + +<h3 id="외곽선_스타일을_inset_outset으로_설정하기">외곽선 스타일을 inset, outset으로 설정하기</h3> + +<h4 id="HTML_5">HTML</h4> + +<pre class="brush: html notranslate"><div> + <div class="inset"> + <p class="outset">Outline Demo</p> + </div> +</div></pre> + +<h4 id="CSS_5">CSS</h4> + +<pre class="brush: css notranslate">.inset { + outline-style: inset; +} +.outset { + outline-style: outset; +} + +/* To make the Demo clearer */ +* { outline-width: 10px; padding: 15px; }</pre> + +<h4 id="결과_5">결과</h4> + +<p>{{ EmbedLiveSample('외곽선_스타일을_inset_outset으로_설정하기') }}</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('CSS3 Basic UI', '#outline-style', 'outline-style')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Added <code>auto</code> value.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.properties.outline-style")}}</p> +</div> diff --git a/files/ko/web/css/outline-width/index.html b/files/ko/web/css/outline-width/index.html new file mode 100644 index 0000000000..0c25d34eb1 --- /dev/null +++ b/files/ko/web/css/outline-width/index.html @@ -0,0 +1,141 @@ +--- +title: outline-width +slug: Web/CSS/outline-width +tags: + - CSS + - CSS Outline + - CSS Property + - Layout + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/outline-width +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>outline-width</code></strong> 속성은 요소 외곽선의 두께를 설정합니다.</span> 외곽선은 요소의 <a href="/ko/docs/Web/CSS/border">테두리</a> 바깥에 그려지는 선입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div> + + + +<p>외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +outline-width: thin; +outline-width: medium; +outline-width: thick; + +/* <length> 값 */ +outline-width: 1px; +outline-width: 0.1em; + +/* 전역 값 */ +outline-width: inherit; +</pre> + +<p><code>outline-width</code> 속성은 다음 값 중 하나를 사용해 지정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>외곽선의 두께를 <code><length></code>로 설정합니다.</dd> + <dt><code>thin</code></dt> + <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>1px</code>입니다.</dd> + <dt><code>medium</code></dt> + <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>3px</code>입니다.</dd> + <dt><code>thick</code></dt> + <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>5px</code>입니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="요소의_외곽선_두께_설정하기">요소의 외곽선 두께 설정하기</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><span id="thin">thin</span> +<span id="medium">medium</span> +<span id="thick">thick</span> +<span id="twopixels">2px</span> +<span id="oneex">1ex</span> +<span id="em">1.2em</span> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">span { + outline-style: solid; + display: inline-block; + margin: 20px; +} + +#thin { + outline-width: thin; +} + +#medium { + outline-width: medium; +} + +#thick { + outline-width: thick; +} + +#twopixels { + outline-width: 2px; +} + +#oneex { + outline-width: 1ex; +} + +#em { + outline-width: 1.2em; +} + +</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('요소의_외곽선_두께_설정하기', '100%', '80')}}</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('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.outline-width")}}</p> diff --git a/files/ko/web/css/outline/index.html b/files/ko/web/css/outline/index.html new file mode 100644 index 0000000000..4b578c289b --- /dev/null +++ b/files/ko/web/css/outline/index.html @@ -0,0 +1,158 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - CSS Outline + - CSS Property + - Layout + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/outline +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>outline</code></strong> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 모든 외곽선 속성을 한꺼번에 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="구성_속성">구성 속성</h2> + +<p><code>outline</code>은 단축 속성으로서 다음의 하위 속성을 포함합니다.</p> + +<ul> + <li>{{cssxref("outline-color")}}</li> + <li>{{cssxref("outline-style")}}</li> + <li>{{cssxref("outline-width")}}</li> +</ul> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* style */ +outline: solid; + +/* color | style */ +outline: #f66 dashed; + +/* style | width */ +outline: inset thick; + +/* color | style | width */ +outline: green solid 3px; + +/* 전역 값 */ +outline: inherit; +outline: initial; +outline: unset; +</pre> + +<p><code>outline</code> 속성은 아래의 값 중 한 개에서 세 개를 사용해 지정할 수 있으며 순서는 상관하지 않습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 많은 요소의 외곽선은 스타일을 지정하지 않을 경우 보이지 않습니다. 스타일 기본값이 <code>none</code>이기 때문인데, 주목할만한 예외는 {{htmlelement("input")}} 요소로 브라우저의 기본 스타일이 적용됩니다.</p> +</div> + +<h3 id="값">값</h3> + +<dl> + <dt><code><'outline-color'></code></dt> + <dd>외곽선의 색을 설정합니다. 누락 시 기본값은 <code>currentcolor</code>입니다. {{cssxref("outline-color")}}를 참고하세요.</dd> + <dt><code><'outline-style'></code></dt> + <dd>외곽선의 스타일을 설정합니다. 누락 시 기본값은 <code>none</code>입니다. {{cssxref("outline-style")}}을 참고하세요.</dd> + <dt><code><'outline-width'></code></dt> + <dd>외곽선의 두께를 설정합니다. 누락 시 기본값은 <code>medium</code>입니다. {{cssxref("outline-width")}}를 참고하세요.</dd> +</dl> + +<h2 id="설명">설명</h2> + +<p><a href="/ko/docs/Web/CSS/border">테두리</a>와 외곽선은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.</p> + +<ul> + <li>외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.</li> + <li>명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.</li> +</ul> + +<p>다른 모든 단축 속성과 마찬가지로, 누락한 하위 속성의 값은 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>으로 설정됩니다.</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>outline</code>에 <code>0</code> 또는 <code>none</code> 값을 지정하면 브라우저의 기본 포커스 스타일이 사라집니다. 만약 어떤 요소가 상호작용 가능하다면 반드시 시각으로 포커스 여부를 나타낼 수 있어야 합니다. 기본 포커스 스타일을 제거한 경우 다른 뚜렷한 대안을 제공하세요.</p> + +<ul> + <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li> + <li> + <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Success Criterion 2.4.7: Focus Visible</a></p> + </li> +</ul> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="외곽선으로_포커스_스타일_설정">외곽선으로 포커스 스타일 설정</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><a href="#">This link has a special focus style.</a> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">a { + border: 1px solid; + border-radius: 3px; + display: inline-block; + margin: 10px; + padding: 5px; +} + +a:focus { + outline: 4px dotted #e73; + outline-offset: 4px; + background: #ffa; +} +</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("외곽선으로_포커스_스타일_설정", "100%", 60)}}</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('CSS3 Basic UI', '#outline', 'outline')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.properties.outline")}}</p> +</div> diff --git a/files/ko/web/css/overflow-wrap/index.html b/files/ko/web/css/overflow-wrap/index.html new file mode 100644 index 0000000000..b2241a5b61 --- /dev/null +++ b/files/ko/web/css/overflow-wrap/index.html @@ -0,0 +1,118 @@ +--- +title: overflow-wrap +slug: Web/CSS/overflow-wrap +tags: + - CSS + - CSS Property + - CSS Text + - Reference +translation_of: Web/CSS/overflow-wrap +--- +<div>{{CSSRef}}</div> + +<p><code><strong>overflow</strong></code><strong><code>-wrap</code></strong> CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.</p> + +<div class="note"><strong>Note:</strong> {{cssxref("word-break")}}와는 달리, <code>overflow-wrap</code>은 모든 단어가 넘치지 않으면 자신의 줄 안에 놓여 있을 수 없을 때 줄 바꿈을 한 번만 할 것입니다.</div> + +<p>이 속성은 처음에 마이크로소프트에서 표준이 아니고 접두어가 없는 <code>word-wrap</code>으로 나왔고, 대부분 브라우저에서 똑같은 이름으로 구현되었습니다. 요즘은 <code>overflow-wrap</code>으로 다시 지어지고, <code>word-wrap</code>은 동의어가 되었습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css">/* Keyword values */ +overflow-wrap: normal; +overflow-wrap: break-word; + +/* Global values */ +overflow-wrap: inherit; +overflow-wrap: initial; +overflow-wrap: unset; +</pre> + +<p><code>overflow-wrap</code> 속성은 아래에 나열돼 있는 값들 중 단 하나로 정해집니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>줄이 오직 (두 단어 사이의 공백과 같이) 보통의 줄 바꿈 지점에서만 줄을 바꿉니다.</dd> + <dt><code>break-word</code></dt> + <dd>보통 안 바꿔지는 단어들을 한 줄에서 대신 줄을 바꿀 만한 지점이 없을 시 임의의 지점에서 줄을 바꿉니다.</dd> +</dl> + +<h3 id="기본적인_구문">기본적인 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예시">예시</h2> + +<p>이 예시는 긴 단어를 넘길 때 <code>overflow-wrap</code>, <code>word-break</code>, 그리고 <code>hyphens</code>의 결과를 비교합니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="normal">They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. (normal)</p> +<p class="overflow-wrap">They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. (overflow-wrap)</p> +<p class="word-break">They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. (word-break)</p> +<p class="hyphens">They say the fishing is excellent at + Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. (hyphens)</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + width: 13em; + background: gold; +} + +.overflow-wrap { + overflow-wrap: break-word; +} + +.word-break { + word-break: break-all; +} + +.hyphens { + hyphens: auto; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example', '100%', 260) }}</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('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}</td> + <td>{{ Spec2('CSS3 Text') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.properties.overflow-wrap")}}</p> + + + +<h2 id="See_also" name="See_also">바로 보기</h2> + +<ul> + <li>{{cssxref("word-break")}}</li> +</ul> diff --git a/files/ko/web/css/overflow/index.html b/files/ko/web/css/overflow/index.html new file mode 100644 index 0000000000..5e5e2296ae --- /dev/null +++ b/files/ko/web/css/overflow/index.html @@ -0,0 +1,146 @@ +--- +title: overflow +slug: Web/CSS/overflow +tags: + - CSS + - CSS Box Model + - CSS Property + - Layout + - Reference +translation_of: Web/CSS/overflow +--- +<div>{{CSSRef}}</div> + +<p id="Summary"><strong><code>overflow</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 콘텐츠가 너무 커서 요소의 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>에 맞출 수 없을 때의 처리법을 지정합니다. {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}의 값을 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div> + + + +<p>적용 가능한 방법은 잘라내기, 스크롤바 노출, 넘친 콘텐츠 그대로 노출 등이 있습니다.</p> + +<p><code>visible</code>(기본값)이 아닌 다른 값으로 <code>overflow</code> 속성을 사용할 경우 새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 문맥</a>을 생성합니다. 이는 기술적인 요구사항으로, 만약 스크롤하는 요소와 float이 교차한다면, 각 스크롤 단계마다 내용물을 강제적으로 다시 감싸게 될 것입니다. 이는 결국 스크롤 속도를 느리게 할 것입니다.</p> + +<p><code>overflow</code> 속성이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너의 높이(<code>height</code> 또는 <code>max-height</code>)를 설정하거나, <code>white-space</code>를 <code>nowrap</code>으로 설정해야 합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 하나의 축을 <code>visible</code>(기본값)로 하고, 다른 축에는 다른 값을 지정할 경우 <code>visible</code>이 <code>auto</code>처럼 동작합니다.</p> +</div> + +<div class="note"> +<p><strong>참고</strong>: JavaScript {{domxref("Element.scrollTop")}} 속성을 사용하면 요소의 <code>overflow</code>가 <code>hidden</code>일 때도 스크롤할 수 있습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css">/* 키워드 값 */ +overflow: visible; +overflow: hidden; +overflow: clip; +overflow: scroll; +overflow: auto; +overflow: hidden visible; + +/* 전역 값 */ +overflow: inherit; +overflow: initial; +overflow: unset; +</pre> + +<p><code>overflow</code> 속성은 아래의 키워드 값을 하나 또는 두 개 사용해 지정합니다. 두 개를 사용한 경우 첫 번째 값은 <code>overflow-x</code>, 두 번째 값은 <code>overflow-y</code>를 지정합니다. 하나만 사용하면 지정한 값을 양 축 모두에 적용합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>콘텐츠를 자르지 않으며 안쪽 여백 상자 밖에도 그릴 수 있습니다.</dd> + <dt><code>hidden</code></dt> + <dd>콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않습니다. 코드를 사용해 스크롤할 수는 있으므로 ({{domxref("HTMLElement.offsetLeft", "offsetLeft")}} 속성 설정 등), 이 상태의 요소도 스크롤 컨테이너입니다.</dd> + <dt><code>clip</code> {{experimental_inline}}</dt> + <dd><code>hidden</code>과 마찬가지로, 콘텐츠를 안쪽 여백 상자에 맞춰 자릅니다. 그러나 <code>clip</code>은 코드를 사용한 스크롤링도 방지하므로 어떠한 스크롤도 불가능합니다. 이 상태의 요소는 스크롤 컨테이너가 아니며, 새로운 블록 서식 문맥도 생성하지 않습니다. 서식 문맥이 필요하다면 {{cssxref("display", "display:flow-root", "#flow-root")}}을 사용할 수 있습니다.</dd> + <dt><code>scroll</code></dt> + <dd>콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 브라우저는 콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출하므로 내용의 변화에 따라 스크롤바가 생기거나 사라지지 않습니다. 프린터는 여전히 넘친 콘텐츠를 출력할 수도 있습니다.</dd> + <dt><code>auto</code></dt> + <dd>{{glossary("user agent", "사용자 에이전트")}}가 결정합니다. 콘텐츠가 안쪽 여백 상자에 들어간다면 <code>visible</code>과 동일하게 보이나, 새로운 블록 서식 문맥을 생성합니다. 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 노출합니다.</dd> +</dl> + +<dl> + <dt><code>overlay</code> {{deprecated_inline}}</dt> + <dd><code>auto</code>와 동일하게 동작하지만, 스크롤바가 공간을 차지하는 대신 콘텐츠 위에 위치합니다. Webkit(Safari 등)과 Blink(Chrome 또는 Opera 등) 기반 브라우저만 지원합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">p { + width: 12em; + height: 6em; + border: dotted; + overflow: visible; /* content is not clipped */ +} +</pre> + +<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre class="brush: css">p { overflow: hidden; /* no scrollbars are provided */ } +</pre> + +<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre class="brush: css">p { overflow: scroll; /* always show scrollbars */ } +</pre> + +<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre class="brush: css">p { overflow: auto; /* append scrollbars if necessary */ } +</pre> + +<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</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('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td> + <td>{{Spec2('CSS3 Overflow')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#overflow1', 'overflow')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.properties.overflow")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>관련 CSS 속성: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li> +</ul> diff --git a/files/ko/web/css/padding-bottom/index.html b/files/ko/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..119bc4fd25 --- /dev/null +++ b/files/ko/web/css/padding-bottom/index.html @@ -0,0 +1,111 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-bottom +--- +<div>{{CSSRef}}</div> + +<p><strong><code>padding-bottom</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 아래쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}</div> + + + +<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p> + +<p><img alt="The effect of the CSS padding-top property on the element box" src="/files/4109/padding-bottom.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>참고:</strong> {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.</p> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +padding-bottom: 0.5em; +padding-bottom: 0; +padding-bottom: 2cm; + +/* <percentage> 값 */ +padding-bottom: 10%; + +/* 전역 값 */ +padding-bottom: inherit; +padding-bottom: initial; +padding-bottom: unset; +</pre> + +<p><code>padding-top</code> 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백<sup>margin</sup>과 다르게, 음수 값은 사용할 수 없습니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>여백의 크기로 고정값 사용.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> <strong>너비</strong>의 백분율 사용.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: css">.content { padding-bottom: 5%; } +.sidebox { padding-bottom: 10px; } +</pre> + +<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('CSS3 Box', '#the-padding', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>padding-bottom</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.padding-bottom")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="internal" href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box model">CSS 기본 박스 모델 입문</a></li> + <li>{{cssxref("padding")}}</li> +</ul> diff --git a/files/ko/web/css/padding-left/index.html b/files/ko/web/css/padding-left/index.html new file mode 100644 index 0000000000..d866466b4c --- /dev/null +++ b/files/ko/web/css/padding-left/index.html @@ -0,0 +1,109 @@ +--- +title: padding-left +slug: Web/CSS/padding-left +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-left +--- +<div>{{CSSRef}}</div> + +<p><strong><code>padding-left</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 왼쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</div> + + + +<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.</p> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +padding-left: 0.5em; +padding-left: 0; +padding-left: 2cm; + +/* <percentage> 값 */ +padding-left: 10%; + +/* 전역 값 */ +padding-left: inherit; +padding-left: initial; +padding-left: unset; +</pre> + +<p><code>padding-left</code> 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백<sup>margin</sup>과 다르게, 음수 값은 사용할 수 없습니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>여백의 크기로 고정값 사용.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율 사용.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: css">.content { padding-left: 5%; } +.sidebox { padding-left: 10px; } +</pre> + +<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('CSS3 Box', '#the-padding', 'padding-left') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>padding-left</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-left', 'padding-left') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.padding-left")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="internal" href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box model">CSS 기본 박스 모델 입문</a></li> + <li>{{cssxref("padding")}}</li> +</ul> diff --git a/files/ko/web/css/padding-right/index.html b/files/ko/web/css/padding-right/index.html new file mode 100644 index 0000000000..44c0a5be73 --- /dev/null +++ b/files/ko/web/css/padding-right/index.html @@ -0,0 +1,109 @@ +--- +title: padding-right +slug: Web/CSS/padding-right +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-right +--- +<div>{{CSSRef}}</div> + +<p><strong><code>padding-right</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 오른쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/padding-right.html")}}</div> + + + +<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.</p> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +padding-right: 0.5em; +padding-right: 0; +padding-right: 2cm; + +/* <percentage> 값 */ +padding-right: 10%; + +/* 전역 값 */ +padding-right: inherit; +padding-right: initial; +padding-right: unset; +</pre> + +<p><code>padding-right</code> 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백<sup>margin</sup>과 다르게, 음수 값은 사용할 수 없습니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>여백의 크기로 고정값 사용.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율 사용.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: css">.content { padding-right: 5%; } +.sidebox { padding-right: 10px; } +</pre> + +<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('CSS3 Box', '#the-padding', 'padding-right') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>padding-right</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-right', 'padding-right') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.padding-right")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="internal" href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box model">CSS 기본 박스 모델 입문</a></li> + <li>{{cssxref("padding")}}</li> +</ul> diff --git a/files/ko/web/css/padding-top/index.html b/files/ko/web/css/padding-top/index.html new file mode 100644 index 0000000000..708dd59e5d --- /dev/null +++ b/files/ko/web/css/padding-top/index.html @@ -0,0 +1,111 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-top +--- +<div>{{CSSRef}}</div> + +<p><strong><code>padding-top</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 위쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/padding-top.html")}}</div> + + + +<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p> + +<p><img alt="The effect of the CSS padding-top property on the element box" src="/files/4105/padding-top.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>참고:</strong> {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.</p> +</div> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> 값 */ +padding-top: 0.5em; +padding-top: 0; +padding-top: 2cm; + +/* <percentage> 값 */ +padding-top: 10%; + +/* 전역 값 */ +padding-top: inherit; +padding-top: initial; +padding-top: unset; +</pre> + +<p><code>padding-top</code> 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백<sup>margin</sup>과 다르게, 음수 값은 사용할 수 없습니다.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>여백의 크기로 고정값 사용.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> <strong>너비</strong>의 백분율 사용.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<pre class="brush: css">.content { padding-top: 5%; } +.sidebox { padding-top: 10px; } +</pre> + +<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('CSS3 Box', '#the-padding', 'padding-top') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>padding-top</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-top', 'padding-top') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.padding-top")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="internal" href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box model">CSS 기본 박스 모델 입문</a></li> + <li>{{cssxref("padding")}}</li> +</ul> diff --git a/files/ko/web/css/padding/index.html b/files/ko/web/css/padding/index.html new file mode 100644 index 0000000000..e69023e569 --- /dev/null +++ b/files/ko/web/css/padding/index.html @@ -0,0 +1,158 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding +--- +<div>{{CSSRef}}</div> + +<p><strong><code>padding</code></strong> <a href="/ko/CSS">CSS</a> 속성은 요소의 네 방향 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다. {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}의 단축 속성입니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div> + + + +<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code>padding</code>은 요소의 내부에 빈 공간을 추가합니다. 반면 {{cssxref("margin")}}은 요소의 <strong>주위</strong>에 빈 공간을 만듭니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* 네 면 모두 적용 */ +padding: 1em; + +/* 세로방향 | 가로방향 */ +padding: 5% 10%; + +/* 위 | 가로방향 | 아래 */ +padding: 1em 2em 2em; + +/* 위 | 오른쪽 | 아래 | 왼쪽 */ +padding: 5px 1em 0 2em; + +/* 전역 값 */ +padding: inherit; +padding: initial; +padding: unset; +</pre> + +<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">padding</span></font> 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("<length>")}}, {{cssxref("<percentage>")}} 중 하나로, 음수 값은 유효하지 않습니다.</p> + +<ul> + <li><strong>한 개의 값</strong>은 모든 네 면의 여백을 설정합니다.</li> + <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 여백을 설정합니다.</li> + <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 여백을 설정합니다.</li> + <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 여백을 지정합니다. (시계방향)</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt><strong>{{cssxref("length")}}</strong></dt> + <dd>여백의 크기로 고정값 사용.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율 사용.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="간단한_예제">간단한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h4>평범한 안쪽 여백을 가진 요소.</h4> +<h3>엄청난 안쪽 여백을 가진 요소!</h3> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">h4 { + background-color: lime; + padding: 20px 50px; +} + +h3 { + background-color: cyan; + padding: 110px 50px 50px 110px; +} +</pre> + +<p><span>{{EmbedLiveSample('간단한_예제', '100%', 300)}}</span></p> + +<h3 id="더_많은_예제"><span>더 많은 예제</span></h3> + +<pre class="brush: css">padding: 5%; /* 모두 5% */ + +padding: 10px; /* 모두 10px */ + +padding: 10px 20px; /* 상하: 10px */ + /* 좌우: 20px */ + +padding: 10px 3% 20px; /* 상: 10px */ + /* 좌우: 3% */ + /* 하: 20px */ + +padding: 1em 3px 30px 5px; /* 상: 1em */ + /* 우: 3px */ + /* 하: 30px */ + /* 좌: 5px */ +</pre> + +<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('CSS3 Box', '#the-padding', 'padding') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>padding</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding', 'padding') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.padding")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 기본 박스 모델 입문</a></li> + <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</li> +</ul> diff --git a/files/ko/web/css/paged_media/index.html b/files/ko/web/css/paged_media/index.html new file mode 100644 index 0000000000..fd998e8d03 --- /dev/null +++ b/files/ko/web/css/paged_media/index.html @@ -0,0 +1,19 @@ +--- +title: Paged Media +slug: Web/CSS/Paged_Media +tags: + - CSS + - CSS3 + - Page Breaks +translation_of: Web/CSS/Paged_Media +--- +<p>인쇄 미디어(paged media) 속성은 인쇄 콘텐츠의 프레젠테이션 또는 콘텐츠를 개별 페이지로 나누는 다른 미디어를 제어합니다. 페이지 나누기 설정, 인쇄 가능 영역 제어, 서로 다른 좌우 페이지 스타일 및 요소 내부 나누기 제어를 할 수 있습니다. 널리 지원되는 속성은 포함합니다</p> + +<ul> + <li>{{ cssxref("page-break-before") }}</li> + <li>{{ cssxref("page-break-after") }}</li> + <li>{{ cssxref("page-break-inside") }}</li> + <li>{{ cssxref("orphans") }}</li> + <li>{{ cssxref("widows") }}</li> + <li>{{ cssxref("@page") }}</li> +</ul> diff --git a/files/ko/web/css/paint-order/index.html b/files/ko/web/css/paint-order/index.html new file mode 100644 index 0000000000..00b7ff9311 --- /dev/null +++ b/files/ko/web/css/paint-order/index.html @@ -0,0 +1,110 @@ +--- +title: paint-order +slug: Web/CSS/paint-order +tags: + - CSS + - Reference + - SVG + - Web + - 'recipe:css-property' +translation_of: Web/CSS/paint-order +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>paint-order</code></strong> 속성은 텍스트 및 모양의 채움 색과 테두리(마커 포함)를 그리는 순서를 지정합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* 일반 */ +paint-order: normal; + +/* 단일 값 */ +paint-order: stroke; /* draw the stroke first, then fill and markers */ +paint-order: markers; /* draw the markers first, then fill and stroke */ + +/* 다중 값 */ +paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */ +paint-order: markers stroke fill; /* draw markers, then stroke, then fill */ +</pre> + +<p>아무것도 지정하지 않았을 때의 기본값은 <code>fill</code>, <code>stroke</code>, <code>markers</code>입니다.</p> + +<p>하나의 값만 지정하면 그 값을 제일 먼저 그린 후, 기본값의 순서에 따라 나머지를 그립니다. 두 개를 지정하면 나머지 하나를 맨 나중에 그립니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 마커의 경우 <code>marker-*</code> 속성(<code><a href="/ko/docs/Web/SVG/Attribute/marker-start">marker-start</a></code> 등)과 <code><a href="/ko/docs/Web/SVG/Element/marker"><marker></a></code> 요소를 사용하는 SVG 모양의 경우에만 올바릅니다. HTML 텍스트는 이에 해당하지 않으므로 <code>stroke</code>와 <code>fill</code>의 순서만 정할 수 있습니다.</p> +</div> + +<h3 id="값">값</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>일반적인 그리기 순서를 사용합니다.</dd> + <dt><code>stroke</code>,<br> + <code>fill</code>,<br> + <code>markers</code></dt> + <dd>일부 항목 또는 모든 항목의 그리기 순서를 지정합니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="테두리와_채움_색_순서_바꾸기">테두리와 채움 색 순서 바꾸기</h3> + +<h4 id="SVG">SVG</h4> + +<pre class="brush: html notranslate"><svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> + <text x="10" y="75">stroke in front</text> + <text x="10" y="150" class="stroke-behind">stroke behind</text> +</svg></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">text { + font-family: sans-serif; + font-size: 50px; + font-weight: bold; + fill: black; + stroke: red; + stroke-width: 4px; +} + +.stroke-behind { + paint-order: stroke fill; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("테두리와_채움_색_순서_바꾸기", "100%", 165)}}</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("SVG2", "painting.html#PaintOrder", "paint-order")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.paint-order")}}</p> diff --git a/files/ko/web/css/percentage/index.html b/files/ko/web/css/percentage/index.html new file mode 100644 index 0000000000..a6bf20bfb6 --- /dev/null +++ b/files/ko/web/css/percentage/index.html @@ -0,0 +1,86 @@ +--- +title: <percentage> +slug: Web/CSS/percentage +tags: + - CSS + - CSS Data Type + - Layout + - Reference + - Web +translation_of: Web/CSS/percentage +--- +<div>{{CSSRef}}</div> + +<p><strong><code><percentage></code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 백분율 값을 나타냅니다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용합니다. {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("font-size")}} 처럼 다양한 속성에서 백분율을 쓸 수 있습니다.</p> + +<div class="note"><strong>참고:</strong> 계산된 값만 상속받을 수 있습니다. 따라서 부모 속성이 백분율 값을 사용하더라도 전달되는 값은 실제값(예컨대 너비의 {{cssxref("<length>")}} 값은 픽셀)이며 백분율 값은 접근할 수 없습니다.</div> + +<h2 id="구문">구문</h2> + +<p><code><percentage></code> 자료형은 {{cssxref("<number>")}}와 그 뒤의 백분율 기호(<code>%</code>)로 표기합니다. 선택적으로 하나의 <code>+</code> 또는 <code>-</code> 기호로 부호를 표기할 수 있지만, 음의 값은 어떤 속성에서도 유효하지 않습니다. 다른 CSS 단위와 마찬가지로 숫자와 기호 사이에 공백은 없습니다.</p> + +<h2 id="보간">보간</h2> + +<p>애니메이션에서 <code><percentage></code> 자료형의 값은 유동소수점 실수를 사용해 보간됩니다. 보간의 속도는 애니메이션과 연결된 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정합니다.</p> + +<h2 id="예제"><strong>예제</strong></h2> + +<h3 id="width와_margin-left"><code>width</code>와 <code>margin-left</code></h3> + +<pre class="brush: html"><div style="background-color:blue;"> + <div style="width:50%; margin-left:20%; background-color:lime;"> + width: 50%, margin-left: 20% + </div> + <div style="width:30%; margin-left:60%; background-color:pink;"> + width: 30%, margin-left: 60% + </div> +</div> +</pre> + +<p>{{EmbedLiveSample('width와_margin-left', '600', 140)}}</p> + +<h3 id="font-size"><code>font-size</code></h3> + +<pre class="brush: html"><div style="font-size:18px;"> + <p>원본 텍스트 (18px)</p> + <p><span style="font-size:50%;">50%</span></p> + <p><span style="font-size:200%;">200%</span></p> +</div> +</pre> + +<p>{{EmbedLiveSample('font-size', 'auto', 160)}}</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('CSS3 Values', '#percentages', '<percentage>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>No significant change from CSS Level 2 (Revision 1).</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change from CSS Level 1.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#percentage-units', '<percentage>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.percentage")}}</p> diff --git a/files/ko/web/css/pointer-events/index.html b/files/ko/web/css/pointer-events/index.html new file mode 100644 index 0000000000..db74788d89 --- /dev/null +++ b/files/ko/web/css/pointer-events/index.html @@ -0,0 +1,168 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +tags: + - CSS + - CSS Property + - Reference + - SVG +translation_of: Web/CSS/pointer-events +--- +<div>{{CSSRef}}</div> + +<p><strong><code>pointer-events</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 <a href="/ko/docs/Web/API/Event/target">대상</a>이 될 수 있는지 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */ +pointer-events: auto; +pointer-events: none; +pointer-events: visiblePainted; /* SVG only */ +pointer-events: visibleFill; /* SVG only */ +pointer-events: visibleStroke; /* SVG only */ +pointer-events: visible; /* SVG only */ +pointer-events: painted; /* SVG only */ +pointer-events: fill; /* SVG only */ +pointer-events: stroke; /* SVG only */ +pointer-events: all; /* SVG only */ + +/* 전역 값 */ +pointer-events: inherit; +pointer-events: initial; +pointer-events: unset; +</pre> + +<p><code>pointer-events</code> 속성은 아래 목록의 값 중 하나를 선택해서 지정할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>요소가 <code>pointer-events</code> 속성을 지정하지 않은 것처럼 행동합니다. SVG 콘텐츠에서는 <code>auto</code>와 <code>visiblePainted</code>가 동일한 효과를 지닙니다.</dd> +</dl> + +<dl> + <dt><code>none</code></dt> + <dd>요소가 포인터 이벤트의 대상이 되지 않습니다. 그러나 해당 요소의 자손이 다른 <code>pointer-events</code> 값을 지정한 경우, 그 자손은 대상이 될 수 있습니다. 이 때는 이벤트 캡처/<a href="/ko/docs/Web/API/Event/bubbles">버블</a> 단계에서 <code>none</code>을 지정한 요소의 이벤트 처리기를 발동할 수 있습니다.</dd> +</dl> + +<h4 id="SVG_전용_HTML에서_실험적_기능">SVG 전용 (HTML에서 실험적 기능)</h4> + +<dl> + <dt><code>visiblePainted</code></dt> + <dd>SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the interior (i.e., 'fill') of the element and the <code>fill</code> property is set to a value other than <code>none</code>, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the <code>stroke</code> property is set to a value other than <code>none</code>.</dd> + <dt><code>visibleFill</code></dt> + <dd>SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the <code>fill</code> property does not affect event processing.</dd> + <dt><code>visibleStroke</code></dt> + <dd>SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the <code>stroke</code> property does not affect event processing.</dd> + <dt><code>visible</code></dt> + <dd>SVG only. The element can be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the <code>fill</code> and <code>stroke</code> do not affect event processing.</dd> + <dt><code>painted</code></dt> + <dd>SVG only. The element can only be the target of a mouse event when the mouse cursor is over the interior (i.e., 'fill') of the element and the <code>fill</code> property is set to a value other than <code>none</code>, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the <code>stroke</code> property is set to a value other than <code>none</code>. The value of the <code>visibility</code> property does not affect event processing.</dd> + <dt><code>fill</code></dt> + <dd>SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) of the element. The values of the <code>fill</code> and <code>visibility</code> properties do not affect event processing.</dd> + <dt><code>stroke</code></dt> + <dd>SVG only. The element can only be the target of a mouse event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the <code>stroke</code> and <code>visibility</code> properties do not affect event processing.</dd> + <dt><code>all</code></dt> + <dd>SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the <code>fill</code>, <code>stroke</code> and <code>visibility</code> properties do not affect event processing.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="설명">설명</h2> + +<p>SVG 콘텐츠에 <code>pointer-events</code>를 지정하지 않은 경우, <code>visiblePainted</code> 값과 동일한 방법을 사용합니다.</p> + +<p><code>none</code> 값의 경우 요소가 포인터 이벤트의 대상이 아님을 가리키는 동시에, 이벤트가 요소를 "뚫고" 들어가 "아래" 요소를 대상으로 하도록 만듭니다.</p> + +<p>다만, <code>pointer-events</code>를 사용해 요소가 포인터 이벤트의 대상이 되지 않도록 지정한다 하여도, 요소의 이벤트 수신기가 절대 발동하지 않거나, 아예 발동할 수 없는 상태가 되는 것은 아닙니다. 만약 자식 요소 중 하나의 <code>pointer-events</code>를 명시적으로 허용한 경우, 해당 자식을 대상으로 하는 이벤트는 평범하게 부모 트리를 타고 올라가며, 그 도중에 부모의 이벤트 수신기를 발동시게 됩니다. 물론, 부모 요소가 덮고 있지만 (포인터 이벤트를 허용한) 자식 요소 바깥의 영역은 클릭해도 부모와 자식 둘 다 감지하지 못합니다.</p> + +<p><code>pointer-events: none</code>을 지정한 요소여도 <kbd>Tab</kbd> 키를 사용한 순차적 키보드 내비게이션으로 인해 포커스를 획득할 수 있습니다.</p> + +<p>We would like to provide finer grained control (than just <code>auto</code> and <code>none</code>) in HTML for which parts of an element will cause it to "catch" pointer events, and when. To help us in deciding how <code>pointer-events</code> should be further extended for HTML, if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">this wiki page</a> (don't worry about keeping it tidy).</p> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문_2">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<p>다음 예제는 모든 이미지에서 포인터 이벤트(클릭, 드래그, 호버 등)를 비활성화합니다.</p> + +<pre class="brush:css notranslate">img { + pointer-events: none; +}</pre> + +<h3 id="링크_비활성화하기">링크 비활성화하기</h3> + +<p>다음 예제는 https://example.com으로 통하는 링크의 포인터 이벤트를 비활성화합니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html notranslate"><ul> + <li><a href="https://developer.mozilla.org">MDN</a></li> + <li><a href="http://example.com">example.com</a></li> +</ul></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css notranslate">a[href="http://example.com"] { + pointer-events: none; +}</pre> + +<h4 id="결과">결과</h4> + +<div>{{EmbedLiveSample("링크_비활성화하기", "500", "100")}}</div> + +<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('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its <a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events">level 4</a>.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.pointer-events")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>The SVG attribute {{SVGAttr("pointer-events")}}</li> + <li>The SVG attribute {{SVGAttr("visibility")}}</li> + <li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> extended for use in (X)HTML content</li> + <li>{{cssxref("user-select")}} - controls whether the user can select text</li> +</ul> diff --git a/files/ko/web/css/position/index.html b/files/ko/web/css/position/index.html new file mode 100644 index 0000000000..ce23867543 --- /dev/null +++ b/files/ko/web/css/position/index.html @@ -0,0 +1,316 @@ +--- +title: position +slug: Web/CSS/position +tags: + - CSS + - CSS Positioninng + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/position +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>position</code></strong> 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} 속성이 요소를 배치할 최종 위치를 결정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<p><code>position</code> 속성은 아래의 목록에서 하나의 키워드 값을 선택해 지정할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>static</code></dt> + <dd>요소를 일반적인 문서 흐름에 따라 배치합니다. {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} 속성이 <u>아무런</u> 영향도 주지 않습니다. 기본값입니다.</dd> + <dt><code>relative</code></dt> + <dd>요소를 일반적인 문서 흐름에 따라 배치하고, <u>자기 자신</u>을 기준으로 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 <code>static</code>일 때와 같습니다.</dd> + <dd>{{cssxref("z-index")}}의 값이 <code>auto</code>가 아니라면 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, <code>table-caption</code> 요소에 적용했을 때의 작동 방식은 정의되지 않았습니다.</dd> + <dt><code>absolute</code></dt> + <dd>요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>을 기준으로 삼습니다. 최종 위치는 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 값이 지정합니다.</dd> + <dd>{{cssxref("z-index")}}의 값이 <code>auto</code>가 아니라면 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">상쇄</a>되지 않습니다.</dd> + <dt><code>fixed</code></dt> + <dd>요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 {{glossary("viewport", "뷰포트")}}의 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 <code>transform</code>, <code>perspective</code>, <code>filter</code> 속성 중 어느 하나라도 <code>none</code>이 아니라면 (<a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms 명세</a> 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (<code>perspective</code>와 <code>filter</code>의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 값이 지정합니다.</dd> + <dd>이 값은 항상 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 문서를 인쇄할 때는 해당 요소가 <u>모든 페이지</u>의 같은 위치에 출력됩니다.</dd> + <dt><code>sticky</code></dt> + <dd>요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 <u>가장 가까운, 스크롤 되는 조상</u>과, 표 관련 요소를 포함한 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>(가장 가까운 블록 레벨 조상) 을 기준으로 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.</dd> + <dd>이 값은 항상 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 끈끈한 요소는 "스크롤 동작"(<code>overflow</code>가 <code>hidden</code>, <code>scroll</code>, <code>auto</code> 혹은 <code>overlay</code>)이 존재하는 가장 가까운 조상에 달라붙으며, 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "끈끈한" 동작을 보이지 않는 점에 주의하세요. (<a href="https://github.com/w3c/csswg-drafts/issues/865">W3C CSSWG의 Github 이슈</a> 참조)</dd> +</dl> + +<h2 id="설명">설명</h2> + +<h3 id="배치_유형">배치 유형</h3> + +<ul> + <li><strong>위치 지정 요소</strong>란 <code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>relative</code>, <code>absolute</code>, <code>fixed</code>, <code>sticky</code> 중 하나인 요소입니다. 즉, 값이 <code>static</code>이 아닌 모든 요소를 말합니다.</li> + <li><strong>상대 위치 지정 요소</strong>는<code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>relative</code>인 요소입니다. {{cssxref("top")}}과 {{cssxref("bottom")}}은 원래 위치에서의 세로축 거리를, {{cssxref("left")}}와 {{cssxref("right")}}은 원래 위치에서의 가로축 거리를 지정합니다.</li> + <li><strong>절대 위치 지정 요소</strong>는<code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>absolute</code> 또는 <code>fixed</code>인 요소입니다.{{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}는 요소의 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>(위치의 기준점이 되는 조상 요소) 모서리로부터의 거리를 지정합니다. 요소가 바깥 여백을 가진다면 거리에 더합니다. 절대 위치 지정 요소는 새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>을 생성합니다.</li> + <li><strong>끈끈한 위치 지정 요소</strong>는 <code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>sticky</code>인 요소입니다. 평소에는 상대 위치 지정 요소로 처리하지만, <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>이 자신의 플로우 루트(또는, 스크롤 컨테이너)에서 지정한 임계값({{cssxref("top")}} 등으로 지정)을 넘으면 마치 <code>fixed</code>처럼 화면에 고정합니다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제됩니다.</li> +</ul> + +<p>대부분의 경우, {{cssxref("height")}}와 {{cssxref("width")}}가 <code>auto</code>로 지정된 절대 위치 지정 요소는 자신의 콘텐츠에 맞춰 크기가 바뀝니다. 반면 <a href="/ko/docs/Web/CSS/Replaced_element">비대체</a> 절대 위치 지정 요소는 {{Cssxref("top")}}과 {{Cssxref("bottom")}}을 지정하고 {{Cssxref("height")}}는 지정하지 않으면 (즉, <code>auto</code>로 두면) 사용 가능한 수직 공간을 가득 채웁니다. 마찬가지로 {{Cssxref("left")}}와 {{Cssxref("right")}}을 지정하고, {{Cssxref("width")}}는 <code>auto</code>로 두면 사용 가능한 수평 공간을 가득 채웁니다.</p> + +<p>위에서 설명한 경우(공간을 꽉 채우는 경우)가 아니라면 다음 규칙을 따릅니다.</p> + +<ul> + <li><code>top</code>과 <code>bottom</code>을 지정한 경우(<code>auto</code>가 아닌 경우), <code>top</code>이 우선 적용됩니다.</li> + <li><code>left</code>와 <code>right</code>를 지정한 경우, {{Cssxref("direction")}}이 <code>ltr</code>(영어, 한국어 등)이면 <code>left</code>를 우선 적용하고,<font face="Open Sans, arial, sans-serif"> </font>{{Cssxref("direction")}}이 <code>rtl</code>(페르시아어, 아랍어, 히브리어 등)이면 <code>right</code>를 우선 적용합니다.</li> +</ul> + +<h2 id="Specifications" name="Specifications">접근성 고려사항</h2> + +<p>화면을 확대해서 텍스트가 크게 보이게 했을 때 <code>absolute</code>나 <code>fixed</code>로 배치된 요소가 내용을 가리지 않도록 주의해야 합니다.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="성능_및_접근성_문제">성능 및 접근성 문제</h3> + +<p><code>fixed</code>나 <code>sticky</code>를 포함하는 스크롤 요소가 성능 및 접근성 문제를 유발할 수 있습니다. 브라우저는 사용자가 스크롤을 할 때마다 끈끈하거나 고정인 요소를 새로운 위치에 페인트 해야 하는데, 표시해야 되는 내용의 양, 브라우저 및 기기의 성능에 따라 60 <abbr title="frames per second">fps</abbr>를 유지하지 못해 일부 민감한 사용자에게는 접근성 문제가, 다른 모두에게는 사용자 경험 악화가 생깁니다. 이 문제의 해결책 중 하나는 {{cssxref("will-change", "will-change: transform")}}을 추가하여 요소를 자신만의 레이어에서 렌더링 하여 페인트 속도를 향상하고, 나아가 성능과 접근성을 높일 수 있습니다.</p> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="상대_위치_지정">상대 위치 지정</h3> + +<p>상대적으로 배치된 요소는 문서 내에서 정상적인(normal) 위치에서 주어진 오프셋만큼 떨어지지만, 다른 요소에는 영향을 주지 않습니다. 아래 예제에서는 다른 요소들이 "Two"가 원래 위치에 있는 것처럼 배치되는 것을 확인할 수 있습니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="box" id="one">One</div> +<div class="box" id="two">Two</div> +<div class="box" id="three">Three</div> +<div class="box" id="four">Four</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.box { + display: inline-block; + width: 100px; + height: 100px; + background: red; + color: white; +} + +#two { + position: relative; + top: 20px; + left: 20px; + background: blue; +} +</pre> + +<p>{{ EmbedLiveSample('상대_위치_지정', '600px', '200px') }}</p> + +<h3 id="절대_위치_지정">절대 위치 지정</h3> + +<p>상대적으로 배치된 요소가 일반적인 문서 흐름에 따르는 것과 달리, 절대적으로 배치된 요소는 흐름에서 제거됩니다. 따라서 다른 요소는 그 요소가 존재하지 않는 것처럼 배치됩니다. 절대적으로 배치된 요소는 <em>가장 가까운 위치 지정 조상</em>(즉, <code>static</code>이 아닌 가장 가까운 조상)을 기준으로 배치됩니다. 그런 요소가 존재하지 않는다면, 초기 컨테이닝 블록이 기준이 됩니다.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div class="box" id="one">One</div> +<div class="box" id="two">Two</div> +<div class="box" id="three">Three</div> +<div class="box" id="four">Four</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">.box { + display: inline-block; + width: 100px; + height: 100px; + background: red; + color: white; +} + +#two { + position: absolute; + top: 20px; + left: 20px; + background: blue; +}</pre> + +<p>{{ EmbedLiveSample('절대_위치_지정', '800px', '200px') }}</p> + +<h3 id="고정_위치_지정">고정 위치 지정</h3> + +<p>고정 위치 지정은 절대 위치 지정과 비슷하지만, <code>fixed</code>는 요소의 컨테이닝 블록이 <em>뷰포트</em>의 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>이라는 점에서 다릅니다(<code>transform</code>, <code>perspective</code>, <code>filter</code> 속성이 <code>none</code>이 아닌 조상이 있다면 그 조상이 컨테이닝 블록이 됩니다. <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a> 참조). 따라서 스크롤에 관계 없이 화면의 특정 지점에 고정되는, "떠다니는"(floating) 요소를 생성할 수 있습니다. 아래 예제에서, "One" 상자는 페이지 위에서 80픽셀, 왼쪽에서 10픽셀 떨어진 위치에 고정됩니다. 스크롤을 하더라도, 뷰포트를 기준으로 같은 위치에 고정된 채로 유지됩니다.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><div class="outer"> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + </p> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + </p> + <div class="box" id="one">One</div> +</div> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css notranslate">.box { + width: 100px; + height: 100px; + background: red; + color: white; +} + +#one { + position: fixed; + top: 80px; + left: 10px; + background: blue; +} + +.outer { + width: 500px; + height: 300px; + overflow: scroll; + padding-left: 150px; +} +</pre> + +<p>{{ EmbedLiveSample('고정_위치_지정', '800px', '300px') }}</p> + +<h3 id="끈끈한_위치_지정">끈끈한 위치 지정</h3> + +<p>끈끈한 위치 지정은 상대와 고정 위치 지정을 합친 것으로 생각할 수 있습니다. 끈끈하게 배치된 요소는 상대적으로 배치된 요소로 취급하지만, 주어진 경계선을 지나면 고정 위치를 갖게 됩니다. 예를 들어,</p> + +<pre class="brush: css notranslate">#one { position: sticky; top: 10px; }</pre> + +<p>이때 id가 one인 요소는 그 위치가 위에서 10픽셀 떨어진 위치까지는 상대적으로 배치되지만, 그 경계를 넘어가면 위에서 10픽셀 떨어진 위치에 고정됩니다.</p> + +<p>끈끈한 위치 지정은 흔히 사전순 리스트의 레이블에 사용할 수 있습니다. 예를 들어, "ㄴ" 레이블은 "ㄱ"으로 시작하는 목록이 화면 밖으로 나갈 때까지는 그 바로 밑에 표시되고, 그 다음에는 "ㄱ"을 따라 화면 밖으로 나가는 대신 화면 위에 고정시킬 수 있습니다. 그러다가 "ㄴ" 목록이 화면 바깥으로 나가면 그 자리에 "ㄷ" 레이블을 고정시킬 수 있습니다.</p> + +<p>끈끈한 위치 지정이 의도한 대로 동작하게 하려면 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 중 적어도 하나의 임계값을 설정해야 합니다. 임계값을 설정하지 않으면 상대 위치 지정과 다를 바가 없습니다.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html notranslate"><dl> + <div> + <dt>A</dt> + <dd>Andrew W.K.</dd> + <dd>Apparat</dd> + <dd>Arcade Fire</dd> + <dd>At The Drive-In</dd> + <dd>Aziz Ansari</dd> + </div> + <div> + <dt>C</dt> + <dd>Chromeo</dd> + <dd>Common</dd> + <dd>Converge</dd> + <dd>Crystal Castles</dd> + <dd>Cursive</dd> + </div> + <div> + <dt>E</dt> + <dd>Explosions In The Sky</dd> + </div> + <div> + <dt>T</dt> + <dd>Ted Leo &amp; The Pharmacists</dd> + <dd>T-Pain</dd> + <dd>Thrice</dd> + <dd>TV On The Radio</dd> + <dd>Two Gallants</dd> + </div> +</dl> +</pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css notranslate">* { + box-sizing: border-box; +} + +dl > div { + background: #FFF; + padding: 24px 0 0 0; +} + +dt { + background: #B8C1C8; + border-bottom: 1px solid #989EA4; + border-top: 1px solid #717D85; + color: #FFF; + font: bold 18px/21px Helvetica, Arial, sans-serif; + margin: 0; + padding: 2px 0 0 12px; + position: -webkit-sticky; + position: sticky; + top: -1px; +} + +dd { + font: bold 20px/45px Helvetica, Arial, sans-serif; + margin: 0; + padding: 0 0 0 12px; + white-space: nowrap; +} + +dd + dd { + border-top: 1px solid #CCC; +} +</pre> + +<p>{{ EmbedLiveSample('끈끈한_위치_지정', '500px', '300px') }}</p> + +<ul> +</ul> + +<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('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td> + <td>{{Spec2('CSS3 Positioning')}}</td> + <td><code>sticky</code> 속성 값 추가</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("css.properties.position")}}</div> diff --git a/files/ko/web/css/position_value/index.html b/files/ko/web/css/position_value/index.html new file mode 100644 index 0000000000..7e03f38e2f --- /dev/null +++ b/files/ko/web/css/position_value/index.html @@ -0,0 +1,135 @@ +--- +title: <position> +slug: Web/CSS/position_value +tags: + - CSS + - CSS Data Type + - Layout + - Reference + - Web +translation_of: Web/CSS/position_value +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code><position></code></strong> (또는 <strong><code><bg-position></code></strong>) <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표입니다. {{cssxref("background-position")}}, {{cssxref("offset-anchor")}} 속성에서 사용합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code><position></code> 값이 설명하는 최종 위치가 요소 박스 내에 위치해야 할 필요는 없습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;"><code><position></code> 자료형은 하나 혹은 두 개의 키워드와 함께 선택적인 오프셋을 사용해 지정합니다.</p> + +<p>키워드에는 <code>center</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>가 있으며, 각각 요소 박스의 해당하는 방향 모서리 또는 마주보는 두 모서리의 가운데 지점을 의미합니다. 맥락에 따라, <code>center</code>는 좌우 모서리의 중간점일 수도 있고, 상하 모서리의 중간점일 수도 있습니다.</p> + +<p>오프셋은 상대적인 {{cssxref("<percentage>")}} 값 또는 절대적인 {{cssxref("<length>")}} 값으로 지정할 수 있습니다. 양수는 오른쪽과 아래쪽 중 적합한 방향으로 이동하며, 음수는 그 반대입니다.</p> + +<p>하나의 오프셋 값만 지정할 경우 x 좌표를 정의하는 것이며, 다른 축의 값은 기본값으로 <code>center</code>를 사용합니다.</p> + +<pre class="brush:css notranslate">/* 1-value syntax */ +<var>keyword</var> /* Either the horizontal or vertical position; the other axis defaults to center */ +<var>value</var> /* The position on the x-axis; the y-axis defaults to 50% */ + +/* 2-value syntax */ +<var>keyword</var> <var>keyword</var> /* A keyword for each direction (the order is irrelevant) */ +<var>keyword</var> <var>value</var> /* A keyword for horizontal position, value for vertical position */ +<var>value</var> <var>keyword</var> /* A value for horizontal position, keyword for vertical position */ +<var>value</var> <var>value</var> /* A value for each direction (horizontal then vertical) */ + +/* 4-value syntax */ +<var>keyword</var> <var>value</var> <var>keyword</var> <var>value</var> /* Each value is an offset from the keyword that preceeds it */ +</pre> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox notranslate">[ + [ left | center | right ] || [ top | center | bottom ] +| + [ left | center | right | <length> | <percentage> ] + [ top | center | bottom | <length> | <percentage> ]? +| + [ [ left | right ] [ <length> | <percentage> ] ] && + [ [ top | bottom ] [ <length> | <percentage> ] ] +] +</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: {{cssxref("background-position")}} 속성은 세 값 구문도 허용하나, <code><position></code>을 사용하는 다른 속성에서는 허용하지 않습니다.</p> +</div> + +<h2 id="보간">보간</h2> + +<p>애니메이션에서 점의 가로 값과 세로 값은 각각 따로 보간됩니다. 그러나 두 좌표 모두에 대한 보간 속도는 하나의 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정하므로, 점은 직선을 따라 이동하게 됩니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="유효한_위치">유효한 위치</h3> + +<pre class="notranslate">center +left +center top + +right 8.5% +bottom 12vmin right -6px + +10% 20% +8rem 14px +</pre> + +<h3 id="유효하지_않은_위치">유효하지 않은 위치</h3> + +<pre class="example-bad notranslate">left right +bottom top +10px 15px 20px 15px +</pre> + +<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('CSS3 Values', '#position', '<position>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Relists links to both definitions: if {{SpecName('CSS3 Backgrounds')}} is supported, its definition of <code><position></code> must also be used.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '<bg-position>')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Defines <code><position></code> explicitly and extends it to support offsets from any edge.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Allows combination of a keyword with a {{cssxref("<length>")}} or {{cssxref("<percentage>")}} value.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-position', '<position>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Defines <code><position></code> anonymously as the value of {{cssxref("background-position")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.position")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Values_and_Units">CSS 값과 단위</a></li> + <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 값과 단위 소개</a></li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("radial-gradient()")}}</li> + <li>{{cssxref("conic-gradient()")}}</li> +</ul> diff --git a/files/ko/web/css/pseudo-classes/index.html b/files/ko/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..6870bff41e --- /dev/null +++ b/files/ko/web/css/pseudo-classes/index.html @@ -0,0 +1,166 @@ +--- +title: 의사 클래스 +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Overview + - Pseudo-class + - Reference + - Selectors +translation_of: Web/CSS/Pseudo-classes +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>의사 클래스</strong>(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 {{cssxref(":hover")}}를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.</p> + +<pre class="brush: css notranslate">/* Any button over which the user's pointer is hovering */ +button:hover { + color: blue; +}</pre> + +<p>의사 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 탐색기 히스토리({{cssxref(":visited")}} 등), 콘텐츠의 상태(특정 폼 요소에 적용한 {{cssxref(":checked")}} 등), 마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 {{cssxref(":hover")}} 등)처럼 외부 인자와 관련된 경우에도 스타일을 적용할 수 있습니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>는 의사 클래스와 달리 요소의 <strong>특정 부분</strong>에 스타일을 적용할 때 사용합니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">selector:pseudo-class { + property: value; +}</pre> + +<p>일반적인 클래스와 같이 여러 개의 의사 클래스를 조합해 복잡한 선택자를 만들 수 있습니다.</p> + +<h2 id="표준_의사_클래스_색인">표준 의사 클래스 색인</h2> + +<div class="index" id="index"> +<ul> + <li>{{CSSxRef(":active")}}</li> + <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":checked")}}</li> + <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":default")}}</li> + <li>{{CSSxRef(":defined")}}</li> + <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":disabled")}}</li> + <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":empty")}}</li> + <li>{{CSSxRef(":enabled")}}</li> + <li>{{CSSxRef(":first")}}</li> + <li>{{CSSxRef(":first-child")}}</li> + <li>{{CSSxRef(":first-of-type")}}</li> + <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":focus")}}</li> + <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":focus-within")}}</li> + <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":host")}}</li> + <li>{{CSSxRef(":host()")}}</li> + <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":hover")}}</li> + <li>{{CSSxRef(":indeterminate")}}</li> + <li>{{CSSxRef(":in-range")}}</li> + <li>{{CSSxRef(":invalid")}}</li> + <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":lang", ":lang()")}}</li> + <li>{{CSSxRef(":last-child")}}</li> + <li>{{CSSxRef(":last-of-type")}}</li> + <li>{{CSSxRef(":left")}}</li> + <li>{{CSSxRef(":link")}}</li> + <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":not", ":not()")}}</li> + <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li> + <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li> + <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li> + <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li> + <li>{{CSSxRef(":only-child")}}</li> + <li>{{CSSxRef(":only-of-type")}}</li> + <li>{{CSSxRef(":optional")}}</li> + <li>{{CSSxRef(":out-of-range")}}</li> + <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":read-only")}}</li> + <li>{{CSSxRef(":read-write")}}</li> + <li>{{CSSxRef(":required")}}</li> + <li>{{CSSxRef(":right")}}</li> + <li>{{CSSxRef(":root")}}</li> + <li>{{CSSxRef(":scope")}}</li> + <li>{{CSSxRef(":state", ":state()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":target")}}</li> + <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":valid")}}</li> + <li>{{CSSxRef(":visited")}}</li> + <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<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("Fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Defined <code>:fullscreen</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Defines when particular selectors match HTML elements.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Defined <code style="white-space: nowrap;">:any-link</code>, <code>:blank</code>, <code style="white-space: nowrap;">:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code style="white-space: nowrap;">:placeholder-shown</code>, <code style="white-space: nowrap;">:user-invalid</code>, <code style="white-space: nowrap;">:nth-col()</code>, <code style="white-space: nowrap;">:nth-last-col()</code>, <code>:is()</code> and <code>:where()</code>.<br> + Changed <code>:empty</code> to behave like {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.<br> + No significant change for other pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Copies the relevant section from the canonical (WHATWG) HTML spec.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Basic UI")}}</td> + <td>{{Spec2("CSS3 Basic UI")}}</td> + <td>Defined <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> and <code>:read-write</code>, but without the associated semantic meaning.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Defined <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> and <code>:not()</code>.<br> + Defined the syntax of <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>, but without the associated semantic meaning.<br> + No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Defined <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, and <code>:focus</code>.<br> + No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Defined <code>:link</code>, <code>:visited</code> and <code>:active</code>, but without the associated semantic meaning.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a></li> +</ul> diff --git a/files/ko/web/css/pseudo-elements/index.html b/files/ko/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..b85c0a2904 --- /dev/null +++ b/files/ko/web/css/pseudo-elements/index.html @@ -0,0 +1,124 @@ +--- +title: 의사 요소 +slug: Web/CSS/Pseudo-elements +tags: + - CSS + - Overview + - Pseudo-element + - Reference + - Selectors +translation_of: Web/CSS/Pseudo-elements +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>의사 요소</strong>(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 {{cssxref("::first-line")}}을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.</p> + +<pre class="brush: css">/* The first line of every <p> element. */ +p::first-line { + color: blue; + text-transform: uppercase; +}</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 의사 요소와 달리 요소의 <strong>특정 상태</strong>에 스타일을 적용할 때 사용합니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">selector::pseudo-element { + property: value; +}</pre> + +<p>하나의 선택자에 하나의 의사 요소만 사용할 수 있습니다. 반드시 단순 선택자 뒤에 위치해야 합니다.</p> + +<div class="blockIndicator note"> +<p>참고: 규칙을 따라 단일 콜론(<code>:</code>) 대신 이중 콜론(<code>::</code>)을 사용하여 의사 클래스와 의사 요소를 구별해야 합니다. 그러나 과거 W3C 명세에선 이런 구별을 두지 않았으므로 대부분의 브라우저는 기존 의사 요소에 대해 두 구문 모두 지원합니다.</p> +</div> + +<h2 id="표준_의사_요소_색인">표준 의사 요소 색인</h2> + +<div class="index" id="index"> +<ul> + <li>{{CSSxRef("::after", "::after (:after)")}}</li> + <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("::before", "::before (:before)")}}</li> + <li>{{CSSxRef("::cue")}}</li> + <li>{{CSSxRef("::cue-region")}}</li> + <li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li> + <li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li> + <li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("::part", "::part()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("::selection")}}</li> + <li>{{CSSxRef("::slotted", "::slotted()")}}</li> + <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>브라우저</th> + <th>최하위 버전</th> + <th>지원</th> + </tr> + <tr> + <td rowspan="2">Internet Explorer</td> + <td>8.0</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>9.0</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td rowspan="2">Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>1.0 (1.5)</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td rowspan="2">Opera</td> + <td>4.0</td> + <td><code>:pseudo-element</code></td> + </tr> + <tr> + <td>7.0</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td><code>:pseudo-element ::pseudo-element</code></td> + </tr> + </tbody> +</table> + +<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("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Defined pseudo-classes and pseudo-elements.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a></li> +</ul> diff --git a/files/ko/web/css/reference/index.html b/files/ko/web/css/reference/index.html new file mode 100644 index 0000000000..21ee49d424 --- /dev/null +++ b/files/ko/web/css/reference/index.html @@ -0,0 +1,190 @@ +--- +title: CSS 참고서 +slug: Web/CSS/Reference +tags: + - CSS + - Guide + - Overview + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS 참고서</strong>를 이용해 <a href="#키워드_색인">알파벳 순서로 정리한</a> 모든 표준 <a href="/ko/docs/Web/CSS">CSS</a> 속성, <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>, <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>, <a href="/ko/docs/Web/CSS/CSS_Types">CSS 자료형</a>과 <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 찾아보세요. 또한 <a href="#선택자">유형별로 정리한 CSS 선택자</a>와 <a href="#개념">주요 CSS 개념</a>도 찾아볼 수 있습니다. 추가로 간단한 <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM</a> 참조도 들어 있습니다.</p> + +<h2 id="기본_규칙_구문">기본 규칙 구문</h2> + +<h3 id="스타일_규칙_구문">스타일 규칙 구문</h3> + +<pre class="syntaxbox notranslate"><var>style-rule</var> <strong>::=</strong> + <var>selectors-list</var> <strong>{</strong> + <var>properties-list</var> + <strong>}</strong> +</pre> + +<p>... where :</p> + +<pre class="syntaxbox notranslate"><var>selectors-list</var> <strong>::=</strong> + <var>selector</var>[<strong>:</strong><var>pseudo-class</var>] [<strong>::</strong><var>pseudo-element</var>] + [<strong>,</strong> <var>selectors-list</var>] + +<var>properties-list</var> <strong>::=</strong> + [<var>property</var> <strong>:</strong> <var>value</var>] [<strong>;</strong> <var>properties-list</var>] +</pre> + +<p>아래 <a href="#선택자">선택자</a>, <a href="#의사_클래스">의사 클래스</a>, <a href="#의사_요소">의사 요소</a> 목록을 참고하세요. 각 <em><code>value</code></em>의 구문은 지정한 <em><code>property</code></em>가 정의하는 자료형에 따라 다릅니다.</p> + +<h4 id="스타일_규칙_예제">스타일 규칙 예제</h4> + +<pre class="brush: css notranslate">strong { + color: red; +} + +div.menu-bar li:hover > ul { + display: block; +} +</pre> + +<p>CSS 선택자 구문을 설명하는 입문자 단계의 소개 부분은 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS/%EC%84%A0%ED%83%9D%EC%9E%90">이 자습서</a>에서 찾아볼 수 있습니다. 규칙 정의에서 <a href="/ko/docs/Web/CSS/syntax">구문</a> 오류가 하나라도 발생하면 규칙 전체가 유효하지 않다는 점을 명심하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙 정의는 모두 (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">텍스트에 기반</a>하지만, DOM-CSS / CSSOM (규칙 관리 시스템)은 <a href="https://www.w3.org/TR/cssom/#introduction">객체에 기반</a>합니다.</p> + +<h3 id="규칙_구문">@규칙 구문</h3> + +<p>@규칙 체계는 매우 다양하므로 필요한 구체적인 구문을 찾으려면 <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 봐주세요.</p> + +<h2 id="키워드_색인">키워드 색인</h2> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 이 색인에 있는 속성 이름에는 CSS 표준 이름과 다른 <a href="/ko/docs/Web/CSS/CSS_Properties_Reference">JavaScript 이름</a>이 들어가지 않습니다.</p> +</div> + +<div>{{CSS_Ref}}</div> + +<h2 id="선택자">선택자</h2> + +<p>다음은 <a href="/ko/docs/Web/CSS/CSS_Selectors">선택자</a> 목록입니다. 선택자를 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.</p> + +<h3 id="기본_선택자">기본 선택자</h3> + +<p><strong>기본 선택자</strong>는 선택자의 기초를 이루며, 조합을 통해 더 복잡한 선택자를 생성합니다.</p> + +<ul> + <li><a href="/ko/docs/Web/CSS/Universal_selectors">전체 선택자</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li> + <li><a href="/ko/docs/Web/CSS/Type_selectors">태그 선택자</a> <em><code>elementname</code></em></li> + <li><a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a> <code>.<em>classname</em></code></li> + <li><a href="/ko/docs/Web/CSS/ID_selectors">ID 선택자</a> <code>#<em>idname</em></code></li> + <li><a href="/ko/docs/Web/CSS/Attribute_selectors">속성 선택자</a> <code>[<em>attr</em>=<em>value</em>]</code></li> +</ul> + +<h3 id="그룹_선택자">그룹 선택자</h3> + +<dl> + <dt><a href="/ko/docs/Web/CSS/Selector_list">선택자 목록</a> <code><em>A</em>, <em>B</em></code></dt> + <dd>A와 B 요소를 모두 선택합니다. 일치하는 여러가지 요소를 선택할 때 사용합니다.</dd> +</dl> + +<h3 id="결합자">결합자</h3> + +<p>결합자는 "<em><code>A</code></em>는 <em><code>B</code></em>의 자식", "<em><code>A</code></em>는 <em><code>B</code></em>와 인접 요소"처럼, 두 개 이상의 선택자끼리 관계를 형성합니다.</p> + +<dl> + <dt><a href="/ko/docs/Web/CSS/%EC%9D%B8%EC%A0%91_%ED%98%95%EC%A0%9C_%EC%84%A0%ED%83%9D%EC%9E%90">인접 형제 결합자</a> <code><em>A</em> + <em>B</em></code></dt> + <dd>요소 <em><code>A</code></em>와 <em><code>B</code></em>가 같은 부모를 가지며 <em><code>B</code></em>가 <em><code>A</code></em>를 바로 뒤따라야 하도록 지정합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a> <code><em>A</em> ~ <em>B</em></code></dt> + <dd>요소 <em><code>A</code></em>와 <em><code>B</code></em>가 같은 부모를 가지며 <em><code>B</code></em>가 <em><code>A</code></em>를 뒤따라야 하도록 지정합니다. 그러나 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 옆에 위치해야 할 필요는 없습니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a> <code><em>A</em> > <em>B</em></code></dt> + <dd>요소 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 밑에 위치해야 하도록 지정합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a> <code><em>A</em> <em>B</em></code></dt> + <dd>요소 <em><code>B</code></em>가 <em><code>A</code></em>의 밑에 위치해야 하도록 지정합니다. 그러나 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 아래에 있을 필요는 없습니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Column_combinator">열 결합자</a> <code><em>A</em> || <em>B</em></code> {{experimental_inline}}</dt> + <dd>요소 <em><code>B</code></em>가 표의 열 <em><code>A</code></em> 안에 위치해야 하도록 지정합니다. 여러 열에 걸친 요소는, 각각의 열 모두에 대해 안쪽에 위치한 것으로 간주합니다.</dd> +</dl> + +<h3 id="의사_클래스요소">의사 클래스/요소</h3> + +<dl> + <dt><a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a> <code>:</code></dt> + <dd>요소의 특정 상태를 선택합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a> <code>::</code></dt> + <dd>HTML이 포함하지 않은 객체를 나타냅니다.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>같이 보기:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors Level 4 명세의 선택자 목록.</a></p> +</div> + +<h2 id="개념">개념</h2> + +<h3 id="구문과_의미">구문과 의미</h3> + +<ul> + <li><a href="/ko/docs/Web/CSS/Syntax">CSS 구문</a></li> + <li><a href="/ko/docs/Web/CSS/At-rule">@-규칙</a></li> + <li><a href="/ko/docs/Web/CSS/Cascade">종속</a></li> + <li><a href="/ko/docs/Web/CSS/Comments">주석</a></li> + <li><a href="/ko/docs/Glossary/Descriptor_(CSS)">서술자</a></li> + <li><a href="/ko/docs/Web/CSS/inheritance">상속</a></li> + <li><a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a></li> + <li><a href="/ko/docs/Web/CSS/Specificity">명시도</a></li> + <li><a href="/ko/docs/Web/CSS/Value_definition_syntax">값 정의 구문</a></li> +</ul> + +<h3 id="값">값</h3> + +<ul> + <li><a href="/ko/docs/Web/CSS/actual_value">실제값</a></li> + <li><a href="/ko/docs/Web/CSS/computed_value">계산값</a></li> + <li><a href="/ko/docs/Web/CSS/initial_value">초깃값</a></li> + <li><a href="/ko/docs/Web/CSS/resolved_value">결정값</a></li> + <li><a href="/ko/docs/Web/CSS/specified_value">지정값</a></li> + <li><a href="/ko/docs/Web/CSS/used_value">사용값</a></li> +</ul> + +<h3 id="레이아웃">레이아웃</h3> + +<ul> + <li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a></li> + <li><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a></li> + <li><a href="/ko/docs/Web/CSS/Layout_mode">레이아웃 모드</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a></li> + <li><a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a></li> + <li><a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">쌓임 맥락</a></li> + <li><a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 맥락</a></li> +</ul> + +<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> + +<h3 id="주요_객체_유형">주요 객체 유형</h3> + +<ul> + <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li> + <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li> + <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector & style)</span></li> + <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li> + <li>{{DOMxRef("HTMLElement.style")}}</li> + <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (just style)</li> + <li>{{DOMxRef("Element.className")}}</li> + <li>{{DOMxRef("Element.classList")}}</li> +</ul> + +<h3 id="중요_메서드">중요 메서드</h3> + +<ul> + <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li> + <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li> +</ul> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS 확장</a> (<code>-moz-</code> 접두사 사용)</li> + <li><a href="/ko/docs/Web/CSS/WebKit_Extensions">WebKit CSS 확장</a> (대다수 <code>-webkit-</code> 접두사 사용)</li> + <li><a href="/ko/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS 확장</a> (<code>-ms-</code> 접두사 사용)</li> +</ul> + +<h2 id="외부_링크">외부 링크</h2> + +<ul> + <li><a href="https://www.w3.org/TR/CSS/#indices">CSS 색인 (w3.org)</a></li> +</ul> diff --git a/files/ko/web/css/reference/property_template/index.html b/files/ko/web/css/reference/property_template/index.html new file mode 100644 index 0000000000..9df3680b49 --- /dev/null +++ b/files/ko/web/css/reference/property_template/index.html @@ -0,0 +1,131 @@ +--- +title: Property Template +slug: Web/CSS/Reference/Property_Template +tags: + - CSS + - MDN Meta +translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template +--- +<p>{{MDNSidebar}}</p> + +<div class="blockIndicator note"> +<p><span class="seoSummary">This is a template page for CSS property. Please use this as a raw template when you create a new CSS property page.</span><br> + <em>Comment in italics are information about how to use part of the template</em></p> +</div> + +<p>{{CSSRef}}</p> + +<p><em>Add the non-standard header if the property is not on the standard track. In the summary section, in a note, describe how to achieve its effect using standard Open Web technologies.</em></p> + +<p>{{Non-standard_Header}}</p> + +<p><em>Add the experimental header if in your judgement the property's behavior is likely to change in future, for example because of very immature specifications or competing incompatible implementations.</em></p> + +<p>{{SeeCompatTable}}</p> + +<p><em>Description of the property. It must start by "The <code>xyz</code> CSS property" followed by a one-sentence description. The first paragraph of this introduction will be used by default as the description of the page.</em></p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Placeholder for any special messages.</p> +</div> + +<p><em>But don't add several notes. It should be really important, or be part of the description!</em></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css;">/* Keyword values */ +property: value1; +property: value2; + +/* <length> values */ +property: 12.8em; /* A valid length */ + +/* Global values */ +property: inherit; /* <-- To remember those are a possible values */ +property: initial; +property: unset; +</pre> + +<p><em>The second part of the is a simple translation of the what the formal syntax tells. It is aimed at medium-level users that will not understand well the formal syntax. </em></p> + +<h3 id="Values">Values</h3> + +<p><em>Each element of the formal syntax must be explained</em></p> + +<dl> + <dt><code>value_1</code></dt> + <dd>Is a keyword meaning...</dd> + <dt><code>value_2</code> {{Non-standard_Inline}} {{Experimental_Inline}}</dt> + <dd>Is a keyword meaning</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<p><em>The formal syntax must be taken from the spec and added to the <a href="https://github.com/mdn/data">MDN data repository</a>. It is an important tool to get precise syntax information for advanced users.</em></p> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p><em>Add this only if there is such an example. No dead link here.</em></p> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css"><em>elementName { + property: value; + thisis: "example"; + dream: 10000000mm; + love: "danger"; +}</em></pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><em><elementName>foo bar</elementName></em></pre> + +<h3 id="Result">Result</h3> + +<p><em>{{EmbedLiveSample("Examples")}}</em></p> + +<h2 id="Specifications">Specifications</h2> + +<p><em>Exclusively use this standard table. Place older spec on the bottom. Use the templates SpecName() for the name and Spec2() for the status. That way, when the spec progress on the standard track, or move, the table content will be automatically adapted.</em></p> + +<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("CSS3 Animations", "#fake-link", "fake-value")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>No change from CSS 2.1</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "#fake-link", "fake value")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p><em>(See <a href="/Project:en/Compatibility_tables" title="Project:en/Compatibility_tables">Compatibility tables</a> for more information)</em></p> + + + +<p>{{Compat("css.property.<em>property-name</em>")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><em>Links of link of related properties: {{CSSxRef("example-property")}}</em></li> + <li><em>Links to article showing how to use the property in context: "Using … article"</em></li> + <li><em>Very good external links. Don't be afraid of external links, but they should be outstanding, and not only mention minor details.</em></li> +</ul> diff --git a/files/ko/web/css/replaced_element/index.html b/files/ko/web/css/replaced_element/index.html new file mode 100644 index 0000000000..8914554a01 --- /dev/null +++ b/files/ko/web/css/replaced_element/index.html @@ -0,0 +1,65 @@ +--- +title: 대체 요소 +slug: Web/CSS/Replaced_element +tags: + - CSS + - Guide + - Layout + - Reference +translation_of: Web/CSS/Replaced_element +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a>의 <strong>대체 요소</strong>(replaced element)란 자신의 표현 결과가 CSS의 범위를 벗어나는 요소로서, CSS 서식 모델과는 분리된 외부 객체인 요소입니다.</span></p> + +<p>간단히 말해서, 대체 요소는 자신의 콘텐츠가 현재 문서 스타일의 영향을 받지 않는 요소라고 할 수 있습니다. CSS는 대체 요소의 위치에 영향을 줄 수 있지만 콘텐츠에는 미치지 못합니다. {{htmlelement("iframe")}} 등 일부 대체 요소는 자신만의 스타일 시트를 가질 수도 있지만, 부모 문서의 스타일을 상속하지는 않습니다.</p> + +<p>CSS가 대체 요소에 영향을 줄 수 있는 다른 유일한 방법은, 일련의 속성을 통해 요소 박스에서 콘텐츠의 위치를 제어하는 것입니다. {{anch("콘텐츠 박스 내부의 객체 위치 제어")}} 항목을 참고하세요.</p> + +<h2 id="대체_요소">대체 요소</h2> + +<p>전형적인 대체 요소는 다음과 같습니다.</p> + +<ul> + <li>{{HTMLElement("iframe")}}</li> + <li>{{HTMLElement("video")}}</li> + <li>{{HTMLElement("embed")}}</li> + <li>{{HTMLElement("img")}}</li> +</ul> + +<p>일부 요소는 특정한 경우에만 대체 요소로 취급합니다.</p> + +<ul> + <li>{{HTMLElement("option")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("canvas")}}</li> + <li>{{HTMLElement("object")}}</li> +</ul> + +<p>HTML 명세에 따르면 {{htmlelement("input")}} 또한 대체될 수 있습니다. <code><input></code> 유형이 <code>"image"</code>인 경우 {{htmlelement("img")}}와 유사한 대체 요소이기 때문입니다. 그러나 다른 유형의 <code><input></code>을 포함한 나머지 양식 컨트롤 요소는 비대체 요소라고 명시하고 있습니다. (명세는 양식 요소의 플랫폼별 기본 렌더링을 "위젯"(Widget)이라는 용어로 설명하고 있습니다.)</p> + +<p>CSS {{cssxref("content")}} 속성을 사용해 추가한 객체도 대체 요소로, HTML 마크업에는 존재하지 않기 때문에 "익명" 대체 요소라고 합니다.</p> + +<h2 id="대체_요소와_CSS">대체 요소와 CSS</h2> + +<p>CSS는 바깥 여백이나 일부 <code>auto</code> 값 계산 등 특정 상황에서 대체 요소를 특별히 취급합니다.</p> + +<p>일부 대체 요소는 고유 크기 또는 정의된 기준선을 가질 수 있으며, {{cssxref("vertical-align")}} 등의 CSS 속성이 사용할 수 있습니다. 오직 대체 요소만이 고유 크기를 가질 수 있습니다.</p> + +<h3 id="콘텐츠_박스_내부의_객체_위치_제어">콘텐츠 박스 내부의 객체 위치 제어</h3> + +<p>특정 CSS 속성을 사용하면 대체 요소 내의 객체가 요소의 박스 영역 어디에 배치되어야 하는지 지정할 수 있으며, {{SpecName("CSS3 Images")}}와 {{SpecName("CSS4 Images")}} 명세가 정의하고 있습니다.</p> + +<dl> + <dt>{{cssxref("object-fit")}}</dt> + <dd>대체 요소의 콘텐츠 객체를 대체 요소의 박스에 어떻게 맞출지 지정합니다.</dd> + <dt>{{cssxref("object-position")}}</dt> + <dd>대체 요소의 콘텐츠 객체를 정렬하는 방법을 지정합니다.</dd> +</dl> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements">HTML 명세</a></li> + <li>{{CSS_key_concepts()}}</li> +</ul> diff --git a/files/ko/web/css/resolved_value/index.html b/files/ko/web/css/resolved_value/index.html new file mode 100644 index 0000000000..56f04e6495 --- /dev/null +++ b/files/ko/web/css/resolved_value/index.html @@ -0,0 +1,39 @@ +--- +title: 결정값 +slug: Web/CSS/resolved_value +tags: + - CSS + - Reference +translation_of: Web/CSS/resolved_value +--- +<div>{{cssref}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>결정값</strong>은 {{domxref("Window.getComputedStyle", "getComputedStyle()")}}이 반환하는 값입니다.</p> + +<p>속성 대부분은 결정값이 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이지만, {{cssxref("width")}}와 {{cssxref("height")}}를 포함한 기존 속성은 <a href="/ko/docs/Web/CSS/used_value">사용값</a>입니다. 속성 별 자세한 사항은 아래의 명세를 참고하세요.</p> + +<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("CSSOM", "#resolved-values", "resolved value")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("window.getComputedStyle")}}</li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/ko/web/css/revert/index.html b/files/ko/web/css/revert/index.html new file mode 100644 index 0000000000..9a9a1ce6f7 --- /dev/null +++ b/files/ko/web/css/revert/index.html @@ -0,0 +1,137 @@ +--- +title: revert +slug: Web/CSS/revert +tags: + - CSS + - CSS 속성 + - Cascade + - Style + - 'all:revert' + - revert + - revert style 속성 + - revert 속성 + - 스타일 +translation_of: Web/CSS/revert +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>revert</code></strong> 는 현재 엘리먼트에 선언 된 캐스캐이딩된 속성으로부터 <strong>{{Glossary("style origin")}}</strong> 으로 되돌립니다.</span> 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리는 것입니다. 이 속성은 css 단축속성{{cssxref("all")}}을 포함한 어떤 프로퍼티에도 적용할 수 있습니다.</p> + +<ul> + <li>만약 그 사이트만의 css 속성이 지정되어있다면 <code>revert</code> 속성은 유저가 지정한 커스텀 스타일로 롤백합니다. 만약 하나만 존재한다면 user agent의 default 스타일로 돌아가는 것입니다.</li> + <li>만약 사용자의 커스텀 스타일을 사용하거나 사용자에 의해서 스타일이 적용되어 있다면, <code>revert</code> 는 user agent의 default 스타일로 되돌립니다.</li> + <li>만약 user agent default 스타일만 지정되어있다면, {{cssxref("unset")}}과 마찬가지의 의미입니다.</li> +</ul> + +<p><code>revert</code> 키워드는 많은 경우에서 <code><a href="/en-US/docs/Web/CSS/unset">unset</a></code> 과 같은 성질을 가집니다. 한가지 차이점은 user agent에 의한 스타일이냐 유저가 지정한 스타일이냐의 차이입니다.</p> + +<p>Revert 는 자식 요소까지 변경하지는 않습니다. (하지만 자식 요소에 특별히 rule이 지정되어 있지 않다면 적용됩니다.). 그래서 만약에 모든 섹션에 <code>color: green</code> 속성을 지정하고 <code>all: revert</code> 를 사용하면 모든 섹션의 컬러값은 black으로 돌아갈 것입니다. 하지만 만약, 당신이 section 내의 모든 p에 red를 지정했다면 그것들은 red로 유지될 것입니다.</p> + +<div class="blockIndicator note"> +<p>Revert는 단순히 값입니다. 그러므로 <code>revert</code> 또한 다른 <a href="/en-US/docs/Web/CSS/Specificity">specificity</a>값으로 덮어 쓸 수 있습니다.</p> +</div> + +<div class="note"> +<p><code>revert</code> 는 {{cssxref("initial")}} 키워드와는 다른데, <a href="/en-US/docs/Web/CSS/initial_value">initial value</a> 는 프로퍼티 단위의 css 특성화입니다. user-agent의 스타일 시트도 default value로 되돌립니다..</p> + +<p>예를 들어, {{cssxref("display")}} 속성에 대한 <a href="/en-US/docs/Web/CSS/initial_value">initial value</a> 는 <code>inline</code> 입니다. 반면에 {{HTMLElement("div")}} 에 대한 {{cssxref("display")}} user agent 속성은 <code>block</code> 이고, {{HTMLElement("table")}} 에 대한 속성은 <code>table</code> 입니다.</p> +</div> + +<h2 id="예시">예시</h2> + +<h3 id="Revert_vs_unset">Revert vs unset</h3> + +<p>비록 <code>revert</code> 와 <code>unset</code> 은 비슷하지만 몇몇 엘리먼트와 몇몇 속성에서는 다릅니다.</p> + +<p>그래서 아래 예시를 보면, 우리는 <code>font-weight</code> 를 커스텀으로 글로벌 스타일로 지정하였습니다. 그러나 revert와 unset을 시도해보면 다른 결과를 볼 수 있습니다. Unset text를 default로 설정된 normal로 유지합니다. Revert는 user-agent 상에 font-weight인 bold로 돌아갈 것입니다.</p> + +<pre class="brush: css notranslate">h3 { + font-weight: normal; + color: blue; +}</pre> + +<pre class="brush: html notranslate"><h3 style="font-weight: unset; color: unset;">This will still have font-weight: normal, but color: black</h3> +<p>Just some text</p> +<h3 style="font-weight: revert; color: revert;">This should have its original font-weight (bold) and color: black</h3> +<p>Just some text</p></pre> + +<p>{{EmbedLiveSample('Revert_vs_unset')}}</p> + +<h3 id="Revert_all">Revert all</h3> + +<p>모든 요소를 revert 하는 것은 당신이 많은 캐스캐이딩에 따른 수정이 있었을 때 default로 돌아가기에 매우 유용합니다. 그래서 font-weight를 리버트 하고 color를 리버트하는 것을 각각 하기보다는 한꺼번에 돌릴 수 있습니다.</p> + +<pre class="brush: css notranslate">h3 { + font-weight: normal; + color: blue; + border-bottom: 1px solid grey; +}</pre> + +<pre class="brush: html notranslate"><h3>This will have custom styles</h3> +<p>Just some text</p> +<h3 style="all: revert">This should be reverted to browser/user defaults</h3> +<p>Just some text</p></pre> + +<p>{{EmbedLiveSample('Revert_all')}}</p> + +<h3 id="부모요소에서의_Revert">부모요소에서의 Revert </h3> + +<p>효율적으로 revert 하는 것은 당신이 선택한 속성에 대해서만 해당 속성을 제거하는 것입니다. 우리는 paragraph에 한해서는 red 속성을 지정하고 section에는 darkgreen 을 따로 각각 지정할 수 있습니다.</p> + +<pre class="brush: css notranslate">section { color: darkgreen } +p { color: red } +section.with-revert { color: revert } +</pre> + +<pre class="brush: html notranslate"><section> + <h3>따로 지정되지 않은 h3는 다크 그린</h3> + <p>paragraph의 텍스트는 빨강</p> + 섹션 안의 요소니까 다크 그린. +</section> +<section class="with-revert"> + <h3>revert로 따로 지정되어있지 않았던 h3는 검정</h3> + <p>특성화되어있는 paragraph는 그대로 빨강</p> + 섹션 안의 요소가 revert 되면서 검정 +</section></pre> + +<p>section 요소가 돌아갔음에도 paragraph는 여전히 빨강인 것에 주목하세요. </p> + +<p>{{EmbedLiveSample('Revert_on_a_parent')}}</p> + +<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('CSS4 Cascade', '#default', 'revert')}}</td> + <td>{{Spec2('CSS4 Cascade')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> +<div> +<div class="hidden"><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 참조하시고 pull request를 해보세요.</div> + +<p>{{Compat("css.types.global_keywords.revert")}}</p> +</div> +</div> + +<h2 id="요약">요약</h2> + +<ul> + <li>initial value를 지정할 때는 {{cssxref("initial")}} 를 사용하세요 .</li> + <li>초기 속성을 없애거나, 부모 요소에 대한 상속 된 속성을 지정할 때는 {{cssxref("unset")}} 를 사용하세요.</li> + <li>부모 속성을 지정할 때는 {{cssxref("inherit")}} 를 사용하세요.</li> + <li>{{cssxref("all")}} 속성은 unset, initial, revert, inherit 속성을 한꺼번에 지정할 것입니다.</li> +</ul> diff --git a/files/ko/web/css/selector_list/index.html b/files/ko/web/css/selector_list/index.html new file mode 100644 index 0000000000..6d45de9430 --- /dev/null +++ b/files/ko/web/css/selector_list/index.html @@ -0,0 +1,101 @@ +--- +title: 선택자 목록 +slug: Web/CSS/Selector_list +tags: + - CSS + - Reference + - Selectors + - 선택자 +translation_of: Web/CSS/Selector_list +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>선택자 목록</strong>(<code>,</code>)은 일치하는 모든 요소를 선택합니다.</p> + +<pre class="brush: css no-line-numbers notranslate">/* 모든 span과 div 요소 선택 */ +span, +div { + border: red 2px solid; +}</pre> + +<p>다수의 선택자를 쉼표 구분 목록에 넣어 스타일 시트 크기를 줄일 수 있습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">element, element, element { <em>style properties</em> }</pre> + +<h2 id="예제">예제</h2> + +<h3 id="한_줄_묶기">한 줄 묶기</h3> + +<p>쉼표로 구분한 목록을 한 줄에 배치할 수 있습니다.</p> + +<pre class="brush: css notranslate">h1, h2, h3, h4, h5, h6 { font-family: helvetica; } +</pre> + +<h3 id="여러_줄_묶기">여러 줄 묶기</h3> + +<p>쉼표로 구분한 목록을 여러 줄에 배치할 수도 있습니다.</p> + +<pre class="brush: css notranslate">#main, +.content, +article { + font-size: 1.1em; +} +</pre> + +<h3 id="선택자_목록_무효화">선택자 목록 무효화</h3> + +<p>선택자 목록의 단점은, 다음의 두 경우가 서로 같지 않다는 점입니다.</p> + +<pre class="brush: css notranslate">h1 { font-family: sans-serif } +h2:maybe-unsupported { font-family: sans-serif } +h3 { font-family: sans-serif }</pre> + +<pre class="brush: css notranslate">h1, h2:maybe-unsupported, h3 { font-family: sans-serif }</pre> + +<p>왜냐하면 목록 내의 하나의 선택자라도 브라우저가 지원하지 않으면 전체 목록을 무효화하기 때문입니다.</p> + +<p>대응 방법은 {{CSSxRef(":is", ":is()")}} 선택자를 사용하는 것을 통해, 유효하지 않은 선택자를 무시하는 것입니다. 그러나 <code>:is()</code>가 명시도를 계산하는 방법으로 인해, 모든 선택자가 동일한 명시도를 갖게 되는 부작용이 있습니다.</p> + +<pre class="brush: css notranslate">h1 { font-family: sans-serif } +h2:maybe-unsupported { font-family: sans-serif } +h3 { font-family: sans-serif }</pre> + +<pre class="brush: css notranslate">:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }</pre> + +<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("CSS4 Selectors", "#grouping", "Selector Lists")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Renamed to "selector list"</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#grouping', 'grouping')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.list")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>선택자 목록 무효화라는 과거의 실수를 가지지 않는 {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}, {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} 의사 클래스.</li> +</ul> diff --git a/files/ko/web/css/shorthand_properties/index.html b/files/ko/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..26075c0be4 --- /dev/null +++ b/files/ko/web/css/shorthand_properties/index.html @@ -0,0 +1,156 @@ +--- +title: 단축 속성 +slug: Web/CSS/Shorthand_properties +tags: + - CSS + - Guide + - Layout + - Reference + - Web + - 단축 속성 +translation_of: Web/CSS/Shorthand_properties +--- +<div>{{cssref}}</div> + +<p><strong>단축 속성</strong>은 서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 CSS 속성입니다. 단축 속성을 사용하면 간결한 (그리고 읽기도 좋은) 스타일 시트를 작성해 시간과 체력을 아낄 수 있습니다.</p> + +<p>CSS 명세는 같은 주제를 가진 여러 공통 속성을 묶기 위해 단축 속성을 정의합니다. 가령 CSS {{cssxref("background")}} 속성은 {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, {{cssxref("background-position")}} 값을 정의할 수 있는 단축 속성입니다. 마찬가지로, 가장 흔히 쓰이는 글꼴 관련 속성은 {{cssxref("font")}} 단축 속성으로, 박스 주위의 바깥 여백은 {{cssxref("margin")}} 단축 속성으로 지정할 수 있습니다.</p> + +<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">까다로운 예외상황</h2> + +<p>단축 속성은 사용하기 매우 편리하지만, 염두해야 할 예외상황이 몇 가지 있습니다.</p> + +<ol> + <li>단축 속성에 지정하지 않은 값은 초깃값이 됩니다. 별거 아닌 듯 보일 수 있지만, 사실 이전에 정의한 값도 초깃값으로 <strong>재정의</strong>합니다. 따라서, + + <pre class="brush:css notranslate">background-color: red; +background: url(images/bg.gif) no-repeat top right; +</pre> + 을 적한 요소의 배경 색은 <code>red</code>가 아니라, {{cssxref("background-color")}}의 기본값인 <code>transparent</code>가 됩니다. 두 번째 규칙이 우선하기 때문입니다.</li> + <li>개별 속성값만 상속할 수 있습니다. 빠진 값에는 초깃값을 대입하므로, 어떤 속성의 값을 상속받고자 단축 속성의 해당 부분을 비우는 것은 불가능합니다. <code>inherit</code> 키워드 역시 속성 값으로 온전히 사용해야 하며 값의 일부(<code>red <em>inherit</em> top right</code>처럼)로는 사용할 수 없습니다. 따라서 어떤 속성을 상속하고 싶다면 <code>inherit</code>을 지정한 본디 속성(longhand property)을 추가할 수밖에 없습니다.</li> + <li>단축 속성은 값의 순서를 되도록 제한하지 않습니다. 특히 각 값의 자료형이 서로 다르면 순서가 중요하지 않습니다. 하지만 일부 속성이 동일한 자료형의 값을 가질 수 있을 때는 잘 동작하지 않습니다. 이런 경우의 처리는 여러 범주로 나뉩니다: + <ol> + <li>{{cssxref("border-style")}}, {{cssxref("margin")}}, {{cssxref("padding")}}처럼 박스의 모서리와 관련된 속성을 다루는 단축 속성은 항상 같은 쪽의 모서리를 가리키는 1~4 값 구문을 사용합니다: + <table> + <tbody> + <tr> + <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td> + <td>1개 값 구문: <code>border-width: 1em</code> — 유일한 값이 모든 변을 나타냅니다.</td> + </tr> + <tr> + <td><img alt="border2.png" src="/files/3647/border2.png"></td> + <td>2개 값 구문: <code>border-width: 1em 2em</code> — 첫 번째 값은 세로(상하)변을, 두 번째는 가로(좌우)변을 나타냅니다.</td> + </tr> + <tr> + <td><img alt="border3.png" src="/files/3648/border3.png"></td> + <td>3개 값 구문: <code>border-width: 1em 2em 3em</code> — 첫 번째 값은 상변을, 두 번째는 가로변, 세 번째는 하변을 나타냅니다.</td> + </tr> + <tr> + <td><img alt="border4.png" src="/files/3649/border4.png"></td> + <td> + <p>4개 값 구문: <code>border-width: 1em 2em 3em 4em</code> — 네 값이 각각 상, 우, 하, 좌변을 나타냅니다. 상변에서 시작하여 시계 방향으로, 항상 같은 순서를 사용합니다.</p> + </td> + </tr> + </tbody> + </table> + </li> + <li>비슷하게, {{cssxref("border-radius")}} 같은 박스의 꼭짓점과 관련된 속성을 다루는 단축 속성은 항상 같은 쪽의 꼭짓점을 가리키는 1-4-값 구문을 사용합니다: + <table> + <tbody> + <tr> + <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td> + <td>1개 값 구문: <code>border-radius: 1em</code> — 유일한 값이 모든 귀를 나타냅니다.</td> + </tr> + <tr> + <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> + <td>2개 값 구문: <code>border-radius: 1em 2em</code> — 첫 번째 값은 좌상 및 우하귀, 두 번째는 우상 및 좌하귀를 나타냅니다.</td> + </tr> + <tr> + <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> + <td>3개 값 구문: <code>border-radius: 1em 2em 3em</code> — 첫 번째 값은 좌상귀, 두 번째는 우상 및 좌하귀, 세 번째 값은 우하귀를 나타냅니다.</td> + </tr> + <tr> + <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> + <td> + <p>4개 값 구문: <code>border-radius: 1em 2em 3em 4em</code> — 네 값은 각각 좌상, 우상, 우하 및 좌하귀를 나타냅니다. 좌상귀에서 시작하여 시계 방향으로, 항상 같은 순서를 사용합니다.</p> + </td> + </tr> + </tbody> + </table> + </li> + </ol> + </li> +</ol> + +<h2 id="Background_Properties" name="Background_Properties">배경 속성</h2> + +<p>아래와 같은 속성을 가지는 배경은...</p> + +<pre class="brush:css notranslate">background-color: #000; +background-image: url(images/bg.gif); +background-repeat: no-repeat; +background-position: top right;</pre> + +<p>다음과 같이 선언 단 하나를 사용해서 단축할 수 있습니다.</p> + +<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat top right;</pre> + +<p>(단축 형은 실제로 <code>background-attachment: scroll</code> 및 CSS3의 일부 부가 속성이 더해진 위 본디 속성과 같습니다.)</p> + +<p>{{cssxref("background")}}에서 CSS3 속성을 포함한 더 자세한 정보를 확인할 수 있습니다.</p> + +<h2 id="Font_Properties" name="Font_Properties">글꼴 속성</h2> + +<p>아래와 같은 속성을 가지는 글꼴은...</p> + +<pre class="brush:css notranslate">font-style: italic; +font-weight: bold; +font-size: .8em; +line-height: 1.2; +font-family: Arial, sans-serif;</pre> + +<p>다음처럼 단축할 수 있습니다.</p> + +<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre> + +<p>이 단축 선언은 실제로 <code>font-variant: normal</code> 및 <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3)이 더해진 위 본디 속성과 같습니다.</p> + +<h2 id="Border_Properties" name="Border_Properties">테두리 속성</h2> + +<p>테두리의 너비, 색상, 스타일을 하나의 선언으로 단축할 수 있습니다. 즉 아래와 같은 CSS를...</p> + +<pre class="brush:css notranslate">border-width: 1px; +border-style: solid; +border-color: #000;</pre> + +<p>다음처럼 단축할 수 있습니다.</p> + +<pre class="brush:css notranslate">border: 1px solid #000;</pre> + +<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">여백 속성</h2> + +<p>바깥과 안쪽 여백의 단축 속성도 똑같이 동작합니다. 바깥 여백, <code>margin</code> 속성은 한 개, 두 개, 세 개, 네 개의 값을 사용해 지정합니다. 아래 CSS 선언은...</p> + +<pre class="brush:css notranslate">margin-top: 10px; +margin-right: 5px; +margin-bottom: 10px; +margin-left: 5px;</pre> + +<p>다음의 네 값 구문 단축 속성을 사용한 선언과 같습니다. 방향이 시계 방향임을 기억하세요. 각 값은 위, 오른쪽, 아래, 왼쪽을 나타냅니다.</p> + +<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre> + +<p>바깥 여백의 한 개, 두 개, 세 개, 네 개 값 선언 규칙은 다음과 같습니다.</p> + +<ul> + <li><strong>한 개의 값</strong>은 모든 네 면의 여백을 설정합니다.</li> + <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 여백을 설정합니다.</li> + <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 여백을 설정합니다.</li> + <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 여백을 지정합니다. (시계방향)</li> +</ul> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>단축 속성: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li> +</ul> diff --git a/files/ko/web/css/specificity/index.html b/files/ko/web/css/specificity/index.html new file mode 100644 index 0000000000..609f319daa --- /dev/null +++ b/files/ko/web/css/specificity/index.html @@ -0,0 +1,331 @@ +--- +title: 명시도 +slug: Web/CSS/Specificity +tags: + - CSS + - Example + - Guide + - Reference + - Web +translation_of: Web/CSS/Specificity +--- +<div>{{cssref}}</div> + +<p><strong>명시도</strong>란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 <a href="/ko/docs/Web/CSS/CSS_Reference#Selectors" title="CSS selectors">CSS 선택자</a>로 구성된 일치 규칙에 기반합니다.</p> + +<h2 id="어떻게_계산되는가">어떻게 계산되는가?</h2> + +<p>명시도는 주어진 CSS 선언에 적용되는 가중치(weight)로, 일치하는 선택자 내 각 <a href="#selector-type">선택자 유형</a>의 수에 의해 결정됩니다. 여러 선언이 명시도가 같은 경우, CSS에서 맨 끝에 오는 선언이 요소에 적용됩니다. 명시도는 같은 요소가 여러 선언의 대상이 되는 경우에만 적용합니다. CSS 규칙에 따라 <a href="#directly-targeted-elements" title="directly targeted element">직접 대상 요소</a>는 요소가 부모로부터 상속받는 규칙보다 항상 우선합니다.</p> + +<div class="note"><strong>주의:</strong> 문서 트리 내 <a href="#tree-proximity-ignorance">요소의 근접도(proximity, 가까움)</a>는 명시도에 영향이 없습니다.</div> + +<h3 id="선택자_유형">선택자 유형</h3> + +<p>아래 선택자는 유형별로 명시도를 증가시킵니다.</p> + +<ol> + <li><a href="/ko/docs/Web/CSS/Type_selectors">유형 선택자</a>(<code>h1</code> 등) 및 의사 요소(<code>:before</code> 등).</li> + <li><a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a>(<code>.example</code> 등), 속성 선택자(<code>[type="radio"]</code> 등), 의사 클래스(<code>:hover</code> 등).</li> + <li><a href="/ko/docs/Web/CSS/ID_selectors">ID 선택자</a>(<code>#example</code> 등).</li> +</ol> + +<p>전역 선택자({{cssxref("Universal_selectors", "*")}}), 조합자({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator">'<code> </code>'</a>, {{CSSxRef("Column_combinator", "||")}}) 및 부정 의사 클래스(<code>:not()</code>)는 명시도에 영향을 주지 않습니다. (<code>:not()</code> <em>내부에</em> 선언한 선택자는 영향을 끼칩니다)</p> + +<p><a href="https://specifishity.com">https://specifishity.com</a>에서 자세한 정보를 확인할 수 있습니다.</p> + +<p>요소에 추가한 인라인 스타일(<code>style="font-weight: bold"</code>처럼)은 항상 외부 스타일시트의 모든 스타일을 덮어쓰므로 가장 높은 명시도를 갖는 것으로 생각할 수 있습니다.</p> + +<h3 id="!important_예외"><code>!important</code> 예외</h3> + +<p><code>!important</code> 규칙이 스타일 선언에 사용된 경우, 이 선언은 다른 선언보다 우선합니다. 엄밀히 말해 <code>!important</code> 자체는 명시도와 아무 관련이 없지만, 명시도에 직접 영향을 미칩니다. 그러나 <code>!important</code> 사용은 <strong>나쁜 습관</strong>이고 스타일시트 내 자연스러운 <a href="/ko/docs/Web/CSS/Cascade" title="cascading">종속</a>을 깨뜨려 디버깅을 더 어렵게 만들기에 피해야 합니다. <code>!important</code> 규칙으로 충돌하는 두 선언이 같은 요소에 적용된 경우, 더 큰 명시도를 갖는 선언이 적용됩니다.</p> + +<p><strong>몇몇 경험 법칙들:</strong></p> + +<ul> + <li><strong>항상</strong> !important를 고려하기도 전에 명시도를 활용할 방법을 찾아보세요.</li> + <li>외부 CSS(Bootstrap 또는 Normalize.css 같은 외부 라이브러리에서)를 재정의하는 페이지 전용 CSS에<strong>만</strong> <code>!important</code>를 쓰세요.</li> + <li>플러그인/매시업을 작성할 때 <code>!important</code>는 <strong>절대</strong> 쓰지 마세요.</li> + <li>사이트 전반 CSS에는 <code>!important</code>를 <strong>절대</strong> 쓰지 마세요.</li> +</ul> + +<p><strong><code>!important</code>를 사용하는 대신에, 다음을 고려하세요:</strong></p> + +<ol> + <li>CSS 종속<sup>cascading</sup>을 더 잘 활용하세요.</li> + <li> + <p>더 명시된(명확한) 규칙을 쓰세요. 선택 중인 요소 앞에 하나 이상의 요소를 나타냄으로써 규칙은 더 명확해지고 더 높은 우선 순위를 얻습니다:</p> + + <pre class="brush: html"><div id="test"> + <span>Text</span> +</div> +</pre> + + <pre class="brush: css">div#test span { color: green; } +div span { color: blue; } +span { color: red; }</pre> + + <p>순서와 무관하게 첫 번째 규칙이 가장 명확하므로 텍스트는 녹색이 됩니다. (또한, 역시 순서와 무관하게 파란색 규칙이 빨간색 규칙보다 우선합니다.)</p> + </li> + <li>(2)의 말도 안 되는 특별한 경우로, 더 이상 명시할 요소가 없는 경우 간단한 선택자를 여러 번 써서 명시도를 높일 수 있습니다. + <pre class="brush: css">#myId#myId span { color: yellow; } +.myClass.myClass span { color: orange; }</pre> + </li> +</ol> + +<h4 id="!important를_사용하는_때"><code>!important</code>를 사용하는 때</h4> + +<h5 id="A_인라인_스타일을_재정의할_때">A) 인라인 스타일을 재정의할 때</h5> + +<p>사이트 전체의 시각적 요소를 설정하는 전역 CSS 파일은 각 요소에 직접 정의된 인라인 스타일에 덮어쓰일 수 있습니다. 인라인 스타일과 <code>!important</code> 모두 매우 나쁜 습관으로 취급되지만, 가끔씩은 <code>!important</code>로 인라인 스타일을 덮어써야 할 때가 있습니다.</p> + +<p>이때는 전역 CSS 파일의 몇몇 스타일을 <code>!important</code>로 설정해서 요소에 직접 작성한 인라인 스타일을 덮어쓸 수 있습니다.</p> + +<pre class="brush: html"><div class="foo" style="color: red;">나는 무슨 색일까?</div> +</pre> + +<pre class="brush: css">.foo[style*="color: red"] { + color: firebrick !important; +} +</pre> + +<p>여러 자바스크립트 프레임워크와 라이브러리에서 인라인 스타일을 추가합니다. 이런 인라인 스타일을 덮어쓸 때 매우 구체적인 선택자와 함께 <code>!important</code>를 사용할 수 있습니다.</p> + +<h5 id="B_명시도가_높은_규칙을_재정의할_때">B) 명시도가 높은 규칙을 재정의할 때</h5> + +<pre class="brush: css">#someElement p { + color: blue; +} + +p.awesome { + color: red; +}</pre> + +<p>어떻게 하면 <code>awesome</code> 문단이 <code>#someElement</code> 안에 있더라도 항상 빨갛게 만들 수 있을까요? <code>!important</code>를 사용하지 않으면 위쪽 규칙의 명시도가 높으므로 아래쪽 규칙보다 우선합니다.</p> + +<h4 id="!important를_덮어쓰는_방법"><code>!important</code>를 덮어쓰는 방법</h4> + +<p>A) 태그, ID나 클래스를 추가함으로써 명시도가 더 높은 !important한 CSS 규칙을 만듭니다.</p> + +<pre class="brush: css">table td { height: 50px !important; } +.myTable td { height: 50px !important; } +#myTable td { height: 50px !important; } +</pre> + +<p>B) 혹은 기존의 선택자 아래에 똑같은 선택자를 하나 더 만듭니다(명시도가 같으면 나중에 정의된 규칙이 우선하므로).</p> + +<pre class="brush: css">td { height: 50px !important; }</pre> + +<p>C) 아니면 기존 규칙을 수정해서 아예 <code>!important</code>를 사용하지 않게 만드는 것이 더 좋은 방법입니다.</p> + +<pre class="brush: css">[id="someElement"] p { + color: blue; +} + +p.awesome { + color: red; +}</pre> + +<p>ID를 ID 선택자 대신 속성 선택자로 선택하면 클래스 1개와 같은 명시도가 됩니다. 두 선택자의 명시도가 같아졌으므로 나중에 오는 규칙이 우선합니다.</p> + +<h4 id="아래에서_자세한_정보를_확인하세요">아래에서 자세한 정보를 확인하세요:</h4> + +<ul> + <li><a href="https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css</a></li> + <li><a href="https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean</a></li> + <li><a href="https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css</a></li> + <li><a href="https://stackoverflow.com/questions/11178673/how-to-override-important">https://stackoverflow.com/questions/11178673/how-to-override-important</a></li> + <li><a href="https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css</a></li> +</ul> + +<h3 id="is_및_not_예외"><code>:is()</code> 및 <code>:not()</code> 예외</h3> + +<p>모두 일치 의사 클래스 {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} 및 부정 의사 클래스 {{CSSxRef(":not", ":not()")}}은 명시도 계산에서 의사 클래스로 취급되지 <em>않습니다</em>. 그러나 이들 의사 클래스 안에 명시된 선택자는 <a href="#selector-type" title="selector types">선택자 유형</a>의 수를 결정할 때 일반 선택자로 셉니다.</p> + +<p>다음 CSS 조각과 HTML은...</p> + +<pre class="brush: css">div.outer p { + color:orange; +} +div:not(.outer) p { + color: lime; +} +</pre> + +<pre class="brush: html"><div class="outer"> + <p>This is in the outer div.</p> + <div class="inner"> + <p>This text is in the inner div.</p> + </div> +</div> +</pre> + +<p>...다음과 같이 화면에 표시됩니다.</p> + +<p>{{EmbedLiveSample('is_및_not_예외','600','100')}}</p> + +<h3 id="The_where_exception" name="The_where_exception"><code>:where()</code> 예외 {{Experimental_Inline}}</h3> + +<p>{{SeeCompatTable}}</p> + +<p>명시도 조정 가상 클래스 {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}의 명시도는 항상 0입니다.</p> + +<p>다음 CSS 조각과 HTML은...</p> + +<pre class="brush: css">div:where(.outer) p { + color: orange; +} + +div p { + color: blueviolet; +} +</pre> + +<div class="hidden"> +<pre class="brush: css;">#no-where-support { + margin: 0.5em; + border: 1px solid red; +} + +#no-where-support:where(*) { + display: none !important; +} +</pre> +</div> + +<div class="hidden"> +<pre class="brush: html;"><div id="no-where-support"> +⚠️ Your browser doesn't support the <code><a href="https://developer.mozilla.org/docs/Web/CSS/:where" target="_top">:where()</a></code> pseudo-class. +</div> +</pre> +</div> + +<pre class="brush: html"><div class="outer"> + <p>This is in the outer div.</p> + <div class="inner"> + <p>This text is in the inner div.</p> + </div> +</div> +</pre> + +<p>...다음과 같이 화면에 표시됩니다.</p> + +<p>{{EmbedLiveSample('The_where_exception','600','100')}}</p> + +<h3 id="형태_기반_명시도">형태 기반 명시도</h3> + +<p>명시도는 선택자의 형태(form)를 기반으로 합니다. 아래에서 선택자 <code>*[id="foo"]</code>는 그 자체로는 ID를 선택하지만 선택자의 명시도를 계산할 때는 속성 선택자로 취급됩니다.</p> + +<p>다음 스타일 선언과 마크업은...</p> + +<pre class="brush: css">*#foo { + color: green; +} +*[id="foo"] { + color: purple; +} +</pre> + +<pre class="brush: html"><p id="foo">I am a sample text.</p> +</pre> + +<p>...다음과 같이 표시됩니다.</p> + +<p>{{EmbedLiveSample('형태_기반_명시도','600','100')}}</p> + +<p>같은 요소와 일치하지만 ID 선택자는 더 높은 명시도를 갖기 때문입니다.</p> + +<h3 id="트리_근접도_무시"><a id="tree-proximity-ignorance" name="tree-proximity-ignorance">트리 근접도 무시</a></h3> + +<p>요소와 주어진 선택자로 참조된 다른 요소와의 근접도(proximity)는 명시도에 영향을 주지 않습니다.</p> + +<p>다음 스타일 선언과 HTML은...</p> + +<pre class="brush: css">body h1 { + color: green; +} +html h1 { + color: purple; +} +</pre> + +<pre class="brush: html"><html> +<body> + <h1>Here is a title!</h1> +</body> +</html> +</pre> + +<p>...아래와 같이 렌더링됩니다.</p> + +<p>{{EmbedLiveSample('트리_근접도_무시','600','100')}}</p> + +<p>두 선언은 <a href="#selector-type">선택자 유형</a> 갯수가 같지만 <code>html h1</code> 선택자가 나중에 선언되었기 때문입니다.</p> + +<h3 id="직접_일치_요소와_상속된_스타일"><a id="directly-targeted-elements" name="directly-targeted-elements">직접 일치 요소와 상속된 스타일</a></h3> + +<p>특정한 요소와 직접적으로 일치하는 스타일은 상속된 규칙의 명시도와 무관하게 항상 상속된 스타일보다 우선합니다.</p> + +<p>다음 CSS와 HTML은...</p> + +<pre class="brush: css" style="font-size: 14px;">#parent { + color: green; +} +h1 { + color: purple; +}</pre> + +<pre class="brush: html" style="font-size: 14px;"><html> +<body id="parent"> + <h1>Here is a title!</h1> +</body> +</html></pre> + +<p>...역시 아래와 같이 렌더링됩니다.</p> + +<p>{{EmbedLiveSample('직접_일치_요소와_상속된_스타일','600','100')}}</p> + +<p><code>h1</code> 선택자는 특정한 요소와 직접 일치하지만 초록색 선택자는 그렇지 않고 부모로부터 상속되기 때문입니다.</p> + +<h2 id="명세">명세</h2> + +<div style="overflow: auto;"> +<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("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>명시도 조정 선택자 {{CSSxRef(":where", ":where()")}} 추가.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">의사 요소</a> 추가.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">의사 클래스</a> 추가.</td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#cascading-order", "Cascading order")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>초기 정의.</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>명시도 계산기: CSS 규칙을 테스트하고 이해할 수 있는 대화형 웹사이트 - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li> + <li>CSS3 선택자 명시도 - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/ko/web/css/specified_value/index.html b/files/ko/web/css/specified_value/index.html new file mode 100644 index 0000000000..fd7df79342 --- /dev/null +++ b/files/ko/web/css/specified_value/index.html @@ -0,0 +1,67 @@ +--- +title: 지정값 +slug: Web/CSS/specified_value +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/specified_value +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>지정값</strong>은 세 가지 방법 중 하나로 설정됩니다.</p> + +<ol> + <li>문서의 스타일시트가 속성값을 지정했다면 그러면 그 값이 사용됩니다. 예를 들어, {{cssxref("color")}} 속성이 <code>green</code> 으로 설정된 경우 대응하는 요소(element)의 텍스트 색은 녹색이 됩니다.</li> + <li>문서의 스타일시트가 값을 지정하지 않은 경우 부모 요소로부터 상속됩니다(가능하다면). 예를 들어, {{HTMLElement("div")}} 내부에 단락({{HTMLElement("p")}})이 있고 {{HTMLElement("div")}}의 CSS <code>font</code> 속성값이 "Arial", {{HTMLElement("p")}}가 정의된 <code>font</code> 속성이 없다면 Arial font가 상속됩니다.</li> + <li>위 중 어느 것도 이용할 수 없는 경우, CSS 스펙에 지정된 대로 요소의 초기값이 적용됩니다.</li> +</ol> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>My specified color is given explicitly in the CSS.</p> + +<div>The specified values of all my properties default to their + initial values, because none of them are given in the CSS.</div> + +<div class="fun"> + <p>The specified value of my font family is not given explicitly + in the CSS, so it is inherited from my parent. However, + the border is not an inheriting property.</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.fun { + border: 1px dotted pink; + font-family: fantasy; +} + +p { + color: green; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", 500, 220)}}</p> + +<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("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/syntax/index.html b/files/ko/web/css/syntax/index.html new file mode 100644 index 0000000000..3f64118f7a --- /dev/null +++ b/files/ko/web/css/syntax/index.html @@ -0,0 +1,79 @@ +--- +title: 구문 +slug: Web/CSS/Syntax +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/Syntax +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary">종속형 스타일 시트(<a href="/ko/docs/Web/CSS" title="CSS">CSS</a>) 언어의 기본 목표는 브라우저 엔진이 색상, 위치 지정 또는 장식과 같은 특정 기능을 사용하여 페이지에 요소를 그릴 수 있도록 하는 것입니다.</span> 이러한 목표 달성을 위해 만들어진 <em>CSS 구문</em>을 이루고 있는 기본 구성 요소는 다음과 같습니다.</p> + +<ul> + <li><strong>속성</strong>(property)은 {{glossary("identifier", "식별자")}}, 즉 사람이 읽을 수 있는 <em>이름</em>이며 어떠한 CSS 기능을 구현할 것인지 결정합니다.</li> + <li><strong>값</strong>(value)은 앞서 지정한 속성이 브라우저에 의해 어떤 식으로 나타나야 할지 기술합니다. 각 속성의 의미적 표현을 형식 문법으로 정의한 유효한 값 집합과 함께 브라우저 엔진이 구현합니다.</li> +</ul> + +<h2 id="CSS_선언">CSS 선언</h2> + +<p>CSS 속성을 특정 값으로 설정하는 것은 CSS 언어의 핵심 기능입니다. 속성과 값 쌍은 <strong>선언</strong>(declaration)이라 부르며, 모든 CSS 엔진은 적절하게 요소를 배열하고 스타일을 입히기 위해서 요소 하나하나마다 어떤 선언을 적용할지 계산합니다.</p> + +<p>CSS에서는 속성과 값 모두 대소문자를 구분합니다. 속성-값 쌍은 콜론, '<code>:</code>' (<code>U+003A COLON</code>)으로 구분하며 속성과 값 앞, 사이, 뒤에 오는 공백은 무시합니다.</p> + +<p><img alt="css syntax - declaration.png" class="default internal" src="/@api/deki/files/6164/=css_syntax_-_declaration.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>CSS는 <a href="/ko/docs/Web/CSS/CSS_Reference" title="/ko/docs/Web/CSS/CSS_Reference">100가지 이상의 속성</a>과 셀 수 없이 많은 값이 있습니다. 속성에 아무 값이나 넣는 것은 허용되지 않고, 대신 속성마다 유효한 값을 정의하고 있습니다. 주어진 속성에 대해 값이 유효하지 않은 경우, 그 선언은 부적합으로 간주하여 CSS 엔진이 완전히 무시합니다.</p> + +<h2 id="CSS_선언_블록">CSS 선언 블록</h2> + +<p>선언은 <strong>블록 </strong>단위로 이루어져 있습니다. 즉, 여는 중괄호, '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>) 및 닫는 중괄호, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>)로 구분된 구조 입니다. 어떤 경우엔 블록을 중첩할 수 있으므로 열고 닫는 중괄호가 서로 맞아야 합니다.</p> + +<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>이런 블록은 자연스럽게도 <strong>선언 블록</strong>이라고 부르며, 내부의 선언은 세미콜론, '<code>;</code>' (<code>U+003B SEMICOLON</code>)으로 구분합니다. 선언 블록은 아무런 선언도 들어가지 않은 빈 상태로도 존재할 수 있습니다. 선언 주위의 공백은 무시합니다. 마지막 선언에는 세미콜론을 생략해도 되지만, 다른 선언을 밑에다 덧붙여서 블록을 확장하면서 세미콜론 추가를 잊는 상황을 방지하기 위해 붙여주는 것이 <em>좋은 스타일</em>이라고 생각하는 경우가 자주 있기는 합니다.</p> + +<p>CSS 선언 블록을 시각화하면 다음과 같습니다.<img alt="css syntax - declarations block.png" class="default internal" src="https://mdn.mozillademos.org/files/17009/declaration-block.png" style="border: 1px solid black; height: 467px; padding: 1em; width: 1160px;"></p> + +<div class="note"><strong>참고:</strong> CSS 선언 블록의 콘텐츠, 즉 여닫는 중괄호 없이 세미콜론으로 분리한 선언 목록은 HTML {{htmlattrxref("style")}} 특성의 값으로 사용할 수 있습니다.</div> + +<h2 id="CSS_규칙집합">CSS 규칙집합</h2> + +<p>스타일 시트가 선언을 웹 페이지의 요소 하나씩에만 적용할 수 있다면 거의 쓸모가 없을 것입니다. 진짜 목표는 다양한 선언을 문서의 다양한 부분에 적용하는 것입니다.</p> + +<p>CSS에서는 선언 블록에 조건을 붙여 해결할 수 있습니다. 각 (유효한) 선언 블록은 페이지의 일부 요소를 선택하는 조건인 선택자(<em>selector</em>)가 선행됩니다. 선택자-선언 블록 쌍은 <strong>규칙집합</strong> 또는 종종 간단히 <strong>규칙</strong>이라고 합니다.</p> + +<p><img alt="css syntax - ruleset.png" class="default internal" src="https://mdn.mozillademos.org/files/17010/ruleset.png" style="border: 1px solid black; height: 334px; padding: 1em; width: 861px;"></p> + +<p>페이지 요소는 여러 선택자로 그리고 결국 주어진 속성을 서로 다른 값으로 여러 번 포함하는 여러 규칙에 의해 일치될 수 있기에, CSS 표준은 어느 게 다른 것보다 우선하고 적용되어야 하는 지를 정의합니다: 이를 종속(<a href="/ko/docs/Web/CSS/시작하기/종속과_상속" title="Cascading and inheritance">cascade</a>) 알고리즘이라고 합니다.</p> + +<div class="note">비록 선택자 그룹에 의해 특징지어진 규칙집합이 규칙집합을 각각 단일 선택자로 대체하는 일종의 단축(shorthand)일지라도, 이는 규칙집합 자체의 유효성에 적용되지는 않는다는 점에 유의하는 것이 중요합니다.<br> +<br> +이는 중요한 결과로 이어집니다: 단일 기본 선택자 하나가 무효한 경우, 무명(unknown) 가상 요소(pseudo-element) 또는 가상 클래스(pseudo-class)를 사용할 때처럼, 모든 <em>선택자</em>는 무효하고 따라서 전체 규칙은 무시됩니다(유효하지도 않기에).</div> + +<h2 id="CSS_문">CSS 문</h2> + +<p>규칙집합은 종종 큰 규칙집합 목록만으로 구성된 스타일 시트의 주요 구성 블록입니다. 하지만 문자 집합, import하려는 다른 외부 스타일 시트, 글꼴 모양 또는 목록 카운터 설명 및 더 많은 것처럼 웹 제작자가 스타일 시트에서 전하고 싶은 다른 정보가 있습니다. 이를 위해 다른 특정 종류의 문을 사용합니다.</p> + +<p><strong>문</strong>은 비 공백 문자로 시작하여 첫 번째 닫는 중괄호 또는 세미콜론 (문자열 외에, 이스케이프되지 않고 다른 {}, () 및 [] 쌍에 포함되지 않는) 으로 끝나는 구성 블록입니다.</p> + +<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p> + +<p>다음과 같은 다른 종류의 문이 있습니다:</p> + +<ul> + <li>본 것처럼, CSS 선언의 컬렉션과 선택자에 의해 기술된 조건을 연결짓는 <strong>규칙집합</strong> (또는 <em>규칙</em>).</li> + <li>at 기호, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>)로 시작하고 그런 다음 문의 끝, 즉 블록 밖 다음 세미콜론(;) 또는 다음 블록의 끝까지 계속 식별자가 뒤따르는 <strong>At-규칙</strong>. 식별자에 의해 정의된 각 유형의 <a href="/ko/docs/Web/CSS/At-rule" title="At-rule">at-규칙</a>은, 물론 자체 내부 구문 및 의미(semantics)가 있을 수 있습니다. 그들은 메타 데이터 정보({{ cssxref("@charset") }} 또는 {{ cssxref("@import") }} 같은), 조건부 정보({{ cssxref("@media") }} 또는 {{ cssxref("@document") }} 같은) 또는 설명 정보({{ cssxref("@font-face") }} 같은)를 전달하는 데 사용됩니다.</li> +</ul> + +<p>규칙집합 또는 at-규칙이 아닌 모든 문은 유효하지 않고 무시됩니다.</p> + +<p>또 다른 문 그룹, <strong>중첩 문</strong>이 있습니다, 이들은 at-규칙, <em>조건부 그룹 규칙</em>의 특정 부분집합에서 사용될 수 있는 문입니다. 이러한 문은 오직 특정 조건이 일치되면 적용합니다: <code>@media</code> at-규칙 콘텐츠는 브라우저가 돌아가는 장치가 표현된 조건과 일치하는 경우에만 적용됩니다. 반면 <code>@document</code> at-규칙 콘텐츠는 현재 페이지가 일부 조건과 일치하는 경우에만 적용됩니다, 등등. CSS1 및 CSS2.1에서는, <em>규칙집합</em>만이 조건부 그룹 규칙 내에서 사용될 수 있습니다. 그것은 매우 제한됐고 이 제한은 <a href="/ko/docs/Web/CSS/CSS3#Conditionals" title="CSS Conditionals Level 3"><em>CSS Conditionals 레벨 3</em></a>에서 해제되었습니다. 현재, 여전히 실험 중이고 모든 브라우저에서 지원되지는 않지만, 조건부 그룹 규칙은 광범위한 콘텐츠, 규칙집합뿐만 아니라 전부는 아니지만 일부 at-규칙을 포함할 수 있습니다.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{ CSS_key_concepts()}}</li> +</ul> diff --git a/files/ko/web/css/tab-size/index.html b/files/ko/web/css/tab-size/index.html new file mode 100644 index 0000000000..ad29994f53 --- /dev/null +++ b/files/ko/web/css/tab-size/index.html @@ -0,0 +1,121 @@ +--- +title: tab-size +slug: Web/CSS/tab-size +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/tab-size +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>tab-size</code></strong> 속성은 탭 문자(U+0009)의 너비를 조절합니다.</span></p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* <integer> 값 */ +tab-size: 4; +tab-size: 0; + +/* <length> 값 */ +tab-size: 10px; +tab-size: 2em; + +/* 전역 값 */ +tab-size: inherit; +tab-size: initial; +tab-size: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt>{{CSSxRef("<integer>")}}</dt> + <dd>공백 문자(U+0020)에 대한 탭 문자의 상대적인 너비. 0 이상의 정수여야 합니다.</dd> + <dt>{{CSSxRef("<length>")}}</dt> + <dd>탭 문자의 너비. 양의 값이어야 합니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="글자_수로_정의">글자 수로 정의</h3> + +<pre class="brush: css notranslate">pre { + tab-size: 4; /* Set tab size to 4 characters wide */ +} +</pre> + +<h3 id="탭_제거">탭 제거</h3> + +<pre class="brush: css notranslate">pre { + tab-size: 0; /* Remove indentation */ +} +</pre> + +<h3 id="기본_크기와_비교">기본 크기와 비교</h3> + +<p>다음 예제는 기본 탭 크기를 사용자 지정 탭 크기와 비교합니다. {{cssxref("white-space")}} 속성을 <code>pre</code>로 설정해서 탭 문자가 접히지 않도록 했습니다.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>no tab</p> +<p>&#0009;default tab size of 8 characters wide</p> +<p class="custom">&#0009;custom tab size of 3 characters wide</p> +<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">p { + white-space: pre; +} + +.custom { + tab-size: 3; + -moz-tab-size: 3; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('기본_크기와_비교')}}</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('CSS3 Text', '#tab-size-property', 'tab-size')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.tab-size")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Controlling size of a tab character (U+0009)</cite></a>, Anne van Kesteren이 CSSWG에 보낸 이메일.</li> +</ul> diff --git a/files/ko/web/css/text-align/index.html b/files/ko/web/css/text-align/index.html new file mode 100644 index 0000000000..630a0c0881 --- /dev/null +++ b/files/ko/web/css/text-align/index.html @@ -0,0 +1,234 @@ +--- +title: text-align +slug: Web/CSS/text-align +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/text-align +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>text-align</code></strong> 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다.</span> 즉 {{cssxref("vertical-align")}}과 동일하나 세로가 아닌 가로 방향으로 동작합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */ +text-align: left; +text-align: right; +text-align: center; +text-align: justify; +text-align: justify-all; +text-align: start; +text-align: end; +text-align: match-parent; + +/* 표 열의 문자 기반 정렬 */ +text-align: "."; +text-align: "." center; + +/* 블록 정렬 값 (비표준 구문) */ +text-align: -moz-center; +text-align: -webkit-center; + +/* 전역 값 */ +text-align: inherit; +text-align: initial; +text-align: unset; +</pre> + +<p><code>text-align</code> 속성은 다음 방법 중 하나를 사용해 지정합니다.</p> + +<ul> + <li><code><a href="#start">start</a></code>, <code><a href="#end">end</a></code>, <code><a href="#left">left</a></code>, <code><a href="#right">right</a></code>, <code><a href="#center">center</a></code>, <code><a href="#justify">justify</a></code>, <code><a href="#justify-all">justify-all</a></code>, <code><a href="#match-parent">match-parent</a></code> 키워드 중 하나.</li> + <li><code><a href="#string"><string></a></code> 값만 사용. 다른 값은 <code><a href="#right">right</a></code>을 사용하게 됩니다.</li> + <li>키워드 값과 <code><a href="#string"><string></a></code> 값 모두 사용.</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt id="start"><code>start</code> {{experimental_inline}}</dt> + <dd>쓰기 방식이 좌횡서면 <code>left</code>와 같고, 우횡서면 <code>right</code>과 같습니다.</dd> + <dt id="end"><code>end</code> {{experimental_inline}}</dt> + <dd>쓰기 방식이 좌횡서면 <code>right</code>과 같고, 우횡서면 <code>left</code>와 같습니다.</dd> + <dt id="left"><code>left</code></dt> + <dd>인라인 콘텐츠를 줄 상자의 왼쪽 모서리로 정렬합니다.</dd> + <dt id="right"><code>right</code></dt> + <dd>인라인 콘텐츠를 줄 상자의 오른쪽 모서리로 정렬합니다.</dd> + <dt id="center"><code>center</code></dt> + <dd>인라인 콘텐츠를 줄 상자의 가운데로 정렬합니다.</dd> + <dt id="justify"><code>justify</code></dt> + <dd>인라인 콘텐츠를 양쪽 정렬합니다. 마지막 줄을 제외하고, 줄 상자의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄웁니다.</dd> + <dt id="justify-all"><code>justify-all</code> {{experimental_inline}}</dt> + <dd><code>justify</code>와 같지만 마지막 줄에도 적용합니다.</dd> + <dt id="match-parent"><code>match-parent</code> {{experimental_inline}}</dt> + <dd><code>inherit</code>과 비슷하지만, <code>start</code>와 <code>end</code> 값을 부모의 {{cssxref("direction")}}에 맞춰 적절한 <code>left</code>와 <code>right</code> 값으로 치환합니다.</dd> + <dt id="string">{{cssxref("<string>")}} {{experimental_inline}}</dt> + <dd>표 칸에 적용할 경우, 칸의 콘텐츠를 해당 문자에 맞춰 정렬합니다.</dd> +</dl> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>양쪽 정렬 적용 시 생기는 불규칙한 여백은 난독증 등 인지력 저하를 겪고 있는 사용자에게 문제가 될 수 있습니다.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="왼쪽_정렬">왼쪽 정렬</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight:[2] notranslate">.example { + text-align: left; + border: solid; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample("왼쪽_정렬","100%","100%")}}</p> + +<h3 id="가운데_정렬">가운데 정렬</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; highlight:[2] notranslate">.example { + text-align: center; + border: solid; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample("가운데_정렬","100%","100%")}}</p> + +<h3 id="양쪽_정렬">양쪽 정렬</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><p class="example"> + Integer elementum massa at nulla placerat varius. + Suspendisse in libero risus, in interdum massa. + Vestibulum ac leo vitae metus faucibus gravida ac in neque. + Nullam est eros, suscipit sed dictum quis, accumsan a ligula. +</p></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css; highlight:[2] notranslate">.example { + text-align: justify; + border: solid; +}</pre> + +<h4 id="결과_3">결과</h4> + +<p>{{EmbedLiveSample("양쪽_정렬","100%","100%")}}</p> + +<h3 id="참고">참고</h3> + +<p>인라인 콘텐츠를 가운데 정렬하지 않고 자신을 정렬하는 법은 {{cssxref("margin")}}을 <code>auto</code>로 설정하는 것입니다.</p> + +<pre class="brush: css notranslate">.something { + margin: auto; +} +</pre> + +<pre class="brush: css notranslate">.something { + margin: 0 auto; +} +</pre> + +<pre class="brush: css notranslate">.something { + margin-left: auto; + margin-right: auto; +} +</pre> + +<ul> +</ul> + +<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 Logical Properties', '#text-align', 'text-align')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td> + <td>{{Spec2('CSS4 Text')}}</td> + <td>Added the <code><string></code> value.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Added the <code>start</code>, <code>end</code>, and <code>match-parent</code> values. Changed the unnamed initial value to <code>start</code> (which it was).</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.text-align")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref("margin","margin: auto")}}, {{Cssxref("margin-left","margin-left: auto")}}, {{Cssxref("vertical-align")}}</li> +</ul> diff --git a/files/ko/web/css/text-decoration/index.html b/files/ko/web/css/text-decoration/index.html new file mode 100644 index 0000000000..579bf26670 --- /dev/null +++ b/files/ko/web/css/text-decoration/index.html @@ -0,0 +1,133 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - CSS + - CSS Property + - CSS Text Decoration + - Reference +translation_of: Web/CSS/text-decoration +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>text-decoration</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 글씨의 장식(선) 색을 지정합니다.</span> {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}}, {{cssxref("text-decoration-thickness")}}속성 값을 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div> + + + +<p>글씨 장식은 모든 하위 텍스트 요소에 적용됩니다. 따라서 자식 요소는 부모가 적용한 장식을 제거할 수 없습니다. 예를 들어 <code><p>이 문단에 <em>강조 표시</em>가 있어요.</p></code> 마크업에 <code>p { text-decoration: underline; }</code> 스타일을 적용하면 전체 문단에 밑줄이 쳐집니다. <code>em { text-decoration: none; }</code>을 추가하더라도 아무 변화도 일어나지 않습니다. 다만 <code>em { text-decoration: overline; }</code> 스타일은 "강조 표시"가 윗줄과 밑줄 모두 갖게 합니다.</p> + +<h2 id="구문">구문</h2> + +<p id="Values"><code>text-decoration</code> 속성은 한 개 이상의 공백으로 구분한 값으로 지정할 수 있습니다. 각각의 값은 본디 속성에서 사용하는 값입니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt>{{cssxref("text-decoration-line")}}</dt> + <dd><code>underline</code>, <code>line-through</code> 등 장식의 종류.</dd> + <dt>{{cssxref("text-decoration-color")}}</dt> + <dd>장식의 색.</dd> + <dt>{{cssxref("text-decoration-style")}}</dt> + <dd><code>solid</code>, <code>wavy</code>, <code>dashed</code> 등 장식의 스타일.</dd> + <dt>{{cssxref("text-decoration-thickness")}}</dt> + <dd>요소를 꾸미는데 사용되는 선의 두께를 설정합니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">.under { + text-decoration: underline red; +} + +.over { + text-decoration: wavy overline lime; +} + +.line { + text-decoration: line-through; +} + +.plain { + text-decoration: none; +} + +.underover { + text-decoration: dashed underline overline; +} + +.thick { + text-decoration: solid underline purple 4px; +} + +.blink { + text-decoration: blink; +} +</pre> + +<pre class="brush: html"><p class="under">밑줄을 가진 글씨입니다.</p> +<p class="over">윗줄을 가진 글씨입니다.</p> +<p class="line">취소선을 가진 글씨입니다.</p> +<p>여기 링크는 기본값과 다르게 <a class="plain" href="#">밑줄이 없습니다</a>. + 사용자는 보통 하이퍼링크를 구분할 때 밑줄 여부로 판단하므로 + 지우기 전에 조심해야 합니다.</p> +<p class="underover">밑줄과 윗줄 모두 가진 글씨입니다.</p> +<p class="thick">이 글씨는 아주 두꺼운 보라색 밑줄을 표시합니다. (브라우저가 지원하는 경우)</p> +<p class="blink">이 글씨는 브라우저에 따라서 깜빡일 수 있어요.</p> +</pre> + +<p>{{EmbedLiveSample('Examples','auto','320')}}</p> + +<h2 id="명세">명세</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Text Decoration')}}</td> + <td>{{Spec2('CSS4 Text Decoration')}}</td> + <td>Adds {{cssxref("text-decoration-thickness")}}; note that this isn't yet officially part of the shorthand — this is as yet unspecified.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Transformed into a shorthand property. Added support for the value of {{cssxref('text-decoration-style')}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.text-decoration")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>The individual text-decoration properties are {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}.</li> + <li>The {{cssxref("list-style")}} attribute controls the appearance of items in HTML {{HTMLElement("ol")}} and {{HTMLElement("ul")}} lists.</li> +</ul> diff --git a/files/ko/web/css/text-shadow/index.html b/files/ko/web/css/text-shadow/index.html new file mode 100644 index 0000000000..17c04da65c --- /dev/null +++ b/files/ko/web/css/text-shadow/index.html @@ -0,0 +1,126 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - CSS + - Reference +translation_of: Web/CSS/text-shadow +--- +<div>{{CSSRef}}</div> + +<p><code><strong>text-shadow</strong></code> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 텍스트에 그림자(shadow)를 추가합니다. 텍스트와 그 장식에 적용 할 쉼표로 구분 된 그림자 목록을 허용합니다. 각 그림자는 요소, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 설명됩니다.</p> + +<p>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre><code>/* offset-x | offset-y | blur-radius | color */ +text-shadow: 1px 1px 2px black; + +/* color | offset-x | offset-y | blur-radius */ +text-shadow: #fc0 1px 0 10px; + +/* offset-x | offset-y | color */ +text-shadow: 5px 5px #558abb; + +/* color | offset-x | offset-y */ +text-shadow: white 2px 5px; + +/* offset-x | offset-y +/* Use defaults for color and blur-radius */ +text-shadow: 5px 10px; + +/* Global values */ +text-shadow: inherit; +text-shadow: initial; +text-shadow: unset;</code></pre> + +<p>This property is specified as a comma-separated list of shadows.</p> + +<p>Each shadow is specified as two or three <code><length></code> values, followed optionally by a <code><color></code> value. The first two <code><length></code> values are the <code><offset-x></code> and <code><offset-y></code> values. The third, optional, <code><length></code> value is the <code><blur-radius></code>. The<code><color></code> value is the shadow's color.</p> + +<p>When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.</p> + +<p>This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first-letter")}} <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>선택값(생략가능). 위치값(offset)이전/이후에 설정이 가능하다. 색상(color)값이 설정되지 않으면, 브라우저 기본값(UA-chosen color)이 사용된다. {{ note("만약 다양한 브라우저에서 동일하게 표현하고 싶다면, 특정 색상(color)을 지정할 것.") }}</dd> + <dt><code><offset-x> <offset-y></code></dt> + <dd>Required. These {{cssxref("<length>")}} values specify the shadow's distance from the text. <code><offset-x></code> specifies the horizontal distance; a negative value places the shadow to the left of the text. <code><offset-y></code> specifies the vertical distance; a negative value places the shadow above the text. If both values are <code>0</code>, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <code><blur-radius></code>.</dd> + <dt><code><blur-radius></code></dt> + <dd>Optional. This is a {{cssxref("<length>")}} value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to <code>0</code>.</dd> + <dt> + <h3 id="Formal_syntax">Formal syntax</h3> + + <pre>{{csssyntax}} +</pre> + + <h2 id="Examples">Examples</h2> + + <h3 id="Simple_shadow">Simple shadow</h3> + + <pre><code>.red-text-shadow { + text-shadow: red 0 -2px; +}</code></pre> + + <pre><code><p class="red-text-shadow">Sed ut perspiciatis unde omnis iste + natus error sit voluptatem accusantium doloremque laudantium, + totam rem aperiam, eaque ipsa quae ab illo inventore.</p></code></pre> + + <p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p> + + <h3 id="Multiple_shadows">Multiple shadows</h3> + + <pre><code>.white-text-with-blue-shadow { + text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; + color: white; + font: 1.5em Georgia, serif; +}</code></pre> + + <pre><code><p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste + natus error sit voluptatem accusantium doloremque laudantium, + totam rem aperiam, eaque ipsa quae ab illo inventore.</p></code></pre> + + <p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p> + + <h2 id="Specifications">Specifications</h2> + + <table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Specifies <code>text-shadow</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>The CSS property <code>text-shadow</code> was <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">improperly defined in CSS2</a> and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td> + </tr> + </tbody> + </table> + + <p id="Syntax">{{cssinfo}}</p> + + <h2 id="Browser_compatibility">Browser compatibility</h2> + + <p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + + <p>{{Compat("css.properties.text-shadow")}}</p> + + <h3 id="Quantum_CSS_notes">Quantum CSS notes</h3> + Gecko has a bug whereby {{cssxref("transition")}}s will not work when transitioning from a <code>text-shadow</code> with a color specified to a <code>text-shadow</code> without a color specified ({{bug(726550)}}). This has been fixed in Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planned for release in Firefox 57). + + <h2 id="See_also">See also</h2> + <a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow CSS Generator</a> - An interactive text shadow CSS generator. {{cssxref("box-shadow")}} The {{cssxref("<color>")}} data type (for specifying the shadow color) <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></dt> +</dl> diff --git a/files/ko/web/css/time/index.html b/files/ko/web/css/time/index.html new file mode 100644 index 0000000000..2a95bb99ea --- /dev/null +++ b/files/ko/web/css/time/index.html @@ -0,0 +1,88 @@ +--- +title: <time> +slug: Web/CSS/time +tags: + - CSS + - CSS Date Type + - Reference + - Web +translation_of: Web/CSS/time +--- +<div>{{CSSRef}}</div> + +<p><strong><code><time></code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 시간 값을 초나 밀리초 단위로 나타냅니다. {{cssxref("animation")}}, {{cssxref("transition")}}과 관련 속성에서 사용합니다.</p> + +<h2 id="구문">구문</h2> + +<p><code><time></code> 자료형은 {{cssxref("<number>")}}와, 그 뒤에 붙는 아래 단위 중 하나로 이루어져 있습니다. 선택 사항으로 하나의 <code>+</code> 또는 <code>-</code> 기호를 맨 앞에 붙일 수 있습니다. 다른 모든 수치와 마찬가지로 단위와 숫자 사이에는 공백이 없습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> <code>0</code>은 단위와 상관 없이 언제나 동일하지만 시간 단위를 생략할 수 없습니다. 즉 <code>0</code>은 유효하지 않은 구문이며 <code>0s</code>나 <code>0ms</code>를 나타내지 않습니다.</p> +</div> + +<h3 id="단위">단위</h3> + +<dl> + <dt><strong><code id="s">s</code></strong></dt> + <dd>시간을 초 단위로 나타냅니다. 예시: <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd> + <dt><strong><code id="ms">ms</code></strong></dt> + <dd>시간을 밀리초 단위로 나타냅니다. 예시: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code>.</dd> +</dl> + +<div class="note"> +<p><strong>참고:</strong> <code>s</code>와 <code>ms</code>의 변환은 <code>1s</code> = <code>1000ms</code>를 따릅니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="유효한_시간">유효한 시간</h3> + +<pre>12s 양의 정수 +-456ms 음의 정수 +4.3ms 정수 아닌 실수 +14mS 단위는 대소문자 구분을 하지 않지만, 대문자는 추천하지 않음 ++0s + 뒤의 0과 단위 +-0ms - 뒤의 0과 단위 +</pre> + +<h3 id="유효하지_않은_시간">유효하지 않은 시간</h3> + +<pre class="example-bad">0 <length>는 단위 없는 0을 받을 수 있지만, <time>은 불가능 +12.0 단위가 없으므로 <number>지만 <time>이 아님 +7 ms 수와 단위 사이에 공백은 불허 +</pre> + +<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('CSS4 Values','#time','<time>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values','#time','<time>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Normative definition of <code>s</code> and <code>ms</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1','aural.html#times','<time>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Informal definition of <code>s</code> and <code>ms</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.time")}}</p> diff --git a/files/ko/web/css/transform-function/index.html b/files/ko/web/css/transform-function/index.html new file mode 100644 index 0000000000..3c17fbba85 --- /dev/null +++ b/files/ko/web/css/transform-function/index.html @@ -0,0 +1,158 @@ +--- +title: <transform-function> +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Layout + - Reference +translation_of: Web/CSS/transform-function +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code><transform-function></code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 요소의 외형에 영향을 주는 변형을 나타냅니다. 변형 함수는 2D 또는 3D 공간 내에서 요소를 회전하고, 크기를 바꾸고, 왜곡하고, 이동할 수 있습니다. {{cssxref("transform")}} 속성에서 사용합니다.</p> + +<h2 id="변형을_수학적으로_표현하기">변형을 수학적으로 표현하기</h2> + +<p>HTML요소의 크기와 형태, 그리고 요소에 가해진 변형을 표현할 땐 다양한 좌표계를 사용할 수 있습니다. 가장 흔히 사용하는건 <a href="https://ko.wikipedia.org/wiki/%EC%A7%81%EA%B5%90_%EC%A2%8C%ED%91%9C%EA%B3%84">직교좌표계</a>이나, 가끔 <a href="https://ko.wikipedia.org/wiki/%EB%8F%99%EC%B0%A8%EC%A2%8C%ED%91%9C">동차좌표계</a>도 쓰입니다.</p> + +<h3 id="직교좌표"><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>직교좌표</h3> + +<p>직교좌표계 평면 위의 점은 X 좌표(가로 좌표)와 Y 좌표(세로 좌표)를 사용해 표현하며, 벡터 표현 <code>(x, y)</code>를 사용해 나타냅니다.</p> + +<p>CSS (및 다른 대부분의 컴퓨터 그래픽)에서, 원점 <code>(0, 0)</code>은 요소의 좌상단 꼭짓점을 가리킵니다. 양의 좌표는 원점의 오른쪽과 아래로 진행하고, 음의 좌표는 왼쪽과 위로 진행합니다. 따라서 오른쪽으로 2단위, 아래쪽으로 5단위에 위치한 점은 <code>(2, 5)</code>이고 왼쪽으로 3단위, 위쪽으로 12단위 나아간 점은 <code>(-3, -12)</code>입니다.</p> + +<h3 id="변형_함수">변형 함수</h3> + +<p>Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> </math></p> + +<p>The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p> + +<p>It is even possible to apply several transformations in a row:</p> + +<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p> + +<p>With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.</p> + +<p>However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p> + +<div class="note"> +<p><strong>참고:</strong> Though trickier than Cartesian coordinates, <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> lead to 3×3 transformation matrices, and can simply express translations as linear functions.</p> +</div> + +<h2 id="구문">구문</h2> + +<p>The <code><transform-function></code> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.</p> + +<h3 id="행렬_변형">행렬 변형</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt> + <dd>Describes a homogeneous 2D transformation matrix.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt> + <dd>Describes a 3D transformation as a 4×4 homogeneous matrix.</dd> +</dl> + +<h3 id="원근">원근</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt> + <dd>Sets the distance between the user and the z=0 plane.</dd> +</dl> + +<h3 id="회전">회전</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt> + <dd>Rotates an element around a fixed point on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt> + <dd>Rotates an element around a fixed axis in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt> + <dd>Rotates an element around the horizontal axis.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt> + <dd>Rotates an element around the vertical axis.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt> + <dd>Rotates an element around the z-axis.</dd> +</dl> + +<h3 id="크기_조절">크기 조절</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale()</a></code></dt> + <dd>Scales an element up or down on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></dt> + <dd>Scales an element up or down in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt> + <dd>Scales an element up or down horizontally.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt> + <dd>Scales an element up or down vertically.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt> + <dd>Scales an element up or down along the z-axis.</dd> +</dl> + +<h3 id="기울이기_왜곡">기울이기 (왜곡)</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skew">skew()</a></code></dt> + <dd>Skews an element on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt> + <dd>Skews an element in the horizontal direction.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt> + <dd>Skews an element in the vertical direction.</dd> +</dl> + +<h3 id="이동">이동</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate()</a></code></dt> + <dd>Translates an element on the 2D plane.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt> + <dd>Translates an element in 3D space.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt> + <dd>Translates an element horizontally.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt> + <dd>Translates an element vertically.</dd> + <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt> + <dd>Translates an element along the z-axis.</dd> +</dl> + +<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 Transforms 2', '#transform-functions', '<transform-function>')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Added 3D transform functions.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-functions', '<transform-function>')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.transform-function")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS {{cssxref("transform")}} 속성</li> +</ul> 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..cf9940c92a --- /dev/null +++ b/files/ko/web/css/transform-function/matrix()/index.html @@ -0,0 +1,89 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix() +translation_of: Web/CSS/transform-function/matrix() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>matrix()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 {{cssxref("<transform-function>")}} 데이터 타입입니다.</p> + +<div class="note"> +<p><strong>주의:</strong> <code>matrix(a, b, c, d, tx, ty)</code> 는 <code><a href="/ko/docs/Web/CSS/transform-function/matrix3d">matrix3d</a>(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code> 를 짧게 쓴 것입니다.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<p><code>matrix()</code> 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.</p> + +<div class="note"><strong>주의:</strong> 파이어폭스 16까지, Gecko(엔진) <code>tx</code>, <code>ty</code> 에{{cssxref("<length>")}} 값을 허용했습니다.</div> + +<pre class="syntaxbox notranslate">matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>) +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>a</code> <code>b</code> <code>c</code> <code>d</code></dt> + <dd>{{cssxref("<number>")}}는 선형 변환(linear transformation)을 설명합니다.</dd> + <dt><code>tx</code> <code>ty</code></dt> + <dd>{{cssxref("<number>")}}는 적용 할 이동(translation)을 설명합니다.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[a b c d tx ty]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Normal</div> +<div class="changed">Changed</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.changed { + transform: matrix(1, 2, -1, 1, 80, 80); + background-color: pink; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", 350, 350)}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>호환성 정보는 <code><a href="/ko/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> 데이터 타입을 확인하세요.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li> + <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li> +</ul> 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..7ef38655fe --- /dev/null +++ b/files/ko/web/css/transform-function/scalex()/index.html @@ -0,0 +1,101 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX() +translation_of: Web/CSS/transform-function/scaleX() +--- +<div>{{CSSRef}}</div> + +<p><a href="/en-US/docs/Web/CSS">CSS</a> 함수인 <strong><code>scaleX()</code></strong> x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는 {{cssxref("<transform-function>")}} 데이터 타입 입니다.</p> + +<p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p> + +<p>스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.<code>scaleX(-1)</code> 은 원점을 지나는 수직축이 있는 <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">대칭축</a>을 의미합니다 ( {{cssxref("transform-origin")}} 속성의해 지정되어집니다).</p> + +<div class="note"> +<p><strong>Note:</strong> <code>scaleX(sx)</code> 는 <code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale</a>(sx, 1)</code> 또는 <code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d</a>(sx, 1, 1)</code> 와 같습니다.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">scaleX(<em>s</em>) +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>s</code></dt> + <dd>요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 {{cssxref("<number>")}} 입니다.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th> + <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th> + <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[s 0 0 1 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Normal</div> +<div class="scaled">Scaled</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleX(0.6); + background-color: pink; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples","200","200")}}</p> + +<h2 id="Specifications">Specifications</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("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/ko/web/css/transform/index.html b/files/ko/web/css/transform/index.html new file mode 100644 index 0000000000..a270b6733b --- /dev/null +++ b/files/ko/web/css/transform/index.html @@ -0,0 +1,151 @@ +--- +title: transform +slug: Web/CSS/transform +tags: + - CSS + - CSS Property + - Reference + - transform +translation_of: Web/CSS/transform +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>transform</code></strong> 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.</span> <code>transform</code>은 CSS <a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a>의 좌표 공간을 변경합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div> + + + +<p><code>none</code>이 아닌 값을 지정하면 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 이 경우, {{cssxref("position")}}이 <code>fixed</code>거나 <code>absolute</code>인 요소의 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>으로서 작용합니다.</p> + +<div class="warning"> +<p>변형 가능한 요소만 <code>transform</code>할 수 있습니다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 <a href="/ko/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">비대체 인라인 박스</a>, <a href="/ko/docs/Web/HTML/Element/col">표 열 박스</a>, <a href="/ko/docs/Web/HTML/Element/colgroup">표 열 그룹 박스</a>를 제외한 요소에만 적용할 수 있습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css">/* 키워드 값 */ +transform: none; + +/* 함수 값 */ +transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); +transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); +transform: perspective(17px); +transform: rotate(0.5turn); +transform: rotate3d(1, 2.0, 3.0, 10deg); +transform: rotateX(10deg); +transform: rotateY(10deg); +transform: rotateZ(10deg); +transform: translate(12px, 50%); +transform: translate3d(12px, 50%, 3em); +transform: translateX(2em); +transform: translateY(3in); +transform: translateZ(2px); +transform: scale(2, 0.5); +transform: scale3d(2.5, 1.2, 0.3); +transform: scaleX(2); +transform: scaleY(0.5); +transform: scaleZ(0.3); +transform: skew(30deg, 20deg); +transform: skewX(30deg); +transform: skewY(1.07rad); + +/* 다중 함수 값 */ +transform: translateX(10px) rotate(10deg) translateY(5px); +transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); + +/* 전역 값 */ +transform: inherit; +transform: initial; +transform: unset;</pre> + +<p><code>transform</code> 속성은 키워드 <code>{{anch("none")}}</code> 또는 하나 이상의 <code>{{anch("<transform-function>")}}</code> 값을 사용해 지정할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt id="<transform-function>">{{cssxref("<transform-function>")}}</dt> + <dd>요소에 적용할 하나 이상의 <a href="/ko/docs/Web/CSS/transform-function">CSS 변형 함수</a>. 변형 함수는 왼쪽에서 오른쪽으로 곱해집니다. 즉, 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같습니다.</dd> + <dt id="none"><code>none</code></dt> + <dd>아무런 변형도 적용하지 않음.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<p>{{cssxref("transform-function/perspective", "perspective()")}}가 변형 함수의 일부라면 항상 제일 앞에 위치해야 합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Transformed element</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + border: solid red; + transform: translate(30px, 20px) rotate(20deg); + width: 140px; + height: 60px; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "400", "160")}}</p> + +<p><a href="/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 변형 사용하기</a>와 {{cssxref("<transform-function>")}} 문서를 방문해 더 많은 예제를 찾아보세요.</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>크기 변경/확대/축소 애니메이션은 흔한 편두통 유발 요인이므로 접근성에 좋지 않습니다. 그러나 꼭 넣어야 한다면 되도록 사이트 전체의 애니메이션을 켜거나 끌 수 있는 방법을 제공하는걸 고려해주세요.</p> + +<p>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 미디어 기능을 사용할 수도 있습니다. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">미디어 쿼리</a>와 함께 사용하면, 사용자가 시스템 설정에서 애니메이션을 줄였는지 알아내고, 애니메이션을 비활성화할 수 있습니다.</p> + +<p>자세한 내용은 다음 링크에서 확인할 수 있습니다.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN Understanding WCAG, Guideline 2.3 explanations</a></li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li> +</ul> + +<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 Transforms 2', '#transform-functions', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Adds 3D transform functions.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.transform")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">CSS 변형 사용하기</a></li> + <li>변형 함수의 설명을 담은 {{cssxref("<transform-function>")}} 자료형 문서.</li> + <li>CSS 변형 함수의 시각화가 가능한 온라인 도구: <a href="https://css-transform.moro.es/">CSS Transform Playground</a></li> +</ul> diff --git a/files/ko/web/css/transition-delay/index.html b/files/ko/web/css/transition-delay/index.html new file mode 100644 index 0000000000..17a8543321 --- /dev/null +++ b/files/ko/web/css/transition-delay/index.html @@ -0,0 +1,395 @@ +--- +title: transition-delay +slug: Web/CSS/transition-delay +translation_of: Web/CSS/transition-delay +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Summary">Summary</h2> + +<p><strong><code>transition-delay</code></strong> CSS 속성은 transition될 속성이 transition 요청을 받은 이후 실제로 <a href="/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">transition하기</a>까지 기다려야하는 시간의 양을 지정합니다.</p> + +<p>A value of <code>0s</code>, or <code>0ms</code>, indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.</p> + +<p>You may specify multiple delays; each delay will be applied to the corresponding property as specified by the {{cssxref("transition-property")}} property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (<code>0s</code>). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* <time> values */ +transition-delay: 3s; +transition-delay: 2s, 4ms; + +/* Global values */ +transition-delay: inherit; +transition-delay: initial; +transition-delay: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><time></code></dt> + <dd>Is a {{cssxref("<time>")}} denoting the amount of time to wait between a property's value changing and the start of the animation effect.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<div> +<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 0.5s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:0.5s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:0.5s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> +</div> + +<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 1s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:1s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:1s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_1s",275,150)}}</div> +</div> + +<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 2s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:2s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:2s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_2s",275,150)}}</div> +</div> + +<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 4s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:4s; + transition-timing-function: ease-in-out; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:4s; + transition-timing-function: ease-in-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_4s",275,150)}}</div> +</div> +</div> + +<h2 id="Specifications">Specifications</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('CSS3 Transitions', '#transition-delay', 'transition-delay')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 {{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td> + <td>10.0</td> + <td>11.6 {{property_prefix("-o")}}<br> + 12.10</td> + <td>3.0 {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>10.0 {{property_prefix("-o")}}<br> + 12.10<sup>[2]</sup></td> + <td>3.2 {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<p>[2] See <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">blog post about Opera 12.50</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Using CSS transitions</a></li> + <li>{{domxref("TransitionEvent")}}</li> +</ul> diff --git a/files/ko/web/css/transition/index.html b/files/ko/web/css/transition/index.html new file mode 100644 index 0000000000..039bedc362 --- /dev/null +++ b/files/ko/web/css/transition/index.html @@ -0,0 +1,150 @@ +--- +title: transition +slug: Web/CSS/transition +translation_of: Web/CSS/transition +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Summary">Summary</h2> + +<p><strong><code>transition</code></strong> <a href="/en/CSS" title="CSS">CSS </a>속성은 {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} 과 {{ cssxref("transition-delay") }}를 위한 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있습니다. 엘리먼트의 각 상태는 <a href="/ko/docs/Web/CSS/Pseudo-classes">가상 클래스</a> 를 사용해 정의된 {{cssxref(":hover")}} 이나 {{cssxref(":active")}} 또는 자바스크립트를 사용해 동적으로 만들어진 것들입니다.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Apply to 1 property */ +/* property name | duration */ +transition: margin-left 4s; + +/* property name | duration | delay */ +transition: margin-left 4s 1s; + +/* property name | duration | timing function | delay */ +transition: margin-left 4s ease-in-out 1s; + +/* Apply to 2 properties */ +transition: margin-left 4s, color 1s; + +/* Apply to all changed properties */ +transition: all 0.5s ease-out; + +/* Global values */ +transition: inherit; +transition: initial; +transition: unset; +</pre> + +<p>이 속성에서 각 항목의 순서는 중요합니다: 시간으로 해석될 수 있는 값이 첫번째에 위치한다면 {{cssxref("transition-duration")}} 로 적용되고, 두번째에 위치한다면 {{cssxref("transition-delay")}} 로 적용됩니다.</p> + +<p>속성값 목록이 알맞은 길이를 갖지 않는다면 어떻게 처리될지 궁금하다면 <a href="/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#속성값_목록이_다른_개수를_가진_경우">속성값 목록이 다른 개수를 가진 경우</a>를 참고하세요. 요컨대, 실제 속성의 개수보다 많이 기술된 것은 무시됩니다.</p> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p><a href="/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS 트랜지션 사용하기</a> 에 다양한 CSS transition 예제가 있습니다.</p> + +<h2 id="Specifications">Specifications</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('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 {{ property_prefix("-webkit") }}<br> + 26.0 <a href="http://googlechromereleases.blogspot.com/2013/03/stable-channel-update_26.html" title="Released on March 26, 2013">#</a></td> + <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}<sup>[1]</sup></td> + <td>10.0</td> + <td>10.1 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="Released on August 3, 2012">#</a></td> + <td>3.0 {{ property_prefix("-webkit") }}<br> + 6.1</td> + </tr> + <tr> + <td>Gradients<sup>[2]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}<sup>[1]</sup></td> + <td>10.0</td> + <td>10.0 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.2 {{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Gradients<sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> + +<p>[2] <a href="http://www.quirksmode.org/css/transitions/properties.html#t031">PPK test</a></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li> + <li>{{ domxref("TransitionEvent") }}</li> +</ul> diff --git a/files/ko/web/css/type_selectors/index.html b/files/ko/web/css/type_selectors/index.html new file mode 100644 index 0000000000..bcaf47c8b1 --- /dev/null +++ b/files/ko/web/css/type_selectors/index.html @@ -0,0 +1,86 @@ +--- +title: 유형 선택자 +slug: Web/CSS/Type_selectors +tags: + - CSS + - HTML + - Node + - Reference + - Selectors + - 선택자 +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>유형 선택자</strong>는 노드 이름을 사용해 요소를 선택합니다. 즉 문서 내에서 주어진 유형의 모든 요소를 선택합니다.</p> + +<pre class="brush: css notranslate">/* All <a> elements. */ +a { + color: red; +}</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">element { <em>style properties</em> } +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">span { + background-color: DodgerBlue; + color: #ffffff; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><span>텍스트를 가진 span입니다.</span> +<p>텍스트를 가진 p입니다.</p> +<span>또 다시 텍스트를 가진 span입니다.</span> +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제', 200, 150)}}</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('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.type")}}</p> diff --git a/files/ko/web/css/universal_selectors/index.html b/files/ko/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..3987c92504 --- /dev/null +++ b/files/ko/web/css/universal_selectors/index.html @@ -0,0 +1,105 @@ +--- +title: 전체 선택자 +slug: Web/CSS/Universal_selectors +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Universal_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>전체 선택자</strong>(<code>*</code>)는 모든 형태의 모든 요소를 선택합니다.</p> + +<pre class="brush: css notranslate">/* Selects all elements */ +* { + color: green; +} +</pre> + +<p>CSS 3부터는 별표를 {{cssxref("CSS_Namespaces", "네임스페이스")}}와 함께 사용할 수 있습니다.</p> + +<ul> + <li><code>ns|*</code> - 네임스페이스 ns 안의 모든 요소 선택</li> + <li><code>*|*</code> - 모든 요소 선택</li> + <li><code>|*</code> - 네임스페이스 없는 모든 요소 선택</li> +</ul> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox notranslate">* { <em>style properties</em> }</pre> + +<p>단순 선택자에서 별표는 선택사항입니다. 즉 <code>*.warning</code>과 <code>.warning</code>은 같습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">* [lang^=en] { + color: green; +} + +*.warning { + color: red; +} + +*#maincontent { + border: 1px solid blue; +} + +.floating { + float: left +} + +/* automatically clear the next sibling after a floating element */ +.floating + * { + clear: left; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p class="warning"> + <span lang="en-us">A green span</span> in a red paragraph. +</p> +<p id="maincontent" lang="en-gb"> + <span class="warning">A red span</span> in a green paragraph. +</p></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제')}}</p> + +<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('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>변화 없음</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>네임스페이스에 관한 행동이 정의되고 선택자 생략이 가상 요소 내에서 허용된다는 힌트가 추가됨</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.universal")}}</p> diff --git a/files/ko/web/css/unset/index.html b/files/ko/web/css/unset/index.html new file mode 100644 index 0000000000..f7e45d99da --- /dev/null +++ b/files/ko/web/css/unset/index.html @@ -0,0 +1,120 @@ +--- +title: unset +slug: Web/CSS/unset +tags: + - CSS + - CSS Cascade + - Layout + - Reference +translation_of: Web/CSS/unset +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">CSS <strong><code>unset</code></strong> 키워드를 적용한 속성은, 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>을 사용합니다.</span> 다르게 표현하자면, 전자일 땐 {{cssxref("inherit")}} 키워드처럼, 후자일 땐 {{cssxref("initial")}} 키워드처럼 동작합니다. {{cssxref("all")}} 단축 속성을 포함한 모든 속성에 사용할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="글자_색">글자 색</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>This text is red.</p> +<div class="foo"> + <p>This text is also red.</p> +</div> +<div class="bar"> + <p>This text is green (default inherited value).</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.foo { + color: blue; +} +.bar { + color: green; +} + +p { + color: red; +} +.bar p { + color: unset; +} +</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('글자_색') }}</p> + +<h3 id="테두리">테두리</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>This text has a red border.</p> +<div> + <p>This text has a red border.</p> +</div> +<div class="bar"> + <p>This text has has a black border (initial default, not inherited).</p> +</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">div { + border: 1px solid green; +} + +p { + border: 1px solid red; +} + +.bar p { + border-color: unset; +} +</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{ EmbedLiveSample('테두리', 'auto', 200) }}</p> + +<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('CSS4 Cascade', '#inherit-initial', 'unset') }}</td> + <td>{{ Spec2('CSS4 Cascade') }}</td> + <td>Level 3에서 변화 없음</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Cascade', '#unset', 'unset') }}</td> + <td>{{ Spec2('CSS3 Cascade') }}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.global_keywords.unset")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("initial")}}을 사용해 속성의 초깃값을 사용하세요.</li> + <li>{{cssxref("revert")}}를 사용해 사용자 에이전트가 지정한 값(또는 사용자가 수정한 값)으로 속성을 되돌리세요.</li> + <li>{{cssxref("inherit")}}을 사용해 속성의 값이 부모와 같도록 지정하세요.</li> + <li>{{cssxref("all")}} 속성을 사용하면 요소의 모든 속성을 한꺼번에 <code>initial</code>, <code>inherit</code>, <code>revert</code>, <code>unset</code>할 수 있습니다.</li> +</ul> diff --git a/files/ko/web/css/url/index.html b/files/ko/web/css/url/index.html new file mode 100644 index 0000000000..e4969a7e1a --- /dev/null +++ b/files/ko/web/css/url/index.html @@ -0,0 +1,79 @@ +--- +title: <url> +slug: Web/CSS/url +tags: + - CSS + - CSS Data Type + - Layout + - Reference +translation_of: Web/CSS/url +--- +<div>{{ CssRef() }}</div> + +<p><strong><code><url></code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">자료형</a>은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ cssxref("list-style") }} 등 다양한 속성에서 사용할 수 있습니다.</p> + +<div class="note"> +<p><strong>URI와 URL</strong> <a class="external" href="http://en.wikipedia.org/wiki/Uniform_Resource_Identifier" title="http://en.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a>와 <a class="external" href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator" title="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>은 다릅니다. URI는 단순히 리소스의 식별자입니다. URL은 URI의 종류 중 하나로, 리소스의 <u>위치</u>를 표현합니다. URI는 URL일 수도 있고, 리소스의 이름(<a class="external" href="http://en.wikipedia.org/wiki/Uniform_Resource_Name" title="http://en.wikipedia.org/wiki/Uniform_Resource_Name">URN</a>)일 수도 있습니다.</p> + +<p>CSS Level 1의 <code>url()</code> 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었습니다. 이로써 <code>url()</code>을 사용해 <code><uri></code> CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었습니다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 <code>url()</code>은 <code><url></code>만을 나타낼 수 있습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<p><code><url></code> 자료형은 <code>url()</code> 함수형 표기법을 사용해 설정합니다. 따옴표는 선택사항으로 작은따옴표, 큰따옴표 둘 다 사용할 수 있습니다. 상대 URL도 사용할 수 있으며, 웹페이지의 URL이 아닌 스타일시트의 URL을 기준으로 사용합니다.</p> + +<pre class="syntaxbox"><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) +</pre> + +<div class="note"> +<p><strong>참고:</strong> Firefox 15부터, <span id="summary_alias_container"><span id="short_desc_nonedit_display">0x7e을 초과하는 제어 문자는 URL을 따옴표로 둘러싸야 유요합니다. 자세한 내용은</span></span> {{Bug(752230)}}을 참고하세요.</p> +</div> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">.topbanner { + background: url("topbanner.png") #00D no-repeat fixed; +} +</pre> + +<pre class="brush: css">ul { + list-style: square url(http://www.example.com/redball.png); +} +</pre> + +<h2 id="Specifications" name="Specifications">명세</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('CSS3 Values', '#urls', '<url>') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>No significant change from CSS Level 2 (Revision 1).</td> + </tr> + <tr> + <td>{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No significant change from CSS Level 1.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#url', '<url>') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + + + +<p>{{Compat("css.types.url")}}</p> diff --git a/files/ko/web/css/used_value/index.html b/files/ko/web/css/used_value/index.html new file mode 100644 index 0000000000..7e730820c0 --- /dev/null +++ b/files/ko/web/css/used_value/index.html @@ -0,0 +1,127 @@ +--- +title: 사용값 +slug: Web/CSS/used_value +tags: + - CSS + - Reference +translation_of: Web/CSS/used_value +--- +<div>{{cssref}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>사용값</strong>은 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>에 모든 계산을 수행한 후의 결과 값입니다.</p> + +<p>모든 CSS 속성은 {{glossary("user agent", "사용자 에이전트")}}가 계산을 끝낸 후 사용값을 가집니다. 크기({{cssxref("width")}}, {{cssxref("line-height")}} 등)는 픽셀 단위로 정해집니다. 단축 속성({{cssxref("background")}} 등)의 값은 그 구성요소({{cssxref("background-color")}}, {{cssxref("background-size")}} 등)와 {{cssxref("position")}}, {{cssxref("float")}}이 가질 값과 일치합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API는 <a href="/ko/docs/Web/CSS/resolved_value">결정값</a>을 반환합니다. 결정값은 속성에 따라 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>일 수도, 사용값일 수도 있습니다.</p> +</div> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 요소 세 개 <code>width</code> 속성의 사용값을 계산하고 보여줍니다. (창 크기 조절 시 업데이트)</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="no-width"> + <p>No explicit width.</p> + <p class="show-used-width">..</p> + + <div id="width-50"> + <p>Explicit width: 50%.</p> + <p class="show-used-width">..</p> + + <div id="width-inherit"> + <p>Explicit width: inherit.</p> + <p class="show-used-width">..</p> + </div> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#no-width { + width: auto; +} + +#width-50 { + width: 50%; +} + +#width-inherit { + width: inherit; +} + +/* Make results easier to see */ +div { + border: 1px solid red; + padding: 8px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function updateUsedWidth(id) { + var div = document.querySelector(`#${id}`); + var par = div.querySelector('.show-used-width'); + var wid = window.getComputedStyle(div)["width"]; + par.textContent = `Used width: ${wid}.`; +} + +function updateAllUsedWidths() { + updateUsedWidth("no-width"); + updateUsedWidth("width-50"); + updateUsedWidth("width-inherit"); +} + +updateAllUsedWidths(); +window.addEventListener('resize', updateAllUsedWidths); +</pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample('예제', '80%', 372) }}</p> + +<h2 id="계산값과의_차이">계산값과의 차이</h2> + +<p>CSS 2.0은 속성의 계산에서 마지막 단계로 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>만 정의했고, 그 다음 CSS 2.1에서 사용값의 분명한 정의를 도입했습니다. 덕분에, 부모의 너비/높이 계산값이 백분율이더라도 상속받을 수 있게 됐습니다. 레이아웃에 의존하지 않는 CSS 속성(가령, <code>display</code>, <code>font-size</code>, <code>line-height</code>)의 경우, 계산값과 사용값은 같습니다. 다음은 레이아웃에 의존하는 CSS 2.1 속성으로, 계산값과 사용값이 다릅니다. (<a href="https://www.w3.org/TR/CSS2/changes.html#q21.36">CSS 2.1 Changes: Specified, computed, and actual values</a>에서 가져옴)</p> + +<ul> + <li><code>background-position</code></li> + <li><code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code></li> + <li><code>height</code>, <code>width</code></li> + <li><code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code></li> + <li><code>min-height</code>, <code>min-width</code></li> + <li><code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code></li> + <li><code>text-indent</code></li> +</ul> + +<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("CSS2.2", "cascade.html#used-value", "used value")}}</td> + <td>{{Spec2("CSS2.2")}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("window.getComputedStyle")}}</li> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/ko/web/css/user-select/index.html b/files/ko/web/css/user-select/index.html new file mode 100644 index 0000000000..fde0e2cc88 --- /dev/null +++ b/files/ko/web/css/user-select/index.html @@ -0,0 +1,123 @@ +--- +title: user-select +slug: Web/CSS/user-select +tags: + - CSS + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/user-select +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <code><strong>user-select</strong></code> 속성은 사용자가 텍스트를 선택할 수 있는지 지정합니다.</p> + +<pre class="brush:css notranslate">/* 키워드 값 */ +user-select: none; +user-select: auto; +user-select: text; +user-select: contain; +user-select: all; + +/* 전역 값 */ +user-select: inherit; +user-select: initial; +user-select: unset; +</pre> + +<h2 id="구문">구문</h2> + +<dl> + <dt><code>none</code></dt> + <dd>이 요소와 아래 요소의 텍스트를 선택하지 못하도록 막습니다. 단 {{domxref("Selection")}} 객체는 <code>none</code>인 요소(와 그 아래)를 포함할 수 있습니다.</dd> + <dt><code>auto</code></dt> + <dd> + <p><code>auto</code>의 사용값은 아래와 같이 결정됩니다.</p> + + <ul> + <li><code>::before</code>와 <code>::after</code> 의사 요소의 사용값은 <code>none</code>입니다.</li> + <li>편집 가능한 요소의 사용값은 <code>contain</code>입니다.</li> + <li>그렇지 않고, 부모 요소 <code>user-select</code>의 사용값이 <code>all</code>이면 이 요소의 사용값도 <code>all</code>입니다.</li> + <li>그렇지 않고, 부모 요소 <code>user-select</code>의 사용값이 <code>none</code>이면 이 요소의 사용값도 <code>none</code>입니다.</li> + <li>그렇지 않으면 사용값은 <code>text</code>입니다.</li> + </ul> + </dd> + <dt><code>text</code></dt> + <dd>사용자가 텍스트를 선택할 수 있습니다.</dd> + <dt><code>all</code></dt> + <dd>요소의 콘텐츠가 원자적으로 선택됩니다. 즉 선택 범위는 이 요소와 그 아래의 자손 전체를 포함해야 하며 일부만 담을 수는 없습니다. 하위 요소에서 더블 클릭이나 콘텍스트 클릭이 발생한 경우, <code>all</code>을 지정한 조상 요소 중 제일 상위 요소를 선택합니다.</dd> + <dt><code>contain</code></dt> + <dd>선택의 시작을 이 요소 안에서 한 경우, 범위가 요소 바깥으로 벗어날 수 없습니다.</dd> +</dl> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>You should be able to select this text.</p> +<p class="unselectable">Hey, you can't select this text!</p> +<p class="all">Clicking once will select all of this text.</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.unselectable { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.all { + -moz-user-select: all; + -webkit-user-select: all; + -ms-user-select: all; + user-select: all; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제")}}</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('CSS4 UI', '#propdef-user-select', 'user-select')}}</td> + <td>{{Spec2('CSS4 UI')}}</td> + <td>Initial definition. Also defines <code>-webkit-user-select</code> as a deprecated alias of <code>user-select</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("css.properties.user-select")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref("::selection")}} 의사 요소</li> + <li>JavaScript {{domxref("Selection")}} 객체.</li> +</ul> diff --git a/files/ko/web/css/using_css_custom_properties/index.html b/files/ko/web/css/using_css_custom_properties/index.html new file mode 100644 index 0000000000..b485744eda --- /dev/null +++ b/files/ko/web/css/using_css_custom_properties/index.html @@ -0,0 +1,262 @@ +--- +title: 사용자 지정 CSS 속성 사용하기 (변수) +slug: Web/CSS/Using_CSS_custom_properties +tags: + - CSS + - CSS Variable + - CSS 변수 + - Custom Properties + - Guide + - Web +translation_of: Web/CSS/Using_CSS_custom_properties +--- +<div>{{cssref}}</div> + +<p><strong>사용자 지정 속성</strong>(<strong>CSS 변수</strong>, <strong>종속 변수</strong>)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (<code><strong>--main-color: black</strong>;</code>) {{cssxref("var", "var()")}} 함수를 사용해 접근할 수 있습니다. (<code>color: <strong>var(--main-color)</strong>;</code>)</p> + +<p>복잡한 웹사이트는 어마어마한 양의 CSS를 가지고 있는데, 종종 많은 값을 반복적으로 사용합니다. 예를 들어, 수 백 곳의 서로 다른 위치에서 같은 색상을 사용한다면, 그 색을 바꿔야 할 상황이 왔을 때 대규모 전역 검색 바꾸기를 피할 수 없습니다. 사용자 지정 속성을 사용하면 한 영역에 값을 저장해놓고 다른 여러 곳에서 참조해갈 수 있습니다. 추가로 오는 장점은 의미를 가지는 식별자를 사용한다는 것으로, <code>#00ff00</code>보다는 <code>--main-text-color</code>가 이해하기 쉽다는 것입니다. 특히 같은 색을 다른 맥락에서 사용할 때 이 장점이 도드라집니다.</p> + +<p>사용자 지정 속성은 종속 대상이며 부모로부터 상속합니다.</p> + +<h2 id="기본_사용법">기본 사용법</h2> + +<p>사용자 지정 속성은 두 개의 붙임표로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언합니다. 다른 일반적인 속성과 마찬가지로 사용자 지정 속성도 아래와 같이 규칙 집합 내에 작성합니다.</p> + +<pre class="brush:css; highlight:[2] language-css notranslate">element { + --main-bg-color: brown; +} +</pre> + +<p>규칙 집합의 선택자는 사용자 지정 속성을 사용할 수 있는 범위를 정의합니다. 흔히 보이는 패턴은 {{cssxref(":root")}} 의사 클래스에 선언해서 여러분의 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있도록 구성하는 것입니다.</p> + +<pre class="brush: css notranslate">:root { + --main-bg-color: brown; +}</pre> + +<p>그러나 반드시 이렇게 선언해야 하는 것은 아닙니다. 범위를 제한해야 하는 적절한 이유가 있을 수도 있으니까요.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 사용자 지정 속성의 이름은 대소문자를 구분합니다. 따라서 <code>--my-color</code>와 <code>--My-color</code>는 서로 다른 속성으로써 처리합니다.</p> +</div> + +<p>위에서 언급했듯, 사용자 지정 속성의 값을 사용할 때에는 일반적인 값의 자리에 {{cssxref("var()")}} 함수를 지정하고, 그 매개변수로는 사용자 지정 속성의 이름을 제공합니다.</p> + +<pre class="brush:css; highlight:[2] language-css notranslate">element { + background-color: var(--main-bg-color); +} +</pre> + +<h2 id="사용자_지정_속성_첫_단계">사용자 지정 속성 첫 단계</h2> + +<p>동일한 색상을 여러 클래스에 적용하는, 다음의 간단한 예제로 시작하겠습니다.</p> + +<pre class="brush:css; highlight:[3,20,26,32] notranslate">.one { + color: white; + background-color: brown; + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.two { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.three { + color: white; + background-color: brown; + margin: 10px; + width: 75px; +} +.four { + color: white; + background-color: brown; + margin: 10px; + width: 100px; +} + +.five { + background-color: brown; +} +</pre> + +<p>HTML에 적용해보겠습니다.</p> + +<pre class="brush:html notranslate"><div> + <div class="one">1:</div> + <div class="two">2: Text <span class="five">5 - more text</span></div> + <input class="three"> + <textarea class="four">4: Lorem Ipsum</textarea> +</div> +</pre> + +<p>결과는 다음과 같습니다.</p> + +<p>{{EmbedLiveSample("사용자_지정_속성_첫_단계",600,180)}}</p> + +<p>반복되는 CSS에 주목해보세요. 배경 색을 여러 곳에서 <code>brown</code>으로 지정하고 있습니다. 일부 CSS 선언의 경우 더 상위 단계로 반복되는 항목을 옮겨서 CSS의 상속을 통해 자연스럽게 해결할 수도 있습니다. 그러나 보다 복잡한 프로젝트의 경우 항상 이렇게 할 수 있는 것은 아닙니다. 이 때 {{cssxref(":root")}} 의사 클래스에 사용자 지정 속성을 선언하고, 필요한 곳에서 그 속성을 참조함으로써 반복 코드의 필요를 줄일 수 있습니다.</p> + +<pre class="brush:html notranslate">:root { + --main-bg-color: brown; +} + +.one { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.two { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.three { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 75px; +} +.four { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 100px; +} + +.five { + background-color: var(--main-bg-color); +} +</pre> + +<p>위의 코드는 이전 예제와 동일한 결과물을 낳지만, 원하는 값에 대한 단 하나의 선언만이 필요합니다. 나중에 페이지 전체에 걸쳐 해당 값을 바꿔야 할 경우 특이 유용해집니다.</p> + +<h2 id="사용자_지정_속성의_상속">사용자 지정 속성의 상속</h2> + +<p>사용자 지정 속성은 상속 대상입니다. 그러므로 특정 요소에 사용자 지정 속성 값을 설정하지 않은 경우, 그 부모의 값을 사용합니다. 다음 HTML 코드를 살펴보세요.</p> + +<pre class="brush: html notranslate"><div class="one"> + <div class="two"> + <div class="three"></div> + <div class="four"></div> + </div> +</div></pre> + +<p>아래의 CSS 코드를 적용할 것입니다.</p> + +<pre class="brush: css notranslate">.two { + --test: 10px; +} + +.three { + --test: 2em; +} +</pre> + +<p>그러면, <code>var(--test)</code>의 결과는 다음과 같습니다.</p> + +<ul> + <li><code>class="two"</code> 요소: <code>10px</code></li> + <li><code>class="three"</code> 요소: <code>2em</code></li> + <li><code>class="four"</code> 요소: <code>10px</code> (부모로부터 상속)</li> + <li><code>class="one"</code> 요소: 유효하지 않음. 모든 사용자 지정 속성의 기본값.</li> +</ul> + +<p>이것들은 실제 CSS변수가 아니라 사용자 지정 속성이라는 것을 염두해 두자. 이 값들은 다른 규칙에서 사용하기 위해 따로 저장되는 것이 아니라, 필요할 때만 계산된다. 예를 들어, 요소의 속성을 설정하거나, 형제의 자손 규칙에서 이 요소를 검색할 수는 없다. 이 속성은 일반적인 CSS와 같이, 선택자가 일치하거나 해당 선택자의 하위 항목일 경우에만 설정된다.</p> + +<h2 id="사용자_지정_속성_대안_값">사용자 지정 속성 대안 값</h2> + +<p>주어진 변수가 아직 정의되지 않았을 때, <a href="/en-US/docs/Web/CSS/var">var()</a> 를 이용하여 여러 개의 <strong>대체 변수</strong>를 정의할 수 있다. 이는 사용자 정의 요소(Custom Element)및 섀도우 돔(Shadow DOM)으로 작업할 때 유용하게 쓸 수 있다.</p> + +<p>함수에 있어서의 첫번째 논쟁은 대체될 <a href="https://www.w3.org/TR/css-variables/#custom-property">사용자 속성</a>의 이름이다. 두번째는 아래와 같이 잘못된 <a href="https://www.w3.org/TR/css-variables/#custom-property">사용자 속성</a>을 참조하였을 때 대신 사용할 수 있는 대체 변수이다:</p> + +<pre class="brush: css notranslate">.two { + color: var(--my-var, red); /* --my-var가 정의되지 않았을 경우 red로 표시됨 */ +} + +.three { + background-color: var(--my-var, var(--my-background, pink)); /* my-var와 --my-background가 정의되지 않았을 경우 pink로 표시됨 */ +} + +.three { + background-color: var(--my-var, --my-background, pink); /* 유효하지 않음: "--my-background, pink" */ +}</pre> + +<div class="note"> +<p><a href="https://www.w3.org/TR/css-variables/#custom-property">사용자 속성</a>같은 대체 구문은 쉼표를 허용한다. 예를 들어, var(--foo, red, blue)는 빨강, 파랑의 fallback을 정의하고 있다; 즉, 첫번째 쉼표와 함수 마지막 사이에 있는 값들은 모두 대체 변수로 간주한다.</p> +</div> + +<h2 id="유효성과_값">유효성과 값</h2> + +<p><em>각 속성과 연관된 기본 CSS 개념의 유효성은 사용자 지정 속성과 관련하여 별로 유용하지 않다. 사용자 속성 값을 분석할 때, 브라우저는 그것들이 어디서 사용되는지 모르기 때문에 거의 모든 값을 유효한 것으로 간주할 수 밖에 없다.</em></p> + +<p>불행히도, 이 유효한 값들은 <code>var()</code> 함수 표현을 통하여 이해할 수 없는 문맥 안에서도 사용될 수 있다. 속성 및 사용자 변수로 인해 유효하지 않은 CSS 선언문이 만들어지면 계산된 시간에 유효한 새로운 개념이 생기게 된다<em>.</em></p> + +<h2 id="유효하지_않은_변수를_만날_때">유효하지 않은 변수를 만날 때</h2> + +<p> 만일 브라우저가 유효하지 않은 <code>var()</code> 구문을 만나게 되면, 그 속성의 초기값이나 상속된 값이 사용된다.</p> + +<p>아래의 코드를 보자.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>This paragraph is initial black.</p> </pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">:root { --text-color: 16px; } +p { color: blue; } +p { color: var(--text-color); } +</pre> + +<p>예상대로 브라우저는 <code>--text-color</code> 의 값으로 <code>var(--text-color)</code> 를 대체했지만 <code>16px</code> 는 {{cssxref("color")}}에 유효한 값이 아니다. 대체한 결과, 그 속성은 의미가 통하지 않는다. 브라우저는 이 상황을 두 단계로 처리한다:</p> + +<ol> + <li>color 속성이 상속되었는지를 확인한다. 확인, 그런데 <code><p></code> 가 color 속성과 연관된 부모 엘리먼트가 없다. 그렇다면 다음 단계로 넘어간다.</li> + <li>값을 <strong>default initial value</strong>,(초기 설정 디폴트값) 즉, black 으로 처리한다.</li> +</ol> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('What_happens_with_invalid_variables')}}</p> + +<p>단락의 color 값은 blue가 되지 못한다. 유효하지 않은 값이 폴백 (fallback)이 아닌 초기설정 디포트값으로 대체되었기 때문이다. 만일 사용자가 어떠한 매개변수값 없이 <code>color: 16px</code> 를 쓴다면 에러(syntax error)를 받게 될 것이다. 대신 그 전에 지정된 선언이 사용된다.</p> + +<div class="note"> +<p><strong>Note</strong>: CSS 속성/값 쌍에서 에러(syntax error)가 나면 그 라인은 무시되지만 계단식으로 지정된 값, 유효하지 않은 대체적용(substitution) - 유효하지 않은 사용자 지정값을 사용하는 것 - 은 무시되지 않으며, 그 값은 상속된다.</p> +</div> + +<h2 id="JavaScript에서의_값">JavaScript에서의 값</h2> + +<p>JavaScript로 사용자 속성값을 사용하는 것은 표준 속성을 사용하는 것과 같다.</p> + +<pre class="brush: js notranslate">// 인라인 스타일에서 변수 얻기 +element.style.getPropertyValue("--my-var"); + +// 어느 곳에서나 변수 얻기 +getComputedStyle(element).getPropertyValue("--my-var"); + +// 인라인 스타일에 변수 설정하기 +element.style.setProperty("--my-var", jsVar + 4); +</pre> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.properties.custom-property")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("--*", "사용자 지정 속성")}}</li> +</ul> diff --git a/files/ko/web/css/value_definition_syntax/index.html b/files/ko/web/css/value_definition_syntax/index.html new file mode 100644 index 0000000000..bc784b05cc --- /dev/null +++ b/files/ko/web/css/value_definition_syntax/index.html @@ -0,0 +1,436 @@ +--- +title: 값 정의 구문 +slug: Web/CSS/Value_definition_syntax +tags: + - CSS + - Guide + - Reference + - Syntax + - 구문 + - 문법 +translation_of: Web/CSS/Value_definition_syntax +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong>CSS 값 정의 구문</strong>은 <a href="https://ko.wikipedia.org/wiki/%ED%98%95%EC%8B%9D_%EB%AC%B8%EB%B2%95">형식 문법</a>으로서 CSS 속성이나 함수가 받을 수 있는 유효한 값의 집합을 정의합니다.</span> 유효한 값 집합은 정의 구문으로 인한 제한 외에도 반드시 양의 수가 와야 하는 등, 맥락에 따라 추가로 제한될 수 있습니다.</p> + +<p>정의 구문은 허용하는 값과 그 값 사이의 상호 작용을 설명합니다. "키워드", 일부 문자 "리터럴", 주어진 CSS 자료형에 속하는 값이거나, 다른 CSS 속성이 구문의 구성 요소가 될 수 있습니다.</p> + +<h2 id="구성_요소_값_유형">구성 요소 값 유형</h2> + +<h3 id="키워드">키워드</h3> + +<h4 id="일반_키워드">일반 키워드</h4> + +<p>사전 정의된 의미가 있는 키워드는 따옴표 없이 문자 그대로 나타납니다. 예시로는 <code>auto</code>, <code>smaller</code>, <code>ease-in</code>이 있습니다.</p> + +<h4 id="특별_키워드_inherit_initial_unset">특별 키워드: <code>inherit</code>, <code>initial</code>, <code>unset</code></h4> + +<p>모든 CSS 속성은 전역으로 정의한 <code>inherit</code>, <code>initial</code>, <code>unset</code> 키워드를 허용합니다. 세 키워드는 값 정의에 나타나지 않으며 암시적으로 정의됩니다.</p> + +<h3 id="리터럴">리터럴</h3> + +<p>CSS에서 빗금('<code>/</code>')과 쉼표('<code>,</code>')와 같은 일부 문자는 그대로 나타날 수 있고, 속성 정의에서 값 구분을 위해 사용합니다. 쉼표는 종종 열거하는 값이나 수학형 함수의 매개변수를 구분할 때 사용합니다. 빗금은 의미가 다르지만 구문이 같은 값을 분리할 때 종종 사용합니다. 보통 빗금은 단축 속성에서 자료형이 같은 서로 다른 속성의 값을 구분할 때 쓰입니다.</p> + +<p>두 기호 모두 값 정의에 문자 그대로 나타납니다.</p> + +<h3 id="자료형">자료형</h3> + +<h4 id="기본_자료형">기본 자료형</h4> + +<p>어떤 종류의 데이터는 CSS의 전반에서 사용하며, 명세의 모든 값에 대해 한 번만 정의합니다. 이런 데이터의 자료형을 "기본 자료형"이라고 부르며, {{CSSxRef("<angle>")}}과 {{CSSxRef("<string>")}}처럼 이름을 '<code><</code>'와 '<code>></code>' 기호로 감싸서 표현합니다.</p> + +<h4 id="비_말단_자료형">비 말단 자료형</h4> + +<p>보다 덜 흔한 자료형인 "비 말단 자료형" 역시 '<code><</code>'와 '<code>></code>'로 감쌉니다.</p> + +<p>비 말단 자료형에는 두 종류가 존재합니다.</p> + +<ul> + <li><u>어떤 속성과 같은 이름을 공유하는</u> 자료형으로, 이름을 따옴표로 감싸는 경우. 이 자료형의 값은 해당 속성이 허용하는 값과 동일합니다. 많은 경우 단축 속성에서 사용합니다.</li> + <li><u>다른 속성과 이름을 공유하지 않는</u> 자료형. 기본 자료형과 매우 유사하며, 차이점은 이 자료형의 정의가 어디에 되어있나 정도입니다. 기본 자료형과는 달리, 보통 이 자료형을 사용하는 속성과 가까운 곳에서 정의합니다.</li> +</ul> + +<h2 id="구성_요소_값_결합자">구성 요소 값 결합자</h2> + +<h3 id="대괄호"><a id="Brackets" name="Brackets">대괄호</a></h3> + +<p><u>대괄호</u>는 다수의 개체, 결합자, 곱수를 감싸서 하나의 구성 요소로 변환합니다. 대괄호는 <strong>구성 요소를 묶어서 우선순위 규칙을 우회</strong>할 때 사용합니다.</p> + +<pre class="syntaxbox notranslate">bold [ thin && <length> ]</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>bold thin 2vh</code></li> + <li><code>bold 0 thin</code></li> + <li><code>bold thin 3.5em</code></li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>thin bold 3em</code>. <code>bold</code>를 대괄호로 정의한 구성 요소와 병치했기 때문에 반드시 그 앞에 나타나야 합니다.</li> +</ul> + +<h3 id="병치"><a id="Juxtaposition" name="Juxtaposition">병치</a></h3> + +<p>여러 단어, 리터럴, 자료형을 한 개 이상의 공백으로만 구분해서 나란히 배치하는 것을 <u>병치</u>라고 합니다. 병치한 모든 구성 요소는 <strong>필수이며 정확히 순서 그대로 나타나야 합니다</strong>.</p> + +<pre class="syntaxbox notranslate">bold <length> , thin +</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>bold 1em, thin</code></li> + <li><code>bold 0, thin</code></li> + <li><code>bold 2.5cm, thin</code></li> + <li><code>bold 3vh, thin</code></li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>thin 1em, bold</code>. 모든 개체가 정확한 순서를 따라야 합니다.</li> + <li><code>bold 1em thin</code>. 모든 개체가 필수이므로, 리터럴로 표기한 쉼표 역시 존재해야 합니다.</li> + <li><code>bold 0.5ms, thin</code>. <code>ms</code> 값은 {{CSSxRef("<length>")}}가 아닙니다.</li> +</ul> + +<h3 id="이중_앰퍼샌드"><a id="Double_ampersand" name="Double_ampersand">이중 앰퍼샌드</a></h3> + +<p>두 개 이상의 구성 요소를 <u>이중 앰퍼샌드</u>, <code>&&</code>로 구분하면 모든 개체가 <strong>필수지만 순서는 상관 없음</strong>을 의미합니다.</p> + +<pre class="syntaxbox notranslate">bold && <length> +</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>bold 1em</code></li> + <li><code>bold 0</code></li> + <li><code>2.5cm bold</code></li> + <li><code>3vh bold</code></li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>bold</code>. 두 구성 요소가 값에 모두 나타나야 합니다.</li> + <li><code>bold 1em bold</code>, 두 구성 요소는 한 번씩만 나타나야 합니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 병치는 이중 앰퍼샌드보다 우선순위가 높습니다. 즉 <code>bold thin && <length></code>는 <code>[ bold thin ] && <length></code>와 같습니다. 따라서 <code>bold thin <length></code>와 <code><length> bold thin</code>은 일치하지만 <code>bold <length> thin</code>은 일치하지 않습니다.</p> +</div> + +<h3 id="이중_바"><a id="Double_bar" name="Double_bar">이중 바</a></h3> + +<p>두 개 이상의 구성 요소를 <u>이중 바</u>, <code>||</code>로 구분하면 모든 개체 중 <strong>적어도 하나는 나타나야 하고 순서는 상관하지 않습니다</strong>. 보통 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>의 여러 값을 정의할 때 사용합니다.</p> + +<pre class="syntaxbox notranslate"><'border-width'> || <'border-style'> || <'border-color'> +</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>1em solid blue</code></li> + <li><code>blue 1em</code></li> + <li><code>solid 1px yellow</code></li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>blue yellow</code>, 하나의 구성 요소는 한 번만 나타나야 합니다.</li> + <li><code>bold</code>, 이 키워드는 어느 개체에도 속하지 않는 값입니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 이중 앰퍼샌드는 이중 바보다 우선순위가 높습니다. <code>bold || thin && <length></code>는 <code>bold || [ thin && <length> ]</code>와 같으며, <code>bold</code>, <code>thin <length></code>, <code>bold thin <length></code>, 그리고 <code>thin <length> bold</code>와 일치합니다. 하지만 <code><length> bold thin</code>은 일치하지 않는데, <code>bold</code>를 생략하지 않으면 <code>thin && <length></code> 구성 요소 이전 또는 다음에 위치해야 하기 때문입니다.</p> +</div> + +<h3 id="단일_바"><a id="Single_bar" name="Single_bar">단일 바</a></h3> + +<p>두 개 이상의 개체를 <u>단일 바</u>, <code>|</code>로 구분하면 모든 개체 중에서 <strong>한 개만이 반드시 존재해야 합니다</strong>. 보통 가능한 키워드 값의 목록을 구성할 때 사용합니다.</p> + +<pre class="syntaxbox notranslate"><percentage> | <length> | left | center | right | top | bottom</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>3%</code></li> + <li><code>0</code></li> + <li><code>3.5em</code></li> + <li><code>left</code></li> + <li><code>center</code></li> + <li><code>right</code></li> + <li><code>top</code></li> + <li><code>bottom</code></li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>center 3%</code>, 오직 하나의 구성 요소만 나타나야 합니다.</li> + <li><code>3em 4.5em</code>, 구성 요소는 한 번만 나타나야 합니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 이중 바는 단일 바보다 우선순위가 높으며 <code>bold | thin || <length></code>는 <code>bold | [ thin || <length> ]</code>와 같습니다. <code>bold</code>, <code>thin</code>, <code><length></code>, <code><length> thin</code>, <code>thin <length></code>는 일치하지만, <code>|</code> 결합자는 좌우 중 단 하나만 선택할 수 있기 때문에 <code>bold <length></code>는 일치하지 않습니다.</p> +</div> + +<h2 id="구성_요소_값_배수">구성 요소 값 배수</h2> + +<p>배수는 기호로서, 앞의 개체를 몇 번이나 반복할 수 있는지 표시합니다. 배수가 없는 개체는 반드시 단 한 번만 나타나야 합니다.</p> + +<p>배수는 거듭 표시할 수 없고, 모든 결합자보다 우선순위가 높습니다.</p> + +<h3 id="Asterisk" name="Asterisk"><a id="Asterisk_(*)" name="Asterisk_(*)">별표 (<code>*</code>)</a></h3> + +<p><u>별표 배수</u>는 개체가 <strong>0번, 한 번, 또는 여러 번 나타날 수 있음</strong>을 표시합니다.</p> + +<pre class="syntaxbox notranslate">bold smaller*</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>bold</code></li> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code> 등등.</li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li> +</ul> + +<h3 id="Plus" name="Plus"><a id="Plus_()" name="Plus_()">더하기 (<code>+</code>)</a></h3> + +<p><u>더하기 배수</u>는 개체가 <strong>한 번 또는 여러 번 나타날 수 있음</strong>을 표시합니다.</p> + +<pre class="syntaxbox notranslate">bold smaller+</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code> 등등.</li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>bold</code>, <code>smaller</code>는 적어도 한 번 나타나야 합니다.</li> + <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li> +</ul> + +<h3 id="Question_mark" name="Question_mark"><a id="Question_mark_()" name="Question_mark_()">물음표 (<code>?</code>)</a></h3> + +<p><u>물음표 배수</u>는 개체가 선택 사항이며, <strong>반드시 0번 또는 한 번만 나타나야 함</strong>을 표시합니다.</p> + +<pre class="syntaxbox notranslate">bold smaller?</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>bold</code></li> + <li><code>bold smaller</code></li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>bold smaller smaller</code>, <code>smaller</code>는 최대 한 번만 나타나야 합니다.</li> + <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li> +</ul> + +<h3 id="Curly_braces" name="Curly_braces"><a id="Curly_braces_(_)" name="Curly_braces_(_)">중괄호 (<code>{ }</code>)</a></h3> + +<p><u>중괄호 배수</u>는 쉼표로 구분한 두 개의 정수, A와 B를 포함하며 개체가 <strong>최소 A번, 최대 B번 나타나야 함</strong>을 표시합니다.</p> + +<pre class="syntaxbox notranslate">bold smaller{1,3}</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code></li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>bold</code>, <code>smaller</code>는 적어도 한 번 나타나야 합니다.</li> + <li><code>bold smaller smaller smaller smaller</code>, <code>smaller</code>는 최대 3회까지만 나타나야 합니다.</li> + <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li> +</ul> + +<h3 id="Hash_mark" name="Hash_mark"><a id="Hash_mark_()" name="Hash_mark_()">해시 (<code>#</code>)</a></h3> + +<p><u>해시 배수</u>는 (더하기 배수처럼) 개체가 한 번 또는 여러 번 나타날 수 있지만, 서로 쉼표로 구분해야 함을 표시합니다.</p> + +<pre class="syntaxbox notranslate">bold smaller#</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller, smaller</code></li> + <li><code>bold smaller, smaller, smaller</code>, 등등.</li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>bold</code>, <code>smaller</code>는 적어도 한 번 나타나야 합니다.</li> + <li><code>bold smaller smaller smaller</code>, 각각의 <code>smaller</code>를 쉼표로 구분해야 합니다.</li> + <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li> +</ul> + +<h3 id="Exclamation_point" name="Exclamation_point"><a id="Exclamation_point_(!)" name="Exclamation_point_(!)">느낌표 (<code>!</code>)</a></h3> + +<p>그룹 뒤에 표시하는 <u>느낌표 배수</u>는 그룹이 반드시 존재해야 하며, 그룹 내 항목의 문법으로 인해 전체 콘텐츠가 생략 가능한 형태더라도 최소한 하나의 값은 생성해내야 함을 나타냅니다.</p> + +<pre class="syntaxbox notranslate">[ bold? smaller? ]! +</pre> + +<p>위의 예제는 다음의 값과 일치합니다.</p> + +<ul> + <li><code>bold</code></li> + <li><code>smaller</code></li> + <li><code>bold smaller</code></li> +</ul> + +<p>하지만 다음과는 일치하지 않습니다.</p> + +<ul> + <li><code>bold</code>도 없고 <code>smaller</code>도 없는 경우, 적어도 하나의 값은 나타나야 합니다.</li> + <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li> + <li><code>bold smaller bold</code>, <code>bold</code>와 <code>smaller</code>는 단 한 번만 나타나야 합니다.</li> +</ul> + +<h2 id="요약">요약</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">기호</th> + <th scope="col">이름</th> + <th scope="col">설명</th> + <th scope="col">예제</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4">결합자</th> + </tr> + <tr> + <td></td> + <td>병치</td> + <td>구성 요소가 필수이고 순서에 따라 나타나야 함</td> + <td><code>solid <length></code></td> + </tr> + <tr> + <td><code>&&</code></td> + <td>이중 앰퍼샌드</td> + <td>구성 요소가 필수이지만 순서에 무관함</td> + <td><code><length> && <string></code></td> + </tr> + <tr> + <td><code>||</code></td> + <td>이중 바</td> + <td>구성 요소가 하나 이상 나타나야 하고 순서에 무관함</td> + <td><code><'border-image-outset'> || <'border-image-slice'></code></td> + </tr> + <tr> + <td><code>|</code></td> + <td>단일 바</td> + <td>구성 요소가 정확히 하나만 나타나야 함</td> + <td><code>smaller | small | normal | big | bigger</code></td> + </tr> + <tr> + <td><code>[ ]</code></td> + <td>대괄호</td> + <td>우선순위를 우회하기 위해 구성 요소를 묶음</td> + <td><code>bold [ thin && <length> ]</code></td> + </tr> + <tr> + <th colspan="4">배수</th> + </tr> + <tr> + <td></td> + <td>배수 없음</td> + <td>정확히 한 번</td> + <td><code>solid</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>별표</td> + <td>0회 이상</td> + <td><code>bold smaller*</code></td> + </tr> + <tr> + <td><code>+</code></td> + <td>더하기</td> + <td>1회 이상</td> + <td><code>bold smaller+</code></td> + </tr> + <tr> + <td><code>?</code></td> + <td>물음표</td> + <td>0회 또는 1회 (선택 사항)</td> + <td><code>bold smaller?</code></td> + </tr> + <tr> + <td><code>{A,B}</code></td> + <td>중괄호</td> + <td>최소 <code>A</code>회, 최대 <code>B</code>회</td> + <td><code>bold smaller{1,3}</code></td> + </tr> + <tr> + <td><code>#</code></td> + <td>해시</td> + <td>1회 이상, 단 쉼표로 구분</td> + <td><code>bold smaller#</code></td> + </tr> + <tr> + <td><code>!</code></td> + <td>느낌표</td> + <td>그룹이 적어도 하나의 값을 생성해야 함</td> + <td><code>[ bold? smaller? ]!</code></td> + </tr> + </tbody> +</table> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}</td> + <td>{{Spec2("CSS3 Values")}}</td> + <td>Adds the hash mark multiplier.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Adds the double ampersand combinator.</td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/var()/index.html b/files/ko/web/css/var()/index.html new file mode 100644 index 0000000000..49dd9ffb37 --- /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() +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>var()</code></strong> 함수는 <a href="/ko/docs/Web/CSS/--*">사용자 지정 속성</a>, 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용합니다.</span></p> + +<pre class="brush: css line-numbers language-css no-line-numbers"><code class="language-css">var(--header-color, blue);</code></pre> + +<p><code>var()</code> 함수는 값이 아닌 속성 이름, 선택자 등 다른 곳에 사용할 수 없습니다. 시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계없는 값이 됩니다.</p> + +<h2 id="구문">구문</h2> + +<p>첫 번째 인수는 값을 가져올 사용자 지정 속성의 이름입니다. 선택적으로 제공할 수 있는 두 번째 인수는 대체값으로, 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용합니다.</p> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<div class="note"> +<p><strong>참고:</strong> 대체값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용합니다. 그러므로 <code>var(--foo, red, blue)</code>의 대체값은 쉼표까지 포함한 <code>red, blue</code>입니다. 말하자면 첫 번째 쉼표의 뒤쪽은 모두 대체값이 되는 것입니다.</p> +</div> + +<h3 id="값">값</h3> + +<dl> + <dt><code><custom-property-name></code></dt> + <dd>두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자.</dd> + <dt><code><declaration-value></code></dt> + <dd>현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체값. 새 줄, 짝 없이 닫는 괄호(<code>)</code>, <code>]</code>, <code>}</code>) 세미콜론, 느낌표 등 특별한 의미를 가진 문자를 제외한 모든 문자를 사용할 수 있습니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">:root { + --main-bg-color: pink; +} + +body { + background-color: var(--main-bg-color); +} +</pre> + +<pre class="brush: css">/* 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; +} +</pre> + +<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('CSS3 Variables', '#using-variables', 'var()')}}</td> + <td>{{Spec2('CSS3 Variables')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.custom-property.var")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("env","env(…)")}} – 사용자 에이전트가 통제하는 읽기 전용 환경 변수.</li> + <li><a href="/ko/docs/Web/CSS/Using_CSS_variables">CSS 변수 사용하기</a></li> +</ul> diff --git a/files/ko/web/css/vertical-align/index.html b/files/ko/web/css/vertical-align/index.html new file mode 100644 index 0000000000..7e718efc4d --- /dev/null +++ b/files/ko/web/css/vertical-align/index.html @@ -0,0 +1,246 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/vertical-align +--- +<div>{{CSSRef}}</div> + +<p><strong><code>vertical-align</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.</p> + +<pre class="brush: css no-line-numbers">/* keyword values */ +vertical-align: baseline; +vertical-align: sub; +vertical-align: super; +vertical-align: text-top; +vertical-align: text-bottom; +vertical-align: middle; +vertical-align: top; +vertical-align: bottom; + +/* <length> values */ +vertical-align: 10em; +vertical-align: 4px; + +/* <percentage> values */ +vertical-align: 20%; + +/* Global values */ +vertical-align: inherit; +vertical-align: initial; +vertical-align: unset; +</pre> + +<p>vertical-align 속성은 두 컨텍스트에서 사용될 수 있습니다:</p> + +<ul> + <li>엘리먼트의 box를 이것이 포함된 line box 내부에서 수직 정렬하고자 할 때. 예를 들어서, {{HTMLElement("img")}} 엘리먼트를 텍스트 엘리먼트의 라인 속에서 정렬할 때 쓰일 수 있습니다:</li> +</ul> + +<div id="vertical-align-inline"> +<pre class="hidden brush: html"><p> +top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> +middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> +bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> +super:<img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/> +sub:<img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/> +</p> +<p> +text-top:<img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/> +text-bottom:<img style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> +0.2em:<img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/> +-1em:<img style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/> +20%:<img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/> +-100%:<img style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/> +</p> + +</pre> + +<pre class="hidden brush: css">#* { + box-sizing: border-box; +} + +img { + margin-right: 0.5em; +} + +p { + height: 3em; + padding: 0 .5em; + font-family: monospace; + text-decoration: underline overline; + margin-left: auto; + margin-right: auto; + width: 80%; +} +</pre> +</div> + +<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p> + +<ul> + <li>table의 한 셀에서 포함하고 있는 내용을 수직 정렬할 때:</li> +</ul> + +<div id="vertical-align-table"> +<pre class="hidden brush: html"><table> + <tr> + <td style="vertical-align: baseline">baseline</td> + <td style="vertical-align: top">top</td> + <td style="vertical-align: middle">middle</td> + <td style="vertical-align: bottom">bottom</td> + <td> + <p>There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.</p> +<p>There is another theory which states that this has already happened.</p> + </td> + </tr> +</table> + +</pre> + +<pre class="hidden brush: css">table { + margin-left: auto; + margin-right: auto; + width: 80%; +} + +table, th, td { + border: 1px solid black; +} + +td { + padding: 0.5em; + font-family: monospace; +} +</pre> +</div> + +<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p> + +<p><code>vertical-align은 오로지 inline과 table-cell 엘리먼트에만 적용된다는 것에 주의하세요: 이 속성을</code> <a href="/en-US/docs/Web/HTML/Block-level_elements">block level 엘리먼트</a>에 사용할 수 없습니다.</p> + +<p>{{cssinfo}}</p> + +<h2 id="구문">구문</h2> + +<p>이 속성은 아래의 키워드들로 지정됩니다.</p> + +<h3 id="Values_(inline_elements에서)">Values (inline elements에서)</h3> + +<p><em>주로 부모 엘리먼트에 대하여 상대적으로 수직정렬하는 값들:</em></p> + +<dl> + <dt><code>baseline</code></dt> + <dd>부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬합니다. 몇몇 <a href="/en-US/docs/Web/CSS/Replaced_element">replaced elements</a>의 베이스라인은 예를들면{{HTMLElement("textarea")}}은 HTML 명세에 정의되어 있지 않으므로, 이 키워드는 브라우저마다 다른 결과를 보여줍니다.</dd> + <dt><code>sub</code></dt> + <dd>해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬합니다.</dd> + <dt><code>super</code></dt> + <dd>해당 엘리먼트의 baseline을 부모의 superscript-baseline으로 정렬합니다.</dd> + <dt><code>text-top</code></dt> + <dd>해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬합니다.</dd> + <dt><code>text-bottom</code></dt> + <dd>해당 엘리먼트의 bottom을 부모 엘리먼트 폰트의 bottom으로 정렬합니다.</dd> + <dt><code>middle</code></dt> + <dd>해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬합니다.</dd> + <dt>{{cssxref("<length>")}}</dt> + <dd>해당 엘리먼트의 baseline을 부모의 baseline에서 주어진 길이만큼 위로 정렬합니다.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd><length> value와 마찬가지로 해당 엘리먼트의 baseline을 부모의 baseline에서 {{Cssxref("line-height")}}의 퍼센트로 주어진 퍼센트만큼 위로 정렬합니다.</dd> +</dl> + +<p>(<length> 와 <percentage>에 대해서 음수 값이 허용됩니다.)</p> + +<p><em>다음 두 value는 부모가 아닌 전체 라인에 대해,수직정렬하는 값입니다:</em></p> + +<dl> + <dt><code>top</code></dt> + <dd>해당 엘리먼트의 top과 이것의 자손들의 top을 전체 라인의 top으로 정렬합니다.</dd> + <dt><code>bottom</code></dt> + <dd>해당 엘리먼트의 bottom과 이것의 자손들의 bottom을 전체 라인의 bottom으로 정렬합니다.</dd> +</dl> + +<p>Baseline이 없는 엘리먼트에 대해서는 bottom margin edge가 baseline을 대신하여 사용됩니다.</p> + +<h3 id="Values_(table_cells에서)">Values (table cells에서)</h3> + +<dl> + <dt><code>baseline</code> (<code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code><length></code>, <code><percentage></code>)</dt> + <dd> 셀의 baseline을 같은 행의 다른 cell들의 baseline과 정렬합니다. </dd> + <dt><code>top</code></dt> + <dd>셀의 top padding edge를 행의 top으로 정렬합니다.</dd> + <dt><code>middle</code></dt> + <dd>셀의 padding box의 중심을 행에서 중앙 정렬합니다.</dd> + <dt><code>bottom</code></dt> + <dd>셀의 bottom padding edge를 행의 bottom으로 정렬합니다.</dd> +</dl> + +<p>음수 값이 허용됩니다.</p> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div> +<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div> +<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div> +<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">img.top { vertical-align: text-top; } +img.bottom { vertical-align: text-bottom; } +img.middle { vertical-align: middle; } +</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("Example")}}</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('CSS3 Transitions', '#animatable-css', 'vertical-align')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>vertical-align</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Add the {{cssxref("<length>")}} value and allows it to be applied to element with a {{cssxref("display")}} type of <code>table-cell</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.properties.vertical-align")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}</li> + <li><a href="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></li> + <li><a href="http://christopheraue.net/2014/03/05/vertical-align/">All You Need To Know About Vertical-Align</a></li> +</ul> diff --git a/files/ko/web/css/visibility/index.html b/files/ko/web/css/visibility/index.html new file mode 100644 index 0000000000..67f982daea --- /dev/null +++ b/files/ko/web/css/visibility/index.html @@ -0,0 +1,176 @@ +--- +title: visibility +slug: Web/CSS/visibility +tags: + - CSS + - CSS Box Model + - CSS Property + - Layout + - Reference + - Web +translation_of: Web/CSS/visibility +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>visibility</code></strong> CSS 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다.</span> <code>visibility</code>로 {{htmlelement("table")}}의 행이나 열을 숨길 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div> + + + +<p>문서를 숨기고, <strong>레이아웃에서도 제외</strong>하려면, <code>visibility</code>를 사용하는 대신 {{cssxref("display")}} 속성을 <code>none</code>으로 설정하세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">/* 키워드 값 */ +visibility: visible; +visibility: hidden; +visibility: collapse; + +/* 전역 값 */ +visibility: inherit; +visibility: initial; +visibility: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>요소가 보임.</dd> + <dt><code>hidden</code></dt> + <dd>요소가 숨겨짐(그려지지 않음). 레이아웃에는 숨겨지지 않았을 때와 동일한 영향을 줍니다. <code>visibility</code>를 <code>visible</code>로 설정한 자손은 화면에 보입니다. 숨겨진 요소는 포커스(<a href="/ko/docs/Web/HTML/Global_attributes/tabindex">탭 인덱스</a>로 탐색 등)를 받을 수 없습니다.</dd> + <dt><code>collapse</code></dt> + <dd> + <ul> + <li>{{HTMLElement("table")}}의 행, 열, 행 그룹과 열 그룹에 적용하면 {{cssxref("display")}}를 <code>none</code>으로 설정한 것과 동일하게 요소를 숨기고 차지하던 공간도 제거합니다. 그러나 다른 행(열)의 크기는 <code>collapse</code>를 적용한 행(열)이 보이는 것 처럼 취급해 계산합니다. 따라서 표의 너비나 높이의 재계산 없이 빠르게 행이나 열을 제거할 수 있습니다.</li> + <li>플렉스 아이템에 적용하면 요소를 숨기고 차지하던 공간도 제거합니다.</li> + <li><a href="/ko/docs/Mozilla/Tech/XUL">XUL</a> 요소에 적용하면 다른 스타일과 관계 없이 크기의 계산값으로 항상 0을 사용합니다. 그러나 {{cssxref("margin")}}은 바뀌지 않습니다.</li> + <li>다른 요소에서는 <code>hidden</code>과 동일합니다.</li> + </ul> + </dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="보간">보간</h2> + +<p>가시성은 <strong>보여짐</strong>과 <strong>보이지 않음</strong> 사이에서 보간할 수 있습니다. 따라서 시작이나 종료 값이 <code>visible</code>이 아니면 보간할 수 없습니다. 가시성 값은 이산값을 사용하며 <code>0</code>은 <code>hidden</code>, <code>0</code> 초과 <code>1</code> 이하의 모든 값은 <code>visible</code>에 맵핑됩니다. 범위 밖의 값(<code>cubic-bezier()</code> 함수의 y값이 [0, 1]을 벗어날 때만 트랜지션의 시작과 종료 시 발생)은 <code>0</code>과 <code>1</code> 중 더 가까운 값으로 취급합니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p class="visible">첫 번째 문단은 보입니다.</p> +<p class="not-visible">두 번째 문단은 보이지 않습니다.</p> +<p class="visible">세 번째 문단은 보입니다. 두 번째 문단이 여전히 공간을 차지하고 있어요.</p> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.visible { + visibility: visible; +} + +.not-visible { + visibility: hidden; +} +</pre> + +<p>{{EmbedLiveSample('기본_예제')}}</p> + +<h3 id="표_예제">표 예제</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td>1.1</td> + <td class="collapse">1.2</td> + <td>1.3</td> + </tr> + <tr class="collapse"> + <td>2.1</td> + <td>2.2</td> + <td>2.3</td> + </tr> + <tr> + <td>3.1</td> + <td>3.2</td> + <td>3.3</td> + </tr> +</table></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.collapse { + visibility: collapse; +} + +table { + border: 1px solid red; +} + +td { + border: 1px solid gray; +} +</pre> + +<p>{{EmbedLiveSample('표_예제')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p><code>visibility</code> 값을 <code>hidden</code>으로 설정한 요소는 <a href="/ko/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">접근성 트리</a>에서 제외됩니다. 즉 해당 요소와, 그 모든 자손 요소는 스크린 리더가 읽지 않습니다.</p> + +<h2 id="참고">참고</h2> + +<ul> + <li>일부 현대 브라우저에서는 <code>visibility: collapse</code>를 지원하지 않거나 잘못 지원합니다. 따라서 표의 행과 열이 아닌 요소에 사용했을 때 <code>visibility: hidden</code>과 똑같이 취급하지 않을 수도 있습니다.</li> + <li><code>visibility: collapse</code>를 적용한 칸에 중첩해서 다른 표가 존재하면 바깥 표의 레이아웃이 바뀔 수도 있습니다. 이를 방지하려면 중첩된 표에 <code>visibility: visible</code>을 명시해야 합니다.</li> +</ul> + +<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('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Defines the <code>collapse</code> value as it applies to flex items.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>No changes.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>visibility</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.visibility")}}</p> diff --git a/files/ko/web/css/white-space/index.html b/files/ko/web/css/white-space/index.html new file mode 100644 index 0000000000..21edd07317 --- /dev/null +++ b/files/ko/web/css/white-space/index.html @@ -0,0 +1,242 @@ +--- +title: white-space +slug: Web/CSS/white-space +tags: + - CSS + - CSS Property + - CSS Text + - Reference +translation_of: Web/CSS/white-space +--- +<div>{{CSSRef}}</div> + +<p>CSS <strong><code>white-space</code></strong> 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div> + + + +<div class="note"> +<p><strong>참고:</strong> 단어 안에서 줄이 바뀌기를 원하는 경우 {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}를 사용하세요.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css">/* Keyword values */ +white-space: normal; +white-space: nowrap; +white-space: pre; +white-space: pre-wrap; +white-space: pre-line; +white-space: break-spaces; + +/* Global values */ +white-space: inherit; +white-space: initial; +white-space: unset; +</pre> + +<p><code>white-space</code> 속성은 다음 목록의 키워드 값 중 하나를 사용해 설정합니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd> + <dt><code>nowrap</code></dt> + <dd>연속 공백을 하나로 합침. 줄 바꿈은 {{htmlelement("br")}} 요소에서만 일어납니다.</dd> + <dt><code>pre</code></dt> + <dd>연속 공백 유지. 줄 바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서만 일어납니다.</dd> + <dt><code>pre-wrap</code></dt> + <dd>연속 공백 유지. 줄 바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd> + <dt><code>pre-line</code></dt> + <dd>연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd> + <dt><code>break-spaces</code></dt> + <dd>다음 차이점을 제외하면 <code>pre-wrap</code>과 동일합니다. + <ul> + <li>연속 공백이 줄의 끝에 위치하더라도 공간을 차지합니다.</li> + <li>연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있습니다.</li> + <li>유지한 연속 공백은 <code>pre-wrap</code>과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(<code>min-content</code>, <code>max-content</code>)에 영향을 줍니다.</li> + </ul> + </dd> +</dl> + +<p>다음은 여러가지 <code>white-space</code> 값의 동작을 정리한 표입니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th></th> + <th>개행 문자</th> + <th>스페이스, 탭</th> + <th>자동 줄 바꿈</th> + <th>줄 끝의 공백</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>normal</code></th> + <td>병합</td> + <td>병합</td> + <td>예</td> + <td>제거</td> + </tr> + <tr> + <th><code>nowrap</code></th> + <td>병합</td> + <td>병합</td> + <td>아니오</td> + <td>제거</td> + </tr> + <tr> + <th><code>pre</code></th> + <td>유지</td> + <td>유지</td> + <td>아니오</td> + <td>유지</td> + </tr> + <tr> + <th><code>pre-wrap</code></th> + <td>유지</td> + <td>유지</td> + <td>예</td> + <td>넘침</td> + </tr> + <tr> + <th><code>pre-line</code></th> + <td>유지</td> + <td>병합</td> + <td>예</td> + <td>제거</td> + </tr> + <tr> + <th><code>break-spaces</code></th> + <td>유지</td> + <td>유지</td> + <td>예</td> + <td>줄 바꿈</td> + </tr> + </tbody> +</table> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="기본_예제">기본 예제</h3> + +<pre class="brush: css">code { + white-space: pre; +}</pre> + +<h3 id="HTMLElementpre_요소_내부의_줄_바꿈">{{HTMLElement("pre")}} 요소 내부의 줄 바꿈</h3> + +<pre class="brush: css">pre { + word-wrap: break-word; /* IE 5.5-7 */ + white-space: pre-wrap; /* current browsers */ +}</pre> + +<h2 id="실제로_보기">실제로 보기</h2> + +<div class="hidden" id="See_it_in_action_LiveSample"> +<pre class="brush: html"><div id="css-code" class="box"> + p { white-space: + <select> + <option>normal</option> + <option>nowrap</option> + <option>pre</option> + <option>pre-wrap</option> + <option>pre-line</option> + <option>break-spaces</option> + </select> } +</div> +<div id="results" class="box"> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</div></pre> + +<pre class="brush: css">.box { + width: 300px; + padding: 16px; + border-radius: 10px; +} + +#css-code { + background-color: rgb(220,220,220); + font-size: 16px; +} + +#results { + background-color: rgb(230,230,230); + overflow-x: scroll; + height: 400px; + white-space: normal; + font-size: 14px; +}</pre> + +<pre class="brush: js">var select = document.querySelector("#css-code select"); +var results = document.querySelector("#results p"); +select.addEventListener("change", function(e) { + results.setAttribute("style", "white-space: "+e.target.value); +})</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</pre> + +<h3 id="CSS_결과">CSS + 결과</h3> + +<p>{{EmbedLiveSample('See_it_in_action_LiveSample', '100%', 500)}}</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('CSS3 Text', '#propdef-white-space', 'white-space')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Precises the breaking algorithms.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.white-space")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>단어 안에서의 자동 줄 바꿈 방식을 지정하는 속성: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li> +</ul> diff --git a/files/ko/web/css/width/index.html b/files/ko/web/css/width/index.html new file mode 100644 index 0000000000..130c81148a --- /dev/null +++ b/files/ko/web/css/width/index.html @@ -0,0 +1,200 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/width +--- +<div>{{CSSRef}}</div> + +<p>CSS <strong><code>width</code></strong> 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, {{cssxref("box-sizing")}}이 <code>border-box</code>라면 테두리 영역의 너비를 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div> + + + +<p>{{cssxref("min-width")}}와 {{cssxref("max-width")}} 속성은 <code>width</code>를 덮어씁니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers">/* <length> */ +width: 300px; +width: 25em; + +/* <percentage> */ +width: 75%; + +/* 키워드 */ +width: 25em border-box; +width: 75% content-box; +width: max-content; +width: min-content; +width: available; +width: fit-content(20em); +width: auto; + +/* 전역 값 */ +width: inherit; +width: initial; +width: unset; +</pre> + +<p><code>width</code> 속성은 다음과 같이 지정합니다.</p> + +<ul> + <li><code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code> 키워드 중 하나.</li> + <li>하나의 <code><a href="#<length>"><length></a></code> 또는 <code><a href="#<percentage>"><percentage></a></code> 값.</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt><a id="<length>" name="<length>">{{cssxref("<length>")}}</a></dt> + <dd>너비의 절댓값.</dd> + <dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt> + <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율. 컨테이닝 블록이 요소 너비에 영향을 받는 경우의 결과 레이아웃은 정해지지 않습니다.</dd> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>요소의 너비를 브라우저가 계산해 지정합니다.</dd> + <dt><a id="max-content" name="max-content"><code>max-content</code></a></dt> + <dd>본질적인 선호 너비.</dd> + <dt><a id="min-content" name="min-content"><code>min-content</code></a></dt> + <dd>본질적인 최소 너비.</dd> + <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content({{cssxref("<length-percentage>")}}</code></a></dt> + <dd><code>min(max-content, max(min-content, <length-percentage>))</code>의 결과.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="기본_너비">기본 너비</h3> + +<pre class="brush:css">p.goldie { + background: gold; +}</pre> + +<pre class="brush:html"><p class="goldie">모질라 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.</p></pre> + +<p>{{EmbedLiveSample('기본_너비', '500px', '64px')}}</p> + +<h3 id="px과_em"><code>px</code>과 <code>em</code></h3> + +<pre class="brush: css">.px_length { + width: 200px; + background-color: red; + color: white; + border: 1px solid black; +} + +.em_length { + width: 20em; + background-color: white; + color: red; + border: 1px solid black; +} +</pre> + +<pre class="brush: html"><div class="px_length">픽셀 너비</div> +<div class="em_length">em 너비</div></pre> + +<p>{{EmbedLiveSample('px과_em', '500px', '64px')}}</p> + +<h3 id="백분율">백분율</h3> + +<pre class="brush: css">.percent { + width: 20%; + background-color: silver; + border: 1px solid red; +}</pre> + +<pre class="brush: html"><div class="percent">백분율 너비</div></pre> + +<p>{{EmbedLiveSample('백분율', '500px', '64px')}}</p> + +<h3 id="max-content_2"><code>max-content</code></h3> + +<pre class="brush:css;">p.maxgreen { + background: lightgreen; + width: intrinsic; /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ + width: max-content; +}</pre> + +<pre class="brush:html"><p class="maxgreen">Mozilla 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.</p></pre> + +<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p> + +<h3 id="min-content_2"><code>min-content</code></h3> + +<pre class="brush:css">p.minblue { + background: lightblue; + width: -moz-min-content; /* Firefox */ + width: -webkit-min-content; /* Chrome */ + width: min-content; +}</pre> + +<pre class="brush:html"><p class="minblue">Mozilla 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.</p></pre> + +<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>페이지를 확대하거나 글꼴 크기를 늘렸을 때 <code>width</code> 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0</a></li> +</ul> + +<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('CSS4 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS4 Sizing')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Added the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> keywords.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Precises on which element it applies to.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#width', 'width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.width")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li> +</ul> diff --git a/files/ko/web/css/will-change/index.html b/files/ko/web/css/will-change/index.html new file mode 100644 index 0000000000..c641f89ad1 --- /dev/null +++ b/files/ko/web/css/will-change/index.html @@ -0,0 +1,171 @@ +--- +title: will-change +slug: Web/CSS/will-change +translation_of: Web/CSS/will-change +--- +<div>{{CSSRef}}</div> + +<h2 id="요약">요약</h2> + +<p><span class="seoSummary"><strong><code>will-change</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공케 한다. 그래서 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화할 수 있다. 이러한 종류의 최적화는 잠재적으로 성능 비용이 큰 작업을 그것이 실제로 요구되기 전에 미리 실행함으로써 페이지의 반응성을 증가시킬 수 있다.</span></p> + +<p>이 속성을 적당하게 사용하는 것이 꽤 어려울 수 있다:</p> + +<ul> + <li> + <p id="Don't_apply_will-change_to_too_many_elements"><em>너무 많은 요소에 will-change 를 적용하지 말라.</em> 브라우저는 모든 것을 최적화하기 위해 가능한 모든 것을 이미 시도하고 있다. will-change 와 묶인 강한 최적화의 몇은 많은 기기 자원을 소모할 것이다. 또한 이 같은 과도한 사용은 페이지 속도를 늦추거나 엄청난 자원을 소비할 수 있다.</p> + </li> + <li> + <p><em>아껴 사용하라.</em> 브라우저가 만드는 최적화의 기본 행동은 가능한 바로 최적화를 제거하고 기본 상태로 돌리는 것이다. 그러나 will-change를 스타일시트에 직접 추가하는 것은 목표 요소가 곧 변경되어 (will-change 를 정의하지 않았을 때보다) 더 오랜 시간동안 최적화를 유지하리란 것을 암시한다. 스크립트 코드를 사용하여 변화발생의 전후로 will-change 의 활성/비활성을 바꿔주는 것이 좋다.</p> + </li> + <li> + <p><em>서둘러 최적화하기 위해 will-change 를 적용하지 말라. </em>만약 페이지가 잘 돌아간다면 단지 조금 더 빨리하기 위해 will-change 속성을 추가하지 말라. <code>will-change</code> 는 당장의 성능 문제를 해결하기 위한 마지막 수단으로 사용되기 위해 계획된 것이다. 성능문제를 예상하며 사용되어선 안된다. will-change 의 초과사용은 브라우저가 가능한 변화에 대한 준비를 시도하기 때문에 과도한 메모리 사용과 더 복잡한 렌더링을 초래할 것이다. 더 열악한 성능을 이끌 것이다.</p> + </li> + <li> + <p id="Give_it_sufficient_time_to_work"><em>작업할 충분한 시간을 줘라.</em> 이 속성은 작성자로 하여금 사용자 에이전트가 변경가능한 속성을 미리 알 수 있게 하도록고안되었다. 그러면 브라우저는 실제 속성변화가 발생하기 전에 속성에 요구되는 어떠한 최적화던지 미리 적용하는 것을 선택할 수 있다. 그래서 브라우저가 실제 최적화를 할 시간을 주는 것은 중요하다. 변화가 발생하기 조금 전에라도 그 변화를 예상할 방법을 찾아 <code>will-change</code> 를 설정하라.</p> + </li> +</ul> + +<p>{{cssinfo}}</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css">/* 키워드 값 */ +will-change: auto; +will-change: scroll-position; +will-change: contents; +will-change: transform; /* Example of <custom-ident> */ +will-change: opacity; /* Example of <custom-ident> */ +will-change: left, top; /* Example of two <animateable-feature> */ + +/* 전역 값 */ +will-change: inherit; +will-change: initial; +will-change: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>이 키워드는 특정 의도 없음을 나타낸다; 사용자 에이전트는 보통 실행하는 어떤 발견한 방법이던 최적화이던 적용해야 한다.</dd> +</dl> + +<p><code><animateable-feature></code> 는 다음의 값중 하나일 수 있다:</p> + +<dl> + <dt><code>scroll-position</code></dt> + <dd>머지않아 요소 스크롤 위치의 변경 혹은 변이에 대한 기대를 가르킨다.</dd> + <dt><code>contents</code></dt> + <dd>머지않아 요소 내용에 대한 변경 혹은 변이에 대한 기대를 가르킨다.</dd> + <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> + <dd>머지않아 해당 요소의 주어진 이름의 속성에 대한 변경 혹은 변이에 대한 기대를 가르킨다. 만약 주어진 속성이 축약형이라면 그 안에 들어간 나열된 속성 모두에 대한 기대이다. 다음의 값들은 불가능하다: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, <code>contents</code>. 명세는 특정값의 행동을 정의하지 않으나 but it is common for <code>transform</code> to be a compositing layer hint. <a href="https://github.com/operasoftware/devopera/pull/330">Chrome currently takes two actions</a>, given particular CSS property idents: establish a new compositing layer or a new {{Glossary("stacking context")}}.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예시">예시</h2> + +<pre class="brush: css">.sidebar { + will-change: transform; +} +</pre> + +<p>상단 예시는 will-change 속성을 스타일시트에 직접 추가한다: 이것은 브라우저가 항상 메모리내에서 필요보다 더 오래동안 최적화를 유지하도록 하는데 바로 이렇게 스타일시트에 직접 삽입하는 것을 피해야 할 이유로서 살펴봤던 것이다. 아래는 스크립트를 통해 will-change 를 적용하는 법의 다른 예시를 보여주고 십중팔구 대부분의 경우에 이렇게 시행해야 한다.</p> + +<pre class="brush: js">var el = document.getElementById('element'); + +// 요소가 hover 상태일 때 will-change 설정 +el.addEventListener('mouseenter', hintBrowser); +el.addEventListener('animationEnd', removeHint); + +function hintBrowser() { + // 애니메이션 키프레임 단락 내에서 + // 변경될 예정인 최적화 가능한 속성들 + this.style.willChange = 'transform, opacity'; +} + +function removeHint() { + this.style.willChange = 'auto'; +}</pre> + +<p>그러나 페이지가 크고 복잡한 앨범 혹은 슬라이드 다발로 이뤄진 프레젠테이션등 키를 눌러서 페이지를 넘기는 어플리케이션등을 위해선 스타일시트에 will-change 를 직접 포함시키는 것이 적절할 것이다. 이것은 브라우저가 미리 변이를 준비하게 해 키가 눌리자마자 페이지간의 팔팔한 애니메이션을 가능케 할 것이다.</p> + +<pre class="brush: css">.slide { + will-change: transform; +}</pre> + +<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 Will Change', '#will-change', 'will-change')}}</td> + <td>{{Spec2('CSS Will Change')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(36)}}</td> + <td>{{CompatGeckoDesktop(36)}} [1]</td> + <td><a href="https://dev.modern.ie/platform/status/csswillchange/?filter=f3e0000bf&search=will-change">{{CompatNo}}</a></td> + <td>{{CompatOpera(24)}}</td> + <td>{{CompatSafari(9.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>37</td> + <td>{{CompatGeckoMobile(36)}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.3</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] From Firefox 31 to 35, <code>will-change</code> was available, but only if the user flipped the <code>layout.css.will-change.enabled</code> flag to <code>true</code>. The preference have been removed in Firefox 43.</p> + +<p>Firefox allows to set <code>will-change: will-change</code> up to version 42.0, which is invalid by the spec. This was fixed in Firefox 43.0. See {{bug("1195884")}}.</p> diff --git a/files/ko/web/css/word-break/index.html b/files/ko/web/css/word-break/index.html new file mode 100644 index 0000000000..16a7eeecc4 --- /dev/null +++ b/files/ko/web/css/word-break/index.html @@ -0,0 +1,141 @@ +--- +title: word-break +slug: Web/CSS/word-break +tags: + - CSS + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/word-break +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>word-break</code></strong> 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div> + + + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +word-break: normal; +word-break: break-all; +word-break: keep-all; +word-break: break-word; /* 사용 안함 */ + +/* 전역 값 */ +word-break: inherit; +word-break: initial; +word-break: unset; +</pre> + +<p><code>word-break</code> 속성은 아래의 값 중 하나를 선택해서 지정할 수 있습니다.</p> + +<h3 class="brush:css" id="값">값</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>기본 줄 바꿈 규칙을 사용합니다.</dd> + <dt><code>break-all</code></dt> + <dd>오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)</dd> + <dt><code>keep-all</code></dt> + <dd>한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 <code>normal</code>과 동일합니다.</dd> + <dt><code>break-word</code> {{Deprecated_inline}}</dt> + <dd>실제 {{cssxref("overflow-wrap")}} 속성에 상관하지 않고, <code>word-break: normal</code>과 <code>overflow-wrap: anywhere</code>를 설정한 것과 같은 효과를 냅니다.</dd> +</dl> + +<div class="note"> +<p><strong>참고:</strong> <code>word-break: break-word</code>와 <code>overflow-wrap: break-word</code>({{cssxref("overflow-wrap")}} 참고)와 달리, <code>word-break: break-all</code>은 텍스트의 오버플로가 시작하는 정확한 지점에서 줄을 바꿉니다. 단어 전체를 다음 줄로 이동하면 중간을 끊지 않아도 될 상황에서도 마찬가지입니다.</p> +</div> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{cssinfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>1. <code>word-break: normal</code></p> +<p class="normal narrow">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + +<p>2. <code>word-break: break-all</code></p> +<p class="breakAll narrow">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + +<p>3. <code>word-break: keep-all</code></p> +<p class="keepAll narrow">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> + +<p>4. <code>word-break: break-word</code></p> +<p class="breakWord narrow">This is a long and + Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.narrow { + padding: 5px; + border: 1px solid; + display: table; + max-width: 100%; +} + +.normal { + word-break: normal; +} + +.breakAll { + word-break: break-all; +} + +.keepAll { + word-break: keep-all; +} + +.breakWord { + word-break: break-word; +} +</pre> + +<p>{{EmbedLiveSample('예제', '100%', 600)}}</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('CSS3 Text', '#word-break-property', 'word-break')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.word-break")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("overflow-wrap")}}</li> +</ul> diff --git a/files/ko/web/css/word-spacing/index.html b/files/ko/web/css/word-spacing/index.html new file mode 100644 index 0000000000..f81c96a0b9 --- /dev/null +++ b/files/ko/web/css/word-spacing/index.html @@ -0,0 +1,127 @@ +--- +title: word-spacing +slug: Web/CSS/word-spacing +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/word-spacing +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>word-spacing</code></strong> 속성은 단어와 단어 사이, 태그와 태그 사이의 거리를 설정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="구문">구문</h2> + +<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */ +word-spacing: normal; + +/* <length> 값 */ +word-spacing: 3px; +word-spacing: 0.3em; + +/* <percentage> 값 */ +word-spacing: 50%; +word-spacing: 200%; + +/* 전역 값 */ +word-spacing: inherit; +word-spacing: initial; +word-spacing: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>현재 글씨체와 브라우저가 결정한 일반적인 단어 간격을 사용합니다.</dd> + <dt>{{cssxref("length")}}</dt> + <dd>지정한 길이를 기본 단어 간격에 더합니다.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>영향 받는 문자 최대 폭의 백분율만큼을 기본 단어 간격에 더합니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="mozdiv1">다양한 단어...</div> +<div id="mozdiv2">...더 많은 단어</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#mozdiv1 { + word-spacing: 15px; +} + +#mozdiv2 { + word-spacing: 5em; +} </pre> + +<p>{{ EmbedLiveSample('예제') }}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>큰 절댓값의 <code>word-spacing</code>을 적용한 문장은 거의 읽기 힘들어집니다. 큰 양의 값을 적용하면 단어의 사이가 너무나도 멀어져서 문장처럼 보이지 않습니다. 반면 지나친 음의 값을 적용하면 단어끼리 서로 겹쳐서 어느 단어의 시작과 끝을 알아차리지 못하게 됩니다.</p> + +<p>글씨체마다 문자 너비가 다르므로, 가독성을 확보하는 수준의 <code>word-spacing</code> 역시 상황에 맞춰 결정해야 합니다. 모든 글씨체에서 가독성을 유지하는 단 하나의 값은 존재하지 않습니다.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="형식_정의">형식 정의</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="형식_구문">형식 구문</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<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('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Replaces the previous values with a <code><spacing-limit></code> value that defines the same thing, plus the <code><percentage></code> value. Allows up to three values describing the optimum, minimum, and maximum value.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.word-spacing")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("letter-spacing")}}</li> +</ul> diff --git a/files/ko/web/css/z-index/index.html b/files/ko/web/css/z-index/index.html new file mode 100644 index 0000000000..0c3cb36b9e --- /dev/null +++ b/files/ko/web/css/z-index/index.html @@ -0,0 +1,138 @@ +--- +title: z-index +slug: Web/CSS/z-index +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference +translation_of: Web/CSS/z-index +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>z-index</code></strong> 속성은 <a href="/ko/docs/Web/CSS/position">위치 지정 요소</a>와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 <code>z-index</code> 값을 가진 요소가 작은 값의 요소 위를 덮습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div> + + + +<p>위치 지정 요소(<code>position</code>이 <code>static</code> 외의 다른 값인 요소)의 박스에 대해, <code>z-index</code> 속성은 다음 항목을 지정합니다.</p> + +<ol> + <li>현재 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>에서 자신의 위치.</li> + <li>자신만의 쌓임 맥락 생성 여부.</li> +</ol> + +<h2 id="구문">구문</h2> + +<pre class="brush: css">/* 키워드 값 */ +z-index: auto; + +/* <integer> 값 */ +z-index: 0; +z-index: 3; +z-index: 289; +z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */ + +/* 전역 값 */ +z-index: inherit; +z-index: initial; +z-index: unset;</pre> + +<p>z-index 속성은 <code>{{anch("auto")}}</code> 키워드 또는 <code>{{anch("<integer>")}}</code> 값을 사용해 지정할 수 있습니다.</p> + +<h3 id="값">값</h3> + +<dl> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>박스가 새로운 쌓임 맥락을 생성하지 않습니다. 현재 쌓임 맥락에서의 위치는 부모 요소와 동일합니다.</dd> + <dt><a id="<integer>" name="<integer>">{{cssxref("<integer>")}}</a></dt> + <dd>현재 쌓임 맥락에서의 위치로 이 값을 사용합니다. 또한 자신만의 쌓임 맥락을 생성하고, 해당 맥락에서 자신의 위치를 <code>0</code>으로 설정합니다. 이로 인해 자손의 <code>z-index</code>를 자기 외의 바깥 요소와 비교하지 않습니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="dashed-box">Dashed box + <span class="gold-box">Gold box</span> + <span class="green-box">Green box</span> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[3,11,19]">.dashed-box { + position: relative; + z-index: 1; + border: dashed; + height: 8em; + margin-bottom: 1em; + margin-top: 2em; +} +.gold-box { + position: absolute; + z-index: 3; /* put .gold-box above .green-box and .dashed-box */ + background: gold; + width: 80%; + left: 60px; + top: 3em; +} +.green-box { + position: absolute; + z-index: 2; /* put .green-box above .dashed-box */ + background: lightgreen; + width: 20%; + left: 65%; + top: -25px; + height: 7em; + opacity: 0.9; +} +</pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample('예제', '550', '200', '') }}</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('CSS3 Transitions', '#animatable-css', 'visibility') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>visibility</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visuren.html#z-index', 'z-index') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.z-index")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>CSS {{ Cssxref("position") }} 속성</li> + <li><a href="/ko/docs/Web/CSS/Understanding_z-index" title="ko/CSS/Understanding_z-index">CSS z-index 이해하기</a></li> +</ul> diff --git a/files/ko/web/css/시작하기/리스트/index.html b/files/ko/web/css/시작하기/리스트/index.html new file mode 100644 index 0000000000..527eaaa768 --- /dev/null +++ b/files/ko/web/css/시작하기/리스트/index.html @@ -0,0 +1,244 @@ +--- +title: 리스트 +slug: Web/CSS/시작하기/리스트 +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<p>{{ CSSTutorialTOC() }}</p> +<div class="warning"> + <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Content", "내용물") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지 설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.</p> +<h2 class="clearLeft" id="정보_리스트">정보: 리스트</h2> +<p><a href="/en-US/docs/CSS/Getting_Started/Content" title="/en-US/docs/CSS/Getting_Started/Content">지난 섹션</a>에서 도전과제를 해결했다면, 어떤 elememt 앞에 리스트 아이템처럼 보여지는 내용물을 추가 하는 법을 보았을 것이다.</p> +<p>CSS는 리스트를 위한 특별한 속성을 제공한다. 이는 무엇보다도 사용하기 편리한 방법이다.</p> +<p>리스트 속성을 지정 하려면, {{ cssxref("list-style") }} 속성을 통해 마커 타입을 지정하라.</p> +<p>CSS에 있는 설렉터 규칙은 리스트 아이템 element를 선택 할 수도 있고(예를 들면, {{ HTMLElement("li") }}) 부모 리스트 element도 선택 가능하다. (예를 들면 {{ HTMLElement ("ul") }}) 리스트 element도 스타일을 상속 받는다.</p> +<h3 id="무순서_리스트">무순서 리스트</h3> +<p><em>무순서</em> 리스트에서는, 각 리스트 아이템들이 같은 방식으로 mark된다.</p> +<p>CSS는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.</p> +<ul style="padding-left: 2em;"> + <li style="list-style-type: disc;"><code>disc</code></li> + <li style="list-style-type: circle;"><code>circle</code></li> + <li style="list-style-type: square;"><code>square</code></li> +</ul> +<p>다른 이미지도 URL로 설정 가능하다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>아래 규칙은 서로 다른 class의 리스트 아이템에 서로 다른 마커를 사용하고 있다.</p> + <pre class="brush:css">li.open {list-style: circle;} +li.closed {list-style: disc;} +</pre> + <p>When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):</p> + <pre class="brush:css"><ul> + <li class="open">Lorem ipsum</li> + <li class="closed">Dolor sit</li> + <li class="closed">Amet consectetuer</li> + <li class="open">Magna aliquam</li> + <li class="closed">Autem veleum</li> +</ul> +</pre> + <p>위 코드는 아래처럼 보여질 것이다.</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul style="padding-right: 6em;"> + <li style="list-style-type: circle;">Lorem ipsum</li> + <li style="list-style-type: disc;">Dolor sit</li> + <li style="list-style-type: disc;">Amet consectetuer</li> + <li style="list-style-type: circle;">Magna aliquam</li> + <li style="list-style-type: disc;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="순차_리스트">순차 리스트</h3> +<p>순차리스트는 각 리스트 아이템이 순차적으로 순서가 표시된 마커와 보여진다.</p> +<p>{{ cssxref("list-style") }}속성으로 마커 타입을 설정 하라.</p> +<ul style="padding-left: 2em;"> + <li style=""><code>decimal</code></li> + <li style=""><code>lower-roman</code></li> + <li style=""><code>upper-roman</code></li> + <li style=""><code>lower-latin</code></li> + <li style=""><code>upper-latin</code></li> +</ul> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 예제에서는 'info' class의 {{ HTMLElement("ol") }} elements에서, 아이템들이 대문자 순차 마커로 표시된다.</p> + <pre class="brush:css">ol.info {list-style: upper-latin;} +</pre> + <p>아래 리스트 내의 {{ HTMLElement("li") }} element는 위의 스타일을 상속한다.</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul> + <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>{{ cssxref("list-style") }}속성은 약어이다. 다소 복잡한 stylesheet에서는 속성과 그 값을 분리해서 사용하기를 원할 수 있다. 이 분리된 속성을 연결하는 방법이나 CSS에서 리스트에 더 자세한 설정법을 알려면{{ cssxref("list-style") }} 참조 페이지를 확인하라.</p> + <p>만약 HTML같은 관습적인 태그 비순차 리스트 아이템({{ HTMLElement("ul") }})와 순차 리스트 아이템({{ HTMLElement("ol") }})를 제공하는 마크업 언어를 사용한다면, 그 태그를 써서 쉽게 연습 해 볼 수 있다. 어쨌던 CSS써서 {{ HTMLElement("ul") }}를 순차 표시 할수 있고 {{ HTMLElement("ol") }} 를 통해 비순차를 원한다면 표시 할 수도 있다.</p> + <p>브라우저마다 리스트 스타일을 보여주는 자체 방식이 있다. Stylesheet로 모든 브라우저에서 동일하게 보여지는 것을 기대하지는 마라.</p> +</div> +<h3 id="카운터">카운터</h3> +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> + <p><strong>참고: </strong> 일부 브라우저는 카운터를 지원하지 않는다. <a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site의 </a><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html">CSS 내용물과 브라우저 호환성</a> 페이지에 브라우저 호환 차트와 CSS의 다른 기능에 대한 호환성을 확인 할 수 있다. 이 사이트 <a href="/en/CSS_Reference" title="https://developer.mozilla.org/en/CSS_Reference">CSS 참조Reference</a>의 individual page(?)에는 브라우저 호환성 테이블도 확인 할 수 있다.</p> +</div> +<p>리스트 아이템 나열 뿐 아니라 Element를 순위매김 하기 위해 카운터를 사용할 수 있다. 예를 들어, documents내에서 머릿말니아 단락의 순서를 표시 하고 싶을때 사용 가능하다.</p> +<p>순위 매김을 사용하려면 카운터에 이름을 할당하여 사용하면 된다.</p> +<p>element에 순위메김 추가를 시작하기 전에 {{ cssxref("counter-reset") }}속성으로 초기화 하고 사용하고자 하는 카운터 이름을 쓰라. 카운터를 사용하는 elements의 부모에다 초기화 과정을 적용하는 것이 좋다. 그러나, 리스트 아이템 시작하기 전 어느 element에서든 초기화를 사용해도 된다.</p> +<p>카운터가 증가하는 각 element에서, {{ cssxref("counter-increment") }} 속성을 사용하여 증가 하고 증가 하고자 하는 이름도 표시하라.</p> +<p>카운터를 표시하기 위해서는 {{ cssxref(":before") }}나 {{ cssxref(":after") }} 설렉터를 써서 <code>content속성을 사용하여라.</code>(이전 페이지에서, <strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong>사용에 대해 참고하라).</p> +<p><code>content</code> 속성 값에 <code>counter()카운터 이름과 함께 사용하라.</code> 선택적으로 타입도 명시 가능하다. 타입은 위에서 언급한 <strong>Ordered lists</strong> 섹션에 나온것과 같다.</p> +<p>보통 카운터를 표시하는 element도 하나씩 카운터 값이 증가 한다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 규칙은 class가 'numbered'인 모든 {{ HTMLElement("h3") }} element의 카운터를 초기화 한다.</p> + <pre class="brush:css">h3.numbered {counter-reset: mynum;} +</pre> + <p> </p> + <p>이 아래 규칙은 모든 'numbered' class의 {{ HTMLELement("p") }} element에 카운터 값을 표시하고 그 값을 증가 시킨다.</p> + <pre class="brush:css">p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> + <p>결과는 아래와 같다.</p> + <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> + <tbody> + <tr> + <td><strong>Heading</strong><br> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>카운터가 지원되지 않는 브라우저에서는 카운터를 사용 할 수 없다.</p> + <p>카운터가 사용 가능하다면 카운터로 리스트아이템에서 지원 되는 것처럼 별도로 다른 내용물에 순위매김을 사용 할 수 있다. 예를 들면 위에서 처럼, 카운터는 굵은 글씨로 그외 아이템은 정상 글씨로 가능하다.</p> + <p>좀더 다양한 방법으로 카운터를 사용 할 수 있는데 —예를 들면, 형식적인 Document의 순서 섹션, 머릿말, 보조 머릿말과 단락등에서 사용 가능하다. 자세한 사항은 CSS사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 를 확인 하라.</p> +</div> +<h2 id="액션_화려한_리스트">액션: 화려한 리스트</h2> +<p><code>새로이 doc2.html</code>파일을 만들어라. 아래 코드를 복사하라.</p> +<pre class="brush:html;"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document 2</title> + <link rel="stylesheet" href="style2.css"> + </head> + <body> + + <h3 id="oceans">The oceans</h3> + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <h3 class="numbered">Numbered paragraphs</h3> + <p class="numbered">Lorem ipsum</p> + <p class="numbered">Dolor sit</p> + <p class="numbered">Amet consectetuer</p> + <p class="numbered">Magna aliquam</p> + <p class="numbered">Autem veleum</p> + + </body> +</html> +</pre> +<p><code>style2.css</code>를 만들어 아래 내용을 복사하라.</p> +<pre class="brush:css;">/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> +<p>배치와 주석이 맘에 들지 않으면 마음대로 변경하라.</p> +<p>브라우저에서 열어보라. 만약 브라우저가 카운터를 지원 한다면 아래 예제와 같이 보일 것이다. 브라우저가 지원하지 않는다면 숫자는 보이지 않을 것이다. (콜론도 보이지 않을 것이다.)</p> +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> +<div class="tuto_example"> + <div class="tuto_type"> + 도전</div> + <p>예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.</p> + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> + </table> + <p> </p> + <p>예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.</p> + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> + <p><strong>. . .</strong></p> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> + </table> +</div> +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">정답 확인.</a></p> +<h2 id="다음에는">다음에는?</h2> +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(<a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">boxes</a>.xm).</p> diff --git a/files/ko/web/css/시작하기/미디어/index.html b/files/ko/web/css/시작하기/미디어/index.html new file mode 100644 index 0000000000..2c9fceaca0 --- /dev/null +++ b/files/ko/web/css/시작하기/미디어/index.html @@ -0,0 +1,346 @@ +--- +title: 미디어 +slug: Web/CSS/시작하기/미디어 +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +<p>{{ CSSTutorialTOC() }}</p> +<div class="warning"> + <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/21)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서의 14번쨰 장. 지금까지 이번 안내서에서는 많은 부분을 Document를 어떻게 보여 줄것인지 결정하는 CSS의 속성과 변수에 관해 소개 했다. 이번에는 Stylesheet의 구조와 목적에 대해 다시 살펴 보자.</p> +<h2 class="clearLeft" id="정보_미디어">정보 : 미디어</h2> +<p>CSS의 목적은 Document가 사용자에게 어떻게 보여질 것인가를 설정하는 것이다. 전시되는 형태는 하나 이상의 형식이 있다.</p> +<p>예를 들면, 아마도 이 페이지도 화면 표시 장치를 통해 보여질 것이다. 그러나 큰 화면용으로 프로젝터나 프린트해서 보는 경우도 있을 것이다. 이런 다양한 미디어의 경우 그 고유의 문자셋같은 특징이 있을 것이다. CSS는 document를 각각의 미디어에 표시하기 위한 다양한 방법을 제공한다.</p> +<p>미디어의 특정 타입을 정하는 규칙을 추가 하려면 {{ CSSXref("@media") }} 다음에 미디어 타입 넣고, 그 다음에 대괄호({})로 해당 규칙을 추가 하라.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>웹사이트에 있는 document는 그 사이트 전체를 살펴볼수 있도록 조절 할 수 있는 영역을 제공한다.</p> + <p>마크업 언어에서는, 조정영역의 부모 element의 <strong>id</strong>가 <code>nav-area</code>이다. ({{ HTMLVersionInline(5) }}에서는 <strong>id</strong> 속성이 포함된 {{ HTMLElement("div") }}대신에 {{ HTMLElement("nav") }} element로 사용 할 수 있다.)</p> + <p>Document가 프린트 될 경우는 이 조정 영역이 필요 없으므로 stylesheet에서는 완전히 이 영역을 제거한다.</p> + <pre class="brush:css">@media print { + #nav-area {display: none;} + } +</pre> +</div> +<p>일반적인 미디어 타입은 아래와 같다.</p> +<table class="standard-table"> + <tbody> + <tr> + <td><code>screen</code></td> + <td>컬러 컴퓨터 표시 장치</td> + </tr> + <tr> + <td><code>print</code></td> + <td>출력 장치</td> + </tr> + <tr> + <td style="padding-right: 1em;"><code>projection</code></td> + <td>프로젝트 출력 장치</td> + </tr> + <tr> + <td><code>all</code></td> + <td>그외 모든 미디어 장치(기본 설정)</td> + </tr> + </tbody> +</table> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>한 무리의 규칙들의 미디어 타입을 설정하는데는 다른 방법들도 있다.</p> + <p>Stylesheet가 document로 연결되어 있을때 document의 마크업 언어는 미디어 타입을 설정하는 것을 허용한다. 예를 들면, HTML내의 <code>LINK</code> 태그에서 <code>media속성으로 옵션항목으로 미디어 타입을 설정 할 수 있다.</code></p> + <p>CSS에서 stylesheet의 앞부분에 {{ CSSXref("@import") }}로 URL로 부터 다른 stylesheet를 불러 올 수 있다. 추가적으로 미디어 타입도 사용 가능하다.</p> + <p>이와 같은 규직으로, 미디어 타입별로 다른 파일에 분리하여 관리 가능하다. 이렇게 함으로써 stylesheet를 구조화하는데 유용하게 사용한다.</p> + <p>좀더 자세한 미디어 타입에 대해서는 CSS의 사양서중 <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a>를 참고하라.</p> + <p>{{ cssxref("display") }}속성에 대해서 좀더 자세한 사항은 이 안내서 나중에 소개될 <a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a>를 참고하라.</p> +</div> +<h3 id="출력">출력</h3> +<p>CSS에는 인쇄 매체나 프린터 출력을 위한 특별 지원을 한다</p> +<p>{{ cssxref("@page") }} 규칙을 통해 여백을 설정할 수 있다. 양면출력을 위해서는 <code>@page:left</code>와 <code>@page:right</code>로 각각의 여백을 개별로 설정 할 수 있다.</p> +<p>출력 매체를 위해 사용되는 단위는 인치 (<code>in</code>), 포인트(<code>pt</code> = 1/72 inch), 센티미터(<code>cm</code>)와 밀리미터(<code>mm</code>)등을 사용 할 수 있다. 글자 크기 설정과 맞추기 위해 사용하는 ems(em)과 퍼센트(%)도 사용하기에 적절하다.</p> +<p>Document의 내용중 페이지 분할을 위해서는 { cssxref("page-break-before") }}나 {{ cssxref("page-break-after") }}, {{ cssxref("page-break-inside") }}속성을 사용할 수 있다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>아래 예제는 페이지 여백 4방향 모두를 1인치로 설정한다.</p> + <pre class="brush:css">@page {margin: 1in;} +</pre> + <p> </p> + <p>아래 규칙은 모든 H1 element는 새 페이지에서 시작하도록 한다.</p> + <pre class="brush:css">h1 {page-break-before: always;} +</pre> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>CSS의 출판 매체 지원에 대한 사항은 CSS사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a>를 확인 하라.</p> + <p>CSS의 다른 특징처럼 프린트 출력도 브라우저의 설정에 따라 다르다. 예를 들어 모질라 브라주저는 프린트 출력시 기본 바깥 여백과 머릿말, 꼬릿말이 지원된다. 사용자가 어떤 브라우저를 사용하는지, 그 브라우저의 설정값 또한 알수 없기 때문에 해당 페이지 출력물 결과를 알수 없다.</p> +</div> +<h3 id="사용자_인터페이스">사용자 인터페이스</h3> +<p>CSS는 컴퓨터 모니터같은 표시장치를 위한 특별한 사용자 인터페이스를 지원한다. 이 속성으로 Document를 동적으로 사용자가 사용자 인터페이스로 동작 할 수 있도록 변경한다.</p> +<p>사용자 인터페이스 장치에 대한 특별한 미디어 타입은 없다.</p> +<p>단지 5가지 설렉터가 있을 뿐이다.</p> +<table class="standard-table"> + <tbody> + <tr> + <td><strong>설렉터</strong></td> + <td><strong>선택</strong></td> + </tr> + <tr> + <td><code>E{{ cssxref(":hover") }}</code></td> + <td>포인터가 E로 명시된 element위에 놓일 경우</td> + </tr> + <tr> + <td><code>E{{ cssxref(":focus") }}</code></td> + <td>키보드 포커스를 가진 E element</td> + </tr> + <tr> + <td><code>E{{ cssxref(":active") }}</code></td> + <td>사용자 현재 동작에 개임된 E element</td> + </tr> + <tr> + <td><code>E{{ cssxref(":link") }}</code></td> + <td>최근에 방문하지 않은 URL을 가진 Hyperlink인 E element</td> + </tr> + <tr> + <td><code>E{{ cssxref(":visited") }}</code></td> + <td>최근에 방문한 URL을 가진 Hyperlink인 E element</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>주의: </strong>:visited 설렉터에서 획득한 정보는 {{ gecko("2.0") }}에만 해당된다. 좀더 자세한 사항은 <a href="/en/CSS/Privacy_and_the_:visited_selector" title="en/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a>을 보라.</p> +</div> +<p>{{ cssxref("cursor") }}속성은 포인터의 모양을 설정한다. 몇몇 일반적인 모양은 다음과 같다. 브라우저에서 마우스를 아래 리스트에 각각 아이템으로 옮기면 그 모양을 확인 할 수 있다.</p> +<table class="standard-table"> + <tbody> + <tr> + <td><strong>설렉터</strong></td> + <td><strong>선택</strong></td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td>링크임을 나타낼때</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td>프로그램이 실행중이라 입력을 받지 못하는 상태일때</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td>프로그램이 작업을 수행하고 있지만 입력을 받을 수 있는 상태</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td>기본 상태(보통 화살표 모양)</td> + </tr> + </tbody> +</table> +<p>{{ cssxref("outline") }}속성은 키보드 포커스를 가리키는 외곽선을 생성할때 사용한다. 그 값은 사용자가 방향을 설정할 수 없다는 것을 제외하고는 {{ cssxref("border") }}속성과 유사하다.</p> +<p>Some other features of user interfaces are implemented using attributes, in the normal way. For example, an element that is disabled or read-only has the <strong>disabled</strong> attribute or the <strong>readonly</strong> attribute. Selectors can specify these attributes like any other attributes, by using square brackets: <code>{{ mediawiki.external('disabled') }}</code> or <code>{{ mediawiki.external('readonly') }}</code>.</p> +<div class="tuto_example"> + <div class="tuto_type"> + Example</div> + <p>These rules specify styles for a button that changes dynamically as the user interacts with it:</p> + <pre class="brush:css">.green-button { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.green-button[disabled] { + background-color:#cdc; + color:#777; + } + +.green-button:active { + border-style: inset; + } +</pre> + <p> </p> + <p>This wiki does not support a user interface on the page, so these buttons do not "click". Here are some static images to illustrate the idea:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: #fff;"> + <tbody> + <tr> + <td> + <table> + <tbody> + <tr> + <td><span style="width: 8em; height: 2em; background-color: #cdc; color: #777; padding: .5em 1em; cursor: default; margin-right: 1em; border: 2px outset #cec;">Click Me</span></td> + <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px outset #cec;">Click Me</span></td> + <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px inset #cec;">Click Me</span></td> + </tr> + <tr style="line-height: 25%;"> + <td> </td> + </tr> + <tr style="font-style: italic;"> + <td>disabled</td> + <td>normal</td> + <td>active</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + <p> </p> + <p>A fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus. It might also have a hover effect when the pointer is over it.</p> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + More details</div> + <p>For more information about user interfaces in CSS, see <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> in the CSS Specification.</p> + <p>There is an example of Mozilla's markup language for user interfaces, XUL, in Part II of this tutorial.</p> +</div> +<h2 id="Action_Printing_a_document">Action: Printing a document</h2> +<ol> + <li>Make a new HTML document, <code>doc4.html</code>. Copy and paste the content from here: + <pre class="brush:html"><!DOCTYPE html> +<html> + <head> + <title>Print sample</title> + <link rel="stylesheet" href="style4.css"> + </head> + <body> + <h1>Section A</h11> + <p>This is the first section...</p> + <h1>Section B</h1> + <p>This is the second section...</p> + <div id="print-head"> + Heading for paged media + </div> + <div id="print-foot"> + Page: + </div> +</body> +</html> +</pre> + </li> + <li>Make a new stylesheet, <code>style4.css</code>. Copy and paste the content from here: + <pre class="brush:css">/*** Print sample ***/ + +/* defaults for screen */ +#print-head, +#print-foot { + display: none; + } + +/* print only */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#print-head { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#print-foot { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#print-foot:after { + content: counter(page); + counter-increment: page; + } + +} /* end print only */ +</pre> + </li> + <li>View this document in your browser; it uses your browser's default style.</li> + <li>Print (or print preview) the document; the stylesheet places each section on a separate page, and it adds a header and footer to each page. If your browser supports counters, it adds a page number in the footer. + <table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="width: 15em; margin-right: 2em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;"> + Heading for paged media</div> + <div style="font-size: 150%; font-weight: bold;"> + Section A</div> + <div style="font-size: 75%;"> + This is the first section...</div> + <div style="font-size: 150%; text-align: right; margin-top: 12em;"> + Page: 1</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="width: 15em; margin-right: 2em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;"> + Heading for paged media</div> + <div style="font-size: 150%; font-weight: bold;"> + Section B</div> + <div style="font-size: 75%;"> + This is the second section...</div> + <div style="font-size: 150%; text-align: right; margin-top: 12em;"> + Page: 2</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </li> +</ol> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Challenges</caption> + <tbody> + <tr> + <td>Move the print-specific style rules to a separate CSS file. + <p>Read the {{ CSSXref("@import") }} reference page to find details of how to import the new print-specific CSS file into your <code>style4.css</code> stylesheet.</p> + <p>Make the headings turn blue when the mouse pointer is over them.</p> + </td> + </tr> + </tbody> +</table> +<p> <a href="/en/CSS/Getting_Started/Challenge_solutions#Media" title="https://developer.mozilla.org/en/CSS/Getting_started/Challenge_solutions#Media">See solutions to these challenges.</a></p> +<h2 id="What_next">What next?</h2> +<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="/Talk:en/CSS/Getting_Started/Media" title="Talk:en/CSS/Getting_Started/Media">Discussion</a> page.</p> +<p>So far, all the style rules in this tutorial have been specified in files. The rules and their values are fixed. The next page describes how you can change rules dynamically by using a programming language: <strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p> diff --git a/files/ko/web/css/시작하기/배치/index.html b/files/ko/web/css/시작하기/배치/index.html new file mode 100644 index 0000000000..0b39699419 --- /dev/null +++ b/files/ko/web/css/시작하기/배치/index.html @@ -0,0 +1,369 @@ +--- +title: 배치 +slug: Web/CSS/시작하기/배치 +translation_of: Learn/CSS/CSS_layout +--- +<p>{{ CSSTutorialTOC() }}</p> + +<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> + +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자")}}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 12번째 장; 여기서는 Document의 배치를 정하는 몇몇 방법에 대해 알아본다. 예제 document를 좀 바꿔 보자.</p> + +<h2 class="clearLeft" id="정보_배치">정보: 배치</h2> + +<p>Document의 배치를 바꾸기 위해 CSS는 다양한 방법을 제공한다. 어떤 고급 기술은 여기 초급안내서의 범주를 훨씬 넘어서는 고급 기술이다.</p> + +<p>여러 브라우저에서의 결과물이 비슷하게 나오게 하기 위해, stylesheet값은 브라우저의 기본 stylesheet값과 배치값을 사용한다. 이 주제 또한 여기서의 초급과정보다 더 고급 과정이다.</p> + +<p>여기서는 간단한 기술에 대해 연습 해 보자.</p> + +<h3 id="Document_구조">Document 구조</h3> + +<p>만약 Document의 배치를 변경하려 한다면 이떤 경우에는 document 구조를 바꿔야 할지 모른다.</p> + +<p>document의 마크업 언어는 구조 생성을 위한 용도의 일반적인 태그를 가지고 있다. 예를 들면 HTML에서 구조를 생성 하기 위해 {{ HTMLElement("div") }} element를 사용 할 수 있다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>예제 Document에서 <u>Numbered paragraphs</u>가 표시된 단락은 컨테이너 구조가 아니다.</p> + +<p>따라서 이 단락 주변에는 설렉터에서 이 element에 대해 정의 한 것이 없으므로 경계 박스를 그릴 수 없다.</p> + +<p>이 구조적 문제를 해결 하기 위해, {{ HTMLElement("div") }}태그를 단락 주변에 추가 하라. 이 태그는 유일한 것이어서 id속성으로 구분 될 수 있다.</p> + +<pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> +<div id="numbered"> + <p>Lorem ipsum</p> + <p>Dolor sit</p> + <p>Amet consectetuer</p> + <p>Magna aliquam</p> + <p>Autem veleum</p> +</div> +</pre> + +<p>이제 예제 stylesheet 에 두 리스트에 주변의 경계 표시를 위한 규칙 하나를 아래와 같이 추가 하자.</p> + +<pre class="brush:css">ul, #numbered { + border: 1em solid #69b; + padding-right:1em; +} +</pre> + +<p>아래와 같은 형식으로 출력된다.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="크기_단위">크기 단위</h3> + +<p>지금까지 이 안내서에서는 크기를 픽셀(px)단위로 표시 해왔다. 컴퓨터 화면과 같은 출력장치에서는 어느 정도 적절한 표시 방법이다. 그러나, 사용자가 글씨 크기를 바꿔 버리면 화면 출력은 이상하게 엉켜버릴 수 있다.</p> + +<p>다양한 용도를 위해 크기는 백분위(%)값이나, 고정넓이폰트 값(em)으료 표시하는 것이 더 좋은 방법이다. 고정 넓이 폰트 값(em)은 현재 사용되는 글씨체중 'm'에 해당하는 넓이를 기준으로 하고 있다.(영문에서는 'm'이 가장 넓은 폰트이다). 사용자가 글씨 크기를 바꾸면 배치는 자동적으로 맞추어 질 것이다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>아래 텍스트의 왼쪽에 있는 경계는 픽셀로 크기를 지정 했다.</p> + +<p>오른쪽은 고정 넓이 폰트값(aka ems)으로 지정 했다.</p> + +<p>브라우저에서 글씨 크기를 변경하고 확인 해보면 오른쪽은 적당한 크기를 유지하지만, 왼쪽은 그렇지 않다는 것을 확인 할 수 있을 것이다.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <div style="">RESIZE ME PLEASE</div> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>다른 기기에서는 다른 단위가 적절할 수 있다.</p> + +<p>이 안내서 나중 페이지에 이에 대해 좀더 자세히 알아 보도록 하자.</p> + +<p>변수 값과 단위에 대해 상세하게 확인 하고 싶다면 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> 부분을 참고 하라.</p> +</div> + +<h3 id="텍스트_배치">텍스트 배치</h3> + +<p>element 내용물을 배치하는데는 두가지 속성이 있다. 이 두가지를 통해 간단하게 배치/정열을 조절 할 수 있다.</p> + +<dl> + <dt>{{ cssxref("text-align") }}</dt> + <dd>이 <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>값로 할당하여 정열 할 수 있다.</dd> + <dt>{{ cssxref("text-indent") }}</dt> + <dd>들여쓰기를 위해 적당한 값을 명시하여 사용 한다.</dd> +</dl> + +<p>이 두 속성은 실제 텍스트 외에도 모든 텍스트 같은(text-like) element에도 영향을 미친다. 속성들은 부모로부터 자식까지 상송되므로, 자식 element에서 부모로 부터 받지 않으려는 속성에 대해서 정확하게 제거 하는 규칙을 추가 하지 않는다면 원하는 결과를 얻지 못할지 모른다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>헤더를 가운데 정렬하려면</p> + +<pre class="brush:css">h3 { + border-top: 1px solid gray; + text-align: center; +} +</pre> + +<p>결과는 아래와 같다.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> + </td> + </tr> + </tbody> +</table> + +<p>HTML document에서, 헤더 아래쪽에 보여지는 내용물(content)는 헤더에서 구조적으로 포함된 사항이 아니다. 그러므로 이와 같은 헤더를 정렬하려면 헤더 아래쪽 테그는 그 스타일을 상속 받아서는 안된다.</p> +</div> + +<h3 id="부유(Floats)">부유(Floats)</h3> + +<p>{{ cssxref("float") }}속성은 element를 강제로 왼쪽 혹은 오른쪽으로 정렬시킨다. 이것이 element의 위치와 크기를 조정하는 가장 간단한 방법이다.</p> + +<p>나머지 document의 내용물(content)는 부유 속성의 element 주변으로 떠있게 된다. {{ cssxref("clear") }} 속성을 통해서 element들을 부유 element로 부터 떨어져 고정 위치하도록 한다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>예제 document에서 리스트는 윈도우의 크기에 맞게 늘어난다. 이를 방지하기 위해서는 부유속성으로 왼쪽으로 정렬되도록 하면 된다.</p> + +<p>아래 예로 헤더를 왼쪽 한곳에 고정 시키려면 clear속성과 left를 함께 선언 해 주어야 한다.</p> + +<pre class="brush:css">ul, #numbered {float: left;} +h3 {clear: left;} +</pre> +</div> + +<p>The result looks like:</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> + +<p>(텍스트가 경계선에 바짝 붙어 있다면 박스의 오른편에 약간의 내부 여백 필요할듯 하다.)</p> + +<h3 id="위치잡기">위치잡기</h3> + +<p>{{ cssxref("position") }}속성에 아래 4가지 방법으로 값을 선언하여 위치를 잡을 수 있다.</p> + +<p>더 많은 속성이 있지만 아래와 같은 간단한 방법으로(여기서는 초급 안내서이므로) 위치를 조정 할 수 있다. 그러나 아래 방법을 조합해서 쓴다면 다소 어려워 질 것이다.</p> + +<dl> + <dt><code>relative</code></dt> + <dd>element의 위치는 상대적으로 정해진다. 어느 정도 값을 지정 함으로 element를 위치 시킬 수 있다. element의 바깥 여백값을 설정함으로 이와 동일한 설정 효과를 볼 수도 있다.</dd> + <dt><code>fixed</code></dt> + <dd>고정 위치 설정법. document window에서의 상대적 위치를 지정하는 방법이다. document의 나머지 부분이 스크롤 되어야 할지라도 해당 element는 고정 값을 가진다.</dd> + <dt><code>absolute</code></dt> + <dd>부모 element의 위치에 상대적으로 위치가 고정된다. 그 부모 element는 위치 지정 방법이 <code>relative</code>, <code>fixed</code> or <code>absolute</code> 중 하나이어야 한다. element의 위치 속성을 releative로 설정 한다면 방향 표시를 하지 않더라도 어떠한 속성을 가진 부모 element에도 잘 동작 할 것이다.</dd> + <dt><code>static</code></dt> + <dd>기본 설정 값이다. 명확하게 상속받은 위치 지정을 해제하려면 이 값으로 선언 해야 한다.</dd> +</dl> + +<p>이 위치 지정 속성과 함께(<code>static은 제외</code>) 방향(<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>), 높이(<code>width)</code>, 넓이(<code>height) 크기(size)도 같이 지정 해야 한다.</code></p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>아래 두 element의 Top정렬을 동일한 위치에 설정 하려면 예제 Document의 두 element에 부모 container를 만들어라.</p> + +<pre class="brush:html"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</pre> + +<p>예제 stylesheet에서 부모 element의 위치 속성을 <code>relative로 하라.</code> 방향 속성까지 같이 할 필요는 없다.자식 element의 위치는 absolute로 설정하라.</p> + +<pre class="brush:css">#parent-div { + position: relative; + font: bold 200% sans-serif; +} + +#forward, #back { + position: absolute; + margin:0px; /* no margin around the elements */ + top: 0px; /* distance from top */ + left: 0px; /* distance from left */ +} + +#forward { + color: blue; +} + +#back { + color: red; +} +</pre> + +<p>결과는 아래처럼 백슬레쉬(\)와 슬레쉬(/)가 겹쳐서 위치 되도록 하였다.</p> + +<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> + +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> +</div> + +<table style="background-color: white; border: 2px outset #36b; height: 5em; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>위치 지정에 대한 모든 내용은 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a>과 <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>의 두 챕터에 나와 있다.</p> + +<p>다양한 브라우저에서 동작하도록 stylesheet를 설계하고자 한다면, 브라우저별로 표준을 다르게 해석하는 것과 특정 버전의 브라우저에 있는 버그에 대해서도 고려해야 한다.</p> +</div> + +<h2 id="액션_배치_선언">액션: 배치 선언</h2> + +<ol> + <li><code>doc2.html와</code> <code>style2.css를 수정 하여 위에 나온</code><a href="#Document_structure" title="#Document structure"><strong>Document structure</strong></a> 와 <a href="#Floats" title="#Floats"><strong>Floats</strong></a>를 연습 해 보자.</li> + <li><a href="#Floats" title="#Floats"><strong>Floats</strong></a>예제에서 텍스트를 오른쪽 경계와의 안쪽 여백을 0.5 em로 설정 하라.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">도전</div> + +<p><code>doc2.html의 아래쪽 </body> 바로 위에 아래 태그를 추가하라</code>.</p> + +<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> + +<p>아래 이미지를 다운로드 하지 않았다면 지금 다운로드 하고, 위의 예제 파일이 있는 곳으로 저장하라.</p> + +<table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td> + </tr> + </tbody> +</table> + +<p>Document내에서 위의 이미지가 어느 위치에 표시될지 예상 해 보라. 그리고 브라우저에서 읽어들여 그 결과를 확인 해 보라.</p> + +<p>Document의 오른쪽 위에 자리 잡을 수 있도록 예제 stylesheet에 규칙을 추가 해 보라.</p> + +<p>브라우저에서 다시 읽어 보고 윈도우를 작게 조절 해 보라. 윈도우 크기를 조절 할때에도 Document가 Scroll될지라도 위의 이미지가 오른쪽 위에 계속 자리 하는지를 확인 해 보라.</p> + +<div style="position: relative; width: 29.5em; height: 18em;"> +<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + +<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> +<ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> +</ul> +</div> + +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + +<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> +<p><strong>1: </strong>Lorem ipsum</p> + +<p><strong>2: </strong>Dolor sit</p> + +<p><strong>3: </strong>Amet consectetuer</p> + +<p><strong>4: </strong>Magna aliquam</p> + +<p><strong>5: </strong>Autem veleum</p> +</div> + +<p style=""> </p> + +<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div> +</div> +</div> +</div> + +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Layout">정답 확인.</a></p> + +<h2 id="다음에는">다음에는?</h2> + +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}이제까지 CSS의 초급 안내서에 나온 주제를 다 확인 해 보았다. 다음장에서 부터는 CSS 설렉터의 고급 기술과 <a href="/en-US/docs/CSS/Getting_Started/Tables" title="/en-US/docs/CSS/Getting_Started/Tables">테이블</a>의 스타일을 설정하는 방법에 대해 알아보자.</p> diff --git a/files/ko/web/css/시작하기/상자/index.html b/files/ko/web/css/시작하기/상자/index.html new file mode 100644 index 0000000000..17de8697c7 --- /dev/null +++ b/files/ko/web/css/시작하기/상자/index.html @@ -0,0 +1,330 @@ +--- +title: 상자 +slug: Web/CSS/시작하기/상자 +translation_of: Learn/CSS/Building_blocks +--- +<p>{{ CSSTutorialTOC() }}</p> + +<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> + +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 11번째 장; 여기서는 CSS를 통해 element들이 보여질때 page의 공간을 어떻게 배치하는지에 대해 알아본다. 예제 documnet에서 각 element의 여백 조절과 꾸미기에 대해 배워 보자.</p> + +<h2 class="clearLeft" id="정보_상자">정보: 상자</h2> + +<p>Element를 브라우저에서 표시할때 그 Element는 공간을 자치 한다. 차지하는 공간에는 4가지 요소가 있다.</p> + +<p>가운데는, element의 내용물을 표시가는 공간이며, 주변은 안쪽 여백이 있고, 그 주변에 경계가 있으며, 다른 element와의 간격이 있다.</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #eee;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><em>옅은 회색은 레이아웃의 구성을 보여준다.</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #fff;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><em>브라우저에서는 위와 같이 보여준다.</em></p> + </td> + </tr> + </tbody> +</table> + +<p>안쪽 여백, 경계 그리고 바깥 여백은 element에 대해 각각 top, right, bottom, left의 크기를 가진다. 이것들은 크기가 0이 될 수도 있다.</p> + +<h3 id="색상입히기">색상입히기</h3> + +<p>안쪽 여백 색상은 element의 배경과 항상 동일하게 유지된다. 배경색을 바꾼다면 element경과 안쪽 여백 색이 바뀌는 것을 확인 할 수 있을 것이다. 바깥 여백은 항상 투명하다.</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #ded;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><em>element는 녹색 배경색이다..</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #efe;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><em>브라우저에서 보면 위와 같다.</em></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="경계">경계</h3> + +<p>라인이나 상자를 통해 element의 경계를 치장 할 수 있다.</p> + +<p>경계를 설정 하려면 {{ cssxref("border") }}속성을 이용하라. 두께(보통 표시 화면의 픽셀 두께), 스타일, 색상등을 설정 하라.</p> + +<p>스타일은 아래와 같다.</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 6em;"> + <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> + </td> + </tr> + <tr> + <td style="width: 6em;"> + <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> + </td> + </tr> + </tbody> +</table> + +<p>스타일을 none이라 hidden으로 설정하면 경계가 사라진다. 다른 방법으로는 경계 색상을 투명으로 설정하여 레이아웃을 변경하지 않고도 경계를 보이지 않게 할 수도 있다.</p> + +<p>경계를 각각 별개로 설정하기 위해서는{{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}등으로 할 수 있다. 각 top, right, bottom, left는 개별적으로 설정이 가능하다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>아래 규칙은 헤더 element의 윗쪽 경계와 배경색에 대한 속성을 지정 한다.</p> + +<pre class="brush:css">h3 { + border-top: 4px solid #7c7; /* mid green */ + background-color: #efe; /* pale green */ + color: #050; /* dark green */ + } +</pre> + +<p>결과는 아래와 같다.</p> + +<table> + <tbody> + <tr> + <td> + <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p> + </td> + </tr> + </tbody> +</table> + +<p>아래 규칙은 이미지 주변에 회색띠를 둘러서 경계를 구분하기 편하게 하고 있다.</p> + +<pre class="brush:css">img {border: 2px solid #ccc;} +</pre> +</div> + +<p>결과는 아래와 같다.</p> + +<table> + <tbody> + <tr> + <td>Image:</td> + <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> + </tr> + </tbody> +</table> + +<h3 id="내외부_여백">내/외부 여백</h3> + +<p>내/외부 여백을 이용하여(margins and padding) element의 위치와 그 주변의 여백을 설정 할 수 있다.</p> + +<p>바깥 여백은 {{ cssxref("margin") }}속성을 사용하며 내부여백은 {{ cssxref("padding") }}속성을 각각 사용한다.</p> + +<p>위의 속성으로 넓이 값을 하나 선언하면 element의 4방향(top, right, bottom and left) 모두 바뀐다.</p> + +<p>넓이 값을 두개 선언하면, 첫번째 값으로는 top, bottom값이 적용되고, 두번째 값으로는 right, left값이 바뀐다.</p> + +<p>4개 값을 각각 주기 위해서는 각 값을 top, right, bottom, left의 순서로 나열 하면 된다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>아래는 p class가 remark인 단락을 빨간 경계박스로 만드는 규칙이다.</p> + +<p>안쪽 여백 값은 4픽셀으로 둘러져 있으며, 왼쪽 바깥 여백은 24픽셀이므로 들여쓰기 효과로 보여진다.</p> + +<pre class="brush:css">p.remark { + border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> + +<p>결과는 아래와 같다.</p> + +<table> + <tbody> + <tr> + <td> + <p>Here is a normal paragraph.</p> + + <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Here is a remark.</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>내/외부 여백으로 element의 배치를 할때는 브라우저에서 제공하는 기본 값과 사용자가 정의한 값을 바탕으로 정해지므로 조금 복잡할 수도 있다.</p> + +<p>브라우저에 따라 보이는 내용이 다를 수 있다. stylesheet에 내용을 많이 추가 할 수록 브라우저 기본값보단 설정된 값을 많이 사용하므로 더욱더 비슷한 결과물을 볼수 있을 것이다.</p> + +<p>원하는 결과물을 얻기 위해서는, Document의 마크업들을 바꿔야 할지도 모른다. 다음장에서는 이에 대해 좀더 자세히 알아보자.</p> + +<p>내/외부 여백과 경계선등에 대해 좀더 자세히 알아보려면 <a href="/en/CSS/box_model" title="en/CSS/box model"><span class="external">Box model</span></a>를 참조하라.</p> +</div> + +<h2 id="액션_경계선_추가">액션: 경계선 추가</h2> + +<p><code>style2.css</code>를 열어, 각 헤더별로 윗쪽에 줄을 긋는 아래 규칙을 추가 하라.</p> + +<pre class="brush:css">h3 {border-top: 1px solid gray;} +</pre> + +<p>이 페이지 아래 도전과제를 수행한다면, 그 규칙을 변경하고, 그렇지 않다면 각 리스트 아래에 바깥 여백을 추가하는 아래 규칙을 추가 하라.</p> + +<pre class="brush:css">li { + list-style: lower-roman; + margin-bottom: 8px; + } +</pre> + +<p>결과를 보기위해 브라우저에서 새로 읽어 보라.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">도전</div> + +<p>예제 stylesheet에 하나의 규칙을 추가하여 아래처럼 바다가 연생되는 색으로 모든 경계를 두껍게 만들어 보라.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; padding-left: 1em;"> + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>(여기 보이는 예제와 똑같은 두께나 색상으로 바꿀 필요는 없다.)</p> +</div> + +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Boxes">결과 확인.</a></p> + +<h2 id="다음에는">다음에는?</h2> + +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}지금까지 내/외부 여백을 설정하여 Document의 배치를 수정 해 보았다. 다음 장에서는 Document의 배치를 바꾸는 다른 방법에 대해 알아보자.</p> diff --git a/files/ko/web/css/시작하기/종속과_상속/index.html b/files/ko/web/css/시작하기/종속과_상속/index.html new file mode 100644 index 0000000000..ac819c8c64 --- /dev/null +++ b/files/ko/web/css/시작하기/종속과_상속/index.html @@ -0,0 +1,126 @@ +--- +title: 종속과 상속 +slug: Web/CSS/시작하기/종속과_상속 +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<p>{{ CSSTutorialTOC() }}</p> + +<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/14)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> + +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/How_CSS_works", "CSS 동작 원리")}}<span class="seoSummary"><a href="/en-US/docs/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서의 4번쨰 섹션; stylesheets가 종속적으로 동작하는 것과 element가 부모로 부터 style을 상속 받는 것에 대해 서술해 본다. 단순하게 document의 많은 Style중 어떤 Style을 사용할 것인지 한단계 상속만으로 하나의 Style을 stylesheet에 추가 할 수 있다.</span></p> + +<h2 class="clearLeft" id="정보_종속과_상속">정보: 종속과 상속</h2> + +<p>element의 최종 style은 다양한 상호작용을 통해 여러 장소에서 선언된 것을 사용할 수 있다. 이런 다양한 상호작용을 통해 CSS는 강력해 질 수 있으며, 반대로 디버그 하기에는 복잡하고 어려워 진다.</p> + +<p>종속의 세가지 주요 원천은 아래와 같다.</p> + +<ul> + <li>마크업 언어를 위한 브라우저의 기본 style들</li> + <li>document를 읽는 사용자가 정의하는 styles</li> + <li>만든이에 의해 Style은 Document와 연결된다. 다음 3곳에서 그 내용을 명시할 수 있다.These can be specified in three places: + <ul> + <li>외부 파일: 이 안내서에서 주로 취급하는 Style에 대한 정의하는 법.</li> + <li>Document의 시작 부분에 정의하는 법: 선언한 Style은 선언된 Document의 페이지에서만 사용된다.</li> + <li>Document body의 특정 element에: 유지 보수가 가장 불편한 방법이며, 주로 테스트 용도로 쓴다.</li> + </ul> + </li> +</ul> + +<p>사용자 Style은 브라우저의 기본 Style을 변경 할수 있다. document 만든이의 style 에서 더 수정 변경 될 수도 있다. 이 안내서에서는, 예제 Document에서 만든 자신만의 stylesheets를 만들 수 있다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>이 문서를 브라우저로 보면, 일부 style은 브라우저의 기본 값을 사용한다.</p> + +<p>일부는 브라우저 셋팅에서 수정한 style이 저장된 파일에서 가져온다. 파이어 폭스 브라우저에서 "설정" 메뉴나, 브라우저 폴더에 있는 userContent.css 직접 수정하여 변경 가능하다.</p> + +<p>일부 style은 wiki server에 의해 Stylesheet에 정의된 값을 사용한다.</p> +</div> + +<p>예제 Document를 브라우저에서 열면, {{ HTMLElement("strong") }} elements로 지정된 문자는 다른 문자들 보다 두껍다. 이 Style은 기본 Style로 설정된 값에서 나온다.</p> + +<p>{{ HTMLElement("strong") }} elements의 색상은 red이다. 이 값은 예제 stylesheet에서 값을 가져 온다.</p> + +<p>{{ HTMLElement("strong") }} elements는 {{ HTMLElement("p") }} element의 자식 style이므로 대부분의 {{ HTMLElement("p") }} element의 style을 상속한다. 같은 방식으로, {{ HTMLElement("p") }} element는 {{ HTMLElement("body") }} element의 대부분의 style을 상속한다.</p> + +<p>종속적인 면에서 style은, 제작자(author)의 stylesheets가 사용자(reader) stylesheet보다도 브라우저의 기본 값보다도 우선 순위가 높다.</p> + +<p>상속적인 면에서는, 자식 노드의 자체 Style이 부모의 Style보다 우선 순위가 높다.</p> + +<p>우선 순위만 적용되는 것은 아니다. 페이지 아래부분에 좀더 자세히 설명 하도록 하자.</p> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>CSS는 <code>!important 키워드를 써서 </code>사용자(reader)가 document 제작자(author)의 style을 덮어 쓰는 방법도 제공힌다.</p> + +<p>이는 Document 제작자에게 사용자가 항상 제작자가 만든 내용을 그대로 본다는 것을 보장 하지 않는 다는 것을 의미한다.</p> + +<p>종속과 상속에 대해 자세히 알고 싶다면, CSS의 상세 사양서 중 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">속성 값 할당, 종속 및 상속</a> 부분을 보라.</p> +</div> + +<h2 id="액션_상속_사용하기">액션: 상속 사용하기</h2> + +<ol> + <li>CSS 예제 파일을 편집해 보자.</li> + <li>아래 라인을 추가 하라. 이미 문서 내에 존재하는 다른 내용이 있더라도 문서의 어디에 추가하든 상관 없다. 그러나, 맨 위에 추가 할수록 Document에 있는{{ HTMLElement("p") }} element가 {{ HTMLElement("strong") }} element의 부모가 되므로 지역적으로 영향을 미친다. + <pre class="brush:css">p {color: blue; text-decoration: underline;} +</pre> + </li> + <li>이제 브라우저를 갱신하여 적용된 사항을 보라. 첫글자를 포함한 모든 문자들에 밑출이 그어져 있다. {{ HTMLElement("strong") }} elements는 부모{{ HTMLElement("p") }} element의 밑줄 속성을 상속 받았다.<br> + + <p>그러나 {{ HTMLElement("strong") }} elements는 여전히 붉은색이다. 붉은색 속성은 자체 속성이므로 부모인 {{ HTMLElement("p") }} element의 파란색 속성보다 우선한다.</p> + </li> +</ol> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> +</table> + +<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;"> + <caption>Before</caption> + <tbody> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <caption>After</caption> + <tbody> + <tr> + <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">도전</div> +Stylesheet를 변경하여 아래와 같이 붉은 글자만 밑줄 속성을 가지도록 수정 해 보라. + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> + +<pre class="brush: css">p {color: blue; } +strong {color: orange; text-decoration: underline;} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div> + +<h2 id="다음에는">다음에는?</h2> + +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Selectors", "설렉터")}}예제 Stylesheet의 <code><p></code>와 <code><strong> 태그</code>를 원하는 style로 임으로 바꾸어 보라. 다음 장에는 <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="/en-US/docs/CSS/Getting_Started/Selectors">설렉터</a>를 사용하는 법에 대해 알아보자.</p> diff --git a/files/ko/web/css/시작하기/테이블/index.html b/files/ko/web/css/시작하기/테이블/index.html new file mode 100644 index 0000000000..f7e832dbf1 --- /dev/null +++ b/files/ko/web/css/시작하기/테이블/index.html @@ -0,0 +1,474 @@ +--- +title: 테이블 +slug: Web/CSS/시작하기/테이블 +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<p>{{ CSSTutorialTOC() }}</p> +<div class="warning"> + <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/20)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 13번째; 여기서는 고급 설렉터에 대해 알아보고, 테이블을 사용하는 특별한 방법에 대해 확인 해 보자. 테이블이 포함된 예제 Document와 여기서 사용될 Stylesheet를 만들어 보자.</p> +<h2 class="clearLeft" id="정보_테이블">정보 : 테이블</h2> +<p>테이블이란 정보를 사각 격자 형태로 배치하는 것을 말한다. 어떤 테이블은 복잡하게 구성 될 수 있으며 그 복잡한 테이블은 브라우저마나 다르게 보여줄 수도 있다.</p> +<p>Document를 디자인 할때, 테이블을 이용하여 내용들 간의 관개정보들을 표시 할 수 있다. 브라우저별로 테이블을 조금 다르게 표시하여도 정보를 보여주는데는 크게 문제 되지 않는다.</p> +<p>시각적인 표시의 사용목적으로 테이블을 사용하는 것은 좋지 않다. 테이블 보다는 이전 페이지에 소개한 배치(<strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong>)를 사용하는 것이 더 좋은 방법이다.</p> +<h3 id="테이블_구조">테이블 구조</h3> +<p>테이블에서는 각 내용들이 각 테이블 블럭에 표시된다.</p> +<p>테이블의 같은 줄의 블럭은 하나의 행을 구성한다.</p> +<p>몇몇 테이블에서는 행은 하나의 그룹으로 구성된다. 테이블의 첫 행의 그룹은 머릿말(<em>header)</em>로 사용된다. 테이블의 마지막 행의 그룹은 꼬릿말<em>(footer)</em>로 사용되기도 한다. 테이블의 다른 행들은 본문(<em>body</em>)이 되고 한 덩어리의 그룹으로 간주된다.</p> +<p>아래에 있는 블럭은 하나의 열(<em>column</em>)로 구성되었고 제한적으로 사용되는 CSS테이블 이다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">설렉터</a>페이지 내의 <a href="/en/CSS/Getting_Started/Selectors#relselectors" title="en/CSS/Getting_Started/Selectors#relselectors">연관관계로 본 설렉터</a>의 테이블은 10개의 셀 블럭으로 구성된 5행 테이블이다.</p> + <p>첫번째 행은 머릿말이고 나머지 4개행은 본문이다. 꼬릿말은 없다.</p> + <p>열은 2개이다.</p> +</div> +<p>여기 안내서는 간단한 예제만을 다루고 있으며, 그 결과물은 쉽게 예상 가능한 수준이다. 간단한 테이블에서는 모든 셀블럭들은 하나의 행/열만을 차지한다. 셀이 하나 이상의 행이나 열을 차지하는 복잡한 테이블 구성 방법도 CSS를 통해 표현 가능하다. 그러나 이런 고급기술은 초급 안내서의 범주를 벗어난다.</p> +<h3 id="경계">경계</h3> +<p>셀 블럭은 바깥 여백이 없다.</p> +<p>셀블럭은 바깥 여백과 들여쓰기 공간이 없다. 기본적으로 경계는 테이블 내용과의 같격을 {{ cssxref("border-spacing") }}속성으로 조절 가능하다. 테이블의 {{ cssxref("border-collapse") }}속성을 <code>collapse</code>로 설정하면 이 여백을 없앨 수 있다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>여기 세가지 테이블을 확인 해 보자.</p> + <p>왼쪽 테이블은 0.5 em 경계 여백을 가지고 있다. 가운데는 경계 여백을 0으로 했으며, 오른쪽은 collapse속성을 사용 하였다.</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="캡션">캡션</h3> +<p>캡션({{ HTMLElement("caption") }}) elemen전체 테이블에 적용되는 라벨이다. 기본적으로 테이블 위쪽에 표시된다.</p> +<p>캡션을 아래쪽에 두고 싶다면 {{ cssxref("caption-side") }}속성 값을 <code>bottom</code>으로 설정하라. 속성은 상속되므로 상속받은 테이블들에 선택적으로 속성값 재설정도 가능하다.</p> +<p>캡션의 텍스트 스타일을 조정 하려면 텍스트 속성을 사용하면 된다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 테이블은 아래쪽에 캡션을 가지고 있다.</p> + <pre class="brush: css">#demo-table > caption { + caption-side: bottom; + font-style: italic; + text-align: right; +} +</pre> + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table> + <caption> + Suits</caption> + <tbody> + <tr> + <td> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid gray; text-align: center;">Clubs</td> + <td style="border: 1px solid gray; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid gray; text-align: center;">Diamonds</td> + <td style="border: 1px solid gray; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="빈_셀블럭">빈 셀블럭</h3> +<p>테이블 element에 {{ cssxref("empty-cells") }}: show로 설정 함으로 빈 셀블럭을 표시 할 수 있다.</p> +<p><code>empty-cells: hide로 설정하여 해당 셀블럭을 안보이도록 감출 수 있다. 셀의 부모 element가 배경색을 가지고 있다면 그 배경색이 보이게 될 것이다.</code></p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 테이블은 옅은 녹색 배경을 가지고 있으며, 셀은 진한 회색의 테두리와 회색 배경을 가지고 이다.</p> + <p>아래 테이블의 왼쪽은 빈 셀을 보여주고, 오른쪽은 셀감추기의 결과를 확인 할 수 있다.</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 자세히</div> + <p>CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">테이블</a>에서 좀더 자세한 테이블에 대한 사항을 확인 하라.</p> + <p>여기에서 보다 더 자세한 테이블에 관한 내용을 확인 할 수 있지만, 브라우저별로 다르게 보여지는 복잡한 테이블에 대한 사항은 포함하고 있지 않다.</p> +</div> +<h2 id="액션_테이블_꾸미기">액션 : 테이블 꾸미기</h2> +<ol> + <li><code>doc3.html파일을 만들어 아래 긴 코드를 전부 복사해 넣고 저장하라.</code> + <div style="height: 36em; overflow: auto;"> + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Sample document 3</title> + <link rel="stylesheet" href="style3.css"> + </head> + <body> + <table id="demo-table"> + <caption>Oceans</caption> + <thead> + <tr> + <th></th> + <th>Area</th> + <th>Mean depth</th> + </tr> + <tr> + <th></th> + <th>million km<sup>2</sup></th> + <th>m</th> + </tr> + </thead> + <tbody> + <tr> + <th>Arctic</th> + <td>13,000</td> + <td>1,200</td> + </tr> + <tr> + <th>Atlantic</th> + <td>87,000</td> + <td>3,900</td> + </tr> + <tr> + <th>Pacific</th> + <td>180,000</td> + <td>4,000</td> + </tr> + <tr> + <th>Indian</th> + <td>75,000</td> + <td>3,900</td> + </tr> + <tr> + <th>Southern</th> + <td>20,000</td> + <td>4,500</td> + </tr> + </tbody> + <tfoot> + <tr> + <th>Total</th> + <td>361,000</td> + <td></td> + </tr> + <tr> + <th>Mean</th> + <td>72,000</td> + <td>3,800</td> + </tr> + </tfoot> + </table> + </body> +</html> +</pre> + </div> + </li> + <li><code>style3.css</code>를 만들어 아래 긴 내용을 전부 복사해 넣어라. + <pre class="brush: css">/*** Style for doc3.html (Tables) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; +} + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; +} + + +/* basic shared rules */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; +} + +#demo-table th { + font-weight: bold; + padding-left: .5em; +} + + +/* header */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; +} + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; +} + +/* fix size of superscript */ +#demo-table sup { + font-size: 75%; +} + +/* body */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; +} + +#demo-table tbody th:after { + content: ":"; +} + + +/* footer */ +#demo-table tfoot { + font-weight: bold; +} + +#demo-table tfoot th { + color: blue; +} + +#demo-table tfoot th:after { + content: ":"; +} + +#demo-table > tfoot td { + background-color: #cee; +} + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; +} +</pre> + </li> + <li>브라우저에서 열어서 아래와 같이 나오는 지 확인 하라. + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </li> + <li>화면에 보여지는 테이블과 stylesheet에 추가한 규칙과 비교하여 각 규칙이 어떻게 적용되었는지 확인해 보라. 원하는 방향으로 적용되지 않은 규칙이 있다면 해당 규칙을 주석 처리해서 저장한 후 브라우저로 다시 읽어 확인 해 보라. 아래는 위의 테이블에 관해 확인 해볼 사항이다. + <ul> + <li>캡션은 테이블 바깥 경계에 표시된다.</li> + <li>옵션에 최소 포인트 크기 세트가 있다면 km<sup>2</sup>에 있는 '2'처럼 어깨 글자에 적용 될 것이다.</li> + <li>테이블은 세가지 빈 셀 블럭을 가지고 있다. 그중 둘은 테이블 배경색을 그대로 보여줄 수 있도록 설정되어 있다. 세번째 빈 셀블럭은 자체 색상과 위쪽에 경계선을 가지고 있다.</li> + <li>콜론은 Stylesheet에서 추가 되었다.</li> + </ul> + </li> +</ol> +<div class="tuto_example"> + <div class="tuto_type"> + 도전</div> + <p>아래처럼 보이도록 Stylesheet를 바꿔 보라</p> + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> + </div> + </td> + </tr> + </tbody> + </table> + <p> </p> +</div> +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Tables" title="en/CSS/Getting started/Challenge solutions#Tables">정답 확인</a></p> +<h2 id="다음에는">다음에는?</h2> +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Media", "미디어") }}이 장이 CSS의 속성과 그 변수에 대해 설명하는 마지막 장이다. 전체 속성 및 변수에 대해 확인 하려면 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a>를 보라.</p> +<p>다음에는 CSS의 Stylesheet구조와 목적에 대해 <a href="/en-US/docs/CSS/Getting_Started/Media" title="/en-US/docs/CSS/Getting_Started/Media">다시한번 살펴보자</a>.</p> diff --git a/files/ko/web/css/시작하기/텍스트_스타일/index.html b/files/ko/web/css/시작하기/텍스트_스타일/index.html new file mode 100644 index 0000000000..2a99ee4f51 --- /dev/null +++ b/files/ko/web/css/시작하기/텍스트_스타일/index.html @@ -0,0 +1,149 @@ +--- +title: 텍스트 스타일 +slug: Web/CSS/시작하기/텍스트_스타일 +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<p>{{ CSSTutorialTOC() }}</p> + +<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> + +<p>{{previousPage("/en-US/docs/CSS/Getting_Started/Readable_CSS", "알기 쉬운 CSS")}}<span class="seoSummary"><a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기 </a>안내서 7번째 장; 여기서는 텍스트 스타일에 대해 좀더 많은 예를 살펴 보자. 예제 Stylesheet를 다른 글씨체로 바꿔 보자.</span></p> + +<h2 class="clearLeft" id="정보_텍스트_스타일">정보: 텍스트 스타일</h2> + +<p>CSS는 몇가지 텍스트 스타일에 대한 속성이 있다.</p> + +<p>여러가지에 대해 한번에 편리하게 사용할 수 있는 {{ cssxref("font") }}라는 속성에 대해 알아보자. 예를 들면</p> + +<ul> + <li>굵게, 기울기, 작은 대문자체</li> + <li>크기</li> + <li>라인 높이</li> + <li>글씨체</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;} +</pre> + +<p>위의 규칙은 모든 단락내용을 italic폰트로 설정 하는 등의 다양한 설정을 한다.</p> + +<p>폰트 크기를 부모 element의 단락 크기의 3/4크기로 하고 라인 크기를 보통보다 좀 큰 125%크기로 한다.</p> + +<p>글자체는 Comic Sans MS이다. 하지만 이 글씨체가 유효하지 않다면 브라우저는 기본 글씨체인 손글씨체를 사용 할 것이다.</p> + +<p>이 규칙에는 굵기와 작은 대문자 속성을 무력화 하는 오류를 포함하고 있다.</p> +</div> + +<h3 id="글씨체">글씨체</h3> + +<p>보통 Document에서 가용한 글씨체에는 어떤 것이 있는지 알고 작성할 수는 없다. 대체 가능한 글씨체를 같이 설정 해 주는 것도 좋은 방법이다.</p> + +<p>맨 마지막에는 기본 글씨체<code>(serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>)를 추가 설정 해 주는 것이 좋다.</p> + +<p>만약 document에서 지원 하지 않는 글씨체라면 브라우저가 다른 글씨체로 대체 할 것이다. 예를 들면, Document내에는 설정된 글씨체에서 지원 되지 않는 특수 문자를 포함 하는 경우 같은 것을 말한다. 브라우저는 자동적으로 다른 글씨체에서 위의 특수문자를 지원 한다면 그 글씨체를 사용하여 표시 할 것이다.</p> + +<p>글씨체를 설정 하기 위해서는 {{ cssxref("font-family") }}속성을 사용 하라.</p> + +<h3 id="글씨_크기">글씨 크기</h3> + +<p>브라우저는 보여지고 있는 페이지의 기본 글씨체의 크기와 텍스트의 크기를 바꿀 수 있어서 사용자에 맞는 것을 사용 할 수 있게 해준다.</p> + +<p><code>폰트 크기는 small, medium, large등 정해진 사이즈도 사용할 수 있다</code>. 또한 부모 글씨체 크기와 비교된(smaller, larger, 150%, 1.5 em) 값으로 설정 가능하다. 'em'은 'm'자의 폭을 말한다. 따라서 부모 element보다 1.5배 크기의 글씨크기를 말한다.</p> + +<p><code>14px</code> (14 pixels)와 같이 표시장치나 출력장치의 실체 크기로 지정 할 수도 있다. 이 경우는 크기를 바꿀수 없으므로 시각장애인들에게 불편할 수 있다. 이런 경우를 위해서는 document의 최 상위 element에서부터 정해진 크기 값중 하나인 'medium'으로 해 놓으면 하위 element는 그와 비교해 상대적인 값으로 크기를 설정 할 수 있다.</p> + +<p>글씨 크기를 설정 하려면 {{ cssxref("font-size") }}를 사용하라.</p> + +<h3 id="줄_높이">줄 높이</h3> + +<p>Line height는 줄간 높이를 말한다. 단락이 여러줄로 구성되었다면 보통보다 큰(larger-than-normal) 간격이 특히 작은 글씨라면 읽기 편하다.</p> + +<p>줄 높이 설정은 {{ cssxref("line-height") }}속성을 사용하라.</p> + +<h3 id="장식(Decoration)">장식(Decoration)</h3> + +<p>별도의 {{ cssxref("text-decoration") }} 속성으로 밑줄, 취소선 같은 다른 스타일 설정 할 수 있다. 설정된 장식(Decoration)속성을 없애기 위해서 값을 none을 쓸 수 있다.</p> + +<h3 id="다른_속성">다른 속성</h3> + +<p>기울기 속성 {{ cssxref("font-style") }}<code>: italic;</code><br> + 굵은 속성 <code>{{ cssxref("font-weight") }}: bold;</code><br> + 작은 대문자 <code>{{ cssxref("font-variant") }}: small-caps;</code></p> + +<p>위의 속성을 해제하려면 <code>normal</code> 또는 <code>inherit</code>로 설정하라.</p> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>텍스트 스타일은 다양한 방법으로 설정 가능하다.</p> + +<p>예를 들면, 위에 언급한 속성들에 다른 사용 가능한 값들이 더 있다.</p> + +<p>복잡한 stylesheet에서는, 원치 않는 오류(설정 값이 다르게 나타나는 오류) 방지를 위해 약칭 <code>font 속성 사용을 피하라.</code></p> + +<p>글씨체에 관한 모든 속성을 보려면, CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a>부분을 보라. 다양한 텍스트 효과를 위해서는 <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a> 부분을 참고 하라.</p> + +<p>사용자 시스템 환경에 설치된 폰트 외에 다른 폰트를 설정하려면 <a href="/en/css/@font-face" title="https://developer.mozilla.org/en/css/@font-face">@font-face</a>로 온라인에 있는 폰트 설정 할 수 있다. 이를 위해서는 브라우저에서 해당 규칙을 지원해야 한다.</p> +</div> + +<h2 id="액션_글씨체_설정">액션: 글씨체 설정</h2> + +<p>간단한 document에서는, {{ HTMLElement("body") }} element의 글씨체를 설정 할 수 있으며, 그 이후에서는 이 속성을 상속한다.</p> + +<ol> + <li>예제 CSS 편집 해 보자.</li> + <li>예제의 Document에 아래 규칙을 추가 하라. CSS파일의 위쪽은 논리적인 곳(?)이다. 하지만 어디에 추가하든 그 속성은 적용 될 것이다. + <pre class="eval">body {font: 16px "Comic Sans MS", cursive;} +</pre> + </li> + <li>주석을 탭이나 공백과 함께 잘 배치해 보라.</li> + <li>저장하고 브라우저를 다시 읽어보라. 해당 기기에 italic 스타일이 지원되지 않는 Comic Sans MS나 손글씨체 글씨체가 있다면 브라우저는 다음 예제의 첫출과 같이 italic이 지원되는 다른 글씨체로 바꿔서 보여 줄 것이다. + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>브라우저 메뉴에서 <strong>View > Text Size > Increase</strong> (or <strong>View > Zoom > Zoom In</strong>)을 선택 해 보라. 위에 16 pixels로 스타일 속성을 주었더라도, 화면에는 그 글씨 크기가 바뀔 것이다.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">도전</div> + +<p>다른것은 그대로 두고, 단어 앞 첫 글자 6개만 기본 sarif글씨체로 바꾸고 브라우저 기본 사이즈의 2배 크기로 변경 해 보라.</p> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Add the following style declaration to the <code>strong</code> rule:</p> + +<pre class="brush: css"> font: 200% serif; +</pre> +If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div> + +<h2 id="다음에는">다음에는?</h2> + +<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Color", "색상")}}이미 예제에서 몇가지 색상을 사용 해 왔다. <a href="/en-US/docs/CSS/Getting_Started/Color" title="/en-US/docs/CSS/Getting_Started/Color">다음 장에서는</a> 기본 색생과 다른 색상 표현 법에 대해 알아본다.</p> diff --git a/files/ko/web/css/인접_형제_선택자/index.html b/files/ko/web/css/인접_형제_선택자/index.html new file mode 100644 index 0000000000..4446172ab3 --- /dev/null +++ b/files/ko/web/css/인접_형제_선택자/index.html @@ -0,0 +1,83 @@ +--- +title: 인접 형제 결합자 +slug: Web/CSS/인접_형제_선택자 +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<p><strong>인접 형제 결합자</strong>(<code>+</code>)는 앞에서 지정한 요소의 <strong>바로 다음</strong>에 위치하는 형제 요소만 선택합니다.</p> + +<pre class="brush: css">/* Paragraphs that come immediately after any image */ +img + p { + font-weight: bold; +} +</pre> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">former_element + target_element { <em>style properties</em> } +</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">li:first-of-type + li { + color: red; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>One</li> + <li>Two!</li> + <li>Three</li> +</ul></pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample("예제", "100%", 100)}}</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('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("css.selectors.adjacent_sibling")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a></li> +</ul> |