1
00:00:00,360 --> 00:00:02,029
지금까지 여러분은

2
00:00:02,029 --> 00:00:03,588
CSS를 이용해 텍스트에
스타일을 주는 법을 배웠고

3
00:00:04,088 --> 00:00:05,904
또 CSS를 이용해서

4
00:00:05,904 --> 00:00:07,500
페이지의 레이아웃을
변경하는 것을 배웠어요

5
00:00:07,620 --> 00:00:09,148
즉 위치를 바꿀 수도 있고

6
00:00:09,157 --> 00:00:10,187
크기를 바꿀 수도 있고

7
00:00:10,187 --> 00:00:11,777
서로 겹치게 할 수도 있죠

8
00:00:12,010 --> 00:00:14,331
하지만 우리가 움직이고 싶은 것들은
과연 무엇일까요?

9
00:00:14,498 --> 00:00:16,118
가끔 그건
요소에요

10
00:00:16,118 --> 00:00:17,339
우리가 이미 만들어둔 것들요

11
00:00:17,339 --> 00:00:18,812
특정 문단이나

12
00:00:18,812 --> 00:00:20,672
특정 헤딩같은 것들이죠

13
00:00:21,231 --> 00:00:22,365
하지만 종종
그것들은

14
00:00:22,445 --> 00:00:24,679
우리가 만들어 둔
요소의 집합일거에요

15
00:00:24,679 --> 00:00:26,889
텍스트 묶음이나

16
00:00:27,055 --> 00:00:30,065
헤딩과 몇 개의 문단들
같은 것들요

17
00:00:31,693 --> 00:00:32,946
이것들을
움직이기 위해서는

18
00:00:32,946 --> 00:00:34,365
한 묶음으로
같이 말이죠

19
00:00:34,365 --> 00:00:36,785
두 개의 새로운 HTML 태그를
소개해야겠네요

20
00:00:36,805 --> 00:00:39,225
우리는 요소들의
그룹화라고 불러요

21
00:00:39,246 --> 00:00:41,460
CSS를 배우기 전에는 
얘기하지 않았어요

22
00:00:41,460 --> 00:00:42,662
왜냐하면 이것들은 단지

23
00:00:42,662 --> 00:00:44,210
CSS와 결합되었을 때만
유용하기 때문이에요

24
00:00:44,210 --> 00:00:46,555
이것은 브라우저에게는
어떤 의미를 주진 않아요

25
00:00:47,275 --> 00:00:49,176
첫번째 태그는
이에요

26
00:00:49,596 --> 00:00:51,516
이 태그는 텍스트의
그룹화에 사용해요

27
00:00:53,244 --> 00:00:54,193
예를 들어 
색상을 적용하고 싶은데

28
00:00:54,193 --> 00:00:56,503
"Love Red"라는 단어에
적용한다고 해볼게요

29
00:00:57,055 --> 00:00:58,692
우리는 단어에만
색상을 주고 싶어요

30
00:00:58,692 --> 00:00:59,952
나머지 헤딩은 말고요

31
00:01:00,327 --> 00:01:02,458
여기 "Love"앞에
커서를 두고

32
00:01:02,458 --> 00:01:06,138
시작 태그로
을 쓰세요

33
00:01:06,499 --> 00:01:10,519
그리고 태그를 닫고요
좋아요

34
00:01:10,678 --> 00:01:11,644
이제 스타일을
적용할 거에요

35
00:01:11,644 --> 00:01:12,809
이 사이의
문자에 말이죠

36
00:01:13,008 --> 00:01:15,353
우리는 페이지의 모든 에
색상을 적용할 수도 있어요

37
00:01:15,780 --> 00:01:18,558
하지만 모든 걸 빨갛게
하고 싶지 않을 수도 있죠

38
00:01:18,558 --> 00:01:19,980
이 에게

39
00:01:20,107 --> 00:01:21,980
"lovey-dovey"라는 클래스를
주도록 하죠

40
00:01:25,086 --> 00:01:29,053
그리고 이 요소에게만
적용하는 규칙을 추가해요

41
00:01:29,053 --> 00:01:30,370
"lovey-dovey"라는 클래스를
가지는 요소들에게만요

42
00:01:30,388 --> 00:01:33,755
그러면 lovey-dovey에게
color: red라고 하죠

43
00:01:34,613 --> 00:01:36,703
저 텍스트가 이제 얼마나
달콤해졌는지 보세요!

44
00:01:38,093 --> 00:01:40,557
은 텍스트의 그룹화를
하는데 유용해요

45
00:01:40,557 --> 00:01:43,007
그렇다면 여러 요소들의 그룹화는
어떻게 하면 될까요?

46
00:01:43,507 --> 00:01:45,247
여기서 태그가
등장해요

47
00:01:45,680 --> 00:01:47,677
이 페이지 하단 부분을
그룹화하고 싶다고 해봐요

48
00:01:48,195 --> 00:01:49,464
공식 정보 헤더와

49
00:01:49,464 --> 00:01:51,174
문단과 그 아래에
있는 그림까지요

50
00:01:51,743 --> 00:01:52,714
이걸 하기 위해서

51
00:01:52,714 --> 00:01:58,129
태그 앞에 커서를 두고

52
00:01:58,129 --> 00:01:59,389
태그를 열게요

53
00:01:59,859 --> 00:02:02,259
그리고 마지막
문단으로 내려가서

54
00:02:02,690 --> 00:02:04,620
태그를 닫아요

55
00:02:05,467 --> 00:02:07,847
이제 가 생겼으니
스타일을 줘야겠죠

56
00:02:08,510 --> 00:02:09,568
에 스타일을
적용하려면

57
00:02:09,568 --> 00:02:11,426
id를 줄거에요

58
00:02:11,426 --> 00:02:13,516
"official-info"
라고 할게요

59
00:02:15,117 --> 00:02:16,417
그리고 이 id에 대한
규칙을 추가해요

60
00:02:16,422 --> 00:02:21,102
그럼 #official-info
그리고 background:

61
00:02:22,275 --> 00:02:23,715
멋진 회색으로 해보죠

62
00:02:23,884 --> 00:02:26,934
이렇게 하고
좋아요

63
00:02:27,133 --> 00:02:28,646
이제 를 보면

64
00:02:28,646 --> 00:02:30,841
모든 요소를 속에 포함하는
회색 상자가 되었어요

65
00:02:31,772 --> 00:02:34,267
만약 각각 하나씩

66
00:02:34,267 --> 00:02:35,947
회색 배경을 주는 것과는
다를거에요

67
00:02:35,998 --> 00:02:38,228
만약 그렇게 했다면
사이에 공백이 있어서

68
00:02:38,228 --> 00:02:39,308
이렇게 전체가 회색은
아닐 거에요

69
00:02:39,520 --> 00:02:41,120
우리는 를
이렇게 사용해요

70
00:02:41,129 --> 00:02:42,909
모든 요소들 주위에
박스를 만들고 싶을 때죠

71
00:02:44,708 --> 00:02:46,185
을 사용할 때는

72
00:02:46,185 --> 00:02:47,735
텍스트를 그룹화
할 때에요

73
00:02:48,303 --> 00:02:50,759
를 사용할 때는

74
00:02:50,759 --> 00:02:52,269
요소들을 그룹화
할 때에요

75
00:02:52,478 --> 00:02:54,718
하지만 두 개를 구별할
다른 방법이 있어요

76
00:02:55,451 --> 00:02:58,224
CSS세계에서는 두 가지
종류의 요소가 있어요

77
00:02:58,412 --> 00:03:00,232
줄(inline)과
구역(block)이죠

78
00:03:00,499 --> 00:03:03,409
줄 요소는 요소 다음에
새로운 줄이 없어요

79
00:03:03,570 --> 00:03:06,726
여러 개의 줄 요소가 있다면
같은 줄에 위치할 거에요

80
00:03:06,726 --> 00:03:08,751
우리가 얘기했던 것들 중에는

81
00:03:08,751 --> 00:03:11,651
a와 image태그가 있죠

82
00:03:11,832 --> 00:03:13,432
이 이미지를 보면

83
00:03:13,451 --> 00:03:16,431
텍스트가 바로 따라오는 것을
볼 수 있어요

84
00:03:16,616 --> 00:03:18,326
뒤에 새로운 줄이
없기 때문이죠

85
00:03:18,657 --> 00:03:21,887
구역 요소는 뒤에
새로운 줄이 있어요

86
00:03:21,912 --> 00:03:24,602
거의 모든 HTML태그들이
새로운 줄을 생성하죠

87
00:03:24,818 --> 00:03:26,978
이 페이지의 예시를 보세요

88
00:03:27,041 --> 00:03:30,281
헤딩, 문단, 리스트

89
00:03:30,799 --> 00:03:33,699
브라우저는 매번
새로운 줄을 추가해요

90
00:03:33,732 --> 00:03:36,152
여러분이 
태그를
쓸 필요가 없게 말이죠

91
00:03:37,027 --> 00:03:39,379
근데 이게 과 에
무슨 상관이죠?

92
00:03:39,835 --> 00:03:43,203
은 줄 요소를 만들고

93
00:03:43,203 --> 00:03:47,123
는 구역 요소를 만들어요

94
00:03:47,252 --> 00:03:49,492
즉 여러분이
를 추가하고

95
00:03:49,492 --> 00:03:53,432
다른 스타일을
적용하지 않는다면

96
00:03:53,940 --> 00:03:57,560
브라우저는 그 페이지 부분을
구역화할 거에요

97
00:03:58,145 --> 00:04:00,534
방금 안에 여러 텍스트가
포함되었던 것 처럼요

98
00:04:00,534 --> 00:04:02,984
이제 새로운 줄이
앞뒤로 추가되었어요

99
00:04:02,998 --> 00:04:05,495
어쩌면 이게 여러분들이
원하는 걸지도 몰라요

100
00:04:05,495 --> 00:04:07,525
그냥 이 차이점을
새겨두기로 해요

101
00:04:07,553 --> 00:04:08,395
그리고 계속해봐요

102
00:04:08,395 --> 00:04:10,885
이 태그로 할 수 있는게
아주 많으니까요

103
00:04:10,885 --> 00:04:12,631
특히 이 강력한
로 말이죠