[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:04.04,Default,,0000,0000,0000,,좋습니다. 이제 여러분은 요소의 내용을 어떻게 바꿀지 아실겁니다.
Dialogue: 0,0:00:04.05,0:00:06.44,Default,,0000,0000,0000,,그리고 특성의 값도 말이죠
Dialogue: 0,0:00:06.44,0:00:11.38,Default,,0000,0000,0000,,무엇이 더 남앗을까요? 음 , 만일 스타일을 바꾸고 싶다면 어떻게 해야할까요?
Dialogue: 0,0:00:11.38,0:00:15.53,Default,,0000,0000,0000,,일반적으로 CSS 에서 사용하지만 자바스크립트에서 사용하려면 어느정도 시간이 걸립니다
Dialogue: 0,0:00:15.53,0:00:22.74,Default,,0000,0000,0000,,마치 스타일을 동작시키거나 유저가 어떤것을 클릭한후 변화시킬때 처럼말이죠
Dialogue: 0,0:00:22.76,0:00:25.94,Default,,0000,0000,0000,,이것은 곧 어떻게 하는지 보여드리겠습니다. 약속하죠.
Dialogue: 0,0:00:25.94,0:00:29.75,Default,,0000,0000,0000,,먼저 이 머릿말 부분의 스타일을 변화시켜봅시다
Dialogue: 0,0:00:29.75,0:00:33.42,Default,,0000,0000,0000,,만일 CSS를 사용해서 이것을 해본다면
Dialogue: 0,0:00:33.42,0:00:38.55,Default,,0000,0000,0000,,#heading 에 ID로 선택해서 'color:orange'를 사용해줍니다
Dialogue: 0,0:00:38.55,0:00:42.48,Default,,0000,0000,0000,,짜잔. 오랜지색이 되었네요. 정말 고양이와 마찬가지로 말이죠
Dialogue: 0,0:00:42.48,0:00:45.87,Default,,0000,0000,0000,,이제 자바스크립트 자체에서 사용해보도록 합시다.
Dialogue: 0,0:00:45.87,0:00:49.80,Default,,0000,0000,0000,,먼저 heading의 요소 부분을 찾아야 합니다. 이부분에서는 여기네요
Dialogue: 0,0:00:49.80,0:00:55.66,Default,,0000,0000,0000,,그리고 스타일이라는 특성 (`.style`) 에 접근해야합니다.
Dialogue: 0,0:00:55.66,0:01:00.92,Default,,0000,0000,0000,,그리고 우리가 필요한 특성으로 접근합니다 여기서는 'color' 부분이지요
Dialogue: 0,0:01:00.92,0:01:04.62,Default,,0000,0000,0000,,그리고 새로운 값을 넣어줍니다.
Dialogue: 0,0:01:04.62,0:01:11.34,Default,,0000,0000,0000,,CSS에서 사용한 특성을 지우고 이제 실행이 되는지 봅시다. 얍. 성공했네요
Dialogue: 0,0:01:11.34,0:01:16.62,Default,,0000,0000,0000,,이제 여기서 두개의 점을 보실수 있네요. 이 이유는
Dialogue: 0,0:01:16.62,0:01:22.12,Default,,0000,0000,0000,,두개의 물체에 접근하는 것입니다. 하나는 요소고 다음은 스타일 요소 입니다.
Dialogue: 0,0:01:22.12,0:01:27.00,Default,,0000,0000,0000,,이 스타일은 다른 특성으로서 요소의 모든 스타일을 가지고 있습니다
Dialogue: 0,0:01:27.00,0:01:31.63,Default,,0000,0000,0000,,만일 머릿말 부분의 배경화면의 색을 변화시키고 싶다면 어떻게 할까요?
Dialogue: 0,0:01:31.63,0:01:37.55,Default,,0000,0000,0000,,CSS 타입에서는 'background-color:black;'을 사용해서 수정을 하겠지만
Dialogue: 0,0:01:37.55,0:01:40.100,Default,,0000,0000,0000,,이를 자바스크립트에서 사용해 봅시다
Dialogue: 0,0:01:40.100,0:01:49.38,Default,,0000,0000,0000,,'headingEl.style.background-color = "black";' 을 사용해봅시다
Dialogue: 0,0:01:49.38,0:01:53.98,Default,,0000,0000,0000,,이런,, 에러가 발생했네요. 이는 자바스크립트에서 유효하지 못합니다.
Dialogue: 0,0:01:53.98,0:01:57.41,Default,,0000,0000,0000,,왜냐하면 이 특성의 이름은 -(하이픈)을 담을수 없기 때문입니다.
Dialogue: 0,0:01:57.41,0:02:02.37,Default,,0000,0000,0000,,대신 이 CSS 특성이름을 새로운 유효한 형태로 변화할것이 필요합니다.
Dialogue: 0,0:02:02.37,0:02:11.10,Default,,0000,0000,0000,,자바스크립트에서 camel-casing(낙타표기법)을 해줍니다. 하이픈을 지우고 C를 대문자화 해줍시다.
Dialogue: 0,0:02:11.10,0:02:16.97,Default,,0000,0000,0000,,그리고 이 특성을 지우고 테스트해보도록 해요. 그리고 얍.. 검정색으로 됬네요.
Dialogue: 0,0:02:16.97,0:02:21.84,Default,,0000,0000,0000,,이제 점점 환상적여져 가네요. 저는 또한 머리중심에 나란히 해주고 싶습니다.
Dialogue: 0,0:02:21.84,0:02:26.91,Default,,0000,0000,0000,,그리고 이 아래부분에 하나를 더 추가할겁니다.
Dialogue: 0,0:02:26.91,0:02:33.79,Default,,0000,0000,0000,,'headingEl.style.textAlign'--이것은 낙타표기법으로 '"center" ' 을 사용해줍니다
Dialogue: 0,0:02:33.79,0:02:37.92,Default,,0000,0000,0000,,한번더 말해서 하이픈으로 두 단어가 연결되어 있기 때문에 낙타표기법으로 사용해줍니다.
Dialogue: 0,0:02:37.92,0:02:45.30,Default,,0000,0000,0000,,그리고 우리는 이 머리말 부분이 고양이와 비슷해졌고 또한 할로윈 처럽 보이겠금 됐습니다.