1
00:00:00,665 --> 00:00:04,776
전 미술관을 좋아해요
하지만 매일 갈 시간은 없어요

2
00:00:04,776 --> 00:00:07,987
감사하게도 인터넷에서
아름다운 작품들을 찾을 수 있죠

3
00:00:07,987 --> 00:00:11,278
여기 칸 아카데미의
역사 부분에서도요

4
00:00:11,278 --> 00:00:14,340
저는 이 웹페이지를
유명한 작품 목록으로 만들었어요

5
00:00:14,340 --> 00:00:21,318
헤딩과 각 화풍의 목록과
각 작품에 대한 설명의 링크로요

6
00:00:21,318 --> 00:00:25,164
이 페이지를 화려하게 꾸미려면
좀 예술적이게요

7
00:00:25,164 --> 00:00:31,149
과  각 헤딩에 대해
서체를 바꾸는 CSS 규칙을 적용했어요

8
00:00:31,149 --> 00:00:38,886
저는 필기체를 좋아하지만
'fantasy'가 더 나을 것 같아요

9
00:00:38,886 --> 00:00:43,846
그리고 여기도 바꿔야 해요
규칙이 두 개니까요

10
00:00:43,846 --> 00:00:49,262
하지만 전 페이지의 모든 헤딩이
같은 글씨체이길 바래요

11
00:00:49,262 --> 00:00:54,414
매번 바꾸고 싶을 때마다
각각 바꿀 필요없게 말이죠

12
00:00:54,414 --> 00:01:00,020
그럼 해답은 뭘까요?
두 개의 CSS규칙을 하나로 바꾸려면요?

13
00:01:00,020 --> 00:01:04,038
한번 생각해보죠

14
00:01:04,038 --> 00:01:08,364
여러분은 과 에 대해
같은 클래스를 추가하자고 할 거에요

15
00:01:08,364 --> 00:01:12,047
그러면 당연히 작동될 거에요
그 클래스에 대한 규칙은 하나만 있으면 되죠

16
00:01:12,047 --> 00:01:14,828
하지만 결국에는
더 많은 작업을 해야할 거에요

17
00:01:14,828 --> 00:01:19,119
이나 를 쓸때마다
클래스를 추가해야 하니까요

18
00:01:19,119 --> 00:01:25,495
다행히 더 나은 방법이 있어요
이 선택자들을 쉼표를 사용해 묶을 수 있어요

19
00:01:25,495 --> 00:01:31,970
그냥 이 뒤에 쉼표를 찍고
를 쓰면 돼요

20
00:01:31,970 --> 00:01:37,262
이제 다른 규칙은 지워도 돼요
첫번째 규칙에 합쳤으니까요

21
00:01:37,262 --> 00:01:39,947
그리고 짜잔!
저번 페이지랑 같아요

22
00:01:39,947 --> 00:01:44,272
이제 글씨체를 바꾸고 싶다면
한번에 할 수 있어요

23
00:01:44,272 --> 00:01:48,679
이걸 다시 필기체로 바꾸면
모두 필기체가 되죠

24
00:01:48,679 --> 00:01:55,765
이 쉼표를 주목하세요
선택자는 공백 말고 쉼표로 구분해야해요

25
00:01:55,765 --> 00:02:03,046
공백은 하위 선택자에 사용해요
즉 CSS와는 전혀 다른 거라는 거죠

26
00:02:03,046 --> 00:02:08,516
선택자를 그룹화하면
불필요한 선택자를 줄일 수 있어요

27
00:02:08,516 --> 00:02:10,085
하지만 너무 많이 쓰진 말아요

28
00:02:10,085 --> 00:02:14,345
단지 지금만 같은 속성을 주고 싶다고
두 개의 선택자를 묶으면 안돼요

29
00:02:14,345 --> 00:02:18,365
항상 같은 속성을 주고 싶을 때
두 개의 선택자를 그룹화하세요

30
00:02:18,365 --> 00:02:21,887
보통은 그 두 개가
의미상 매우 비슷하니까요

31
00:02:21,887 --> 00:02:28,262
이 경우에는 선택자가 모두 헤딩 종류니까
같은 스타일을 주고 싶은 경우가 자주 있어요

32
00:02:28,262 --> 00:02:32,895
그룹 선택자의 활용 방법을 보고 싶으면
계속 강의를 들어주세요