diff options
Diffstat (limited to 'files/ko/web/css')
45 files changed, 989 insertions, 3054 deletions
diff --git a/files/ko/web/css/@viewport/height/index.html b/files/ko/web/css/@viewport/height/index.html deleted file mode 100644 index 96dd3182ad..0000000000 --- a/files/ko/web/css/@viewport/height/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -tags: - - '@viewport' - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<p><code><strong>height</strong></code> CSS 서술자(descriptor)는 뷰포트의 {{cssxref("@viewport/min-height", "min-height")}} 및 {{cssxref("@viewport/max-height", "max-height")}} 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.</p> - -<p>뷰포트 값이 두 개 주어진 경우, 첫 번째 값은 최소 높이로 두 번째 값은 최대 높이로 설정합니다.</p> - -<p>{{cssinfo}}</p> - -<h2 id="구문">구문</h2> - -<pre class="brush: css">/* 한 값 */ -height: auto; -height: 320px; -height: 15em; - -/* 두 값 */ -height: 320px 200px; -</pre> - -<h3 id="값">값</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>다른 CSS 설명자의 값에서 계산된 사용값(used value).</dd> - <dt><code><length></code></dt> - <dd>음이 아닌 절대 또는 상대 길이.</dd> - <dt><code><percentage></code></dt> - <dd>가로 및 세로 길이 각각을 위한 줌 배율(factor) 1.0에서 초기 뷰포트의 너비 또는 높이에 대한 퍼센트 값. 음이 아니어야 합니다.</dd> -</dl> - -<h3 id="형식_구문">형식 구문</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="예제">예제</h2> - -<pre class="brush: css">@viewport { - height: 500px; -}</pre> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>초기 정의</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("css.at-rules.viewport.height")}}</p> diff --git a/files/ko/web/css/@viewport/viewport-fit/index.html b/files/ko/web/css/@viewport/viewport-fit/index.html deleted file mode 100644 index 7dab19acbd..0000000000 --- a/files/ko/web/css/@viewport/viewport-fit/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit ---- -<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> - -<p><strong><code>viewport-fit</code></strong> CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "설명자")}}는 문서의 뷰포트가 화면을 채우는 방법을 제어합니다.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css; no-line-numbers">/* Keyword values */ -viewport-fit: auto; -viewport-fit: contain; -viewport-fit: cover; -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>이 값은 초기 레이아웃 뷰포트에 영향을 미치지 않으며 전체 웹 페이지가 보여집니다.</dd> - <dt><code>contain</code></dt> - <dd>뷰포트 크기가 디스플레이 내에 새겨진 가장 큰 직사각형에 들어맞게 조정됩니다.</dd> -</dl> - -<dl> - <dt><code>cover</code></dt> - <dd>뷰포트 크기가 기기 디스플레이를 모두 채우도록 조정됩니다. 이때 중요한 내용이 디스플레이 바깥 영역으로 밀려나지 않도록 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용할 것을 권장합니다.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -<pre class="syntaxbox">auto | contain | cover -</pre> - -<div class="hidden">이 설명자는 아직 <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a>에 등재되지 않았습니다.</div> - -<h2 id="접근성_문제">접근성 문제</h2> - -<p><code>viewport-fit</code> 설명자를 사용할 때에는 모든 기기의 디스플레이가 직사각형인 것은 아니므로 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용해야 함을 기억하세요.</p> - -<h2 id="명세">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> - <td>{{Spec2("CSS Round Display")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - - - -<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{CSSxRef("env", "env()")}}</li> -</ul> diff --git a/files/ko/web/css/@viewport/zoom/index.html b/files/ko/web/css/@viewport/zoom/index.html deleted file mode 100644 index 699b60921e..0000000000 --- a/files/ko/web/css/@viewport/zoom/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: zoom -slug: Web/CSS/@viewport/zoom -tags: - - CSS - - CSS Descriptor - - Graphics - - Layout - - NeedsExample - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom ---- -<div>{{ CSSRef }}</div> - -<p><code>zoom</code> <a href="/ko/docs/Web/CSS">CSS</a> 설명자(descriptor)는 {{cssxref("@viewport")}}에 의해 정의된 문서의 초기 줌 배율(factor)을 설정합니다.</p> - -<p><code>1.0</code> 또는 <code>100%</code>인 <em>줌 배율</em>은 줌이 없음에 해당합니다. 큰 값은 확대. 작은 값은 축소.</p> - -<p>{{cssinfo}}</p> - -<h2 id="구문">구문</h2> - -<pre class="brush:css">/* 키워드 값 */ -zoom: auto; - -/* <number> 값 */ -zoom: 0.8; -zoom: 2.0; - -/* <percentage> 값 */ -zoom: 150%; -</pre> - -<h3 id="값">값</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>사용자 에이전트가 문서의 초기 줌 배율을 설정합니다. 사용자 에이전트는 문서가 그 배율을 찾기 위해 렌더링되는 캔버스 영역의 크기를 사용할 수 있습니다.</dd> - <dt><code><number></code></dt> - <dd>줌 배율로 사용되는 음이 아닌 수. 배율 1.0은 줌이 수행되지 않음을 뜻합니다. 1.0보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd> - <dt><code><percentage></code></dt> - <dd>줌 배율로 사용되는 음이 아닌 퍼센트 값. 배율 100%는 줌이 수행되지 않음을 뜻합니다. 100%보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd> -</dl> - -<h3 id="형식_구문">형식 구문</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Specifications" name="Specifications">명세</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">명세</th> - <th scope="col">상태</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>초기 스펙</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("css.at-rules.viewport.zoom")}}</p> diff --git a/files/ko/web/css/인접_형제_선택자/index.html b/files/ko/web/css/adjacent_sibling_combinator/index.html index 4446172ab3..2d054e75f9 100644 --- a/files/ko/web/css/인접_형제_선택자/index.html +++ b/files/ko/web/css/adjacent_sibling_combinator/index.html @@ -1,11 +1,12 @@ --- title: 인접 형제 결합자 -slug: Web/CSS/인접_형제_선택자 +slug: Web/CSS/Adjacent_sibling_combinator tags: - CSS - Reference - Selectors translation_of: Web/CSS/Adjacent_sibling_combinator +original_slug: Web/CSS/인접_형제_선택자 --- <div>{{CSSRef("Selectors")}}</div> diff --git a/files/ko/web/css/background-repeat/index.html b/files/ko/web/css/background-repeat/index.html index 5183ad67d6..b30e77ee93 100644 --- a/files/ko/web/css/background-repeat/index.html +++ b/files/ko/web/css/background-repeat/index.html @@ -181,7 +181,7 @@ div { /* 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); + url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; diff --git a/files/ko/web/css/common_css_questions/index.html b/files/ko/web/css/common_css_questions/index.html deleted file mode 100644 index 604448f6c3..0000000000 --- a/files/ko/web/css/common_css_questions/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -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/all_about_the_containing_block/index.html b/files/ko/web/css/containing_block/index.html index 35c6bf56cb..78bb5734d8 100644 --- a/files/ko/web/css/all_about_the_containing_block/index.html +++ b/files/ko/web/css/containing_block/index.html @@ -1,12 +1,13 @@ --- title: 컨테이닝 블록의 모든 것 -slug: Web/CSS/All_About_The_Containing_Block +slug: Web/CSS/Containing_block tags: - CSS - Guide - Layout - Position translation_of: Web/CSS/Containing_block +original_slug: Web/CSS/All_About_The_Containing_Block --- <div>{{cssref}}</div> 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 index 01ae23c400..229a9eabd0 100644 --- 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 @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2> <h3 id="HTML_Content">HTML Content</h3> 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 index a5db192618..db9310aa83 100644 --- 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 @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- <p>이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> <h3 id="HTML_Content">HTML Content</h3> 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 index 00b22833fb..63a6166cd1 100644 --- 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 @@ -8,7 +8,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator --- <p>이 도구를 사용해 CSS {{cssxref("box-shadow")}} 효과를 생성할 수 있습니다.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> <h3 id="HTML_Content">HTML Content</h3> 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 deleted file mode 100644 index 69d4320e3c..0000000000 --- a/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -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 -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -<p>{{CSSRef}}</p> - -<p><a href="/ko/CSS" title="CSS3">CSS3</a>를 사용하면 엘리먼트에 <strong>여러개의 배경</strong>을 지정할 수 있다. 첫 번째로 지정한 배경이 가장 앞에 보이고 나중에 지정한 배경이 뒤에 보인다. 배경 색상({{ cssxref("color") }})는 맨 마지막에만 지정할 수 있다. </p> - -<p>여러개의 배경을 지정하는건 간단하다.</p> - -<pre class="brush: css">.myclass { - background: background1, background 2, ..., backgroundN; -} -</pre> - -<p>배경에 관련된 다른 속성들은 {{ cssxref("background") }} 속성에 한꺼번에 지정할 수도 있고 리스트 형태로 각각 지정할 수도 있다. 하지만 {{ cssxref("background-color") }} 속성은 리스트 형태로 지정할 수 없다. 다음과 같은 속성들은 리스트 형태로 동시에 여러개 지정할 수 있다. {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}</p> - -<h2 id="예제">예제</h2> - -<p>이 예제에서는 파이어포스 로고, 선형 그라디언트, 꽃이 그려진 사진을 한 엘리먼트에 적용해본다. </p> - -<pre class="brush: css">.multi_bg_example { - background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), - linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), - url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); - background-repeat: no-repeat, no-repeat, repeat; - background-position: bottom right, left, right; -} -</pre> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Result</td> - </tr> - <tr> - <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td> - </tr> - </tbody> -</table> - -<p>첫 번째 배경으로 지정한(리스트에서 첫번째) 파이어폭스 로고가 맨 위에 보이고 선형 그라디언트, 꽃이 그려진 사진 순서대로 보인다. {{ cssxref("background-repeat") }} 와 {{ cssxref("background-position") }}) 속성들도 리스트 형태로 지정되었는데 순서대로 해당하는 배경에 적용된다. 예를 들어 {{ cssxref("background-repeat") }} 속성 중 첫 번째 no-repeat는 첫 번째 배경인 파이어폭스 로고에 적용된다.</p> - -<h2 id="더_보기">더 보기</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a></li> -</ul> 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/resizing_background_images/index.html index f3f0d6529b..09a00d46bc 100644 --- a/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ b/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -1,6 +1,6 @@ --- title: 배경 이미지 크기 조정하기 -slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images tags: - CSS - CSS Background @@ -10,6 +10,7 @@ tags: - Reference - Web translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images --- <div>{{cssref}}</div> diff --git a/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html b/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 416718c17f..e8e6d447af 100644 --- a/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html +++ b/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -1,12 +1,13 @@ --- title: cursor 속성값에 URL 사용 -slug: Web/CSS/cursor/Using_URL_values_for_the_cursor_property +slug: Web/CSS/CSS_Basic_User_Interface/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 +original_slug: Web/CSS/cursor/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> 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 index f5437c05b5..e4dfdff671 100644 --- a/files/ko/web/css/css_colors/color_picker_tool/index.html +++ b/files/ko/web/css/css_colors/color_picker_tool/index.html @@ -3,7 +3,7 @@ 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;"> +<div class="hidden"> <h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> <h3 id="HTML">HTML</h3> diff --git a/files/ko/web/css/css_columns/using_multi-column_layouts/index.html b/files/ko/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..1f860e087a --- /dev/null +++ b/files/ko/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,205 @@ +--- +title: CSS 다단 레이아웃 사용 +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts +tags: + - Advanced + - CSS + - Guide + - Multi-columns +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +original_slug: CSS3_Columns +--- +<p>{{CSSRef("CSS Multi-columns")}}</p> + +<p><span class="seoSummary"><strong>CSS 다단(multi-column) 레이아웃</strong>은 다단 텍스트 정의가 쉽도록 <em>블록 레이아웃 모드</em>를 확장합니다.</span> 사람들은 줄이 너무 긴 경우 텍스트 읽는데 어려움이 있습니다; 한 줄 끝에서 다음 줄 시작까지 눈에 옮기기 너무 긴 경우, 어느 줄을 읽고 있었는 지를 잊어버립니다. 그러므로, 큰 화면을 최대로 쓰기 위해서는, 너비가 제한된 텍스트 단을 나란히 놓아야 합니다, 바로 신문이 하는 것처럼.</p> + +<p>불행하게도 이는 CSS 및 HTML로 하기는 고정 위치에서 강제 단 바꿈 또는 텍스트에 허용되는 마크업의 심한 제한 혹은 위대한(heroic) 스크립팅 사용 없이는 불가능합니다. 이 제한은 전통 블록 레이아웃 모드를 확장하는 새로운 CSS 속성 추가로 해결됐습니다.</p> + +<h2 id="단_사용">단 사용</h2> + +<h3 id="단_수와_너비">단 수와 너비</h3> + +<p>두 CSS 속성은 많은 단을 보일 지 여부와 방법을 제어합니다: {{ Cssxref("column-count") }} 및 {{ Cssxref("column-width") }}.</p> + +<p><code>column-count</code> 속성은 단 수를 특정한 수로 설정합니다. 가령,</p> + +<h2 id="예_1">예 1</h2> + +<h3 id="HTML">HTML</h3> + +<div id="column_count"> +<pre class="brush: html"><div id="col">Lorem ipsum dolor sit amet, consectetur adipisicing 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</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#col { +-moz-column-count: 2; +-webkit-column-count: 2; +column-count: 2; +} +</pre> +</div> + +<h3 id="결과">결과</h3> + +<p>두 단에 콘텐츠를 표시합니다 (다단 준수 브라우저를 사용 중인 경우):</p> + +<p>{{EmbedLiveSample('column_count','700px', '', '')}}</p> + +<p><code>column-width</code> 속성은 희망 최소 단 너비를 설정합니다. <code>column-count</code>도 설정되지 않은 경우, 그러면 브라우저는 자동으로 이용 가능한 너비에 맞게 많은 단을 만듭니다.</p> + +<h2 id="예_2">예 2</h2> + +<h3 id="HTML_2">HTML</h3> + +<div id="column_width"> +<pre class="brush: html"><div id="wid">Lorem ipsum dolor sit amet, consectetur adipisicing 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</div> +</pre> + +<h3 id="CSS_2">CSS</h3> + +<pre class="brush: css">#wid { +-moz-column-width: 100px; +-webkit-column-width: 100px; +column-width: 100px; +} +</pre> +</div> + +<h3 id="결과_2">결과</h3> + +<p>{{ EmbedLiveSample('column_width','700px', '', '') }}</p> + +<p>정확한 세부사항은 <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 스펙</a>에 설명되어 있습니다.</p> + +<p>다단 블록에서, 콘텐츠는 필요에 따라 한 단에서 다음 단으로 자동으로 흐릅니다. 모든 HTML, CSS 및 DOM 기능은 단 내에서 지원됩니다, 편집 및 인쇄 중일 때.</p> + +<h3 id="columns_단축"><code>columns</code> 단축</h3> + +<p>대부분, 웹 디자이너는 두 CSS 속성({{ cssxref("column-count") }} 또는 {{ cssxref("column-width") }}) 중 하나를 사용합니다. 이러한 속성에 대한 값이 겹치지 않기에, 종종 {{ cssxref("columns") }} 단축을 쓰는 게 편리합니다. 가령.</p> + +<p><code>column-width:12em</code> CSS 선언은 다음으로 대체될 수 있습니다:</p> + +<h2 id="예_3">예 3</h2> + +<h3 id="HTML_3">HTML</h3> + +<div id="column_short"> +<pre class="brush: html"><div id="col_short">Lorem ipsum dolor sit amet, consectetur adipisicing 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</div> +</pre> + +<h3 id="CSS_3">CSS</h3> + +<pre class="brush: css">#col_short { +-moz-column-width: 12em; +-moz-columns: 12em; +-webkit-columns: 12em; +columns: 12em; +} +</pre> +</div> + +<h3 id="결과_3">결과</h3> + +<p>{{EmbedLiveSample('column_short','700px', '', '')}}</p> + +<p><code>column-count:4</code> CSS 선언은 다음으로 대체될 수 있습니다:</p> + +<h2 id="예_4">예 4</h2> + +<h3 id="HTML_4">HTML</h3> + +<div id="four_columns"> +<pre class="brush: html"><div id="columns_4">Lorem ipsum dolor sit amet, consectetur adipisicing 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</div> +</pre> + +<h3 id="CSS_4">CSS</h3> + +<pre class="brush: css">#columns_4{ +-moz-column-count: 4; +-moz-columns: 4; +-webkit-columns: 4; +columns: 4; +} +</pre> +</div> + +<h3 id="결과_4">결과</h3> + +<p>{{ EmbedLiveSample('four_columns','700px', '', '') }}</p> + +<p><code>column-width:8em</code> 및 <code>column-count:12</code> 두 CSS 선언은 다음으로 대체될 수 있습니다:</p> + +<h2 id="예_5">예 5</h2> + +<h3 id="HTML_5">HTML</h3> + +<div id="twelve_columns"> +<pre class="brush: html"><div id="columns_12">Lorem ipsum dolor sit amet, consectetur adipisicing 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</div> +</pre> + +<h3 id="CSS_5">CSS</h3> + +<pre class="brush: css">#columns_12 { +-moz-columns: 12 8em; +-webkit-columns: 12 8em; +columns: 12 8em; +} +</pre> +</div> + +<h3 id="결과_5">결과</h3> + +<p>{{ EmbedLiveSample('twelve_columns','700px', '', '') }}</p> + +<h3 id="높이_균형">높이 균형</h3> + +<p>CSS3 Column 스펙은 단 높이는 균형을 이루어야 함을 요구합니다: 즉, 브라우저는 각 단의 콘텐츠 높이가 거의 같도록 자동으로 최대 단 높이를 설정합니다. Firefox는 이를 행합니다.</p> + +<p>그러나, 일부 상황에서는 최대 단 높이를 명시해서 설정하는 것도 유용하고 그 다음 첫 단에서 시작하여 필요한 만큼 많은 단을 생성하며, 어쩌면 오른쪽으로 넘치는 콘텐츠를 배치합니다. 따라서, 높이가 제한되는 경우, 다단 블록에 CSS {{ cssxref("height") }} 또는 {{ cssxref("max-height") }} 속성을 설정하여, 각 단은 그 높이 및 더 이상 새로운 단을 추가하기 전까지 늘 수 있습니다. 이 모드 역시 레이아웃에 대해서 훨씬 더 효율이 좋습니다.</p> + +<h3 id="단_간격">단 간격</h3> + +<p>단 사이 간격이 있습니다. 기본 권장값은 <code>1em</code>입니다. 이 크기는 {{ Cssxref("column-gap") }} 속성을 다단 블록에 적용하여 바꿀 수 있습니다:</p> + +<h2 id="예_6">예 6</h2> + +<h3 id="HTML_6">HTML</h3> + +<div id="col_gap"> +<pre class="brush: html"><div id="column_gap">Lorem ipsum dolor sit amet, consectetur adipisicing 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</div> +</pre> + +<h3 id="CSS_6">CSS</h3> + +<pre class="brush: css">#column_gap { +-webkit-column-count: 5; +-moz-column-count: 5; +column-count: 5; +-moz-column-gap: 2em; +-webkit-column-gap: 2em; +column-gap: 2em; +} +</pre> +</div> + +<h3 id="결과_6">결과</h3> + +<p>{{ EmbedLiveSample('col_gap','700px', '', '') }}</p> + +<h2 id="우아한_강등">우아한 강등</h2> + +<p>단 속성은 단을 지원하지 않는 브라우저에 의해 그냥 무시됩니다. 따라서 비지원 브라우저에서는 1단으로 표시하고 지원하는 브라우저에서는 다단을 사용하는 레이아웃을 만드는 게 그런 대로 쉽습니다.</p> + +<p>모든 브라우저가 이러한 접두어 없는 속성을 지원하는 것은 아님을 주의하세요. 오늘날 대부분의 브라우저에서 이 기능을 사용하기 위해서, 각 속성은 세 번({{ property_prefix("-moz") }} 접두어로 한 번, {{ property_prefix("-webkit") }} 접두어로 한 번 그리고 접두어 없이 한 번) 작성되어야 합니다.</p> + +<h2 id="결론">결론</h2> + +<p>CSS3 단(column)은 웹 개발자가 화면 영역(real estate)을 최대한 쓸 수 있게 돕는 원시(primitive) 레이아웃입니다. 상상력이 풍부한 개발자는 많은 단 사용법을 찾을 지도 모릅니다, 특히 자동 높이 균형 기능 가지고.</p> + +<h2 id="참조">참조</h2> + +<ul> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</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/basic_concepts_of_flexbox/index.html index 1966114608..1a42e8635a 100644 --- a/files/ko/web/css/css_flexible_box_layout/flexbox의_기본_개념/index.html +++ b/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -1,7 +1,8 @@ --- title: flexbox의 기본 개념 -slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 --- <div>{{CSSRef}}</div> diff --git a/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html b/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html index a9f75246aa..6403678166 100644 --- a/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html +++ b/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -1,6 +1,6 @@ --- title: 가변상자의 대표적인 사용례 -slug: Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례 +slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox tags: - 가변상자 - 씨에스에스 @@ -8,6 +8,7 @@ tags: - 용례 - 패턴 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +original_slug: Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례 --- <p>{{CSSRef}}</p> diff --git a/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html b/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html index cc7753cb70..b2a138ce3e 100644 --- a/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html +++ b/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -1,6 +1,6 @@ --- title: 일반 대열 속 블록 및 인라인 조판 -slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 +slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow tags: - 대열 - 씨에스에스 @@ -10,6 +10,7 @@ tags: - 조판 - 중급 translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +original_slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 --- <div>{{CSSRef}}</div> diff --git a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html index 697bdfacde..d99969965b 100644 --- a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html +++ b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html @@ -1,6 +1,6 @@ --- title: 대열 조판과 대열이탈 -slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow tags: - 가시성 - 대열 조판 @@ -11,6 +11,7 @@ tags: - 중급 - 텍스트 대열이탈 translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +original_slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 --- <p class="summary">컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.</p> diff --git a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html b/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html index 4d35855ee5..0d932806c2 100644 --- a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html +++ b/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html @@ -1,6 +1,6 @@ --- title: 대열 조판과 쓰기 모드 -slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes tags: - 대열 조판 - 쓰기모드 @@ -8,6 +8,7 @@ tags: - 안내서 - 지향 translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +original_slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 --- <p class="summary">어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/일반_대열_속_블록_및_인라인_조판">조판</a> 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.</p> diff --git a/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html b/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html index 2b05d99f39..bdec8123f8 100644 --- a/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html +++ b/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html @@ -1,6 +1,6 @@ --- title: 대열과 탈대열 -slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열 +slug: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow tags: - 대열 - 대열 조판 @@ -10,6 +10,7 @@ tags: - 조판 - 중급 translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +original_slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열 --- <div>{{CSSRef}}</div> diff --git a/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html new file mode 100644 index 0000000000..fc171f9b89 --- /dev/null +++ b/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,107 @@ +--- +title: Consistent List Indentation +slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +tags: + - CSS + - Guide + - NeedsUpdate +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +original_slug: Consistent_List_Indentation +--- +<div>{{CSSRef}}</div> + +<p>가장 흔하게 리스트에 적용되는 스타일 변경은 들여쓰기(indentation)거리의 변경입니다 -- 즉, 리스트 아이텡을 오른쪽으로 얼마나 멀리 들여쓸것인가 라는것입니다. 이 작업은 가끔 한 브라우저에서 나오던 효과가 다른 브라우저에서는 같은 효과를 내지 못해서 애를 먹게하곤 합니다. 예를들면, 리스트가 왼쪽 마진을 갖지 못하도록 선언할 경우, 익스플로러에선 이동이되지만, Gecko기반의 브라우저에선 고집스럽게도 꼼짝않고 제 자리를 지키며 있는 그런 경우 입니다.</p> + +<p>왜 이런 일이 일어나는 가를 이해하고 더 나아가 이러한 문제점을 피해나갈 방법을 이해하기 위해서, 리스트 형성에대한 세부과정을 검토하는 것이 필요합니다.</p> + +<h2 id=".EB.A6.AC.EC.8A.A4.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.A6.AC.EC.8A.A4.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0">리스트 만들기</h2> + +<p>먼저, 한개의 단순한 리스트 아이템을 생각해봅시다. 이 리스트 아이템엔 아무런 마커(불렛이라고도 알려져 있습니다)도 없고, 아직 그자체로 어떤 리스트의 부분이 아닙니다. 그림 1에서 보이는 바와같이, 단순하고 아무 치장도 없는 채로 그냥 혼자 허공에 떠 있는 상태라고 할 수 있습니다.</p> + +<p><img alt="Figure 1" src="https://developer.mozilla.org/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p> + +<p>빨간 점선으로된 경계선은 리스트 아이템의 내용물-지역의 바깥 경계를 나타내고 있습니다. 이 시점에서 리스트 아이템은 패딩이나 보더(경계)를 가지고 있지 않다는 점을 상기하십시오. 만약 2개의 리스트 아이템을 더 추가 한다면, 그림 2에 보여진 것과같은 결과를 얻게 될 것입니다.</p> + +<p><img alt="Figure 2" src="https://developer.mozilla.org/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p> + +<p>이제 이 아이템들을 부모 엘리먼트로 랩핑(포장)합니다; 이 경우, 우리는 아이템들을 순서없는 리스트로 (즉, <code><ul></code>) 랩핑합니다. CSS 상자(박스) 모델에 의하면, 리스트 아이템들의 상자들은 부모 엘리먼트의 내용물-지역안에 디스플레이 되어야만 합니다. 이 부모 엘리먼트에 패딩이나 마진이 아직 없으므로 우리는 그림 3에 보여진 것과 같은 상황을 맞이하게 됩니다.</p> + +<p><img alt="Figure 3" src="https://developer.mozilla.org/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p> + +<p>여기서, 푸른 점선 경계선은 <code><ul></code>엘리먼트의 내용물 지역의 경계를 보여줍니다. <code><ul></code>엘리먼트에 패딩이 없으므로 엘리먼트의 내용물은 세 리스트 아이템들을 촘촘하게 랩핑하게 됩니다.</p> + +<p>이제, 리스트 아이템 마커를 추가합니다. 이 리스트는 순서가 없는 리스트이므로, 그림 4에 보여긴 것 같은 전통적인 채워진 원 불렛을 추가합니다.</p> + +<p><img alt="Figure 4" src="https://developer.mozilla.org/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p> + +<p>보여지는 것으론, 마커들은 <code><ul></code>의 내용물-지역의<em>바깥</em> 에 있으나, 여기서 이점은 그다지 중요하지 않습니다. 중요한 점은 마커들이 <code><li></code>엘리먼트들의 "principal 상자"의 밖에 놓여진다는 점입니다. 이 마커들은 <code><lt></code>의 내용물-지역의 밖에 매달려 있으나 여전히 <code><li></code>에 부착되어있는 일종의 리스트 아이템들의 꼬리표같다고 할 수 있습니다.</p> + +<p><br> + 바로 이런 이유로, 윈도우의 익스플로러을 제외한 모든 브라우저에서, 마커들이 <code><li></code>엘리먼트에 지정된 보더밖에 놓이며, <code>list-sytle-position</code>값으로 <code>outside</code>를 취하게 되는 것입니다. 만일 값이 <code>inside</code>로 바뀌게 되면, 마커들은, 비록 <code><li></code>의 바로 시작부분에 놓여진 inline 상자임에도 불구하고, <code><li></code> 안쪽으로 옯겨지게 됩니다.</p> + +<h2 id=".EB.91.90.EB.B2.88_.EB.93.A4.EC.97.AC.EC.93.B0.EA.B8.B0" name=".EB.91.90.EB.B2.88_.EB.93.A4.EC.97.AC.EC.93.B0.EA.B8.B0">두번 들여쓰기</h2> + +<p>그럼 이 모든게 문서에서는 어떻게 나타날까요? 현재, 우리는 아래의 스타일들에 비견되는 상황에 있다고 할 수 있습니다.</p> + +<pre>ul, li {margin-left: 0; padding-left: 0;}</pre> + +<p>만일 이 리스트를 있는 그대로 문서에 삽입할 경우, 가시적 들여쓰기 효과는 나타나지 않고, 마커들은 브라우저 윈도우의 왼쪽끝으로 잘려나갈 상황에 처하게 될것입니다.</p> + +<p>이를 피하고 들여쓰기효과를 얻을 목적으로 브라우저 개발자들에게 사용가능한 옵션은 다음의 세가지밖에 없습니다.</p> + +<ol> + <li>각 <code><li></code> 엘리먼트에 왼쪽 마진을 준다.</li> + <li><code><ul></code> 엘리먼트에 왼쪽 마진을 준다.</li> + <li><code><ul></code> 엘리먼트에 왼쪽 패딩을 준다.</li> +</ol> + +<p>결과론적으로, 누구도 첫번째 옵션을 사용하지는 않는것 같습니다. 두번째 옵션은 윈도우 익스플로러, 매킨토쉬, 그리고 오페라에서 적용되었습니다. 세번째 옵션은 Gecko 와 범주상 이를 임베드해서 사용하는 모든 브라우저들에 적용되었다고 할 수 있습니다.</p> + +<p>이 두 접근법에 대해서 잠깐 살펴봅시다. 익스플로러와 오페라의 경우, 리스트들은 <code><ul></code>에 40 픽셀의 왼쪽 마진을 줌으로써 들여쓰여지게 됩니다. 만일 <code><ul></code> 엘리먼트에 배경색을 적용하고 리스트 아이템과 <code><ul></code> 보더들을 그냥 놔둘 경우, 그림 5에서 보이는 것과 같은 결과를 얻게 됩니다.</p> + +<p><img alt="Figure 5"></p> + +<p>반면, Gecko는 <code><ul></code> 엘리먼트에 대해서 40픽셀의 왼쪽<em>패딩</em> 을 줍니다. 따라서 그림 5를 만들어내는데 사용된 것과 똑 같은 스타일을 적용하게 된다고 가정하면, Gecko기반 브라우저로 예제를 로딩했을때 그림 6과 같은 그림을 보게 됩니다.</p> + +<p><img alt="Figure 6"></p> + +<p>보이는 바와 같이, 마커들은, 어디에 있게 되건간에, <code><li></code> 엘리먼트에 붙여진 채로 남아 있습니다. 차이점은 전적으로 <code><ul></code>가 어떤식으로 스타일을 갖추게 되는가에 달려있습니다. 이 차이점은 <code><ul></code> 엘리먼트에 배경색이나 보더를 지정하려고 할 경우에만 나타나게 됩니다.</p> + +<h2 id=".EC.9D.BC.EA.B4.80.EC.84.B1_.EC.B0.BE.EA.B8.B0" name=".EC.9D.BC.EA.B4.80.EC.84.B1_.EC.B0.BE.EA.B8.B0">일관성 찾기</h2> + +<p>모든것을 정리해보면 이런 결론에 도달하게 됩니다. 즉, Gecko, 익스플로러, 그리고 오페라 간에 리스트을 일관성있게 렌더링하고 싶으면, <code><ul></code> 엘리먼트의 왼쪽 마진 그리고 왼쪽 패딩<em>둘다</em> 지정해야 한다는 것입니다. 이런 목적으로 <code><li></code> 을 아예 무시해 버릴 수도 있습니다. 넷스케이프 6.x 에서 디폴트 디스플레이로 돌아가고 싶다면:</p> + +<pre>ul {margin-left: 0; padding-left: 40px;}</pre> + +<p>만약, 익스플로러/오페라 모델을 따르길 원한다면:</p> + +<pre>ul {margin-left: 40px; padding-left: 0;}</pre> + +<p>라고 쓰면 됩니다.</p> + +<p>물론, 자기 자신이 선호하는 값을 써 넣을 수도 있습니다. 원한다면 둘다 <code>1.25em</code>로 정해 줄 수도 있습니다 -- 픽셀에 기반한 들여쓰기에만 묶여있을 이유는 없습니다. 만일 리스트들이 들여쓰기를 하지 않도록 리셋하고 싶으면, 패딩과 마진 값을 0으로 정해 주어야만 합니다.</p> + +<pre>ul {margin-left: 0; padding-left: 0;}</pre> + +<p>하지만, 그렇게 하면, 불렛들이 리스트와 부모 엘리먼트의 바깥쪽에 매달려 있게 된다는 점을 기억하세요. 만일 <code>body</code>가 부모일 경우, 불렛이 브라우저 윈도우 밖으로 완전히 나가있게 되서, 보이지 않게 될 가능성이 아주 높습니다.</p> + +<h2 id=".EA.B2.B0.EB.A1.A0" name=".EA.B2.B0.EB.A1.A0">결론</h2> + +<p>결국, 여기에 언급된 브라우져들이 리스트를 레이아웃하는 방식에있어서 올바르거나 그르거나 하지 않다는 것을 알 수 있습니다. 각 브라우저는 다른 디폴트 스타일을 사용하고 있으며, 거기서 문제점들이 기어들어 오게 되는 것입니다. 리스트의 왼쪽 패딩과 왼쪽 마진 둘다를 확실하게 스타일 지정 함으로써 리스트 들여쓰기에 있어서 브라우저간 일관성을 보다 획기적으로 유지할 수 있게 되는 것입니다.</p> + +<h2 id=".EA.B6.8C.EC.9E.A5_.EC.82.AC.ED.95.AD" name=".EA.B6.8C.EC.9E.A5_.EC.82.AC.ED.95.AD">권장 사항</h2> + +<ul> + <li>리스트의 들여쓰기간격을 바꿀때에는 패딩과 마진 둘다 지정하는 것을 잊지마세요.</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Eric A. Meyer, Netscape Communications</li> + <li>Last Updated Date: Published 30 Aug 2002</li> + <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>Note: This reprinted article was originally part of the DevEdge site.</li> +</ul> +</div> diff --git a/files/ko/web/css/css_masks/index.html b/files/ko/web/css/css_masking/index.html index 5a48e0af6e..ddf760bb02 100644 --- a/files/ko/web/css/css_masks/index.html +++ b/files/ko/web/css/css_masking/index.html @@ -1,12 +1,13 @@ --- title: CSS Masking -slug: Web/CSS/CSS_Masks +slug: Web/CSS/CSS_Masking tags: - CSS - CSS Masking - Overview - Reference translation_of: Web/CSS/CSS_Masking +original_slug: Web/CSS/CSS_Masks --- <div>{{CSSRef}}</div> 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 index 9444e2bb5e..1c38813c95 100644 --- 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 @@ -107,7 +107,7 @@ span.bold { font-weight: bold; } <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> + <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" class="hidden"> </span></li> </ul> <div class="originaldocinfo"> <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> 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 index 04e826dc17..79cf0b4d91 100644 --- 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 @@ -131,7 +131,7 @@ span.bold { font-weight: bold; } <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> + <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" class="hidden"> </span></li> </ul> <p> </p> <div class="originaldocinfo"> 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 index c81a169965..15368d34c5 100644 --- a/files/ko/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ko/web/css/css_transitions/using_css_transitions/index.html @@ -76,7 +76,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -141,7 +141,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -206,7 +206,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -271,7 +271,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -340,7 +340,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -403,7 +403,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -466,7 +466,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -529,7 +529,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -596,7 +596,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -663,7 +663,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -730,7 +730,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -797,7 +797,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ko/web/css/css_단위와_값/index.html b/files/ko/web/css/css_values_and_units/index.html index 94d8ceabd6..5f1f3831fb 100644 --- a/files/ko/web/css/css_단위와_값/index.html +++ b/files/ko/web/css/css_values_and_units/index.html @@ -1,12 +1,13 @@ --- title: CSS 단위와 값 -slug: Web/CSS/CSS_단위와_값 +slug: Web/CSS/CSS_Values_and_Units tags: - CSS - 값과 단위 - 안내서 - 참조 translation_of: Web/CSS/CSS_Values_and_Units +original_slug: Web/CSS/CSS_단위와_값 --- <div>{{CSSRef}}</div> diff --git a/files/ko/web/css/filter/index.html b/files/ko/web/css/filter/index.html index 8020311f12..c6b8b3afd6 100644 --- a/files/ko/web/css/filter/index.html +++ b/files/ko/web/css/filter/index.html @@ -83,7 +83,7 @@ filter: unset;</pre> <pre class="brush: css notranslate">filter: blur(5px) </pre> -<div id="blur_example" style="display: none;"> +<div id="blur_example" class="hidden"> <pre class="brush: html notranslate"> <table class="standard-table"> <thead> <tr> @@ -178,7 +178,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="brightness_example" style="display: none;"> +<div id="brightness_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -273,7 +273,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="contrast_example" style="display: none;"> +<div id="contrast_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -380,7 +380,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="shadow_example" style="display: none;"> +<div id="shadow_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -498,7 +498,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: grayscale(100%)</pre> -<div id="grayscale_example" style="display: none;"> +<div id="grayscale_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -582,7 +582,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre> -<div id="huerotate_example" style="display: none;"> +<div id="huerotate_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -669,7 +669,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: invert(100%)</pre> -<div id="invert_example" style="display: none;"> +<div id="invert_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -753,7 +753,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: opacity(50%)</pre> -<div id="opacity_example" style="display: none;"> +<div id="opacity_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -835,7 +835,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: saturate(200%)</pre> -<div id="saturate_example" style="display: none;"> +<div id="saturate_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -916,7 +916,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: sepia(100%)</pre> -<div id="sepia_example" style="display: none;"> +<div id="sepia_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> @@ -1000,7 +1000,7 @@ table.standard-table td { <pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre> -<div id="combination_example" style="display: none;"> +<div id="combination_example" class="hidden"> <pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> diff --git a/files/ko/web/css/font/index.html b/files/ko/web/css/font/index.html index 209669ed77..9be79a3f01 100644 --- a/files/ko/web/css/font/index.html +++ b/files/ko/web/css/font/index.html @@ -104,9 +104,8 @@ p { font: bold italic large serif } p { font: status-bar } </pre> -<p id="HTML_Content" style="display: none;">HTML Content</p> +<p id="HTML_Content" class="hidden">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()"> @@ -200,9 +199,9 @@ p { font: status-bar } <br/><br/><br/><br/><br/><br/> </pre> -<p id="CSS_Content" style="display: none;">CSS Content</p> +<p id="CSS_Content" class="hidden">CSS Content</p> -<pre class="brush: css" style="display: none;">body, input { +<pre class="brush: css" class="hidden">body, input { font: 14px arial; overflow: hidden; } @@ -253,9 +252,9 @@ p { font: status-bar } display: inline-block; }</pre> -<p id="JavaScript_Content" style="display: none;">JavaScript Content</p> +<p id="JavaScript_Content" class="hidden">JavaScript Content</p> -<pre class="brush: js" style="display: none;">var textAreas = document.getElementsByClassName("curCss"), +<pre class="brush: js" class="hidden">var textAreas = document.getElementsByClassName("curCss"), shortText = "", getCheckedValue, setCss, diff --git a/files/ko/web/css/getting_started/javascript/index.html b/files/ko/web/css/getting_started/javascript/index.html deleted file mode 100644 index 94759e21bf..0000000000 --- a/files/ko/web/css/getting_started/javascript/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: JavaScript -slug: Web/CSS/Getting_Started/JavaScript -tags: - - 'CSS:Getting_Started' -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -<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 deleted file mode 100644 index d8ca001fb2..0000000000 --- a/files/ko/web/css/getting_started/svg_graphics/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -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/image-rendering/index.html b/files/ko/web/css/image-rendering/index.html index 85522966f0..01bae01e74 100644 --- a/files/ko/web/css/image-rendering/index.html +++ b/files/ko/web/css/image-rendering/index.html @@ -47,7 +47,7 @@ image-rendering: unset; <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> +<div class="note">The values <span id="cke_bm_145S" class="hidden"> </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> diff --git a/files/ko/web/css/index/index.html b/files/ko/web/css/index/index.html deleted file mode 100644 index 953130cd26..0000000000 --- a/files/ko/web/css/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -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/media_queries/using_media_queries/index.html b/files/ko/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..78061792a4 --- /dev/null +++ b/files/ko/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,387 @@ +--- +title: 미디어 쿼리 사용하기 +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - Advanced + - CSS + - Guide + - Media + - Media Queries + - Responsive Design + - Web +translation_of: Web/CSS/Media_Queries/Using_media_queries +original_slug: Web/Guide/CSS/Media_queries +--- +<div>{{cssref}}</div> + +<p><strong>미디어 쿼리</strong>는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, {{glossary("viewport", "뷰포트")}} 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.</p> + +<p>미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.</p> + +<ul> + <li><a href="/ko/docs/Web/CSS">CSS</a> {{cssxref("@media")}}와 {{cssxref("@import")}} <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 사용해 특정 조건에 따라 스타일을 적용할 때.</li> + <li>{{htmlelement("style")}}, {{htmlelement("link")}}, {{htmlelement("source")}}, 기타 다른 <a href="/ko/docs/Web/HTML">HTML</a> 요소에 <code>media</code> 특성을 사용해 특정 매체만 가리키게 할 때.</li> + <li>{{domxref("Window.matchMedia()")}}와 {{domxref("MediaQueryList.addListener()")}} <a href="/ko/docs/Web/JavaScript">JavaScript</a> 메서드를 사용해 <a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">미디어 상태를 판별하고 관측</a>할 때.</li> +</ul> + +<div class="note"> +<p><strong>참고:</strong> 이 페이지의 CSS는 시연용으로 <code>@media</code>를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<p>미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.</p> + +<p>미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산됩니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> {{HTMLElement("link")}}의 미디어 쿼리가 <a href="http://scottjehl.github.com/CSS-Download-Tests/">거짓을 반환하더라도 스타일시트는 다운로드</a>됩니다. 그렇지만 그 안의 내용은 쿼리가 참이 되어야 적용됩니다.</p> +</div> + +<h3 id="미디어_유형">미디어 유형</h3> + +<p>미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 <code>not</code>이나 <code>only</code> 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 <code>all</code>을 사용합니다.</p> + +<dl> + <dt><code><strong>all</strong></code></dt> + <dd>모든 장치에 적합합니다.</dd> + <dt><code>print</code></dt> + <dd>인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.<br> + (<a href="/ko/docs/Web/CSS/Paged_Media">인쇄 미디어</a> 문서를 방문해 <code>print</code> 형식에서 발생 가능한 서식 문제의 정보를 확인해주세요.)</dd> + <dt><code>screen</code></dt> + <dd>주로 화면이 대상입니다.</dd> + <dt><code>speech</code></dt> + <dd>음성 합성장치 대상입니다.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>사용하지 않는 미디어 유형:</strong> CSS2.1과 <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> 모듈은 여러가지 추가 유형(<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>)을 정의했으나 <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>에서 제거됐으므로 사용해선 안됩니다. <code>aural</code>은 유사한 유형인 <code>speech</code>로 대체됐습니다.</p> +</div> + +<h3 id="미디어_특성">미디어 특성</h3> + +<p>미디어 특성은 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.</p> + +<table> + <thead> + <tr> + <th>이름</th> + <th>요약</th> + <th>참고</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("@media/any-hover", "any-hover")}}</td> + <td>사용 가능한 입력 방식 중 하나로 사용자가 요소 위에 호버할 수 있는가?</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td> + <td>사용 가능한 입력 방식 중 하나가 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td> + <td>뷰포트의 가로세로비</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/color", "color")}}</td> + <td>출력 장치의 색상 채널별 비트 수, 흑백일 땐 0</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td> + <td>사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/color-index", "color-index")}}</td> + <td>출력 장치의 색상 검색 테이블(LUT) 항목 수, 존재하지 않을 땐 0</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td> + <td>출력 장치의 가로세로비</td> + <td>Media Queries Level 4에서 제거</td> + </tr> + <tr> + <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td> + <td>출력 장치 렌더링 표면의 높이</td> + <td>Media Queries Level 4에서 제거</td> + </tr> + <tr> + <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td> + <td>출력 장치 렌더링 표면의 너비</td> + <td>Media Queries Level 4에서 제거</td> + </tr> + <tr> + <td>{{cssxref("@media/display-mode", "display-mode")}}</td> + <td>웹 앱 매니페스트의 <code><a href="/ko/docs/Web/Manifest#display">display</a></code> 항목이 정의한 애플리케이션의 표시 모드</td> + <td><a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest 명세</a>에서 정의</td> + </tr> + <tr> + <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td> + <td>사용자 에이전트가 색상 팔레트를 제한하는지 여부</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/grid", "grid")}}</td> + <td>장치가 그리드와 비트맵 스크린 중 어느 것을 사용하나?</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/height", "height")}}</td> + <td>뷰포트의 높이</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/hover", "hover")}}</td> + <td>주 입력 방식으로 사용자가 요소 위에 호버할 수 있는가?</td> + <td>Media Queries Level 4에서 제거</td> + </tr> + <tr> + <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td> + <td>사용자 에이전트나 운영 체제가 색상을 반전 중인가?</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/light-level", "light-level")}}</td> + <td>주변 환경의 광도</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/monochrome", "monochrome")}}</td> + <td>출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/orientation", "orientation")}}</td> + <td>뷰포트의 방향</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td> + <td>콘텐츠가 블록 축 방향으로 뷰포트를 오버플로 할 경우 출력 장치가 어떻게 처리하는가?</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td> + <td>콘텐츠가 인라인 축 방향으로 뷰포트를 오버플로 할 경우 스크롤 가능한가?</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/pointer", "pointer")}}</td> + <td>주 입력 방식이 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td> + <td>라이트/다크 색채 조합 중 사용자가 선호하는 것</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td> + <td>사용자가 시스템에 두 인접 색상 간의 고대비를 요청했는지 탐지</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td> + <td>사용자가 줄어든 움직임을 선호함</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td> + <td>사용자가 줄어든 투명도를 선호함.</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/resolution", "resolution")}}</td> + <td>출력 장치의 픽셀 밀도</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/scan", "scan")}}</td> + <td>출력 장치의 스캔 절차</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/scripting", "scripting")}}</td> + <td>JavaScript 등 스크립트 사용 가능 여부 탐지</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/update-frequency", "update")}}</td> + <td>출력 장치가 콘텐츠의 외형을 수정할 수 있는 주기</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/width", "width")}}</td> + <td>스크롤바를 포함한 뷰포트 너비</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="논리_연산자">논리 연산자</h3> + +<p><code>not</code>, <code>and<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>only</code>와 같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.</p> + +<h4 id="and"><code>and</code></h4> + +<p><code>and</code> 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.</p> + +<h4 id="not"><code>not</code></h4> + +<p><code>not</code> 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. <code>not</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> Level 3 모듈에서는 <code>not</code> 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.</p> +</div> + +<h4 id="only"><code>only</code></h4> + +<p><code>only</code> 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. <code>only</code>를 사용하지 않은 <code>screen and (max-width: 500px)</code> 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 <code>screen</code>으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. <code>only</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p> + +<h4 id="쉼표"><code>,</code> (쉼표)</h4> + +<p>쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 <code>or</code> 연산자처럼 동작합니다.</p> + +<h2 id="미디어_유형_특정하기">미디어 유형 특정하기</h2> + +<p>미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.</p> + +<pre class="brush: css notranslate">@media print { ... }</pre> + +<p>다수의 장치를 특정할 수도 있습니다. 예컨대 아래 <code>@media</code> 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.</p> + +<pre class="brush: css notranslate">@media screen, print { ... }</pre> + +<p><a href="#미디어_유형">미디어 유형</a> 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.</p> + +<h2 id="미디어_기능_특정하기">미디어 기능 특정하기</h2> + +<p>미디어 기능은 주어진 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.</p> + +<pre class="brush: css notranslate">@media (hover: hover) { ... }</pre> + +<p>많은 미디어 기능은 <u>범위 기능</u>으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 {{glossary("viewport", "뷰포트")}} 너비가 12450px 이하인 경우에만 스타일을 적용합니다.</p> + +<pre class="brush: css notranslate">@media (max-width: 12450px) { ... }</pre> + +<p>미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 <code>0</code>이 아닐 때 (Level 4부터는 <code>0</code>과 <code>none</code>이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.</p> + +<pre class="brush: css notranslate">@media (color) { ... }</pre> + +<p>어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.</p> + +<pre class="brush: css notranslate">@media speech and (aspect-ratio: 11/5) { ... }</pre> + +<p><a href="#미디어_특성">미디어 특성</a> 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.</p> + +<h2 id="복잡한_미디어_쿼리_생성">복잡한 미디어 쿼리 생성</h2> + +<p>때로는 사용자가 다수의 조건으로 구성된 쿼리를 생성하기 원할 수도 있습니다. 이때 논리연산자인 : <code>not</code>, <code>and</code>, 그리고 <code>only</code>를 사용하면 됩니다. 더 나아가 , 사용자는 복수의 미디어쿼리를 쉼표로 연결하여 리스트를 작성할수도 있습니다. 이렇게 함으로써 사용자는 다양한 상황에서 같은 스타일을 적용할 수 있습니다.</p> + +<p>앞서 예와 같이, <code>and</code> 연산자를 사용하여 미디어유형과 미디어기능을 그룹지을 수 있습니다. 또한 <code>and</code> 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 <code>not</code> 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. <code>only</code> 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.</p> + +<div class="note"> +<p><strong>Note:</strong> 대부분의 경우, <code>all</code> 미디어유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다. 하지만, 사용자가 <code>not</code> 이나 <code>only</code> 연산자를 사용하면, 사용자는 반드시 미디어유형을 특정해야 합니다.</p> +</div> + +<h3 id="다수의_유형과_기능_조합하기">다수의 유형과 기능 조합하기</h3> + +<p>The <code>and</code> 연산자는 미디어기능과 미디어유형 혹은 다른 미디어 기능들과 연결해줍니다. 이 예에서는 두개의 미디어기능을 기기의 랜스케입(가로방향화면)방향으로 제한시키고 최소폭을 30 ems로 지정합니다:</p> + +<pre class="brush: css notranslate">@media (min-width: 30em) and (orientation: landscape) { ... }</pre> + +<p>화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 <code>screen</code> 미디어유형에 미디어기능을 연결합니다:</p> + +<pre class="brush: css notranslate">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre> + +<h3 id="다수의_쿼리_판별">다수의 쿼리 판별</h3> + +<p>쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어타입, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다:</p> + +<pre class="brush: css notranslate">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre> + +<p>위에 예에서 보면, 만일 사용자가 페이지높이가 800px인 프린터를 사용한다면, 첫번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다. 마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두번째 쿼리가 적용될 것이고, 미디어 문은 참값을 반환하게 됩니다.</p> + +<h3 id="쿼리의_뜻_반전하기">쿼리의 뜻 반전하기</h3> + +<p><code>not</code> 키워드는 미디어쿼리 전체의 의미를 반전시킵니다. 이 키워드는 적용된 미디어쿼리를 반전시킵니다. (즉, 쉼표로 연결된 미디어쿼리 리스트의 하나하나의 미디어쿼리에 적용되는 것이 아닙니다) <code>not</code> 키워드는 개별적인 기능의 쿼리를 부정하는데 사용할 수 없고, 오직 미디어쿼리 전체를 부정하는 데에만 사용됩니다. <code>not</code> 연산자 키워드는 다음의 쿼리에서 보여지듯이 가장 나중에 적용됩니다:</p> + +<pre class="brush: css notranslate">@media not all and (monochrome) { ... } +</pre> + +<p>... 그러므로 위의 쿼리는 다음과 같이 평가됩니다:</p> + +<pre class="brush: css notranslate">@media not (all and (monochrome)) { ... } +</pre> + +<p>... 다음과 같이 되는 것이 아닙니다:</p> + +<pre class="brush: css example-bad notranslate">@media (not all) and (monochrome) { ... }</pre> + +<p>다른 예를 보자면, 다음의 미디어 쿼리는:</p> + +<pre class="brush: css notranslate">@media not screen and (color), print and (color) { ... } +</pre> + +<p>... 이렇게 평가됩니다:</p> + +<pre class="brush: css notranslate">@media (not (screen and (color))), print and (color) { ... }</pre> + +<h3 id="구형_브라우저와의_호환성_향상하기">구형 브라우저와의 호환성 향상하기</h3> + +<p><code>only</code> 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. <em>신형브라우저에는 아무런 영향을 주지 않습니다.</em></p> + +<pre class="brush: css notranslate">@media only screen and (color) { ... } +</pre> + +<h2 id="Level_4의_구문_향상">Level 4의 구문 향상</h2> + +<p>미디어쿼리 Level 4 사양은 향상된 구문을 포함하는데 그를 통해 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다. 예를 들면, 폭, 높이 처럼 말보다는 숫자에 관련된 것들입니다. Level 4 는 그러한 쿼리들을 작성하는데에 필요한 범위 구문을 제공합니다. 예를 들면, adds a <em>range context</em> for writing such queries. 폭을 표현하기 위해 <code>max-</code> 함수를 써서 사용자는 다음과 같이 쓸 수 있습니다:</p> + +<div class="note"> +<p><strong>Note:</strong> 미디어쿼리 Level 4 사양에는 상당수의 최신 브라우저를 지원하지만, 몇몇 미디어기능들은 잘 지원되지 않습니다. 자세한 사항은 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> browser compatibility table</a> 를 참조해 주십시요. </p> +</div> + +<pre class="brush: css notranslate">@media (max-width: 30em) { ... }</pre> + +<p>미디어 쿼리 Level 4 에서는 다음과 같이 쓸 수 있습니다:</p> + +<pre class="brush: css notranslate">@media (width <= 30em) { ... }</pre> + +<p><code>min-</code> 과 <code>max-</code> 를 사용하여 사용자가 두 값 사이에서 폭 값을 시험해 보고 싶은 상황이라면:</p> + +<pre class="brush: css notranslate">@media (min-width: 30em) and (max-width: 50em) { ... }</pre> + +<p>Level 4 구문에서는 이렇게 표현할 수 있습니다:</p> + +<pre class="brush: css notranslate">@media (30em <= width <= 50em ) { ... } +</pre> + +<p> Level 4 미디어쿼리는 또한 완전한 불리언 대수법을 사용하는 미디어쿼리들과 <strong>and</strong>, <strong>not</strong>, <strong>or</strong>.연산자를 결합할 수 있습니다. </p> + +<h3 id="not으로_기능_부정"><code>not</code>으로 기능 부정</h3> + +<p>미디어기능에 <code>not()</code> 을 사용하면 쿼리에 있는 기능을 부정합니다. 예를 들어, hover를 할 수 없는 장치를 사용할 때 <code>not(hover)</code> 를 사용할 수 있습니다.</p> + +<pre class="brush: css notranslate">@media (not(hover)) { ... }</pre> + +<h3 id="or로_다수의_기능_판별"><code>or</code>로 다수의 기능 판별</h3> + +<p><code>or</code> 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 <code>true</code> 값을 반환하게 할 수 있습니다. 예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.</p> + +<pre class="brush: css notranslate">@media (not (color)) or (hover) { ... } +</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">프로그래밍으로 미디어 쿼리 판별하기</a></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/reference/property_template/index.html b/files/ko/web/css/reference/property_template/index.html deleted file mode 100644 index 9df3680b49..0000000000 --- a/files/ko/web/css/reference/property_template/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -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/transition-delay/index.html b/files/ko/web/css/transition-delay/index.html index 17a8543321..58b3e456cd 100644 --- a/files/ko/web/css/transition-delay/index.html +++ b/files/ko/web/css/transition-delay/index.html @@ -44,7 +44,7 @@ transition-delay: unset; <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;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -111,7 +111,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -178,7 +178,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -245,7 +245,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <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;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ko/web/css/url/index.html b/files/ko/web/css/url()/index.html index 76904ccd73..ae4c05af7f 100644 --- a/files/ko/web/css/url/index.html +++ b/files/ko/web/css/url()/index.html @@ -1,6 +1,6 @@ --- title: <url> -slug: Web/CSS/url +slug: Web/CSS/url() tags: - CSS - CSS Data Type @@ -8,6 +8,7 @@ tags: - Reference translation_of: Web/CSS/url() translation_of_original: Web/CSS/url +original_slug: Web/CSS/url --- <div>{{ CssRef() }}</div> diff --git a/files/ko/web/css/visual_formatting_model/index.html b/files/ko/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..4f516071b3 --- /dev/null +++ b/files/ko/web/css/visual_formatting_model/index.html @@ -0,0 +1,224 @@ +--- +title: 시각적 서식 모델 +slug: Web/CSS/Visual_formatting_model +tags: + - 씨에스에스 + - 씨에스에스 상자 모델 + - 참조 +translation_of: Web/CSS/Visual_formatting_model +original_slug: Web/Guide/CSS/Visual_formatting_model +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary">씨에스에스 <ruby><em>시각적 서식 모델</em><rp> (</rp><rt>visual formatting model</rt><rp>) </rp></ruby>은 문서를 처리하여 그것을 시각적 매체에 표시하는 알고리즘입니다. 이 모델은 씨에스에스의 기본 개념입니다. </span></p> + +<p>시각적 서식 모델은 문서의 각 요소를 변환하여, <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">씨에스에스 상자 모델</a>에 부합하는 0, 1 또는 여러 상자를 생성합니다. 각 상자의 조판은 다음과 같이 정의됩니다:</p> + +<ul> + <li>상자의 면적: 정확히 정의하거나 제약을 받거나, 아에 정의하지 않습니다.</li> + <li>상자의 유형: 인라인, 인라인수준, 원자 인라인수준, 블록.</li> + <li><a href="/ko/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">위치잡기 기법</a>: 일반 대열 소속, 부동체, 또는 절대 위치잡기.</li> + <li>트리 구조에 속한 다른 요소 무리: 그것의 자녀와 이웃.</li> + <li>{{glossary("viewport")}} 크기와 위치.</li> + <li>컨테이너에 속한 이미지의 고유한 면적.</li> + <li>다른 외부 정보</li> +</ul> + +<p>동 모델은 컨테이너 블록의 모서리 기준과 비례하여 상자를 렌더링합니다. 보통, 하나의 상자는 자기 자손들을 위한 컨테이너 블록을 수립합니다. 그러나 상자는 자신의 상위 컨테이너 블록에 구속되지 않습니다. 상자 조판이 상위 컨테이너 블록을 벗어나면 <ruby><em>대열이탈</em><rp> (</rp><rt>overflow</rt><rp>) </rp></ruby>했다고 말합니다..</p> + +<h2 id="상자_생성">상자 생성</h2> + +<p>상자 생성은 해당 문서의 요소로부터 상자를 생성하는 씨에스에스 시각적 서식 모델의 일부입니다. 생성된 상자는 다양한 유형으로, 이 유형은 시각적 서식이 이뤄지는 방식에 영향을 미칩니다. 생성되는 상자 유형은 {{ cssxref("display") }} 씨에스에스 속성의 값 여하에 따라 달라집니다.</p> + +<h3 id="블록수준_요소와_블록_상자">블록수준 요소와 블록 상자</h3> + +<p>어떤 요소를 <em>블록수준</em>이라고 말하려면 계산된 {{ cssxref("display") }} 씨에스에스 속성값이 <code>block</code>, <code>list-item</code>, 또는 <code>table</code>일 때입니다. 블록수준 요소는 사실상 하나의 블록으로 취급되어 시각적으로 서식되며, 수직적으로 겹겹이 포개집니다.</p> + +<p>각각의 블록수준 상자는 <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">블록 서식 상황</a>에 참여합니다. 각 블록수준 요소는 적어도 하나의 블록수준 상자를 생성하며 이를 일컬어 <ruby><em>수석 블록수준 상자</em><rp> (</rp><rt>principal block-level box</rt><rp>) </rp></ruby>라고 합니다. 일부 요소 무리는 목록항목 요소와 같이 목록 항목을 안내하는 글머리표와 서로 다른 타이포그래픽 요소를 처리하기 위한 상자를 추가적으로 생성하듯 더 많은 상자 무리를 생성할 수 있습니다. 대다수는 수석 블록 수준 상자만을 생성합니다.</p> + +<p>수석 블록수준 상자는 자손이 생성한 상자 및 콘텐츠를 포함합니다. 상자는 <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">위치잡기 기법</a>에도 관여하고 있습니다.</p> + +<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">블록 수준 상자는 역시 블록 콘테이너 상자도 될 수 있습니다. <em>블록 컨테이너 상자</em>는 다른 블록수준 상자만을 포함하고 <a href="/ko/docs/Web/CSS/Inline_formatting_context" title="CSS/Inline formatting context">인라인 서식 상황</a>을 생성하므로 인라인 상자 무리만을 포함합니다.</p> + +<p>중요한 점은 블록수준 상자와 블록 컨테이너 상자의 개념은 별개라는 점에 유의해야 한다는 것입니다. 첫째, 상자가 자기 부모와 형제자매과 함께하는 행동 방식을 설명합니다. 둘째, 상자가 자기 자손과는 어떻게 상호작용하는지 설명합니다. 테이블과 같은 블록 수준의 상자 무리는 블록 컨테이너 상자가 아닙니다. 마찬가지로 <ruby><em>비객원</em><rp> (</rp><rt>non-replaced</rt><rp>) </rp></ruby> 인라인 블록과 비객원 테이블 셀과 같은 일부 블록 컨테이너 상자는 블록 수준 상자가 아닙니다.</p> + +<p>또한, 블록 컨테이너 상자이며 동시에 블록수준 상자를 일컬어 우리는 <ruby><em>블록 상자</em><rp> (</rp><rt>block boxes</rt><rp>) </rp></ruby>라고 부릅니다.</p> + +<h4 id="무명_블록_상자">무명 블록 상자</h4> + +<p>경우에 따라서는 시각적 서식 알고리즘은 보충 상자를 추가할 알고리즘도 필요합니다</p> + +<p>씨에스에스 선택기는 해당 상자에 이름을 부여하거나 스타일링을 할 수 없기 때문에 이를 일컬어<em>무명 상자</em>라고 합니다.</p> + +<p>선택기는 무명 상자와 협력하지 않기 때문에 스타일시트를 통해 스타일링이 적용될 수 없습니다. 즉, 상속할 수 있는 모든 씨에스에스 속성은 <code>inherit</code> 값을 갖고 상속할 수 없는 씨에스에스 속성은 <code>initial</code> 값을 가집니다.</p> + +<p>상자를 포함하는 블록은 인라인수준 상자 또는 블록수준 상자만을 포함합니다. 그러나 문서는 두 가지 모두를 혼합해 포함합니다. 그 경우 무명 블록 상자는 인접 인라인수준 상자 주변에 생성됩니다.</p> + +<h3 id="예제">예제</h3> + +<p>아래와 같은 ({{ HTMLElement("div") }}와 {{ HTMLElement("p") }}에 기본값 스타일링이 적용된 에이치티엠엘 코드가 <code>display: block</code> 속성을 갖고 있다면:</p> + +<pre class="syntaxbox"><code><div>약간의 인라인 텍스트 <p>뒤를 잇는 단락 하나</p> 그 뒤를 잇는 인라인 텍스트.</div></code></pre> + +<p>두 개의 무명 블록 상자가 만들어집니다: 하나는 단락 이전 텍스트(<code>약간의 인라인 텍스트</code>) 나머지 하나는 단락 이후 텍스트(<code>그 뒤를 잇는 인라인 텍스트</code>). 이는 다음과 같은 블록 구조를 구축합니다:</p> + +<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p> + +<p>결과는:</p> + +<pre>약간의 인라인 텍스트 +뒤를 잇는 단락 하나 +그 뒤를 잇는 인라인 텍스트. +</pre> + +<p>{{ HTMLElement("p") }} 요소인 상자와 달리 웹 개발자는 두 개의 무명 상자 스타일을 제어할 수 없습니다. 상속 가능한 속성은 (마치 텍스트의 색상을 정의하기 위한 {{ cssxref("color") }}와 같이) {{ HTMLElement("div") }}의 속성 값에서 값을 취하고, 나머지는 초기(<code>initial</code>)값으로 설정합니다. 예를 들어, 무명 상자는 {{ cssxref("background-color") }}를 갖지 않을 것이라, 항상 해당 속성의 초기(<code>initial</code>)값을 가지며 투명합니다. 따라서 <code><div></code>의 배경이 보여집니다. 특정 배경색은 <code><p></code> 상자에 적용할 수 있습니다. 마찬가지로 두 무명 상자는 항상 같은 색을 텍스트에 사용합니다.</p> + +<p>무명 블록 상자를 만드는 또 다른 사례는 하나 또는 여러 개의 블록 상자를 포함하는 인라인 상자입니다. 이 경우 블록 상자가 들어있는 상자는 두 개의 인라인 상자로 쪼개집니다. 하나는 블록 상자 이전에, 다른 하나는 뒤에 옵니다. 블록 상자 이전의 모든 인라인 상자는 <em>무명 블록 상자</em>로 포섭되며, 블록 상자 뒤에 있는 인라인 상자도 마찬가지입니다. 따라서 블록 상자는 인라인 요소를 포함하는 두 개의 무명 블록 상자의 형제가 됩니다.</p> + +<p>중간에 인라인 콘텐츠가 없이 여러 블록 상자가 있는 경우 무명 블록 상자가 해당 상자 집합 이전과 이후에 생성됩니다.</p> + +<h3 id="예제_2">예제</h3> + +<p>아래 에이치티엠엘 코드를 보면 {{ HTMLElement("p") }}는 <code>display: inline</code> 속성을 갖고 있고 {{ HTMLElement("span") }}는 <code>display:block</code> 속성을 갖고 있습니다:</p> + +<pre class="syntaxbox"><code><p>일부 <em>인라인</em> 텍스트 <span>그 뒤를 잇는 단락</span> 그 뒤를 잇는 추가 인라인 텍스트.</p></code></pre> + +<p>두 개의 무명 블록 상자가 생성되었습니다. 스팬 요소 이전의 텍스트(<code>일부 <em>인라인</em> 텍스트</code>) 하나와 그 뒤의 텍스트(<code>그 뒤를 잇는 추가 인라인 텍스트</code>) 하나가 있는데 이로써 다음과 같은 블록 구조가 주어졌습니다:</p> + +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> + +<p>이 것의 결과는:</p> + +<pre>약간의 인라인 텍스트 +뒤를 잇는 단락 하나 +그 뒤를 잇는 인라인 텍스트. +</pre> + +<h3 id="인라인수준_요소와_인라인_상자">인라인수준 요소와 인라인 상자</h3> + +<p>어떤 요소가 <em>인라인수준</em>이라고 말하려면 자신의 계산된 {{ cssxref("display") }} 씨에스에스 속성 값이 <code>inline</code>, <code>inline-block</code> 또는 <code>inline-table</code>일 때입니다. 시각적으로는 이것은 콘텐츠로 이뤄진 블록 무리를 구성하지 않고 다른 인라인수준 콘텐츠와 함께 라인의 형태로 배포됩니다. 일반적으로 강조 또는 이미지와 같이 서로 다른 서식을 가진 단락의 콘텐츠는 인라인수준 요소로 만들어집니다.</p> + +<p><img alt="venn_inlines.png" class="internal lwrap" src="/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p> + +<div class="warning"> +<p>이 도식은 구식 용어를 사용합니다: 아래 참조 사항을 보세요. 그것 이외에도 오른쪽의 노란색 타원은 정의에 따르면 왼쪽의 타원형과 동일하거나 그보다 크기 때문에(수학적 상위집합일 수 있어) 그림이 틀렀습니다, 왜냐하면 해당 씨에스에스 스펙을 보면 "인라인수준 요소는 인라인 서식 상황에 참여하는 상자인 인라인수준 상자를 생성한다"라고 쓰여있기 때문입니다. 씨에스에스 2.2, 9.2.2장 참조</p> +</div> + +<p>인라인 수준 요소는 <a href="/ko/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">인라인 서식 상황</a>에 참여하는 상자로 정의되는 <em>인라인수준 상자</em>를 생성합니다. <em>인라인 상자</em>는 상자와 인라인 수준 상자 모두가 해당합니다. 다만 이들 상자의 콘텐츠는 인라인 서식 상황에 참여해야 합니다. 예를 들어, <code>display: inline</code> 속성을 가진 모든 비객원 상자의 경우가 인라인입니다. 인라인 서식 상황에 참여하지 않는 인라인수준 상자를 <ruby><em>원자 인라인수준 상자</em><rp> (</rp><rt>atomic inline-level boxes</rt><rp>) </rp></ruby>라고 합니다. 객원 인라인수준 요소 또는 계산된 {{ cssxref("display") }} 값이 <code>inline-block</code>인 요소에 의해 생성된 해당 상자 무리는 인라인 상자에서 가능했던 것처럼 여러 상자로 쪼개지지 않습니다.</p> + +<div class="note"><strong>참고:</strong> 처음에는 원자 인라인수준 상자를 원자 인라인 상자라고 불렀습니다. 그 명명은 불행한 일입니다. 인라인 상자가 <strong>아니기</strong> 때문입니다. 이건 씨에스에스 규격 상에 오타로 시정된 겁니다. 그렇긴 하지만, 문장 속에서 원자 인라인 상자를 마주칠 때마다 무리없이 원자 인라인 수준 상자로 읽을 수 있습니다. 그냥 이름 변경에 불과하기 때문입니다.</div> + +<div class="note">원자 일라인 상자는 인라인 서식 상황 속에서 여러 라인에 걸쳐 분할될 수 없습니다. +<div style="-moz-column-width: 30em;"> +<pre><style> + span { + display:inline; /* default value*/ + } +</style> +<div style="width:20em;"> + 스팬 요소에 포함된 택스트는 <span> 몇 개의 라인으로 분할 될 수 + 있습니다. 왜냐면 </span> 그것이 인라인 상자이기 때문입니다. +</div> +</pre> + +<p>이 것의 결과는:</p> + +<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div> + +<pre><style> + span { + display:inline-block; + } +</style> +<div style="width:20em;"> + 스팬 요소에 포함된 텍스트는 <span>몇 라인으로 분할 될 수 + 없 습니다. 왜냐면 </span> 그것이 인라인 블록이기 때문입니다. +</div> +</pre> + +<p>이 것의 결과는:</p> + +<div style="width: 20em;">스팬 요소에 포함된 텍스트는 <span style="display: inline-block;">분할될 수 없습니다. 왜냐면</span> 인라인 블록 상자이기 때문입니다.</div> +</div> +</div> + +<h4 id="무명_인라인_상자">무명 인라인 상자</h4> + +<p>블록상자처럼 씨에스에스 엔진에 의해 자동적으로 인라인상자가 생성되는 경우가 몇 개 있습니다. 이들 인라인 상자는 무명으로, 선택기가 이름을 특정할 수 없습니다. 무명 인라인 상자의 속성은, 상속 가능한 것은 상속된 값을, 그 이외는 <code>initial</code> 값을 가집니다.</p> + +<p>무명의 인라인 상자가 만들어지는 흔한 경우는 인라인 서식 상황을 만드는 블록상자의 직계 자식 요소로 파악되는 텍스트가 있는 경우입니다. 이 경우, 동 텍스트는 최대한 큰 무명 인라인 상자에 넣을 수 있습니다. 또한, 씨에스에스의 {{ cssxref("white-space") }} 속성으로 지정된 동작에 의해 제거되는 공백의 콘텐츠는 결국 공백이 될 것이기 때문에 무명 인라인 상자를 생성하지 않습니다.</p> + +<div class="note">예제 TBD</div> + +<h3 id="다른_유형의_상자">다른 유형의 상자</h3> + +<h4 id="라인_상자">라인 상자</h4> + +<p><em>라인 상자</em>는 텍스트 라인을 표현하기 위해 <a href="/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">인라인 서식 상황</a>에 의해 생성되는 상자입니다. 블록 상자 내부의 라인 상자는 상자의 한쪽 테두리로부터 반대측의 테두리까지 넓어집니다. <a href="/en-US/docs/CSS/float" title="float">부동체</a>가 있을 경우 라인 상자 구역은 왼쪽 부동체의 맨우측 테두리에서 시작해 우측 부동체의 맨좌측 테두리에서 끝납니다.</p> + +<p>이들 상자는 기술적인 것으로, 보통 웹 저술가가 이것에 대해 고민할 필요는 없습니다.</p> + +<h4 id="내부진행_상자">내부진행 상자</h4> + +<p><code>display: run-in</code>을 사용하도록 정의되는 <ruby><em>내부진행 상자</em><rp> (</rp><rt>Run-in boxes</rt><rp>) </rp></ruby>는 후속 상자의 유형 여하에 따라 블록 상자이거나 인라인 상자입니다. 그들은 가능할 경우 자신의 첫 단락 내부에 진행하는 글 제목을 생성하는 데 사용될 수 있습니다.</p> + +<div class="note"><strong>참고:</strong> 내부진행 상자는 씨에스에스 2.1 규격에서 제외되었다. 상호운용 실현 가능성을 불충분하게 명시했기 때문입니다. 그들이 <ruby><em>씨에스에스 3</em><rp> (</rp><rt>CSS 3</rt><rp>) </rp></ruby>에선 다시 등장할 수도 있지만, 현재로선 <em>실험 상태</em>로 간주합니다. 그들을 완성품에선 사용하지 말아야 합니다.</div> + +<h4 id="모델유인_상자">모델유인 상자</h4> + +<p>인라인 및 블록 서식 상황 외에도 씨에스에스는 요소에 적용할 수 있는 몇 가지 추가 <em>콘텐츠 모델</em>을 지정할 수 있습니다. 특정 레이아웃을 설명하는 데 사용되는 이러한 추가 모델은 추가 상자 유형을 정의할 수 있습니다.</p> + +<ul> + <li><a href="/en-US/docs/CSS/table-layout" title="table-layout">테이블 콘텐츠 모델</a>은 <em>테이블 래퍼 상자</em>와 <em>테이블 상자</em>를 생성할 수 있을뿐만 아니라 <em>캡션 상자</em>같은 특정 상자도 생성할 수 있습니다.</li> + <li>The <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">다단 콘텐츠 모델</a> 은 컨테이너 상자와 컨텐츠 사이에 <ruby><em>열 상자</em><rp> (</rp><rt>column boxes</rt><rp>) </rp></ruby>를 생성할 수 있습니다.</li> + <li>실험적인 격자 또는 가변상자 콘텐츠 모델, 또는 추가적인 유형의 상자를 생성할 수 있습니다.</li> +</ul> + +<h4 id="위치잡기_기법">위치잡기 기법</h4> + +<p>상자를 생성하고 나면 씨에스에스 엔진은 그것들을 조판에 위치시켜야 합니다. 그렇게 하려면 다음과 같은 알고리즘 중의 하나를 사용합니다.</p> + +<ul> + <li><ruby><em>일반 대열</em><rp> (</rp><rt>normal flow</rt><rp>) </rp></ruby> - 하나씩 차례대로 상자를 위치시킵니다.</li> + <li><ruby><em>부동체</em><rp> (</rp><rt>floats</rt><rp>) </rp></ruby> 알고리즘 - 일반 대열에서 상자를 빼내어 상위 컨테이너 상자 옆에 놓습니다.</li> + <li><em>절대 위치잡기</em> 기법 - 자신의 상위 컨테이너 요소가 수립한 절대 좌표 시스템 내부에 상자를 위치시킵니다. 절대적으로 위치잡기한 요소는 다른 요소를 덮을 수 있습니다.</li> +</ul> + +<h3 id="일반_대열">일반 대열</h3> + +<p><em>일반 대열</em> 속 상자 무리는 하나씩 차례대로 배치됩니다. 블록 서식 상황 속에서 그들은 수직으로 배치됩니다. 반면에 인라인 서식 상황 속에서 그들은 수평으로 배치됩니다. 일반 대열은 CSS {{ cssxref("position") }}이 <code>static</code> 또는 <code>relative</code> 값으로 설정될 경우와 {{ cssxref("float") }}가 <code>none</code>으로 설정되면 발동됩니다.</p> + +<h3 id="예제_3">예제</h3> + +<div class="note">일반 대열 속에서는 블록 서식 상황에 포함된 상자는 수직으로 하나씩 차례대로 배치됩니다.<br> +<br> +일반 대열 속에서는 인라인 서식 상황에 포함된 상자는 수평으로 하나씩 차례대로 배치됩니다.</div> + +<div class="note"> +<p>일반 대열에는 두 가지 하위 사례가 있습니다. 정적 위치잡기와 상대 위치잡기:</p> + +<ul> + <li><em>정적 위치잡기</em>에서는 {{ cssxref("position") }} 속성이 <code>static</code> 값일 경우에 발동됩니다. 상자 무리는 일반 대열 조판에 정의된 정확한 위치에 그려집니다.</li> + <li><em>상대 위치잡기</em>에서는 {{ cssxref("position") }} 속성이 <code>relative</code> 값일 경우 발동합니다. 상자는 씨에스에스 속성 무리인 {{ cssxref("top") }}, {{ cssxref("bottom") }}과 {{ cssxref("left") }}, {{ cssxref("right") }}에 의해 정의된 간격띄우기 값을 기준으로 그려집니다.</li> +</ul> +</div> + +<h3 id="부동체">부동체</h3> + +<p><ruby><em>부동 위치잡기 기법</em><rp> (</rp><rt>float positioning scheme</rt><rp>) </rp></ruby>에서는 특정 상자(부동 상자 또는 단순 부동체라고 일컬음)를 현재 라인의 시작 또는 끝에 위치시킵니다. 이는 텍스트(그리고 더 일반적으로 일반 대열 내의 모든 것)은 부동 상자의 가장자리를 따라 대열을 맞추는 속성으로 귀결됩니다. 다만 씨에스에스 {{ cssxref("clear") }} 속성에 의해 다른 예기가 나올 경우는 예외입니다.</p> + +<p>상자에 대해 부동 위치잡기 기법을 선택하려면 해당 상대에 대해 씨에스에스 {{ cssxref("float") }} 속성을 <code>none</code> 이외의 값으로 설정하거나 {{ cssxref("position") }} 속성에 <code>static</code>이나 <code>relative</code>가 아닌 값으로 설정할 때 이뤄진다. 만일 {{ cssxref("float") }}가 <code>left</code>로 설정되면 부동체는 라인 상자의 시작 부분에 위치합니다. 만일 <code>right</code>으로 설정되면 동 부동체는 라인 상자의 끝에 위치합니다. 어떤 경우든 라인 상자는 부동체에 들어맞게 축소됩니다.</p> + +<h3 id="절대_위치잡기">절대 위치잡기</h3> + +<p><ruby><em>절대 위치잡기 기법</em><rp> (</rp><rt>absolute positioning scheme</rt><rp>) </rp></ruby>에 포함된 상자는 대열에서 제거되어 대열과는 어떤 상호작용도 하지 않습니다. 그들은 {{ cssxref("top") }}과 {{ cssxref("bottom") }}, {{ cssxref("left") }}와 {{ cssxref("right") }}를 사용해서 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">상위 컨테이너 블록</a> 기준으로 비례해서 위치잡기합니다.</p> + +<p>하나의 요소를 절대 위치잡기하려면 {{ cssxref("position") }}이 <code>absolute</code> 또는 <code>fixed</code>로 설정하면 됩니다.</p> + +<p><em>고정 위치잡기한 요소</em>의 경우 상위 컨테이너 블록이 뷰포트입니다. 동 요소의 위치는 뷰포트 내부에서 절대적 위치가 됩니다. 스크롤링은 동 요소의 위치를 변경시키지 않습니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/ko/web/css/시작하기/리스트/index.html b/files/ko/web/css/시작하기/리스트/index.html deleted file mode 100644 index 0e0e215006..0000000000 --- a/files/ko/web/css/시작하기/리스트/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: 리스트 -slug: Web/CSS/시작하기/리스트 -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/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 deleted file mode 100644 index 2c9fceaca0..0000000000 --- a/files/ko/web/css/시작하기/미디어/index.html +++ /dev/null @@ -1,346 +0,0 @@ ---- -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 deleted file mode 100644 index 86ea912bb7..0000000000 --- a/files/ko/web/css/시작하기/배치/index.html +++ /dev/null @@ -1,370 +0,0 @@ ---- -title: 배치 -slug: Web/CSS/시작하기/배치 -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/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 deleted file mode 100644 index cc6b499241..0000000000 --- a/files/ko/web/css/시작하기/상자/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: 상자 -slug: Web/CSS/시작하기/상자 -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -<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 deleted file mode 100644 index 5c58432ad2..0000000000 --- a/files/ko/web/css/시작하기/종속과_상속/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: 종속과 상속 -slug: Web/CSS/시작하기/종속과_상속 -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_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 deleted file mode 100644 index 17a57d49e9..0000000000 --- a/files/ko/web/css/시작하기/테이블/index.html +++ /dev/null @@ -1,475 +0,0 @@ ---- -title: 테이블 -slug: Web/CSS/시작하기/테이블 -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/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 deleted file mode 100644 index 8866132472..0000000000 --- a/files/ko/web/css/시작하기/텍스트_스타일/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: 텍스트 스타일 -slug: Web/CSS/시작하기/텍스트_스타일 -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -<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> |