initial commit

2 files changed, 152 insertions, 0 deletions

diff --git a/files/ko/tools/page_inspector/index.html b/files/ko/tools/page_inspector/index.html
new file mode 100644
index 0000000000..c98dd8d947
--- /dev/null
+++ b/files/ko/tools/page_inspector/index.html
@@ -0,0 +1,48 @@
+---
+title: 페이지 검사기
+slug: Tools/Page_Inspector
+translation_of: Tools/Page_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>페이지의 HTML 과 CSS 를 검사하고 수정하기 위해 페이지 검사기를 사용하라.</p>
+
+<p>파이어폭스의 로컬 복사본으로 로드된 페이지를 검사하거나 파이어폭스 운영체제 기기 혹은 안드로이드 파이어폭스 같은 원격 목표를 검사할 수 있다. 원격 목표물의 개발자 도구에 연결하는 법을 배우기 위해 <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>을 보라.</p>
+
+<hr>
+<h2 id="사용자_인터페이스_투어">사용자 인터페이스 투어</h2>
+
+<p>검사기를 둘러싼 자신만의 방법을 찾기 위해 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a> 이 있다.</p>
+
+<hr>
+<h2 id="방법">방법</h2>
+
+<p>어떤 것이 검사기로 작업 가능한 지 찾기 위해 다음의 방법 지침을 보라:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a> 검사기 열기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a> HTML 검사하고 수정하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a> 박스 모델 검사하고 수정하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a> 색상 검사하고 선택하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a> 페이지 내 요소의 위치 재정의하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a> 글꼴 보기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a> 변이 시각화하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a> 검사기 API 사용하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a> 요소 선택하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> CSS 검사하고 수정하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a> 이벤트 리스너 검사하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a> 애니메이션 작업하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a> CSS 필터 수정하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a> 배경 이미지 보기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a> 웹콘솔의 검사기 사용하기</li>
+</ul>
+</div>
+
+<hr>
+<h2 id="참고">참고</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts</a> 키보드 단축키</li>
+ <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a> 설정</li>
+</ul>
+</div>
diff --git a/files/ko/tools/page_inspector/ui_tour/index.html b/files/ko/tools/page_inspector/ui_tour/index.html
new file mode 100644
index 0000000000..7a7cfbb158
--- /dev/null
+++ b/files/ko/tools/page_inspector/ui_tour/index.html
@@ -0,0 +1,104 @@
+---
+title: UI 일주
+slug: Tools/Page_Inspector/UI_Tour
+translation_of: Tools/Page_Inspector/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><p>이 글은 페이지 검사기의 사용자 인터페이스에 대한 주요 부분의 간략한 설명이다.</p>
+
+<p>검사기 UI의 상위 3개 요소를 다룬다:</p>
+
+<ul>
+ <li>"요소 선택" 버튼</li>
+ <li>HTML 구역</li>
+ <li>CSS 구역</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13114/inspector-overview.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;">이 안내는 의도적으로 가능한 쩗게 유지된다. 다양한 검사기 사용법에 대한 상세안내로 가는 링크가 걸려 있다.</p>
+
+<h2 id="요소_선택_버튼">요소 선택 버튼</h2>
+
+<p>검사기가 현재 선택된 요소에 대한 자세한 정보를 준다. 요소 선택 버튼은 검사를 위해 요소를 선택할 수 있는 한 방법이다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13122/select-element.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;"></p>
+
+<p>실제 <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">main toolbox toolbar</a>의 부분이며, 검사기 뿐만 아니라 어떠한 도구로부터든 즉시 접근 가능하다는 것을 인지하라.</p>
+
+<p>한 요소를 선택하는 법을 배우기 위해 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">selecting an element</a> 에 대한 지침을 보라.</p>
+
+<h2 id="HTML_구역">HTML 구역</h2>
+
+<p>검사기가 두 개로 반나눠져 있다. 왼쪽 반은 HTML 구역이 차지하고 있다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13116/markup-in-context.png" style="display: block; height: 1754px; margin-left: auto; margin-right: auto; width: 932px;"></p>
+
+<p>HTML 구역의 구조에 대해 더 알기 위해, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examining and editing HTML</a> 에 대한 지침을 보라.</p>
+
+<h2 id="CSS_구역">CSS 구역</h2>
+
+<p>오른쪽 부분은 CSS 구역이 차지한다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13118/rules-in-context.png" style="display: block; height: 1778px; margin-left: auto; margin-right: auto; width: 932px;">CSS 구역은 5가지 화면으로 나뉜다:</p>
+
+<ul>
+ <li>Rules view 규칙 화면</li>
+ <li>Computed view 계산된 스타일 화면</li>
+ <li>Fonts view 글꼴 화면</li>
+ <li>Box Model view 박스 모델 화면</li>
+ <li>Animations view 애니메이션 화면</li>
+</ul>
+
+<p>다른 화면 간에 이동하기 위해 상단의 탭을 사용하라.</p>
+
+<h3 id="규칙_화면">규칙 화면</h3>
+
+<p>규칙 화면은 선택된 요소에 적용된 모든 규칙을 목록으로 나열한다. 가장 특이성이 높은 것에서 부터 가장 특이성이 떨어지는 것으로 정렬된다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13120/rules-view.png" style="display: block; height: 866px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> 를 보라.</p>
+
+<h3 id="계산된_스타일_화면">계산된 스타일 화면</h3>
+
+<p>계산된 스타일 화면은 선택된 요소의 계산 완료된 CSS 를 보여준다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13130/computed-view.png" style="display: block; height: 856px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> 를 보라.</p>
+
+<h3 id="글꼴_화면">글꼴 화면</h3>
+
+<div class="warning">
+<p>파이어폭스47 부터 글꼴 화면은 기본적으로 불가능해진다. 충분한 특성을 가진 다른 대체품을 작업중이다.</p>
+
+<p>그 동안 글꼴 화면을 보고자 한다면, <code>about:config </code>을 방문해서 <code>devtools.fontinspector.enabled 을</code> 찾아서 <code>true </code>로 설정하라.</p>
+</div>
+
+<p>글꼴 화면은 수정가능한 예제와 함께 페이지 내의 모든 글꼴을 보여준다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a> 를 보라.</p>
+
+<h3 id="박스_모델_화면">박스 모델 화면</h3>
+
+<p>박스 모델 화면은 선택된 요소의 박스 모델의 수정가능한 화면을 제공한다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13128/box-model-view.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a> 를 보라.</p>
+
+<h3 id="애니메이션_화면">애니메이션 화면</h3>
+
+<p>애니메이션 화면은 선택된 요소에 적용된 어떠한 애니메이션이든 상세 정보와 그들을 멈출 콘트롤러를 제공한다:</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13126/animations-view.png" style="display: block; height: 854px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a> 를 보라.</p>
+
+<h3 id="CSS_구역_보이게_하거나_가리기">CSS 구역 보이게 하거나 가리기</h3>
+
+<p>파이어폭스40 부터, CSS 구역을 보이게 하거나 가리는 사용하는 버튼을 툴바에서 볼 수 있다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13124/show-hide-css.png" style="display: block; height: 419px; margin-left: auto; margin-right: auto; width: 630px;"></p>