요소 검사 사용 방법

장치 링크

• 기계적 인조 인간
• 크롬북
• 맥
• 윈도우
• 장치가 없습니까?

대부분의 사람들은 마음대로 사용할 수 있는 개발자 도구의 보물창고가 있고 즐겨 사용하는 브라우저에 숨겨져 있다는 사실을 인식하지 못합니다.

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

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

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

Chrome에서 요소 검사 사용

1. 검사할 웹사이트를 엽니다.
   
2. 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 검사 를 선택합니다 .
   
   또는
3. 도구 모음의 오른쪽 모서리에 있는 세 개의 수직 점을 클릭합니다 .
   
4. 추가 도구 로 이동합니다 .
   
5. 개발자 도구 를 선택합니다 .
   
   또는
6. PC에서 F12 키보드 단축키(또는 Mac에서 CMD + Options + I )를 누릅니다 .
   

Microsoft Edge에서 요소 검사 사용

1. 웹사이트를 엽니다.
   
2. 브라우저 도구 모음의 오른쪽 상단 모서리에 있는 세 개의 세로 점을 클릭합니다 .
   
3. 아래로 스크롤하여 추가 도구 를 클릭합니다 .
   
4. 개발자 도구 를 클릭합니다 .
   
   또는
5. 웹 사이트의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 검사 를 클릭합니다 .
   
   또는
6. Ctrl + Shift + I를 누릅니다 .
   

이 세 가지 방법 중 어느 것이든 동일한 결과를 제공합니다.

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

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

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

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

요소 검사 사용(OS별)

관련된 많은 단계가 브라우저에서 Inspect Element를 사용하는 방법을 보여주는 것만으로도 다루어질 수 있지만 어쨌든 대부분의 OS에서 방법을 보여드리겠습니다.

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

Chromebook의 기본 브라우저는 Google이므로 Chrome 브라우저 지침에 따라 요소 검사 에 액세스하십시오 . 다음은 귀하를 위한 약간의 재교육 과정입니다.

1. 웹사이트를 엽니다.
   
2. 도구 모음의 오른쪽 상단 모서리에 있는 세 개의 수직 점을 클릭합니다 .
   
3. 추가 도구 를 선택합니다 .
   
4. 개발자 도구 를 클릭합니다 .
   

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

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

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

1. F12 기능 키를 누릅니다 .
   
2. 장치 표시줄 전환을 선택합니다 .
   
3. 드롭다운 메뉴에서 Android 기기를 선택합니다.
   

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

이 방법은 장치 시뮬레이션이라는 개발자 도구에 기능이 있기 때문에 Chrome 및 Firefox 브라우저 모두에서 작동합니다.

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

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

Inspect Element 도구는 반드시 OS 전용은 아니지만 브라우저 전용입니다. 즉, 개발자 도구는 사용하는 브라우저의 기능이며 반드시 Windows일 필요는 없습니다. 그러나 선호하는 브라우저에 관계없이 요소 검사 패널에 액세스할 수 있습니다.

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

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

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

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

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

1. 사파리 브라우저를 엽니다.
   
2. 헤더 탭에서 Safari를 클릭 하고 드롭다운 메뉴에서 기본 설정을 선택합니다.
   
3. 화면 상단에 있는 고급 기어 아이콘을 클릭합니다 .
   
4. 메뉴 표시줄에 개발 메뉴 표시 상자를 선택합니다 .
   

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

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

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

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

1. 설정 으로 이동합니다 .
   
2. 이제 Safari를 선택합니다 .
   
3. 하단으로 스크롤하여 고급 메뉴를 누릅니다 .
   
4. 이제 토글 스위치를 탭하여 Web Inspector를 켭니다 .
   

또한 위 섹션의 단계에 따라 Mac에서 개발 메뉴가 활성화되어 있는지 확인하십시오.

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

그러나 이러한 지침은 Windows의 Safari가 아닌 Mac을 실행하는 Safari에서만 작동한다는 점을 명심하십시오.

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

경우에 따라 웹 페이지를 검사할 수 없고 마우스 오른쪽 버튼으로 클릭하려고 하면 검사 선택 항목이 회색으로 표시되는 경우가 있습니다. 차단되었다고 생각할 수 있지만 이를 우회하는 방법은 다양합니다.

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

1. 설정 으로 이동합니다 .
   
2. 검색 자바스크립트 .
   
3. 자바스크립트 를 끕니다 .
   

방법 2 – 먼 길을 가는 개발자 도구에 액세스

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

1. 브라우저에서 설정 으로 이동합니다 .
   
2. 추가 도구 를 선택합니다 .
   
3. 아래로 스크롤하여 개발자 도구를 클릭합니다 .
   

방법 3 – 기능 키 사용

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

자신에게 맞는 방법을 만나기 전에 이러한 방법을 모두 시도해야 할 수도 있습니다. 최후의 수단으로 view-source: [enter full url] 을 입력하여 소스 코드를 볼 수도 있습니다 .

학교 크롬북에서 Inspect Element를 사용하는 방법

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

1. 웹 페이지를 마우스 오른쪽 버튼으로 클릭하거나 두 손가락으로 탭하고 검사를 선택합니다 .
   
2. Ctrl + Shift + I를 누릅니다 .
   
3. view-source :https://www.wikipedia.com 과 같은 view-source:[url] 메서드를 사용해보세요 .
   
   

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

Inspect Element를 사용하여 답을 찾는 방법

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

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

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

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

추가 FAQ

위에서 읽은 후 Inspect Element에 대한 전문가가 아닌 경우 여기에 더 많은 답변이 있습니다.

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

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

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

검사 요소가 불법입니까?

아니요, 요소 검사 도구는 불법이 아닙니다. 웹 개발자를 위해 설계되었습니다. 웹사이트의 소스 코드를 보는 것은 불법이 아닙니다. 악용 시도 등과 같은 악의적인 목적으로 수집된 정보를 사용하는 경우에만 문제가 됩니다.

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

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

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

웹 페이지의 내부에 대해 알아보기

웹 페이지의 요소 검사 기능을 확인하는 것은 개발자가 아니더라도 필요한지 전혀 몰랐던 개발자 도구일 것입니다. 웹 사이트를 더 매끄럽게 운영할 수 있는 수많은 디자인 및 마케팅 응용 프로그램이 있습니다. 그리고 경쟁자보다 우위를 점할 수도 있습니다.

Inspect Element는 무엇을 위해 사용합니까? 아래 의견 섹션에서 이에 대해 알려주십시오.