[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:02.08,0:00:06.10,Default,,0000,0000,0000,,여러분은 도구모음의 수많은 도구를\N어떠한 요소를 찾아내기위해 사용할 수 있어요
Dialogue: 0,0:00:06.10,0:00:08.64,Default,,0000,0000,0000,,그것들은 수많은 작업 중 정말 멋지게 작동할 것입니다
Dialogue: 0,0:00:08.64,0:00:12.49,Default,,0000,0000,0000,,하지만 모든 것중에서 가장 강력한 도구는
Dialogue: 0,0:00:12.49,0:00:18.07,Default,,0000,0000,0000,,CSS 선택자들을 이용하여 \N특정한 요소(element)들을 찾는 능력입니다
Dialogue: 0,0:00:18.07,0:00:20.38,Default,,0000,0000,0000,,여러분은 CSS 선택자를 기억하시나요?
Dialogue: 0,0:00:20.38,0:00:24.56,Default,,0000,0000,0000,,기본적으로 어떠한 것을 찾기 위해서는\N태그 이름(tag name)을 이용하거나
Dialogue: 0,0:00:24.56,0:00:26.17,Default,,0000,0000,0000,,ID를 이용하거나
Dialogue: 0,0:00:26.17,0:00:27.52,Default,,0000,0000,0000,,class를 이용해야합니다
Dialogue: 0,0:00:27.52,0:00:30.03,Default,,0000,0000,0000,,하지만 수많은 진보된 선택자들이 존재합니다
Dialogue: 0,0:00:30.03,0:00:35.33,Default,,0000,0000,0000,,하위 선택자, 속성 선택자,\N클래스와 요소 복합 선택자,
Dialogue: 0,0:00:35.33,0:00:38.55,Default,,0000,0000,0000,,이러한 것들은 여러분이 잊어먹지만 않는다면
Dialogue: 0,0:00:38.55,0:00:40.64,Default,,0000,0000,0000,,지금부터 보게될 CSS 선택자보다 효율적일 것입니다
Dialogue: 0,0:00:40.64,0:00:45.64,Default,,0000,0000,0000,,예를들어 제가 animal이라는 \Nclass의 이름을 가지고있는 문단(paragraph)의
Dialogue: 0,0:00:45.64,0:00:50.76,Default,,0000,0000,0000,,요소들에만 특정한 스타일을 지정하기를 원한다고 가정 해봅시다
Dialogue: 0,0:00:50.76,0:00:54.61,Default,,0000,0000,0000,,그러기 위해서는 우선  태그를 그 안에 넣어 주어야하고
Dialogue: 0,0:00:54.61,0:00:57.12,Default,,0000,0000,0000,,그 다음 먼저 'p'를 적고
Dialogue: 0,0:00:57.12,0:01:01.53,Default,,0000,0000,0000,,그리고 한칸을 띄운다음
Dialogue: 0,0:01:01.53,0:01:06.49,Default,,0000,0000,0000,,'.animal'이라고 입력하면\N'animal'이라는 class 이름을 가지고있는
Dialogue: 0,0:01:06.49,0:01:09.60,Default,,0000,0000,0000,,모든 요소를 찾는 다는 것을 의미해요
Dialogue: 0,0:01:09.60,0:01:12.67,Default,,0000,0000,0000,,그리고 그것들은 모두 빨강색으로 되라고 해볼게요
Dialogue: 0,0:01:12.67,0:01:14.13,Default,,0000,0000,0000,,멋지네요
Dialogue: 0,0:01:14.13,0:01:19.66,Default,,0000,0000,0000,,지금부터는 똑같은 CSS 선택자를 사용하여\NJavaScript에서 특정한 요소들을 찾아볼게요
Dialogue: 0,0:01:19.66,0:01:24.94,Default,,0000,0000,0000,,'document.querySelectorAll()' 메서드를\N이용해서 말이죠
Dialogue: 0,0:01:24.94,0:01:30.32,Default,,0000,0000,0000,,그러면 저는 이 줄을 바꿔볼거에요
Dialogue: 0,0:01:30.32,0:01:35.38,Default,,0000,0000,0000,,그리고 CSS 선택자를 따옴표 안에 넣어\N문자열(string)로 만든 다음
Dialogue: 0,0:01:35.38,0:01:38.39,Default,,0000,0000,0000,,인수(argument)로서 전달하는 것이 필요합니다
Dialogue: 0,0:01:38.39,0:01:42.49,Default,,0000,0000,0000,,그러면 그 문단은 다시 고양이에 대해서 다루게 될 것입니다
Dialogue: 0,0:01:42.49,0:01:45.82,Default,,0000,0000,0000,,여러분이 함수에 올바른 CSS선택자를 전달했다면
Dialogue: 0,0:01:45.82,0:01:48.41,Default,,0000,0000,0000,,여러분이 루프를 통해서 알아낼 수도 있는\N
Dialogue: 0,0:01:48.41,0:01:50.88,Default,,0000,0000,0000,,요소들의 콜렉션(collection)이 리턴될 것입니다
Dialogue: 0,0:01:50.88,0:01:53.51,Default,,0000,0000,0000,,지난 시간에 제가 'getElementsByTagName()'은
Dialogue: 0,0:01:53.51,0:01:57.62,Default,,0000,0000,0000,,마치 배열(array)과 매우 닯아 보이는\NHTML 콜렉션(collection)을
Dialogue: 0,0:01:57.62,0:01:59.100,Default,,0000,0000,0000,,하나 리턴된다고했던 것을 기억하시나요?
Dialogue: 0,0:01:59.100,0:02:06.71,Default,,0000,0000,0000,,이 메서드는 꺽쇠를 이용하여 자료를 접근한다던지\N길이를 잴 수 있다던지 하는
Dialogue: 0,0:02:06.71,0:02:12.53,Default,,0000,0000,0000,,많은 면에서 배열과 비슷한 자료구조인\N노드리스트(NodeList)를 리턴합니다
Dialogue: 0,0:02:12.53,0:02:16.28,Default,,0000,0000,0000,,그리고 여러분은 이런 메서드를 사용할때
Dialogue: 0,0:02:16.28,0:02:20.03,Default,,0000,0000,0000,,아마도 이러한 노드리스트와 HTML콜렉션 간의\N차이를 마주하게 될 것입니다
Dialogue: 0,0:02:20.03,0:02:24.38,Default,,0000,0000,0000,,하지만 이것들에 대해서 더 배우게 된다면\N이것들을 보는것이 반가울 거에요
Dialogue: 0,0:02:24.38,0:02:28.92,Default,,0000,0000,0000,,좋아요 이제 CSS 선택자들을 찾는 어떠한 또다른 메서드가 있고
Dialogue: 0,0:02:28.92,0:02:32.78,Default,,0000,0000,0000,,오로지 하나의 요소만 리턴한다면\N즉 여러분의 CSS 선택자가
Dialogue: 0,0:02:32.78,0:02:35.06,Default,,0000,0000,0000,,오로지 하나만을 선택한다는 것을 알고 있다 가정하면
Dialogue: 0,0:02:35.06,0:02:37.41,Default,,0000,0000,0000,,실제로는 이것은 전혀 유용하지 않아요
Dialogue: 0,0:02:37.41,0:02:40.46,Default,,0000,0000,0000,,왜나하면 여러분은 보통 이런 경우에\N사용할 수 있는 ID를 가지고 있기 때문이죠
Dialogue: 0,0:02:40.46,0:02:43.08,Default,,0000,0000,0000,,하지만 만일에 경우에 대비해서\N이러한 것도 여러분들에게 보여드릴게요
Dialogue: 0,0:02:43.08,0:02:46.31,Default,,0000,0000,0000,,여기서 'getElementById'대신에
Dialogue: 0,0:02:46.31,0:02:48.58,Default,,0000,0000,0000,,'document.querySelector("'를 입력하고
Dialogue: 0,0:02:48.58,0:02:53.56,Default,,0000,0000,0000,,실제 쿼리(query)를 위해서 이것에 \N단순히 '#'을 추가하여 ID로 만들어줍니다
Dialogue: 0,0:02:53.56,0:02:54.52,Default,,0000,0000,0000,,짜잔~
Dialogue: 0,0:02:54.52,0:02:57.92,Default,,0000,0000,0000,,보시는 것과 같이 이것은 오직 하나만을 선택한다는 것을 빼고는
Dialogue: 0,0:02:57.92,0:03:01.55,Default,,0000,0000,0000,,'querySelectorAll()' 와 매우 비슷합니다
Dialogue: 0,0:03:01.55,0:03:06.51,Default,,0000,0000,0000,,그리고 한 요소만을 리턴할 것으로 예상할 수 있는\N몇몇의 CSS 선택자를 넘겨 줄 수 있습니다
Dialogue: 0,0:03:06.51,0:03:10.43,Default,,0000,0000,0000,,그러면 언제 여러분은 이러한 도구들을 사용해야할까요?
Dialogue: 0,0:03:10.43,0:03:13.70,Default,,0000,0000,0000,,첫번째로 제가 여러분에게 보여드렸듯이\N수행하기 더 나은 경향이 있습니다
Dialogue: 0,0:03:13.70,0:03:15.73,Default,,0000,0000,0000,,그러므로 저는 가능한한\N이것을 사용하기를 추천합니다
Dialogue: 0,0:03:15.73,0:03:19.59,Default,,0000,0000,0000,,하지만 만일 여러분이 보다 복잡한 CSS 선택자를\N사용해야만 하는 상황이라면
Dialogue: 0,0:03:19.59,0:03:24.05,Default,,0000,0000,0000,,그때는 이것을 사용할 수 없지만\N'querySelectorAll()' 이 좋은 방법이 될거에요
Dialogue: 0,0:03:24.05,0:03:26.11,Default,,0000,0000,0000,,다음 시간에 이러한 것을 사용해보도록 할게요
Dialogue: 0,0:03:26.11,0:03:31.27,Default,,0000,0000,0000,,그러면 이 웹페이지를 손 볼 수 있는\N더 많은 방법들을 볼 준비를 하세요