unslug ko: move

10 files changed, 199 insertions, 409 deletions

diff --git a/files/ko/learn/css/basics/layout/index.html b/files/ko/learn/css/basics/layout/index.html
deleted file mode 100644
index 5437902bf1..0000000000
--- a/files/ko/learn/css/basics/layout/index.html
+++ /dev/null
@@ -1,409 +0,0 @@
----
-title: Introduction to CSS Layout
-slug: Learn/CSS/Basics/Layout
-translation_of: Learn/CSS/CSS_layout/Introduction
-translation_of_original: Learn/CSS/Basics/Layout
----
-<p>{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}</p>
-
-<p class="summary"><span class="seoSummary">CSS layout is the art of using various CSS properties to alter the positioning of elements on a document in order to fit the design requirements.</span> CSS provides many layout mechanisms, the more advanced and modern techniques are so complex that they get their own articles. In this article, we will introduce the basic techniques that have been used for years.</p>
-
-<p>To properly layout a document with CSS, there are a few notions that one must know. The most important of these is {{Glossary("HTML")}} text flow. We will cover it in this article. Articles about other layout mechanisms will, at some point or the other, refer back to what we are discussing here.</p>
-
-<h2 id="The_flow">The flow</h2>
-
-<p>At its most basic level an HTML document is a text document structured with {{Glossary("tag","tags")}}. In such a document, the text <em>flows</em>. That means text is displayed in the reading direction (from left to right, for example, in Latin based languages like English or French) and is broken automatically - creating new lines - each time the text reaches an edge of the document.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg" style="height: auto; max-width: 450px;"></p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg#large" style="height: auto; max-width: 450px;"></p>
-
-<p>Each {{Glossary("element","elements")}} in the document alters the flow of text in various ways:</p>
-
-<ul>
- <li>Some elements can simply follow the text flow as if they were non-existent.</li>
- <li>Some elements can force a line break at any point in the flow whether it has reached the edge of the document or not.</li>
- <li>Some elements can create a new text flow for their inner content independent from the main text flow.</li>
-</ul>
-
-<h3 id="디스플레이_요소_(Elements_display_categories)">디스플레이 요소 (Elements display categories)</h3>
-
-<p>CSS is used to define how an HTML element behaves within the flow and how it get in and out of that flow. The element behavior is defined using the property {{cssxref('display')}}. This property can take tons of values but let's focus on the four most important:</p>
-
-<dl>
- <dt>none</dt>
- <dd>모든 요소를 제거 합니다.</dd>
- <dt>inline</dt>
- <dd>줄을 바꾸지 않고, 해당 위치에서 다른 요소들과 같은 선상에 위치하려는 성질을 말합니다. </dd>
- <dt>block</dt>
- <dd>This value is for the element to break the text flow with a forced line break before and after it. Its content is no longer part of the global text flow and flows only within the constraints provided by the element <a href="/en-US/docs/Learn/CSS/Basics/Box_model">box model</a>.</dd>
- <dt>inline-block</dt>
- <dd>This value makes the element somewhat in between inline and block type display: like <code>inline</code> boxes it flows with the text normally but, like block boxes, it's content is no longer part of the global text.</dd>
-</dl>
-
-<p>Let's see an example.</p>
-
-<p>HTML:</p>
-
-<pre class="brush: html">&lt;p class="none"&gt;
-  1. I'm a big black cat,
-  &lt;span&gt;walking under a ladder,&lt;/span&gt;
-  and I can see broken mirrors everywhere.
-&lt;/p&gt;
-
-&lt;p class="inline"&gt;
-  2. I'm a big black cat,
-  &lt;span&gt;walking under a ladder,&lt;/span&gt;
-  and I can see broken mirrors everywhere.
-&lt;/p&gt;
-
-&lt;p class="block"&gt;
-  3. I'm a big black cat,
-  &lt;span&gt;walking under a ladder,&lt;/span&gt;
-  and I can see broken mirrors everywhere.
-&lt;/p&gt;
-
-&lt;p class="inline-block"&gt;
-  4. I'm a big black cat,
-  &lt;span&gt;walking under a ladder,&lt;/span&gt;
-  and I can see broken mirrors everywhere.
-&lt;/p&gt;
-</pre>
-
-<p>CSS:</p>
-
-<pre class="brush: css">span {
-  width: 5em;
-  background: yellow;
-}
-
-.none span         { display: none;         }
-.inline span       { display: inline;       }
-.block span        { display: block;        }
-.inline-block span { display: inline-block; }</pre>
-
-<p>Results:</p>
-
-<p>{{EmbedLiveSample('Elements_display_categories', '100%', '300px')}}</p>
-
-<h2 id="Altering_the_flow">Altering the flow</h2>
-
-<p>By setting the display property you're already altering the flow, but you can go further.</p>
-
-<h3 id="Text_layout">Text layout</h3>
-
-<p>While an HTML document is nothing more than a long text flow, CSS provides many properties to deal with simple text layout. The text layout is everything that allows changing the text line breaking rules and the way the text is positioned over the natural text line.</p>
-
-<p>Those properties are: {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}}, and {{cssxref("word-wrap")}}.</p>
-
-<p>Except for <code>text-align and<font face="Open Sans, Arial, sans-serif">, </font></code><code>text-indent </code>the other properties have subtle effects on the text and <code>vertical-align</code> is often used with inline-block boxes.</p>
-
-<p>An example will make things clearer.</p>
-
-<p>HTML:</p>
-
-<pre class="brush: html">&lt;p lang="en"&gt;WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.&lt;/p&gt;
-&lt;p class="format" lang="en"&gt;WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.&lt;/p&gt;
-</pre>
-
-<p>CSS:</p>
-
-<pre class="brush: css">.format {
-  /* The first line is "pull" to a 2em distance */
-  text-indent: -2em;
-
-  /* We need to compensate the negative indent
-     to avoid unwanted text clipping and keep
-     the whole text within the boundary of its
-     element box */
-  padding-left: 2em;
-
-  /* The text is aligned on both edges, adjusting
-     spacing between words as necessary */
-  text-align: justify;
-
-  /* The last line of the block of text is centered */
-  -moz-text-align-last: center;
-       text-align-last: center;
-
-  /* Rather than line break between two words the line
-     break can occur inside words, according to the rules
-     defined for the text language. This makes nice word cut
-     with a clear hyphen dash. If you don care about word
-     breaking rules, you could just use word-break or
-     word-wrap instead  */
-  -webkit-hyphens: auto;
-     -moz-hyphens: auto;
-      -ms-hyphens: auto;
-          hyphens: auto;
-}</pre>
-
-<div class="note">
-<p>As you might notice, some properties are written multiple times with some prefix. This is because those prefixed properties are still experimental for some browsers and it is considered best practice to use them all with the standard property at the end of the list in order to provide the best backward compatibility possible.</p>
-</div>
-
-<p>Results:</p>
-
-<p>{{ EmbedLiveSample('Text_layout', '100%', '350') }}</p>
-
-<div class="note">
-<p>It's worth noting that the trick we used to compensate the negative text indentation is a very common trick. Any property that accepts a length also accepts negative values. By fiddling with negative values and compensating them with other properties,  it's possible to produce very clever effects on the layout, especially when it applies to properties of the box model.</p>
-</div>
-
-<h3 id="Floating">Floating</h3>
-
-<p>Okay, handling text is nice, but at some point what we really want is to move boxes around the document. The first way to handle that is to deal with floating boxes. Floating boxes are still attached to the global text flow,  but the text will flow around. Sounds weird, so let's see an example.</p>
-
-<h4 id="Simple_floating">Simple floating</h4>
-
-<p>HTML:</p>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="excerpt"&gt;"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" &lt;/p&gt;
-  &lt;p&gt; The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<p>CSS:</p>
-
-<pre class="brush: css">.excerpt {
-  /* A floating box will act like a block whatever
-     the value of display we are using */
-  display: block;
-
-  /* Our box is floating to the left, which means
-     it will stack on the left side of the containing
-     block and the text will flow on its right side. */
-  float: left;
-
-  /* It is required to set a width to a floating box.
-     If we don't its width will be set
-     automatically, which means that it will grow as much
-     as possible and nothing will flow around it, like an
-     ordinary block box */
-  width: 40%;
-
-  /* We set some margins on the right and bottom side of
-     the box to avoid having the text flowing around being
-     in direct visual contact of our floating box */
-  margin: 0 1em 1em 0;
-
-  /* We make our floating box more visible with
-     a simple background color */
-  background: lightgrey;
-
-  /* As we have a solid background color it's a nice idea
-     to push the content a little bit away from the edges
-     of the box */
-  padding: 1em;
-}</pre>
-
-<p>Results:</p>
-
-<p>{{ EmbedLiveSample('Simple_floating', '100%', '280') }}</p>
-
-<h4 id="Layout_with_floating">Layout with floating</h4>
-
-<p>This is a very simple effect to start tweaking the flow to our wishes. Now it's possible to do better and start performing some true layout. A floating box that floats in a given direction stacks horizontally, it's a very convenient way to create rows of boxes instead of natural columns: In the flow, block boxes stack in columns and floating boxes stack in rows.</p>
-
-<p>Once again, an example will make things clearer.</p>
-
-<p>HTML:</p>
-
-<pre class="brush: html">&lt;div class="layout"&gt;
-  &lt;div class="row"&gt;
-    &lt;p class="cell size50"&gt;Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.&lt;/p&gt;
-    &lt;p class="cell size50"&gt;Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div class="row"&gt;
-    &lt;p class="cell size100"&gt;Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div class="row"&gt;
-    &lt;p class="cell size33"&gt;The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.&lt;/p&gt;
-    &lt;p class="cell size33"&gt;
-      "Ding, dong!"&lt;br&gt;
-      "A quarter past," said Scrooge, counting.&lt;br&gt;
-      "Ding, dong!"&lt;br&gt;
-      "Half-past!" said Scrooge.&lt;br&gt;
-      "Ding, dong!"&lt;br&gt;
-      "A quarter to it," said Scrooge.&lt;br&gt;
-      "Ding, dong!"&lt;br&gt;
-      "The hour itself," said Scrooge, triumphantly, "and nothing else!"
-    &lt;/p&gt;
-    &lt;p class="cell size33"&gt;
-      He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn.
-    &lt;/p&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<p>CSS:</p>
-
-<pre class="brush: css">/* This is our main layout container */
-.layout {
-  /* A background makes it visible */
-  background: lightgrey;
-
-  /* We add a small visual spacing to harmonize
-     the distance between the cells content and
-     and the layout border */
-  padding   : 0.5em;
-}
-
-/* A floating box gets somewhat out of
-   the flow, so if their container is empty
-   it will have a zero height size and the
-   floating box will overflow it. To
-   avoid such a situation, we make sure floating
-   boxes are not allowed to overflow. In
-   that specific context, with an overflow
-   hidden, floating boxes won't be clipped,
-   the parent box will extend to avoid any
-   floating box overflow.  */
-.row {
-  overflow: hidden;
-}
-
-/* Each cell is a left floating box */
-.cell {
-  float : left;
-
-  /* we add padding to our cell to create
-     some nice visual gutters between them */
-  padding   : 0.5em;
-
-  /* Because we are adding padding, we need
-     to be sure that it will not impact
-     the box width. */
-  box-sizing: border-box;
-
-  /* As margins cannot be controlled with the
-     box-sizing property, we need to be sure
-     there is none applied to our cell. */
-  margin    : 0;
-}
-
-/* Those are the sizes we can apply to our boxes */
-.size33  { width:  33%; } /* Not exactly a third, but good enough */
-.size50  { width:  50%; } /* A half */
-.size100 { width: 100%; } /* A full row */</pre>
-
-<p>Results:</p>
-
-<p>{{ EmbedLiveSample('Layout_with_floating', '100%', '520') }}</p>
-
-<p>Using floating boxes this way, is what many CSS frameworks do. It's a robust and well-known technique but it has limits as everything must go with the flow: it's not possible to handle boxes in arbitrary order, variable sizing can be quite tricky to achieve, and vertical centering is impossible. We encourage you to dig deeper as <a href="http://www.positioniseverything.net/articles/onetruelayout/">floating boxes has been studied for long</a> and they are among the most robust solutions for a simple layout that must be compatible with legacy browsers.</p>
-
-<p>If you want to better understand all the subtleties of floating boxes, we encourage you to read <em><a href="https://css-tricks.com/all-about-floats/">All about float</a></em> by Chris Coyer.</p>
-
-<h3 id="Positioning">Positioning</h3>
-
-<p>If floating boxes are still part of the flow, another mechanism exists to perform some layouts by extracting boxes out of the flow: CSS Positioning. Positioning is acheived by defining a positioning context with the {{cssxref("position")}} property and then allows boxes to be positioned using {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties.</p>
-
-<p>The {{cssxref("position")}} property can take on four different values:</p>
-
-<dl>
- <dt>static</dt>
- <dd>This is the default value for all elements: they are part of the flow and don't define any specific positioning context.</dd>
- <dt>relative</dt>
- <dd>With this value, elements are still part of the flow, but they can be visually moved around their positions with {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. They also define a positioning context for their children elements.</dd>
- <dt>absolute</dt>
- <dd>With this value, elements are pushed out of the flow and no longer influence it. The position of such blocks is defined by the {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties. The 0,0 position point for the top/left corner of the box is the top/left corner of the closest parent element which defines a positionning context other than <em>static</em>. If there is no parent with a positioning context, then, the 0,0 position point for the top/left corner of the box is the top/left corner of the document.</dd>
- <dt>fixed</dt>
- <dd>With this value, elements are pushed out of the flow and no longer influence it. The position of such blocks is define by the {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties. The 0,0 position point for the top/left corner of the box is the top/left corner of the browser window {{Glossary("viewport")}}.</dd>
-</dl>
-
-<p>Such positioned boxes can stack on top of each other. In that case, it's possible to change the stacking order by using the {{cssxref("z-index")}} property.</p>
-
-<p>Okay, let's see an example to visualize it at work.</p>
-
-<p>HTML:</p>
-
-<pre class="brush: html">&lt;div class="relative"&gt;
-    &lt;div class="absolute-one"&gt;
-        &lt;p&gt;Position:absolute&lt;/p&gt;&lt;/br&gt;
-        &lt;p&gt;Top Right&lt;/p&gt;
-    &lt;/div&gt;
-
-    &lt;div class="absolute-two"&gt;
-        &lt;p&gt;Position:absolute&lt;/p&gt;&lt;/br&gt;
-        &lt;p&gt;Bottom Centre&lt;/p&gt;
-    &lt;/div&gt;
-
-    &lt;div class="absolute-three"&gt;
-        &lt;p&gt;Position:static&lt;/p&gt;&lt;/br&gt;
-        &lt;p&gt;Where it falls&lt;/p&gt;
-    &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<p>CSS:</p>
-
-<pre class="brush: css">p {
-  text-align:  centre;
-  color: #fff;
-}
-
-
-/* Setting the position to relative
-allows any child elements to be positioned
-anywhere, in <em><strong>relation</strong> to its container. */
-</em>
-.relative {
-  position: relative;
-  width: 95%;
-  margin: 0 auto;
-  height: 300px;
-  background-color: #fff;
-  border: 3px solid #ADD8E6;
-}
-
-/* Just some styles for text alignment /*
-.relative div {
-  text-align: center;
-  padding: 5px;
-  display: block;
-  width: 125px;
-  height: 125px;
-  background-color: #ADD8E6;
-}
-
-/* By setting this div to position absolute
-we can position this element anywhere in relation
-to the 'relative' div /*
-.absolute-one {
-   position: absolute;
-   top: 0;
-   right: 0;
-}
-
-/* Unlike the first div which was positioned at the
-top right corner of the container div. '.absolute-two'
-is positioned bottom centre. By setting both left and right
-to 0, along with margin:auto.
-.absolute-two {
-   position: absolute;
-   bottom: 0;
-   right: 0;
-   left: 0;
-   margin: auto;
-}
-
-/* Where the div would fall naturally within it's container.
-This is also useful for returning elements from a floated
-position. E.g. on responsive styles. /*
-.absolute-three {
-   position: static;
-}
-</pre>
-
-<p>Results:</p>
-
-<p>{{ EmbedLiveSample('Positioning', '100%', '400') }}</p>
-
-<p>If CSS positioning isn't really used for full layout, it is used quite often to deal with trick UX effect such as navigation layout, tooltip and such. This is something you'll see on a regular basis so we encourage you to get into it. Among various resources about it, we suggest you take a look at the article <em><a href="http://alistapart.com/article/css-positioning-101">CSS positioning 101</a></em> by Noah Stokes.</p>
-
-<h2 id="What's_next">What's next</h2>
-
-<p>The flow, the floating boxes,  and CSS positioning are the basic CSS knowledge that will drive you into CSS layout. Now you are ready to use CSS to its full potential! You should now take some time looking at <a href="/en-US/docs/Learn/CSS/Howto">practical usage of CSS</a>. If you want to dig even deeper into layouts, you should definitely take a look at the other layout mechanism that exists with CSS: Table display, <a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">multiple columns layout</a>, and <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">flexible box layout</a>.</p>
-
-<p>{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}</p>
-
-<div class="grammarly-disable-indicator"> </div>
diff --git a/files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html
index d16df40221..d16df40221 100644
--- a/files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html
+++ b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html
diff --git a/files/ko/learn/css/building_blocks/선택자/index.html b/files/ko/learn/css/building_blocks/selectors/index.html
index 274653da91..274653da91 100644
--- a/files/ko/learn/css/building_blocks/선택자/index.html
+++ b/files/ko/learn/css/building_blocks/selectors/index.html
diff --git a/files/ko/learn/css/building_blocks/상자_모델/index.html b/files/ko/learn/css/building_blocks/the_box_model/index.html
index eec5f2b929..eec5f2b929 100644
--- a/files/ko/learn/css/building_blocks/상자_모델/index.html
+++ b/files/ko/learn/css/building_blocks/the_box_model/index.html
diff --git a/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html b/files/ko/learn/css/css_layout/media_queries/index.html
index cf13a1421c..cf13a1421c 100644
--- a/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html
+++ b/files/ko/learn/css/css_layout/media_queries/index.html
diff --git a/files/ko/learn/css/css_layout/일반_흐름/index.html b/files/ko/learn/css/css_layout/normal_flow/index.html
index 43b4366c0e..43b4366c0e 100644
--- a/files/ko/learn/css/css_layout/일반_흐름/index.html
+++ b/files/ko/learn/css/css_layout/normal_flow/index.html
diff --git a/files/ko/learn/css/css_layout/위치잡기/index.html b/files/ko/learn/css/css_layout/positioning/index.html
index 76a491ae0e..76a491ae0e 100644
--- a/files/ko/learn/css/css_layout/위치잡기/index.html
+++ b/files/ko/learn/css/css_layout/positioning/index.html
diff --git a/files/ko/learn/css/css_layout/반응형_디자인/index.html b/files/ko/learn/css/css_layout/responsive_design/index.html
index b1311448c7..b1311448c7 100644
--- a/files/ko/learn/css/css_layout/반응형_디자인/index.html
+++ b/files/ko/learn/css/css_layout/responsive_design/index.html
diff --git a/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html
index 07910a4d26..07910a4d26 100644
--- a/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html
+++ b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html
diff --git a/files/ko/learn/css/howto/css_faq/index.html b/files/ko/learn/css/howto/css_faq/index.html
new file mode 100644
index 0000000000..604448f6c3
--- /dev/null
+++ b/files/ko/learn/css/howto/css_faq/index.html
@@ -0,0 +1,199 @@
+---
+title: 공통된 CSS 질문들
+slug: Web/CSS/Common_CSS_Questions
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<h2 id="왜_유효한_내_CSS가_왜_올바르게_그려지지_않는가">왜 유효한 내 CSS가 왜 올바르게 그려지지 않는가?</h2>
+
+<p>Browsers use the <code>DOCTYPE</code> declaration to choose whether to show the document using a mode that is more compatible  with Web standards or with old browser bugs. Using a correct and modern <code>DOCTYPE</code> declaration at the start of your HTML will improve browser standards compliance.</p>
+
+<p>Modern browsers have two main rendering modes:</p>
+
+<ul>
+ <li><em>Quirks Mode</em>: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers. Documents with an incomplete, incorrect, or missing <code>DOCTYPE</code> declaration or a known <code>DOCTYPE</code> declaration in common use before 2001 will be rendered in Quirks Mode.</li>
+ <li><em>Standards Mode</em>: the browser attempts to follow the W3C standards strictly. New HTML pages are expected to be designed for standards-compliant browsers, and as a result, pages with a modern <code>DOCTYPE</code> declaration will be rendered with Standards Mode.</li>
+</ul>
+
+<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko's_&quot;Almost_Standards&quot;_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>&lt;!DOCTYPE html&gt; /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+                   parser, this is the recommended doctype */
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+</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>&lt;style type="text/css"&gt;
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="news today"&gt;
+... content of today's news ...
+&lt;/div&gt;
+</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; }
+
+&lt;!-- news item text is black, but corporate name is red and in bold --&gt;
+&lt;div class="news"&gt;
+   (Reuters) &lt;span class="corpName"&gt;General Electric&lt;/span&gt; (GE.NYS) announced on Thursday...
+&lt;/div&gt;
+</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; }
+
+&lt;!-- most text is in bold, except "GE", which is red and not bold --&gt;
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</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; }
+
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</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; }
+
+&lt;div id="section"&gt;
+   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</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; }
+
+&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;
+</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>