Chrome, Firefox, Safari 및 Edge에서 요소를 검사하는 방법

대부분의 웹 브라우저에서 검사 명령을 사용하여 웹 사이트의 다양한 코드 요소를 검사할 수 있습니다. Chrome에서는 마우스 오른쪽 버튼을 클릭 하면 상황에 맞는 메뉴 항목으로 표시됩니다. 다른 웹 브라우저는 옵션 이름을 다르게 지정할 수 있지만 목표는 동일합니다.

경쟁사의 웹사이트 구성을 이해하면 디지털 마케터와 개발자가 자신의 브랜드로 매우 경쟁력 있는 웹사이트를 만드는 데 도움이 됩니다. 그러나 개발자나 설계자는 널리 사용되는 웹 브라우저에서 요소를 검사하는 방법을 알아야 합니다. 

인터넷 사용자가 사용하는 대부분의 인기 웹사이트의 검사 요소 기능을 완전히 이해하려면 이 튜토리얼을 끝까지 읽으십시오.

모든 웹 브라우저에 대한 검사 요소는 무엇입니까?

최신 웹 브라우저에는 사용자가 웹 사이트 소스 코드, 악의적인 활동 등을 검사하는 데 도움이 되는 많은 개발자 도구가 함께 제공됩니다. 이러한 도구 중 하나는 inspect 요소입니다. 강조 표시된 콘텐츠를 HTML 또는 코드 형식으로 표시합니다. 

코드를 읽고 코드가 백그라운드에서 실제로 수행하는 작업을 이해할 수 있습니다. 전문가들은 대부분 이 도구를 사용하여 모든 웹사이트의 소스 코드를 편집합니다. 소스 코드에는 CSS(Cascading Style Sheets), HTML(Hypertext Markup Language), 미디어 파일, JavaScript 등이 포함될 수 있습니다.

inspect 요소를 통해 소스 코드의 일부를 수정하면 웹 페이지에서 바로 효과를 확인할 수 있습니다. 그러나 이러한 변경 사항은 웹 사이트 서버에 지속적인 영향을 미치지 않습니다. 웹 페이지를 새로 고치면 웹 사이트 자체가 원래 소스 코드로 되돌아갑니다.   

요소를 검사하는 방법과 그 이유를 누가 알아야 합니까?

다음 직업에 종사하는 경우 웹 페이지의 요소를 검사하는 방법을 알아야 합니다. 

1. 콘텐츠 제작자 및 작가

요소 검사 도구를 통해 불필요한 요소를 제거하여 고품질의 웹사이트 스크린샷을 찍을 수 있습니다. 웹 사이트 소스 코드에서 해당 코드를 정확히 지정하여 중복된 시각적 자산을 찾아낼 수 있습니다.  

2. 웹사이트 개발자

개발 단계에서 요소 검사 기능을 사용하여 다양한 웹 컴포넌트를 온라인으로 테스트할 수 있습니다. 또한 개발 후에는 inspect 요소를 이용하여 디버깅을 할 수 있습니다. 

3. 고객 지원 담당자

고객 경험 상담원은 이 옵션을 사용하여 웹 구성 요소를 조작하여 온라인에서 개발자와 마케터를 도울 수 있습니다. 

4. 웹사이트 및 그래픽 디자이너

그래픽 및 웹사이트 디자이너는 또한 구현 전에 새로운 추가 사항을 시각화하여 검사 요소 도구의 이점을 얻습니다. 

5. 디지털 마케터

검색 엔진 최적화 및 마케팅 임원은 이 도구를 사용하여 경쟁업체의 웹사이트 최적화 작업을 발견합니다. 예를 들어 타겟 키워드, 웹사이트 메타데이터, SEO 제목, 콘텐츠 헤더, Google 검색 색인 상태 등을 찾을 수 있습니다. 

웹 브라우저에서 요소를 검사하는 방법을 알고 있다면 지금까지 언급한 모든 이점을 활용할 수 있습니다. 아래에서 널리 사용되는 여러 웹 브라우저에서 검사 요소 옵션을 찾아보겠습니다. 

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

  • 요소 검사 도구를 사용해야 하는 웹 사이트를 방문하십시오.
  • 텍스트, 이미지, 하이퍼링크 등과 같은 요소를 선택합니다.

  • 이제 마우스 오른쪽 버튼을 클릭 한 다음 상황에 맞는 메뉴에서 검사를 선택합니다.

  • 오른쪽에 요소 탐색 창이 열리고 많은 코드가 표시됩니다.

  • 파란색 강조 표시가 있는 코드는 웹 사이트에서 선택한 요소입니다.

  • 패널을 닫으려면 Elements 사이드바의 오른쪽 상단 모서리에 있는   닫기 (십자) 버튼을 클릭하기만 하면 됩니다 .

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

  1. macOS 장치에서 Safari 앱을 연 다음 기본 설정 을 클릭합니다 .
  2. 환경 설정 의 고급 섹션 에 있는 메뉴 표시줄에서 개발자용 메뉴 표시를 선택합니다 .
  3. 이제 개발 옵션이 나타납니다.
  4. 그런 다음 웹 사이트를 방문하여 웹 구성 요소를 선택합니다.
  5. Inspector 보기 콘솔에서 선택한 웹 구성 요소의 코드를 보려면 요소 검사를 마우스 오른쪽 버튼으로 클릭 하고 클릭합니다 .
  6. 검사 보기 탐색 창의 십자 버튼을 클릭하여 요소 검사 도구를 닫을 수 있습니다. 

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

  1. Firefox를 열고 경쟁사 웹사이트로 이동합니다.
  2. 이제 요소를 검사해야 하는 페이지로 이동합니다.
  3. 이미지, 일러스트레이션, 콘텐츠 또는 하이퍼링크와 같은 웹 구성 요소를 선택합니다.
  4. 마우스 오른쪽 버튼을 클릭하면 여러 옵션이 있는 상황에 맞는 메뉴가 표시됩니다.
  5. 이러한 옵션 중 하나는 Inspect Element 입니다 .
  6. 요소 검사를 클릭하여 보기 보기 사이드바를 엽니다.
  7. 검사 보기 내에서 강조 표시된 코드는 선택한 구성 요소의 코드 줄입니다.
  8. 검사 보기 콘솔의 오른쪽 상단 모서리에 있는 닫기 또는 교차 아이콘을 선택하면 패널이 닫힙니다.

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

  1. Microsoft Edge 브라우저를 사용하여 웹 페이지에 액세스합니다.
  2. 브라우저의 툴바 에 케밥 또는 3개의 수직 점 메뉴가 표시됩니다. 그것을 클릭하십시오.
  3. 많은 옵션이 있는 상황에 맞는 메뉴가 열립니다.
  4. 추가 도구 옵션을 찾을 때까지 아래로 스크롤합니다 . 이제 그것을 클릭하십시오.
  5. 다른 옵션 개발자 도구 와 함께 새로운 상황에 맞는 메뉴가 열립니다 . 그것을 선택하십시오.
  6. 그러면 페이지에 대한 검사 보기가 열립니다.
  7. 또는 웹 사이트에서 요소를 선택한 다음 을 마우스 오른쪽 버튼으로 클릭합니다 .
  8. 표시되는 상황에 맞는 메뉴에서 검사를 클릭합니다 .
  9. 검사 보기 콘솔에 표시되는 강조 표시된 코드는 요소 코드입니다.
  10. 지금까지 언급한 다른 웹사이트와 마찬가지로 검사 보기 콘솔에서 십자 아이콘을 클릭하면 검사 요소 기능이 닫힙니다. 

결론

지금까지 널리 사용되는 웹 브라우저의 코드 요소를 검사하는 몇 가지 방법을 발견했습니다. 이제 언급된 웹 브라우저에서 요소를 검사하는 방법을 명확하게 이해해야 합니다.

학습 내용을 웹 개발자, 디자이너 또는 디지털 마케터로서 직업이나 취미에 적용할 수 있습니다. 

웹 브라우징을 비공개로 만들고 전문적인 필요를 위해 지역 제한 콘텐츠에 액세스할 수 있는 최고의 VPN 서비스 에 관심이 있을 수도 있습니다 .

Leave a Comment

iPhone/iPod Touch 메모리 부족 경고 해결 방법

iPhone/iPod Touch 메모리 부족 경고 해결 방법

지난 며칠 동안 많은 사용자들이 iPhone/iPod Touch 메모리에 문제가 있었으며 OS가 종종 사용자에게 시스템 메모리에 문제가 있다고 메시지를 표시했습니다.

Dell 및 HP 노트북 내장 리모컨으로 VLC 미디어 플레이어 제어

Dell 및 HP 노트북 내장 리모컨으로 VLC 미디어 플레이어 제어

대부분의 노트북에는 리모컨이 기본으로 제공되지만, 모두 Windows Media Player와 Windows Media Center에서만 작동하도록 설정되어 있습니다.

방법: HTC HD2에 Android 2.2 Froyo를 쉽게 설치하는 방법

방법: HTC HD2에 Android 2.2 Froyo를 쉽게 설치하는 방법

이전에 HTC HD2에 안드로이드 2.2 프로요를 설치하는 방법에 대한 가이드를 게시했습니다. 이 가이드는 분명 안드로이드 기기에 관심이 있는 다른 기기 매니아들과

2025년 최고의 무료 및 공용 DNS 서버 10선

2025년 최고의 무료 및 공용 DNS 서버 10선

최고의 DNS 서버를 찾아 더 빠르고 안전한 연결을 제공하여 검색 환경을 어떻게 향상시킬 수 있는지 알아보세요.

방법: Motorola i1 루트 [ADB 방법]

방법: Motorola i1 루트 [ADB 방법]

마침내 휴대폰 루팅�� 기다리는 Motorola i1 사용자들에게 좋은 소식이 있습니다. CyanogenMod 포럼의 GotHeart가

Gmail에서 Android 앱 설치

Gmail에서 Android 앱 설치

이메일로 APK 파일을 받았는데 직접 설치할 수 없어서 어떻게 해야 할지 모르겠나요? 여러 개발자들이

지도 보기를 변경하는 방법 – Google Maps

지도 보기를 변경하는 방법 – Google Maps

Google 지도는 여러 가지 보기를 제공합니다. 많은 사용자에게는 탐색 시 단순화된 지도 보기가 가장 좋지만, 추가된 오버레이는

데스크톱 클라이언트 없이 Skype 온라인 사용

데스크톱 클라이언트 없이 Skype 온라인 사용

최근에 Skype로 친구와 음성 채팅을 해야 했는데 데스크톱 클라이언트를 다운로드하고 싶지 않았습니다. 다음과 같은 상황이 있습니다.

방법: T-Mobile HTC G2 루팅

방법: T-Mobile HTC G2 루팅

휴대폰 루팅은 사용자에게 항상 유익합니다. 루팅을 통해 기기의 구석구석을 완전히 장악할 수 있기 때문입니다. 저희가 아는 한

이미지가 가짜인지 원본인지 어떻게 구별하나요? 이미지 오류 수준 분석기를 사용하세요

이미지가 가짜인지 원본인지 어떻게 구별하나요? 이미지 오류 수준 분석기를 사용하세요

우리는 종종 원본인지 포토샵(가짜)인지 고민하게 되는 이미지를 접하게 됩니다. 이미지 오류 수준 분석기(ELA)는