브라우저의 요소 검사 도구를 사용하는 방법

많은 웹 사이트에서 작업하는 경우 작업을 완료하는 더 빠르고 효율적인 방법을 항상 찾고 있을 것입니다. 그렇다면 대부분의 주요 브라우저에서 사용할 수 있는 요소 검사 도구가 유용한 자산이 될 수 있습니다. 이를 통해 CSS 클래스를 빠르게 식별하고, 페이지의 요소에 대한 변경 사항을 미리 보고, 모바일 장치에서 사이트를 시뮬레이션하는 등의 작업을 수행할 수 있습니다.

이 기사에서는 요소 검사 도구를 소개하고 가장 널리 사용되는 웹 브라우저에서 요소 검사 도구에 액세스하는 방법을 보여줍니다. 그런 다음 웹 개발 워크플로의 일부로 이를 사용하는 방법에 대한 몇 가지 예를 살펴보겠습니다.

파헤쳐보자!

주요 브라우저에서 요소 검사 도구에 액세스하는 방법

요소 검사 도구는 모든 웹 페이지의 기본 소스 코드를 볼 수 있게 해주는 유틸리티입니다. 또한 이를 사용하여 원본 소스 코드를 그대로 유지하면서 일시적으로 변경하고 결과를 실시간으로 볼 수 있습니다. 이것은 변경 사항을 테스트하거나 문제를 진단해야 하는 경우 매우 유용합니다. 또한 마음에 드는 기능이 있는 사이트를 발견하고 어떻게 구현되었는지 궁금할 때 유용할 수 있습니다.

Chrome, Firefox 및 Safari를 포함한 대부분의 주요 브라우저는 이 도구의 변형을 제공합니다. 각각에서 액세스하는 방법을 살펴보겠습니다.

Google 크롬에서 검사 요소에 액세스

Chrome에서 요소 검사 도구에 액세스하는 방법에는 세 가지가 있습니다.

• 페이지의 요소를 마우스 오른쪽 버튼으로 클릭하고 검사 를 선택합니다.
• 창의 오른쪽 상단 모서리에 있는 점 3개 메뉴를 클릭하고 추가 도구 > 개발자 도구를 선택 합니다.
• 키보드에서 Ctrl + Shift + C 를 누릅니다( Mac에서는 Cmd + Option + C ).

도구가 열리면 분할 보기가 표시됩니다. 한쪽에는 보기를 조정하고 다양한 화면 해상도를 시뮬레이션하기 위한 몇 가지 컨트롤과 함께 검사 중인 웹 사이트의 미리 보기가 있습니다.

다른 한편에는 정보가 포함된 여러 창이 있습니다. 상단 창은 페이지의 HTML입니다. 코드의 일부 위로 마우스를 가져가면 오른쪽 페이지의 관련 영역이 강조 표시됩니다.

그 아래에는 페이지에 대한 정보를 보여주는 창이 있습니다. 여기에 표시되는 세부 정보는 선택한 탭에 따라 다릅니다. 위의 스크린샷에서는 페이지의 CSS 스타일을 보여줍니다.

하단 창은 단순히 Chrome 개발자 도구에 대한 뉴스 및 업데이트입니다. X 를 클릭하여 혼란을 줄이기 위해 이것을 안전하게 닫을 수 있습니다.

마지막으로 HTML 창의 오른쪽 상단 모서리에 있는 점 3개 메뉴를 클릭하고 독 옵션 중 하나를 선택하여 이러한 창의 위치를 ​​변경할 수 있습니다.

Mozilla Firefox에서 검사 요소 액세스

Firefox의 Inspect Element 도구는 Chrome과 매우 유사하며 유사한 방식으로 액세스할 수 있습니다.

• 페이지에서 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 선택합니다 .
• Firefox 창의 오른쪽 상단에 있는 햄버거 메뉴를 클릭하고 Web Developer > Inspector 를 선택합니다.
• 키보드에서 Ctrl + Shift + C 를 누릅니다( Mac에서는 Cmd + Option + C ).

Firefox는 기본적으로 정보 창을 화면 하단에 배치합니다.

그러나 점 3개로 된 메뉴를 클릭하고 다른 옵션을 선택하면 쉽게 이동할 수 있습니다.

Safari에서 요소 검사 액세스

Mac 컴퓨터에서 Safari 웹 브라우저는 요소 검사 도구도 제공합니다. 그러나 액세스하려면 추가 단계가 있습니다. Safari 개발자 도구를 활성화해야 합니다.

이렇게 하려면 화면 상단의 메뉴 막대로 이동하여 Safari > 환경 설정 > 고급으로 이동 합니다 . 그런 다음 관련 상자를 선택하여 개발 도구를 활성화할 수 있습니다.

활성화되면 다른 브라우저에서와 마찬가지로 요소 검사 기능에 액세스할 수 있습니다.

• 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 검사 를 선택합니다.
• 상단 메뉴 모음에서 개발 > 웹 검사기 표시로 이동합니다 .
• 키보드에서 Cmd + Option + I 을 누릅니다.

Safari 도구의 초기 레이아웃은 브라우저와 약간 다릅니다.

그러나 Chrome 및 Firefox와 마찬가지로 속성 창의 왼쪽 상단 모서리에 있는 아이콘을 클릭하여 쉽게 사용자 지정할 수 있습니다.

요소 검사 도구의 5가지 일반적인 용도

이제 Inspect Element 도구에 액세스하는 방법을 알았으므로 이 도구로 할 수 있는 몇 가지 유용한 작업을 살펴보겠습니다. 많은 가능성이 있지만 아래의 용도는 가장 일반적인 것 중 일부입니다. 이 예제에서는 Chrome을 사용할 것이지만 기능은 다른 브라우저에서도 유사하게 작동해야 합니다.

1. 웹사이트에서 CSS 클래스 찾기

요소 검사를 활용할 수 있는 가장 유용한 방법 중 하나는 페이지의 CSS(Cascading Style Sheets)에서 세부 정보를 찾는 것입니다. 이것은 몇 가지 이유로 편리합니다. 첫째, 인터넷을 검색하다가 정말 마음에 드는 사이트를 발견했다면 CSS를 살짝 들여다보고 자신만의 웹 디자인에 대한 아이디어를 수집할 수 있습니다.

자신의 사이트에서도 유용합니다. 예를 들어, 요소가 제대로 보이지 않으면 신속하게 검사하여 올바른 CSS를 사용하고 있는지 확인할 수 있습니다.

요소 검사를 사용하여 스타일을 확인하는 두 가지 기본 방법이 있습니다. 단일 항목을 빠르게 보려면 미리 보기 창에서 항목 위로 마우스를 가져가면 해당 항목에 대한 몇 가지 기본 정보가 표시됩니다.

여기에서 우리 블로그의 헤더에 대한 색 구성표, 글꼴, 여백 등을 볼 수 있습니다. 세부 창에서 도구는 관련 코드를 강조 표시하므로 진행 상황을 정확히 볼 수 있습니다. 미리보기에서 요소를 클릭하면 스타일 창이 업데이트되어 해당 CSS도 표시됩니다.

요소 위로 마우스를 가져가도 아무 작업도 수행되지 않는 것 같으면 속성 창의 커서 아이콘이 파란색으로 강조 표시되어 있는지 확인합니다.

찾고 있는 특정 CSS 클래스 또는 스타일을 알고 있고 이를 사용하는 모든 요소를 ​​보고 싶은 경우 검색 기능을 사용할 수도 있습니다. 인스펙터를 연 상태에서 키보드에서 Ctrl + Shift + F 를 누릅니다( Mac에서는 Cmd + Shift + F ). 그러면 페이지의 코드를 검색할 수 있는 검색창이 열립니다 . 문서를 검색하는 것처럼 관련 결과가 강조 표시됩니다.

2. 사이트 문제 해결

요소 검사 도구는 문제 해결에 매우 유용합니다. 예를 들어 요소의 색상이나 글꼴이 제대로 보이지 않는 경우 이전 섹션에서 설명한 대로 도구를 사용하여 빠르게 확인할 수 있습니다.

요소 검사 도구에서 페이지의 HTML을 직접 편집할 수도 있습니다. 변경하려는 코드를 두 번 클릭하기만 하면 편집할 수 있습니다.

코드는 실제로 웹사이트에서 변경되지 않습니다. 페이지를 새로 고치면 원래 형식으로 돌아갑니다. 그러나 이 기능은 빠른 테스트 및 문제 해결에 매우 유용합니다.

마지막으로 내장 디버거는 뒤에서 발생하는 오류 메시지를 확인하는 데 사용할 수 있는 고급 도구입니다. 액세스하려면 인스펙터 창 상단에서 콘솔 을 클릭하십시오.

소스, 네트워크 활동 등을 볼 수 있는 다른 탭도 있습니다. 전체 목록에 액세스하려면 속성 상단에 있는 이중 화살표 아이콘을 클릭하십시오.

3. 변경 사항을 미리보기 위해 텍스트 편집

요소 검사의 가장 좋은 용도 중 하나는 페이지의 텍스트, 글꼴 또는 색상에 대한 변경 사항을 빠르게 미리 보는 것입니다. 이렇게 하면 WordPress 대시보드에 로그인하지 않고도 아이디어가 어떻게 생겼는지 정확히 볼 수 있습니다.

요소를 편집하려면 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다 . 그러면 해당 요소의 코드에 초점이 맞춰진 도구가 열립니다. 요소 검사가 이미 열려 있는 경우 미리보기 창에서 항목을 클릭하여 관련 코드를 강조 표시할 수도 있습니다.

그런 다음 코드를 두 번 클릭하여 편집 가능하게 만듭니다. 예를 들어 여기에서 블로그 제목을 변경했습니다.

색상을 변경할 수도 있습니다. 요소를 선택하고 스타일 창을 스크롤하여 관련 섹션을 찾으면 됩니다. 색상 사각형을 클릭하여 색상 선택기를 불러올 수 있습니다.

사용하려는 색상을 알고 있는 경우 색상의 16진수 코드를 직접 편집할 수도 있습니다.

4. 이미지 변경 사항 미리보기

요소 검사를 사용하면 이미지 변경 사항을 쉽게 미리 볼 수도 있습니다. 이것은 다양한 이미지 크기를 시험해 볼 수 있는 훌륭한 방법이기도 합니다.

미리보기 창에서 변경하려는 이미지를 선택한 다음 HTML 창에서 해당 URL을 두 번 클릭하기만 하면 됩니다.

그런 다음 다른 이미지의 URL을 붙여넣어 테스트할 수 있습니다. 이미지가 WordPress 미디어 라이브러리에 있는 경우 첨부 파일 세부 정보에서 URL을 빠르게 찾을 수 있습니다.

URL을 클립보드에 복사하는 편리한 버튼도 있습니다. 다시 말하지만, 인스펙터에서 변경한 사항은 일시적이며 본인만 볼 수 있으므로 자유롭게 플레이하세요.

5. 장치 에뮬레이션을 사용하여 사이트 테스트

마지막으로 Inspect Element의 또 다른 유용한 기능은 다양한 화면 크기와 특정 장치를 에뮬레이트하는 기능입니다. 이를 통해 사이트의 응답성을 테스트하고 다양한 모바일 폼 팩터에서 사이트가 어떻게 표시되는지 정확하게 확인할 수 있습니다.

인스펙터가 열린 상태에서 쌓인 휴대폰과 태블릿처럼 보이는 아이콘을 클릭합니다.

이렇게 하면 장치 에뮬레이션이 활성화됩니다. 인스펙터를 열면 기본적으로 활성화될 수 있습니다. 주변의 핸들을 사용하여 페이지의 미리보기 크기를 조정하거나 미리보기 창 상단의 드롭다운을 클릭하여 다양한 장치를 선택합니다.

미리보기 창 상단에 있는 "회전" 아이콘을 클릭하여 특정 종횡비를 입력하거나 모바일 장치가 회전할 때 페이지가 어떻게 보이는지 확인할 수도 있습니다. 위치 및 터치와 같은 다양한 센서를 에뮬레이트하려면 속성 창에서 점 3개 메뉴를 클릭하고 추가 도구 > 센서 를 선택합니다.

결론

웹 개발이 처음이건 노련한 전문가이건 Inspect Element 도구는 분명히 당신의 무기고에 있어야 하는 강력한 유틸리티입니다. 액세스하기 쉽고 거의 보편적으로 사용 가능하며 다양한 작업을 빠르고 쉽게 수행할 수 있습니다.

이 기사에서는 Chrome, Firefox 및 Safari에서 Inspect Element에 액세스하는 방법을 보여주었습니다. 또한 CSS 클래스를 찾고, 웹 사이트 문제를 해결하고, 텍스트와 이미지를 일시적으로 변경하고, 모바일 장치를 에뮬레이트하는 데 사용하는 방법을 보여주었습니다. 이 툴킷을 사용하면 요소 검사를 워크플로의 일부로 만드는 데 필요한 모든 것이 있습니다.

Inspect Element 사용에 대해 질문이 있습니까? 아래 의견 섹션에서 알려주십시오!

Kinjugraphics/Shutterstock.com을 통한 추천 이미지.