자바스크립트에서 css 적용이 안돼요

안녕하세요

Let's get IT 자바스크립트 책으로 공부하고 있습니다.

7장 가위바위보 게임에서 <script> 안에서 css 적용이 전혀 안되어서 질문드립니다.

6장 <self check 공색칠하기>여기에서도 자바스크립트로 css 적용이 안되어서 7장으로 넘어왔습니다...

구글에 검색했더니 캐시를 지워보라해서 지워봤는데도 적용이 계속 안됩니다.

무슨 문제일까요...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #computer {
        width: 142px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="computer"></div>
    <div>
      <button id="scissors" class="btn">가위</button>
      <button id="rock" class="btn">바위</button>
      <button id="paper" class="btn">보</button>
    </div>
    <div id="score">0</div>

    <script>
      const $computer = document.querySelector('#computer');
      const $score = document.querySelector('#score');
      const $scissors = document.querySelector('#scissors');
      const $rock = document.querySelector('#rock');
      const $paper = document.querySelector('#paper');
      const IMG = './rsp.png';
      $computer.style.background = `url(${IMG}) 0 0 `;
      $computer.style.background.size = 'auto 200px';
    </script>
  </body>
</html>

인프런 커뮤니티 질문&답변