WEBVTT

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

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

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

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

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

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

00:00:24.562 --> 00:00:26.170
ID를 이용하거나

00:00:26.170 --> 00:00:27.518
class를 이용해야합니다

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

00:00:30.027 --> 00:00:35.333
하위 선택자, 속성 선택자,
클래스와 요소 복합 선택자,

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

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

00:00:40.643 --> 00:00:45.642
예를들어 제가 animal이라는 
class의 이름을 가지고있는 문단(paragraph)의

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

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

00:00:54.606 --> 00:00:57.124
그 다음 먼저 'p'를 적고

00:00:57.124 --> 00:01:01.532
그리고 한칸을 띄운다음

00:01:01.532 --> 00:01:06.492
'.animal'이라고 입력하면
'animal'이라는 class 이름을 가지고있는

00:01:06.492 --> 00:01:09.603
모든 요소를 찾는 다는 것을 의미해요

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

00:01:12.671 --> 00:01:14.130
멋지네요

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

00:01:19.665 --> 00:01:24.944
'document.querySelectorAll()' 메서드를
이용해서 말이죠

00:01:24.944 --> 00:01:30.323
그러면 저는 이 줄을 바꿔볼거에요

00:01:30.323 --> 00:01:35.377
그리고 CSS 선택자를 따옴표 안에 넣어
문자열(string)로 만든 다음

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

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

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

00:01:45.823 --> 00:01:48.414
여러분이 루프를 통해서 알아낼 수도 있는


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

00:01:50.883 --> 00:01:53.507
지난 시간에 제가 'getElementsByTagName()'은

00:01:53.507 --> 00:01:57.617
마치 배열(array)과 매우 닯아 보이는
HTML 콜렉션(collection)을

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

00:01:59.998 --> 00:02:06.710
이 메서드는 꺽쇠를 이용하여 자료를 접근한다던지
길이를 잴 수 있다던지 하는

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

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

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

00:02:20.029 --> 00:02:24.375
하지만 이것들에 대해서 더 배우게 된다면
이것들을 보는것이 반가울 거에요

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

00:02:28.924 --> 00:02:32.782
오로지 하나의 요소만 리턴한다면
즉 여러분의 CSS 선택자가

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

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

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

00:02:40.458 --> 00:02:43.079
하지만 만일에 경우에 대비해서
이러한 것도 여러분들에게 보여드릴게요

00:02:43.079 --> 00:02:46.310
여기서 'getElementById'대신에

00:02:46.310 --> 00:02:48.577
'document.querySelector("'를 입력하고

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

00:02:53.565 --> 00:02:54.520
짜잔~

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

00:02:57.917 --> 00:03:01.547
'querySelectorAll()' 와 매우 비슷합니다

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

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

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

00:03:13.702 --> 00:03:15.734
그러므로 저는 가능한한
이것을 사용하기를 추천합니다

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

00:03:19.587 --> 00:03:24.053
그때는 이것을 사용할 수 없지만
'querySelectorAll()' 이 좋은 방법이 될거에요

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

00:03:26.109 --> 00:03:31.273
그러면 이 웹페이지를 손 볼 수 있는
더 많은 방법들을 볼 준비를 하세요