# Css Javascript

{% tabs %}
{% tab title="JAVASCRIPT" %}

```javascript
const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
  const suffix = this.dataset.sizing || ''; // || 을 넣는이유는 data-sizing값이 같은경우 없기때문에 넣어줌 없을때는 공백처리되게 해줌 
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); 
  // css 속성을 재할당 시킴 (IE8 이하는 setaAttribute를 써야함)
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
```

{% endtab %}

{% tab title="HTML" %}

```markup
   <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
    <label for="textSize" class="opt-title">Font size</label>
    <input type="range" name="textSize" min="20" max="78" value="14" data-sizing="px" />
    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>
     <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
```

{% endtab %}

{% tab title="CSS" %}

```css
 :root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
      --textSize:20px;
    }

    img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

    .hl {
      color: var(--base);
      font-size:var(--textSize);
    }

    /*
      misc styles, nothing to do with CSS variables
    */

    body {
      text-align: center;
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 50px;
    }
    .controls {
      margin-bottom: 50px;
    }

    input {
      width: 100px;
    }
```

{% endtab %}
{% endtabs %}

### :root

&#x20; `:root`는 가상 선택자이기 때문에, html 셀렉터보다도 우선순위가 높습니다. 그래서 :root와 html에 대한 스타일을 동시에 선언하면, :root에 대한 스타일이 우선됩니다.

root는   **전역 스코프의 CSS 변수(사용자 정의 CSS속성)**&#xB97C; 선언할 때 사용

![](/files/-Mcqmz42-uQcSZX454Oq)


---

# 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://leeboa.gitbook.io/study/javascript30/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.