---
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>