Mac, Windows, iPhone 및 iPad에서 요소를 검사하는 방법

개발자와 UI 디자이너는 요소 검사 기능을 사용하여 소스 코드를 변경하지 않고 온라인으로 웹 사이트를 수정합니다. 그러나 웹 개발 과정을 거치지 않고 요소를 검사하는 방법은 무엇입니까?

Inspect Element는 인기 있는 웹 브라우저와 함께 즉시 사용할 수 있는 편리한 개발자 도구입니다. 웹 사이트를 탐색하는 동안 몇 번의 클릭으로 도구를 배포하는 방법만 알면 됩니다.

웹사이트 레이아웃 변경, 텍스트 없는 스크린샷 찍기, 글꼴 변경, 숫자 수정 등과 같은 많은 마술을 할 수 있습니다.

요소를 쉽게 검사하는 방법을 배우려면 아래의 간결한 단계별 가이드를 찾으십시오.

요소 검사란 무엇입니까?

Inspect Element는 대부분의 웹 브라우저에서 사용할 수 있는 웹 개발 도구입니다. 방문 중인 모든 웹사이트의 프런트 엔드 소스 코드를 편집하는 데 사용할 수 있습니다.

변경 사항은 웹 브라우저 내부의 샌드박스 내에서 발생합니다. 따라서 실제 웹 사이트를 변경하지 않습니다. 또한 페이지를 새로 고치면 표면적인 변경 사항이 사라집니다.

이를 사용하는 몇 가지 창의적인 방법은 다음과 같습니다.

• 웹사이트에서 스크린샷을 찍어야 하는데 이미지의 텍스트가 문제가 됩니다. 요소 검사 도구를 사용하여 해당 텍스트를 삭제하십시오.
• New York Times나 Washington Post에 자신의 이름을 보여줌으로써 친구들에게 장난을 치고 싶습니다. 요소 검사가 이를 수행하는 가장 좋은 방법입니다.
• Inspect Element 도구를 사용하여 웹사이트에서 디버깅 코드를 실시간으로 적용하여 테스트합니다. 작동하는 경우 백엔드 소스 코드를 변경할 수 있습니다.
• 디지털 마케팅 담당자로서 이 강력한 웹 개발 도구를 사용하여 경쟁사의 키워드, SEO 제목, 메타 태그 등을 공개할 수 있습니다.

Windows에서 요소를 검사하는 방법

Windows에서 요소 검사 도구를 사용하는 것은 엄청나게 쉽습니다. Windows에서 다양한 웹 브라우저를 사용하여 요소를 검사하는 단계별 가이드를 아래에서 찾으십시오.

Google 크롬 검사 도구

Windows Chrome 브라우저에서 요소를 검사하는 방법

• Google 크롬을 사용 하는 경우 웹사이트의 아무 곳이나 마우스 오른쪽 버튼으로 클릭합니다 .
• 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴가 나타납니다.
• 하단에 Inspect 가 표시됩니다 .
• 오른쪽 패널 에서 HTML 및 CSS 코드를 보려면 검사를 클릭합니다 .

마우스 오른쪽 버튼을 클릭하지 않고 Chrome에서 요소 검사를 열려면 어떻게 해야 합니까?

Windows용 Google Chrome에서 요소 검사 도구를 열 수 있는 몇 가지 편리한 단축키가 있습니다. 이러한 단축키는 다음과 같습니다.

• 컨트롤 + 시프트 + C
• 기능 키 F12

위의 단축키는 Windows용 Mozilla 브라우저에서도 작동합니다.

모질라 인스펙터 도구

Windows Mozilla 브라우저에서 요소를 검사하는 방법

Mozilla 브라우저에서 프로세스는 Google Chrome과 동일합니다. 그러나 Inspector 창은 Chrome에서와 같이 오른쪽이 아닌 브라우저 하단에 표시됩니다.

Microsoft Edge 검사 도구

Windows Edge 브라우저에서 요소를 검사하는 방법

놀랍게도 Microsoft Edge의 Inspect Element는 Google Chrome 브라우저와 유사하게 작동합니다. 검사 도구는 마우스 오른쪽 버튼을 클릭하면 사용할 수 있습니다. 또한 HTML 및 CSS 코드는 Chrome과 유사하게 오른쪽에 표시됩니다.

Mac에서 요소를 검사하는 방법

Apple의 Mac 컴퓨터에서 Google Chrome, Mozilla Firefox 또는 Microsoft Edge를 사용하고 있습니까? 그렇다면 위의 Windows 섹션에서 언급한 단계에 따라 요소 검사 도구를 배포할 수 있습니다.

그러나 기본 macOS 웹 브라우저인 Safari를 사용하는 경우 Inspect Element 도구를 사용하는 것은 까다로운 게임입니다. 기본적으로 Safari는 Mac에서 요소 검사를 표시하지 않습니다. 수행해야 할 작업은 다음과 같습니다.

Mac에서 요소 검사를 여는 방법

먼저 Mac의 Safari에서 개발자 도구를 활성화해야 합니다. 방법은 다음과 같습니다.

• 사파리 브라우저를 실행합니다 .
• 웹 요소를 검사하려는 웹 사이트를 방문하십시오.
• Safari 브라우저의 상단 메뉴 표시줄에서 Safari를 선택합니다 .
• 열리는 상황에 맞는 메뉴에서 기본 설정을 클릭합니다 .
• 기본 설정 화면 에서 고급을 선택합니다 .
• 고급 기본 설정 화면 하단에 있는 개발 메뉴 표시 를 체크 표시합니다 .

Mac용 Safari에서 개발자 도구를 성공적으로 활성화했습니다. 이제 요소 검사를 사용하려면 다음 단계를 따르세요.

• 텍스트 또는 이미지와 같은 웹사이트의 모든 요소에서 을 마우스 오른쪽 버튼으로 클릭합니다 .
• 상황에 맞는 메뉴가 나타납니다. 하단에 Inspect Element 가 표시됩니다 .
• HTML 및 CSS 코드를 표시하는 웹 사이트 아래의 디버그 섹션을 열려면 클릭하십시오 .

What Are the Keys for Inspect Element?

Mac에서 Inspect Element에 대한 단축키를 찾고 있을 수 있습니다. 다음을 사용할 수 있습니다.

• 커맨드 + 시프트 + C
• Ctrl 키를 누른 다음 요소를 선택합니다.
• 두 손가락으로 트랙패드 클릭

Chromebook에서 요소를 검사하는 방법

Chromebook은 Google Chrome을 기본 브라우저로 사용합니다. 따라서 웹 사이트를 연 후 마우스 오른쪽 버튼을 클릭하면 뒤따르는 컨텍스트 메뉴에서 요소 검사 옵션을 찾을 수 있습니다.

직장이나 학교에서 Chromebook을 사용하는 경우 다음과 같은 질문을 할 수 있습니다.

Why Can’t I Inspect on My School Chromebook?

대부분의 학교 및 기업 관리자는 업무 또는 학습을 위해 제공하는 Chromebook에서 고급 기능을 비활성화합니다. 개발자 도구는 고급 기능이므로 학교나 직장 Chromebook에 요소 검사 도구가 표시되지 않을 가능성이 있습니다.

iPad/iPhone에서 요소를 검사하는 방법

안타깝게도 Mac이 없는 iPhone 또는 iPad에서는 요소 검사 도구를 사용할 수 없습니다.

iOS 및 iPadOS에는 Safari 앱용 Web Inspector가 있습니다. 그러나 Safari용 개발자 도구를 이미 활성화한 Mac에 모바일 장치를 연결하는 경우에만 작동합니다. 시도할 수 있는 단계는 다음과 같습니다.

• iPad/iPhone 설정 앱을 엽니다.
• 왼쪽 탐색 창에서 Safari를 클릭합니다 .

iPad 또는 iPhone에서 Safari 설정 열기

• 그런 다음 오른쪽에서 아래로 스크롤하여 Advanced 를 찾아 선택합니다 .

iPad 및 iPhone에서 Web Inspector 활성화

• Web Inspector 의 토글을 활성화합니다 .
• 이제 USB를 사용하여 모바일 장치를 Mac에 연결하십시오 .
• Mac에서 iPhone/iPad를 인증합니다.
• Safari에서 모바일 장치의 웹사이트를 엽니다.
• 이제 Mac에서 Safari를 실행하고 상단 메뉴 표시줄에서 개발을 선택합니다.
• 열리는 상황에 맞는 메뉴에서 모바일 장치의 이름을 찾습니다.
• 열려 있는 모든 웹사이트를 보려면 모바일 장치 위로 커서를 가져갑니다.
• 이제 웹사이트를 선택하여 Mac의 Safari 브라우저에서 HTML 및 CSS 소스 코드를 봅니다.

결론

임시 웹 페이지 편집을 위해 요소 검사 도구를 사용하는 가능한 모든 방법을 살펴보았습니다. 또한 Mac, Windows, Chromebook, iPad 및 iPhone과 같은 다양한 장치의 요소를 검사하는 방법도 배웠습니다.

다음 번에 재미나 전문적인 필요를 위해 웹 페이지를 수정해야 할 때 이러한 방법을 시도해 보십시오. 다른 곳에서 설명한 다른 복잡한 방법보다 이러한 손쉬운 단계를 확실히 좋아할 것입니다.

위의 단계가 도움이 되었으면 아래에 의견을 남기는 것을 잊지 마십시오. 도전적이라고 생각하는 방법 또는 요소 검사 도구에 대한 비밀 팁을 남겨주세요.

인쇄된 참고 자료로 웹 페이지가 필요하십니까? 지금 웹 페이지를 PDF로 빠르게 저장하는 방법을 알아보세요 !