1
00:00:01,240 --> 00:00:04,800
좋아, 그럼이 블로그를 처음부터 만들어 보자.

2
00:00:04,920 --> 00:00:06,620
그러니 여기를 따라 가십시오.

3
00:00:06,630 --> 00:00:11,530
나는이 파일을 끝내기까지 새로운 파일을 만드는 것부터 시작하려고합니다.

4
00:00:12,000 --> 00:00:13,880
그래서 우리가하고 싶은 첫 번째 일.

5
00:00:14,070 --> 00:00:19,750
솔루션을 열어서 참조 할 수 있도록하고 색상 및 글꼴 크기가 정확한지 확인하겠습니다.

6
00:00:20,040 --> 00:00:35,990
그러나 우리가 정말로하고 싶은 첫 번째 작업은 파일 설정 작업이므로 두 가지 파일이 있습니다. HMO와 블로그에는 제목 블로그를 제외하고는 아무것도없고 Blog Dotsie SS라는 스타일 시트에 연결되어 있습니다. 비어 있습니다. .

7
00:00:36,030 --> 00:00:38,760
따라서 이것은 우리가 필요로하는 두 파일을 아는 것입니다.

8
00:00:39,090 --> 00:00:41,170
그리고 이제 시작해서 그들을 채우십시오.

9
00:00:41,790 --> 00:00:44,950
그래서 우리는 언제 이런 일을하는지 결정해야합니다.

10
00:00:44,970 --> 00:00:46,540
어디에서 시작해야할까요?

11
00:00:46,560 --> 00:00:57,420
그리고 가장 좋은 해결책은 우리 시대의 G 메일에서이 마크 업 중 일부를 시작하여 스타일을 지정하는 것입니다.하지만 실제로 스타일을 적용하기 전에 모든 단어를 완성 할 필요는 없습니다.

12
00:00:57,780 --> 00:01:04,290
그래서 저는 여러분이 여러분의 단서 하나 또는 두 개와이 헤더 중 하나를 우리 몸에두기 시작할 것입니다.

13
00:01:04,290 --> 00:01:14,130
그리고 이것을하기 위해 이것은 베이컨 ipsum을 제외하고 Lorem Ipsum 텍스트입니다. 그냥 베이컨 ipsum dot com을 추가하는 것입니다.

14
00:01:14,130 --> 00:01:17,340
클릭하여 베이컨을주고 단락 중 하나를 복사하십시오.

15
00:01:17,610 --> 00:01:24,330
나는 단지 내가 여기있는 것을 사용하려고하지만, 그 단어가 거기에있는 한 그 단어는 그렇게 중요하지 않습니다.

16
00:01:24,660 --> 00:01:26,840
따라서 베이컨을 사용하려면 ipsum을 사용하십시오.

17
00:01:26,940 --> 00:01:34,520
그러나 베이컨을 반대한다면 다른 ipsum을 선택하거나 자신의 단어를 구성하거나 실제로 자신의 블로그 게시물을 올릴 수 있습니다.

18
00:01:34,560 --> 00:01:35,810
그것은 이상적 일 것입니다.

19
00:01:36,030 --> 00:01:44,070
그리고 나서 저는이 표제 중 하나를 여기에 넣고 이것들을 모두 H1로 만드는 것이 합당 할 것입니다.

20
00:01:44,070 --> 00:01:50,820
그러나 일반적으로 규칙은 페이지에 하나의 H-1을 갖고 싶어서 페이지에서 가장 큰 것이되어야합니다.

21
00:01:50,850 --> 00:01:55,420
그래서 우리는 각각 여러개의 제목을 가지고 있기 때문에 여기에 여러 개의 기사 제목이 있습니다.

22
00:01:55,500 --> 00:02:11,360
저는 H-2와 함께 갈 것입니다.하지만 하루의 끝에는 전혀 문제가되지 않습니다. 왜냐하면 우리가 그것에 대해 모든 것을 스타일링 할 것이기 때문에 우리는 폰트 크기를 바꿀 것입니다. 색상 및 그 차이에 대한 성격 대 H1로 설정함으로써 결정될 모든 것들은 어쨌든 제거 될 것입니다.

23
00:02:11,640 --> 00:02:22,210
그래서 저는 H-2와 함께 갈 것입니다. 그리고 저는 이것이 가장 창의적인 제목이 아니라 저의 첫번째 기사라고 말하려고합니다.

24
00:02:22,410 --> 00:02:24,220
시작하기 전에 미리 보도록하겠습니다.

25
00:02:24,630 --> 00:02:27,300
그러니 열어.

26
00:02:27,360 --> 00:02:27,870
승인.

27
00:02:27,930 --> 00:02:30,090
지금까지 우리 블로그가 있습니다.

28
00:02:30,960 --> 00:02:33,100
그래서 우리는 많은 결정을 내릴 수 있습니다.

29
00:02:33,120 --> 00:02:38,620
제가 시작할지도 모르는 첫 번째 장소는이 몸이이 경계선을 갖게하는 것입니다.

30
00:02:39,180 --> 00:02:42,110
그래서 마지막 비디오에서 색상을 제공했습니다.

31
00:02:42,120 --> 00:02:56,240
저는이 색을 여기에 복사 할 것이고 몸을 선택할 수 있도록 물의 몸을 줄 것입니다. 그러면 우리가 할 일은 경계선이라고 말하면서 20 픽셀의 색을 띄게됩니다.

32
00:02:56,370 --> 00:02:57,930
그리고 그걸 확인해 봅시다.

33
00:02:58,560 --> 00:02:59,090
승인.

34
00:02:59,220 --> 00:03:05,120
그래서 우리가보기를 원할 것 같은 방법을 보이지는 않습니다. 그러나 거기에 도착하면 우리는 국경을가집니다.

35
00:03:05,580 --> 00:03:08,350
우리가 실제로 비교할 수 있도록 전체 크기로 만들어 보겠습니다.

36
00:03:09,120 --> 00:03:16,390
당신이 알아 차릴 또 다른 것은 거기에 우리의 국경은 온 몸이 전체 페이지를 차지하는 모든 방법으로가는 하나의 문제입니다.

37
00:03:16,560 --> 00:03:19,500
여기에서 몸은 페이지의 일부만 차지합니다.

38
00:03:19,560 --> 00:03:21,890
그리고 양쪽에 간격이 있습니다.

39
00:03:21,930 --> 00:03:28,550
그리고 우리 본문에있는 우리의 말은 국경에 대항하기 때문에 우리가 가지고 있지 않은 안쪽에 간격이 있습니다.

40
00:03:28,590 --> 00:03:31,820
먼저 문제를 해결하고 해결해 봅시다.

41
00:03:31,860 --> 00:03:33,520
물론 패딩이 필요합니다.

42
00:03:33,630 --> 00:03:35,930
그래서 이것은 모든면에서 20 픽셀 패딩입니다.

43
00:03:35,970 --> 00:03:40,430
아래쪽과 왼쪽과 오른쪽에도 패딩이 있음을 볼 수 있습니다.

44
00:03:40,470 --> 00:03:50,560
그래서 몸에서 4면 모두에 20 픽셀의 패딩을 지정하면됩니다.

45
00:03:50,580 --> 00:03:52,510
그래서 조금 더 가깝습니다.

46
00:03:52,530 --> 00:04:15,360
우리가해야 할 다음 작업은 너비가 정확하도록하는 것입니다. 전체 화면 일 때 너비가 올바른 크기가 될뿐만 아니라 축소 될 때이 너비가 700 픽셀로 유지되는 것을 볼 수 있습니다. 잠시 동안 700 픽셀로 유지되고 축소되고 축소됩니다.

47
00:04:15,360 --> 00:04:17,730
그래서 우리는 그것이 일어날 수 있는지 확인하기를 원합니다.

48
00:04:17,820 --> 00:04:19,660
그래서 우리는 약간의 트릭을 사용하려고합니다.

49
00:04:19,830 --> 00:04:24,220
그리고 나서 당신이하고 싶은 또 하나의 일은 그것이 지금 당장 집중되고 있는지 확인하는 것입니다.

50
00:04:24,360 --> 00:04:25,330
우리는 정말로 말할 수 없습니다.

51
00:04:25,350 --> 00:04:28,210
그러나 그것은 중심에 있지 않습니다. 왼쪽에있을 것입니다.

52
00:04:28,230 --> 00:04:30,850
그럼 먼저 내부에 추가하겠습니다.

53
00:04:31,700 --> 00:04:49,660
그러니 700 픽셀을 사용하여 저장한다고 가정 해 봅시다. 왼쪽에서이 사진에 대해 이야기하고 있습니다. 중간에 중심을두고 싶습니다. 상자에서 말한 자동 또는 마진 자동 트릭을 사용할 수 있습니다. 모델 비디오.

54
00:04:50,100 --> 00:04:54,920
그래서 우리는 마진을 설정하고 바로 가기를 사용하려고합니다.

55
00:04:55,050 --> 00:05:01,190
그래서 우리는 상하의 픽셀을 0 픽셀로하고 왼쪽과 오른쪽으로 오토를 할 것입니다.

56
00:05:01,230 --> 00:05:03,900
우리가 4 명이 아니라 여기에 2 명을 할 때를 기억하십시오.

57
00:05:04,020 --> 00:05:06,640
이것은 위쪽과 아래쪽이며 이것은 왼쪽과 오른쪽입니다.

58
00:05:07,230 --> 00:05:15,740
따라서 자동으로 센터에 배치되지만, 맨 위와 맨 아래에 0을 지정하면 상단에 맞춰 나타납니다.

59
00:05:16,020 --> 00:05:17,870
여기이 하나가 아닙니다.

60
00:05:17,880 --> 00:05:18,720
우리는 약간의 공간이 있습니다.

61
00:05:18,720 --> 00:05:20,950
거기에 20 픽셀 있습니다.

62
00:05:21,210 --> 00:05:22,630
그래서 그것은 간단한 수정입니다.

63
00:05:22,770 --> 00:05:26,350
같은 라인이 20Px로 바뀝니다.

64
00:05:26,370 --> 00:05:27,490
우리는 x가 필요합니다.

65
00:05:27,510 --> 00:05:30,580
우리는 전에 0이 아니었기 때문에 그냥 0으로 남겨 두었습니다.

66
00:05:30,720 --> 00:05:33,970
그러나 숫자가있을 때 우리는 다음을 필요로합니다.

67
00:05:33,990 --> 00:05:36,110
OK 그래서 꽤 가까워 보인다.

68
00:05:36,120 --> 00:05:46,470
유일한 것은 축소 될 때 더 이상 700 픽셀을 말할 수 없을 때까지이 값을 700 픽셀로 유지하기를 원합니다.

69
00:05:46,470 --> 00:05:59,400
그리고 우리는 그것이 축소되기를 원합니다. 그리고 그것을하는 것은 꽤 쉽습니다. 실제로 우리가하고 싶은 모든 것은 이것을 최대 너비로 변경 한 다음 그것을 백분율로 할당 할 것입니다.

70
00:05:59,700 --> 00:06:03,760
그리고 이것이 말하는 것은 당신이 필요할 때 그것을 80 퍼센트로 만듭니다.

71
00:06:03,900 --> 00:06:07,540
하지만 최대 700 픽셀로 만들 수 있습니다.

72
00:06:07,620 --> 00:06:09,780
그래서 내가 새로 고침 할 때 그 모습을 보여 드리겠습니다.

73
00:06:09,780 --> 00:06:19,180
최대 7 백 픽셀에 추가되어 변경되지 않으므로이 경우 80 %가 700 픽셀 이상인지 확인합니다.

74
00:06:19,200 --> 00:06:27,840
그래서 700시에 700시에 머무르며 여기까지 줄어들 기 시작합니다.

75
00:06:27,840 --> 00:06:31,250
현재 80 %가 700 픽셀 미만입니다.

76
00:06:31,770 --> 00:06:32,030
승인.

77
00:06:32,040 --> 00:06:35,370
이제 우리는 우리의 기본 몸을 셋업했습니다.

78
00:06:35,370 --> 00:06:39,330
그 다음으로하고 싶은 것은 우리 Funt가가는 것입니다.

79
00:06:39,330 --> 00:06:49,300
그래서 우리가 마지막 비디오에서 가지고있는 음표로 가면 폰트는 Source sense pro라고 부릅니다.

80
00:06:49,320 --> 00:06:54,370
이제 Google phos로 가서 Pro 발신 소스를 찾아 보겠습니다.

81
00:06:54,540 --> 00:07:06,860
그래서 여기에서 열어 보았습니다.하지만 다시 Google은 com의 글꼴을 그어서 소스에 대한 검색을 통해 여기에 프로를 보내어 콜렉션을 사용하도록했습니다.

82
00:07:07,140 --> 00:07:09,990
그리고 이제 우리는 어떤 글꼴 가중치를 우리가 원하는지 선택할 수 있습니다.

83
00:07:10,250 --> 00:07:17,390
그리고 저는 원래 비디오에서이 사실을 말하지 않았지만 이것은 폰트 가중치 400의 일반적인 폰트입니다.

84
00:07:17,520 --> 00:07:19,220
그리고 이것은 더 무거운 무게입니다.

85
00:07:19,230 --> 00:07:20,050
접었습니다.

86
00:07:20,100 --> 00:07:22,090
그래서 우리는 그 두 가지를 모두 원할 것입니다.

87
00:07:22,440 --> 00:07:26,970
그래서 대담한 400 700으로 정상입니다.

88
00:07:26,970 --> 00:07:29,700
우리는 여기서 내려 가서이 링크를 복사합니다.

89
00:07:29,700 --> 00:07:37,180
이제 Google 글꼴을 제거 할 수 있으며 HMO로 이동하여 해당 링크를 붙여 넣기 만하면됩니다.

90
00:07:37,950 --> 00:07:41,530
이제 우리는 소스 감각을 사용할 수 있습니다.

91
00:07:42,180 --> 00:07:51,100
두 단락과 두 살 모두에 할당하고이 날짜에 있기를 원합니다.

92
00:07:51,270 --> 00:08:00,290
그래서 우리가 할 수있는 것은 단락을 선택하고 글꼴 패밀리 소스 감각 프로라고 말하면 H-1에 대해서도 똑같이 할 수 있습니다.

93
00:08:00,990 --> 00:08:03,640
그러나 이것이 우리의 성공을 실제로 사용하는 것은 아닙니다.

94
00:08:03,780 --> 00:08:07,950
우리 코드는 우리가 사용하고자하는 모든 요소를 ​​약간 반복 할 것입니다.

95
00:08:07,950 --> 00:08:10,230
우리는 이걸 추가해야 할 것입니다.

96
00:08:10,770 --> 00:08:15,140
그래서 우리가 대신하는 것은 몸에 적용하는 것입니다.

97
00:08:15,690 --> 00:08:19,420
그리고 몸 안으로 들어가서 모든 것을 몸 안으로 상속받습니다.

98
00:08:19,470 --> 00:08:32,100
그래서 글꼴 가족 소스와 프로 및 저장 새로 고침 우리가 가서 H-1 그것을 사용하거나 H-2 우리는 단락이 있습니다.

99
00:08:32,810 --> 00:08:34,560
지금까지는 꽤 좋아 보이네요.