웹 개발자 도구
크롬 웹 개발자 도구를 통해 웹페이지의 html 문서와 그 부분이 어떻게 구성되어 있는지를 확인할 수 있다.
- 알고 싶은 곳 -> 마우스 오른쪽 버튼 -> 검사
- toggle device mode
다양한 기기들이 나와 다양한 화면의 크기를 가지고 있다. 이 때 웹페이지가 다양한 화면 크기에서 어떻게 보이는 지를 확인할 수 있는 도구
- Network
웹 브라우저는 웹서버로부터 다운 받은 데이터를 보여주는 것이다. 이때 웹 브라우저가 다운로드 받는 과정을 확인 할 수 있는 도구이고 이것으로 무엇이 누락되었는지, 무엇 때문에 다운로드가 지연되는 지를 알 수 있다.
생활코딩 웹개발자도구 수업
모바일 지원
다양한 기기들이 나와 다양한 화면의 크기를 가지고 있는데 그러한 기기들에서도 최적화된 화면으로 웹페이지를 보여주기 위해서 해야하는 설정이다.
<meta name-"viewpoint" content="width = device-width, initial-scale = 1.0">
장치에 넓이를 맞추고 처음 시작 화면을 배율 1.0의 상태로 시작하라는 설정이다.