MacOS: Safari에서 웹 검사기 활성화하기

macOS Sierra에서 Apple Safari의 웹 페이지 소스 코드를 보려면 다음 방법 중 하나를 사용하여 Safari 웹 검사기 도구를 활성화해야 합니다.

Apple, Google 등과 같은 웹 브라우저 개발자들은 기본적으로 내부 코드를 볼 수 있는 도구를 제공합니다. 개발자들은 이 도구를 사용하여 실시간 웹사이트의 변경 사항을 디버깅하고 시각화하며, 서버의 실제 코드를 방해하지 않고도 작업을 수행할 수 있습니다. 그러나 이 도구는 이제 개인적 또는 전문적인 목적으로 실시간 웹사이트를 수정하고자 하는 콘텐츠 제작자 및 기술에 능숙한 인터넷 사용자들 사이에서 인기를 얻고 있습니다. 당신이 그런 사람 중 한 명이라면, Safari 웹 검사기에 대한 모든 것을 배우기 위해 기사를 끝까지 읽어보세요. 요소 검사하는 방법도 함께 안내합니다.

목차

Safari 웹 검사기란?

MacOS: Safari에서 웹 검사기 활성화하기
Safari 웹 검사기가 무엇인지 배워보세요 (사진: Apple 제공)

웹 검사기는 전 세계적으로 웹사이트 및 앱 개발자에게 Apple이 제공하는 개발 도구 모음의 일부입니다. 이 도구는 macOS 및 iOS 장치 모두에서 사용할 수 있습니다. 개발자들은 웹사이트를 수정, 최적화 및 디버깅하여 온라인 자산의 최적 성능을 얻을 수 있습니다.

Safari의 웹 검사기 도구는 웹사이트 리소스를 하나의 통합된 인터페이스로 제공합니다. 이 도구는 리소스와 그 매개변수를 전용 탭으로 분리하여 많은 코드와 옵션에 압도당하지 않도록 합니다. 웹 검사기는 또한 웹사이트 메모리의 타임라인 뷰를 제공하여 메모리를 쉽게 디버깅할 수 있도록 합니다. 더욱이 개발자로서 기능적인 웹사이트 개발에 필요한 150개 이상의 인기 CSS 속성을 조정하고 최적화할 수 있습니다.

웹 검사기 도구에서는 다음과 같은 웹사이트 리소스 탭을 확인할 수 있습니다:

  • 요소
  • 콘솔
  • 소스
  • 네트워크
  • 타임라인
  • 스토리지
  • 그래픽
  • 레이어
  • 감사

Safari 10 이상에서 Safari 웹 검사기 활성화하는 방법

기본적으로 Apple Mac은 Safari에서 웹 검사기를 비활성화합니다. 이는 웹 브라우저 사용자 인터페이스(UI)에 불필요한 혼잡을 방지하기 위함입니다. 그러나 당신이 개발자이거나 콘텐츠 제작자 또는 숙련된 Mac 사용자라면, 다음의 단계에 따라 이 기능을 활성화할 수 있습니다:

  • MacBook 또는 iMac에서 Safari 앱을 엽니다.
  • Mac 도구 모음에서 Safari 아이콘을 가져오려면 브라우저를 클릭했는지 확인하세요.
MacOS: Safari에서 웹 검사기 활성화하기
Safari 환경설정 옵션 찾기
  • Safari를 클릭하고 환경설정을 선택합니다.
  • 대안으로 단축키 Command + ,를 사용하여 환경설정 메뉴를 표시할 수 있습니다.
  • 환경설정 메뉴에서 일반 탭에 있어야 합니다.
MacOS: Safari에서 웹 검사기 활성화하기
Safari 환경설정 메뉴의 고급 탭에서 Safari 웹 검사기 활성화
  • 고급 탭으로 이동합니다.
  • 프록시 옵션 아래에서 메뉴 막대에 개발 메뉴 표시 체크박스를 확인합니다.
MacOS: Safari에서 웹 검사기 활성화하기
Mac 도구 모음의 개발 메뉴
  • 이제 Safari 개발 메뉴가 Mac 도구 모음에 표시됩니다.

이렇게 하면 Mac 브라우저 Safari에서 웹 검사기 기능을 활성화할 수 있습니다. 최신 macOS 버전인 Ventura 및 이전 버전인 Monterey, Big Sur, Catalina 등에서도 유사한 단계로 진행할 수 있습니다.

추가로 읽어보세요: Html 4.01

지금까지 Mac Safari 앱에서 웹 검사기 기능을 사용하는 방법을 배웠습니다. 아래에서는 실시간 웹사이트에서 어떻게 사용하는지 배워보세요:

macOS에서 Safari 웹 검사기 사용하는 방법

웹 개발, 콘텐츠 생성 또는 기타 목적으로 웹 검사기 도구를 호출하는 방법은 다음과 같습니다. 이 기사에서는 macOS Monterey 운영 체제를 사용하여 단계를 보여드립니다. 그러나 단계는 macOS Jaguar부터 Ventura까지 유사합니다.

  • Safari를 열고 검토하고 싶은 웹사이트를 방문합니다.
  • 웹사이트의 HTML/CSS 코드를 검사하거나 Apple 개발자 도구 웹 검사기를 사용하여 변경하려면 두 가지 방법이 있습니다:
    • 개발 > 웹 검사기 표시.
    • 오른쪽 클릭 > 요소 검사.
  • 첫 번째 방법을 사용하려면 Safari 브라우저의 Mac 도구 모음으로 이동하고 개발 메뉴를 클릭합니다.
MacOS: Safari에서 웹 검사기 활성화하기
macOS Monterey에서 Safari 웹 검사기 사용하는 방법
  • 팝업되는 컨텍스트 메뉴에서 웹 검사기 표시를 클릭합니다. 이 작업의 단축��는 옵션 + Command + I입니다.
MacOS: Safari에서 웹 검사기 활성화하기
웹 검사기 보기
  • 이렇게 하면 웹 브라우저 하단에 웹 검사기 도구가 열립니다. 보이는 코드는 액세스한 전체 URL 또는 웹 페이지에 대한 것입니다.
  • 특정 요소의 기본 코드를 시각화하고 싶다면 웹 페이지의 특정 요소를 선택합니다.
MacOS: Safari에서 웹 검사기 활성화하기
Mac에서 요소 검사하기
  • 오른쪽 클릭하고 열리는 컨텍스트 메뉴에서 요소 검사를 선택합니다.
  • Safari의 웹 검사기가 열립니다.
MacOS: Safari에서 웹 검사기 활성화하기
Safari에서 특정 요소 검사하기
  • 그러면 Safari가 당신을 감사 중인 요소의 기본 HTML 또는 CSS 코드로 직접 안내할 것입니다.
  • 이 도구에서는 검사 중인 웹 페이지 요소의 HTML 및 CSS 코드를 확인할 수 있습니다.

추가로 읽어보세요: Technipages에서 CSS 설명

이전 버전의 macOS에서 Safari 웹 검사기 열기

당신이 Jaguar보다 오래된 Mac을 사용하고 있고 웹 검사기 도구를 사용해야 한다면, 위의 단계를 찾을 수 없을 수도 있습니다. 이 경우 웹 검사기를 활성화하기 위한 간단한 코드를 실행할 수 있습니다. 방법은 다음과 같습니다:

  • 응용 프로그램을 열고 유틸리티 폴더로 이동합니다.
  • 유틸리티 안에서 터미널을 찾아야 합니다. 이건 macOS 컴퓨터의 명령 프롬프트입니다.
  • 이제 터미널 명령줄 인터페이스를 시작하고 다음 간단한 명령을 입력합니다:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

MacOS: Safari에서 웹 검사기 활성화하기
웹 검사기 활성화 코드 실행하기
  • Return을 눌러 명령을 실행합니다.
  • 이제 Safari에서 웹 페이지를 열고 페이지의 아무 곳에서나 마우스 오른쪽 버튼을 클릭하거나 마우스 버튼을 누르고 계십시오.
  • 그곳에서 요소 검사 옵션을 클릭하여 웹사이트의 기본 CSS 및 HTML 코드를 확인할 수 있습니다.

Safari 웹 검사기: 결론

이것이 Safari에서 웹 검사기를 손쉽게 활성화하는 방법입니다. 스스로 단계를 따라가면서 몇 분 만에 개발하거나 콘텐츠 제작을 시작할 수 있습니다. 새로운 macOS 버전과 구식 macOS 버전에서 Safari의 요소 검사를 활성화하는 방법을 배웠습니다. 웹 검사기를 얻고 사용하는 방법을 놓쳤다면 아래에 댓글을 남겨주세요.

다음으로는 iPad를 위한 최고의 코딩 앱입니다.



Leave a Comment

Windows 11 대 MacOS – 다섯 가지 주요 차이점

Windows 11 대 MacOS – 다섯 가지 주요 차이점

Windows 11 대 MacOS – 이 운영 체제 간의 주요 차이점을 발견하여 장치 선택을 도와주세요.

Windows PC에서 macOS 실행 단계

Windows PC에서 macOS 실행 단계

Microsoft 장치에서 Apple의 운영 체제를 실행하는 방법을 단계별로 안내하는 가이드를 통해 Windows PC에 macOS를 설치하는 방법을 알아보세요.

macOS 복구 서버에 연결할 수 없습니다 오류를 수정하는 방법

macOS 복구 서버에 연결할 수 없습니다 오류를 수정하는 방법

macOS Mojave 또는 Catalina에서 "복구 서버에 연결할 수 없습니다" 오류가 발생하셨나요? 이 글에서는 네트워크 문제, 날짜 및 시간 동기화, macOS 재설치 등 4가지 효과적인 해결 방법을 상세히 설명합니다.

Zoom 업데이트 타임라인: 최근 출시된 새로운 기능 및 개선 사항

Zoom 업데이트 타임라인: 최근 출시된 새로운 기능 및 개선 사항

Zoom은 세계 최고의 원격 통화 및 회의 플랫폼 중 하나입니다. 기능이 탑재된 애플리케이션은 3월 중순 이후로 사용자 기반이 빠르게 확장되는 것을 보았지만…

Windows 및 Mac에서 Google Meet 높은 CPU 사용량 수정

Windows 및 Mac에서 Google Meet 높은 CPU 사용량 수정

Google Meet이 CPU 성능을 너무 많이 사용하는 경우 Chrome을 사용하여 온라인 회의에 참여하세요. 또한 모든 브라우저 확장을 비활성화하십시오.

카메라를 감지하지 못하는 Microsoft Teams 수정

카메라를 감지하지 못하는 Microsoft Teams 수정

Microsoft Teams가 카메라를 감지하거나 인식하지 못한 경우 개인 정보 설정을 확인하고 앱에서 카메라를 사용할 수 있는지 확인하세요.

Android가 Mac에 연결되지 않습니까? 해결 방법은 다음과 같습니다.

Android가 Mac에 연결되지 않습니까? 해결 방법은 다음과 같습니다.

이 가이드에서는 Android를 MacBook과 호환되도록 하기 위해 수행해야 하는 작업을 배웁니다.

Mac, Windows, iOS 및 Android의 OneNote에서 다크 모드를 켜는 방법

Mac, Windows, iOS 및 Android의 OneNote에서 다크 모드를 켜는 방법

이 가이드에서는 모든 주요 플랫폼에서 OneNote의 다크 모드를 켜는 방법을 잘 보여줍니다.

Microsoft Teams에서 다크 모드를 켜는 방법은 다음과 같습니다.

Microsoft Teams에서 다크 모드를 켜는 방법은 다음과 같습니다.

Microsoft Teams에서 다크 모드를 사용하는 방법은 다음과 같습니다.

Mac에서 iPhone으로 AirDrop하는 방법

Mac에서 iPhone으로 AirDrop하는 방법

AirDrop은 케이블, 어댑터 또는 플래시 드라이브가 필요하지 않기 때문에 장치 간에 파일을 공유하는 가장 쉬운 방법 중 하나입니다. 이 튜토리얼에서는

Apple은 Xbox 무선(또는 다른) 컨트롤러를 사용하여 Apple 아케이드 홍보를 시작합니다. 연결 방법은 다음과 같습니다.

Apple은 Xbox 무선(또는 다른) 컨트롤러를 사용하여 Apple 아케이드 홍보를 시작합니다. 연결 방법은 다음과 같습니다.

Apple이 Apple 아케이드용으로 가장 인기 있는 타사 컨트롤러를 홍보하는 것을 보는 것은 꽤 아이러니하지만, Apple은 이번 주에 Xbox One 또는 PS4 컨트롤러를 Apple 장치에 페어링하는 방법을 설명하는 두 개의 비디오를 게시했습니다.

Mac에서 Microsoft Teams 오류 2: 211을 수정하는 방법

Mac에서 Microsoft Teams 오류 2: 211을 수정하는 방법

Teams 오류 코드 2: 211은 일반적으로 Mac에서 발생하며 캐시 파일로 인해 앱에서 계정에 로그인할 수 없음을 나타냅니다.

Windows 11 대 MacOS – 다섯 가지 주요 차이점

Windows 11 대 MacOS – 다섯 가지 주요 차이점

Windows 11 대 MacOS – 이 운영 체제 간의 주요 차이점을 발견하여 장치 선택을 도와주세요.

Windows PC에서 macOS 실행 단계

Windows PC에서 macOS 실행 단계

Microsoft 장치에서 Apple의 운영 체제를 실행하는 방법을 단계별로 안내하는 가이드를 통해 Windows PC에 macOS를 설치하는 방법을 알아보세요.

MacOS: Safari에서 웹 검사기 활성화하기

MacOS: Safari에서 웹 검사기 활성화하기

Apple Safari 웹 페이지의 소스 코드를 Safari 웹 검사기 도구를 사용하여 보는 방법을 배워보세요.

macOS 복구 서버에 연결할 수 없습니다 오류를 수정하는 방법

macOS 복구 서버에 연결할 수 없습니다 오류를 수정하는 방법

macOS Mojave 또는 Catalina에서 "복구 서버에 연결할 수 없습니다" 오류가 발생하셨나요? 이 글에서는 네트워크 문제, 날짜 및 시간 동기화, macOS 재설치 등 4가지 효과적인 해결 방법을 상세히 설명합니다.

BlueStacks를 제거할 수 없습니까? Mac에서 BlueStacks를 삭제하는 빠른 방법은 다음과 같습니다.

BlueStacks를 제거할 수 없습니까? Mac에서 BlueStacks를 삭제하는 빠른 방법은 다음과 같습니다.

Mac에서 BlueStacks를 제거하려면 BlueStacks 종료 > 애플리케이션 폴더 실행 > BlueStacks 앱 마우스 오른쪽 버튼 클릭 > 휴지통으로 이동 > 휴지통 비우기

수정 방법: Mac, iMac, MacBook이 로딩 화면에서 멈춤

수정 방법: Mac, iMac, MacBook이 로딩 화면에서 멈춤

로딩 막대를 사용하여 Apple 로고에 Mac이 멈추는 문제를 해결하는 방법은 다음과 같습니다. 또한 느린 Mac 시동 문제를 해결하는 방법을 배우게 됩니다.

iPad 및 macOS에서 사이드카가 작동하지 않는 문제를 해결하는 방법

iPad 및 macOS에서 사이드카가 작동하지 않는 문제를 해결하는 방법

macOS Catalina에는 Sidecar라는 새로운 기능이 도입되어 사용자가 iPad를 Mac 데스크탑을 확장하거나 미러링하는 디스플레이로 사용할 수 있습니다. 사이드카가 작동하지 않는 문제를 해결하는 방법을 알아보세요.

Photoshop에서 Mac에서 스크래치 디스크가 가득 찼습니까? 수정 방법은 다음과 같습니다.

Photoshop에서 Mac에서 스크래치 디스크가 가득 찼습니까? 수정 방법은 다음과 같습니다.

Adobe Photoshop 또는 Adobe Premiere Pro에서 작업하는 동안 Mac에서 "스크래치 디스크가 가득 찼습니다" 오류가 표시됩니까? 그런 다음 Mac에서 디스크 전체 오류를 긁는 데 도움이 되는 가장 유용한 4가지 솔루션을 찾으십시오.

Mac에서 WindowServer CPU 사용량을 낮추는 방법(2021)

Mac에서 WindowServer CPU 사용량을 낮추는 방법(2021)

이 게시물에서는 WindowServer 프로세스를 설명하고 Mac에서 CPU 리소스를 절약하는 여러 가지 방법을 제안합니다. 효과적인 방법으로 Mac의 성능을 향상시킬 수 있습니다.

Mac 데스크탑에 위젯을 추가하는 방법

Mac 데스크탑에 위젯을 추가하는 방법

Mac 데스크탑에 위젯을 추가하는 방법과 필요한 단계에 대한 포괄적인 안내입니다.