[ko] Work done for 'Image gallery' article. (#1146)

* Work done for 'Image gallery' article.

* Update translation

of a sentence

Co-authored-by: hochan Lee <hochan049@gmail.com>

Co-authored-by: hochan Lee <hochan049@gmail.com>

2 files changed, 157 insertions, 0 deletions

diff --git a/files/ko/learn/javascript/building_blocks/image_gallery/gallery.png b/files/ko/learn/javascript/building_blocks/image_gallery/gallery.png
new file mode 100644
index 0000000000..a61c178f49
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/image_gallery/gallery.png
diff --git a/files/ko/learn/javascript/building_blocks/image_gallery/index.html b/files/ko/learn/javascript/building_blocks/image_gallery/index.html
new file mode 100644
index 0000000000..5e9e8f997b
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/image_gallery/index.html
@@ -0,0 +1,157 @@
+---
+title: 이미지 갤러리
+slug: Learn/JavaScript/Building_blocks/Image_gallery
+tags:
+  - Assessment
+  - Beginner
+  - CodingScripting
+  - Conditionals
+  - Event Handler
+  - JavaScript
+  - Learn
+  - Loops
+  - events
+  - l10n:priority
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">이제 우리는 JavaScript의 핵심적인 구성 요소를 살펴보았으므로, 우리는 반복문, 함수, 조건문, 그리고 이벤트에 대한 당신의 이해를 시험할 것입니다. 많은 웹사이트들에서 보게 될 꽤 흔한 아이템인 — JavaScript를 이용하는 이미지 갤러리를 만듦으로써 말이죠.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">필요한 사전 지식:</th>
+   <td>이 평가를 시도하기 전에 당신은 이 모듈의 모든 문서를 독파해야만 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>JavaScript 반복문, 함수, 조건문, 그리고 이벤트에 대한 이해 시험하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Starting_point">시작점</h2>
+
+<p>이 평가를 시작하기 위해, 다음의 링크로 가서 예제에 대한 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">ZIP 파일</a>을 다운로드하고, 압축을 해제한 후 진행하세요.</p>
+
+<p>그 대신에, <a class="external external-icon" href="https://jsbin.com/">JSBin</a> 나 <a href="https://glitch.com/">Glitch</a> 같은 사이트를 이용할 수 있습니다. HTML, CSS 그리고 JavaScript를 이 온라인 에디터 중 하나에 붙여넣기할 수 있습니다. 만약 온라인 에디터가 분리된 JavaScript/CSS 패널을 가지고 있지 않다면, 자유롭게 HTML 페이지 내부의 인라인 <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> 요소에 넣으세요.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 보세요.</p>
+</div>
+
+<h2 id="Project_brief">프로젝트 개요</h2>
+
+<p>당신에게 몇몇 HTML, CSS 그리고 이미지 에셋(asset) 그리고 몇 줄의 JavaScript 코드가 제공되었습니다; 당신은 이것을 작동하는 프로그램으로 만들기 위해 필수적인 JavaScript를 작성할 필요가 있습니다. HTML body는 다음과 같습니다:</p>
+
+<pre class="brush: html">&lt;h1&gt;Image gallery example&lt;/h1&gt;
+
+&lt;div class="full-img"&gt;
+  &lt;img class="displayed-img" src="images/pic1.jpg"&gt;
+  &lt;div class="overlay"&gt;&lt;/div&gt;
+  &lt;button class="dark"&gt;Darken&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="thumb-bar"&gt;
+
+&lt;/div&gt;</pre>
+
+<p>예제는 다음과 같습니다:</p>
+
+<p><img alt="" src="gallery.png" style="display: block; margin: 0 auto;"></p>
+
+<p>이 예제의 가장 흥미로운 부분은 CSS 파일입니다:</p>
+
+<ul>
+ <li>이것은 <code>full-img &lt;div&gt;</code> 내부의 세 요소를 절대적으로 위치시킵니다 — 전체 크기의 이미지가 표시되는 <code>&lt;img&gt;</code>, <code>&lt;img&gt;</code>와 같은 크기이고 이것 바로 위에 놓여지는 비어있는 <code>&lt;div&gt;</code> (반투명한 배경색을 통해 이미지에 어두워지는 효과를 적용하기 위해 쓰입니다), 그리고 어두워지는 효과를 제어하기 위해 쓰이는 <code>&lt;button&gt;</code>.</li>
+ <li>이것은 <code>thumb-bar &lt;div&gt;</code> (소위 "섬네일" 이미지) 내부의 이미지들의 폭을 20%로 설정하고, 사진들이 한 줄에서 서로의 다음에 오도록 왼쪽으로 부유시킵니다.</li>
+</ul>
+
+<p>당신의 JavaScript는 다음을 하기를 필요로 합니다:</p>
+
+<ul>
+ <li>모든 이미지를 순회하고, 각각에 대해 <code>&lt;img&gt;</code> 요소를 페이지에 그 이미지를 끼워 넣는 <code>thumb-bar &lt;div&gt;</code> 내부에 삽입하기.</li>
+ <li><code>onclick</code> 핸들러를 <code>thumb-bar &lt;div&gt;</code> 내부의 각 <code>&lt;img&gt;</code>에 부착해 그것들이 클릭되었을 때, 해당하는 이미지가 <code>displayed-img &lt;img&gt;</code> 요소에 표시되도록 하기.</li>
+ <li><code>onclick</code> 핸들러를 <code>&lt;button&gt;</code>에 부착해 이것이 클릭되었을 때, 어두워지는 효과가 전체 크기 이미지에 적용되도록 하기. 이 버튼이 다시 클릭되었을 때, 어두워지는 효과는 다시 사라집니다.</li>
+</ul>
+
+<p>더 많은 생각을 제공 받으려면, <a href="https://mdn.github.io/learning-area/javascript/building-blocks/gallery/">완성된 예제</a>를 살펴보세요. (소스 코드 훔쳐보기 없기!)</p>
+
+<h2 id="Steps_to_complete">완료해야할 단계</h2>
+
+<p>다음의 섹션들은 무엇을 할 필요가 있는지 설명합니다.</p>
+
+<h3 id="Looping_through_the_images">이미지 순회하기</h3>
+
+<p>우리는 이미 <code>thumbBar</code> 상수 내부에 <code>thumb-bar &lt;div&gt;</code>에 대한 참조를 저장하고, 새로운 <code>&lt;img&gt;</code> 요소를 생성하고, 그것의 <code>src</code> 어트리뷰트를 플레이스홀더 값 <code>xxx</code>로 설정하고, 그리고 <code>thumbBar</code> 내부에 이 새로운 <code>&lt;img&gt;</code> 요소를 추가하는 코드를 제공했습니다.</p>
+
+<p>당신은 다음을 할 필요가 있습니다:</p>
+
+<ol>
+ <li>5개의 모든 이미지를 순회하는 반복문 내부의 "Looping through images" 주석 아래에 코드 섹션 추가하기 — 당신은 그저 5개의 숫자를 순회할 필요가 있는데, 각 숫자는 각각의 이미지를 나타냅니다.</li>
+ <li>각각의 반복에서, <code>xxx</code> 플레이스홀더 값을 각 경우의 이미지 경로와 동일한 문자열으로 대체하세요. 우리는 <code>src</code> 어트리뷰트의 값을 각 경우에서 이 값으로 설정하고 있습니다. 각 경우에서, 이미지는 이미지 디렉토리 내부에 있고 그것의 이름은 <code>pic1.jpg</code>, <code>pic2.jpg</code> 등등이라는 것을 기억해 두세요.</li>
+</ol>
+
+<h3 id="Adding_an_onclick_handler_to_each_thumbnail_image">onclick 핸들러를 각 섬네일 이미지에 추가하기</h3>
+
+<p>각각의 반복에서, 당신은 <code>onclick</code> 핸들러를 현재의 <code>newImage</code>에 추가할 필요가 있습니다 — 이 핸들러는 현재 이미지의 <code>src</code> 어트리뷰트의 값을 찾아야만 합니다. <code>displayed-img &lt;img&gt;</code>의 <code>src</code> 어트리뷰트 값을 매개변수로서 전달된 <code>src</code> 값으로 설정하세요.</p>
+
+<p>그 대신에, 당신은 섬네일 바에 하나의 이벤트 리스너를 추가할 수 있습니다.</p>
+
+<h3 id="Writing_a_handler_that_runs_the_darkenlighten_button">어두워지게/밝게 하는 버튼을 실행하는 핸들러 작성하기</h3>
+
+<p>우리의 어두워지게/밝게 하는 <code>&lt;button&gt;</code>은 가만히 있습니다 — 우리는 이미 <code>btn</code> 상수에 <code>&lt;button&gt;</code>에 대한 참조를 저장하는 코드 라인을 제공했습니다. 당신은 다음을 수행하는 <code>onclick</code>을 추가할 필요가 있습니다:</p>
+
+<ol>
+ <li><code>&lt;button&gt;</code>에 설정된 현재 클래스명을 확인 — 당신은 다시 이것을 <code>getAttribute()</code>를 사용함으로써 달성할 수 있습니다.</li>
+ <li>만약 클래스명이 <code>"dark"</code>라면, <code>&lt;button&gt;</code> 클래스를 <code>"light"</code>로 (<code><a href="/ko/docs/Web/API/Element/setAttribute">setAttribute()</a></code>를 사용하여), 이것의 텍스트 콘텐츠를 "Lighten"으로, 그리고 덮어씌운 <code>&lt;div&gt;</code>의 {{cssxref("background-color")}}를 <code>"rgba(0,0,0,0.5)"</code>로 변경.</li>
+ <li>만약 클래스명이 <code>"dark"</code>가 아니라면, <code>&lt;button&gt;</code> 클래스를 <code>"dark"</code>로, 이것의 텍스트 콘텐츠를 다시 "Darken"으로, 덮어씌운 <code>&lt;div&gt;</code>의 {{cssxref("background-color")}}를 <code>"rgba(0,0,0,0)"</code>로 변경.</li>
+</ol>
+
+<p>다음의 코드 라인은 위의 2와 3에서 규정된 변화 달성에 대한 기초를 제공합니다.</p>
+
+<pre class="brush: js">btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;</pre>
+
+<h2 id="Hints_and_tips">힌트와 팁</h2>
+
+<ul>
+ <li>당신은 어떤 방법으로도 HTML 또는 CSS를 수정할 필요가 없습니다.</li>
+</ul>
+
+<h2 id="Assessment_or_further_help">평가 혹은 추가적인 도움</h2>
+
+<p>만약 당신의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:</p>
+
+<ol>
+ <li>당신의 작업을 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 온라인에서 공유 가능한 에디터에 올리세요.</li>
+ <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 평가 및/또는 도움을 요청하는 글을 작성하세요. 당신의 글은 다음을 포함해야만 합니다:
+  <ul>
+   <li>"이미지 갤러리에 대한 평가 원함"과 같은 서술적인 제목.</li>
+   <li>당신이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명, 예를 들자면, 만약 당신이 막혀서 도움이 필요하거나, 평가를 원하거나.</li>
+   <li>(위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 당신이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 실천입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.</li>
+   <li>우리가 당신이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">이 모듈에서는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">판단을 만드세요 — 조건문</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 재사용 가능한 코드 블록</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">자신만의 함수 만들기</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수 반환 값</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">이벤트 입문</a></li>
+ <li><strong>이미지 갤러리</strong></li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 1355px; top: 3393px;">
+<div class="gtx-trans-icon"></div>
+</div>