initial commit

1 files changed, 231 insertions, 0 deletions

diff --git a/files/ko/web/css/clear/index.html b/files/ko/web/css/clear/index.html
new file mode 100644
index 0000000000..f4ed21f1e9
--- /dev/null
+++ b/files/ko/web/css/clear/index.html
@@ -0,0 +1,231 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/clear
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>clear</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소가 선행 <a href="/ko/docs/Web/CSS/float">부동</a>(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. <code>clear</code> 속성은 부동 및 비부동 요소 모두에 적용됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
+
+
+
+<p>비부동 블록에 적용되는 경우, 모든 관련 부동체(floats)의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a> 아래로까지 요소의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">보더 경계</a>를 아래로 내립니다. 이 움직임(이 일어나는 경우)은 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" title="margin collapsing">마진 상쇄</a>가 일어나지 않도록 합니다.</p>
+
+<p>부동 요소에 적용되는 경우, 모든 관련 부동체의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a> 아래로 요소의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a>를 옮깁니다. 이는 나중(later) 부동체의 위치에 영향을 줍니다, 나중 부동체가 앞선(earlier) 부동체보다 높게 위치될 수 없기에.</p>
+
+<p>해제(cleared)와 관련된 부동체는 같은 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context" title="block formatting context">블록 형성 문맥</a> 내 앞선 부동체입니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 요소가 그 안에 모든 부동 요소를 포함하고 싶은 경우, 컨테이너도 부동하거나 컨테이너의 {{cssxref("::after")}} 대체 <a href="/ko/docs/Web/CSS/Pseudo-elements">가상 요소</a>에 <code>clear</code>를 쓸 수 있습니다.</p>
+
+<pre class="brush: css">#container::after {
+   content: "";
+   display: block;
+   clear: both;
+}
+</pre>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css">/* 키워드 값 */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* 전역 값 */
+clear: inherit;
+clear: initial;
+clear: unset;</pre>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 <em>않음</em>을 나타내는 키워드입니다.</dd>
+ <dt><code>left</code></dt>
+ <dd>요소가 지난 <em>left</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd>
+ <dt><code>right</code></dt>
+ <dd>요소가 지난 <em>right</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd>
+ <dt><code>both</code></dt>
+ <dd>요소가 지난 <em>both</em> left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>요소가 <em>포함 블록의 시작 쪽</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 <em>left</em> 부동체 및 rtl 스크립트의 <em>right</em> 부동체.</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>요소가 <em>포함 블록의 끝 쪽</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 <em>right</em> 부동체 및 rtl 스크립트의 <em>left</em> 부동체.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="clear:_left" name="clear:_left">clear: left</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="left"&gt;This paragraph clears left.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.left {
+    border: 1px solid black;
+    clear: left;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width: 20%;
+}
+.red {
+    float: left;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('clear:_left','100%','250') }}</p>
+
+<h3 id="clear:_right" name="clear:_right">clear: right</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="right"&gt;This paragraph clears right.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.right {
+    border: 1px solid black;
+    clear: right;
+}
+.black {
+    float: right;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}</pre>
+
+<p>{{ EmbedLiveSample('clear:_right','100%','250') }}</p>
+
+<h3 id="clear:_both" name="clear:_both">clear: both</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="both"&gt;This paragraph clears both.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.both {
+    border: 1px solid black;
+    clear: both;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 45%;
+}</pre>
+
+<p>{{ EmbedLiveSample('clear:_both','100%','300') }}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td><code>inline-start</code> 및 <code>inline-end</code> 값 추가</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>중요한 변화 없음, 세부사항은 명확해졌지만.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>{{Compat("css.properties.clear")}}</div>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="Box model">박스 모델</a></li>
+</ul>