0:00:02.084,0:00:06.101
여러분은 도구모음의 수많은 도구를[br]어떠한 요소를 찾아내기위해 사용할 수 있어요

0:00:06.101,0:00:08.645
그것들은 수많은 작업 중 정말 멋지게 작동할 것입니다

0:00:08.645,0:00:12.492
하지만 모든 것중에서 가장 강력한 도구는

0:00:12.492,0:00:18.070
CSS 선택자들을 이용하여 [br]특정한 요소(element)들을 찾는 능력입니다

0:00:18.070,0:00:20.384
여러분은 CSS 선택자를 기억하시나요?

0:00:20.384,0:00:24.562
기본적으로 어떠한 것을 찾기 위해서는[br]태그 이름(tag name)을 이용하거나

0:00:24.562,0:00:26.170
ID를 이용하거나

0:00:26.170,0:00:27.518
class를 이용해야합니다

0:00:27.518,0:00:30.027
하지만 수많은 진보된 선택자들이 존재합니다

0:00:30.027,0:00:35.333
하위 선택자, 속성 선택자,[br]클래스와 요소 복합 선택자,

0:00:35.333,0:00:38.547
이러한 것들은 여러분이 잊어먹지만 않는다면

0:00:38.547,0:00:40.643
지금부터 보게될 CSS 선택자보다 효율적일 것입니다

0:00:40.643,0:00:45.642
예를들어 제가 animal이라는 [br]class의 이름을 가지고있는 문단(paragraph)의

0:00:45.642,0:00:50.765
요소들에만 특정한 스타일을 지정하기를 원한다고 가정 해봅시다

0:00:50.765,0:00:54.606
그러기 위해서는 우선  태그를 그 안에 넣어 주어야하고

0:00:54.606,0:00:57.124
그 다음 먼저 'p'를 적고

0:00:57.124,0:01:01.532
그리고 한칸을 띄운다음

0:01:01.532,0:01:06.492
'.animal'이라고 입력하면[br]'animal'이라는 class 이름을 가지고있는

0:01:06.492,0:01:09.603
모든 요소를 찾는 다는 것을 의미해요

0:01:09.603,0:01:12.671
그리고 그것들은 모두 빨강색으로 되라고 해볼게요

0:01:12.671,0:01:14.130
멋지네요

0:01:14.130,0:01:19.665
지금부터는 똑같은 CSS 선택자를 사용하여[br]JavaScript에서 특정한 요소들을 찾아볼게요

0:01:19.665,0:01:24.944
'document.querySelectorAll()' 메서드를[br]이용해서 말이죠

0:01:24.944,0:01:30.323
그러면 저는 이 줄을 바꿔볼거에요

0:01:30.323,0:01:35.377
그리고 CSS 선택자를 따옴표 안에 넣어[br]문자열(string)로 만든 다음

0:01:35.377,0:01:38.392
인수(argument)로서 전달하는 것이 필요합니다

0:01:38.392,0:01:42.486
그러면 그 문단은 다시 고양이에 대해서 다루게 될 것입니다

0:01:42.486,0:01:45.823
여러분이 함수에 올바른 CSS선택자를 전달했다면

0:01:45.823,0:01:48.414
여러분이 루프를 통해서 알아낼 수도 있는[br]

0:01:48.414,0:01:50.883
요소들의 콜렉션(collection)이 리턴될 것입니다

0:01:50.883,0:01:53.507
지난 시간에 제가 'getElementsByTagName()'은

0:01:53.507,0:01:57.617
마치 배열(array)과 매우 닯아 보이는[br]HTML 콜렉션(collection)을

0:01:57.617,0:01:59.998
하나 리턴된다고했던 것을 기억하시나요?

0:01:59.998,0:02:06.710
이 메서드는 꺽쇠를 이용하여 자료를 접근한다던지[br]길이를 잴 수 있다던지 하는

0:02:06.710,0:02:12.530
많은 면에서 배열과 비슷한 자료구조인[br]노드리스트(NodeList)를 리턴합니다

0:02:12.530,0:02:16.282
그리고 여러분은 이런 메서드를 사용할때

0:02:16.282,0:02:20.029
아마도 이러한 노드리스트와 HTML콜렉션 간의[br]차이를 마주하게 될 것입니다

0:02:20.029,0:02:24.375
하지만 이것들에 대해서 더 배우게 된다면[br]이것들을 보는것이 반가울 거에요

0:02:24.375,0:02:28.924
좋아요 이제 CSS 선택자들을 찾는 어떠한 또다른 메서드가 있고

0:02:28.924,0:02:32.782
오로지 하나의 요소만 리턴한다면[br]즉 여러분의 CSS 선택자가

0:02:32.782,0:02:35.061
오로지 하나만을 선택한다는 것을 알고 있다 가정하면

0:02:35.061,0:02:37.409
실제로는 이것은 전혀 유용하지 않아요

0:02:37.409,0:02:40.458
왜나하면 여러분은 보통 이런 경우에[br]사용할 수 있는 ID를 가지고 있기 때문이죠

0:02:40.458,0:02:43.079
하지만 만일에 경우에 대비해서[br]이러한 것도 여러분들에게 보여드릴게요

0:02:43.079,0:02:46.310
여기서 'getElementById'대신에

0:02:46.310,0:02:48.577
'document.querySelector("'를 입력하고

0:02:48.577,0:02:53.565
실제 쿼리(query)를 위해서 이것에 [br]단순히 '#'을 추가하여 ID로 만들어줍니다

0:02:53.565,0:02:54.520
짜잔~

0:02:54.520,0:02:57.917
보시는 것과 같이 이것은 오직 하나만을 선택한다는 것을 빼고는

0:02:57.917,0:03:01.547
'querySelectorAll()' 와 매우 비슷합니다

0:03:01.547,0:03:06.510
그리고 한 요소만을 리턴할 것으로 예상할 수 있는[br]몇몇의 CSS 선택자를 넘겨 줄 수 있습니다

0:03:06.510,0:03:10.434
그러면 언제 여러분은 이러한 도구들을 사용해야할까요?

0:03:10.434,0:03:13.702
첫번째로 제가 여러분에게 보여드렸듯이[br]수행하기 더 나은 경향이 있습니다

0:03:13.702,0:03:15.734
그러므로 저는 가능한한[br]이것을 사용하기를 추천합니다

0:03:15.734,0:03:19.587
하지만 만일 여러분이 보다 복잡한 CSS 선택자를[br]사용해야만 하는 상황이라면

0:03:19.587,0:03:24.053
그때는 이것을 사용할 수 없지만[br]'querySelectorAll()' 이 좋은 방법이 될거에요

0:03:24.053,0:03:26.109
다음 시간에 이러한 것을 사용해보도록 할게요

0:03:26.109,0:03:31.273
그러면 이 웹페이지를 손 볼 수 있는[br]더 많은 방법들을 볼 준비를 하세요