요소 검사 사용 방법

대부분의 사람들은 개발자 도구가 마음대로 사용할 수 있고 좋아하는 브라우저에 숨겨져 있다는 사실을 모르고 있습니다.

각 웹 브라우저는 웹 사이트의 코딩을 확인할 수있는 개발자 도구를 제공하지만 일반 인터넷 사용자에게는 외국 기업입니다. 결국 누가 웹 사이트의 코딩을보고 싶어할까요?

결과적으로 웹 사이트의 코딩을보고 배울 수있는 것들이 많이 있습니다. 요소 검사 기능이 제공하는 기능과 사용 방법을 알아 보려면 계속 읽으십시오.

요소 검사 사용 방법

대부분의 브라우저에는 웹 사이트의 요소를 검사하는 도구가 있지만 일반적으로 모두 동일한 방식으로 작동합니다.

Google 크롬에서 요소 검사 사용

검사 할 웹 사이트를 엽니 다.
페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 검사 .

또는
툴바의 오른쪽 모서리에있는 세 개의 수직 점을 클릭합니다.
이동 더 많은 도구 .
고르다 개발자 도구 .

또는
눌러 F12 PC의 키보드 단축키 또는 CMD + 옵션 + I Mac에서.

Microsoft Edge에서 요소 검사 사용

웹 사이트를 엽니 다.
브라우저 도구 모음의 오른쪽 상단에있는 세 개의 수직 점을 클릭합니다.
아래로 스크롤하여 더 많은 도구 .
클릭 개발자 도구 .

또는
웹 사이트의 아무 곳이나 마우스 오른쪽 버튼으로 클릭합니다.
클릭 검사 .

또는
프레스 Ctrl + Shift + I .

이 세 가지 방법 중 하나는 동일한 결과를 제공합니다.

올바르게 수행했다면 브라우저 하단에 새 창이 열립니다. 이들은 개발자 도구이며 요소 탭을 포함합니다. 요소 검사에 필요한 도구입니다.

Gmail에서 읽지 않은 모든 이메일을 표시하는 방법

패널은 기본적으로 화면 하단에 열리지 만 표시 방법은 언제든지 변경할 수 있습니다. 다음 간단한 단계에 따라 개발자 도구 패널의 위치를 변경하십시오.

개발자 도구 패널의 상단 모서리에있는 세 개의 수직 점을 클릭합니다.
도킹 측면 (왼쪽, 아래쪽 또는 오른쪽)을 선택하거나 별도의 창에 도킹을 해제합니다.

개발자 도구 패널 프레임의 가장자리 옆에 커서를 놓고 드래그하면 작업 영역이 좁아 지거나 넓어집니다. 예를 들어, 패널을 브라우저 창의 오른쪽에 고정하도록 선택한 경우 왼쪽 테두리에 마우스를 올려보십시오. 화살표 커서가 표시되면 패널을 드래그하여 크기를 조정할 수 있습니다.

요소 검사를 사용하여 답을 찾는 방법

Inspect Element를 사용하여 다음과 같은 다양한 항목에 대한 답을 찾을 수 있습니다.

모바일 장치에서 사이트 디자인 미리보기.
경쟁사가 사용하는 키워드를 찾으십시오.
속도 테스트.
웹 페이지의 텍스트 변경.
개발자에게 필요한 것을 보여주는 간단한 예를 찾으십시오.

Inspect Element 패널을 시작하면 웹 사이트에 대한 모든 코딩이 표시됩니다. 여기에는 JavaScript, CSS 및 HTML 코딩이 모두 포함됩니다. 코드를 변경할 수 있다는 점을 제외하면 웹 페이지의 소스 코딩을 보는 것과 같습니다. 또한 실시간으로 구현 된 변경 사항을 확인할 수 있습니다.

이 도구는 마케터, 디자이너 및 개발자가 디자인 변경을 완료하기 전에 확인하는 데 매우 유용합니다. 그러나 Inspect Element로 코딩을 변경하는 것은 영원하지 않습니다. 페이지를 다시로드하면 기본 상태로 돌아갑니다.

Chromebook에서 Inspect Element를 사용하는 방법

Chromebook의 기본 브라우저는 Google이므로 Chrome 브라우저 안내에 따라 요소를 점검하다 . 다음은 여러분을위한 약간의 복습 과정입니다.

웹 사이트를 엽니 다.
도구 모음의 오른쪽 상단 모서리에있는 세 개의 수직선을 클릭합니다.
고르다 더 많은 도구 .
클릭 개발자 도구 .

오른쪽 클릭 방법을 사용하거나 F12 기능 키를 사용하여 개발자 도구로 더 빨리 이동할 수 있습니다.

Android에서 요소 검사를 사용하는 방법

Android 기기에서 Inspect Element를 실행하는 것은 약간 다릅니다. Android에서 요소 검사 패널로 이동하는 방법을 확인하세요.

눌러 F12 기능 키.
고르다 장치 표시 줄 전환 .
드롭 다운 메뉴에서 Android 장치를 선택합니다.

특정 Android 기기를 선택하면 웹 사이트의 모바일 버전이로드됩니다. 여기에서 데스크톱에서 편안하게 Android 기기의 요소 검사 기능을 자유롭게 사용할 수 있습니다.

이 방법은 개발자 도구에 Device Simulation이라는 기능이 있으므로 Chrome 및 Firefox 브라우저 모두에서 작동합니다.

iPhone 장치에서도 동일한 방식으로 작동합니다. 드롭 다운 메뉴에서 올바른 것을 선택하기 만하면됩니다.

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

Inspect Element 도구는 반드시 OS와 관련된 것은 아니지만 브라우저별로 다릅니다. 즉, 개발자 도구는 사용하는 브라우저의 기능이며 반드시 Windows는 아닙니다. 그러나 선호하는 브라우저에 관계없이 요소 검사 패널로 이동할 수 있습니다.

Windows OS를 사용하는 경우 Microsoft Edge 브라우저도 사용할 가능성이 높습니다. MS Edge에서 Inspect Element에 액세스하는 방법을 확인하십시오.

검사 할 웹 사이트를 엽니 다.
브라우저 창 모서리에있는 세 개의 수직 점을 누릅니다.
아래로 스크롤하여 선택 더 많은 도구 .
클릭 개발자 도구 .

요소 검사에 더 빠르게 액세스하려면 F12 기능 키를 사용할 수도 있습니다. 또한 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 Inspect를 선택하는 것도 작동합니다.

Chrome에서 요소 검사를 사용하는 방법

Chrome에서 Inspect Element에 액세스하는 방법에는 세 가지가 있습니다. 다음을 수행 할 수 있습니다.

Discord 서버에서 누군가를 차단 해제하는 방법

설정 메뉴를 클릭하거나 브라우저에서 세 개의 수직 점을 클릭하고 추가 도구> 개발자 도구 .
웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사 .
사용하다 Ctrl + Shift + I (검사).

첫 번째 방법은 새로운 Inspect Element 사용자가 기억하기 더 직관적입니다. 그러나이 기능을 자주 사용하려는 경우 빠른 키가 유용 할 수 있습니다.

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

Mac을 사용하는 경우 선호하는 브라우저는 아마도 Safari입니다. Safari에서 Inspect Elements를 여는 것은 Chrome 및 Firefox에서와 약간 다릅니다. 그러나 다음 단계로 간단합니다.

Safari 브라우저를 엽니 다.
클릭 원정 여행 헤더 탭에서.
고르다 환경 설정 드롭 다운 메뉴에서.
클릭 많은 화면 상단에있는 톱니 바퀴 아이콘
확인란을 선택하십시오. 메뉴 표시 줄에 개발 메뉴 표시 .

이 단계를 수행하면 브라우저에서 요소 검사 기능을 사용할 수 있습니다. 요소 검사를 먼저 활성화하지 않으면 웹 사이트를 열 때 옵션이 표시되지 않습니다.

이 단계를 완료 한 후 열려있는 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하면됩니다. 빠른 키 명령을 사용할 수도 있습니다. CMD + 옵션 + I (검사).

Google Forms에서 Inspect 요소를 사용하는 방법

Google Forms에서 요소 검사를 사용할 수도 있습니다. 그러나 퀴즈에 대한 답을 찾고 있다면 운이 좋지 않습니다. 코딩에 포함 된 답을 찾을 수 없습니다.

양식 작성자 또는 편집자 인 경우에만 답변을 볼 수 있습니다. 하지만 Google 설문지에서 퀴즈에 답하는 학생 인 경우 자신의 답변 만 볼 수 있습니다.

어느 쪽이든, 양식을 마우스 오른쪽 버튼으로 클릭하고 검사 양식의 모든 코드를 보려면

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

요소 검사 기능을 사용하여 웹 페이지의 모바일 버전이 iPhone에 어떻게 나타나는지 확인 하시겠습니까? 몇 가지 간단한 단계만으로이 작업을 수행 할 수 있습니다. 그러나 요소를보기 전에 iOS 장치에 대해 Web Inspector를 활성화해야합니다.

이동 설정 .
고르다 원정 여행 .
하단으로 스크롤하여 고급 메뉴 .
켜려면 탭하세요. 웹 검사기 .

또한 Mac에서 개발 메뉴가 활성화되어 있는지 확인해야합니다.

Safari를 엽니 다.
고르다 원정 여행 상단 헤더에서.
클릭 환경 설정 .
클릭 많은 .
확인란을 선택하십시오. 메뉴 표시 줄에 개발 메뉴 표시 .

iOS 휴대 기기와 Mac을 모두 활성화하면 Mac 상단 표시 줄에 개발 메뉴가 표시됩니다. 연결된 iPhone과 장치에서 활성화 된 웹 페이지를 보려면 클릭하십시오. 웹 페이지를 선택하면 Mac 화면에서 동일한 페이지에 대한 Web Inspector 창이 열립니다.

그러나 이러한 지침은 Windows의 Safari가 아닌 Mac에서 실행되는 Safari에서만 작동합니다.

차단 된 경우 요소 검사를 사용하는 방법

간혹 웹 페이지를 검사 할 수없고 해당 웹 페이지를 마우스 오른쪽 버튼으로 클릭하면 검사 선택 항목이 회색으로 표시되는 경우가 있습니다. 차단되었다고 생각할 수 있지만이 문제를 해결하는 방법에는 여러 가지가 있습니다.

방법 1 – 자바 스크립트 끄기

들어가다 설정 .
검색자바 스크립트.
끄다 자바 스크립트 .

방법 2 – 개발자 도구에 장거리 액세스

검사 할 마우스 오른쪽 버튼을 클릭하는 대신 다음을 수행하십시오.

이동 설정 브라우저에서.
고르다 더 많은 도구 .
아래로 스크롤하여 개발자 설정 .

방법 3 – 기능 키 사용

Apple 음악에 가족 구성원을 추가하는 방법

다음을 사용해 볼 수도 있습니다. F12 검사를 위해 오른쪽 클릭을 차단하는 웹 페이지의 기능 키.

자신에게 맞는 방법을 찾기 전에이 모든 방법을 시도해야 할 수도 있습니다. 마지막 수단으로 다음을 입력하여 소스 코드를 볼 수도 있습니다. 보기 소스 : [전체 URL 입력] .

Discord에서 Inspect Element를 사용하는 방법

Discord에서 코딩을 확인하는 것은 쉬운 과정입니다. 그냥 사용 Ctrl + Shift + I 명령 또는 F12 Discord 페이지의 키.

학교 크롬 북에서 요소 검사를 사용하는 방법

Chromebook을 학교에서 발급 한 경우 요소 검사 기능을 사용하려면 몇 가지 간단한 단계를 거쳐야합니다.

웹 페이지를 마우스 오른쪽 버튼으로 클릭하거나 두 손가락으로 탭하고 검사 .
또는
프레스 Ctrl + Shift + I

그러나 일부 학교 및 조직에서는이 기능을 차단합니다. 따라서 작동하지 않는 경우 조직 또는 학교 관리자에게 문의해야 할 수 있습니다.

추가 FAQ

요소 검사 명령을 사용하여 답을 찾으려면 어떻게합니까?

요소 검사 기능을 사용하여 답변을 찾는 유일한 방법은 제출 후 웹 사이트에서 즉시 표시하는 것입니다. 이 경우 코딩에 답변이 있습니다.

그렇지 않으면 요소 검사 기능을 사용할 때 퀴즈 또는 테스트의 코딩과 제출 한 답변을 보는 것입니다.

검사 요소가 불법입니까?

아니요, 요소 검사는 불법이 아닙니다. 웹 사이트의 소스 코드를 보는 것은 불법이 아니며 수집 한 정보를 악용 시도와 같은 악의적 인 목적으로 사용하는 경우에만 문제가됩니다.

브라우저에서 요소 검사를 비활성화 할 수 있습니까?

짧은 대답은 아니오입니다.

브라우저에서 요소 검사를 비활성화 할 수 없습니다. 그러나 사용자가 웹 페이지를 마우스 오른쪽 버튼으로 클릭하는 것과 같은 특정 작업을 수행하지 못하도록하는 매개 변수를 설정할 수 있습니다. 특정 이벤트를 비활성화하는 올바른 스크립트를 설정하는 온라인 자습서가 많이 있습니다. 그러나 실제로 요소 검사 기능을 완전히 비활성화 할 수는 없습니다.