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

요소를 검사하려면 Chrome, Firefox 또는 Edge에서는 해당 요소 를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택합니다. Safari에서는 먼저 웹 개발자 기능을 활성화한 다음 마우스 오른쪽 버튼을 클릭하거나 Control 키를 누른 상태에서 클릭하고 ' 요소 검사'를 선택합니다 . 브라우저에서 도구 모음이 열리고 문서 트리에서 해당 항목이 선택됩니다. Chrome과 Edge에서는 이 패널을 ' 요소' 라고 부르고, Firefox에서는 '검사기' 라고 부르며 , Safari에서는 '웹 검사기 '라고 부릅니다 .

Chrome에서 요소 검사하기

1. 크롬에서 해당 페이지를 열고 검사하려는 텍스트, 이미지, 링크 또는 컨트롤을 찾으세요.
2. 해당 항목을 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택하세요 .
3. 요소 패널에서 DOM 트리의 선택된 행을 찾으세요. 스타일 패널에는 해당 노드에 영향을 미치는 CSS 규칙이 표시됩니다.

또는 Chrome의 세 점 메뉴에서 '도구 더보기' > '개발자 도구'를 선택하세요 . 바로 가기 키는 F12 또는 Ctrl+Shift+I (Windows/Linux), Command+Option+I (Mac)입니다. Ctrl+Shift+C 또는 Command+Shift+C를 누르면 Elements를 페이지 선택 모드로 열 수 있습니다.

Microsoft Edge에서 요소 검사

1. Edge 브라우저에서 해당 페이지를 열고 특정 요소를 마우스 오른쪽 버튼으로 클릭합니다.
2. [검사]를 선택합니다 . Edge에서 개발자 도구가 열리고 요소에서 해당 노드가 선택됩니다.

또는 설정 및 더보기(…) > 추가 도구 > 개발자 도구를 선택하세요 . F12 또는 Ctrl+Shift+I (Windows/Linux), Command+Option+I (Mac)를 누르면 마지막으로 열었던 개발자 도구 패널이 다시 열립니다. 사용자 지정 단축키는 다를 수 있습니다.

Firefox에서 요소 검사하기

1. 파이어폭스에서 해당 페이지를 열고 검사하려는 항목을 마우스 오른쪽 버튼으로 클릭합니다.
2. [검사]를 선택하세요 . Firefox에서 해당 요소가 선택된 상태로 검사 창이 열립니다.
3. 트리 화살표를 펼쳐 하위 요소를 보거나, 다른 행을 선택하여 페이지의 다른 부분을 검사할 수 있습니다.

F12 키 또는 Ctrl+Shift+I (Windows/Linux), 또는 Command+Option+I (Mac) 를 눌러 개발자 도구를 엽니다 . Ctrl+Shift+C 또는 Command+Option+C를 누르면 검사기가 열립니다. 웹사이트에서 마우스 오른쪽 클릭 메뉴를 대체하는 경우 바로 가기 키 또는 Firefox 메뉴를 사용하세요.

Safari에서 요소 검사하기

1. Mac의 Safari에서 메뉴 막대의 Safari > 설정을 선택하세요.
2. 고급 설정 을 열고 '웹 개발자용 기능 표시'를 선택하세요 . Safari 16 이하 버전에서는 이 설정이 ' 메뉴 막대에 개발자 메뉴 표시' 로 표시됩니다 .
3. 페이지로 돌아가서 해당 요소를 마우스 오른쪽 버튼으로 클릭하거나 Control 키를 누른 상태에서 클릭한 다음 [요소 검사]를 선택합니다 .

웹 검사기는 클릭한 요소를 선택합니다. 또는 [개발] > [웹 검사기 표시]를 선택 하거나 Option+Command+I 를 눌러 현재 페이지의 웹 검사기를 열 수도 있습니다 . 이 단계는 Mac의 Safari에 적용됩니다.

패널 토론이 시작된 후 해야 할 일

일치하는 HTML 요소를 찾으세요

강조 표시된 행은 실시간 DOM 트리의 노드입니다. 화살표를 펼쳐 중첩된 요소를 보거나, 요소 선택기 아이콘을 클릭하고 페이지 위로 마우스를 가져간 다음 대상을 선택하세요. 요소 선택기는 작거나 겹쳐진 항목을 선택하는 데 유용합니다.

CSS를 검토하거나 테스트하세요.

스타일 창(파이어폭스에서는 규칙이라고 함)을 사용하여 어떤 CSS 선언이 적용되는지, 그리고 어디에서 왔는지 확인할 수 있습니다. 선언의 선택을 해제하거나 값을 편집하여 레이아웃, 색상, 간격 또는 글꼴 변경 사항을 미리 볼 수 있습니다. 이렇게 해도 사이트 파일이 수정되거나 다른 방문자에게 보이는 내용이 변경되지는 않습니다.

반응형 레이아웃을 확인하세요

각 브라우저에는 반응형 또는 장치 미리보기 컨트롤이 있습니다. 더 좁은 뷰포트 크기를 선택하거나 입력한 다음 동일한 DOM 및 스타일을 검사해 보세요. 이렇게 하면 중단점 및 레이아웃 문제를 파악할 수 있지만 실제 장치에서 테스트하는 것을 대체할 수는 없습니다.

키보드 단축키 한눈에 보기

바로가기 키는 운영 체제, 브라우저 버전 또는 사용자 지정 설정에 따라 다를 수 있습니다. 바로가기 키가 작동하지 않으면 브라우저 메뉴 또는 상황별 메뉴 명령을 사용하십시오.

개발자 도구에서 변경한 내용이 저장되나요?

요소, 검사기 또는 스타일 패널에서 수행하는 일반적인 편집은 브라우저에 대한 임시 변경 사항입니다. 페이지를 새로고침하면 일반적으로 사이트에서 제공하는 버전으로 복원됩니다. 일부 개발자 워크플로는 로컬 재정의를 컴퓨터에 저장할 수 있지만, 이러한 경우에도 웹사이트 서버에 변경 사항이 게시되지는 않습니다. 개발자 도구는 페이지를 검사하고 테스트하는 용도로 사용해야 하며, 모든 사용자가 볼 수 있는 실제 사이트를 변경하는 용도로 사용해서는 안 됩니다.

최신 정보는 Chrome 개발자 도구 공식 가이드 , Firefox 바로가기 , Apple의 Safari 설정 및 검사 가이드 , Microsoft의 Edge 개요를 참조하세요 .