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