단 5분 만에 백그라운드 체인저를 구축하는 방법을 배우십시오.

3606 단어 beginnerstutorialjavascriptwebdev

소개



이 기사에서는 가장 간단한 방법으로 배경색 체인저를 구축하는 방법에 대해 설명합니다. 이 기사는 초보자에게 친숙하므로 전제 조건이 필요하지 않습니다.

구조



모든 웹 앱이나 웹 사이트는 인체가 골격을 가지고 있는 것처럼 구조를 가지고 있지만 웹 개발에서는 html을 사용하여 구조를 설계합니다. 배경색을 변경하는 요소div가 필요합니다. 배경색을 변경하는 기능을 트리거하는 요소button입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
 <body>
    <h1>
      Color Fliper
    </h1>
    <button class="btn" onclick="changeColor()">Change color</button>
    <div id="app"></div>
  </body>
</html>




여기서는 div가 있는 id=app 요소와 class=btn가 있는 버튼을 정의했습니다. 스타일을 추가하는 데 사용됩니다.

스타일 추가



우리는 <style> 태그 안에 있는 모든 CSS 코드를 의미하는 인라인 CSS를 사용하고 있습니다. 모든 사람이 색상 변화를 볼 수 있도록 div가 상자처럼 보이도록 합시다.

 <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    #app {
      height: 400px;
      width: 400px;
      border: 3px solid red;
      border-radius: 1rem;
    }
    .btn {
      padding: 1rem;
      margin: 1rem;
      border: none;
      border-radius: 5px;
      background-color: palegoldenrod;
      font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
      font-weight: bold;
      font-size: 1rem;
      color: black;
    }
  </style>



이제 css를 추가한 후 아름답게 보이는 것을 볼 수 있습니다. 버튼의 경우 패딩 속성을 사용하여 내부 요소 공간을 추가하고 div와 button를 구분하는 여백을 추가했습니다. 또한 버튼을 멋지게 만들기 위해 몇 가지 글꼴 스타일과 글꼴 두께를 추가했습니다. 다시 색상이 들어갈 div 요소에 대해
변경 나는 네 모서리에 큐브를 추가하는 5px의 일부 테두리 반경과 함께 400px의 높이와 너비를 지정했습니다.

색상 변경 기능



이제 색상을 변경하는 기능을 추가해 보겠습니다. script 태그 내의 자바스크립트 코드를 의미하는 인라인 자바스크립트를 사용할 것입니다.

 <script>
      function changeColor() {
        var color = Math.floor(Math.random() * 360 + 1);
        document.getElementById(
          "app"
        ).style.backgroundColor = `hsl(${color}, 100%, 50%)`;
      }
    </script>


처음에는 ID 앱으로 div 요소를 가져온 다음 0에서 365 dgerees 내의 임의의 숫자를 사용하여 속성hsl을 동적으로 변경합니다. hsllink 에 대해 자세히 알 수 있습니다.

모두 함께 넣어







결론



이 기사는 당신의 자바스크립트 여정을 케이크의 평화처럼 만들 것이며 가장 중요한 것은 일관성입니다. 왜냐하면 결국 우리의 일관성은 우리가 승부욕을 가지고 게임에서 승리하는 데 도움이 되기 때문입니다. 내 기사를 동료들과 자유롭게 공유하고 주저하지 말고 모든 것이 무료이며 이는 내 페이지가 성장하는 데 도움이 됩니다.

연결하다

JavaScript로 모달 윈도우를 구현하는 방법
플렉스박스 | flex-grow : 계산 방법(FR)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage