크롬에서 요소 검사하는 방법

PDF 다운로드
공동 작성자 Luigi Oppido

PDF 다운로드

이 글은 컴퓨터를 사용하여 구글 크롬에서 어느 웹 페이지든지 시각적 요소의 HTML 소스 코드를 검사하는 방법을 알려준다.

단계

PDF 다운로드
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/32\/Inspect-Element-on-Chrome-Step-1.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/32\/Inspect-Element-on-Chrome-Step-1.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    크롬 아이콘은 가운데 파란색 점이 있고 여러색이 들어간 공 모양이다. 맥에서는 어플리케이션 폴더에서 찾을 수 있고, 윈도우에서는 시작 메뉴에서 찾을 수 있다.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Inspect-Element-on-Chrome-Step-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Inspect-Element-on-Chrome-Step-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    브라우저 창 오른쪽 상단의 주소창 옆에 있는 버튼이다. 누르면 드롭다운 메뉴가 뜬다.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c4\/Inspect-Element-on-Chrome-Step-3.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c4\/Inspect-Element-on-Chrome-Step-3.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    그러면 밑에 메뉴가 뜬다.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a8\/Inspect-Element-on-Chrome-Step-4.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a8\/Inspect-Element-on-Chrome-Step-4.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-4.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    그러면 브라우저 창 오른쪽에 검사창이 뜬다.
    • 키보드 단축키로 검사창을 열수도 있다. 맥에서는 ⌥ Option + ⌘ Cmd + I , 윈도우에서는 Ctrl + Alt + I 를 누른다.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/Inspect-Element-on-Chrome-Step-5.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/Inspect-Element-on-Chrome-Step-5.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-5.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    요소나 검사창에 써있는 줄에 마우스를 가져다 대면 웹 페이지에 선택된 요소가 하이라이트 표시된다.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/Inspect-Element-on-Chrome-Step-6.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/Inspect-Element-on-Chrome-Step-6.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-6.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    오른쪽 클릭하면 나오는 메뉴가 드롭다운 박스로 뜬다.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0a\/Inspect-Element-on-Chrome-Step-7.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0a\/Inspect-Element-on-Chrome-Step-7.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-7.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    그러면 선택된 요소로 검사창이 움직이고 해당되는 소스 코드가 하이라이트로 표시된다.
    • 검사창을 일부러 열지 않아도 된다. 오른쪽 버튼을 눌러 나오는 메뉴에서 검사하기 를 누르면 검사창이 열린다.
    광고

관련 위키하우

유튜브 비디오 다운받는 방법
PDF 번역하는 방법
와이파이 비밀번호 변경하는 법
특정 웹사이트가 안 열릴 때 해결하는 법
마인크래프트 스킨을 변경하는 방법
내 컴퓨터의 IP 주소 찾는 법
디스코드에서 친구를 추가하는 방법
유튜브 동영상 다운로드하는 7가지 방법
스포티파이에서 음악 다운받는 법
인스타그램 팔로워 차단 및 차단 해제 방법
영화 다운 받는 방법
구글 크롬을 기본 브라우저로 설정하는 방법
인스타그램 사용하는 방법
공유기 두 대 연결하는 법
광고

이 위키하우에 대하여

다른 언어
이 문서는 9,103 번 조회 되었습니다.

이 글이 도움이 되었나요?

광고