diff options
Diffstat (limited to 'files/ko/web/css/float/index.html')
| -rw-r--r-- | files/ko/web/css/float/index.html | 215 |
1 files changed, 215 insertions, 0 deletions
diff --git a/files/ko/web/css/float/index.html b/files/ko/web/css/float/index.html new file mode 100644 index 0000000000..149f9e39a5 --- /dev/null +++ b/files/ko/web/css/float/index.html @@ -0,0 +1,215 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference +translation_of: Web/CSS/float +--- +<div>{{CSSRef}}</div> + +<p>CSS 속성(property) <strong><code>float</code></strong> 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div> + + + +<p>부동<strong>(floating) 요소</strong> 는 <code>float</code> 의 계산값(computed value)이 <code>none</code>이 아닌 요소입니다.</p> + +<p>{{cssinfo}}</p> + +<p><code>float</code> 은 블록 레이아웃의 사용을 뜻하기 때문에, 일부 경우에 {{cssxref("display")}} 값의 계산값을 수정합니다:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">지정값(Specified value)</th> + <th scope="col">계산값</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>inline</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-block</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-table</code></td> + <td><code>table</code></td> + </tr> + <tr> + <td><code>table-row</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-row-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>flex</code></td> + <td><code>flex</code>, 다만 <code>float</code> 은 이러한 요소에 효과가 없음</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td><code>inline-flex</code>, 다만 <code>float</code> 은 이러한 요소에 효과가 없음</td> + </tr> + <tr> + <td><em>그외</em></td> + <td><em>변화없음</em></td> + </tr> + </tbody> +</table> + +<div class="note"><strong>주의: </strong>JavaScript에서 이 속성을 {{domxref("element.style")}} 객체의 멤버로서 참조한다면, 당신은 <code>cssFloat</code>으로 철자를 써야 합니다. 또한 Internet Explorer 8 이전 버전에서는 <code>styleFloat</code>으로 썼음을 주의하세요. 이는 DOM 멤버의 이름은 dash(-)로 구분된 CSS 이름의 카멜케이스(camel-case) 명이다는 규칙의 예외(이고 "class"는 "className"으로 <label>의 "for"는 "htmlFor"로 이스케이프할 필요와 같이 "float"이 JavaScript에서 예약어란 사실 때문)입니다.</div> + +<h2 id="구문">구문</h2> + +<pre class="brush:css">/* 키워드 값 */ +float: left; +float: right; +float: none; +float: inline-start; +float: inline-end; + +/* 전역 값 */ +float: inherit; +float: initial; +float: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>left</code></dt> + <dd>는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드입니다.</dd> + <dt><code>right</code></dt> + <dd>는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드입니다.</dd> + <dt><code>none</code></dt> + <dd>는 요소가 부동하지 않아야 함을 나타내는 키워드입니다.</dd> + <dt><code>inline-start</code></dt> + <dd>는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.</dd> + <dt><code>inline-end</code></dt> + <dd>는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { border: solid red; max-width: 70ex; } +h4 { float: left; margin: 0; }</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <h4>HELLO!</h4> + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. + This is some text. This is some text. This is some text. +</div></pre> + +<p>{{EmbedLiveSample('예제')}}</p> + +<h3 id="float이_위치_지정되는_법">float이 위치 지정되는 법</h3> + +<p>위에서 말한 바와 같이, 요소가 부동되면 문서의 보통 흐름에서 빠집니다. 부동된 요소는 포함 박스나<em> 다른 부동된 요소</em>의 가장자리(edge)에 닿을 때까지 좌나 우로 이동됩니다.</p> + +<p>아래 이미지에는, 빨간 사각형이 세 개 있습니다. 둘은 좌에 부동되고 하나는 우에 부동됩니다. "왼쪽" 두 번째 빨간 사각형은 첫 번째 사각형 오른쪽에 놓임을 주의하세요. 추가 사각형은 그들이 포함 박스를 채울 때까지 계속해서 오른쪽으로 쌓입니다. 그 후엔 다음 줄로 넘어갑니다(wrap).</p> + +<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p> + +<h3 id="float_지우기">float 지우기</h3> + +<p>위 예제에서, 부동된 요소는 안에 텍스트가 부동된 블록보다 세로가 더 짧습니다. 그러나, 텍스트가 모든 부동 요소 하단 아래로 넘어갈 만큼 길지 않다면, 예상치 못한 결과를 볼 수 있습니다. 예를 들어, 위 단락(paragraph)이 오직 "Lorem ipsum dolor sit amet,"만 읽고 "Floats Example" 머릿글(heading)처럼 같은 스타일의 다른 머릿글이 이어졌다면, 두 번째 머릿글은 빨간 박스 사이에 보입니다. 아마도, 우리는 다음 머릿글이 완전히 왼쪽으로 정렬되기를 원합니다. 이를 달성하기 위해, 우리는 float을 지워야(clear) 합니다.</p> + +<p>이 예제에서 float을 지우는 가장 간단한 방법은 우리가 왼쪽으로 정렬되는 지 확인하고 싶은 새 머릿글에 {{Cssxref("clear")}} 속성을 추가하는 것입니다:</p> + +<pre class="brush:css">h2.secondHeading { clear: both; } +</pre> + +<p>그러나, 이 방법은 우리가 머릿글이 가로로 옆에 계속 보이기를 원하는 같은 블록 형식 문맥(<a href="/ko/docs/Web/Guide/CSS/Block_formatting_context" rel="internal">block formatting context</a>) 내에 다른 요소가 없을 때만 동작합니다. 우리 <code>h2</code> 좌우로 부동되는 사이드바(sidebar)인 형제(sibling)가 있다면, <code>clear</code> 사용은 강제로 머릿글이 두 사이드바 아래로 나타나게 하고 이는 아마 우리가 원하는 게 아닙니다.</p> + +<p>그들 아래 요소의 float을 지우는 게 선택사항이 아니라면, 다른 방법(approach)은 부동 요소가 담긴 컨테이너의 블록 형식 문맥을 제한하는 겁니다. 다시 위 예제를 참조하면, 빨간 박스 셋은 모두 <code>p</code> 요소 내에 있는 걸로 보입니다. 우리는 박스를 포함하도록 늘어나지만, 그 하단 밖(밑)으로 사라지지 않게 <code>hidden</code> 혹은 <code>auto</code> 로 p의 {{Cssxref("overflow")}} 속성을 설정할 수 있습니다:</p> + +<pre class="brush:css">p.withRedBoxes { overflow: hidden; height: auto; } +</pre> + +<div class="note"><strong>주의:</strong> <code>overflow</code> 를 <code>scroll</code> 로 설정하면 부동된 모든 자식(child) 요소도 포함합니다. 하지만 스크롤바가 콘텐츠의 높이에 상관없이 보입니다. 그 컨테이너가 콘텐츠를 수용하기 위해 늘어야(grow) 함을 나타내는 기본(default)임에도 불구하고, 여기에서 우리는 <code>height</code> 를 <code>auto</code> 로 설정하고 있습니다.</div> + +<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('CSS3 Box', '#float', 'float')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>많은 새 값이, 아직 모두 분명히 정의되지 않음. 새 기능과 관련 없는 행동의 차이는 모두 의도치 않은 걸로 예상됩니다. 그러므로 보고해 주세요.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>변화 없음</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#float', 'float')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>초기 정의</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("css.properties.float")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li> +</ul> |