WEBVTT

00:00:00.000 --> 00:00:04.040
좋습니다. 이제 여러분은 요소의 내용을 어떻게 바꿀지 아실겁니다.

00:00:04.051 --> 00:00:06.441
그리고 특성의 값도 말이죠

00:00:06.441 --> 00:00:11.383
무엇이 더 남앗을까요? 음 , 만일 스타일을 바꾸고 싶다면 어떻게 해야할까요?

00:00:11.383 --> 00:00:15.534
일반적으로 CSS 에서 사용하지만 자바스크립트에서 사용하려면 어느정도 시간이 걸립니다

00:00:15.534 --> 00:00:22.742
마치 스타일을 동작시키거나 유저가 어떤것을 클릭한후 변화시킬때 처럼말이죠

00:00:22.762 --> 00:00:25.944
이것은 곧 어떻게 하는지 보여드리겠습니다. 약속하죠.

00:00:25.944 --> 00:00:29.747
먼저 이 머릿말 부분의 스타일을 변화시켜봅시다

00:00:29.747 --> 00:00:33.415
만일 CSS를 사용해서 이것을 해본다면

00:00:33.415 --> 00:00:38.549
#heading 에 ID로 선택해서 'color:orange'를 사용해줍니다

00:00:38.549 --> 00:00:42.476
짜잔. 오랜지색이 되었네요. 정말 고양이와 마찬가지로 말이죠

00:00:42.476 --> 00:00:45.866
이제 자바스크립트 자체에서 사용해보도록 합시다.

00:00:45.866 --> 00:00:49.802
먼저 heading의 요소 부분을 찾아야 합니다. 이부분에서는 여기네요

00:00:49.802 --> 00:00:55.655
그리고 스타일이라는 특성 (`.style`) 에 접근해야합니다.

00:00:55.655 --> 00:01:00.916
그리고 우리가 필요한 특성으로 접근합니다 여기서는 'color' 부분이지요

00:01:00.916 --> 00:01:04.617
그리고 새로운 값을 넣어줍니다.

00:01:04.617 --> 00:01:11.345
CSS에서 사용한 특성을 지우고 이제 실행이 되는지 봅시다. 얍. 성공했네요

00:01:11.345 --> 00:01:16.618
이제 여기서 두개의 점을 보실수 있네요. 이 이유는

00:01:16.618 --> 00:01:22.122
두개의 물체에 접근하는 것입니다. 하나는 요소고 다음은 스타일 요소 입니다.

00:01:22.122 --> 00:01:27.004
이 스타일은 다른 특성으로서 요소의 모든 스타일을 가지고 있습니다

00:01:27.004 --> 00:01:31.632
만일 머릿말 부분의 배경화면의 색을 변화시키고 싶다면 어떻게 할까요?

00:01:31.632 --> 00:01:37.548
CSS 타입에서는 'background-color:black;'을 사용해서 수정을 하겠지만

00:01:37.548 --> 00:01:40.996
이를 자바스크립트에서 사용해 봅시다

00:01:40.996 --> 00:01:49.378
'headingEl.style.background-color = "black";' 을 사용해봅시다

00:01:49.378 --> 00:01:53.977
이런,, 에러가 발생했네요. 이는 자바스크립트에서 유효하지 못합니다.

00:01:53.977 --> 00:01:57.412
왜냐하면 이 특성의 이름은 -(하이픈)을 담을수 없기 때문입니다.

00:01:57.412 --> 00:02:02.372
대신 이 CSS 특성이름을 새로운 유효한 형태로 변화할것이 필요합니다.

00:02:02.372 --> 00:02:11.104
자바스크립트에서 camel-casing(낙타표기법)을 해줍니다. 하이픈을 지우고 C를 대문자화 해줍시다.

00:02:11.104 --> 00:02:16.969
그리고 이 특성을 지우고 테스트해보도록 해요. 그리고 얍.. 검정색으로 됬네요.

00:02:16.969 --> 00:02:21.838
이제 점점 환상적여져 가네요. 저는 또한 머리중심에 나란히 해주고 싶습니다.

00:02:21.838 --> 00:02:26.910
그리고 이 아래부분에 하나를 더 추가할겁니다.

00:02:26.910 --> 00:02:33.790
'headingEl.style.textAlign'--이것은 낙타표기법으로 '"center" ' 을 사용해줍니다

00:02:33.790 --> 00:02:37.916
한번더 말해서 하이픈으로 두 단어가 연결되어 있기 때문에 낙타표기법으로 사용해줍니다.

00:02:37.916 --> 00:02:45.298
그리고 우리는 이 머리말 부분이 고양이와 비슷해졌고 또한 할로윈 처럽 보이겠금 됐습니다.