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 서비스 에 관심이 있을 수도 있습니다 .