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

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

Chrome에서 요소 검사하기

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

마우스 오른쪽 버튼 메뉴가 열려 있고 '검사' 명령이 강조 표시된 크롬 페이지 — 페이지의 컨텍스트 메뉴에서 '검사'를 선택하면 Chrome의 요소 패널에서 해당 항목으로 이동합니다.

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

Microsoft Edge에서 요소 검사

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

마우스 오른쪽 버튼을 클릭하여 메뉴를 열고 '검사'를 선택한 Microsoft Edge 페이지. — Edge의 검사 명령을 사용하면 선택한 페이지 항목에서 요소 도구가 열립니다.

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

Firefox에서 요소 검사하기

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

Firefox 페이지에서 컨텍스트 메뉴가 열려 있고 '검사' 명령이 강조 표시되어 있습니다. — Firefox의 컨텍스트 메뉴를 클릭하면 클릭한 요소에 대한 검사기 창이 열립니다.

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

Safari에서 요소 검사하기

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

Safari 설정의 고급 창에서 웹 개발자용 기능 표시를 선택한 상태를 확인합니다. — 이 고급 설정을 활성화하면 Safari의 개발자 메뉴와 웹 검사기가 표시됩니다.

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

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

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

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

개발자 도구의 요소 선택기에서 페이지 카드의 div 노드가 선택된 상태로 해당 페이지를 강조 표시합니다. — 선택기는 페이지 영역을 미리 보고 DOM 트리에서 해당 영역과 일치하는 노드를 선택합니다.

페이지에서 윤곽선으로 표시된 버튼에 해당하는 선택된 버튼 노드가 있는 요소 패널 — 선택된 DOM 행은 페이지 뷰포트에 윤곽선으로 표시된 버튼에 해당합니다.

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

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

개발자 도구의 스타일 패널에 버튼의 background-color 선언과 체크박스가 표시됩니다. — CSS 선언을 토글하거나 조정하여 선택한 버튼에 어떤 영향을 미치는지 미리 볼 수 있습니다.

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

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

Elements에서 선택한 버튼 옆에 좁은 모바일 웹페이지가 표시되는 반응형 디자인 미리보기입니다. — 뷰포트가 좁으면 선택한 요소가 모바일 레이아웃에 어떻게 맞는지 더 쉽게 확인할 수 있습니다.

키보드 단축키 한눈에 보기

브라우저	개발자 도구를 엽니다	페이지 항목을 검사합니다
크롬	F12 또는 Ctrl+Shift+I; Mac: Command+Option+I	Ctrl+Shift+C; Mac: Command+Shift+C
파이어폭스	F12 또는 Ctrl+Shift+I; Mac: Command+Option+I	Ctrl+Shift+C; Mac: Command+Option+C
사파리	Mac에서 Option+Command+I	마우스 오른쪽 버튼 클릭/컨트롤 키를 누른 상태에서 클릭 > 요소 검사
엣지	F12 또는 Ctrl+Shift+I; Mac: Command+Option+I	개발자 도구에서 선택기 아이콘을 사용하세요.

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

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

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

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