1
00:00:00,150 --> 00:00:20,160
이제 H-1과 3 세의 텍스트 색상을 변경해 보겠습니다. 어두운 기본 부트 스트랩 색상이 여기에 들어가서 H-1 색상 흰색과 H-3 색상 흰색을 수행하고 새로 고칠 수 있습니다.

2
00:00:20,550 --> 00:00:22,790
그리고 우리는 흰색 텍스트를 얻습니다.

3
00:00:22,950 --> 00:00:31,660
하지만 우리는 H-1 쉼표 H-3을 사용하고 있기 때문에이 둘이 결합되어 있기 때문에 할 수 있습니다. 그러면 둘 다 흰색이됩니다.

4
00:00:32,010 --> 00:00:34,750
쉼표가있을 때마다 다른 그룹을 선택합니다.

5
00:00:34,770 --> 00:00:40,820
그래서 모든 쌍둥이는 모두 나이가 3이고 똑같은 것처럼 보입니다.

6
00:00:41,400 --> 00:00:50,340
그러나 우리는 이것을 더욱 단순화 할 수 있으며, 몸에있는 모든 것을 색상 흰색으로 지정할 수 있습니다.

7
00:00:50,340 --> 00:00:56,790
그리고 문제가 바뀌거나 단추가 바뀌거나 탐색 막대가 변경 될 수 있다고 생각할 수도 있지만 더 구체적이라는 것을 기억하십시오.

8
00:00:56,790 --> 00:01:14,780
우리는 부트 스트랩의 클래스를 가지고 있습니다. 대 H-1과 H-3입니다. 클래스 나 ID가 없으며 H1의 바디 컬러를 설정하여 스타일을 재정의하는 것이 더 쉽습니다. 세 살 때 그 색채를 물려 받았고 다른 모든 것들도 물려 받았습니다.

9
00:01:14,850 --> 00:01:16,030
그것은 단지 무시되었다.

10
00:01:16,050 --> 00:01:21,730
그래서 우리가 검사하면이 버튼을 말하면 우리가 살펴 봅시다.

11
00:01:22,650 --> 00:01:30,860
우리가 그것을 선택하면이 색상으로 설정된 색상이 Button 기본 클래스에 의해 3 3 3이라는 것을 알 수 있습니다.

12
00:01:30,990 --> 00:01:40,520
그러나 우리가 아래로 계속 스크롤하면 몸이 바로 흰색으로 설정되고 바로 넘어지는 것을 보게 될 것입니다.

13
00:01:40,650 --> 00:01:41,390
괜찮아.

14
00:01:41,970 --> 00:01:44,900
그래서 다시 두 사람이 모두 백인이라고 말했습니다.

15
00:01:44,910 --> 00:01:46,980
이제 글꼴 크기를 알아 보겠습니다.

16
00:01:47,160 --> 00:01:48,870
H-1도 그렇습니다.

17
00:01:48,930 --> 00:01:51,490
우리는 현재 접히지 않은 접혀 있어야합니다.

18
00:01:51,690 --> 00:02:11,570
그래서 그것은 대담 할 필요가 있습니다. 그리고 부모 요소보다 5 배 더 큰 5cms가되기를 바랍니다. 그래서 우리는 각각을 선택하고 글꼴 체중을 700으로 줄 것입니다. 이것은 우리가 대담한 새로 고침을 사용하는 방법입니다 .

19
00:02:11,970 --> 00:02:12,860
대담하게 볼 수 있습니다.

20
00:02:12,890 --> 00:02:21,100
이제 글꼴 크기를 5M-M으로 크게 확대합시다.

21
00:02:21,270 --> 00:02:24,480
이제 돌아가서 우리가 간다.

22
00:02:24,680 --> 00:02:25,880
그렇게 가까이에서보고 있습니다.

23
00:02:25,880 --> 00:02:32,230
이제 H1과 H3 사이의 비율은 똑같아 보입니다.

24
00:02:32,250 --> 00:02:37,590
우리는 H-3에 아무 것도 할 필요가 없습니다. 이제 이미지가 우리가 원하는 방식으로 작동해야합니다.

25
00:02:37,980 --> 00:02:41,460
그렇게하기 위해 전에는 보지 못했던 것을 보여 드릴 것입니다.

26
00:02:41,730 --> 00:02:52,190
어둠을 오른쪽으로 옮기려고합니다. 노인을 육안으로 검사하거나 육체를 살펴 본다면 두 사람 모두 페이지 끝 부분에서 멈추는 것을 보게 될 것입니다.

27
00:02:52,200 --> 00:02:53,280
그래서 여기에 관해서.

28
00:02:53,430 --> 00:02:55,500
그것이 내 문서의 시대의 끝입니다.

29
00:02:55,500 --> 00:03:09,860
그래서 몸을 커버하기 위해 이미지를 말하면 커버 할 배경 크기와 중심이되는 배경 위치를 말하면 바디의 크기가 고려되며 몸이 바로 끝나면 다르게 동작합니다.

30
00:03:10,080 --> 00:03:22,420
이를 해결하기 위해 HTL 요소의 높이를 100 %로 지정하면 컨테이너의 전체 문서 창을 100 % 차지하게됩니다.

31
00:03:23,150 --> 00:03:30,450
남자 신장은 100 퍼센트로 되돌아갑니다.

32
00:03:30,840 --> 00:03:33,580
지금 전체 화면으로 만들고 새로 고침 해 봅시다.

33
00:03:33,950 --> 00:03:37,630
그리고 우리의 이미지는 우리가 기대하는 방식대로 작동하고 축소됩니다.

34
00:03:37,860 --> 00:03:40,260
그리고 그것은 나에게도 좋아 보인다.

35
00:03:40,260 --> 00:03:43,300
이제 우리는 두 가지 주요 사항을 집중했습니다.

36
00:03:43,430 --> 00:03:45,470
첫 번째는 H.R ..

37
00:03:45,540 --> 00:03:50,540
우리가 훨씬 더 작아 져야하는 것은 너무 넓습니다.

38
00:03:51,180 --> 00:03:54,010
그리고 나는 또한 글꼴에 초점을 맞추기를 원합니다.

39
00:03:54,570 --> 00:04:01,170
미술 작품을 고르기 시작하면 400 픽셀을주는 것입니다.

40
00:04:01,170 --> 00:04:12,410
그래서 C S에서 우리는 h를 400 픽셀로 선택합니다.

41
00:04:12,450 --> 00:04:13,550
우리는 거기에 갈.

42
00:04:13,560 --> 00:04:23,460
제가 할 수있는 또 하나의 일은 당신이 여기에 가서 포더를 맨 위에 놓을 때 알아 차리지 못할 수도있는 조금 비열한 것입니다.

43
00:04:23,460 --> 00:04:26,150
하나의 픽셀 솔리드.

44
00:04:26,250 --> 00:04:31,620
그러면 여기에 8 8 8 8의 색깔이 있습니다.

45
00:04:32,220 --> 00:04:41,920
그리고 나서 하나의 픽셀 솔리드이고 이것은 투명한 색이 될 것입니다.

46
00:04:41,960 --> 00:04:46,610
영점 0 영점 2.

47
00:04:46,830 --> 00:04:49,530
그래서 이것은 그림자의 효과를주지 않을 것입니다.

48
00:04:49,990 --> 00:04:50,800
그러니주의하십시오.

49
00:04:50,820 --> 00:04:52,720
정말보기가 어렵습니다.

50
00:04:52,830 --> 00:05:08,490
나는 스크린 캐스트에서 픽업 할 것인지 모르겠다.하지만 우리가 가지고있는 것은 국경이며 바로 아래 국경 바로 아래에 약간의 그림자가있는 것처럼 보이는 밝은 회색 선이다. 밝은 색상.

51
00:05:08,900 --> 00:05:09,140
승인.

52
00:05:09,150 --> 00:05:15,050
따라서 저를 신뢰하거나 배경 이미지를 제거 할 수 있다면 충분히 볼 수 없으며 거기에서도 쉽게 볼 수 있습니다.

53
00:05:16,050 --> 00:05:20,690
다음은 내가 재미있게 사용했던 아이콘에 집중하겠습니다.

54
00:05:20,690 --> 00:05:21,510
그래서 나는 그것을 열었다.

55
00:05:21,500 --> 00:05:21,780
장난.

56
00:05:21,780 --> 00:05:22,320
굉장해.

57
00:05:22,350 --> 00:05:23,180
알아.

58
00:05:23,570 --> 00:05:25,980
그리고 우리는 여기서도 CD를 얻을 것입니다.

59
00:05:26,370 --> 00:05:30,970
시작을 클릭하면 거기에 복사 할 수있는 CDN이 있습니다.

60
00:05:30,990 --> 00:05:40,370
우리의 응용 프로그램에 넣으십시오. 그리고 그걸 꼭 저장하고 나서 실제 아이콘을 살펴 보겠습니다.

61
00:05:40,980 --> 00:05:45,030
우리가 사용한 첫 번째 것은 PA입니다.

62
00:05:45,930 --> 00:05:51,310
그리고 우리가 필요로하는 것은 모두 고급 ECO F F F F 대시 PA입니다.

63
00:05:51,660 --> 00:05:53,630
그래서 버튼 안에 넣었습니다.

64
00:05:54,030 --> 00:05:59,350
따라서 시작하기 바로 전에 버튼으로 가면 추가 할 것입니다.

65
00:05:59,430 --> 00:06:08,820
이제 우리가 돌아가서 새로 고침하면 우리는 거기에 작은 버튼이 있는지 확인할 수 있습니다. 그리고 손자국이 생기면 다음에 등록하고 로그인 할 수있는 두 개의 아이콘이 나타납니다.

66
00:06:09,500 --> 00:06:11,760
그리고 그 두 사람은 그들이 무엇인지 기억합니다.

67
00:06:11,790 --> 00:06:19,750
나는 우리가 당신이 다른 아이콘을 추가하고 싶다는 것을 알았을 때 등록하기 위해 다음에 여기에서 그것을 할 것입니다.

68
00:06:19,860 --> 00:06:34,880
이 시간 클래스는 F-8 PA가 아니고 F.A. 대시 사용자 대시 플러스는 더하기 기호가있는 아이콘을 제공하고 로그인하는 것은 플러스가없는 것과 동일한 것입니다.

69
00:06:34,920 --> 00:06:40,160
그래서 대시 사용자와 그 두 개의 아이콘이 있습니다.

70
00:06:40,250 --> 00:06:44,840
내가 한 일은 텍스트 그림자라는 것을 눈치 채지 못했을 것입니다.

71
00:06:45,030 --> 00:06:52,650
그래서 여기에 모든 텍스트 주위에 그림자가 있고 그것을 볼 수 있습니다.

72
00:06:52,640 --> 00:07:01,630
그것은 H-1과 H-3 주변에 있으며 테크 섀도우는 SS 텍스트 대쉬 그림자로 설정할 수 있습니다.

73
00:07:02,060 --> 00:07:04,010
그리고 그것에는 많은 조각들이 있습니다.

74
00:07:04,130 --> 00:07:08,040
여기서 오프셋 X와 오프셋 Y를 보았습니다.

75
00:07:08,120 --> 00:07:11,680
그림자가 얼마나 멀리 떨어져 있어야할까요?

76
00:07:11,810 --> 00:07:16,240
그러면 우리는 그 블러의 반경도 설정합니다. 그래서 기본적으로 얼마나 두껍게되어야합니다.

77
00:07:16,500 --> 00:07:21,430
그리고 제가 사용하고있는 색과 그림자는 조금 복잡합니다.

78
00:07:21,480 --> 00:07:26,930
조각이 너무 많아서 CSSA 파일에 한 번에 하나씩 입력해야합니다.

79
00:07:26,970 --> 00:07:34,620
따라서 콘텐츠 div의 내부에는 텍스트 대시 그림자가 추가되고 첫 번째 텍스트 그림자가 추가됩니다.

80
00:07:34,620 --> 00:07:48,210
0 픽셀 4 픽셀 3 픽셀 그리고 내가 빨간색으로 만듦으로써 정말 명백하게 만들 것이고, 내가 새로 고치면 처음에 추가하는 그림자가 있습니다.

81
00:07:48,260 --> 00:08:06,460
이제 가서 쉼표와 들여 쓰기로 두 번째 글자를 추가 한 다음 0 픽셀 8 픽셀 13 픽셀을 얻고 여기에 오렌지색을 넣고 그 중 하나를 봅니다.

82
00:08:07,350 --> 00:08:35,490
여러분은 밝은 오렌지색 아래에 더 흐리게 보이는 것을 볼 수 있습니다. 그리고 나서 첫 번째 숫자가 X 오프셋이고 y 오프셋이 18 픽셀이고 그 다음 23 픽셀이 반경 인 것을 기억하는 0 픽셀 인 세 번째 그림자가 있습니다. 이것 하나를 노랗게 만들고 우리는 우리가 밝은 빨간 역청 그림자를 가지고 있음을 볼 수 있습니다.

83
00:08:35,490 --> 00:08:37,730
그리고 나서 조금 더 멀리있는 오렌지색입니다.

84
00:08:37,830 --> 00:08:41,670
그리고 나서 훨씬 더 희미 해지고 더 넓어지는 노란색 하나.

85
00:08:41,700 --> 00:08:43,650
그래서 우리는 그 색깔을 바꾸고 싶습니다.

86
00:08:43,640 --> 00:08:45,370
우리는 그 일을하고 싶지 않습니다.

87
00:08:45,450 --> 00:08:48,160
그래서 색은 조금 덜 흥미 롭습니다.

88
00:08:48,210 --> 00:08:49,900
첫번째.

89
00:08:50,160 --> 00:08:54,740
0 제로 0 0.4.

90
00:08:54,770 --> 00:09:01,550
다음 중 하나는 0.4 0.1 대신 매우 유사합니다.

91
00:09:01,910 --> 00:09:06,210
그리고 그 중 하나가 0.1입니다.

92
00:09:06,210 --> 00:09:10,870
그래서 R.G. B-A 우리는 단지 회색의 다른 색조를 설정하고 있습니다.

93
00:09:11,970 --> 00:09:12,560
그리고 거기에 우리가 간다.

94
00:09:12,600 --> 00:09:16,510
흥미 로움은 덜하지만 잘하면 여기서 볼 수 있습니다.

95
00:09:16,560 --> 00:09:21,010
훨씬 더 미묘하지만 페이지에 약간의 깊이가 추가됩니다.

96
00:09:21,060 --> 00:09:21,330
큰.

97
00:09:21,330 --> 00:09:22,830
그것이 우리가해야 할 모든 것입니다.

98
00:09:23,250 --> 00:09:26,040
내가 다시 가서 몇 가지를 정리하자.

99
00:09:26,040 --> 00:09:32,300
내가 여기서 만들고 싶은 큰 점은 부트 스트랩을 사용하고 의존 할 수 있지만 모든 스타일에 의존하지 않는다는 것입니다.

100
00:09:32,340 --> 00:09:40,760
네, 네비게이션 막대를 계속 유지했지만 마지막 비디오에서 네비게이션 바의 색을 어떻게 바꿀 수 있는지 보여 주었지만 배경 이미지를 추가 한 글꼴을 변경했습니다.

101
00:09:40,770 --> 00:09:47,730
그래서 우리는 기본적으로 부트 스트랩을 기본 토대로 사용하고 그 다음에 모든 스타일을 맨 위에 추가하고 많이 사용하지 않았습니다.

102
00:09:47,850 --> 00:09:52,540
하지만 몇 줄의 코드만으로도 상당히 존경할만한 것을 만들었다 고 생각합니다.

103
00:09:52,640 --> 00:09:56,580
그리고이 정직한 텍스트 쉐도우 라인의 모든 부분에서 솔직히 말해 봅시다.

104
00:09:56,750 --> 00:09:57,310
굉장해.

105
00:09:57,440 --> 00:10:00,230
그래서 우리는 사이트를 상대적으로 좋아 보이게 만들었습니다.

106
00:10:00,270 --> 00:10:01,900
지금은 부트 스트랩으로 끝났습니다.

107
00:10:01,980 --> 00:10:05,460
우리는 다음 장에서 Javascript로 옮겨 가고 있습니다. 정말 재미 있습니다.

108
00:10:05,690 --> 00:10:12,670
우리는 단지 자바 스크립트에만 집중할 수 있도록 조금 더보기 좋은 사이트 및 것들을 만드는 것으로부터 벗어날 것입니다.

109
00:10:12,810 --> 00:10:18,560
그러나 우리는 모든 것을 다시 모으고 실제로 멋지게 보이지 않는 것들을 실제로하는 아름다운 사이트를 만들 것입니다.

110
00:10:18,570 --> 00:10:22,160
그래서 곧 출시 될 부트 스트랩을 즐겼습니다.

111
00:10:22,350 --> 00:10:25,900
그리고 언제나처럼 질문이 있으면 코드를 다운로드하는 것이 좋습니다.

112
00:10:25,890 --> 00:10:27,950
이 동영상에 대한 설명입니다.