diff options
Diffstat (limited to 'files/ko/web/css/_colon_nth-child')
| -rw-r--r-- | files/ko/web/css/_colon_nth-child/index.html | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/files/ko/web/css/_colon_nth-child/index.html b/files/ko/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..2368a66641 --- /dev/null +++ b/files/ko/web/css/_colon_nth-child/index.html @@ -0,0 +1,196 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-child' +--- +<div>{{CSSRef}}</div> + +<p><a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <strong><code>:nth-child()</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 형제 사이에서의 순서에 따라 요소를 선택합니다.</p> + +<pre class="brush: css no-line-numbers">/* 목록의 두 번째 <li> 선택 */ +li:nth-child(2) { + color: lime; +} + +/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */ +:nth-child(4n) { + color: lime; +} +</pre> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<p><code>nth-child</code> 의사 클래스는 형제의 목록에서, 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정합니다. 인덱스는 1부터 시작합니다.</p> + +<h3 id="키워드_값">키워드 값</h3> + +<dl> + <dt><code>odd</code></dt> + <dd>형제 요소에서 홀수번째(1, 3, 5, ...)인 요소를 나타냅니다.</dd> + <dt><code>even</code></dt> + <dd>형제 요소에서 짝수번째(2, 4, 6, ...)인 요소를 나타냅니다.</dd> +</dl> + +<h3 id="함수형_표기법">함수형 표기법</h3> + +<dl> + <dt><code><An+B></code></dt> + <dd>사용자 지정 패턴을 만족한 인덱스를 가지는 요소를 나타냅니다. An+B의 형태로 나타내며,<br> + <code>A</code>는 정수 인덱스 증감량,<br> + <code>B</code>는 정수 오프셋,<br> + <code>n</code>은 0부터 시작하는 모든 양의 정수를 나타냅니다.</dd> + <dd>목록의 <em>An+B</em>번째 요소라고 해석할 수 있습니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">예제</h2> + +<h3 id="Example_selectors" name="Example_selectors">선택자</h3> + +<dl> + <dt><code>tr:nth-child(odd)</code> 또는 <code>tr:nth-child(2n+1)</code></dt> + <dd>HTML 표의 홀수번째 행을 나타냅니다.</dd> + <dt><code>tr:nth-child(even)</code> 또는 <code>tr:nth-child(2n)</code></dt> + <dd>HTML 표의 짝수번째 행을 나타냅니다.</dd> + <dt><code>:nth-child(7)</code></dt> + <dd>임의의 7번째 요소를 나타냅니다.</dd> + <dt><code>:nth-child(5n)</code></dt> + <dd><strong>5</strong> [=5×1], <strong>10</strong> [=5×2], <strong>15</strong> [=5×3], <strong>...</strong> 번째의 요소를 나타냅니다. 패턴 공식을 만족하는 첫 번째 값은 <strong>0</strong> [=5x0]으로서 아무 요소도 선택하지 않는데, 요소의 인덱스는 1부터 시작하지만 <code>n</code>은 0부터 증가하기 때문입니다. 다소 의아할 수 있으나, 바로 아래 예제처럼 공식의 B 부분이 >0인 경우 보다 납득하기 쉬워집니다.</dd> + <dt><code>:nth-child(n+7)</code></dt> + <dd>7번째와 그 이후의 모든 요소, 즉 <strong>7</strong> [=0+7], <strong>8</strong> [=1+7], <strong>9</strong> [=2+7], <strong>...</strong> 를 나타냅니다.</dd> + <dt><code>:nth-child(3n+4)</code></dt> + <dd><strong>4</strong> [=(3×0)+4], <strong>7</strong> [=(3×1)+4], <strong>10</strong> [=(3×2)+4], <strong>13</strong> [=(3×3)+4], <strong>...</strong> 번째의 요소를 나타냅니다.</dd> + <dt><code>:nth-child(-n+3)</code></dt> + <dd>앞에서 세 개의 요소를 나타냅니다. [=-0+3, -1+3, -2+3]</dd> + <dt><code>p:nth-child(n)</code></dt> + <dd>형제 그룹 내의 모든 <code><p></code> 요소를 나타냅니다. 단순한 <code>p</code> 선택자와 동일하지만 더 높은 <a href="/ko/docs/Web/CSS/Specificity">명시도</a>를 가집니다.</dd> + <dt><code>p:nth-child(1)</code> 또는 <code>p:nth-child(0n+1)</code></dt> + <dd>형제 그룹 내의 모든 첫 번째 <code><p></code> 요소를 나타냅니다. {{cssxref(":first-child")}} 선택자와 동일하며 같은 <a href="/ko/docs/Web/CSS/Specificity">명시도</a>를 가집니다.</dd> + <dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt> + <dd>형제 그룹 내에서 8번째부터 15번째 까지의 <code><p></code> 요소를 나타냅니다.</dd> +</dl> + +<h3 id="자세한_예제">자세한 예제</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><h3><code>span:nth-child(2n+1)</code>, WITHOUT an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 3, 5, and 7 are selected.</p> +<div class="first"> + <span>Span 1!</span> + <span>Span 2</span> + <span>Span 3!</span> + <span>Span 4</span> + <span>Span 5!</span> + <span>Span 6</span> + <span>Span 7!</span> +</div> + +<br> + +<h3><code>span:nth-child(2n+1)</code>, WITH an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 5, and 7 are selected.<br> + 3 is used in the counting because it is a child, but it isn't + selected because it isn't a <code>&lt;span&gt;</code>.</p> +<div class="second"> + <span>Span!</span> + <span>Span</span> + <em>This is an `em`.</em> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> +</div> + +<br> + +<h3><code>span:nth-of-type(2n+1)</code>, WITH an + <code>&lt;em&gt;</code> among the child elements.</h3> +<p>Children 1, 4, 6, and 8 are selected.<br> + 3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>, + not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects + children of that type. The <code>&lt;em&gt;</code> is completely skipped + over and ignored.</p> +<div class="third"> + <span>Span!</span> + <span>Span</span> + <em>This is an `em`.</em> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +span, +div em { + padding: 5px; + border: 1px solid green; + display: inline-block; + margin-bottom: 3px; +} + +.first span:nth-child(2n+1), +.second span:nth-child(2n+1), +.third span:nth-of-type(2n+1) { + background-color: lime; +}</pre> + +<h4 id="결과">결과</h4> + +<div>{{EmbedLiveSample('자세한_예제', 550, 550)}}</div> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Adds <code>of <selector></code> syntax and specifies that matching elements are not required to have a parent.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.selectors.nth-child")}}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li> +</ul> |