1
00:00:02,084 --> 00:00:06,101
여러분은 도구모음의 수많은 도구를
어떠한 요소를 찾아내기위해 사용할 수 있어요

2
00:00:06,101 --> 00:00:08,645
그것들은 수많은 작업 중 정말 멋지게 작동할 것입니다

3
00:00:08,645 --> 00:00:12,492
하지만 모든 것중에서 가장 강력한 도구는

4
00:00:12,492 --> 00:00:18,070
CSS 선택자들을 이용하여 
특정한 요소(element)들을 찾는 능력입니다

5
00:00:18,070 --> 00:00:20,384
여러분은 CSS 선택자를 기억하시나요?

6
00:00:20,384 --> 00:00:24,562
기본적으로 어떠한 것을 찾기 위해서는
태그 이름(tag name)을 이용하거나

7
00:00:24,562 --> 00:00:26,170
ID를 이용하거나

8
00:00:26,170 --> 00:00:27,518
class를 이용해야합니다

9
00:00:27,518 --> 00:00:30,027
하지만 수많은 진보된 선택자들이 존재합니다

10
00:00:30,027 --> 00:00:35,333
하위 선택자, 속성 선택자,
클래스와 요소 복합 선택자,

11
00:00:35,333 --> 00:00:38,547
이러한 것들은 여러분이 잊어먹지만 않는다면

12
00:00:38,547 --> 00:00:40,643
지금부터 보게될 CSS 선택자보다 효율적일 것입니다

13
00:00:40,643 --> 00:00:45,642
예를들어 제가 animal이라는 
class의 이름을 가지고있는 문단(paragraph)의

14
00:00:45,642 --> 00:00:50,765
요소들에만 특정한 스타일을 지정하기를 원한다고 가정 해봅시다

15
00:00:50,765 --> 00:00:54,606
그러기 위해서는 우선  태그를 그 안에 넣어 주어야하고

16
00:00:54,606 --> 00:00:57,124
그 다음 먼저 'p'를 적고

17
00:00:57,124 --> 00:01:01,532
그리고 한칸을 띄운다음

18
00:01:01,532 --> 00:01:06,492
'.animal'이라고 입력하면
'animal'이라는 class 이름을 가지고있는

19
00:01:06,492 --> 00:01:09,603
모든 요소를 찾는 다는 것을 의미해요

20
00:01:09,603 --> 00:01:12,671
그리고 그것들은 모두 빨강색으로 되라고 해볼게요

21
00:01:12,671 --> 00:01:14,130
멋지네요

22
00:01:14,130 --> 00:01:19,665
지금부터는 똑같은 CSS 선택자를 사용하여
JavaScript에서 특정한 요소들을 찾아볼게요

23
00:01:19,665 --> 00:01:24,944
'document.querySelectorAll()' 메서드를
이용해서 말이죠

24
00:01:24,944 --> 00:01:30,323
그러면 저는 이 줄을 바꿔볼거에요

25
00:01:30,323 --> 00:01:35,377
그리고 CSS 선택자를 따옴표 안에 넣어
문자열(string)로 만든 다음

26
00:01:35,377 --> 00:01:38,392
인수(argument)로서 전달하는 것이 필요합니다

27
00:01:38,392 --> 00:01:42,486
그러면 그 문단은 다시 고양이에 대해서 다루게 될 것입니다

28
00:01:42,486 --> 00:01:45,823
여러분이 함수에 올바른 CSS선택자를 전달했다면

29
00:01:45,823 --> 00:01:48,414
여러분이 루프를 통해서 알아낼 수도 있는


30
00:01:48,414 --> 00:01:50,883
요소들의 콜렉션(collection)이 리턴될 것입니다

31
00:01:50,883 --> 00:01:53,507
지난 시간에 제가 'getElementsByTagName()'은

32
00:01:53,507 --> 00:01:57,617
마치 배열(array)과 매우 닯아 보이는
HTML 콜렉션(collection)을

33
00:01:57,617 --> 00:01:59,998
하나 리턴된다고했던 것을 기억하시나요?

34
00:01:59,998 --> 00:02:06,710
이 메서드는 꺽쇠를 이용하여 자료를 접근한다던지
길이를 잴 수 있다던지 하는

35
00:02:06,710 --> 00:02:12,530
많은 면에서 배열과 비슷한 자료구조인
노드리스트(NodeList)를 리턴합니다

36
00:02:12,530 --> 00:02:16,282
그리고 여러분은 이런 메서드를 사용할때

37
00:02:16,282 --> 00:02:20,029
아마도 이러한 노드리스트와 HTML콜렉션 간의
차이를 마주하게 될 것입니다

38
00:02:20,029 --> 00:02:24,375
하지만 이것들에 대해서 더 배우게 된다면
이것들을 보는것이 반가울 거에요

39
00:02:24,375 --> 00:02:28,924
좋아요 이제 CSS 선택자들을 찾는 어떠한 또다른 메서드가 있고

40
00:02:28,924 --> 00:02:32,782
오로지 하나의 요소만 리턴한다면
즉 여러분의 CSS 선택자가

41
00:02:32,782 --> 00:02:35,061
오로지 하나만을 선택한다는 것을 알고 있다 가정하면

42
00:02:35,061 --> 00:02:37,409
실제로는 이것은 전혀 유용하지 않아요

43
00:02:37,409 --> 00:02:40,458
왜나하면 여러분은 보통 이런 경우에
사용할 수 있는 ID를 가지고 있기 때문이죠

44
00:02:40,458 --> 00:02:43,079
하지만 만일에 경우에 대비해서
이러한 것도 여러분들에게 보여드릴게요

45
00:02:43,079 --> 00:02:46,310
여기서 'getElementById'대신에

46
00:02:46,310 --> 00:02:48,577
'document.querySelector("'를 입력하고

47
00:02:48,577 --> 00:02:53,565
실제 쿼리(query)를 위해서 이것에 
단순히 '#'을 추가하여 ID로 만들어줍니다

48
00:02:53,565 --> 00:02:54,520
짜잔~

49
00:02:54,520 --> 00:02:57,917
보시는 것과 같이 이것은 오직 하나만을 선택한다는 것을 빼고는

50
00:02:57,917 --> 00:03:01,547
'querySelectorAll()' 와 매우 비슷합니다

51
00:03:01,547 --> 00:03:06,510
그리고 한 요소만을 리턴할 것으로 예상할 수 있는
몇몇의 CSS 선택자를 넘겨 줄 수 있습니다

52
00:03:06,510 --> 00:03:10,434
그러면 언제 여러분은 이러한 도구들을 사용해야할까요?

53
00:03:10,434 --> 00:03:13,702
첫번째로 제가 여러분에게 보여드렸듯이
수행하기 더 나은 경향이 있습니다

54
00:03:13,702 --> 00:03:15,734
그러므로 저는 가능한한
이것을 사용하기를 추천합니다

55
00:03:15,734 --> 00:03:19,587
하지만 만일 여러분이 보다 복잡한 CSS 선택자를
사용해야만 하는 상황이라면

56
00:03:19,587 --> 00:03:24,053
그때는 이것을 사용할 수 없지만
'querySelectorAll()' 이 좋은 방법이 될거에요

57
00:03:24,053 --> 00:03:26,109
다음 시간에 이러한 것을 사용해보도록 할게요

58
00:03:26,109 --> 00:03:31,273
그러면 이 웹페이지를 손 볼 수 있는
더 많은 방법들을 볼 준비를 하세요