1
00:00:01,440 --> 00:00:03,080
이것은 꽤 빠른 비디오가 될 것입니다.

2
00:00:03,090 --> 00:00:09,710
Google 크롬이 제공하는 개발자 도구 중 일부를 강조하여 각 팀과 협력하여 평가할 것을 권합니다.

3
00:00:09,720 --> 00:00:12,260
이제 마지막 비디오에서 만든 To Do 목록입니다.

4
00:00:12,360 --> 00:00:16,950
그것은 여전히 ​​그 때와 같이 추한 상태이며, 두 가지를 강조하고 싶습니다.

5
00:00:17,130 --> 00:00:23,040
따라서 처음에는 다른 사람들과 마찬가지로 페이지 소스를 실제로 볼 수 있습니다.

6
00:00:23,040 --> 00:00:28,210
각 코스는이 코스의 초기에 나왔지만 그다지 유용하지는 않습니다.

7
00:00:28,230 --> 00:00:37,110
우리는 이것을 바꿀 수는 없지만 우리가 할 수있는 일은 오른쪽 클릭하고 inspect 요소를 클릭하는 것입니다.

8
00:00:37,110 --> 00:00:40,170
그리고 이것이 요소 검사기를 시작하는 것입니다.

9
00:00:40,320 --> 00:00:43,170
그래서 우리는이 새로운 관점을 여기에서 볼 수 있습니다.

10
00:00:43,530 --> 00:00:47,080
그래서 우리는이 모든 것들에 대해 배울 수있는 많은 탭이 있습니다.

11
00:00:47,160 --> 00:00:50,270
지금은이 요소 탭에서 시작하고 있습니다.

12
00:00:50,370 --> 00:00:56,700
그러면 이것이 실제로 모든 요소를 ​​대화식으로 표현한 것입니다.

13
00:00:56,700 --> 00:00:59,280
그래서 우리는 우리가 doctype을 가지고 있음을 알 수 있습니다.

14
00:00:59,370 --> 00:01:03,600
각 팀은 몸의 머리를 가질 것입니다.

15
00:01:03,840 --> 00:01:13,650
또는 각자 또는 저희 및 우리 맹방뿐만 아니라 입력 및 당신이주의하는 첫째로 나가이 성분에 공중 선회하는 때이다.

16
00:01:13,710 --> 00:01:15,420
그래서이 H-1 위에 마우스를 가져 가자.

17
00:01:15,690 --> 00:01:17,810
실제로 여기에 강조 표시되어 있습니다.

18
00:01:18,000 --> 00:01:23,230
그래서 여기에 마우스를 가져 가면 여기에 내가 말하는 것을 보여주기 위해 강조 표시되어 있습니다.

19
00:01:23,260 --> 00:01:27,960
UL 또는 여기에 입력 체크 박스가 있습니다.

20
00:01:28,290 --> 00:01:30,020
여기에 텍스트가 있습니다.

21
00:01:30,120 --> 00:01:32,790
그래서 이것은 그 자체로 유용합니다.

22
00:01:32,790 --> 00:01:39,100
그냥 물건을 디버그하고 요소가 차지하는 공간과 문서의 흐름에있는 부분을 확인하십시오.

23
00:01:39,360 --> 00:01:44,140
그러나 내가 정말로 집중하고 싶은 것은 여기 CSSA 탭 스타일 탭입니다.

24
00:01:44,190 --> 00:01:45,890
그래서이 중 하나를 선택합시다.

25
00:01:46,080 --> 00:01:51,600
클래스를 상단 또는 두 번째로 완료 한 상태에서이 동맹을 선택합시다.

26
00:01:51,810 --> 00:01:53,000
그리고 저는 그것을 클릭 할 것입니다.

27
00:01:53,160 --> 00:02:01,700
그리고 여기에서 저는이 요소가 현재 적용한 모든 스타일의 대화 형보기를 실제로보고 있습니다.

28
00:02:02,070 --> 00:02:12,540
그래서 우리는 완성 된 클래스로 인해 모든 동맹자를 위해 작성한 파리 코드 때문에이 텍스트 장식 라인을 볼 수 있습니다.

29
00:02:12,540 --> 00:02:16,500
그것은 빨간색 테두리가 있고 우리가 실제로 할 수있는 일은 이것을 켜거나 끄는 것입니다.

30
00:02:16,920 --> 00:02:21,360
그래서 저는 이제 모든 동맹국의 국경을 해제 시켰습니다.

31
00:02:21,390 --> 00:02:29,800
나는 그것들을 다시 되돌릴 수 있고, 나는 이것을 6 픽셀이나 10 또는 1 픽셀이되도록 여기에서 바꿀 수있다.

32
00:02:30,210 --> 00:02:35,050
색상을 클릭하고 새 색상을 선택하면 파란색 테두리가 나타납니다.

33
00:02:35,100 --> 00:02:38,900
이것이 내가 실제로 파일을 변경하지는 않지만 강조 할 한 가지.

34
00:02:38,910 --> 00:02:44,360
이 페이지를 새로 고치거나 변경 사항이 사라지는 창을 닫으면 바로 브라우저에서만 볼 수 있습니다.

35
00:02:44,370 --> 00:02:47,340
그래서 이것은 실제로 두 가지 다른 방식으로 유용합니다.

36
00:02:47,340 --> 00:03:01,320
하나는 자신 만의 코드를 작성하여 자신의 페이지에서 테스트하고 사물을 테스트하고 색상을 변경하거나 테두리를 변경하거나 일부 속성의 다른 속성을 변경하여 즉시 시각적으로 볼 때 어떤 일이 발생하는지 확인하는 것입니다.

37
00:03:01,320 --> 00:03:05,990
다른 유용한 것은 실제로 다른 사람의 코드를 보는 것입니다.

38
00:03:06,150 --> 00:03:09,570
그래서 MVNO는 홈 페이지 만 열어 둡니다.

39
00:03:10,200 --> 00:03:14,910
이 텍스트에 대해 좀 더 알고 싶다고합시다.

40
00:03:15,270 --> 00:03:20,790
내가 할 수있는 일은 실제로 마우스 오른쪽 버튼을 클릭하고 요소 검사를 클릭하는 것입니다.

41
00:03:21,360 --> 00:03:25,000
특히 요소를 클릭하면 실제로 강조 표시됩니다.

42
00:03:25,350 --> 00:03:31,670
따라서 H-1 공유 지식 인 올바른 태그로 즉시 이동했음을 알 수 있습니다.

43
00:03:31,680 --> 00:03:33,430
그리고 거기에도 스팬이 있습니다.

44
00:03:33,450 --> 00:03:34,920
그것은 열려있는 웹을 위해 말한다.

45
00:03:35,240 --> 00:03:37,190
이제 H-1을 살펴 보겠습니다.

46
00:03:37,470 --> 00:03:40,530
그리고 여기에서 나는 모든 스타일을 얻습니다.

47
00:03:40,650 --> 00:03:41,980
첫 번째 것은 색입니다.

48
00:03:42,210 --> 00:03:46,630
내가 그 색을 바꾸면 H-1 색이 바뀝니다.

49
00:03:46,890 --> 00:03:57,360
그래서 나는 폰트를 알고 싶다고 말하며, Mazola가 폰트를 적용하는 스타일을 작성한 어떤 시점에서 스크롤을 내려 볼 것입니다.

50
00:03:57,360 --> 00:04:06,030
여기에있는 것이고 이것은 다음 몇 가지 비디오에서 우리가 집중하려고하는 것입니다. 이것은 다른 셀렉터에서 어딘가에 상속 될 수 있다는 것입니다.

51
00:04:06,030 --> 00:04:11,200
그래서 H-1이 아니라 몸 전체에 직접 적용되었을 수도 있습니다.

52
00:04:11,250 --> 00:04:13,940
그래서 아래로 스크롤하면 여기에있는 것처럼 보입니다.

53
00:04:13,950 --> 00:04:21,640
글꼴 패밀리가 열려 있으면 빛이 매우 실제 감각을 전달합니다.

54
00:04:22,560 --> 00:04:25,010
따라서 실제로 글꼴을 사용하는 방법을 보여주지는 않습니다.

55
00:04:25,020 --> 00:04:26,950
곧 출시 될 별도의 동영상입니다.

56
00:04:26,970 --> 00:04:35,810
이것은 단지 페이지에 대해 뭔가를 찾고 싶다면이 버튼이 어떤 유형의 요소인지 바로 알고 싶다고합시다.

57
00:04:35,900 --> 00:04:47,250
내가 선택할 수있는 아이콘의 역할은 돋보기이며 물건 위로 마우스를 가져 가면 클릭하면 눈이 보일 것입니다.

58
00:04:47,340 --> 00:04:52,790
따라서 눈은 아이콘에 사용되는 또 다른 태그이며 여기서 모든 스타일을 볼 수 있습니다.

59
00:04:52,880 --> 00:05:03,080
내가 돋보기를 가지고 있으면 그것을 클릭 할 수있는 요소가 무엇인지보고 싶을 때와 앵커 태그 인 것처럼 보입니다.

60
00:05:03,090 --> 00:05:11,190
그래서 그것은 이미지 태그가 아닙니다. 앵커 태그는 어딘가에서 배경 이미지를 설정하고 어디에 있는지보아야 함을 의미합니다.

61
00:05:11,270 --> 00:05:11,850
여기에 우리가 간다.

62
00:05:11,850 --> 00:05:14,860
그들은 배경 이미지를이 이미지로 설정합니다.

63
00:05:15,090 --> 00:05:33,100
따라서이 모든 내용을 요약하기 위해 Google 크롬에서이 Inspektor를 열어서 HMO를 볼 수 있고 평가를 볼 수있을뿐만 아니라 조작 할 수있을뿐만 아니라 조작 할 수 있다는 것을 보여주고 싶었습니다. 변화를 시도 할 수 있고 당신은 당신의 자신의 위치에 그것을 할 수있다 또는 당신은 다른 사람의 위치에 그것을 할 수있다.

64
00:05:33,150 --> 00:05:39,130
따라서 실제로 복제하려는 다른 사람의 디자인을 복제하고 복제하려는 경우에 매우 유용합니다.

65
00:05:39,150 --> 00:05:43,670
그리고 우리가 Javascript에 도착하면 실제로 javascript에 대해서도 똑같은 일을 할 수 있음을 알 수 있습니다.