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

2 files changed, 47 insertions, 47 deletions

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>
diff --git a/files/ko/learn/javascript/first_steps/what_is_javascript/index.html b/files/ko/learn/javascript/first_steps/what_is_javascript/index.html
index e9198dd1d3..c980bbf699 100644
--- a/files/ko/learn/javascript/first_steps/what_is_javascript/index.html
+++ b/files/ko/learn/javascript/first_steps/what_is_javascript/index.html
@@ -32,7 +32,7 @@ translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
  </tbody>
 </table>
 
-<h2 id="둘러보기">둘러보기</h2>
+<h2 id="A_high-level_definition">둘러보기</h2>
 
 <p>자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어입입니다. 자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 세번째 층이라고 볼 수 있습니다. 다른 두 층(HTML과 CSS)에 대한 보다 자세한 정보는 학습 영역의 다른 부분에서 찾아 볼 수 있습니다.</p>
 
@@ -87,7 +87,7 @@ function updateName() {
 
 <p>자바스크립트는 보다 더 많은 일들을 할 수 있습니다. 이제 더 자세한 내용을 살펴봅시다!</p>
 
-<h2 id="그래서_진짜_어떤_일을_할_수_있나요">그래서, 진짜 어떤 일을 할 수 있나요?</h2>
+<h2 id="So_what_can_it_really_do">그래서, 진짜 어떤 일을 할 수 있나요?</h2>
 
 <p>자바스크립트 언어의 핵심은 다음과 같은 일들을 할 수 있게하는 프로그래밍 기능들로 구성되어 있습니다:</p>
 
@@ -132,7 +132,7 @@ function updateName() {
 
 <p>물론 이것말고도 엄청나게 다양한 API들이 존재합니다!  하지만, 이 수업을 듣고 Facebook, Google Maps, Instagram등을 만들 수는 없으니 흥분하지는 말길 바랍니다. 이것보다 우리는 먼저 기본적인 것에 대해 배울 것이고 이것이 곧 이 수업을 진행하는 목적입니다. 자 시작해봅시다!</p>
 
-<h2 id="웹_페이지에서_JavaScript는_어떤_일을_하나요">웹 페이지에서 JavaScript는 어떤 일을 하나요?</h2>
+<h2 id="What_is_JavaScript_doing_on_your_page">웹 페이지에서 JavaScript는 어떤 일을 하나요?</h2>
 
 <p>여기서 몇가지 코드를 실제로 살펴보고, 페이지에서 자바스크립트가 언제 어떻게 작동하는지 알아 볼 것입니다.</p>
 
@@ -144,7 +144,7 @@ function updateName() {
 
 <p>동적으로 사용자 인터페이스를 업데이트하는 자바스크립트의 사용은 Document Object Model API를 통해 HTML과 CSS를 수정하는 것으로 좋은 현상입니다. 만약 자바 스크립트가 HTML과 CSS 전에 실행되었다면 문제가 분명 발생할 것입니다.</p>
 
-<h3 id="브라우저_보안성">브라우저 보안성</h3>
+<h3 id="Browser_security">브라우저 보안성</h3>
 
 <p>각각의 브라우저 탭들은 코드가 실행되는 개별적인 구성(이러한 것은 "실행 환경"이라고 지칭한다)입니다. 이는 각 탭의 대부분의 경우는 완전히 독립적이고, 하나의 탭의 코드는 다른 탭이나 웹사이트에 직접적으로 영향을 줄 수 없다는 의미입니다 . 이는 보안성에 좋은 방법입니다. 만약 이러한 부분이 없다면, 해커들이 다른 웹사이트로 부터 정보를 가로채는 등 악랄한 짓들을 할 수 있습니다.</p>
 
@@ -152,7 +152,7 @@ function updateName() {
 <p><strong>Note</strong>: 물론 코드나 정보를 동떨어진 웹사이트나 탭으로 전송할 수 있는 안전한 방식이 존재합니다. 하지만 지금 과정과는 거리가 멀기 때문에 여기서는 다루지 않도록 하겠습니다.</p>
 </div>
 
-<h3 id="자바스크립트_실행_순서">자바스크립트 실행 순서</h3>
+<h3 id="JavaScript_running_order">자바스크립트 실행 순서</h3>
 
 <p>브라우저에서 자바스크립트를 만났을 때 일반적으로는 위에서 아래 순서대로 실행됩니다. 이는 순서에 주의해서 코드를 작성해야한다는 의미입니다. 예를 들어, 아래의 첫번째 예재를 통해 자바스크립트 블록을 반환해봅시다:</p>
 
@@ -177,7 +177,7 @@ function updateName() {
 <p><strong>Note</strong>: 이는 매우 일반적인 에러이기 때문에, 프로그램을 실행할 때 코드 상에서 사용되는 객체에 대해 주의할 필요가 있습니다.</p>
 </div>
 
-<h3 id="해석형_언어와_컴파일러형_언어">해석형 언어와 컴파일러형 언어</h3>
+<h3 id="Interpreted_versus_compiled_code">해석형 언어와 컴파일러형 언어</h3>
 
 <p>프로그래밍을 하는 입장에서 인터프리트와 컴파일이라는 개념에 대해서는 들어보았을 것입니다. 자바스크립트는 해석형 언어입니다. 따라서 코드가 위에서 아래로 순차적으로 실행되고 그 즉시 결과가 반환됩니다. 브라우저에서 동작하기 전에 다른 방식으로 코드를 변환할 필요가 없습니다.</p>
 
@@ -185,23 +185,23 @@ function updateName() {
 
 <p>이 둘의 관점은 각각의 장점을 가지고 있으니 다음장 부터 한번 알아봅시다.</p>
 
-<h3 id="서버측_코드와_클라이언트측_코드">서버측 코드와 클라이언트측 코드</h3>
+<h3 id="Server-side_versus_client-side_code">서버측 코드와 클라이언트측 코드</h3>
 
 <p>웹 개발 맥락에서 서버측과 클라이언트측 코드에 대해 들어보았을 것입니다. 클라이언트측 코드란 사용자의 컴퓨터에서 작동되는 코드입니다. 만약 웹페이지를 보고자 한다면, 클라이언트측 코드가 사용자의 컴퓨터로 다운로드되고 브라우저가 이를 표시합니다. 이러한 자바스크립트 모듈을 정확히는 클라이언트측 자바스크립트라고 합니다.</p>
 
 <p>반면 서버측 코드는 서버에서 작동되고, 그 결과가 사용자의 브라우저에 넘어가 표시됩니다. PHP, Python, Ruby, ASP.NET등이 서버측 웹 언어의 대표적 예라고 볼 수 있습니다. 물론 자바스크립트도 가능합니다! 유명한 Node.js란 환경을 통해 서버측에서도 자바스크립트가 사용 가능합니다. <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a>에서 서버측 자바스크립트에 대해 더 알 수 있습니다.</p>
 
-<h3 id="동적_VS_정적_코드">동적 VS 정적 코드</h3>
+<h3 id="Dynamic_versus_static_code">동적 VS 정적 코드</h3>
 
 <p>"동적"이라는 말은 클라이언트측 서버측 언어 모두를 가르킵니다. 이는 각기 다른 상황에서 적절한 정보가 보이고, 컨텐츠를 웹페이지나 앱 상에 계속적으로 노출시키는 역할을 합니다. 서버측 코드는 데이터베이스로 부터 데이터를 던지는 등 동적으로 새로운 컨텐츠들을 만듭니다. 반면에, 클라이언트측 자바스크립트는 새로운 HTML 표를 만들어 서버에서 요청한 데이터를 뿌려 사용자에게 보이는 등 동적으로 브라우저 안에서 작동됩니다. 이 둘 사이는 서로 미묘한 차이가 있지만, 서로 연관되어 있고 서버측 클라이언트측의 관계와 접근에 대해 알 필요가 있습니다.</p>
 
 <p>동적으로 바뀌지 않는 페이지를 "정적"페이지라고 합니다. (항상 같은 콘텐츠를 보여줍니다.)</p>
 
-<h2 id="웹_페이지에_JavaScript를_어떻게_넣나요">웹 페이지에 JavaScript를 어떻게 넣나요?</h2>
+<h2 id="How_do_you_add_JavaScript_to_your_page">웹 페이지에 JavaScript를 어떻게 넣나요?</h2>
 
 <p>자바스크립트는 CSS와 같은 방식으로 HTML 페이지에 적용됩니다. CSS는 외부의 스타일시트를 적용하기 위해 link 요소를 사용하거나 내부의 스타일시트를 적용하기 위해 style 요소를 사용하는 반면,자바스크립트는 HTML상에서 오직 script 태크만으로 사용이 가능합니다. 어떻게 작동되는지 한번 살펴봅시다.</p>
 
-<h3 id="HTML_내부의_자바스크립트">HTML 내부의 자바스크립트</h3>
+<h3 id="Internal_JavaScript">HTML 내부의 자바스크립트</h3>
 
 <ol>
  <li>먼저, 예제로 주어진 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>파일을 저장합니다.</li>
@@ -247,7 +247,7 @@ function updateName() {
 <p><strong>Note</strong>: 깃허브에서도 이 코드를 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p>
 </div>
 
-<h3 id="외부의_자바스크립트">외부의 자바스크립트</h3>
+<h3 id="External_JavaScript">외부의 자바스크립트</h3>
 
 <p>만약에 외부 파일로 자바스크립트를 위치시키고 싶다면 어떻게 할까요? 이에 대해서 알아봅니다.</p>
 
@@ -277,7 +277,7 @@ for(let i = 0; i &lt; buttons.length ; i++) {
 <p><strong>Note</strong>: 깃허브에서 이 버전을 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> 그리고 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p>
 </div>
 
-<h3 id="인라인_JavaScript_처리기">인라인 JavaScript 처리기</h3>
+<h3 id="Inline_JavaScript_handlers">인라인 JavaScript 처리기</h3>
 
 <p>실제 HTML 속에 포함된 자바스크립트코드를 함께 쓸 수 있습니다. 이는 다음과 같으니 참고해보세요:</p>
 
@@ -314,7 +314,7 @@ for (let i = 0; i &lt; buttons.length ; i++) {
 <p><strong>Note</strong>:  <code>apply-javascript.html 수정을 해보고 버튼을 한 번 추가해 보세요.</code> 실행해보면 버튼 하나하나 클릭할 때 마다 글이 보일 것입니다. 꽤 깔끔하지 않은가요?</p>
 </div>
 
-<h3 id="스크립트의_로딩_방법">스크립트의 로딩 방법</h3>
+<h3 id="Script_loading_strategies">스크립트의 로딩 방법</h3>
 
 <p> 작성된 스크립트를 브라우저가 적절한 때에 로딩하는것에 대해 몇가지 이슈가 있습니다. 중요한 것은 모든 HTML 요소는 순서대로 페이지에 로드된다는 것입니다. 만약 당신이 자바스크립트를 이용해 HTML 요소를 조작할 경우(정확하게는 DOM), 자바스크립트 코드가 조작 대상인 HTML 요소보다 먼저 실행된다면 조작할 요소가 존재하지 않는 상태이기 때문에 제대로 동작하지 않을 것입니다.</p>
 
@@ -344,7 +344,7 @@ for (let i = 0; i &lt; buttons.length ; i++) {
 <p><strong>Note</strong>: 자바스크립트의 비동기 개념은 이해하는데 시간이 오래 걸리기 때문에, 지금 이해되지 않는다면 현재 단계에선 외부 스크립트 방식만 사용하고 넘어가도 무방합니다.</p>
 </div>
 
-<h4 id="async_defer">async &amp; defer</h4>
+<h4 id="async_and_defer">async &amp; defer</h4>
 
 <p>더 깊게 들어가보면 이러한 코드문제를 해결하기 위한 방법은 실제로 두가지가 있습니다. — <code>async</code> 와<code>defer</code> 입니다. 두 가지의 차이를 봅시다.</p>
 
@@ -377,7 +377,7 @@ for (let i = 0; i &lt; buttons.length ; i++) {
  <li>먄약 sciprt들이 의존하고 하나의 스크립트가 파싱될때까지 기다려야 한다면, <code>defer</code> 를 사용하고 각각의 <code>&lt;script&gt;</code> 태그들을 실행되길 원하는 순서대로 작성합니다.</li>
 </ul>
 
-<h2 id="주석">주석</h2>
+<h2 id="Comments">주석</h2>
 
 <p>HTML과 CSS와 같이, 자바스크립트에서도 주석문의 사용이 가능합니다. 주석문은 브라우저 실행때는 무시되어 넘어가고 다른 개발자로 하여금 어떻게 구성되고 작동되는지 설명해주는 역할을 합니다(물론 자신의 훗날 코드를 다시 보았을 때 빨리 기억하고, 이해할 수 있게끔 도와주기도 합니다.). 주석문은 매우 유용하고 코딩시 자주 사용됩니다(특히 큰 프로젝트에서). 주석문에는 두가지 종류가 있습니다:</p>
 
@@ -416,7 +416,7 @@ for (let i = 0; i &lt; buttons.length ; i++) {
   buttons[i].addEventListener('click', createParagraph);
 }</pre>
 
-<h2 id="정리">정리</h2>
+<h2 id="Summary">정리</h2>
 
 <p>지금까지 우리는 자바스크립트의 첫걸음을 떼었습니다. 여기서 자바스크립트를 왜 사용하고 어떻게 사용하는지에 대한 방법들에 대한 기초적인 부분을 배웠습니다. 여러 예제 코드를 봄으로써, 웹사이트와 다른 곳에서의 코드상 자바스크립트가 어떻게 구성되어있는지 배웠습니다.</p>