JS- JS로 HTML, CSS 다루는 방법!

JS- JS로 HTML, CSS 다루는 방법!

오늘은 JS에서 가장 중요한 JS를 통해

HTML, CSS를 변경하거나 관여하는 방법에 대해 알아보겠습니다.

 

일단 방식을 먼저 설명드리면

document.getElementById('HTML-id').바꾸고 싶은 부분 = '바꾸고 싶은 값';

위에 코드예시처럼 사용할 수 있습니다.

 

JS를 통해 HTML, CSS를 변경하고 싶다면

우선 해야 할 것이 HTML을 먼저 작성해야 합니다.

이유는 변경해야 할 대상이 필요하기 때문인데

 

정확하게 대상을 지정하기 위해서

우리는 id나 class를 사용합니다.

 

근데 id가 class보다 안전하기 때문에 id를 사용하는 것을

추천드립니다.

 

이제 본격적으로 위에 코드를 해석하면

 

(1)

document

해석하면 문서라고 해석하는데

JS에서는 웹문서라고 해석합니다.

 

(2)

getElementById("")

해석하면 'HTML Element(요소)에서

("")라는 Id를 가진 요소를 가져와라(get)'라고

해석할 수 있습니다.

 

앞서 말씀드렸듯이 꼭 id가 아니더라도

class나 HTML 태그를 통해 연결할 수 있으나

 

위에 예시는 id를 통해 JS를 사용할 때 사용합니다.

 

(3)

바꾸고 싶은 부분

이것은 말 그대로 바꾸고 싶은 부분이

HTML인지, CSS인지 아니면 다른 어떤 것인지에 대해

지정할 수 있는 영역입니다.

 

만약 HTML의 문자를 바꾸고 싶다면

innerHTML을,

CSS의 스타일을 바꾸고 싶다면

style.color와 같이 스타일 속성을 지정하는

코드를 사용할 수 있습니다.

 

(4)

.

. 은 '~의', '~에서'라고 해석할 수 있는데

예를 들어 document.getElementById("")

이것을 해석하면

'HTML 웹문서에서 ("")라는 id를 가진 요소를 가지고 오시오.'

라고 해석할 수 있습니다.

 

(5)

바꾸고 싶은 값

말 그대로 어떤 내용을 변경하고 싶은지

JS를 통해 적용하고 싶은지에 대해 작성하는 부분입니다.

 

오늘은 위에 예시처럼 JS를 통해 HTML, CSS를 변경하거나

어떤 효과를 적용할 수 있는 방식을 알아보았습니다.

 

JS에서는 위에 예시만 사용하는 것이 아니고

다양한 방식으로 HTML, CSS에 효과를 부여할 수 있기 때문에

위에 예시는 한 가지의 예시일 뿐

더 많은 방식으로 효과를 적용할 수 있습니다.

 

JS는 동적인 언어이기 때문에

예를 들면 HTML 문서 안에 어떤 이벤트가 발생될 때

새로운 태그를 추가해서 사용자에게 보일 수도 있습니다.

 

JS는 웹 프로그래밍 언어이기 때문에

다양한 용어, 방식이 존재합니다.

 

다 외워서 사용할 수 없기 때문에

우리는 구글링, 깃허브와 같은 커뮤니티 등에서

자료를 얻을 수 있습니다.

 

오늘 방식에 대해서 꼭 알아 두시고

응용해서 사용할 수 있도록 하는 것이 중요할 것 같습니다.

 

오늘도 긴 글 읽어주셔서 감사합니다!!