# CSS 제어하는 자바스크립트 맛보기

## 성장하는 자바스크립트 제어

다크모드와 일반모드라는 두 가지 모드를 통해 웹페이지의 배경과 폰트 색상을 제어해보자. 1차원적인 방법에서 시작하여 조건문을 활용한 방법을 거쳐, 최종적으로는 코드 리팩토링을 통해 유지와 보수가 쉽도록 바꾸어보자.

## 1. 기초 방법

{% code title="index.html" %}

```markup
<h1><a href="index.html">스타일 제어하기</a></h1>

 <input type="button" value="다크모드" onclick="
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('body').style.color = 'white';
 ">
 <input type="button" value="일반모드" onclick="
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
 ">
 <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
 </ol>
 <div>
  본문 내용이 들어가는 곳입니다. 버튼을 누르면 글자색과 배경색이 바뀝니다
 </div>
```

{% endcode %}

{% embed url="<https://codepen.io/j1hwan/pen/QeLMqq>" %}

## 2. 조건문 활용

```markup
<h1><a href="index.html">조건문으로 제어</a></h1>

  <input id="themeStatus" type="button" value="다크모드" onclick="
    if(document.querySelector('#themeStatus').value === '다크모드'){
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      document.querySelector('#themeStatus').value = '일반모드';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document.querySelector('#themeStatus').value = '다크모드';
    }
  ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
   연습용 페이지입니다 
</p>
```

{% embed url="<https://codepen.io/j1hwan/pen/bXbaVw>" %}

## 3. 리팩토링

{% hint style="info" %}
반복되는 코드를 제거한다
{% endhint %}

아래 코드를 살펴보면

`document.querySelector('body')`가 반복되고

`document.querySelector('#themeStatus').value = '';`는

`<input id="themeStatus">`의 value를 바꾸어주는 것을 알 수 있다.

```javascript
.
.
<input id="themeStatus" type="button" value="다크모드" onclick="
if{document.querySelector('body').style.backgroundColor = 'black';
   document.querySelector('body').style.color = 'white';
   document.querySelector('#themeStatus').value = '일반모드';
} else {
   document.querySelector('body').style.backgroundColor = 'white';
   document.querySelector('body').style.color = 'black';
   document.querySelector('#themeStatus').value = '다크모드';
}
">
.
.
```

{% hint style="success" %}
아래처럼 const 와 this를 사용해보자

onclick 이라는 이벤트 안에서 this는 해당 이벤트가 소속되어 있는 태그를 가리키도록 약속되어 있다
{% endhint %}

```markup
<h1>this의 활용</h1>

  <input id="themeStatus" type="button" value='다크모드' onclick="
    const target = document.querySelector('body');
    if(this.value === '다크모드'){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = '일반모드';
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = '다크모드';
    }
  ">
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>JavaScript</h2>
  <p>
    리팩토링!
  </p>
```

{% embed url="<https://codepen.io/j1hwan/pen/LwPQXy>" %}

## reference

[생활코딩 - 제어할 태그 선택하기](https://opentutorials.org/course/3085/18792)

[생활코딩 - 조건문 활용하여 CSS 제어하기](https://opentutorials.org/course/3085/18878)

[생활코딩 - 리팩토링](https://opentutorials.org/course/3085/18801)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jihwan.gitbook.io/life101/javascript/basic-javascript/untitled.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.