-
좋습니다. 이제 여러분은 요소의 내용을 어떻게 바꿀지 아실겁니다.
-
그리고 특성의 값도 말이죠
-
무엇이 더 남앗을까요? 음 , 만일 스타일을 바꾸고 싶다면 어떻게 해야할까요?
-
일반적으로 CSS 에서 사용하지만 자바스크립트에서 사용하려면 어느정도 시간이 걸립니다
-
마치 스타일을 동작시키거나 유저가 어떤것을 클릭한후 변화시킬때 처럼말이죠
-
이것은 곧 어떻게 하는지 보여드리겠습니다. 약속하죠.
-
먼저 이 머릿말 부분의 스타일을 변화시켜봅시다
-
만일 CSS를 사용해서 이것을 해본다면
-
#heading 에 ID로 선택해서 'color:orange'를 사용해줍니다
-
짜잔. 오랜지색이 되었네요. 정말 고양이와 마찬가지로 말이죠
-
이제 자바스크립트 자체에서 사용해보도록 합시다.
-
먼저 heading의 요소 부분을 찾아야 합니다. 이부분에서는 여기네요
-
그리고 스타일이라는 특성 (`.style`) 에 접근해야합니다.
-
그리고 우리가 필요한 특성으로 접근합니다 여기서는 'color' 부분이지요
-
그리고 새로운 값을 넣어줍니다.
-
CSS에서 사용한 특성을 지우고 이제 실행이 되는지 봅시다. 얍. 성공했네요
-
이제 여기서 두개의 점을 보실수 있네요. 이 이유는
-
두개의 물체에 접근하는 것입니다. 하나는 요소고 다음은 스타일 요소 입니다.
-
이 스타일은 다른 특성으로서 요소의 모든 스타일을 가지고 있습니다
-
만일 머릿말 부분의 배경화면의 색을 변화시키고 싶다면 어떻게 할까요?
-
CSS 타입에서는 'background-color:black;'을 사용해서 수정을 하겠지만
-
이를 자바스크립트에서 사용해 봅시다
-
'headingEl.style.background-color = "black";' 을 사용해봅시다
-
이런,, 에러가 발생했네요. 이는 자바스크립트에서 유효하지 못합니다.
-
왜냐하면 이 특성의 이름은 -(하이픈)을 담을수 없기 때문입니다.
-
대신 이 CSS 특성이름을 새로운 유효한 형태로 변화할것이 필요합니다.
-
자바스크립트에서 camel-casing(낙타표기법)을 해줍니다. 하이픈을 지우고 C를 대문자화 해줍시다.
-
그리고 이 특성을 지우고 테스트해보도록 해요. 그리고 얍.. 검정색으로 됬네요.
-
이제 점점 환상적여져 가네요. 저는 또한 머리중심에 나란히 해주고 싶습니다.
-
그리고 이 아래부분에 하나를 더 추가할겁니다.
-
'headingEl.style.textAlign'--이것은 낙타표기법으로 '"center" ' 을 사용해줍니다
-
한번더 말해서 하이픈으로 두 단어가 연결되어 있기 때문에 낙타표기법으로 사용해줍니다.
-
그리고 우리는 이 머리말 부분이 고양이와 비슷해졌고 또한 할로윈 처럽 보이겠금 됐습니다.
