본문 바로가기

전체 글25

Chrome DevTools로 웹 사이트 속도 최적화 튜토리얼의 목표이 튜토리얼에서는 Chrome DevTools를 사용하여 웹 사이트로드 속도를 높이는 방법을 찾는 방법을 설명합니다.이 자습서의 비디오 버전을 읽거나 비디오 버전을보십시오.자막 자동 번역 선택 후 한글 선택하면 한글로 나옵니다, 선결 요건이 웹 개발 개론 수업에서 배운 것과 비슷한 기본적인 웹 개발 경험이 있어야합니다 .로드 성능에 대해 알 필요가 없습니다. 이 자습서에서이 내용을 배우게됩니다!소개토니 야. 토니는 고양이 사회에서 매우 유명합니다. 그는 팬이 자신이 좋아하는 음식이 무엇인지 알 수 있도록 웹 사이트를 만들었습니다. 그의 팬들은이 사이트를 좋아하지만 Tony는 사이트가 느리게로드된다는 불만을 계속 듣고 있습니다. Tony가 사이트 속도를 높이도록 도와달라고 요청했습니다.그림 .. 2018. 9. 19.
CSS보기 및 변경 시작하기 이 대화 형 자습서를 완료하면 Chrome DevTools를 사용하여 페이지의 CSS를보고 변경하는 기본 사항을 익힐 수 있습니다.요소의 CSS보기Inspect Me!아래 텍스트를 마우스 오른쪽 단추로 클릭하고 검사를 선택하십시오 . DevTools 의 요소 패널이 열립니다. Inspect Me!요소가 강조 표시됩니다 DOM 트리 .에서 DOM 트리 ,의 값을 찾을 수 data-message에 대한 속성 Inspect Me!요소를.아래 텍스트 상자에 값을 입력하십시오.요소 패널 의 스타일 탭 에는 DOM 트리 에서 현재 선택된 요소에 적용되는 CSS 규칙이 나열됩니다.이 규칙 은 여전히이 요소에 포함되어야합니다 . 클래스 규칙을 찾습니다 . 이 규칙이 표시된다는 사실은 요소에 요소 가 적용되고 있음을 의.. 2018. 9. 19.
Devtool 편집 사용 설명-DevTools for Beginners : HTML과 DOM 시작하기 Glitch 온라인 코드 편집기 이것은 웹 개발의 기초를 가르치는 일련의 자습서 중 첫 번째 것입니다. 또한 생산성을 향상시킬 수있는 Chrome DevTools라는 웹 개발자 도구 세트에 대해 알아 봅니다.이 튜토리얼에서는 HTML과 DOM에 대해 배웁니다. HTML은 웹 개발의 핵심 기술 중 하나입니다. 웹 페이지의 구조와 내용을 제어하는 ​​언어입니다. DOM은 웹 페이지의 구조와 내용과도 관련이 있지만 나중에 자세히 설명합니다.목표실제로 웹 사이트를 구축하여 웹 개발을 배우게됩니다. DevTools for Beginners 시리즈 의 모든 자습서를 완료하면 완성 된 사이트는 그림 1 과 같이 보입니다 .그림 1 . 완성 된 사이트이 자습서가 끝나면 다음을 이해하게 될 것입니다.HTML과 DOM이 .. 2018. 9. 19.
페이지 속도 측정 PageSpeed Insights 블로그 속도 측정 구글 블로그 모바일 속도 측정 이 측정에서 3초 이내라면 즉시 이 블로그를 떠나세요,더 이상 보는 건 시간 낭비입니다, 블로그 검색 경쟁력은 모바일 속도 차이에 있고,클릭 후 화면 안 뜨면 방문자가 떠나는 시간이 3초, 현재 제 블로그 주소 측정해본 결과는?"이런, 사이트 분석 시간을 초과했습니다"란 메시지가 뜹니다, ㅠㅠ 이유는 한국은 모바일 속도가 4G를 넘어 5G로 빨라 접속에 문제없지만,전세계 대다수 사용자는 3G 70%이상 이랍니다,3G 접속 환경에서 9메가 짜리 파일 많은 제 블로그 접속은 무리입니다, 제 블로그 방문자는 한글 블로그라 대한민국 접속자가 대다수라 생각하는데,가끔 보면 해외 사용자 방문이 꽤 있더군요,3G 사용자였다면 대부분 이탈 할 수 밖에 없습니다, 페이지 .. 2018. 9. 17.

티스토리툴바