1
00:00:00,330 --> 00:00:00,640
그곳에.

2
00:00:00,660 --> 00:00:01,610
다시 오신 것을 환영합니다.

3
00:00:01,920 --> 00:00:04,060
따라서이 수업은 매우 빠르게 진행될 것입니다.

4
00:00:04,200 --> 00:00:16,480
우리는 DIV 태그와 스팬 태그의 두 태그에 대해서만 이야기하고 있습니다. 우리가 어떤 것을 스타일링 할 수 있는지 평가할 때까지, 우리가 실제로하는 일과 사용 방법에 관해서는 말할 수 없습니다.

5
00:00:16,560 --> 00:00:22,410
하지만 저는 divs와 span을 사용하여 여러분에게 보여줄 것이기 때문에 지금 소개하고 싶습니다.

6
00:00:22,410 --> 00:00:27,640
다음 몇 편의 비디오에서는이 과정의 첫 번째 초안에서 실제로 설명하지 못했습니다.

7
00:00:27,690 --> 00:00:31,820
그래서 나는 코스가 출판 된 후에 사실을보고 돌아와서 이것을 덧붙였다.

8
00:00:31,950 --> 00:00:38,800
나는 Dave의 초기 설명에 대해 더 잘한 일을했다면 해결할 수있는 몇 가지 질문을 보았습니다.

9
00:00:39,000 --> 00:00:39,340
승인.

10
00:00:39,360 --> 00:00:42,030
그럼 div와 span에 대해 이야기 해 봅시다.

11
00:00:42,060 --> 00:00:49,770
제가 말하고자하는 첫 번째 것은 제가 언급 한 두 가지 요소가 실제로 스타일링 요소에 도달하기 전에는 그렇게 유용하지 않다는 것입니다.

12
00:00:49,770 --> 00:00:58,060
그러나 그들이하는 일은 콘텐츠를 그룹화하여 MT-NW에 따른 div가 일반 컨테이너 일 수 있도록 허용하는 것입니다.

13
00:00:58,320 --> 00:01:09,210
그래서 그것은 일을 함께 모아 그룹화하는 방법입니다. 저는 여기가 div라고 말하지 않고 있지만, 이것은 어떤 내용을 둘러싼 상자 일뿐입니다.

14
00:01:09,210 --> 00:01:20,380
그것은 약간의 텍스트와 약간의 이미지와 그것들을 그룹화하고, 큰 경계를 주거나, 배경을주는 약간의 더 많은 본문처럼 보인다 do you do div.

15
00:01:20,400 --> 00:01:25,780
다시 한번 우리는 당신이 그 일을 어떻게하는지에 대해서는 이야기하지 않았지만 아이디어는 당신이 단지 일들을 하나로 묶을 수 있다는 것입니다.

16
00:01:25,950 --> 00:01:29,660
그래서 앞으로이 과정에서 divs를 많이 사용하게 될 것입니다.

17
00:01:29,760 --> 00:01:32,450
간단한 예를 보여 드리겠습니다.

18
00:01:32,520 --> 00:01:41,750
따라서 여기에 텍스트를 추가하면 실제로이 코스의 학생들 중 한 명이 토론 포럼에서 지적한 내용입니다.

19
00:01:41,790 --> 00:01:47,410
Lorem을 입력하고 탭을 누르면 어떤 것이 좋을지 몰랐습니다.

20
00:01:47,590 --> 00:01:53,170
Lorem Ipsum은 기본적으로 샘플 텍스트 자리 표시 자 텍스트의 무리만을 제공합니다.

21
00:01:53,280 --> 00:01:58,100
그래서 저는 이것으로 두 가지를 만들 것입니다.

22
00:01:58,440 --> 00:02:06,890
그런 다음 H1을 추가하고이 H-1이 실제로 중요하지 않거나 아무 것도 넣어주지 않는다고합시다.

23
00:02:07,020 --> 00:02:14,300
그러나 이것이 단락이라고 가정하고이 두 가지를 함께 그룹화하려고합니다.

24
00:02:14,310 --> 00:02:22,150
단락의 H-1은 결국 우리가 지금은 그것을 할 수 없다고 말하지만, 결국 상자 주위에 테두리와 주황색 테두리를 갖기를 원합니다.

25
00:02:22,260 --> 00:02:24,230
그러나 이것은이 것을 포함하지 않습니다.

26
00:02:24,270 --> 00:02:35,340
내가 할 수있는 일은 div 태그에 그룹을 묶어서 dv로 저장하는 것입니다.

27
00:02:35,460 --> 00:02:42,350
페이지를 새로 고치거나 처음에 실제로 열면 전혀 다르게 보이지 않습니다.

28
00:02:42,430 --> 00:02:56,540
실제로 일어난 일을 모두 볼 수있는 스타일이 없기 때문에 실제로는 아무 것도 보이지 않을 것입니다.이 두 가지가 이제는 컨테이너에 그룹화되어 컨테이너를 묶어서 나중에 스타일을 적용 할 수 있다는 것입니다.

29
00:02:56,580 --> 00:03:07,350
그래서 만약 제가 그 div에 배경을 주면 제가 배경을 노란색으로 만들었습니다. 이것은 노란색 배경이 대략 주위를 둘러 볼 것이지만 두번째 단락은 포함하지 않을 것입니다.

30
00:03:07,350 --> 00:03:12,440
그래서 div span은 일반 컨테이너입니다.

31
00:03:12,630 --> 00:03:14,840
그러나 중요한 차이가 있습니다.

32
00:03:14,910 --> 00:03:17,640
여기 예제로 시작하겠습니다.

33
00:03:17,910 --> 00:03:23,520
이 단어 중 일부를 여기에서 강조하고 싶다고합시다.

34
00:03:23,670 --> 00:03:24,600
입 소스 문.

35
00:03:24,660 --> 00:03:30,840
내가 검정색이 아닌 노란색으로 만들고 싶다면 나머지 텍스트는 검은 색입니다.

36
00:03:30,930 --> 00:03:34,510
그러나 이것을 노란색으로 강조하고 글꼴을 더 크게 만들거나 다른 것으로 만들고 싶습니다.

37
00:03:34,590 --> 00:03:36,090
다시 우리는 그것을 어떻게하는지 아직 모른다.

38
00:03:36,450 --> 00:03:57,120
하지만 생각이 주위에 태그가 필요합니다 및 일반 컨테이너 ups div 바로 넣어 및 저장하고 새 줄에 노크 도착하는 볼 것이다 및 그 이유는 div 블록 레벨 요소.

39
00:03:57,120 --> 00:04:01,410
즉 단락처럼 자체 줄을 차지한다는 의미입니다.

40
00:04:01,410 --> 00:04:06,960
그 단락 뒤에 단락을 추가하면 단락이 새로운 단으로 푸시 다운됩니다.

41
00:04:07,230 --> 00:04:10,470
따라서 div는 블록 수준의 일반 컨테이너입니다.

42
00:04:10,470 --> 00:04:25,340
이 부분을 스팬으로 바꾸면 전혀 인상적이지 않을 수 있습니다. 실제로 볼 수있는 방법이 없기 때문에 여기에서 변경 사항을 볼 수 있지만 일반 단락처럼 보일 것입니다. 그래서 새로 고침 할 것이고 컨테이너가 있습니다. .

43
00:04:25,340 --> 00:04:30,140
이제이 콘텐츠 주변에는 아무 것도하지 않는 일반적인 범위가 있습니다.

44
00:04:30,540 --> 00:04:33,860
div와는 달리 그것은 인라인 컨테이너입니다.

45
00:04:33,870 --> 00:04:41,200
그래서 span은 기본적으로 내용을 선으로 정렬하여 그룹화하고 div는 내용을 그룹화하는 또 다른 방법입니다.

46
00:04:41,310 --> 00:04:42,930
그러나 블록 레벨 요소입니다.

47
00:04:43,200 --> 00:04:45,840
그래서 저는 이것이이 시점에서 조금 이론적이라는 것을 압니다.

48
00:04:45,970 --> 00:04:48,820
유용성을 이해하는 것은 어렵습니다.

49
00:04:48,990 --> 00:05:08,060
그러나 곧 우리가 C Ss에 들어갈 때 우리는 내가 추가 한 스팬을 찾아서 15 포인트의 글꼴과 노란색으로 만들거나 내가 추가 한 div를 찾은 다음 주황색 테두리와 무엇이든간에 그와 같은 것을 말할 수 있습니다. 그러면이 콘텐츠 주위에 주황색 경계선이 생깁니다.

50
00:05:08,070 --> 00:05:11,020
모든 위대한 divs 스팬의 일반 컨테이너.