From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/clear/index.html | 231 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 231 insertions(+) create mode 100644 files/ko/web/css/clear/index.html (limited to 'files/ko/web/css/clear') 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 +--- +
{{CSSRef}}
+ +

clear CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다.

+ +
{{EmbedInteractiveExample("pages/css/clear.html")}}
+ + + +

비부동 블록에 적용되는 경우, 모든 관련 부동체(floats)의 마진 경계 아래로까지 요소의 보더 경계를 아래로 내립니다. 이 움직임(이 일어나는 경우)은 마진 상쇄가 일어나지 않도록 합니다.

+ +

부동 요소에 적용되는 경우, 모든 관련 부동체의 마진 경계 아래로 요소의 마진 경계를 옮깁니다. 이는 나중(later) 부동체의 위치에 영향을 줍니다, 나중 부동체가 앞선(earlier) 부동체보다 높게 위치될 수 없기에.

+ +

해제(cleared)와 관련된 부동체는 같은 블록 형성 문맥 내 앞선 부동체입니다.

+ +
+

주의: 요소가 그 안에 모든 부동 요소를 포함하고 싶은 경우, 컨테이너도 부동하거나 컨테이너의 {{cssxref("::after")}} 대체 가상 요소에 clear를 쓸 수 있습니다.

+ +
#container::after {
+   content: "";
+   display: block;
+   clear: both;
+}
+
+
+ +

구문

+ +
/* 키워드 값 */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* 전역 값 */
+clear: inherit;
+clear: initial;
+clear: unset;
+ +

값

+ +
+
none
+
요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 않음을 나타내는 키워드입니다.
+
left
+
요소가 지난 left 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
+
right
+
요소가 지난 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
+
both
+
요소가 지난 both left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
+
inline-start
+
요소가 포함 블록의 시작 쪽 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 left 부동체 및 rtl 스크립트의 right 부동체.
+
inline-end
+
요소가 포함 블록의 끝 쪽 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 right 부동체 및 rtl 스크립트의 left 부동체.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

clear: left

+ +

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>
+ +

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%;
+}
+
+ +

{{ EmbedLiveSample('clear:_left','100%','250') }}

+ +

clear: right

+ +

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>
+ +

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%;
+}
+ +

{{ EmbedLiveSample('clear:_right','100%','250') }}

+ +

clear: both

+ +

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>
+ +

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%;
+}
+ +

{{ EmbedLiveSample('clear:_both','100%','300') }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}inline-start 및 inline-end 값 추가
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}중요한 변화 없음, 세부사항은 명확해졌지만.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}초기 정의
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ +
{{Compat("css.properties.clear")}}
+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf