diff options
Diffstat (limited to 'files/ko/web/css/css_positioning')
9 files changed, 1191 insertions, 0 deletions
diff --git a/files/ko/web/css/css_positioning/index.html b/files/ko/web/css/css_positioning/index.html new file mode 100644 index 0000000000..bd2a5f4f33 --- /dev/null +++ b/files/ko/web/css/css_positioning/index.html @@ -0,0 +1,61 @@ +--- +title: CSS Positioning +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - Overview + - Reference +translation_of: Web/CSS/CSS_Positioning +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Positioning</strong>은 요소를 페이지에 배치하는 방법을 정의하는 CSS 모듈입니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="CSS_속성">CSS 속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("clear")}}</li> + <li>{{cssxref("float")}}</li> + <li>{{cssxref("left")}}</li> + <li>{{cssxref("position")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("z-index")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index">CSS z-index 이해하기</a></dt> + <dd>쌓임 문맥의 개념을 소개하고 몇 가지 예와 함께 z축 순서의 동작을 설명합니다.</dd> +</dl> + +<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('CSS3 Positioning') }}</td> + <td>{{ Spec2('CSS3 Positioning') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..9621937b5f --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,157 @@ +--- +title: z-index 적용 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p> +<h3 id="cssxrefz-index_적용">{{ cssxref("z-index") }} 적용</h3> +<p>처음 예제에서(<a href="/ko/CSS/Understanding_z-index/Stacking_without_z-index" title="ko/CSS/Understanding_z-index/Stacking_without_z-index">z-index가 없는 경우의 쌓임</a>) 엘리먼트들이 기본적으로 어떻게 쌓이는지 설명했다. 만약 다른 쌓임 순서를 적용하고 싶다면 먼저 엘리먼트에 {{ cssxref("position") }} 속성을 지정하고 {{ cssxref("z-index") }} 속성을 지정해야한다. </p> +<p>z-index 속성은 하나의 정수 값을 가질 수 있다(양수, 음수 모두 가능하다). 이 값은 해당 엘리먼트의 z축 상의 위치를 나타낸다. 만약 당신이 z축에 익숙하지 않다면 여러 레이어가 쌓여있는 페이지를 상상해보라. 각 레이어는 번호가 붙어있고 높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 렌더링된다. </p> +<p><strong>다시한번 경고!</strong> z-index는 <a href="/en/CSS/position" title="position">position</a> 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.</p> +<ul> + <li><em>가장 아래(사용자로부터 가장 멀다)</em></li> + <li>...</li> + <li>Layer -3</li> + <li>Layer -2</li> + <li>Layer -1</li> + <li>Layer 0 <em>기본 렌더링 레이어</em></li> + <li>Layer 1</li> + <li>Layer 2</li> + <li>Layer 3</li> + <li>...</li> + <li><em>가장 위(사용자로부터 가장 가깝다)</em></li> +</ul> +<div class="note"> + <p><strong>노트:</strong></p> + <ul> + <li>z-index 속성을 지정하지 않으면 엘리먼트는 기본 렌더링 레이어(레이어 0)에 렌더링된다. </li> + <li>만약 몇개의 엘리먼트들이 같은 z-index 속성 값을 가지면 (엘리먼트들이 같은 레이어에 위치한다) <a href="/ko/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">z-index가 없는 경우의 쌓임</a> 쌓임 규칙을 적용한다.</li> + </ul> +</div> +<p>다음 예제에서는 레이어들의 쌓임 순서가 z-index를 이용하여 바뀌어있다. DIV#5는 position 속성이 지정되지 않았으므로 z-index 속성 값은 쌓임 순서를 결정하는데에 아무 영향을 미치지 않는다. </p> +<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/912/=Understanding_zindex_03.png"></p> +<h3 id="Example_source_code"><strong>Example source code</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { + opacity: 0.7; + font: 12px Arial; +} + +span.bold { font-weight: bold; } + +#normdiv { + z-index: 8; + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv1 { + z-index: 3; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv2 { + z-index: 2; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#absdiv1 { + z-index: 5; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#absdiv2 { + z-index: 1; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +</style></head> + +<body> + +<br /><br /> + +<div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; + <br />z-index: 5; +</div> + +<div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; + <br />z-index: 3; +</div> + +<div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; + <br />z-index: 2; +</div> + +<div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 1; +</div> + +<div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning + <br />z-index: 8; +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..2887faf021 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,32 @@ +--- +title: CSS z-index 이해하기 +slug: Web/CSS/CSS_Positioning/Understanding_z_index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<p>우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다. </p> +<blockquote> + <p style=""><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p> +</blockquote> +<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> +<p>위에 소개된 CSS 스타일 규칙을 보면 기본 렌더링 레이어(layer 0) 이외의 추가적인 레이어를 생성하고 여기에 박스를 위치시킬수 있다는 것을 알 수 있다. 레이어의 Z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다. 큰 정수는 화면을 보고있는 사용자에게 가까운 것을 의미한다. Z축 위치는 {{ cssxref("z-index") }} 속성 값을 설정함으로써 바꿀 수 있다.</p> +<p>엘리먼트의 Z축 위치를 결정하는 것은 굉장히 간단해 보인다. {{ cssxref("z-index") }} 라는 하나의 프로퍼티를 사용하고 이 프로퍼티는 하나의 정수 값을 가진다. 그러나 {{ cssxref("z-index") }} 속성이 복잡한 HTML 계층적 엘리먼트들에 지정되었을 때에는 동작을 이해하기 힘들고 심지어 예측하지 못할 때도 있다. 이것은 엘리먼트들의 쌓임 순서를 결정하는 규칙(이하 쌓임 규칙)이 복잡하기 때문이다. 오로지 이 규칙만을 설명하기 위한 CSS 명세 섹션이 있을 정도다. (<a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a>)</p> +<p>이 문서에서는 몇가지 간단한 예를 들어 쌓임 규칙에 대해 설명하려고 한다. </p> +<ol> + <li><a href="/ko/CSS/Understanding_z-index/Stacking_without_z-index" title="ko/CSS/Understanding_z-index/Stacking_without_z-index">z-index가 없는 경우의 쌓임</a> : 기본 쌓임 규칙</li> + <li><a href="/ko/CSS/Understanding_z-index/Stacking_and_float" title="ko/CSS/Understanding_z-index/Stacking_and_float">floating 엘리먼트의 쌓임</a> : floating 엘리먼트들은 어떻게 다루어지는가</li> + <li><a href="/ko/CSS/Understanding_z-index/Adding_z-index" title="ko/CSS/Understanding_z-index/Adding_z-index">z-index 적용</a> : 기본 쌓임 순서를 변경하기 위해 z-index 사용하기</li> + <li><a href="/ko/CSS/Understanding_z-index/The_stacking_context" title="ko/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락(stacking context) 이야기</a> : 쌓임 맥락(stacking context) 이야기 </li> + <li><a href="/ko/CSS/Understanding_z-index/Stacking_context_example_1" title="ko/CSS/Understanding_z-index/Stacking_context_example_1">쌓임 맥락 예제1</a> : 2레벨 HTML 계층구조, 마지막 레벨에서 z-index가 지정된 경우</li> + <li><a href="/ko/CSS/Understanding_z-index/Stacking_context_example_2" title="ko/CSS/Understanding_z-index/Stacking_context_example_2">쌓임 맥락 예제2</a> : 2레벨 HTML 계층구조, 모든 레벨에서 z-index가 지정된 경우</li> + <li><a href="/ko/CSS/Understanding_z-index/Stacking_context_example_3" title="ko/CSS/Understanding_z-index/Stacking_context_example_3">쌓임 맥락 예제3</a> : 3레벨 HTML 계층구조, 두번째 레벨에서 z-index가 지정된 경우</li> +</ol> +<p><small><em>저자의 말: 검토를 해준 Wladimir Palant씨와 Rod Whiteley씨에게 감사의 말을 전합니다.</em></small></p> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">원본 문서 정보</h3> + <ul> + <li>저자(s): Paolo Lombardi</li> + <li>이 문서는 <a class="external" href="http://www.yappy.it">YappY</a>에 이탈리어로 게재된 문서의 영어 번역판입니다. <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> 아래에서 공유할 수 있습니다.</li> + <li>마지막 수정일: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index" } ) }} </p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..4430c5cdf3 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,146 @@ +--- +title: floating 엘리먼트의 쌓임 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p> +<h3 id="floating_엘리먼트의_쌓임">floating 엘리먼트의 쌓임</h3> +<p>floating 엘리먼트들의 쌓임 순서는 약간 다르다. floating 엘리먼트들은 position이 지정된 블록과 지정되지 않은 블록 사이에 쌓인다. </p> +<ol> + <li>뿌리 엘리먼트의 배경과 테두리</li> + <li>자식 엘리먼트들은 HTML에서 등장하는 순서대로</li> + <li>floating 엘리먼트</li> + <li>position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li> +</ol> +<p>사실 다음 예제에서 보는 것처럼 position이 지정되지 않은 엘리먼트(DIV #4)의 배경과 테두리는 floating 엘리먼트들에 의해 영향을 받지 않는다. 반면 컨텐츠는 영향을 받는다. 이것은 CSS 표준 float 명세에 따른 것이다. </p> +<p>위의 규칙 리스트를 수정하여 이 명세를 포함시켜보자. </p> +<ol> + <li>뿌리 엘리먼트의 배경과 테두리</li> + <li>자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li> + <li>floating 엘리먼트</li> + <li>inline 자식 엘리먼트는 보통의 흐름대로</li> + <li>position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li> +</ol> +<div class="note"> + <strong>노트:</strong> 아래 예제에서 position이 지정되지 않은 엘리먼트 이외에는 모든 엘리먼트가 쌓임 순서를 보여주기 위해 반투명하게 설정되었다. 만약 position이 지정되지 않은 엘리먼트 (DIV #4)의 투명도를 낮추면 이상한 일이 일어난다. 배경과 테두리가 (원래에는 floating 엘리먼트 아래에 있어야 함에도 불구하고) floating 엘리먼트와 position이 지정된 엘리먼트 사이에 보이는 것이다. 이것이 명세의 일부인지 아니면 버그인지 확실하지 않다. 투명도를 적용하는것이 새로운 쌓임 맥락(stacking context)를 만드는 것일까?</div> +<p><img alt="Example of stacking rules with floating boxes" class="internal" src="/@api/deki/files/911/=Understanding_zindex_02.png"></p> +<h3 id="Example_source_code"><strong>Example source code</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { + font: 12px Arial; +} + +span.bold { font-weight: bold; } + +#absdiv1 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 200px; + top: 10px; + right: 140px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#normdiv { + /*opacity: 0.7;*/ + height: 100px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 10px 0px 10px; + text-align: left; +} + +#flodiv1 { + opacity: 0.7; + margin: 0px 10px 0px 20px; + float: left; + width: 150px; + height: 200px; + border: 1px dashed #009900; + background-color: #ccffcc; + text-align: center; +} + +#flodiv2 { + opacity: 0.7; + margin: 0px 20px 0px 10px; + float: right; + width: 150px; + height: 200px; + border: 1px dashed #009900; + background-color: #ccffcc; + text-align: center; +} + +#absdiv2 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 100px; + top: 130px; + left: 100px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +</style></head> + +<body> + +<br /><br /> + +<div id="absdiv1"> +<br /><span class="bold">DIV #1</span> +<br />position: absolute; +</div> + +<div id="flodiv1"> +<br /><span class="bold">DIV #2</span> +<br />float: left; +</div> + +<div id="flodiv2"> +<br /><span class="bold">DIV #3</span> +<br />float: right; +</div> + +<br /> + +<div id="normdiv"> +<br /><span class="bold">DIV #4</span> +<br />no positioning +</div> + +<div id="absdiv2"> +<br /><span class="bold">DIV #5</span> +<br />position: absolute; +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_et_float" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..9444e2bb5e --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,120 @@ +--- +title: 쌓임 맥락 예제1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p> +<h3 id="쌓임_맥락_예제1">쌓임 맥락 예제1</h3> +<p>기본 예제부터 시작하자. 쌓임 맥락의 뿌리에는 두개의 DIV #1과 DIV #3가 있다. 두 DIV는 모두 position 속성 값이 relative로 지정되었지만 z-index 속성 값은 지정되지 않았다. DIV #1 안에는 position 속성 값이 absolute로 지정된 DIV #2가 있고 DIV #3 안에도 position 속성 값이 absolute가 지정된 DIV #4가 있다. DIV #2와ㅏ DIV #4 모두 z-index 속성 값은 지정되지 않았다. </p> +<p>유일한 쌓임 맥락은 뿌리 엘리먼트다. z-index가 없는 엘리먼트들은 HTML 문서에서 등장 순서대로 쌓인다. </p> +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p> +<p>DIV #2의 z-index 속성 값을 0또는 auto가 아닌 양의 정수로 지정하면 다른 DIV들 보다 위에 렌더링된다. </p> +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p> +<p>DIV #4의 z-index 속성 값을 DIV #2의 z-index 속성 값보다 큰 값으로 지정하면 DIV #4는 DIV #2보다 위에 렌더링된다. </p> +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p> +<p>마지막 예제에서 DIV #2와 DIV #4는 형제가 아니다. 왜냐하면 둘의 부모가 다르기 때문이다. 그럼에도 불구하고 DIV #2와 DIV #4의 쌓임 순서를 z-index 속성 값을 지정함으로써 바꿀 수 있었다. 왜냐하면 DIV #1과 DIV #3은 z-index 속성 값이 지정되지 않았고 따라서 쌓임 맥락을 만들지 않았기 때문이다. 따라서 DIV #2와 DIV #4는 둘 다 뿌리 엘리먼트의 쌓임 맥락에 속해있고, z-index 속성 값을 변경하여 쌓임 순서를 바꿀 수 있다. </p> +<p>쌓임 맥락의 용어로 설명하자면 DIV #1과 DIV #3은 뿌리 엘리먼트에 <em>동화되었다.</em> 이 예제의 DIV들은 다음과 같은 쌓임 맥락 계층 구조를 이룬다. </p> +<ul> + <li>뿌리 쌓임 맥락 + <ul> + <li>DIV #2 (z-index 1)</li> + <li>DIV #4 (z-index 2)</li> + </ul> + </li> +</ul> +<div class="note"> + <strong>Note:</strong> DIV #1과 DIV #3은 투명하지 않다. 투명도를 1보다 적은 값으로 지정하게 되면 내부적으로 쌓임 맥락을 만든다는걸 기억하자. 이건 마치 z-index 값을 설정한 것과 비슷하다. 이 예제는 부모 엘리먼트들이 쌓임 맥락을 형성하지 않을 때 어떤 일이 일어나는지 보여준다. </div> +<h3 id="예제_소스_코드"><strong>예제 소스 코드</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +#div1,#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#div2 { + opacity: 0.8; + z-index: 1; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#div4 { + opacity: 0.8; + z-index: 2; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +} + + +</style></head> + +<body> + +<br /> + +<div id="div1"> +<br /><span class="bold">DIV #1</span> +<br />position: relative; + <div id="div2"> + <br /><span class="bold">DIV #2</span> + <br />position: absolute; + <br />z-index: 1; + </div> +</div> + +<br /> + +<div id="div3"> +<br /><span class="bold">DIV #3</span> +<br />position: relative; + <div id="div4"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 2; + </div> +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" style="display: none;"> </span></li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_1" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..cf794c3428 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,123 @@ +--- +title: 쌓임 맥락 예제2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p> +<h3 id="쌓임_맥락_예제2">쌓임 맥락 예제2</h3> +<p>굉장히 간단하지만 <em>쌓임 맥락</em>을 이해하는데 도움이 되는 예제를 하나 소개하려 한다. 이전 예제에서 본 4개의 DIV가 있다. 이번에는 두 레벨의 DIV 모두 z-index 속성 값을 지정했다. </p> +<p><img alt="Stacking context example 2" class="internal" src="/@api/deki/files/917/=Understanding_zindex_06.png"></p> +<p>z-index 속성 값이 2인 DIV #2는 z-index 속성 값이 1인 DIV #3 위에 있다. 왜냐하면 DIV #2와 DIV #3은 같은 쌓임 맥락(루트 엘리먼트)에 속하고 DIV #2의 z-index 값이 더 크기 때문이다. </p> +<p>이상한 점은 z-index 속성 값이 2인 DIV #2가 z-index 속성 값이 10인 DIV #4보다 위에 있다는 점이다. 이것은 이 두 DIV가 같은 쌓임 맥락에 속해있지 않기 때문이다. DIV #4는 DIV #3이 만든 쌓임 맥락에 속해있고 DIV #3과 DIV #3의 모든 자식 엘리먼트는 DIV #2보다 아래에 있다. </p> +<p>이 상황을 더 잘 이해하기 위해서 쌓임 맥락 계층을 그려보자. </p> +<ul> + <li>루트 엘리먼트 쌓임 맥락 + <ul> + <li>DIV #2 (z-index 2)</li> + <li>DIV #3 (z-index 1) + <ul> + <li>DIV #4 (z-index 10)</li> + </ul> + </li> + </ul> + </li> +</ul> +<div class="note"> + <strong>Note:</strong> 일반적인 HTML 계층 구조가 쌓임 맥락 계층 구조와 다르다는걸 상기하자. 쌓임 맥락을 만들지 않는 엘리먼트들은 쌓임 맥락 계층 구조에서 사라진다. </div> +<h3 id="예제_소스_코드"><strong>예제 소스 코드</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +#div2 { z-index: 2; } +#div3 { z-index: 1; } +#div4 { z-index: 10; } + +#div1,#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#div2 { + opacity: 0.8; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#div4 { + opacity: 0.8; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +} + + +</style></head> + +<body> + +<br /> + +<div id="div1"> +<br /><span class="bold">DIV #1</span> +<br />position: relative; + <div id="div2"> + <br /><span class="bold">DIV #2</span> + <br />position: absolute; + <br />z-index: 2; + </div> +</div> + +<br /> + +<div id="div3"> +<br /><span class="bold">DIV #3</span> +<br />position: relative; +<br />z-index: 1; + <div id="div4"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 10; + </div> +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ul> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_2" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..d632745924 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,167 @@ +--- +title: 쌓임 맥락 예제3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <span class="title"><a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index">CSS z-index 이해하기</a></span></p> +<h3 id="쌓임_맥락_예제3">쌓임 맥락 예제3</h3> +<p>마지막 예제는 멀티 레벨 HTML 계층 구조에서 z-index 속성 값을 지정할때 생기는 문제에 대해 다룰 것이다. </p> +<p>몇개의 position 속성 값이 지정된 3-레벨 계층 메뉴를 생각하자. 두번째 레벨과 세번째 레벨의 메뉴는 그들의 부모에 마우스를 갖다 대거나 클릭했을 때 보인다. 이 메뉴를 클래스 선택자를 통해 스타일링 해보자. </p> +<p>만약 세 메뉴가 부분적으로 겹친다면 쌓임을 해결하는 것이 문제가 된다. </p> +<p><img alt="Stacking context example 3" class="internal" src="/@api/deki/files/918/=Understanding_zindex_07.png"></p> +<p>첫번째 레벨 메뉴는 position 속성 값만이 relative로 지정되어있다. 따라서 이는 쌓임 맥락을 형성하지 않는다. (역자: z-index 속성 값을 지정하지 않았다.) </p> +<p>두번째 레벨 메뉴는 position 속성 값이 absolute로 지정되었다. 두번째 레벨 메뉴를 모든 첫번째 레벨 메뉴보다 위에 두기 위해서 z-index 속성 값이 사용되었다. 따라서 모든 두번째 레벨 메뉴에 쌓임 맥락이 생성되고 세번째 레벨 메뉴는 부모의 쌓임 맥락에 속하게 된다. </p> +<p>따라서 세번째 레벨 메뉴는 그 부모의 다음 두번째 레벨 메뉴 아래에 놓이게 된다. 왜냐하면 모든 두번째 레벨 메뉴는 같은 z-index 속성 값을 가지고 기본 쌓임 규칙을 적용받기 때문이다. (역자: 같은 z-index 속성 값을 가지는 형제 엘리먼트들은 HTML 문서상에서 나중에 등장한 것이 위에 쌓인다.)</p> +<p>이 상황을 더 잘 이해하기 위해 쌓임 맥락 계층 구조를 그려보자.</p> +<ul> + <li>뿌리 엘리먼트 쌓임 맥락 + <ul> + <li>LEVEL #1 + <ul> + <li>LEVEL #2 (z-index: 1) + <ul> + <li>LEVEL #3</li> + <li>...</li> + <li>LEVEL #3</li> + </ul> + </li> + <li>LEVEL #2 (z-index: 1)</li> + <li>...</li> + <li>LEVEL #2 (z-index: 1)</li> + </ul> + </li> + <li>LEVEL #1</li> + <li>...</li> + <li>LEVEL #1</li> + </ul> + </li> +</ul> +<p>이 문제를 해결하는 방법에는 1) 서로 다른 메뉴를 겹치지 않게 배치하기, 2) 클래스 선택자 뿐만 아니라 id 선택자를 이용하여 각각의 엘리먼트에 z-index 속성 값을 지정하기, 3) HTML 구조를 단순화하여 멀티 레벨 메뉴를 사용하지 않기 등이 있다. </p> +<div class="note"> + <strong>노트:</strong> 소스 코드에는 두번째 레벨 메뉴와 세번째 레벨 메뉴들이 position 속성이 absolute로 지정된 컨테이너에 싸여있는 것을 볼 수 있다. 이는 여러개의 엘리먼트들의 위치를 한꺼번에 지정하는데 유용하다. </div> +<h3 id="예제_소스_코드"><strong>예제 소스 코드</strong></h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +div.lev1 { + width: 250px; + height: 70px; + position: relative; + border: 2px outset #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#container1 { + z-index: 1; + position: absolute; + top: 30px; + left: 75px; +} + +div.lev2 { + opacity: 0.9; + width: 200px; + height: 60px; + position: relative; + border: 2px outset #990000; + background-color: #ffdddd; + padding-left: 5px; +} + +#container2 { + z-index: 1; + position: absolute; + top: 20px; + left: 110px; +} + +div.lev3 { + z-index: 10; + width: 100px; + position: relative; + border: 2px outset #000099; + background-color: #ddddff; + padding-left: 5px; +} + +</style></head> + +<body> + +<br /> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> + + <div id="container1"> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + + <div id="container2"> + + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + <div class="lev3"><span class="bold">LEVEL #3</span></div> + + </div> + + </div> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + </div> + + </div> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +</body></html> +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> +</ul> +<p> </p> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_3" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..04e826dc17 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,145 @@ +--- +title: z-index가 없는 경우의 쌓임 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p> +<h3 id="z-index가_없는_경우의_쌓임">z-index가 없는 경우의 쌓임</h3> +<p>만약 모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다음 순서로 아래에서부터 위로 쌓인다.</p> +<ol> + <li>뿌리 엘리먼트의 배경과 테두리</li> + <li>자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li> + <li>position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li> +</ol> +<p>다음 예제에는 위의 쌓임 규칙을 설명하기 위한 적당한 크기의 엘리먼트들이 준비되어있다. </p> +<div class="note"> + <p><strong>노트:</strong></p> + <ul> + <li>주어진 동일한 엘리먼트들의 그룹은 모두 z-index가 설정되지 않았다. DIV #1 부터 DIV #4 까지는 position 속성이 설정되었다. 엘리먼트의 position속성 값과는 상관 없이 HTML 계층 구조대로 쌓임을 알 수 있다. </li> + <li> + <p>position 속성이 지정되지 않은 블록(DIV #5)은 항상 position이 지정된 엘리먼트 이전에 렌더링 된다. 따라서 position이 지정된 엘리먼트 아래에 보인다. 설령 HTML 문서상에서 먼저 나오더라도 position이 지정되지 않은 엘리먼트는 지정된 엘리먼트보다 아래에 보인다. </p> + </li> + </ul> +</div> +<p><img alt="understanding_zindex_01.png" class="internal default" src="/@api/deki/files/910/=understanding_zindex_01.png"></p> +<p> </p> +<h3 id="Example" name="Example">예제</h3> +<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html> +<head><style type="text/css"> + +div { + font: 12px Arial; +} + +span.bold { font-weight: bold; } + +#normdiv { + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv1 { + opacity: 0.7; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#reldiv2 { + opacity: 0.7; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; +} + +#absdiv1 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#absdiv2 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +</style></head> + +<body> + +<br /><br /> + +<div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; +</div> + +<div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; +</div> + +<div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; +</div> + +<div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; +</div> + +<div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning +</div> + +</body></html> + +</pre> +<h3 id="See_also">See also</h3> +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li> +</ul> +<p> </p> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}</p> diff --git a/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..0e55368fa2 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,240 @@ +--- +title: 쌓임 맥락 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +tags: + - Advanced + - CSS + - Guide + - Reference + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary"><strong>쌓임 맥락</strong>(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다.</span> Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지합니다.</p> + +<h2 id="쌓임_맥락">쌓임 맥락</h2> + +<p>이전 글 <a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index 사용하기</a>에서 보았듯, 특정 요소의 렌더링 순서는 자신의 <code>z-index</code> 속성 값에 영향을 받습니다. 이는 그 요소들이 가진 특별한 속성으로 인해 <strong>쌓임 맥락</strong>이 생성되기 때문입니다.</p> + +<p>쌓임 맥락은, 문서 어디에서나, 다음 조건을 만족하는 요소가 생성합니다.</p> + +<ul> + <li>문서의 루트 요소. (<code><html></code>)</li> + <li>{{cssxref("position")}}이 <code>absolute</code> 또는 <code>relative</code>이고, {{cssxref("z-index")}}가 <code>auto</code>가 아닌 요소.</li> + <li>{{cssxref("position")}}이 <code>fixed</code> 또는 <code>sticky</code>인 요소. (<code>sticky</code>는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)</li> + <li>플렉스({{cssxref("flexbox")}}) 컨테이너의 자식 중 {{cssxref("z-index")}}가 <code>auto</code>가 아닌 요소.</li> + <li>그리드({{cssxref("grid")}}) 컨테이너의 자식 중 {{cssxref("z-index")}}가 <code>auto</code>가 아닌 요소.</li> + <li>{{cssxref("opacity")}}가 1보다 작은 요소. (<a href="http://www.w3.org/TR/css3-color/#transparency">불투명도 명세</a> 참고)</li> + <li>{{cssxref("mix-blend-mode")}}가 <code>normal</code>이 아닌 요소.</li> + <li>다음 속성 중 하나라도 <code>none</code>이 아닌 값을 가진 요소. + <ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("filter")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("clip-path")}}</li> + <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li> + </ul> + </li> + <li>{{cssxref("isolation")}}이 <code>isolate</code>인 요소.</li> + <li>{{cssxref("-webkit-overflow-scrolling")}}이 <code>touch</code>인 요소.</li> + <li>{{cssxref("will-change")}}의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.</li> + <li>{{cssxref("contain")}}이 <code>layout</code>, <code>paint</code>, 또는 둘 중 하나를 포함하는 값(<code>strict</code>, <code>content</code> 등)인 요소.</li> +</ul> + +<p>쌓임 맥락 안의 자식 요소는 이전에 설명했던 규칙을 동일하게 사용해 쌓입니다. 중요한 것은, 자식의 <code>z-index</code> 값은 부모에게만 의미가 있다는 점입니다. 하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다.</p> + +<p>요약하면,</p> + +<ul> + <li>쌓임 맥락이 다른 쌓임 맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다.</li> + <li>쌓임 맥락은 형제 쌓임 맥락과 완전히 분리됩니다. 쌓임을 처리할 땐 자손 요소만 고려합니다.</li> + <li>각각의 쌓임 맥락은 독립적입니다. 어느 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째 부모 쌓임 맥락 안에 배치합니다.</li> +</ul> + +<div class="note"><strong>참고:</strong> 모든 요소가 쌓임 맥락을 생성하는 건 아니므로, 쌓임 맥락의 계층 구조는 HTML 요소 계층 구조의 부분집합입니다. 자신의 쌓임 맥락을 만들지 않은 요소는 '부모 쌓임 맥락에 의해 <strong>동화된다</strong>'라고 표현할 수 있겠습니다.</div> + +<h2 id="예시"><strong>예시</strong></h2> + +<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> + +<p>위의 예시에서, 모든 요소는 각자의 포지션과 <code>z-index</code>로 인해 자신의 쌓임 맥락을 형성합니다. 쌓임 맥락의 계층 구조는 다음과 같습니다.</p> + +<ul> + <li>루트 + <ul> + <li>DIV #1</li> + <li>DIV #2</li> + <li>DIV #3 + <ul> + <li>DIV #4</li> + <li>DIV #5</li> + <li>DIV #6</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>DIV #4, DIV #5, DIV #6은 DIV #3의 자식이므로, DIV #3 내부에서만 셋의 쌓임을 처리했다는 것을 이해하는게 중요합니다. DIV #3 내부의 요소의 쌓기와 렌더링이 끝난 후에는, 전체 DIV #3을 루트 요소의 쌓임 맥락 하에서 형제 DIV와 쌓습니다.</p> + +<div class="note"> +<p><strong>참고:</strong></p> + +<ul> + <li>DIV #4는 DIV #1보다 z-index 속성 값이 더 크지만 DIV #1보다 아래에 렌더링 되었다. 왜냐하면 DIV #1의 z-index 속성 값인 5는 뿌리 엘리먼트의 쌓임 맥락 안에서 유효하나 DIV #4의 z-index 속성 값인 6은 DIV #3의 쌓임 맥락 안에서만 유효하기 때문이다. DIV #4는 자신이 속하는 DIV #3의 z-index 속성 값이 4이므로 DIV #1 아래에 쌓였다.</li> + <li>같은 이유로 DIV #2는 DIV #5 아래에 렌더링 되었다. DIV #5는 DIV #2보다 z-index 값이 작지만 뿌리 엘리먼트의 쌓임 맥락안에서 유효한 DIV #5가 속한 DIV #3의 z-index 값이 DIV #2의 z-index 값 보다 더 크기 때문이다.</li> + <li>DIV #3의 z-index 속성 값인 4는 DIV #4, DIV #5, DIV #6의 z-index 속성값과 독립적이다. 왜냐하면 다른 쌓임 맥락에 속해있기 때문이다.</li> + <li>렌더링 순서를 이해하는 쉬운 방법은 z-index를 "버전 번호" 처럼 생각하는 것이다. 자식 엘리먼트는 부모 엘리먼트 버전 번호의 마이너 버전이다. 이 방법은 왜 z-index가 1인 DIV #5가 z-index가 2인 DIV #2 위에 쌓였는지, z-index가 6인 DIV #4가 z-index가 5인 DIV #1 아래에 쌓였는지 이해하게 해준다. 우리 예제에서는 + <ul> + <li>뿌리 엘리먼트 + <ul> + <li>DIV #2 - z-index가 2</li> + <li>DIV #3 - z-index가 4 + <ul> + <li>DIV #5 - z-index가 1인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.1이다.</li> + <li>DIV #6 - z-index가 3인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.3이다.</li> + <li>DIV #4 - z-index가 6인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.6이다.</li> + </ul> + </li> + <li>DIV #1 - z-index가 5</li> + </ul> + </li> + </ul> + </li> +</ul> +</div> + +<h2 id="예제">예제</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><code><div id="div1"> + <h1>Division Element #1</h1> + <code>position: relative;<br/> + z-index: 5;</code> +</div> + +<div id="div2"> + <h1>Division Element #2</h1> + <code>position: relative;<br/> + z-index: 2;</code> +</div> + +<div id="div3"> + <div id="div4"> + <h1>Division Element #4</h1> + <code>position: relative;<br/> + z-index: 6;</code> + </div> + + <h1>Division Element #3</h1> + <code>position: absolute;<br/> + z-index: 4;</code> + + <div id="div5"> + <h1>Division Element #5</h1> + <code>position: relative;<br/> + z-index: 1;</code> + </div> + + <div id="div6"> + <h1>Division Element #6</h1> + <code>position: absolute;<br/> + z-index: 3;</code> + </div> +</div></code></pre> + +<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3> + +<pre class="brush: css notranslate"><code>* { + margin: 0; +} +html { + padding: 20px; + font: 12px/20px Arial, sans-serif; +} +div { + opacity: 0.7; + position: relative; +} +h1 { + font: inherit; + font-weight: bold; +} +#div1, +#div2 { + border: 1px dashed #696; + padding: 10px; + background-color: #cfc; +} +#div1 { + z-index: 5; + margin-bottom: 190px; +} +#div2 { + z-index: 2; +} +#div3 { + z-index: 4; + opacity: 1; + position: absolute; + top: 40px; + left: 180px; + width: 330px; + border: 1px dashed #900; + background-color: #fdd; + padding: 40px 20px 20px; +} +#div4, +#div5 { + border: 1px dashed #996; + background-color: #ffc; +} +#div4 { + z-index: 6; + margin-bottom: 15px; + padding: 25px 10px 5px; +} +#div5 { + z-index: 1; + margin-top: 15px; + padding: 5px 10px; +} +#div6 { + z-index: 3; + position: absolute; + top: 20px; + left: 180px; + width: 150px; + height: 125px; + border: 1px dashed #009; + padding-top: 125px; + background-color: #ddf; + text-align: center; +}</code></pre> + +<h3 id="결과">결과</h3> + +<p>{{ EmbedLiveSample('예제', '100%', '396') }}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, <code>z-index</code> on the last level</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, <code>z-index</code> on all levels</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, <code>z-index</code> on the second level</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li> + <li>Last Updated Date: July 9, 2005</li> +</ul> +</div> |