1
00:00:00,840 --> 00:00:06,440
따라서 아직 다루지 않은 가장 중요한 개념 중 하나는 요소의 위치입니다.

2
00:00:06,600 --> 00:00:10,290
그러면 페이지를 배치하거나 div를 오른쪽 상단으로 이동하는 방법은 무엇입니까?

3
00:00:10,410 --> 00:00:15,720
또는 앵커 태그를 더 넓게 만들거나 이미지 사이에 간격을 어떻게 추가할까요?

4
00:00:15,780 --> 00:00:20,110
이 모든 것이 정말로 중요하며 상자 모델이라는 것과 관련이 있습니다.

5
00:00:20,220 --> 00:00:31,190
따라서 박스 모델은 기본적으로 HD의 모든 요소의 중심에 있으며, 기본적으로 모든 요소에는 사각형 상자가 있습니다.

6
00:00:31,680 --> 00:00:39,620
그래서 우리는 여기 MDA의 어떤 웹 페이지로 가도 볼 수 있습니다. 검사관을 열어 돋보기를 선택했습니다.

7
00:00:40,010 --> 00:00:44,810
그리고 모든 요소 위로 마우스를 가져 가면 주위에 상자가 있음을 알 수 있습니다.

8
00:00:44,910 --> 00:00:48,180
그래서이 H2에는 그 주위에 파란 상자가 있습니다.

9
00:00:48,180 --> 00:00:49,810
이 상자에는 상자가 있습니다.

10
00:00:50,130 --> 00:00:53,370
특히 boxy하지 않은 것들조차도.

11
00:00:53,490 --> 00:00:56,320
그래서이 둥근 모서리 ..

12
00:00:56,490 --> 00:00:58,080
주변에는 상자가 있습니다.

13
00:00:58,080 --> 00:00:59,310
무대 뒤에서.

14
00:00:59,520 --> 00:01:09,130
그래서 여기와 이것 하나는 정말로 둥글거나 둥글지 않고 둥근 모서리를 가진 상자 형이지만 아직 상자입니다.

15
00:01:09,240 --> 00:01:15,870
그래서이 상자들은 우리가 다른 속성을 스타일링 할 수 있기 때문에 정말 유용합니다.

16
00:01:15,870 --> 00:01:19,350
따라서 모든 상자에는 4 개의 속성 또는 4 개의 다른 부분이 있습니다.

17
00:01:19,350 --> 00:01:23,550
많은 속성이 있지만 우리가 조작 할 수있는 상자 부분에 있습니다.

18
00:01:23,610 --> 00:01:29,790
MDA에서 나온이 다이어그램이 단락이라고 가정 해 봅시다.

19
00:01:29,790 --> 00:01:42,210
그래서 단락에 일부 텍스트가 있고 그것을 주황색이나 노란 경계선으로 표시하고 사용자가 텍스트와 경계선을 보지만 실제로는 다른 일이 일어나고 있습니다.

20
00:01:42,360 --> 00:01:47,920
그래서 국경과 텍스트 사이에는 패딩이라는 것이 있습니다.

21
00:01:48,000 --> 00:01:51,040
따라서 패딩은 경계 안의 공간 일뿐입니다.

22
00:01:51,190 --> 00:02:01,060
콘텐츠와 테두리 사이에는 여백이 있고 그 다음에 여백이 있습니다.이 여백은 외부 테두리와 다른 테두리 사이에 있습니다.

23
00:02:01,170 --> 00:02:04,720
그래서 우리는 종종 여백을 사용하여 요소 사이에 간격을 추가합니다.

24
00:02:04,860 --> 00:02:11,340
그래서 우리가 두 단락을 가지고 있고 그것들이 더 멀리 떨어져 있기를 원한다면 나는 여백을 사용하고 그것을 증가시킬 것입니다.

25
00:02:11,880 --> 00:02:18,700
이제 우리는 실제로하기 전에 우리가 사용하기를 원하는 속성 중 일부 구문에 대해 자세히 살펴 보겠습니다.

26
00:02:18,720 --> 00:02:29,870
나는 당신에게 가장 흥미로운 것 중 첫 번째 것을 만들기를 고대 할 수있는 두 가지를 보여주기를 원하지만 중요한 것은 우리가 지금 이와 비슷한 것을 만드는 방법을 가지고 있다는 것입니다.

27
00:02:29,880 --> 00:02:39,330
지금까지 우리는 실제로 연결된 상자가 서로 연결되어있는 상자를 만드는 방법이 없었습니다. 그러나 상자가 비어있어 안에는 텍스트가 없습니다.

28
00:02:39,330 --> 00:02:50,830
그래서 우리는 박스 모델에 대해 배우고 그것을 여기에 적용하여이 틱택 매듭 보드를 만든 다음 허구의 사진 작가를위한 포트폴리오 사이트를 만들 계획입니다.

29
00:02:51,450 --> 00:02:52,350
그래서 이것은 좋다.

30
00:02:52,420 --> 00:03:00,690
이미지가 반응하므로 크기가 바뀌고 창 크기와 눈금이 바뀝니다.

31
00:03:00,750 --> 00:03:04,270
이 모든 것은 여기에서 배우려는 개념을 기반으로합니다.

32
00:03:04,710 --> 00:03:07,020
그래서 저는 여기에 서서 숭고하게 열어 갈 것입니다.

33
00:03:07,560 --> 00:03:10,510
그리고 저는 제가 만든 아주 간단한 문서를 가지고 있습니다.

34
00:03:10,740 --> 00:03:12,600
그래서 단순한 HTML입니다.

35
00:03:12,660 --> 00:03:14,670
연결된 스타일 시트가 있습니다.

36
00:03:14,700 --> 00:03:15,330
그것은 비어 있습니다.

37
00:03:15,330 --> 00:03:18,930
몇 가지 의견과 두 개의 단락을 제외하고.

38
00:03:18,930 --> 00:03:27,660
그래서 이것을 열어 보면 매우 지루하다는 것을 알 수 있습니다. 상자 모델을 가지고 놀기 위해 이것을 사용하려고합니다.

39
00:03:28,860 --> 00:03:43,370
그래서 나는 성공하게 될 것이고 단락을 고를 것입니다. 그런 다음이 주석들을 내부에 복사하여 제가하고있는 일을 시각적으로 알려주기 위해 코드를 작성할 수 있습니다.

40
00:03:43,380 --> 00:03:45,740
그래서이 경계를주는 것으로 시작합시다.

41
00:03:45,900 --> 00:03:57,630
따라서이 경계선을 검토해야하며 픽셀 파랑으로 그 새로 고침을 저장하고 콘텐츠 주변에 경계선이 있음을 알 수 있습니다.

42
00:03:57,630 --> 00:04:02,360
그리고 여기서도 눈에 띄는 점은 여기에있는 콘텐츠가 화면 전체에 걸쳐 있다는 것입니다.

43
00:04:02,370 --> 00:04:09,620
우리 경계는 여기서 멈추지 않습니다. 왜냐하면 우리가 기본적으로 단락을 만들 때 화면 전체에 걸쳐 있기 때문입니다.

44
00:04:09,630 --> 00:04:23,260
따라서 텍스트의 단락 자체의 너비를 변경하려면 width 속성을 사용할 수 있습니다. 그러면 앞으로 가서 너비를 1로 지정합니다.

45
00:04:23,490 --> 00:04:25,390
시작하려면 200 픽셀을 사용합시다.

46
00:04:25,890 --> 00:04:29,190
그리고 새로 고침하면 너비가 바뀌 었음을 알 수 있습니다.

47
00:04:29,190 --> 00:04:34,920
내가 조사하면 내용이 파란색이 아닙니다.

48
00:04:35,940 --> 00:04:37,840
그리고 나서 우리는 그 주변에 경계선을 가지고 있습니다.

49
00:04:38,310 --> 00:04:39,700
따라서 콘텐츠는 파란색입니다.

50
00:04:40,110 --> 00:04:45,350
그리고이 다이어그램에서이 상자는 바로 여기이 요소 상자입니다.

51
00:04:45,630 --> 00:04:48,330
그리고 나서 우리는 바로 그 경계선을 가지고 있습니다.

52
00:04:48,330 --> 00:04:52,020
국경과 내용 사이에는 공간이 없습니다.

53
00:04:52,020 --> 00:04:56,920
너비가 다른 것도 하나 있고 높이도 있습니다.

54
00:04:57,060 --> 00:05:02,360
그러니 300 픽셀의 높이를하고 방금 공간을 추가했는지 봅시다.

55
00:05:02,370 --> 00:05:06,620
나는 그것을 제거 할 것이지만 우리가 사용할 수있는 높이가 있습니다.

56
00:05:06,930 --> 00:05:11,760
백분율을 사용할 수 있도록 픽셀을 사용하지 않아도됩니다.

57
00:05:13,890 --> 00:05:15,780
그리고 그것들은 정말 유용해서 보여 드리겠습니다.

58
00:05:15,810 --> 00:05:23,310
50 %를하자. 그러면 50 %가 무엇인지 궁금 할 것입니다.

59
00:05:23,310 --> 00:05:27,290
그리고 대답은 부모 요소의 50 %라는 것입니다.

60
00:05:27,300 --> 00:05:35,240
따라서이 경우에는 단락 내부의 단락이 본문을 가로 지르는 중간입니다.

61
00:05:35,310 --> 00:05:37,390
우리의 경우에는 본문이 전체 페이지입니다.

62
00:05:37,410 --> 00:05:38,240
그것은 모든 길을 가로 지르고있었습니다.

63
00:05:38,250 --> 00:05:40,620
그래서 우리는 페이지의 절반으로 끝납니다.

64
00:05:40,800 --> 00:05:54,890
그리고 창 크기를 변경하면이 점도 좋으므로 많은 사람들이이를 사용하므로이 이미지 격자에서 실제로 사용하게 될 것입니다.

65
00:05:55,280 --> 00:05:59,490
이미지가 너비를 변경하고 그 비율을 볼 수 있습니다.

66
00:06:00,040 --> 00:06:04,590
좋아, 지금은 그렇게 유지할거야.

67
00:06:04,770 --> 00:06:11,600
그리고 우리가 이야기 할 다음 속성은 패딩입니다. 패딩은 요소와 경계 사이의 공간입니다.

68
00:06:11,750 --> 00:06:15,410
그리고 바로 지금 우리는 국경이 바로 위에 있지 않습니다.

69
00:06:15,840 --> 00:06:22,120
그래서 패딩 (padding)이라는 속성이 있습니다. 픽셀 수를 줄 수 있고 시작하려면 10 픽셀을 사용합시다.

70
00:06:22,230 --> 00:06:25,130
파일 새로 고침을 저장하십시오.

71
00:06:25,410 --> 00:06:28,700
이제 모든면에 10 픽셀의 여백이 있습니다.

72
00:06:29,040 --> 00:06:49,760
따라서 지금 검사하면 녹색 콘텐츠가 표시되어 파란색 콘텐츠가 있고 그 다음 테두리와 콘텐츠 사이에 녹색이 표시되므로 분명히이를 늘릴 수 있고 많은 것을 얻을 수 있습니다 내부에 더 많은 공간이 있습니다.

73
00:06:50,490 --> 00:06:52,890
그러나 이것이 패딩을 설정하는 유일한 방법은 아닙니다.

74
00:06:52,920 --> 00:06:57,250
이것은 4면 모두에서 정확히 동일하게 설정됩니다.

75
00:06:57,380 --> 00:07:01,760
그러나 때로는 국경과 같은 한면 또는 두면에만 패딩을 원합니다.

76
00:07:01,800 --> 00:07:09,830
더 긴 버전의 경우에는 경계가있는 상위 10 픽셀 경계 인 하위 5 픽셀의 바로 가기가 있습니다.

77
00:07:09,900 --> 00:07:20,270
덧씌우 기와 같은 것은 그것을 주석 처리하고 우리는 40 픽셀과 신선한 채움과 같은 것을 할 수 있습니다.

78
00:07:20,520 --> 00:07:22,090
우린 여기서 패딩을합니다.

79
00:07:22,320 --> 00:07:24,250
그리고 그것은 패딩을위한 유일한 장소입니다.

80
00:07:24,330 --> 00:07:30,830
그리고이 파란색 공간은 여기에서 나온 실제 내용 인 패딩이 아니라는 것을 기억합니다.

81
00:07:30,990 --> 00:07:33,610
오른쪽에 공간이있는 것처럼 보입니다.

82
00:07:33,620 --> 00:07:35,930
그것은 다른 곳에서 왔습니다.

83
00:07:37,170 --> 00:07:40,920
그래서 우리가 여기서 할 수있는 또 다른 일은 마진을 가지고 노는 것입니다.

84
00:07:41,160 --> 00:07:43,780
마진은 퍼즐의 마지막 부분입니다.

85
00:07:43,860 --> 00:07:45,900
국경 밖의 공간입니다.

86
00:07:45,900 --> 00:07:47,980
그래서 요소들 사이.

87
00:07:48,450 --> 00:08:01,280
여기이 공간을 여기에서 늘리거나 늘리거나, 예를 들어 이미지 사이의 공간을 Marjan을 사용하여 설정하기 때문에 유용 할 것입니다.

88
00:08:01,500 --> 00:08:10,240
그래서 실제로는 패딩처럼 보이기 때문에 여백을 말하고 시작과 새로 고침을 위해 100 픽셀과 같은 명백한 작업을 해봅시다.

89
00:08:10,410 --> 00:08:17,100
그리고 무슨 일이 일어 났습니까? 경계 외부에있는 요소의 모든면에 100 픽셀의 공간이 생겼습니다.

90
00:08:18,240 --> 00:08:19,360
그래서 측면을 찾으십시오.

91
00:08:19,980 --> 00:08:28,710
Chrome에서는 주황색으로 식별되므로 파란색은 내용입니다. 녹색은 주황색으로 채우는 것이 여백입니다.

92
00:08:28,800 --> 00:08:30,030
그래서 패딩처럼.

93
00:08:30,030 --> 00:08:38,890
가끔 여백의 한 부분을 한 면만 설정하여 여백 상단이 500 픽셀 인 것처럼 처리 할 수 ​​있습니다.

94
00:08:38,900 --> 00:08:46,070
그리고 나서 그들이 지금이 곳으로 와서 구해 내면 왼쪽의 상단에 공간 만 남습니다.

95
00:08:46,160 --> 00:08:48,180
그리고 그 위에 더 많은 공간이 있습니다.

96
00:08:48,170 --> 00:08:50,480
아래쪽이나 왼쪽 또는 오른쪽에 아무것도 없습니다.

97
00:08:50,610 --> 00:08:52,710
그래서 마진입니다.

98
00:08:52,710 --> 00:08:59,510
그래서 때로는 여백의 모든면에 값을 추가해야하지만 4 가지 다른 선으로 값을 지정하지 않으려합니다.

99
00:08:59,660 --> 00:09:06,500
그래서 우리가 여기에 있다면 정확히 똑같아지기를 원하지는 않지만 마진 여백 위쪽 여백은 여백을 오른쪽으로 말하지 않아도됩니다.

100
00:09:06,570 --> 00:09:09,550
경계와 같은 또 다른 지름길이 있습니다.

101
00:09:09,570 --> 00:09:14,780
또는 우리는 한 번에이 일을 할 수 있습니다. 우리는이 마진을 할 수 있고 네 가지 값을 줄 수 있습니다.

102
00:09:14,820 --> 00:09:21,300
첫 번째는 맨 위, 오른쪽은 맨 아래입니다.

103
00:09:21,750 --> 00:09:36,820
500 픽셀을하고 나서 왼쪽으로하고, 이렇게하면 값이 모두 다른 멋진 4면 여백을 얻을 수 있습니다. 단 한 줄로해야합니다.

104
00:09:37,290 --> 00:09:49,920
그래서 여기를 살펴보고 500 픽셀을 얻었는지 확인해 봅시다. 20 픽셀 위에 왼쪽으로 100 픽셀을 얻은 다음 오른쪽에 40 픽셀을 갖습니다.

105
00:09:50,010 --> 00:09:53,790
따라서 마진을 남기면서 자주 볼 수있는 마지막 것이 하나 있습니다.

106
00:09:53,790 --> 00:09:54,480
자동.

107
00:09:54,780 --> 00:09:59,340
그래서 우리가 할 수있는 일은 왼쪽이나 오른쪽에 자동 여백을 설정하는 것입니다.

108
00:09:59,370 --> 00:10:02,550
그게 실제로 우리를위한 중심 요소입니다.

109
00:10:02,550 --> 00:10:04,570
그래서 어떻게 작동하는지 보여 드리겠습니다.

110
00:10:04,710 --> 00:10:18,390
그리고 이것을 다시 말하면 우리는 여백을 쓸 수 있고, 왼쪽 또는 오른쪽 제로 여백 및 아래쪽의 상단 자동 및 왼쪽의 자동 0 마진을 말할 수 있습니다.

111
00:10:18,510 --> 00:10:23,520
그리고이 전체 크기를 만들고 새로 고침하면 우리에게 필요한 것들을 중심으로 배치됩니다.

112
00:10:23,520 --> 00:10:37,880
이것이 의미하는 것은 50 %라고 결정했음을 의미합니다. 왜냐하면 우리가 여기서 말했기 때문에 왼쪽이 자동이고 오른쪽이 자동이라고 생각하기 때문입니다. 그렇게하기 만하면됩니다.

113
00:10:37,980 --> 00:10:41,540
그리고 나서 우리는 맨 위와 맨 아래에 0을가집니다. 그래서 그들은 함께 scrunched됩니다.

114
00:10:41,930 --> 00:10:48,200
우리가 할 수있는 것은 심지어 이것을하는 더 짧은 방법이 있습니다. 그리고 그것은이 여백 0 Otto처럼 보입니다.

115
00:10:48,540 --> 00:10:53,470
그래서 이것은 자동으로 상하 좌우를 제로로 설정합니다.

116
00:10:53,580 --> 00:11:04,700
그래서 아무 것도 바뀌지 않고 상단과 자동으로 50 픽셀을 추가하거나 50 픽셀과 20 픽셀을 추가하려면이 구문을 사용할 수 있습니다.

117
00:11:04,740 --> 00:11:09,830
기억해야 할 것은 숫자가 0이 아니면 x가 필요하다는 것입니다.

118
00:11:10,430 --> 00:11:18,760
그래서 이렇게하면 왼쪽과 오른쪽 상단에 20을 더한 다음 상단과 하단에 50을 더합니다.

119
00:11:18,780 --> 00:11:21,070
여기에 다시 한 번 더 보겠습니다.

120
00:11:21,120 --> 00:11:25,370
우리는 바로 여기있는 내부 내용을 가지고 있습니다.

121
00:11:25,830 --> 00:11:33,440
우리는 테두리 사이에있는 패딩을 가지고 있으므로 우리가 가지고있는 것은 모두 패딩입니다. 그런 다음 테두리와 다른면 사이에 여백이 있습니다.

122
00:11:33,450 --> 00:11:35,530
기본적으로 요소들 사이.