1
00:00:00,760 --> 00:00:01,370
승인.

2
00:00:01,620 --> 00:00:05,960
그래서이 비디오에서 우리는이 tic tac toe 보드 연습을 처음부터 다시 만들 것입니다.

3
00:00:06,060 --> 00:00:09,120
그래서 우리는 처음부터 빈 파일을 가지고 시작하려고합니다.

4
00:00:09,130 --> 00:00:13,880
HVM이 보일러 플레이트에 추가 할 수있는 보드를 Coppermine합니다.

5
00:00:14,460 --> 00:00:21,210
그냥 T T T 보드라고 부르며이 작업이 메모리를 조깅하는 방식으로 작동합니다.

6
00:00:21,420 --> 00:00:22,550
그것은 테이블입니다.

7
00:00:22,560 --> 00:00:23,950
이 모든 것이 하나의 테이블입니다.

8
00:00:24,000 --> 00:00:30,330
3 행 1 2, 3이 있고 각 행에는 3 개의 Tweedy가 있습니다.

9
00:00:30,360 --> 00:00:32,270
그래서 우리는 3 x 3 보드로 끝납니다.

10
00:00:32,430 --> 00:00:42,890
그리고 우리가 할 일은 왼쪽과 오른쪽 경계선을 돌릴 세 개의 TV에 들어가는 것입니다. 그리고이 세 개의 TV에서 위아래 경계선을 돌릴 것입니다.

11
00:00:43,560 --> 00:00:48,020
그래서 우리는 테이블과 3 티어로 시작해야합니다.

12
00:00:48,810 --> 00:00:53,490
그리고 저는 실제로 가서 3 개의 왕궁을 할 것이고, 첫 번째 왕국을 할 것입니다.

13
00:00:53,520 --> 00:01:01,450
그래서 우리는 세 개의 TV를 얻은 다음 다시 한 번 그 TV를 복제하려고합니다.

14
00:01:01,590 --> 00:01:06,650
이제 우리는 각각 3 개의 요소가있는 3 개의 행과 3 개의 TV가 있습니다.

15
00:01:06,720 --> 00:01:12,940
그래서 우리는 그것을 구할 것이고 브라우저에서 이것을 열면 우리가 볼 수없는 것을 알게 될 것입니다.

16
00:01:13,500 --> 00:01:18,860
그 이유는 우리 테이블이 있어도 우리 테이블에는 아무것도없는 것이기 때문입니다.

17
00:01:18,900 --> 00:01:25,910
그리고 빈 테이블을 가지고 실제로 이것이 존재하는 것을 여전히 볼 수 있기 때문에 적용된 스타일이 없습니다.

18
00:01:25,910 --> 00:01:27,950
이 테이블에는 데이터가 없습니다.

19
00:01:28,080 --> 00:01:32,700
이 예에서는 여기가 테이블 일 뿐이며 스타일이 적용됩니다.

20
00:01:32,700 --> 00:01:34,790
그래서 그것은 국경을 가지고 있습니다.

21
00:01:34,980 --> 00:01:36,320
그래서 우리는 그렇게해야합니다.

22
00:01:36,360 --> 00:01:45,210
이제는 스타일을 추가해 보도록하겠습니다. 이번에는 스타일 태그로 해보겠습니다.

23
00:01:45,360 --> 00:01:59,370
장기적으로는 좋은 생각이 아니지만 여기서 쉽게 시청할 수 있도록 솔루션 비디오를 제공하므로 파일 사이를 뒤집어보고 내가 한 곳에서 무엇을 할 것인지 혼란스러워 할 필요가 없습니다. 여기 스타일 태그의 상단에 파일.

24
00:01:59,880 --> 00:02:22,920
그래서 제가 할 첫 번째 일은 T를 선택하고 넓이를주는 것입니다. 왜냐하면 지금 우리가 TT를 검사한다면 기본적으로 전혀 존재하지 않는다는 것을 알 수 있기 때문입니다.

25
00:02:22,930 --> 00:02:24,830
그것들은 2 x 2 픽셀입니다.

26
00:02:24,960 --> 00:02:30,680
그래서 그들은 실제로 정말로 작습니다. 왜냐하면 거기에는 아무것도 없기 때문에 우리는 그들에게 높이 또는 높이를 할당하지 않았기 때문입니다.

27
00:02:30,690 --> 00:02:43,130
그래서 내가하고 싶은 일은 너비를주고 100 픽셀부터 시작해서 높이를 위해 똑같은 일을 할 것이고 우리는 저장하고 새로 고침을하고 여전히 아무것도 보지 못합니다.

28
00:02:43,500 --> 00:02:46,860
그리고 우리는 그들에게 아무것도 표시하지 않았기 때문입니다.

29
00:02:47,010 --> 00:02:55,380
그러나 우리가 가서 지금 검사하면 각 Tedy가 100 x 100 픽셀의 정사각형임을 알 수 있습니다.

30
00:02:55,380 --> 00:02:59,160
자, 이제 그곳에 있다는 것을 알 수 있도록 배경을 제공하십시오.

31
00:02:59,310 --> 00:03:02,330
backgrounders 분홍색 저장하십시오.

32
00:03:03,000 --> 00:03:05,970
이제 우리위원회의 시작을 알 수 있습니다.

33
00:03:06,120 --> 00:03:08,360
그래서 저는 실제로 배경 색상을 취소 할 것입니다.

34
00:03:08,370 --> 00:03:11,400
타일이 있다는 것을 보여주고 싶었습니다.

35
00:03:11,400 --> 00:03:12,630
우리는 TV가 있습니다.

36
00:03:12,930 --> 00:03:18,750
이제 우리가해야 할 일은 국경을 선택적으로 켜는 방법을 찾는 것입니다.

37
00:03:18,930 --> 00:03:22,800
그래서 우리는이 세 가지 요소들에 착수 할 것입니다.

38
00:03:22,800 --> 00:03:25,380
왼쪽과 오른쪽 경계선을 켜기를 원합니다.

39
00:03:25,380 --> 00:03:26,990
그래서 내가 그 페이지를 새로 고침하면.

40
00:03:27,140 --> 00:03:36,310
하지만 여기서부터 시작하여 왼쪽과 오른쪽으로 4 분의 1을주는 것으로 시작하겠습니다.

41
00:03:36,480 --> 00:03:40,990
그래서 나는 갈 것이고 그것은 첫 번째 TR 대신에 두 번째 TD입니다.

42
00:03:41,070 --> 00:03:52,120
저는 이것을 클래스로 만들려고합니다. 저는이 클래스를 수직이라고 부르겠습니다.이 3 개의 클래스를 수직이라고 부르며, 왼쪽과 오른쪽 경계 만 얻도록하겠습니다.

43
00:03:52,320 --> 00:03:53,820
따라서 클래스는 수직과 같습니다.

44
00:03:53,820 --> 00:04:11,570
그리고 나서 우리는 수직을 선택하고 왼쪽 테두리를주고 지금은 한 픽셀을 검은 색으로 만들고 테두리를 위해 똑같은 작업을 해봅니다.

45
00:04:11,570 --> 00:04:12,530
권리.

46
00:04:12,780 --> 00:04:18,280
그리고 우리가 저장하고 우리가 신선하다면 우리는 첫 번째 칸이 완성되었음을 알게 될 것입니다.

47
00:04:18,690 --> 00:04:23,520
이제 우리는 그 아래에있는 TV와 그 아래에있는 TV를 추가해야합니다.

48
00:04:23,790 --> 00:04:29,020
그래서 그것을 한 번 이상 사용하기 때문에 수업을 만들었습니다.

49
00:04:29,220 --> 00:04:45,730
따라서 이것을 ID로 만든 다음이 요소에 대한 다른 ID와이 ID에 대한 또 다른 ID를 수행하는 것보다 ID 중간과 그 다음에 ID 중간 하단 또는 그와 비슷한 것을 할 수있었습니다.

50
00:04:46,530 --> 00:04:49,570
그럼 나는 거기에 공간을 가질 수 있지만 그런 것입니다.

51
00:04:49,680 --> 00:04:51,760
Thats는 실제로 좋은 생각이 아닙니다.

52
00:04:51,780 --> 00:04:57,410
우리는 여러개의 ID를 갖고 싶지 않습니다. 그래서 저는 그것을 단지 클래스에 제공 할 것이고 클래스는 수직이 될 것입니다.

53
00:04:57,660 --> 00:05:01,350
그래서 임에도 이걸 줄거야.

54
00:05:01,560 --> 00:05:04,280
이것은 바로 아래에있는 우리의 중간 요소입니다.

55
00:05:04,440 --> 00:05:07,440
그리고 그 아래에있는 다른 하나.

56
00:05:07,440 --> 00:05:13,000
그래서 이들 3 명은 이제 수직 계급을 갖게되고 3 수직선을 얻을 수 있습니다.

57
00:05:13,650 --> 00:05:17,770
이제 수평선에서 같은 과정을 반복하면됩니다.

58
00:05:18,570 --> 00:05:20,740
여기이 요소가 필요합니다.

59
00:05:20,850 --> 00:05:26,250
이 여기와 여기 하나는 경계선 상단과 경계선 아래에 있습니다.

60
00:05:26,670 --> 00:05:45,270
이번에는 클래스부터 시작하여 변경 경계선을 경계선 상단과 경계선 아래로 놓은 다음 수평선을 복사하고 밑줄을 긋고이 수평 클래스에 올바른 요소로 서명하는 것뿐입니다.

61
00:05:45,270 --> 00:05:52,260
그래서 우리가 원했던 것들이 바로 여기에 있습니다. 그래서 이것이 첫 번째 T가 될 것입니다.

62
00:05:52,260 --> 00:05:54,500
두 번째 TR에

63
00:05:54,870 --> 00:05:56,100
그래서 저는 앞으로 나아가서 그렇게 할 것입니다.

64
00:05:56,100 --> 00:06:01,420
클래스가 같거나 TL에 있으며 복사합니다.

65
00:06:01,440 --> 00:06:09,910
그러면 우리는이 가운데 하나에서 이것을 원합니다. 우리는 이미 우리가 클래스를 가지고 있다는 것을 보게 될 것입니다. 우리는 하나 이상의 클래스를 가지고 있기 전에 이것을 실제로 보지 못했습니다.

66
00:06:09,930 --> 00:06:10,910
정말 쉽습니다.

67
00:06:10,920 --> 00:06:13,880
우리가하는 일은 공간을 추가하는 것뿐입니다.

68
00:06:13,890 --> 00:06:16,350
그래서 이것은 수직 수평이라는 하나의 클래스가 아닙니다.

69
00:06:16,350 --> 00:06:19,780
그것은 두 수직이고 또한 수평이다.

70
00:06:20,190 --> 00:06:31,840
그리고 나서 우리는이 마지막 CD와 똑같은 일을 할 것입니다.이 CD가 여기에 있습니다. 그리고 우리가 저장하고 페이지를 새로 고치면 우리는 완성 된 tic tac toe 보드를 갖게됩니다.

71
00:06:31,950 --> 00:06:38,800
그래서 여기서 마지막으로하고 싶은 것은 중심에 놓 이도록 실제로 옮기는 것입니다. 실제로는 정말 쉽습니다.

72
00:06:38,910 --> 00:06:42,460
그것은 우리의 테이블에서 성공의 한 라인 일뿐입니다.

73
00:06:42,720 --> 00:06:47,820
우리는 주문에 여유를두고 거기에 간다.

74
00:06:47,850 --> 00:06:49,820
그 마진은 자동으로 계산됩니다.

75
00:06:49,830 --> 00:06:51,270
내가 스크롤 할 때 볼 수 있습니다.

76
00:06:51,330 --> 00:07:08,520
내 말은 마진이 증가하고 감소하는 창 크기를 조정할 때 가장 중요한 점은 틱택 막 발가락이 그렇게 할 수 있다고 말한 것입니다.

77
00:07:08,550 --> 00:07:12,690
그러나이 요소 Phi가 검사되었음을 알 수 있습니다.

78
00:07:13,200 --> 00:07:16,480
그럼 당신은 그것을 조사하지 않고서도 그것이 측면에 있다는 것을 알 수 있습니다.

79
00:07:16,650 --> 00:07:22,900
따라서 중간에 들어가기를 원한다면 요소는 화면 전체에서 실제로 사용됩니다.

80
00:07:23,150 --> 00:07:24,620
이 파란색은 여기에서 볼 수 있습니다.

81
00:07:24,870 --> 00:07:31,980
그래서 저는 텍스트를 가운데에 맞출 수 있습니다. 그러면 H-1이 실제로 중간에 있다는 효과가 생깁니다.

82
00:07:31,980 --> 00:07:40,720
그래서 저는 H-1 텍스트 정렬 센터와 저장합니다.
