INTP의 멋대로 개발 세상

[생활코딩 JavaScript] 12강. 자바스크립트로 HTML, CSS 동적으로 만들기(주간모드, 야간모드) 본문

JavaScript

[생활코딩 JavaScript] 12강. 자바스크립트로 HTML, CSS 동적으로 만들기(주간모드, 야간모드)

인팁구름 2023. 4. 10. 17:10

 

8~11강 까지는 자바스크립트 사용을 위한 기본적인 CSS 강의라서

따로 정리를 하지 않겠습니다😎

CSS를 아예 접하지 않으신 분은 8강부터 보시면 됩니다

 

 

 

예제에 night, day 버튼 코드를 지우고

이때까지 배운 개념을 토대로 다시 한 번 만들어 보자!

(위 사진처럼!)

 

 

// 버튼 만들기
<input type="button" value="night">
<input type="button" value="day">

버튼이 만들어졌다!

 

 

 

그럼 이 버튼이 클릭됐을 때 <body>태그의 스타일 속성을 동적으로 변하게 하고 싶다.

그렇다면 자바스크립트 문법에 따라 웹 브라우저에게 <body> 태그를 선택하도록 해야겠지?

 

 

 

이런 식으로 공식 문서를 활용하자!

 

(해석)

document.querySelector라는 명령문을 이용해서 selector를 넣으라 되어있는데

예시를 보니 ".myClass" 라고 되어 있고

.myClass 라는 것은 이 웹 페이지에 있는 모든 태그 중에 클래스명이 myClass인 태그를 선택하는 선택자

 

 

우리는 body 태그 전체를 바꾸고 싶은거니까 selector 자리에 'body'를 써 준다.

만약에 id 값이나 class 명이 있었다면,

 

예시)

<body id = 'hello' > ~~~ </body> 는

document.querySelector('#hello')

 

<body class = 'hello'> ~~~ </body> 는

document.querySelector('.hello')

 

라고 써야 함😏

 

자, 우리가 이제 선택을 했으니까 body 태그의 style 이라는 속성을 어떻게 자바스크립트로 넣을 수 있는 가를 알아보자!

 

 

공식문서 적극 활용

 

 

HTML DOM Style object

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

우리는 querySelector인데 그것의 대체재이다. 사용법만 다를 뿐.

뒤에 .style 확인

 

참고해서 뒤에 .style을 붙였다
내가 하고 싶은건 night 버튼을 눌렀을 때 배경이 까만색으로 되는 것

 

https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp

document.body.style.backgroundColor = "red";

 

위의 자바스크립트의 style 문법대로 써 주고 기존 CSS는 지워준다

 

결과 확인!!

 

night 버튼을 클릭하면 body 태그의 CSS가 변경되는 것을 볼 수 있다!

 

 

같은 맥락으로 black으로 바뀜과 동시에 텍스트도 white 로 바꿔보자

(텍스트는 그냥 color를 써 주면 된다)

 

 

아래의 JavaScript 글 부분이 흰 색으로 바뀌었다!

 

🌜야간모드 완성🌛

 

 

 

🌞같은 방법으로 주간 모드도 완성🌞

 

 

 

 

여기까지

사용자와 상호작용 해서,

HTML과 CSS를 동적으로 변경하여 보다 똑똑한!

사용자와 대화하는 것과 같은 느낌의 애플리케이션을 만드는 방법을 알아보았다😃

저작자표시

'JavaScript' 카테고리의 다른 글

[생활코딩 JavaScript] 14강-15강. 조건문 & 비교연산자 & boolean  (2) 2023.04.12
[생활코딩 JavaScript] 7강. 변수와 대입연산자  (0) 2023.04.09
[생활코딩 JavaScript] 6강. 데이터 타입(String, Number)  (0) 2023.04.07
[생활코딩 JavaScript] 5강. Console  (0) 2023.04.07
[생활코딩 JavaScript] 4강. 이벤트(Event)  (0) 2023.04.07
'JavaScript' Related Articles more
Comments