01 / 06
Safari 9에서 반응 형 디자인 모드 활성화 및 사용
오늘날의 세계에서 웹 개발자가된다는 것은 때로는 어려운 작업으로 판명 될 수있는 수많은 장치 및 플랫폼을 지원한다는 것을 의미합니다. 최신 웹 표준을 준수하는 가장 잘 디자인 된 코드를 사용하더라도 웹 사이트의 일부가 특정 장치 나 해상도에서 원하는 방식으로 보이지 않거나 작동하지 않을 수 있습니다. 이와 같은 다양한 시나리오를 지원해야하는 어려움에 직면했을 때 적절한 시뮬레이션 도구를 갖추는 것이 매우 중요합니다.
Mac을 사용하는 많은 프로그래머 중 한 명이라면 Safari의 개발자 툴셋이 항상 편리합니다. Safari 9가 출시됨에 따라이 기능의 폭이 크게 확장되었습니다. 주로 반응 형 디자인 모드 _로 인해 다양한 화면 해상도 및 다양한 iPad, iPhone 및 iPod touch에서 사이트가 어떻게 렌더링되는지 미리 볼 수 있습니다.
이 자습서에서는 반응 형 디자인 모드를 활성화하는 방법과 개발 요구 사항에 활용하는 방법을 자세히 설명합니다.
먼저 Safari 브라우저를 엽니 다.
02 of 06
Safari 환경 설정
화면 상단에있는 브라우저 메뉴에서 Safari 를 클릭하십시오. 드롭 다운 메뉴가 나타나면 위의 예에서 환경 설정 옵션을 선택하십시오.
앞에서 설명한 메뉴 항목 대신 다음 바로 가기 키를 사용할 수 있습니다. COMMAND + COMMA (,)
03 / 06
개발 메뉴 표시
이제 Safari의 환경 설정 대화 상자가 브라우저 창 위에 겹쳐서 표시됩니다. 먼저, 기어가 나타내는 고급 아이콘 _을 클릭하고 창의 오른쪽 상단 모서리에 위치시킵니다.
이제 브라우저의 고급 환경 설정이 표시됩니다. 맨 아래 에는 메뉴 막대에 Show Develop menu 라는 레이블이 있고 위의 예에서 원으로 표시된 체크 박스가있는 옵션이 있습니다. 이 메뉴를 활성화하려면 확인란을 한 번 클릭하십시오.
04 / 06
반응 형 디자인 모드 들어가기
이제 화면 상단의 개발로 표시된 Safari 메뉴에서 새 옵션을 사용할 수 있습니다. 이 옵션을 클릭하십시오. 드롭 다운 메뉴가 나타나면 위의 예에서 Enter Responsive Design Mode _ Circled를 선택 하십시오 .
앞에서 설명한 메뉴 항목 대신 다음 키보드 바로 가기를 사용할 수 있습니다. OPTION + COMMAND + R
05/06
반응 형 디자인 모드
활성 웹 페이지는 위의 예와 같이 반응 형 디자인 모드로 표시됩니다. iPhone 6과 같은 나열된 iOS 장치 중 하나를 선택하거나 800 x 600과 같이 사용 가능한 지정된 화면 해상도 중 하나를 선택하면 페이지가 해당 장치에서 또는 해당 디스플레이 해상도로 어떻게 렌더링되는지 즉시 볼 수 있습니다.
표시된 장치 및 해상도 외에도 Safari가 해상도 아이콘 바로 위에있는 드롭 다운 메뉴를 클릭하여 다른 브라우저에서와 같이 다른 사용자 에이전트를 시뮬레이트하도록 지시 할 수 있습니다.
06 년 6 월
메뉴 개발 : 기타 옵션
반응 형 디자인 모드 외에도 Safari 9의 개발 메뉴에는 여러 가지 유용한 옵션이 있으며 그 중 일부는 아래에 나와 있습니다.
- 현재 페이지 열기 : 현재 Mac에 설치된 다른 브라우저에서 활성 웹 페이지를 열 수 있습니다.
- 사용자 에이전트 : 사용자 에이전트를 변경하면 웹 서버가 브라우저를 Safari 9 이외의 것으로 식별합니다.
- Connect Web Inspector : Safari 9의 Web Inspector는 웹 페이지의 모든 리소스를 표시하여 CSS 정보, DOM 메트릭 및 구조, 원시 소스 코드를 볼 수 있습니다.
- Show Error Console : Develop Menu에서 가장 널리 사용되는 옵션 중 하나 인이 콘솔은 JavaScript, HTML 및 XML 오류 및 경고를 표시합니다.
- 페이지 소스 표시 : 활성 웹 페이지의 소스 코드를보고 검색 할 수 있습니다.
- 페이지 자원 표시 : 이 옵션을 선택하면 현재 페이지의 문서, 스크립트, CSS 및 기타 자원이 표시됩니다.
- 스 니펫 편집기 표시 : 전체 페이지가 아닌 코드 조각을 편집하고 실행할 수있는 기능을 제공합니다. 이 기능은 테스트 관점에서 매우 유용합니다.
- Extension Builder 표시 : 코드를 적절히 패키징하고 메타 데이터를 추가하여 자체 Safari 확장을 빌드 할 수 있습니다.
- 타임 라인 기록 시작 : WebKit Inspector에서 볼 수있는 네트워크 요청, JavaScript 실행, 페이지 렌더링 및 사용자가 정의한 기간 동안의 다른 이벤트를 포함한 여러 항목을 기록합니다.
- 빈 캐시 : 이 옵션을 클릭하면 표준 웹 사이트 캐시 파일뿐만 아니라 Safari 내의 저장된 캐시가 모두 삭제됩니다.
- 캐시 사용 중지 : 캐싱을 사용하지 않으면 로컬 캐시를 사용하지 않고 액세스 요청이있을 때마다 웹 사이트에서 리소스가 다운로드됩니다.
- 스마트 검색 필드에서 자바 스크립트 허용 : 보안상의 이유로 기본적으로 비활성화되어있는이 기능을 사용하면 Safari의 주소 표시 줄에 javascript가 포함 된 URL을 입력 할 수 있습니다.
- SHA-1 인증서를 안전하지 않은 것으로 간주하십시오. SHA-1 해시 기능은 Secure Hash Algorithm의 약자로, 원래 생각했던 것보다 덜 안전하다는 것이 입증되었습니다. 따라서 Safari 9에이 옵션이 추가되었습니다.
관련 독서
이 자습서가 유용하다고 생각되면 다른 Safari 9 둘러보기를 확인하십시오.
- 웹 사이트 푸시 알림을 관리하는 방법
- 웹 페이지를 PDF 파일로 내보내는 방법
- Safari 9 Extensions가 자동으로 업데이트되도록 구성하는 방법
- 고정 된 사이트 기능을 사용하는 방법