1
00:00:00,270 --> 00:00:01,530
다시 오신 것을 환영합니다.

2
00:00:01,530 --> 00:00:08,580
To Do 목록 응용 프로그램의 기본 기능을 완성 했으므로 이제는 이렇게 할 수 있습니다.

3
00:00:08,880 --> 00:00:11,430
그래서 우리는 확실히 갈 길이 멀었습니다.

4
00:00:11,550 --> 00:00:14,220
그리고 우리는 한 번에이 한 조각을 공격 할 것입니다.

5
00:00:14,280 --> 00:00:17,080
가장 논리적 인 순서로 시도해 보겠습니다.

6
00:00:17,220 --> 00:00:28,740
배경 색상과 글꼴과 같은 더 큰 조각부터 시작하여 여기에 큰 여백과 패딩이 있는지 확인한 다음 더 많은 뉘앙스를 중점적으로 다룰 것입니다.

7
00:00:28,760 --> 00:00:30,460
이제 시작하겠습니다.

8
00:00:30,480 --> 00:00:33,200
우리가 할 첫 번째 일은 전체 화면을 할 것입니다.

9
00:00:33,720 --> 00:00:35,670
이걸 아래로 밀어서 시작합시다.

10
00:00:35,670 --> 00:00:37,120
이것은 우리 컨테이너 div입니다.

11
00:00:37,440 --> 00:00:41,630
상단에 여백을 추가하여 여기에 더 많은 공간을 확보 할 것입니다.

12
00:00:41,910 --> 00:00:47,180
그래서 우리는 C S S로 돌아가서 지금은 닫거나 자바 스크립트를 닫을 수 있습니다.

13
00:00:47,670 --> 00:00:52,520
우리 div에는 컨테이너에 대한 아이디어가 있습니다. 그리고 우리는 여러분이 이미 해왔 던 것을 여기에서 선택할 것입니다.

14
00:00:52,860 --> 00:00:59,550
그리고 오히려 제로의 여백보다 오히려 그것은 위쪽과 아래쪽에 100 픽셀을줍니다.

15
00:00:59,820 --> 00:01:05,690
그리고 x가 필요하다는 것을 기억하십시오. 우리가 0을 가지면 우리는 X가 필요하지 않지만 숫자가 있다면 우리가합니다.

16
00:01:05,880 --> 00:01:07,230
이제 살펴 보겠습니다.

17
00:01:07,650 --> 00:01:10,100
이제 그들은 같은 장소에서 시작합니다.

18
00:01:10,200 --> 00:01:12,400
그들은 거기에 같은 마진을 가지고 있습니다.

19
00:01:12,420 --> 00:01:18,090
다음으로 할 일은이 컨테이너에 배경색을 추가하는 것입니다.

20
00:01:18,090 --> 00:01:22,830
보 기가 약간 어렵지만 내가 지울 때 지워진 것을 지울 때.

21
00:01:22,950 --> 00:01:24,570
이 색깔이 바로 여기에 있습니다.

22
00:01:24,630 --> 00:01:25,700
그렇게 다시.

23
00:01:26,080 --> 00:01:28,190
그래서 우리는 그것을 추가 할 것입니다.

24
00:01:28,830 --> 00:01:34,680
그래서 컨테이너 대신 배경과 색상을 말하십시오.

25
00:01:34,680 --> 00:01:39,680
7시 7 분 후 7시입니다.

26
00:01:39,960 --> 00:01:41,210
그냥 그렇게.

27
00:01:41,850 --> 00:01:43,570
어떻게 보이는지 확인해 봅시다.

28
00:01:44,000 --> 00:01:44,400
승인.

29
00:01:44,490 --> 00:01:50,430
그래서 우리는 여기에있는 것과 같은 회색을 가지고 있습니다.

30
00:01:50,430 --> 00:01:52,790
그것은 같은 밝은 회색입니다.

31
00:01:52,830 --> 00:01:54,990
우리가 할 다음 것은 국경에서 일하는 것입니다.

32
00:01:55,230 --> 00:01:57,460
그리고 실제로는 국경이 없습니다.

33
00:01:57,540 --> 00:02:00,840
그것이 가지는 것은 아주 작은 상자 그림자입니다.

34
00:02:00,840 --> 00:02:02,870
그래서 우리는 아직 상자 그림자를 보지 못했습니다.

35
00:02:02,940 --> 00:02:09,820
여기서 그걸 증명하고 MT-NW에 들어가서 그림자 효과를 추가하는 방법 일뿐입니다.

36
00:02:09,870 --> 00:02:19,750
그래서 아래로 스크롤하면 여기에 다른 박스 그림자가 있다는 것을 알 수 있습니다. 아주 가벼운 그림자를 보게 될 것입니다. 그러나이 주위를 눈치 챘을 때 아주 작은 그림자가 있습니다.

37
00:02:20,220 --> 00:02:39,020
그래서 우리가 사용할 문법과 그림자는 박스 대쉬 그림자 0 0 3 픽셀이고 그 다음 색상과 우리 색상은 기본적으로 검은 색이 될 것입니다. 그러나 R.G ..입니다.

38
00:02:39,180 --> 00:02:43,260
그리고 나서 우리는 그것을 정말로 정말로 투명하게 만들 것입니다.

39
00:02:43,560 --> 00:02:45,380
그래서 거의 눈에 띄지 않습니다.

40
00:02:45,400 --> 00:02:46,890
그리고 내가 새롭게하면.

41
00:02:46,890 --> 00:02:52,090
경계선이 없지만이 요소 주위에 약간의 그림자가 있습니다.

42
00:02:52,710 --> 00:02:53,170
승인.

43
00:02:53,250 --> 00:02:55,460
이제 컨테이너에 대한 모든 조치가 완료됩니다.

44
00:02:55,770 --> 00:02:57,480
H-1을 공격합시다.

45
00:02:57,480 --> 00:02:59,490
그래서 여기로 향합니다.

46
00:02:59,580 --> 00:03:04,320
그래서 그것은 우리 시대에 나는 단지 H1을 고려했습니다.

47
00:03:04,320 --> 00:03:06,710
신분증이나 아무 것도 없으니 좋습니다.

48
00:03:06,960 --> 00:03:12,120
CSSA 파일로 가서 배경색으로 추가해 봅시다.

49
00:03:12,390 --> 00:03:30,010
그래서 우리는 각각을 선택하고 배경은 2 9 8 0이되는 색이며, 그들은 저장하고 새로 고침 할 것이고 이제 우리는 정확한 색조를가집니다.

50
00:03:31,210 --> 00:03:38,890
그래서 우리는 또한 글꼴 색상을 흰색으로 변경하고이를 빠르게 보여줍니다.

51
00:03:38,970 --> 00:03:39,450
괜찮아.

52
00:03:39,510 --> 00:03:42,890
천천히 여기에 가까이 인치.

53
00:03:43,050 --> 00:03:51,160
우리가 할 다음 일은 여백을주지 않는 것입니다. 그리고 이제 우리는 여기서 우리가 가진이 공간을 제거 할 것입니다.

54
00:03:51,420 --> 00:03:53,220
여기에서 볼 수 있듯이 여백은 없습니다.

55
00:03:53,220 --> 00:03:54,440
이것이 우리 H-1입니다.

56
00:03:54,510 --> 00:03:55,970
여기에 패딩이 있습니다.

57
00:03:56,340 --> 00:03:59,550
따라서 텍스트는 여기 에서처럼 가장자리에서 바로 올라가지 않습니다.

58
00:03:59,700 --> 00:04:03,330
그러나 파란 상자 바깥에는 여백이 없습니다.

59
00:04:03,360 --> 00:04:10,130
이것은 텍스트 입력이며 패딩이 증가했지만 그 둘레에는 여백이 없습니다.

60
00:04:10,200 --> 00:04:13,360
그래서 To Do 목록 주위에 약간의 패딩을 추가하는 것으로 시작하겠습니다.

61
00:04:13,370 --> 00:04:24,240
H-1 그래서 여기서는 위쪽과 아래쪽에 10 픽셀을 추가하고 왼쪽과 오른쪽으로 20 픽셀을 추가하고 저장합니다.

62
00:04:25,260 --> 00:04:27,150
우리가 점점 가까워지고있는 것을 볼 수 있습니다.

63
00:04:27,480 --> 00:04:29,000
글꼴 크기를 변경해야합니다.

64
00:04:29,070 --> 00:04:30,350
글꼴을 변경해야합니다.

65
00:04:30,420 --> 00:04:34,900
우리는 또한 모든 것을 대문자로 바꿀 수 있으며, 지금까지 할 수 있습니다.

66
00:04:34,980 --> 00:04:40,010
내 즐겨 찾기 중 하나가 텍스트 대문자로 변환된다는 것을 알아야합니다.

67
00:04:40,320 --> 00:04:42,480
나는 그것이 아주 멋지다 고 생각한다.

68
00:04:42,480 --> 00:04:56,840
우리는 모두 대문자를 사용합니다. 글꼴 크기는 24 픽셀이어야하고 글꼴 크기는 24x이어야하고 마지막으로 할 일은 일반 글꼴 체중인지 확인하는 것입니다.

69
00:04:57,020 --> 00:05:00,970
따라서 기본적으로 H1은 실제로 굵게 표시되며 원하는 것은 아닙니다.

70
00:05:01,290 --> 00:05:09,310
그래서 우리는 Funt way normal을 할 것이거나 font weight 400을 쓸 수도 있습니다.

71
00:05:09,320 --> 00:05:10,290
우리는 거기에 갈.

72
00:05:10,350 --> 00:05:17,510
이제 당신이 다루고 싶은 다음 글로 돌아갈 폰트를 변경하는 것만으로도이 글 머리 기호를 제거 할 수 있습니다.

73
00:05:17,510 --> 00:05:20,240
우리는 여기에 글 머리 기호가 없는지 알 수 있습니다.

74
00:05:20,250 --> 00:05:23,430
이러한 글 머리 기호는 기본 브라우저 스타일로 간주됩니다.

75
00:05:23,510 --> 00:05:25,360
그래서 우리는 그것을 무시할 것입니다.

76
00:05:25,400 --> 00:05:32,270
우리는 그들이 속해있는 UL을 선택하고 목록 스타일 없음이라고 말할 것입니다.

77
00:05:32,370 --> 00:05:37,790
그리고 우리가 돌아가서 새로 고침하면 우리는 이제 어떤 총알 점도 가지지 않습니다.

78
00:05:37,800 --> 00:05:56,240
제가해야 할 또 하나의 일은 여백을 0으로 설정하고 여백을 0으로 설정하면 여기에 새로 고침이되고 단지 우물의 양쪽 공간을 없애지 않고 영원히 우리가 할 공간이 있습니다. 그러나 UL 자체가 아닌 거짓말입니다.

79
00:05:56,250 --> 00:05:58,440
그래서 우리는 다시 돌아올 것입니다.

80
00:05:58,440 --> 00:06:04,760
이제 올바른 글꼴을 추가해 보겠습니다.이 글꼴의 이름은 rubato이며 Google 글꼴의 일부입니다.

81
00:06:04,880 --> 00:06:09,400
그래서 나는 여기에서 열어서 rubato에 대한 검색을 할 것입니다.

82
00:06:09,620 --> 00:06:10,720
우리가 간다.

83
00:06:10,770 --> 00:06:14,230
컬렉션에 추가 한 다음 사용하십시오.

84
00:06:14,510 --> 00:06:16,490
그리고 우리는 정상적인 길을 원할 것입니다.

85
00:06:16,800 --> 00:06:20,660
우리는 대담하고 또한 중간에 추가 할 것입니다.

86
00:06:20,660 --> 00:06:25,620
이제이 링크를 HMO에 복사하고이 창을 닫을 수 있습니다.

87
00:06:25,980 --> 00:06:37,520
각 팀의 위치와 여기에있는 상단의 붙여 넣기 위치로 돌아가 평가를 확인하고 신체에 스타일을 추가 할 것입니다.

88
00:06:37,740 --> 00:06:44,780
모든 것은이 폰트를 사용하기 때문에 우리는 폰트 패밀리를 로봇 적으로 추가 할 것입니다.

89
00:06:45,530 --> 00:06:46,680
그냥 그렇게.

90
00:06:47,390 --> 00:06:53,650
그리고 우리가 지금 되돌아 가서 새로 고침하면 H-1이 꽤 많이 있습니다.

91
00:06:53,660 --> 00:06:59,960
우리가 모든 글꼴을 만지지 않았던이 버튼을 제외하고는 같은 색으로 모든 것이 좋습니다.

92
00:06:59,970 --> 00:07:01,970
그리고 우리 동맹국들이 거기에 도달하고 있습니다.

93
00:07:01,980 --> 00:07:03,060
그들은 올바른 글꼴을 가지고 있습니다.

94
00:07:03,140 --> 00:07:06,680
간격 및 패딩 문제를 해결해야합니다.

95
00:07:06,690 --> 00:07:10,660
우리가 처리 할 다음 것은 거짓말의 배경색입니다.

96
00:07:11,250 --> 00:07:12,750
그래서 다른 모든 거짓말.

97
00:07:12,930 --> 00:07:19,280
그것은 흰색의 순수한 흰색에서 회색의 색으로 우리가 배경으로 가지고있는 것입니다.

98
00:07:19,470 --> 00:07:24,340
그래서 SS를 사용하여 다른 모든 동맹국에 스타일을 추가 할 수 있습니다.

99
00:07:24,380 --> 00:07:25,450
자 이제하자.

100
00:07:25,500 --> 00:07:43,520
우리가 할 첫 번째 일은 모든 동맹국을 선택하고 그들에게 흰색의 배경을 부여하는 것입니다. 그래서 우리는 F F F 또는 백색 또는 R-GA 255 255에서 55까지 할 수 있습니다. 그러면 우리는 다른 모든 거짓말을 할 것입니다.

101
00:07:43,740 --> 00:07:50,080
그리고 그 구문은 거짓말이며 끝내야 할 아이입니다.

102
00:07:50,360 --> 00:07:53,970
그리고 그것도 서로의 패턴을 잘 정의했습니다.

103
00:07:54,140 --> 00:07:58,670
그리고 우리가 3을한다면 3 분의 1을 말할 것입니다. 그러나 우리는 단지 다른 모든 것을 원합니다.

104
00:07:59,000 --> 00:08:08,880
그리고 배경색을 컨테이너 배경에 사용하고 새로 고친 f7 f7 f7과 동일하게 만듭니다.

105
00:08:08,880 --> 00:08:16,500
이제는 조금 작기 때문에 눈에 띄지 않지만 다른 모든 거짓말은 이제 회색으로 변합니다.

106
00:08:16,700 --> 00:08:21,030
따라서 몇 가지를 더 추가하면 완벽하게 교체되는 것을 볼 수 있습니다.

107
00:08:21,020 --> 00:08:25,370
이제 거짓말의 높이와 패딩에 대한 문제를 해결해 보겠습니다.

108
00:08:25,760 --> 00:08:36,540
가장 먼저 할 일은 40 픽셀의 높이를 부여하여 모든 동맹국의 높이가 40x이므로 우리는 새로 고침을 할 것입니다.

109
00:08:36,950 --> 00:08:39,000
좋아요. 그래서 그들은 적당한 공간을 차지합니다.

110
00:08:39,000 --> 00:08:42,620
이제 글꼴을 비교하면 글꼴에 몇 가지 문제가 있습니다.

111
00:08:42,620 --> 00:08:44,600
또한 패딩을 추가해야합니다.

112
00:08:44,970 --> 00:08:51,570
다음은 텍스트를 세로로 가운데 놓 이도록 거짓의 선 높이 속성을 변경합니다.

113
00:08:51,570 --> 00:08:55,050
지금 라인은 기본적으로이 키가 크다.

114
00:08:55,080 --> 00:09:09,510
우리는 전체 40 픽셀을 사용하여 줄 높이가 40x임을 보여주고 글꼴의 크기를 변경하지 않고 단지 줄의 크기를 변경합니다.

115
00:09:09,540 --> 00:09:10,880
이제 40 픽셀입니다.

116
00:09:10,880 --> 00:09:13,850
그래서 선은이 전체 영역을 차지합니다.

117
00:09:14,150 --> 00:09:21,020
다음 작은 것은 우리가 순수한 검정색을 가지고 있고 내가 사용한 색깔이 정확히 검은 색이 아니라는 것입니다.

118
00:09:21,060 --> 00:09:22,820
약간 가벼워.

119
00:09:23,070 --> 00:09:33,530
그래서 우리는 색상을 설정하고 여섯 6 새로 고침이며 다음 우리는 입력을 해결하자.

120
00:09:33,540 --> 00:09:35,260
그래서 우리는 당신이해야 할 몇 가지 일이 있습니다.

121
00:09:35,490 --> 00:09:39,660
첫 번째는 올바른 공간을 차지하도록합니다.

122
00:09:39,770 --> 00:09:45,740
따라서이 입력 값은 훨씬 더 크며 글꼴 크기가 클수록 여백이나 여백 값만이 아닙니다.

123
00:09:45,750 --> 00:09:47,420
새로운 배경색도 있습니다.

124
00:09:47,750 --> 00:09:49,700
그리고 우리가 클릭 할 때 국경이 있습니다.

125
00:09:49,740 --> 00:09:54,610
이제 그 모든 작업을 해보고 더 큰 글꼴 크기로 추가하는 것으로 시작하겠습니다.

126
00:09:54,840 --> 00:10:05,420
따라서 입력 글꼴 크기를 선택하고 글꼴 크기를 18 픽셀로 설정합니다.

127
00:10:05,960 --> 00:10:14,570
그리고 우리가 여기있는 동안 우리는 배경색뿐만 아니라 배경색도 할 것이고 그것은 같은 f 7 7 1/2 7입니다.

128
00:10:14,730 --> 00:10:16,350
그냥 그렇게.

129
00:10:16,760 --> 00:10:18,040
그리고 새로 고침하자.

130
00:10:18,770 --> 00:10:19,510
승인.

131
00:10:19,700 --> 00:10:21,180
우리가 점점 가까워지고있어.

132
00:10:21,170 --> 00:10:29,880
다음으로 할 일은 너비를 추가하는 것입니다. 우리가 줄 수있는 너비는 100 %입니다.

133
00:10:29,880 --> 00:10:33,590
그래서 지금은 컨테이너를 가로 지르는 길 밖에 없습니다.

134
00:10:33,600 --> 00:10:36,820
우리가 새로 고침하면 이제 모든 것을 가로 질러 간다.

135
00:10:37,050 --> 00:10:39,200
하지만 몇 가지 작은 문제가 있습니다.

136
00:10:39,210 --> 00:10:42,970
우리가 돌보고 싶은 첫 번째 일은 거기에 약간의 패딩입니다.

137
00:10:43,400 --> 00:10:50,320
그래서 오른쪽에있는 13 개의 픽셀에 패딩 13 픽셀을 추가 할 것입니다.

138
00:10:50,370 --> 00:10:54,960
아래쪽에 13 픽셀, 왼쪽에 20 픽셀.

139
00:10:54,950 --> 00:10:56,250
그래서 당신은이 것을 볼 수 있습니다.

140
00:10:56,550 --> 00:10:58,770
우리는 위쪽과 아래쪽이 13입니다.

141
00:10:59,000 --> 00:11:01,550
왼쪽에는 20 픽셀이 있습니다.

142
00:11:01,590 --> 00:11:07,430
그래서 내가 신선했다면 이제는 적절한 양의 공간을 차지하는 더 큰 의견을 갖게됩니다.

143
00:11:07,590 --> 00:11:11,670
우리는 입력이 너무 길다는 문제가 있습니다.

144
00:11:11,790 --> 00:11:27,710
우리가 100 %가되어야한다고 말했을 때 실제로 그 내용은 단지 내용이었고 패딩을 포함하지 않았고 마진을 포함하지 않았습니다. 이는 입력이 div의 끝을 지나서 오래 걸리는 것을 의미합니다. 패딩과.

145
00:11:27,770 --> 00:11:33,820
상자 크기 변경이라는 속성 인 다른 방법을 변경하는 것을 의미합니다.

146
00:11:33,840 --> 00:11:41,400
따라서 블록 크기를 조정할 때 몇 가지 옵션이 있지만 기본적으로 상자의 상자 크기를 제어합니다.

147
00:11:41,390 --> 00:11:44,100
그리고 우리는 Dasch box 국경으로 바꿀 것입니다.

148
00:11:44,270 --> 00:11:52,740
그리고이 글에서 읽어야 할 것은 너비와 높이 프로퍼티가 패딩과 테두리를 포함하지만 마진은 포함하지 않는다는 것입니다.

149
00:11:52,800 --> 00:12:05,170
그래서 우리가 경계 상자로 바꾼다면 여기로 들어가서 상자 크기 조정 순서 상자를 추가하고 계속하기 전에 저장하십시오.

150
00:12:05,310 --> 00:12:10,250
나는 이것이 우리가 접두사를 갖고 싶어하는 속성 중 하나임을 지적 할 것이다.

151
00:12:10,250 --> 00:12:15,170
그래서 Web Kit와 Mozy는 Moz와 Microsoft의 혼란입니다.

152
00:12:15,540 --> 00:12:16,850
나는 지금 그렇게하지 않을 것이다.

153
00:12:16,910 --> 00:12:18,250
솔루션 코드에 표시됩니다.

154
00:12:18,410 --> 00:12:20,330
그러나 입력하는 데 오랜 시간이 걸립니다.

155
00:12:20,660 --> 00:12:25,940
그래서 적어도 Chrome에서 어떻게 작동하는지 바로 알 수 있습니다.

156
00:12:26,040 --> 00:12:32,180
우리 상자는 테두리에 패딩을 포함하지만 여백은 포함되지 않습니다.

157
00:12:32,180 --> 00:12:34,820
그래서 우리는 완벽한 적합성으로 끝납니다.

158
00:12:34,880 --> 00:12:39,220
다음에는 입력 할 때 글꼴 색을 지정하겠습니다.

159
00:12:39,620 --> 00:12:41,130
그래서 우리 모두가해야 할 일입니다.

160
00:12:41,330 --> 00:12:49,920
저는 H-1에서 같은 색을 가져 와서 우리 입력으로 내려 가서 그냥 색이라고 말하겠습니다.

161
00:12:49,910 --> 00:12:54,400
그리고 우리가 지금 새로 고침하면 우리는 타이핑을 시작합니다. 우리가 간다.

162
00:12:54,410 --> 00:12:56,290
이제 그 효과에 초점을 맞추자.

163
00:12:56,580 --> 00:13:03,860
입력에서 초점을 맞추는 것을 클릭하면 여기에서 볼 수 있습니다.

164
00:13:03,920 --> 00:13:05,060
그래서 우리는 그것에 대해 연구해야합니다.

165
00:13:05,120 --> 00:13:08,050
지금은 기본 포커스 효과가 있습니다.

166
00:13:08,120 --> 00:13:17,590
따라서 입력 콜론 포커스를위한 선택기는 마우스를 가져 가면 의사 선택기와 같습니다.

167
00:13:17,650 --> 00:13:21,510
이 셀은 입력에 집중했을 때만 실행됩니다.

168
00:13:21,920 --> 00:13:27,310
그래서 나는 우리가 그것에 집중할 때 배경을 희게 만들 예정입니다.

169
00:13:27,570 --> 00:13:47,180
나는 또한 3 픽셀의 경계선을 채울 것입니다. 우리가 작업 해 왔던 푸른 색과 윤곽선이 아닌 윤곽선을 제공 할 것입니다. 브라우저 자체에서 얻는이 성가신 강조점을 참조하십시오.

170
00:13:47,180 --> 00:13:56,610
이제 우리가 입력에 집중하면이 새 파란색 테두리가 생기고 배경색도 회색으로 변경되어 흰색입니다.

171
00:13:57,570 --> 00:14:02,850
따라서 우리가 여기에있는 자리 표시 자 텍스트를 추가해야하지만 입력을 위해해야 ​​할 일만 남았습니다.

172
00:14:03,030 --> 00:14:10,620
그래서 색인 HTL로 가서 입력 옆에 또는 자리 표시 자 속성을 추가 할 것입니다.

173
00:14:10,910 --> 00:14:12,270
그리고 이것은 당신이 원하는대로 될 수 있습니다.

174
00:14:12,470 --> 00:14:13,460
나는 그걸 일치시킬거야.

175
00:14:13,490 --> 00:14:18,800
따라서 새로 추가하고 새로 고치는 것입니다.

176
00:14:18,840 --> 00:14:19,490
우리는 거기에 갈.