웹 사이트는 코드 줄로 구성되지만 결과는 이미지, 비디오, 글꼴 및 기타 기능이 포함 된 페이지입니다. 이러한 요소 중 하나를 변경하거나 구성 요소를 보려면 해당 요소를 제어하는 코드 줄을 찾으십시오. 이를 위해 요소 검사 도구를 사용하십시오. 검사 도구를 다운로드하거나 즐겨 찾는 웹 브라우저에 대한 추가 기능을 설치할 필요가 없습니다. 대신 페이지 요소를 마우스 오른쪽 버튼으로 클릭 한 다음 시찰하다 or 요소를 점검하다. 그러나이 도구에 액세스하는 방법은 브라우저에 따라 다릅니다.
이 기사는 마우스 오른쪽 단추로 클릭 Windows PC의 마우스 장치 동작과 Mac의 Control + 클릭 동작을 나타냅니다.
Chrome에서 요소 검사
Google Chrome에는 브라우저에 내장 된 Chrome DevTools를 사용하여 웹 페이지를 검사하는 두 가지 방법이 있습니다.
- 페이지 또는 빈 영역에서 요소를 마우스 오른쪽 버튼으로 클릭 한 다음 시찰하다.
- 로 이동 크롬 메뉴를 선택한 다음 추가 도구 > 개발자 도구.
:max_bytes(150000):strip_icc()/01_Inspect_Element_Chrome-756549-14d8f0f1d8fe4f8a8996c9650875f833.jpg)
Chrome DevTools를 사용하여 HTML (Hypertext Markup Language) 마크 업을 복사 또는 편집하고 페이지가 다시로드 될 때까지 요소를 숨기거나 삭제합니다.
Chrome DevTools가 페이지 측면에서 열리면 위치를 변경하고 페이지에서 팝업하고 페이지 파일을 검색하고 페이지에서 요소를 선택하여 자세히 살펴보고 파일과 URL을 복사하고 설정을 사용자 지정합니다.
Mozilla Firefox에서 요소 검사
Mozilla Firefox에는 Inspector라는 검사 도구를 여는 두 가지 방법이 있습니다.
- 웹 페이지에서 요소를 마우스 오른쪽 버튼으로 클릭 한 다음 요소를 점검하다.
- Firefox 메뉴 표시 줄에서 도구 > 웹 개발자 > 검사관.
:max_bytes(150000):strip_icc()/02_Inspect_Element_Firefox-756549-bbfd425841fe472492a57401403f19af.jpg)
Firefox의 요소 위로 포인터를 이동하면 Inspector가 요소의 소스 코드 정보를 자동으로 찾습니다. 요소를 선택하면 즉시 검색이 중지되고 Inspector 창에서 요소를 검사 할 수 있습니다.
요소를 마우스 오른쪽 버튼으로 클릭하여 지원되는 컨트롤을 찾습니다. 컨트롤을 사용하여 페이지를 HTML 마크 업으로 편집하고, 내부 또는 외부 HTML 마크 업을 복사 또는 붙여넣고, DOM (문서 개체 모델) 속성을 표시하고, 노드의 스크린 샷을 찍거나 삭제하고, 새 속성을 적용하고, CSS (Cascading Style Sheets)를 참조하십시오. , 그리고 더.
Safari에서 요소 검사
Safari에서 웹 요소를 검사하는 몇 가지 방법이 있습니다.
- 웹 페이지의 항목이나 공간을 마우스 오른쪽 단추로 클릭 한 다음 요소를 점검하다.
- 로 이동 개발 메뉴를 선택한 다음 웹 검사기 표시.
:max_bytes(150000):strip_icc()/03_Inspect_Element_Safari-756549-ba1a5ebbc9b646f7b22c75365ed67f5a.jpg)
개발 메뉴가 보이지 않으면 원정 여행 메뉴를 선택 환경 설정. 에 고급 탭을 선택 메뉴 막대에 개발 메뉴 표시 확인란의 선택을 취소합니다.
웹 페이지에서 개별 요소를 선택하여 해당 섹션에 대한 마크 업을 확인합니다.
Internet Explorer에서 요소 검사
개발자 도구를 활성화하여 액세스 할 수있는 유사한 요소 검사 도구를 Internet Explorer에서 사용할 수 있습니다. 개발자 도구를 활성화하려면 F12. 또는 도구 메뉴를 선택 개발자 도구.
도구 메뉴를 표시하려면 Alt + X.
웹 페이지의 요소를 검사하려면 페이지를 마우스 오른쪽 버튼으로 클릭 한 다음 요소를 점검하다. Internet Explorer 요소 선택 도구에서 HTML 또는 CSS 마크 업을 보려면 페이지 요소를 선택하십시오. DOM 탐색기를 탐색하는 동안 요소 강조 표시를 비활성화하거나 활성화 할 수도 있습니다.
:max_bytes(150000):strip_icc()/04_Inspect_Element_Internet_Explorer-756549-4bbad38d90374e288db153b0d747a451.jpg)
다른 요소 관리자 도구와 마찬가지로 Internet Explorer를 사용하여 요소를 잘라 내고, 복사하고, 붙여넣고, HTML 마크 업을 편집하고, 속성을 추가하고, 스타일이 첨부 된 요소를 복사하는 등의 작업을 수행 할 수 있습니다.
Microsoft Edge에서 요소 검사
Microsoft Edge에서 요소를 검사하려면 먼저 검사를 활성화해야합니다. 검사를 활성화하는 방법에는 두 가지가 있습니다.
- 주소 표시 줄로 이동하여 about : 깃발. 대화 상자에서 컨텍스트 메뉴에 소스보기 및 요소 검사 표시 확인란의 선택을 취소합니다.
- Press & Media F12다음 선택 DOM 탐색기.
요소를 검사하려면 웹 페이지에서 요소를 마우스 오른쪽 버튼으로 클릭 한 다음 요소를 점검하다.
:max_bytes(150000):strip_icc()/05_Inspect_Element_Microsoft_Edge-756549-7072c664271f47668a397b7c220c5435.jpg)