[ko] fix ids for example (#1173)

issue: Examples are not working.
additional: Add missing body text

1 files changed, 46 insertions, 18 deletions

diff --git a/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html
index 4557bc725c..00b138b8e8 100644
--- a/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html
+++ b/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html
@@ -16,13 +16,13 @@ translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
 
 <p><strong>CSS counters</strong>를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.</p>
 
-<h2 id="Counters_사용하기">Counters 사용하기</h2>
+<h2 id="Using_counters">Counters 사용하기</h2>
 
-<h3 id="카운터_값_조작하기">카운터 값 조작하기</h3>
+<h3 id="Manipulating_a_counters_value">카운터 값 조작하기</h3>
 
 <p>CSS counter를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성(초깃값  <code>0</code>)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 {{cssxref("counter-increment")}}에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.</p>
 
-<h3 id="카운터_표시하기">카운터 표시하기</h3>
+<h3 id="Displaying_a_counter">카운터 표시하기</h3>
 
 <p>Counter의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.</p>
 
@@ -30,42 +30,70 @@ translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
 
 <p><code>counters()</code> 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수<code>decimal</code>)로 렌더링 됩니다.</p>
 
-<h3 id="기본_예제">기본 예제</h3>
+<h3 id="Basic_example">기본 예제</h3>
 
 <p>여기서는 제목 앞에 숫자를 붙여봅니다.</p>
 
 <h4 id="CSS">CSS</h4>
 
-<pre class="brush: css notranslate">body {
-  counter-reset: section;                     /* counter 이름을 'section'으로 지정합니다.
-                                                 초깃값은 0입니다. */
+<pre class="brush: css">body {
+  counter-reset: section;                       /* counter 이름을 'section'으로 지정합니다.
+                                                   초깃값은 0입니다. */
 }
 
 h3::before {
-  counter-increment: section;                 /* section의 카운터 값을 1씩 증가시킵니다. */
-  content: counter(section);                  /* section의 카운터 값을 표시합니다. */
+  counter-increment: section;                   /* section의 카운터 값을 1씩 증가시킵니다. */
+  content: "Section " counter(section) ": ";    /* section의 카운터 값을 표시합니다. */
 }
 </pre>
 
 <h4 id="HTML">HTML</h4>
 
-<pre class="brush: html notranslate">&lt;h3&gt;Introduction&lt;/h3&gt;
-&lt;h3&gt;Body&lt;/h3&gt;
-&lt;h3&gt;Conclusion&lt;/h3&gt;</pre>
+<pre class="brush: html">&lt;h3&gt;Introduction&lt;/h3&gt;
+  &lt;h3&gt;Body&lt;/h3&gt;
+  &lt;h3&gt;Conclusion&lt;/h3&gt;</pre>
 
-<h4 id="결과">결과</h4>
+<h4 id="Result">결과</h4>
 
 <p>{{EmbedLiveSample("Basic_example", "100%", 150)}}</p>
 
-<h2 id="중첩_카운터">중첩 카운터</h2>
+<h3 id="A_more_sophisticated_example">더 정교한 예시</h3>
+
+<p>카운터가 증가 할 때마다 반드시 표시되어야 하는 것은 아닙니다. 이 예시는 모든 링크를 계산하지만 카운터는 링크에 텍스트가 없는 경우에만 표시되므로 편리한 대체제입니다.</p>
+
+<h4 id="CSS2">CSS</h4>
+
+<pre class="brush: css">:root {
+  counter-reset: link;
+}
+
+a[href] {
+  counter-increment: link;
+}
+
+a[href]:empty::after {
+  content: "[" counter(link) "]";
+}</pre>
+
+<h4 id="HTML2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;See &lt;a href="https://www.mozilla.org/"&gt;&lt;/a&gt;&lt;/p&gt;
+&lt;p&gt;Do not forget to &lt;a href="contact-me.html"&gt;leave a message&lt;/a&gt;!&lt;/p&gt;
+&lt;p&gt;See also &lt;a href="https://developer.mozilla.org/"&gt;&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h4 id="Result2">Result</h4>
+
+<p>{{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}</p>
+
+<h2 id="Nesting_counters">중첩 카운터</h2>
 
 <p>CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. {{cssxref("counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.</p>
 
-<h3 id="중첩_카운터_예제">중첩 카운터 예제</h3>
+<h3 id="Example_of_a_nested_counter">중첩 카운터 예제</h3>
 
 <h4 id="CSS_2">CSS</h4>
 
-<pre class="brush: css notranslate">ol {
+<pre class="brush: css">ol {
   counter-reset: section;                /* ol 요소마다
                                             이름이 section인
                                             새 인스턴스를 생성합니다. */
@@ -83,7 +111,7 @@ li::before {
 
 <h4 id="HTML_2">HTML</h4>
 
-<pre class="brush: html notranslate">&lt;ol&gt;
+<pre class="brush: html">&lt;ol&gt;
   &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
   &lt;li&gt;item               &lt;!-- 2     --&gt;
     &lt;ol&gt;
@@ -111,7 +139,7 @@ li::before {
   &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
 &lt;/ol&gt;</pre>
 
-<h4 id="결과_2">결과</h4>
+<h4 id="Result_2">결과</h4>
 
 <p>{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}</p>