Mac용 Safari에서 웹 페이지를 마우스 오른쪽 버튼으로 클릭하면 페이지 소스 표시 및 요소 검사 버튼이 표시되지 않습니다. 이를 보려면 개발 메뉴를 활성화해야 합니다. 방법을 알려 드리겠습니다.
개발 메뉴를 활성화한 후 웹 사이트의 빈 공간을 마우스 오른쪽 버튼으로 클릭하면 요소 검사 및 페이지 소스 표시 버튼이 표시됩니다. 이를 통해 모든 웹사이트의 소스 코드를 살펴볼 수 있습니다. 이는 웹사이트에서 이미지를 다운로드하고 코드를 디버깅하거나 사이트 뒤에서 어떻게 보이는지 알아내는 데 유용합니다(웹사이트 디자이너의 경우).
Mac용 Safari에서 개발 메뉴를 활성화하는 방법
몇 단계에 따라 Safari에서 개발 메뉴를 쉽게 켤 수 있습니다. Mac에서 Safari를 열고 메뉴 막대에서 “Safari” 버튼을 클릭합니다.
그런 다음 “기본 설정”을 선택하십시오. 또는 키보드 단축키 Command+(쉼표)를 사용할 수 있습니다. 이렇게 하면 Safari 환경설정도 열립니다.
“고급” 탭으로 이동합니다.
“메뉴 모음에 개발 메뉴 표시” 확인란을 선택합니다.
이제 상단의 북마크와 창 사이에 개발 메뉴가 나타납니다.
페이지 소스를 볼 수 있는 것 외에도 모든 웹사이트에서 JavaScript 비활성화와 같은 개발자 중심 기능에 액세스할 수 있습니다.
Mac용 Safari에서 페이지 소스를 보는 방법
개발 메뉴를 활성화하면 Safari에서 페이지 소스를 보는 몇 가지 방법이 있습니다.
Safari에서 웹 사이트를 열고 페이지의 빈 공간을 마우스 오른쪽 버튼으로 클릭합니다. 이제 “페이지 소스 표시”를 선택하십시오. 키보드 단축키 Option+Command+u를 사용하여 이 메뉴로 이동할 수도 있습니다.
웹 페이지에서 이미지나 기타 미디어 요소를 찾고 있다면 Safari에서 쉽게 찾을 수 있습니다. 왼쪽 창에 이미지, 글꼴 등과 같은 다양한 폴더가 표시됩니다. “이미지” 폴더를 클릭하면 필요한 사진을 빠르게 찾을 수 있습니다.
이미지를 선택한 후 세부 정보 사이드바를 열어 쉽게 세부 정보를 볼 수 있습니다. 이것을 여는 버튼은 콘솔의 오른쪽 상단, 기어 아이콘 바로 아래에 있습니다. 단축키 Option+Command+0으로 열 수도 있습니다.
세부 정보 사이드바 상단에 있는 “리소스”를 클릭하여 이미지 크기 및 전체 URL과 같은 세부 정보를 봅니다.
페이지 소스 콘솔의 위치도 쉽게 변경할 수 있습니다. 이 콘솔의 왼쪽 상단, X 버튼 바로 옆에 두 개의 버튼이 있습니다. 브라우저 창 내에서 콘솔을 다른 쪽으로 이동하려면 사각형 아이콘을 클릭합니다.
별도의 창에서 페이지 소스 콘솔을 열려면 두 개의 직사각형 아이콘을 클릭하면 됩니다. 이렇게 하면 콘솔이 분리되어 별도의 창에서 열립니다.
페이지의 특정 요소에 대한 코드를 확인하려면 해당 요소를 마우스 오른쪽 버튼으로 클릭하고 “요소 검사”를 선택합니다. 그러면 선택한 요소의 코드로 바로 이동합니다.
코드 보기가 끝나면 X 버튼을 클릭하여 페이지 소스 콘솔을 닫고 Safari 탐색으로 돌아갑니다. 여기에서 Chrome에서 웹사이트의 페이지 소스를 보는 방법도 확인할 수 있습니다.
관련된: Google 크롬에서 HTML 소스를 보는 방법
