diff options
Diffstat (limited to 'files/ko/web/css/clear')
| -rw-r--r-- | files/ko/web/css/clear/index.html | 231 |
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"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="left">This paragraph clears left.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.left { + border: 1px solid black; + clear: left; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width: 20%; +} +.red { + float: left; + margin: 0; + background-color: red; + width:20%; +} +p { + width: 50%; +} +</pre> + +<p>{{ EmbedLiveSample('clear:_left','100%','250') }}</p> + +<h3 id="clear:_right" name="clear:_right">clear: right</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + <p class="right">This paragraph clears right.</p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.right { + border: 1px solid black; + clear: right; +} +.black { + float: right; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: red; + width:20%; +} +p { + width: 50%; +}</pre> + +<p>{{ EmbedLiveSample('clear:_right','100%','250') }}</p> + +<h3 id="clear:_both" name="clear:_both">clear: both</h3> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><div class="wrapper"> + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p> + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + <p class="both">This paragraph clears both.</p> +</div></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.wrapper{ + border:1px solid black; + padding:10px; +} +.both { + border: 1px solid black; + clear: both; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: red; + width:20%; +} +p { + width: 45%; +}</pre> + +<p>{{ EmbedLiveSample('clear:_both','100%','300') }}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td><code>inline-start</code> 및 <code>inline-end</code> 값 추가</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>중요한 변화 없음, 세부사항은 명확해졌지만.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#clear', 'clear')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2> + +<div>{{Compat("css.properties.clear")}}</div> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="Box model">박스 모델</a></li> +</ul> |