“거대한 뇌의 뉴런처럼 우리 모두는 이제 인터넷에 연결되어 있습니다.” ~ Stephen Hawking
그렇죠? 인터넷의 힘은 타의 추종을 불허합니다! 웹은 수백만 개의 웹사이트와 정보로 가득 차 있습니다. 연구를 위해 특정 정보를 찾아야 하거나, 단순히 엔터테인먼트 포털을 탐색하거나, 소셜 미디어를 검색해야 하는 경우, 웹사이트는 우리가 귀하의 기기에 계속 붙어 있도록 하는 주요 소스 역할을 합니다.
이미지 출처: YouTube
웹사이트를 사용하면서 "요소 검사" 기능에 대해 들어보신 적이 있나요? Inspect Element는 웹페이지의 HTML 및 CSS 스크립트를 보고 편집할 수 있는 브라우저 도구와 비슷합니다. 이 기능은 모든 브라우저에서 사용할 수 있지만 Chrome의 경우 개발자 모드, Safari의 경우 Web Inspector, Firefox의 경우 Inspect 등 이름이 다를 수 있습니다.
이번 포스팅에서는 Safari, Google Chrome, Firefox를 포함한 다양한 브라우저에서 Mac의 요소를 검사하는 방법에 대해 알아보겠습니다. 시작하기 전에 요소 검사 도구를 사용하는 방법과 이 도구가 왜 유용한지 빠르게 이해해 보겠습니다.
“요소 검사”란 무엇인가요?
마우스 오른쪽 버튼을 클릭할 때마다 어떤 웹사이트에서든 컨텍스트 메뉴에 "요소 검사" 기능이 표시됩니다. 기술적인 측면에서 요소 검사 도구를 사용하면 사용자는 프런트 엔드에서 웹페이지를 보거나 수정할 수 있습니다. Inspect Element 도구는 라이브 코드를 방해할 염려 없이 특정 웹 사이트의 모양과 느낌을 시험하기 위해 프런트 엔드 개발자가 주로 사용합니다. 특정 경우에 웹 사이트의 요소를 "검사"하기 위해 "테스트" 단계에서 사용됩니다.
Mac에서 요소를 검사하는 방법
요소 검사 기능은 각 웹과 함께 내장되어 있습니다. Safari, Chrome, Firefox를 포함한 브라우저입니다. 이제 각 웹 브라우저의 Mac에서 Inspect Element를 사용하는 방법에 대해 알아보겠습니다.
Safari:
시작하기 전에 먼저 Mac에서 "Inspect Element" 기능을 활성화해 보겠습니다. 기본적으로 켜져 있지 않은 경우 Safari.
Safari를 실행하고 기본 설정을 엽니다.
"고급" 탭으로 전환한 다음 확인하세요. '메뉴 표시줄에 개발 메뉴 표시' 옵션.
이 옵션을 선택하자마자 새로운 '개발' 옵션이 메뉴 표시줄에 추가됩니다.
이 옵션을 선택하면 메뉴 표시줄에 새로운 '개발' 옵션이 추가됩니다.
Safari 브라우저에서 Mac의 요소를 검사하려면 다음을 수행해야 합니다.
옵션 1: 마우스 오른쪽 버튼 클릭 방법
Mac에서 요소 검사 도구를 사용하는 가장 빠른 방법은 마우스 오른쪽 버튼 클릭 방법을 사용하는 것입니다.
웹페이지를 방문하여 마우스 오른쪽 버튼을 클릭하세요. 공백의 아무 곳에서나 "검사"를 선택합니다.
옵션 2: "개발" 메뉴를 통해
또한 다음을 통해 요소 검사 기능을 사용할 수도 있습니다. 새로 추가된 "개발" 메뉴.
웹사이트를 방문하여 상단 메뉴 표시줄에 있는 "개발" 옵션을 탭한 다음 "웹 속성 표시"를 선택하세요.
웹사이트를 방문하여 상단 메뉴 표시줄에 있는 "개발" 옵션을 탭한 다음 "웹 속성 표시"를 선택하세요.
옵션 3: 단축키 사용
macOS에서 요소 검사 도구를 사용하는 세 번째 대안은 단축키를 사용하는 것입니다.
웹페이지의 요소를 검사하려면 Command + Option + I 키 조합을 누르기만 하면 됩니다.
Google Chrome:
Chrome에서 Mac의 요소를 검사하는 방법에는 4가지가 있습니다. 브라우저.
옵션 1: 마우스 오른쪽 버튼 클릭 방법
Mac에서 Chrome 브라우저를 실행하고 요소를 검사해야 하는 웹사이트를 방문하세요.
아무 곳이나 마우스 오른쪽 버튼으로 클릭한 다음 '검사'를 선택하세요.
옵션 2: 메뉴 표시줄을 통해
Chrome을 실행하고 다음을 탭하세요. 상단 메뉴 표시줄에 있는 '보기' 옵션.
이미지 출처: 슈퍼유저
개발자 도구> 개발자> 개발자 도구로 이동
Chrome에서 요소 검사를 사용하려면 '사용자 정의 및 제어' 옵션을 선택하세요.
옵션 3: 키보드 단축키 사용
Chrome에서 '요소 검사' 창을 보려면 Command + Option + C 옵션.
옵션 4: 설정을 통해
macOS에서 Google Chrome을 실행하고 오른쪽 상단 모서리에 있는 점 3개 아이콘을 탭하세요.
"추가 도구"를 탭한 다음 "개발자 도구"를 선택하세요.
Mozilla Firefox:
Firefox에서 요소 검사 도구를 사용하려면 다음 빠른 단계를 따르세요.
옵션 1: 마우스 오른쪽 버튼 클릭 방법
Firefox를 실행하고 웹사이트를 방문하세요.
화면의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택하세요.
옵션 2: 메뉴를 통해
Mac에서 Firefox를 실행하세요. 상단 메뉴 표시줄에 있는 "도구" 옵션을 누르고 "웹 개발자"를 선택합니다. "검사"를 탭하세요.
옵션 3: 단축키
Firefox 브라우저에서 Mac의 요소 검사를 활성화하는 단축키는 명령을 눌러 실행할 수 있습니다. + Option + C 키 조합.
FAQ:
Q.1. 어떻게 d o Mac에서 검사 요소를 열 수 있나요?이미지 출처: Zapier
Mac에서 요소 검사 도구를 여는 가장 빠른 방법 중 하나는 웹사이트를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 "검사" 옵션을 선택하는 것입니다. 컨텍스트 메뉴.
Q.2. Mac에서 Inspect Element의 단축키는 무엇입니까?요소 검사를 사용하는 단축키는 브라우저마다 다릅니다.
- Safari: Command + Option + I
- Chrome: Command + Option + C
- Firefox: 명령 옵션 + C
Google Chrome에서 Inspect Element를 사용하려면 Command + Option + C 키 조합을 누르세요. 또는 화면의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 "검사"를 선택하여 요소 검사 창을 시작할 수도 있습니다.
Mac에서 요소를 검사하는 방법에 대한 마지막 말씀여기에 사용 방법에 대한 빠른 가이드가 있습니다. Safari, Chrome, Firefox를 포함한 다양한 웹 브라우저의 macOS에서 요소 검사 도구. 소셜 미디어에서 우리를 팔로우하세요 – . Mac에서 Inspect Element 도구를 얼마나 자주 사용하고 어떤 목적으로 사용하십니까? 여러분의 생각을 독자들과 자유롭게 공유해 주세요.
읽기: 0
