From e15a921a8bc96b6d58d59b276ae58f6092b0f582 Mon Sep 17 00:00:00 2001
From: iubns <iubns@naver.com>
Date: Thu, 13 May 2021 13:44:06 +0900
Subject: Correct example errors due to 'id' translation (#819)

* Fix: 404 in example at javascript/object/seal

Fix: 404 in example at javascript/object/seal

* Fix: Modify translated id

error in https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

* Fix: Modify translated id in css_layout/grid
---
 files/ko/learn/css/css_layout/grids/index.html | 62 +++++++++++++-------------
 1 file changed, 31 insertions(+), 31 deletions(-)

(limited to 'files/ko/learn/css')

diff --git a/files/ko/learn/css/css_layout/grids/index.html b/files/ko/learn/css/css_layout/grids/index.html
index 6e4b7403f5..293bde5f0f 100644
--- a/files/ko/learn/css/css_layout/grids/index.html
+++ b/files/ko/learn/css/css_layout/grids/index.html
@@ -32,7 +32,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
  </tbody>
 </table>
 
-<h2 id="그리드_레이아웃이란_무엇인가">그리드 레이아웃이란 무엇인가?</h2>
+<h2 id="What_is_grid_layout">그리드 레이아웃이란 무엇인가?</h2>
 
 <p>그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다.</p>
 
@@ -40,11 +40,11 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p>
 
-<h2 id="CSS에서_그리드_생성하기">CSS에서 그리드 생성하기</h2>
+<h2 id="Creating_your_grid_in_CSS">CSS에서 그리드 생성하기</h2>
 
 <p>당신의 디자인에 필요한 그리드를 결정했다면 해당 CSS 그리드 레이아웃을 생성하고 그 위에 항목을 올려놓기 위해 CSS 그리드 레이아웃을 사용할 수 있습니다. 우리는 먼저 그리드 레이아웃의 기본 기능을 살펴보고 난 뒤 당신의 프로젝트에 맞는 간단한 그리드 시스템을 생성하는 방법을 살펴보겠습니다.</p>
 
-<h3 id="그리드의_정의">그리드의 정의</h3>
+<h3 id="Defining_a_grid">그리드의 정의</h3>
 
 <p>본격적인 출발에 앞서 텍스트 편집기 및 브라우저 상에서 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">시작 파일</a>을 다운로드하고 엽니다(<a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">여기에서 라이브로 볼 수도 있습니다</a>). 예를 들어, 당신은 일부 자식 항목이 있는 컨테이너 예제를 보게됩니다. 기본값으로 이들은 일반 대열로 표시되므로 상자들은 다른 대상 요소 바로 밑에 표시됩니다. 우리는 이 단원의 첫 번째 부분은 이 (시작) 파일을 가지고 작업할 것이며, 거기에 변경을 더해 그리드가 어떻게 동작하는지 확인하게 됩니다.</p>
 
@@ -65,9 +65,9 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>CSS 규칙에 제2 선언을 추가한 다음 페이지를 다시 로드하면 생성된 그리드의 각 셀 안으로 그리드 항목 무리가 하나씩 재배열되는 것이 확인될 것이다.</p>
 
-<div id="격자_1">
+<div id="Grid_1">
 <div class="hidden">
-<h6 id="간단한_그리드_예제">간단한 그리드 예제</h6>
+<h6 id="Simple_Grid_Example">간단한 그리드 예제</h6>
 
 <pre class="brush: css">body {
   width: 90%;
@@ -102,7 +102,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>{{ EmbedLiveSample('그리드_1', '100%', 400) }}</p>
 
-<h3 id="fr_단위를_포함한_가변_그리드">fr 단위를 포함한 가변 그리드</h3>
+<h3 id="Flexible_grids_with_the_fr_unit">fr 단위를 포함한 가변 그리드</h3>
 
 <p>길이와 백분율을 사용하여 그리드를 생성하는 것 외에도 <strong><code>fr</code></strong> 단위를 사용하여 그리드 행과 열을 가변적으로 조정할 수 있다. 동 단위는 그리드 컨테이너 내부에 사용 가능한 공간에서 한 개의 분할 부분과 같다.</p>
 
@@ -122,9 +122,9 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>첫 번째 트랙은 이제 사용 가능한 공간의 2fr을 얻고 다른 두 트랙은 1fr을 얻음으로써 첫 번째 트랙을 더 크게 만듭니다. <code>fr</code> 단위와 고정 길이 트랙을 혼합할 수 있습니다. 이러한 경우 고정 트랙들에 필요한 공간이 제외한 이후에 해당 공간이 다른 트랙에 분배됩니다.</p>
 
-<div id="격자_2">
+<div id="Grid_2">
 <div class="hidden">
-<h6 id="fr_단위를_포함하는_그리드_예제">fr 단위를 포함하는 그리드 예제</h6>
+<h6 id="Simple_Grid_Example_with_fr_units">fr 단위를 포함하는 그리드 예제</h6>
 
 <pre class="brush: css">body {
   width: 90%;
@@ -164,7 +164,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 <p><strong>참고</strong>: <code>fr</code> 단위는 <em>전체</em> 공간이 아닌 <em>이용 가능한</em> 공간을 분배한다. 따라서 당신의 트랙 중 하나가 자기 내부에 뭔가 큰 공간을 차지한다면 공유할 수 있는 여유 공간이 줄어들 것이다.</p>
 </div>
 
-<h3 id="트랙사이_간격">트랙사이 간격</h3>
+<h3 id="Gaps_between_tracks">트랙사이 간격</h3>
 
 <p>우리가 트랙사이 간격을 생성하려면 열 사이 간격에 대해선 {{cssxref("grid-column-gap")}} 속성을 사용하고, 행 사이 간격에 대해선 {{cssxref("grid-row-gap")}}를 사용하고, 단번에 둘 다 설정하려면 {{cssxref("grid-gap")}}를 사용한다.</p>
 
@@ -177,9 +177,9 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>이러한 간격은 길이 단위 또는 백분율이 될 수 있지만, <code>fr</code> 단위는 될 수 없습니다.</p>
 
-<div id="격자_3">
+<div id="Grid_3">
 <div class="hidden">
-<h6 id="fr_단위를_사용하는_간단한_그리드_예제">fr 단위를 사용하는 간단한 그리드 예제</h6>
+<h6 id="Simple_Grid_Example_with_fr_units_2">fr 단위를 사용하는 간단한 그리드 예제</h6>
 
 <pre class="brush: css">body {
   width: 90%;
@@ -228,7 +228,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
   gap: 20px;
 }</pre>
 
-<h3 id="트랙_목록의_반복">트랙 목록의 반복</h3>
+<h3 id="Repeating_track_listings">트랙 목록의 반복</h3>
 
 <p>반복 표기법을 사용하여 당신의 트랙 목록의 전체 또는 한 섹션을 반복할 수 있다. 트랙 목록을 다음 항목으로 변경하라.</p>
 
@@ -240,15 +240,15 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>이제 당신은 이전과 마찬가지로 3개의 1fr 트랙을 얻을 수 있다. 반복 함수에 전달되는 첫 번째 값은 당신이 원하는 트랙 목록의 반복 횟수가 되며, 두 번째 값은 하나의 트랙 목록이며, 이는 당신이 반복되길 원하는 일개 트랙 또는 여러 트랙이 될 수도 있다.</p>
 
-<h3 id="암시적_그리드와_명시적_그리드">암시적 그리드와 명시적 그리드</h3>
+<h3 id="The_implicit_and_explicit_grid">암시적 그리드와 명시적 그리드</h3>
 
 <p>지금까지는 열 트랙만 지정했지만, 콘텐츠를 저장하기 위해 행도 만들어지고 있다. 이것은 명시적 그리드 대항 암시적 그리드의 한 예다. 명시적 그리드는 당신이 <code>grid-template-columns</code> 또는 <code>grid-template-rows</code>를 사용하여 생성하는 것을 말한다. 암시적 그리드가 생성되는 시점은 콘텐츠가 해당 그리드 외부에 배치될 때이다. 예를 들어 콘텐츠가 행렬 내부에 진입할 시점이 된다. 명시적 및 암시적 그리드는 가변상자의 주축 및 교차축과 유사하다.</p>
 
 <p>기본값으로 암시적 그리드 상에 생성된 트랙은 <code>auto</code> 크기로 되며, 이는 일반적으로 콘텐츠를 알맞게 들여놓기에 충분히 크다는 것을 의미한다. 당신이 암시적 그리드 트랙에 크기를 지정하려면 {{cssxref("grid-auto-rows")}}와 {{cssxref("grid-auto-columns")}} 속성을 사용할 수 있다. 당신의 작업 CSS에 <code>100px</code>값을 <code>grid-auto-rows</code>에 추가하게 되면 생성된 행이 이제 100 픽셀 높이가 되는 걸 보게 된다.</p>
 
-<div id="격자_4">
+<div id="Grid_4">
 <div class="hidden">
-<h6 id="fr_단위를_사용하는_간단한_그리드_예제_2">fr 단위를 사용하는 간단한 그리드 예제</h6>
+<h6 id="Simple_Grid_Example_with_fr_units_3">fr 단위를 사용하는 간단한 그리드 예제</h6>
 
 <pre class="brush: css">body {
   width: 90%;
@@ -286,7 +286,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>{{ EmbedLiveSample('그리드_4', '100%', 400) }}</p>
 
-<h3 id="minmax_함수">minmax() 함수</h3>
+<h3 id="The_minmax_function">minmax() 함수</h3>
 
 <p>100픽셀 높이의 트랙은 100픽셀 이상의 트랙에 콘텐츠를 추가할 경우 별로 유용하지 않을 것이다. 그 경우 오버플로를 야기하니 말이다. <em>적어도</em> 100픽셀 높이의 트랙이 있고, 거기에 더 많은 콘텐츠가 들어가더라도 여전히 확장될 수 있다면 더 나을 수 있다. 웹에 관한 상당히 기본적인 사실은 어떤 것의 높이가 앞으로 얼마나 커질지 결코 모른다는 점이다. 추가 내용 또는 더 큰 글꼴 크기는 모든 면에서 픽셀 크기의 완전성을 추구하는 디자인의 경우 문제를 일으킬 수 있다.</p>
 
@@ -301,15 +301,15 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>추가 콘텐츠를 추가하면 트랙이 확장되어 콘텐츠가 들어맞게 트랙이 확대되는 걸 보게될 겁니다. 정확히 행을 따라 확장이 일어난다는 점에 유의하십시오.</p>
 
-<h3 id="들어맞을_때까지_열_생성">들어맞을 때까지 열 생성</h3>
+<h3 id="As_many_columns_as_will_fit">들어맞을 때까지 열 생성</h3>
 
 <p>우리는 트랙 목록, 반복 표기법, <code>minmax()</code>등에 대해 우리가 배운 몇 가지를 결합하여 유용한 패턴을 만들 수 있다. 때로는 그리드 컨테이너에 들여놓기할 때 최대한 많은 열을 생성하라고 그리드에 요청할 수 있으면 도움이 된다. 우리는 그렇게 하려면 <code>repeat()</code> 표기법을 사용하여 <code>grid-template-columns</code>의 값을 설정하면 되지만, 숫자로 전달할 게 아니라 키워드 <code>auto-fill</code>을 사용했다. 동 함수의 두 번째 매개 변수의 경우 최소값은 우리가 갖고 싶은 최소 트랙 크기와 같고 최대값은 1fr이다.</p>
 
 <p>이를 당신의 파일에서 당장 시험해려면 아래 CSS를 사용하십시요:</p>
 
-<div id="격자_5">
+<div id="Grid_5">
 <div class="hidden">
-<h6 id="들어맞을_때까지_열_생성_2">들어맞을 때까지 열 생성</h6>
+<h6 id="As_many_columns_as_will_fit_2">들어맞을 때까지 열 생성</h6>
 
 <pre class="brush: css">body {
   width: 90%;
@@ -349,7 +349,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>이것이 작동하는 까닭은 그리드가 그리드 컨테이너에 들어갈 수 있는 200픽셀의 열을 최대한 많이 만들고, 그 뒤 전체 열 사이 남은 공간이 얼마가 돼건 공유하기 때문이다. 최대치 1fr이며, 이미 알고 있듯이 트랙 사이 공간을 고르게 분배한다.</p>
 
-<h2 id="라인_기반_배치">라인 기반 배치</h2>
+<h2 id="based_placement">라인 기반 배치</h2>
 
 <p>이제 우리는 그리드를 만드는 것에서 그리드에 사물을 배치하는 것으로 넘어간다. 우리의 그리드에는 항상 라인이 있으며, 이 라인은 1에서 시작하며, 문서의 쓰기 모드와 관련이 있다. 따라서 영어에서는 열 라인 1은 그리드의 왼쪽에 위치하고 행 라인 1은 맨 위에 있습니다. 아랍어 열 라인 1은 아랍어가 오른쪽에서 왼쪽으로 쓰여지기 때문에 오른쪽에 놓이게 됩니다.</p>
 
@@ -395,9 +395,9 @@ footer {
   grid-row: 3;
 }</pre>
 
-<div id="격자_6">
+<div id="Grid_6">
 <div class="hidden">
-<h6 id="라인_기반_배치_2">라인 기반 배치</h6>
+<h6 id="based_placement_2">라인 기반 배치</h6>
 
 <pre class="brush: css">                body {
                     width: 90%;
@@ -467,7 +467,7 @@ aside {
 <p><strong>참고</strong>: 마지막 열 또는 행 라인을 상대로 <code>-1</code> 값을 사용할 수 있으며, 음수값을 사용하여 끝에서 안쪽으로 카운트할 수도 있습니다. 그러나 이 값은 명시적 그리드에만 통합니다. <code>-1</code> 값은 암시적 그리드의 마지막 라인에 적용하지 못합니다.</p>
 </div>
 
-<h2 id="grid-template-areas로_위치잡기">grid-template-areas로 위치잡기</h2>
+<h2 id="Positioning_with_grid-template-areas">grid-template-areas로 위치잡기</h2>
 
 <p>그리드에 항목을 배치하는 다른 방식은 {{cssxref("grid-template-areas")}} 속성을 사용하여 당신의 디자인에 딸린 다양한 요소에 이름을 지정하는 것입니다.</p>
 
@@ -501,9 +501,9 @@ footer {
 
 <p>페이지를 새로고침하면, 우리가 어떤 라인 번호를 사용할 필요없이 방금 전과 같이 항목이 배치되었음을 알 수 있습니다!</p>
 
-<div id="격자_7">
+<div id="Grid_7">
 <div class="hidden">
-<h6 id="라인_기반_배치_3">라인 기반 배치</h6>
+<h6 id="based_placement_3">라인 기반 배치</h6>
 
 <pre class="brush: css">body {
   width: 90%;
@@ -581,7 +581,7 @@ footer {
 
 <p>우리의 레이아웃을 마음대로 부릴 수 있습니다. 예를 들어, 콘텐츠와 사이드바 아래에만 위치하는 바닥글을 맡바닥까지 확대 점유하도록 변경할 수 있다. 이것은 CSS에서 정확히 무슨 일이 일어나고 있는지 있는 그대로 명백하게 레이아웃을 설명하는 매우 멋진 방법입니다.</p>
 
-<h2 id="CSS_그리드_그리드_프레임워크">CSS 그리드, 그리드 프레임워크</h2>
+<h2 id="A_CSS_Grid_grid_framework">CSS 그리드, 그리드 프레임워크</h2>
 
 <p>그리드 "프레임워크"는 대략 12 또는 16개의 열 그리드를 기반으로 하는 경향이 있으며, CSS 그리드도 포함하므로, 그러한 프레임워크를 발휘하기 위해 제 3의 타사 도구가 필요하지 않다. 이미 CSS 규격에 포함되어 있기 때문이다.</p>
 
@@ -607,9 +607,9 @@ footer {
   grid-row: 3;
 }</pre>
 
-<div id="격자_8">
+<div id="Grid_8">
 <div class="hidden">
-<h6 id="CSS_그리드_그리드_시스템">CSS_그리드_그리드_시스템</h6>
+<h6 id="A_CSS_Grid_Grid_System">CSS_그리드_그리드_시스템</h6>
 
 <pre class="brush: css">body {
   width: 90%;
@@ -680,11 +680,11 @@ aside {
 
 <p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p>
 
-<h2 id="요약정리">요약정리</h2>
+<h2 id="Summary">요약정리</h2>
 
 <p>이 개요에서 우리는 CSS 그리드 레이아웃의 주요 특징을 둘러 보았습니다. 당신의 디자인 상에 사용할 수 있도록 합시다. CSS 규격에 대해 더 자세히 살펴보려면 그리드 레이아웃에 대한 안내서를 참조하십시오. 아래를 보면 찾아 볼 수 있습니다.</p>
 
-<h2 id="참조_항목">참조 항목</h2>
+<h2 id="See_also">참조 항목</h2>
 
 <ul>
  <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS_그리드_안내서</a></li>
@@ -693,7 +693,7 @@ aside {
 
 <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>
 
-<h2 id="이번_단위에는">이번 단위에는</h2>
+<h2 id="In_this_module">이번 단위에는</h2>
 
 <ul>
  <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li>
-- 
cgit v1.2.3-54-g00ecf