1
00:00:00,390 --> 00:00:01,650
돌아 오신 걸 환영합니다.

2
00:00:01,660 --> 00:00:05,770
이 비디오에서 우리는 지금 당장 사이트의 스타일을 연구 할 것입니다.

3
00:00:05,850 --> 00:00:09,530
끝 부분에 보이는 것과는 전혀 다른 곳입니다.

4
00:00:09,810 --> 00:00:12,960
그래서 실제로 그것들을 나란히 비교합시다.

5
00:00:13,530 --> 00:00:14,840
여기에 우리가 있습니다.

6
00:00:15,030 --> 00:00:21,280
그래서 우리가 모서리를 반올림하여 여기에 약간의 간격을 더하는 큰 변화가 있습니다.

7
00:00:21,360 --> 00:00:23,260
버튼의 스타일을 변경합니다.

8
00:00:23,490 --> 00:00:32,370
그래서이 버튼들은 당신이 마우스를 가져갈 때까지 버튼처럼 보이지 않습니다. 그리고 우리는 호버 효과를 얻습니다. 우리 버튼은 확실히 끔찍합니다. 우리는 그들에게 어떤 호버 효과도 없습니다.

9
00:00:32,370 --> 00:00:35,200
또한 그들 위치는 약간 잘못되었습니다.

10
00:00:35,550 --> 00:00:48,310
당신이 볼 수 있듯이 내가 텍스트를 얻는 지 알 수 있겠지만 만약 내가 신선한 것이라면 텍스트가 양쪽면으로 모든 것을 푸시합니다.

11
00:00:48,470 --> 00:00:51,480
또한 여기에 애니메이션이 있습니다.

12
00:00:51,510 --> 00:01:02,990
그래서 내가 올바르게 클릭하면 잘못된 것을 클릭하면 얼마나 천천히 사라지는 지주의를 클릭하면 즉시 제거됩니다.

13
00:01:03,000 --> 00:01:05,790
그래서 우리는 전환을 추가하고 싶습니다.

14
00:01:05,790 --> 00:01:09,200
또한 우리는 여기에 H-1을 가지고 있습니다.

15
00:01:09,390 --> 00:01:10,920
더 많은 공간을 차지해야합니다.

16
00:01:11,130 --> 00:01:12,930
배경색을 변경해야합니다.

17
00:01:12,930 --> 00:01:14,520
글꼴을 변경하고 싶습니다.

18
00:01:14,910 --> 00:01:22,610
색상의 범위가 올바르게 지정되어 라인 자체에 있으므로 글꼴이 더 큰지 확인해야합니다.

19
00:01:22,710 --> 00:01:25,910
또한 전체 본문의 글꼴을 변경해야합니다.

20
00:01:25,950 --> 00:01:28,020
그래서 이들은 모두 같은 글꼴입니다.

21
00:01:28,080 --> 00:01:37,470
그리고 마지막으로 여러분은 스트라이프와 바디의 끝 사이에 약간의 공간이 있음을 알게 될 것입니다. 그리고 솔루션 버전에서는 공간이 전혀 없습니다.

22
00:01:38,030 --> 00:01:38,490
승인.

23
00:01:38,550 --> 00:01:41,580
먼저이 H-1을 다루기 시작하겠습니다.

24
00:01:41,990 --> 00:01:52,700
그래서 우리는 서브 라인 텍스트로 가서 H-1로 갈 것입니다. 그러면 솔루션에서 볼 수있는 것처럼 중간에 정렬 할 것입니다.

25
00:01:52,890 --> 00:01:54,170
상황이 중심에 맞춰져 있습니다.

26
00:01:54,210 --> 00:02:03,070
따라서 텍스트 정렬 센터를 추가하고 저장 및 새로 고침 만하면됩니다.

27
00:02:03,360 --> 00:02:06,520
약간의 개선.

28
00:02:06,540 --> 00:02:17,280
다음은 배경색을 변경하여 색상이 여전히 파란색이되도록 하겠지만 페이지를 새로 고침하면 잘 작동합니다.

29
00:02:17,400 --> 00:02:23,010
그러나 다시 새로 고침을 한 다음 게임에서이기거나 새로운 색상을 클릭합니다.

30
00:02:23,010 --> 00:02:31,970
그것은 검은 색으로 되돌아갑니다. 왜냐하면 자바 스크립트 코드는 자바 스크립트에서 어두운 회색의 검은 색으로 다시 설정하기 때문에 덮어 쓰기 때문입니다.

31
00:02:32,010 --> 00:02:37,320
우리는 2 3 2 3 2 3이 색상으로 리셋 할 곳을 찾아야합니다.

32
00:02:37,320 --> 00:02:38,040
여기에 우리가 간다.

33
00:02:38,100 --> 00:02:40,820
우리는 단지 이것을 여전히 푸른 색으로 바꾸고 싶습니다.

34
00:02:41,340 --> 00:02:44,690
그리고 그것이 새로 고침을 시작할 때 여전히 파란색으로 시작됩니다.

35
00:02:44,850 --> 00:02:45,970
나는 새로운 색깔을 얻는다.

36
00:02:45,990 --> 00:02:47,870
그것은 여전히 ​​파란색으로 유지됩니다.

37
00:02:48,360 --> 00:02:48,810
승인.

38
00:02:48,870 --> 00:02:49,830
그것이 바로 그 것입니다.

39
00:02:49,830 --> 00:02:54,430
이제 우리 H-1의 양쪽에있는 모든 검은 색 공간을 없애자.

40
00:02:54,870 --> 00:03:02,230
따라서 H-1에서는 왼쪽과 오른쪽의 여백 여백을 모두 없앨 것입니다.

41
00:03:02,250 --> 00:03:04,820
그렇게 할 때 어떤 일이 일어나는지 주목하십시오.

42
00:03:04,820 --> 00:03:10,720
그 검은 공간은 왼쪽 위와 오른쪽에있는이 작은 간격을 제외하고 모든면에서 사라집니다.

43
00:03:10,830 --> 00:03:14,870
그리고 그것은 실제로 몸에서 오는 H-1에서 오는 것이 아닙니다.

44
00:03:14,940 --> 00:03:19,420
그래서 우리가 몸에 가서 여백을 0으로 줄 수 있다고 고쳐주십시오.

45
00:03:19,680 --> 00:03:24,230
그리고 지금이 작은 틈에주의를 기울여서 내가 새롭게 할 것이고 사라지는 것이죠.

46
00:03:24,390 --> 00:03:30,040
그래서 우리의 하얀 줄무늬는 여기이 버전에서와 같이 모든면에서 옆으로갑니다.

47
00:03:30,150 --> 00:03:30,970
승인.

48
00:03:31,080 --> 00:03:33,080
다음은 재미에 초점을 맞추어 보겠습니다.

49
00:03:33,450 --> 00:03:36,180
따라서 재미는 모든 요소에서 동일합니다.

50
00:03:36,180 --> 00:03:41,690
버튼과 H-1 그리고 여기의 스팬은 모두 같은 폰트이고 약간 다른 폰트 가중치입니다.

51
00:03:41,850 --> 00:03:46,660
그리고 우리는 Avenir이라고 불리는 시스템 vaunts에 내장 된 폰트 중 하나를 사용하려고합니다.

52
00:03:46,920 --> 00:03:52,730
그래서 글꼴 패밀리 Avenir이 될 것입니다.

53
00:03:53,430 --> 00:03:56,440
그것은 모든 시스템에서 작동하지 않을 수도있는 글꼴입니다.

54
00:03:56,580 --> 00:04:03,930
그래서 우리는 몽 (Mont)이라는 또 다른 옵션을 추가 할 것입니다. Serat 그냥 그렇게.

55
00:04:04,740 --> 00:04:10,050
그래서 우리는 분명히 똑같이 보이지 않는이 재미로 끝납니다.

56
00:04:10,170 --> 00:04:12,460
그리고 그것은 글꼴 체중에 달려 있습니다.

57
00:04:12,540 --> 00:04:16,040
그래서 우리는 H1이기 때문에이 폰트의 무게를 바꿀 필요가 있습니다.

58
00:04:16,050 --> 00:04:21,520
기본값은 굵게 만들거나 700 또는 800 또는 900의 글꼴 체중을 갖도록하는 것입니다.

59
00:04:21,600 --> 00:04:24,350
우리가하고 싶은 것은 폰트 가중치를 보통으로하는 것입니다.

60
00:04:24,420 --> 00:04:32,230
그래서 우리 H-1이 글꼴 체중을 늘리고 저장합니다.

61
00:04:32,400 --> 00:04:33,400
새롭게 하다.

62
00:04:33,710 --> 00:04:34,700
그게 가까이에있어.

63
00:04:34,700 --> 00:04:37,550
이제 우리가 바꿀 필요가있는 몇 가지 다른 것들이 있습니다.

64
00:04:37,590 --> 00:04:56,510
첫 번째는 이것이 모두 대문자이며 텍스트 변환 대문자와 저장을 사용하여 RCSS로 그렇게 할 수 있다는 것입니다. 그래서 이제는 더 가까이서 보게 될 것입니다. 또한 우리의 색이 자체 선에 있고 우리가 스팬의 스타일을 약간 다르게하고 싶습니다. 하기 위해서.

65
00:04:56,570 --> 00:05:01,340
우리는 여기서 우리 팀으로 가서 사실상 우리는 노인을 조금 편집 할 것입니다.

66
00:05:01,700 --> 00:05:04,120
그리고 이것이 우리가이 일을 할 첫 번째 방법입니다.

67
00:05:04,160 --> 00:05:12,590
우리는 Pearcey SS로 다른 작업을하는 방법을 보게 될 것입니다.하지만 우리는 위의 스타일을 한 줄에 그 위대한 스타일이있는 곳부터 시작하여 휴식을 취하기 시작할 것입니다.

68
00:05:12,590 --> 00:05:26,440
우리는 abr 태그를 사용할 수 있습니다. 실제로 스타일에 대한 약간의 시선을 사로 잡은 스타일은 아니지만 약간의 리턴과 줄 바꿈을 추가하는 것이 빠르고 쉬운 방법입니다. 줄 바꿈.

69
00:05:26,620 --> 00:05:37,970
그래서 우리는 위대한 후 하나를 원합니다. 우리는 휴식을 원했고, 그리고 나서 우리의 스팬을 원했고 그리고 나서 우리는 또 다른 휴식을 원했고, 그 다음에 게임을 색칠했습니다. 그리고 우리가 새로 고침하면 우리는 점점 더 가까워지고있는 것을 볼 수 있습니다.

70
00:05:38,060 --> 00:05:41,280
이제 스팬을 훨씬 더 크게 만드는 데 집중해야합니다.

71
00:05:41,660 --> 00:05:44,160
그래서이 밴드는 컬러 디스플레이에 대한 아이디어를 가지고 있습니다.

72
00:05:44,300 --> 00:05:49,730
그래서 우리는 R C S S로 가서 색상 표시를 선택합니다.

73
00:05:49,900 --> 00:05:58,200
이드 컬러 디스플레이를 선택한 다음 글꼴 크기가 H-1 글꼴 크기의 200 %라고 말합니다.

74
00:05:58,550 --> 00:06:01,860
새로 고침하면 더 큰 글꼴 크기가 적용됩니다.

75
00:06:02,210 --> 00:06:03,630
그리고 우리는 점점 가까워지고 있습니다.

76
00:06:03,680 --> 00:06:05,210
우리는 여기서 휴식을 취하고 있습니다.

77
00:06:05,330 --> 00:06:10,040
우리는 여기서보다 우리가 줄 사이에 더 많은 공간을 가지고 있음을 알 수 있습니다.

78
00:06:10,280 --> 00:06:12,970
그래서 우리가 그 일을하기 위해 할 수있는 몇 가지 일이 있습니다.

79
00:06:12,980 --> 00:06:15,780
첫 번째는 선 높이를 변경하는 것입니다.

80
00:06:16,280 --> 00:06:21,580
그래서 우리는 줄 높이 1.1을주고 저장할 것입니다.

81
00:06:22,190 --> 00:06:27,040
그리고 우리의 버전을 다시 살펴보고 새로 고침을하면 조금 줄어드는 것을 볼 수 있습니다.

82
00:06:27,290 --> 00:06:30,440
그러나 이제 우리는 상단과 하단의 공간을 잃었습니다.

83
00:06:30,440 --> 00:06:32,190
우리는 거기에 약간의 공간이 필요합니다.

84
00:06:32,210 --> 00:06:35,050
그래서 우리가 할 일은 들어가서 패딩을 더하는 것입니다.

85
00:06:35,450 --> 00:06:47,050
그래서 우리는 왼쪽과 오른쪽이 아닌 위쪽과 아래쪽에만 패딩을 추가 할 것이고 위쪽과 아래쪽에 20 픽셀을 넣을 것입니다. 그래서이 패딩 20 픽셀과 0처럼 할 수 있습니다.

86
00:06:47,300 --> 00:06:58,590
우리는 또한 20 픽셀 위쪽으로 채우고 아래쪽으로 패딩을 할 수도 있습니다.하지만 이것은 새로 고침을하는 더 짧은 방법이며, 이제 거의 다 볼 수 있습니다.

87
00:06:58,880 --> 00:07:00,670
그래서 우리의 머리글은 괜찮아 보입니다.

88
00:07:00,880 --> 00:07:05,830
우리는 올바른 글꼴을 올바른 글꼴 색으로 대문자로 올바른 배경색으로 만듭니다.

89
00:07:05,870 --> 00:07:11,240
내가 플레이 할 때 올바른 표정이 유지되는지 확인합시다.

90
00:07:11,300 --> 00:07:14,800
우리가 해결해야 할 다음 일은이 탐색 바에있는 버튼입니다.

91
00:07:15,130 --> 00:07:18,080
그래서 우리는 그것들을 개선하기위한 갈 길이 멀다.

92
00:07:18,080 --> 00:07:23,840
우리가하고 싶은 첫 번째 작업은 테두리를 제거하여 버튼 주변에이 경계가 분명하지 않도록하는 것입니다.

93
00:07:23,870 --> 00:07:27,230
배경색도 없애고 싶습니다.

94
00:07:27,320 --> 00:07:29,290
따라서 여기서 볼 수있는 배경이 없어야합니다.

95
00:07:29,330 --> 00:07:33,210
마우스를 가져갈 때까지 또는 우리가 선택할 때까지 기다리는 것입니다.

96
00:07:33,250 --> 00:07:37,790
또한 글꼴 패밀리가이 글꼴과 같은지 확인하려고합니다.

97
00:07:37,790 --> 00:07:39,230
시작하겠습니다.

98
00:07:39,230 --> 00:07:48,620
그리고 모든 버튼을 선택하겠습니다. 버튼을 클릭하면 border none이라고 말하고 저장합니다.

99
00:07:48,800 --> 00:07:50,850
새로 고침 할 때 버튼에주의하십시오.

100
00:07:51,170 --> 00:07:51,790
승인.

101
00:07:51,980 --> 00:07:53,520
그래서 우리는 이제 국경이 없다.

102
00:07:53,720 --> 00:07:55,600
그러나 우리는 여전히 배경색을 가지고 있습니다.

103
00:07:55,850 --> 00:08:02,760
이제는 같은 배경을 사용하지 않고 저장하고 새로 고침하고 더 가까워지고 있습니다.

104
00:08:02,950 --> 00:08:04,800
이제 일반 텍스트 만 있습니다.

105
00:08:05,120 --> 00:08:09,520
그리고 우리는 여기에있는 것처럼 모든 텍스트를 대문자로 만드는 것으로 시작할 것입니다.

106
00:08:09,740 --> 00:08:16,330
그래서 우리는 텍스트 변형을 다시 사용하여 그 라인을 붙여 넣기 위에 복사하고 새로 고칩니다.

107
00:08:16,400 --> 00:08:18,840
이제 버튼은 모두 대문자입니다.

108
00:08:18,920 --> 00:08:25,370
다음으로해야 할 일은 버튼이 div 스트라이프 컨테이너의 맨 위에서 맨 아래로가는 것을 확인하는 것입니다.

109
00:08:25,400 --> 00:08:31,580
지금은 공간의 일부만 차지하므로 높이를 100 %로 설정하면됩니다.

110
00:08:31,750 --> 00:08:38,900
그리고 그것은 우리가 훨씬 더 가까워지는 것을 볼 수있는 것처럼 그것이 포함 된 요소의 100 퍼센트를 차지할 것임을 의미합니다.

111
00:08:38,930 --> 00:08:47,540
이제는 일부 색상을 변경하여 글꼴 크기를 글꼴 두께로 변경 한 다음 아직 설정하지 않은 호버 효과를 변경해야합니다.

112
00:08:48,010 --> 00:08:54,980
그 다음으로 할 일은 폰트가 약간 더 무거워 지도록하고 색상을 파란색으로 변경하는 것입니다.

113
00:08:55,040 --> 00:09:02,350
그래서 폰트 무게는 칠백 가지가 될 것이고 색깔도 여전히 푸른 색이 될 것입니다.

114
00:09:02,650 --> 00:09:05,370
그리고 새로 고침을 확인해 봅시다.

115
00:09:06,020 --> 00:09:14,750
그래서 약간 더 오래갑니다. 그리고 여러분은 또한 색깔이 지금 우리가 여기서 가지고있는 것과 같은 색깔의 푸른 색으로 바뀌 었음을 볼 수 있습니다.

116
00:09:14,760 --> 00:09:21,810
글자 간격을 1 픽셀로 변경하는 것은 아주 사소한 변화입니다.

117
00:09:21,830 --> 00:09:28,390
그리고 새로 고침 할 때주의를 기울이면 각 편지 사이에 약간의 간격이있는 것을 볼 수 있습니다.

118
00:09:29,090 --> 00:09:31,690
Leslie는 글꼴 크기에 초점을 맞추어 보겠습니다.

119
00:09:31,700 --> 00:09:33,690
그들은 조금 작게 보입니다.

120
00:09:33,980 --> 00:09:39,340
그래서 폰트 크기를 사용하고 상속 받도록 설정합니다.

121
00:09:39,500 --> 00:09:45,600
그리고 새로 고침하면 글꼴 크기를 상속받을 수 있고 명시 적으로 글꼴을 말할 필요가 없습니다.

122
00:09:45,620 --> 00:09:47,120
이제 살펴 보겠습니다.

123
00:09:47,620 --> 00:09:51,380
가장 큰 차이점 중 하나는 현재 서로 다른 간격을두고 있다는 것입니다.

124
00:09:51,670 --> 00:09:55,490
페이지가로드 되 자마자 여기에 공간이 있습니다.

125
00:09:55,490 --> 00:09:59,460
그러나 버튼을 클릭하기 전까지는 그 공간이 없습니다.

126
00:09:59,480 --> 00:10:17,220
그래서 우리가해야 할 일은 실제로 여기에 스팬 스타일을 적용하는 것입니다. 그리고 그 스팬을 메시지라고하며, 우리는 그 공간을 차지할 수있는 몇 가지 속성을 제공하고 싶습니다. 우리가해야 할 일은 하나만 바꾸면됩니다. 실제로 재산.

127
00:10:17,360 --> 00:10:28,830
그래서 우리는이 팬인 우리의 메시지를 표시하도록 선택할 것이고 우리는 display 속성을 줄 모양으로 바꿀 것입니다.

128
00:10:28,830 --> 00:10:41,790
BLOCK 그래서 내가 새로 고침하면 더 큰 차이를 눈치 채지 못할 것이다.하지만 20 %를주고 저장하고 새로 고침해야 할 필요가 있기 때문이다.

129
00:10:42,230 --> 00:10:48,790
이 화면의 20 %를 차지하는 항목이 없어도이 범위가 적용됩니다.

130
00:10:49,000 --> 00:10:52,920
그래서이 요소들을 우리가 원하는 부분에 밀어 넣습니다.

131
00:10:53,500 --> 00:10:55,690
살펴보고 비교해 봅시다.

132
00:10:55,700 --> 00:10:56,960
좋아, 꽤 가까워 보인다.

133
00:10:56,960 --> 00:11:05,450
이제 우리는 선택한 클래스를 올바른 색상과 호버 효과가 일치하도록 만드는 작업을 수행합니다.

134
00:11:05,450 --> 00:11:10,460
이제는 버튼에 들어가서 호버 (hover) 효과를 추가 할 것입니다.

135
00:11:10,460 --> 00:11:27,140
그래서 우리가해야 할 일은 Colan Huffer 버튼을 추가하는 것입니다. 글꼴 색을 흰색으로 변경하고 배경색을 파란색으로 변경해야합니다.

136
00:11:27,130 --> 00:11:31,370
그래서 우리는 기본적으로 색상을 반대로하고 저장하고 새로 고칩니다.

137
00:11:31,630 --> 00:11:34,090
내가 가리키면 그 효과를 볼 수 있습니다.

138
00:11:34,670 --> 00:11:35,550
완전한.

139
00:11:35,600 --> 00:11:39,920
우리가 선택한 수업은 똑같이 보일 것입니다.

140
00:11:39,950 --> 00:11:42,360
그냥 스타일을 복사하려고합니다.

141
00:11:42,530 --> 00:11:45,980
선택 될 때와 비교할 때 우리가 어떤 것을 떠올리게 할 때 차이점은 없습니다.

142
00:11:45,980 --> 00:11:47,260
그들은 똑같아 야합니다.

143
00:11:47,420 --> 00:11:52,790
그래서 당신은 옳은 것처럼 보일 수 있습니다.

144
00:11:52,850 --> 00:11:55,270
파란색 배경과 흰색 텍스트 색상이 표시됩니까?

145
00:11:55,340 --> 00:11:57,410
그리고 움직일 때 그것은 사라집니다.

146
00:11:57,680 --> 00:11:59,010
약간의 차이가 있습니다.

147
00:11:59,300 --> 00:12:04,470
솔루션 버튼 위로 마우스를 가져 가면 해당 색상이 희미 해집니다.

148
00:12:04,550 --> 00:12:08,390
그것은 나의 버전에 대한 단순한 스위치가 아닙니다.

149
00:12:08,650 --> 00:12:10,550
그것은 단지 즉시 토글합니다.

150
00:12:10,820 --> 00:12:16,440
버튼 선택기에서 C S 전환 속성을 사용하여이 문제를 해결할 수 있습니다.

151
00:12:16,670 --> 00:12:19,720
우리는 전환을 작성하고 전달할 것입니다.

152
00:12:19,720 --> 00:12:30,610
두 개의 인수는 두 개의 값이고 첫 번째 인수는 전환하려는 인수이고 우리의 경우 모든 속성에 인수를 추가 한 다음 다음 인수는 얼마나 오래 걸릴지를 나타냅니다.

153
00:12:30,710 --> 00:12:34,390
그래서 나는 처음에 2 초 동안 그것을 과장 할 것입니다.

154
00:12:34,390 --> 00:12:43,790
다시 말해 전환 속성은 CSX에 색상 변경이나 글꼴 크기 변경 및 속성 간의 전환 효과를 적용하는 방법을 알려줍니다.

155
00:12:43,790 --> 00:12:51,900
그래서 제가 여기서 말한 것은 우리의 경우 실제로 색상과 배경이되는 버튼에 속성이 언제든지 변경된다는 것입니다.

156
00:12:52,070 --> 00:12:59,190
따라서 색상이 변경되고 배경색이 변경 될 때마다 2 초 정도 걸릴 것이고 새로 고침하면 보게 될 것입니다.

157
00:12:59,420 --> 00:13:00,410
그리고 내가 떠 다닙니다.

158
00:13:00,560 --> 00:13:01,880
오 아직 작동하지 않습니다.

159
00:13:01,900 --> 00:13:04,750
나는 여기에서 나의 s를 놓치고있다 2.00 s.

160
00:13:04,850 --> 00:13:17,520
이제 새로 고침하고 마우스를 가져 가면 페이드 인하는 데 2 ​​초가 걸립니다. 선택한 클래스를 추가하기 위해 클릭하면 2 초가 걸리며 나가면 페이드 아웃하는 데 2 ​​초가 걸립니다.

161
00:13:17,750 --> 00:13:20,140
그래서 2 초는 확실히 길다.

162
00:13:20,560 --> 00:13:23,580
나는 약 3 초를 목표로하고 있다고 생각한다.

163
00:13:23,750 --> 00:13:25,950
그걸 시험해 봅시다.

164
00:13:25,970 --> 00:13:26,630
우리는 거기에 갈.

165
00:13:26,650 --> 00:13:28,990
그것은 나에게 꽤 좋아 보인다.

166
00:13:29,060 --> 00:13:38,550
마지막 큰 일은이 정사각형에 둥근 모서리를 가져 오는 것입니다. 둥근 모서리에 Border radius라는 속성을 사용하는 방식입니다.

167
00:13:38,690 --> 00:13:41,990
그래서 당신이보고 싶다면 중앙 문서를 열어 놓았습니다.

168
00:13:42,130 --> 00:13:42,970
좋은 읽을 거리 야.

169
00:13:43,100 --> 00:13:46,760
그러나 그들은 반경을 가지고 보드로 할 수있는 다른 것들에 대한 몇 가지 예를 보여줍니다.

170
00:13:46,900 --> 00:13:52,000
그래서 우리가 할 일은 약간의 경계 반경을주고 이것들은 사각형입니다.

171
00:13:52,150 --> 00:13:54,340
그리고 우리가 목표로하는 것을 살펴 보겠습니다.

172
00:13:54,350 --> 00:13:56,140
그래서 그것들은 우리가 얻고 자하는 것입니다.

173
00:13:56,180 --> 00:13:58,810
그래서 약간의 완만 한 곡선이었습니다.

174
00:13:59,500 --> 00:14:10,130
우리의 정사각형 클래스에 올라가서 경계 반지름을 지정하고 시작하기 위해 과장된 것을하십시오. 우리가 50 퍼센트를하면 어떻게되는지 보여 드리겠습니다.

175
00:14:10,490 --> 00:14:13,850
서클을 사용하고 실제로 서클을 사용하는 것을 선호 할 수 있습니다.

176
00:14:13,850 --> 00:14:22,780
나는 그들을 사용하는 것을 고려하고 있었지만, 결국이 둥근 모서리 사각형을 선호했고 내가 사용한 숫자는 15 퍼센트였다.

177
00:14:23,510 --> 00:14:25,590
그리고 우리는 그것들을 두 번 점검하고 비교할 것입니다.

178
00:14:25,850 --> 00:14:27,060
좋아 보이네.

179
00:14:27,080 --> 00:14:33,770
15 퍼센트이지만 원한다면 5 퍼센트를하고 새로 고침하면 어떻게되는지 보여 드리겠습니다.

180
00:14:34,010 --> 00:14:36,160
우리는 아주 약간 둥근 모서리를 얻습니다.

181
00:14:36,290 --> 00:14:47,810
그래서 저는 15 개의 새로 고침으로 돌아가서 멋진 둥근 모서리가 생기지 만, 애니메이션 효과를 얻으려고 노력해야합니다. 왜냐하면 내가 이것들 중 하나를 클릭하기 때문입니다.

182
00:14:47,810 --> 00:14:54,740
호버 효과가 페이드 인하듯이 색상이 바뀌는시기에주의하십시오.

183
00:14:54,740 --> 00:14:59,920
이를 달성하기 위해서는 전환 속성을 사용해야하지만 약간 다른 방법이 필요합니다.

184
00:14:59,990 --> 00:15:07,170
그래서 저는 사각형으로 갈 것입니다. 우리가 전환하고 싶은 유일한 것은 배경색이나 배경입니다.

185
00:15:07,220 --> 00:15:12,470
다시 2.0 초의 시간을 들여서 어떻게 보이는지 봅시다.

186
00:15:12,500 --> 00:15:16,160
그래서 나는 새로 고침을하고 이것들 중 하나를 클릭하겠습니다.

187
00:15:16,250 --> 00:15:19,710
페이드 아웃하는 데 2 ​​초가 걸리는 것을 볼 수 있습니다.

188
00:15:19,940 --> 00:15:21,940
그래서 우리는 그렇게 오래 지속될 것을 원하지 않습니다.

189
00:15:22,120 --> 00:15:26,290
어쩌면 아마도 6 점 째로 갈 것입니다.

190
00:15:26,750 --> 00:15:27,970
해보자.

191
00:15:28,420 --> 00:15:28,850
승인.

192
00:15:28,850 --> 00:15:31,610
그것은 합리적으로 보인다.

193
00:15:32,500 --> 00:15:36,680
배경이 바뀔 때마다 0.6 초가 걸릴 수 있습니다.

194
00:15:36,670 --> 00:15:46,710
그러나 다른 속성이 변경되면 속성이 변경 될 때 우리가 말한 버튼처럼 애니메이션을 적용하지 않으면 3 초가 걸릴 것입니다.

195
00:15:46,900 --> 00:15:49,790
우리는 배경만을 목표로 삼고 그 변화가 있습니다.

196
00:15:49,810 --> 00:15:52,450
0.6 초가 걸릴 것입니다.

197
00:15:52,490 --> 00:16:02,140
우리가 알고 싶은 한 가지 중요한 점은 전환 속성이 ​​모든 브라우저에서 가능한 한 브라우저 친화적 인 방식으로 작동하지 않는다는 것입니다.

198
00:16:02,140 --> 00:16:10,650
우리는 실제로 두 가지 속성을 추가해야합니다. 두 가지 속성은 기능상의 차이점을 알아 채지 못하지만 브라우저 지원만을위한 것입니다.

199
00:16:10,660 --> 00:16:20,250
첫 번째 것은 Web Kit Dasch 전환이며 우리는 여기에 똑같은 정확한 값을 추가 할 것입니다.

200
00:16:20,360 --> 00:16:26,550
그리고 우리는 이것이 하나의 돌진이되어야한다는 또 다른 것이 필요합니다. Moz M. Ozy.

201
00:16:26,600 --> 00:16:30,070
그래서 이들은 실제로 브라우저 접두사입니다.

202
00:16:30,230 --> 00:16:36,020
그래서 웹 키트는 브라우저가 사파리처럼 사용하는 엔진 인 웹 키트 용입니다.

203
00:16:36,200 --> 00:16:41,700
그리고 나서 우리는 모질 (Moz)을 가지고 있으며 짧은 형태의 모지 (Mozy)는 파이어 폭스가 만들어내는 질라 (Zilah)입니다.

204
00:16:42,050 --> 00:16:48,650
따라서 전환 속성이 ​​모든 단일 브라우저에 아직 내장되어 있지 않기 때문에 이것들은 더 많은 지원을 추가하기위한 것입니다.

205
00:16:48,640 --> 00:16:49,790
그래서 우리는 새로 고침.

206
00:16:50,060 --> 00:16:51,850
아무것도 달라 보이지 않아야합니다.

207
00:16:51,860 --> 00:17:08,660
우리 게임은 여전히 ​​똑같은 방식으로 작동하고 여전히 같은 애니메이션을 얻습니다. 우리는 모두 이것을 전환 한 후에 같은 것을 반복해야합니다. MOOC 전환을 위해 0.3 초가 지나야 전환됩니다.

208
00:17:08,650 --> 00:17:15,630
마지막으로 스트라이프와 그리드의 시작점 사이에 약간의 간격이 있습니다.

209
00:17:15,800 --> 00:17:18,950
여기에 우리가 가지지 않은 간격이 더 있다는 것을 알 수 있습니다.

210
00:17:19,150 --> 00:17:25,740
그리고 지금 우리가 검사하면 우리는 그리드 주위에있는 요소를 가지고 있습니다.

211
00:17:26,140 --> 00:17:34,320
우리는 사각형을 가지고 있고 우리는 div ID 컨테이너를 가지고 있고 그 컨테이너 div는 6 개의 사각형을 모두 차지합니다.

212
00:17:34,390 --> 00:17:41,950
그래서 우리는 그것을 사용할 수 있고 그 컨테이너 div에 약간의 공백을 추가합니다. 단지 위아래에 여백을 추가 할 것입니다.

213
00:17:42,110 --> 00:17:44,540
그래서 나는 우리가 이미 그것을 조금 스타일링했다고 생각합니다.

214
00:17:44,540 --> 00:17:45,550
여기에 우리가 간다.

215
00:17:45,590 --> 00:17:47,510
그래서 우리는 증거금이 0이라고 말했다.

216
00:17:47,650 --> 00:17:57,020
그리고 자동 대신 우리가 할 일은 여백이 위쪽과 아래쪽에 20 픽셀이고 왼쪽과 오른쪽에 자동으로 위치한다는 것입니다. 이것이 중심에있는 방법입니다.

217
00:17:57,050 --> 00:18:01,820
그래서 우리는 왼쪽과 오른쪽에 자동으로 나타나기를 원하지만 20 픽셀 위쪽에 새로 고침합니다.

218
00:18:02,330 --> 00:18:03,590
우리는 간격이 있습니다.

219
00:18:04,120 --> 00:18:05,940
OK. 그래서 우리는 지금 스타일과 함께 끝내게된다.