개발나라 스용공주

[생활코딩] JavaScript 왕기초 3장 - Visual Studio Code / 야간모드 버튼 만들기 실습 본문

WEB/JavaScript

[생활코딩] JavaScript 왕기초 3장 - Visual Studio Code / 야간모드 버튼 만들기 실습

스용공주 2024. 8. 14. 21:51
728x90
728x90

이번 글은 아래 강의를 바탕으로 작성되었습니다.

(생활코딩)

https://www.youtube.com/watch?v=5tqfbgfA1LY&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=12

 

 

[ 실습 결과 ]

아래 영상 결과와 같이 night버튼을 누르면 배경이 검정색이 되면서 야간모드가 실행되고 day버튼을 누르면 다시 화면이 흰색으로 변하면서 원래대로 돌아온다.

전체 코드는 아래와 같다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <input type = "button" value = "night" onclick="
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        ">
    <input type = "button" value = "day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    ">
    안녕하세요
</body>
</html>

 

 

 

 

[ 실습 설명 ]

먼저 버튼을 누르면 변경되는 것이므로 버튼을 생성해준 이후 value 값으로 night버튼인지 day버튼인지 표시해준다.

그리고 만든 버튼을 누를 시에 실행되는 것은 이벤트이므로 onclick 이벤트를 사용해주고 이벤트 내용에 대해서는 자바스크립트를 통해 작성해줄 것이다.

<input type = "button" value = "night" onclick="">

 

 

배경색을 변경하려면 body의 background-color를 변경해줘야하므로 body를 태그로 사용해줘야한다.

자바스크립트를 하나하나 뜯어서 해석하면 다음 내용과 같다.

document querySelector('body') style backgroundColor = 'black'
해당 문서에서 'body'라는 부분을 선택하여 css 요소를 적용 배경색을 검정색으로 설정 
<body>
    <input type = "button" value = "night" onclick="
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        ">
</body>

 

 

이와 같은 방식으로 배경색 뿐만 아니라 글씨도 변경할 수 있고 다른 버튼 또한 그 버튼에 적용하고 싶은 것을 만들어 줄 수 있다.

 

 

728x90
728x90

'WEB > JavaScript' 카테고리의 다른 글

[생활코딩] JavaScript 왕기초 6장 - Visual Studio Code / 조건문 실습  (0) 2024.08.23
[생활코딩] JavaScript 왕기초 5장 - Visual Studio Code / 조건문  (0) 2024.08.22
[생활코딩] JavaScript 왕기초 4장 - Visual Studio Code / 비교연산자와 불리언(Boolean)  (0) 2024.08.22
[생활코딩] JavaScript 왕기초 2장 - Visual Studio Code / 이벤트(event)  (0) 2024.08.09
[생활코딩] JavaScript 왕기초 1장 - Visual Studio Code / html과 js 비교하기  (0) 2024.08.09
'WEB/JavaScript' Related Articles more
Comments