이것은 꽤 빠른 비디오가 될 것입니다.
Google 크롬이 제공하는 개발자 도구 중 일부를 강조하여 각 팀과 협력하여 평가할 것을 권합니다.
이제 마지막 비디오에서 만든 To Do 목록입니다.
그것은 여전히 ​​그 때와 같이 추한 상태이며, 두 가지를 강조하고 싶습니다.
따라서 처음에는 다른 사람들과 마찬가지로 페이지 소스를 실제로 볼 수 있습니다.
각 코스는이 코스의 초기에 나왔지만 그다지 유용하지는 않습니다.
우리는 이것을 바꿀 수는 없지만 우리가 할 수있는 일은 오른쪽 클릭하고 inspect 요소를 클릭하는 것입니다.
그리고 이것이 요소 검사기를 시작하는 것입니다.
그래서 우리는이 새로운 관점을 여기에서 볼 수 있습니다.
그래서 우리는이 모든 것들에 대해 배울 수있는 많은 탭이 있습니다.
지금은이 요소 탭에서 시작하고 있습니다.
그러면 이것이 실제로 모든 요소를 ​​대화식으로 표현한 것입니다.
그래서 우리는 우리가 doctype을 가지고 있음을 알 수 있습니다.
각 팀은 몸의 머리를 가질 것입니다.
또는 각자 또는 저희 및 우리 맹방뿐만 아니라 입력 및 당신이주의하는 첫째로 나가이 성분에 공중 선회하는 때이다.
그래서이 H-1 위에 마우스를 가져 가자.
실제로 여기에 강조 표시되어 있습니다.
그래서 여기에 마우스를 가져 가면 여기에 내가 말하는 것을 보여주기 위해 강조 표시되어 있습니다.
UL 또는 여기에 입력 체크 박스가 있습니다.
여기에 텍스트가 있습니다.
그래서 이것은 그 자체로 유용합니다.
그냥 물건을 디버그하고 요소가 차지하는 공간과 문서의 흐름에있는 부분을 확인하십시오.
그러나 내가 정말로 집중하고 싶은 것은 여기 CSSA 탭 스타일 탭입니다.
그래서이 중 하나를 선택합시다.
클래스를 상단 또는 두 번째로 완료 한 상태에서이 동맹을 선택합시다.
그리고 저는 그것을 클릭 할 것입니다.
그리고 여기에서 저는이 요소가 현재 적용한 모든 스타일의 대화 형보기를 실제로보고 있습니다.
그래서 우리는 완성 된 클래스로 인해 모든 동맹자를 위해 작성한 파리 코드 때문에이 텍스트 장식 라인을 볼 수 있습니다.
그것은 빨간색 테두리가 있고 우리가 실제로 할 수있는 일은 이것을 켜거나 끄는 것입니다.
그래서 저는 이제 모든 동맹국의 국경을 해제 시켰습니다.
나는 그것들을 다시 되돌릴 수 있고, 나는 이것을 6 픽셀이나 10 또는 1 픽셀이되도록 여기에서 바꿀 수있다.
색상을 클릭하고 새 색상을 선택하면 파란색 테두리가 나타납니다.
이것이 내가 실제로 파일을 변경하지는 않지만 강조 할 한 가지.
이 페이지를 새로 고치거나 변경 사항이 사라지는 창을 닫으면 바로 브라우저에서만 볼 수 있습니다.
그래서 이것은 실제로 두 가지 다른 방식으로 유용합니다.
하나는 자신 만의 코드를 작성하여 자신의 페이지에서 테스트하고 사물을 테스트하고 색상을 변경하거나 테두리를 변경하거나 일부 속성의 다른 속성을 변경하여 즉시 시각적으로 볼 때 어떤 일이 발생하는지 확인하는 것입니다.
다른 유용한 것은 실제로 다른 사람의 코드를 보는 것입니다.
그래서 MVNO는 홈 페이지 만 열어 둡니다.
이 텍스트에 대해 좀 더 알고 싶다고합시다.
내가 할 수있는 일은 실제로 마우스 오른쪽 버튼을 클릭하고 요소 검사를 클릭하는 것입니다.
특히 요소를 클릭하면 실제로 강조 표시됩니다.
따라서 H-1 공유 지식 인 올바른 태그로 즉시 이동했음을 알 수 있습니다.
그리고 거기에도 스팬이 있습니다.
그것은 열려있는 웹을 위해 말한다.
이제 H-1을 살펴 보겠습니다.
그리고 여기에서 나는 모든 스타일을 얻습니다.
첫 번째 것은 색입니다.
내가 그 색을 바꾸면 H-1 색이 바뀝니다.
그래서 나는 폰트를 알고 싶다고 말하며, Mazola가 폰트를 적용하는 스타일을 작성한 어떤 시점에서 스크롤을 내려 볼 것입니다.
여기에있는 것이고 이것은 다음 몇 가지 비디오에서 우리가 집중하려고하는 것입니다. 이것은 다른 셀렉터에서 어딘가에 상속 될 수 있다는 것입니다.
그래서 H-1이 아니라 몸 전체에 직접 적용되었을 수도 있습니다.
그래서 아래로 스크롤하면 여기에있는 것처럼 보입니다.
글꼴 패밀리가 열려 있으면 빛이 매우 실제 감각을 전달합니다.
따라서 실제로 글꼴을 사용하는 방법을 보여주지는 않습니다.
곧 출시 될 별도의 동영상입니다.
이것은 단지 페이지에 대해 뭔가를 찾고 싶다면이 버튼이 어떤 유형의 요소인지 바로 알고 싶다고합시다.
내가 선택할 수있는 아이콘의 역할은 돋보기이며 물건 위로 마우스를 가져 가면 클릭하면 눈이 보일 것입니다.
따라서 눈은 아이콘에 사용되는 또 다른 태그이며 여기서 모든 스타일을 볼 수 있습니다.
내가 돋보기를 가지고 있으면 그것을 클릭 할 수있는 요소가 무엇인지보고 싶을 때와 앵커 태그 인 것처럼 보입니다.
그래서 그것은 이미지 태그가 아닙니다. 앵커 태그는 어딘가에서 배경 이미지를 설정하고 어디에 있는지보아야 함을 의미합니다.
여기에 우리가 간다.
그들은 배경 이미지를이 이미지로 설정합니다.
따라서이 모든 내용을 요약하기 위해 Google 크롬에서이 Inspektor를 열어서 HMO를 볼 수 있고 평가를 볼 수있을뿐만 아니라 조작 할 수있을뿐만 아니라 조작 할 수 있다는 것을 보여주고 싶었습니다. 변화를 시도 할 수 있고 당신은 당신의 자신의 위치에 그것을 할 수있다 또는 당신은 다른 사람의 위치에 그것을 할 수있다.
따라서 실제로 복제하려는 다른 사람의 디자인을 복제하고 복제하려는 경우에 매우 유용합니다.
그리고 우리가 Javascript에 도착하면 실제로 javascript에 대해서도 똑같은 일을 할 수 있음을 알 수 있습니다.