분류 javascript

낮부터 밤까지-JavaScript로 인터랙티브 한 컬러 팔레트 만들기

컨텐츠 정보

  • 조회 440 (작성일 )

본문

HTML 및 CSS로 미니 시티 설정을 완료 했으므로 미니 시티가 밤에 어떻게 보일지 궁금한 적이 있습니까? JavaScript로 버튼을 추가하여 매일 밤 색상 팔레트 변경을 만들어 봅시다! JavaScript는 버튼, 팝업 창 등과 같은 대화 형 디자인을 만드는 데 사용되는 프로그래밍 언어이며 웹 개발 프로젝트에 사용자 상호 작용을 제공합니다.


이 자습서에서는 다음을 수행하는 방법을 배웁니다.

  • HTML로 버튼 만들기
  • CSS로 요소 스타일 지정
  • JavaScript와 상호 작용 추가

HTML 및 CSS에서 요소 설정 


HTML Code 


JavaScript를 사용하여 Mini City에 상호 작용을 통합하기 전에 먼저 HTML 코드에 추가하여 이러한 요소를 설정해야 합니다.


주간 색상 팔레트에서 야간 색상 팔레트로 전환하기 위해 원하는 설정을 선택할 수 있도록 "낮"과 "밤"이라는 두 개의 클릭 가능한 버튼을 만듭니다. 이를 위해 body 요소의 각 버튼에 대해 <button> </ button> 태그 세트를 추가합니다.


...
<!--HTML-->
  <body>
    <button>day</button>
    <button>night</button>
...


계획된 색상 변경을 준비하려면 관련된 각 요소에 대해 id 속성을 할당해야 합니다. 그러면 이러한 요소를 CSS에서 스타일링하고 JavaScript에서 조작 할 수 있습니다.


Mini City에서 달로 변할 수있는 태양을 만들기 위해 "sun"이라는 ID를 가진 <div> 요소를 추가합니다. 하늘의 색상을 변경하려면 body 요소의 background-color 속성에 액세스해야 하므로 "body"라는 ID를 설정합니다. body 요소에 다음 코드 줄을 추가합니다.


...
<!--HTML-->
  <body>
    ....
    <div id = "sun"></div>   
    <body id = "body"></body>   
...


HTML 코드에 대한 완성 된 추가 내용은 다음과 같습니다.


...
<!--HTML-->
  <body>
    <button>day</button>
    <button>night</button>

    <div id = "sun"></div>   
    <body id = "body"></body>   
...


지금까지 Mini City는 다음과 같습니다.


Alt Text 


CSS 코드 : 태양과 달 요소 


이제 HTML에서 요소를 설정 했으므로 CSS에서 요소를 조정하고 스타일을 지정할 수 있습니다.


태양 요소의 경우 CSS 코드에 #id 선택기를 추가합니다.


...
<style TYPE="text/css">
    ...
    #sun {

    }
</style>
...


이런 종류의 선택기는 해시 태그 뒤에 나열된 ID를 가진 요소에 액세스하므로 이 선택자에 추가하는 모든 요소는 HTML 코드에서 선언 한 sun 요소에 영향을 줍니다.


#sun 선택기의 경우 먼저 다음 속성을 사용하여 태양의 모양과 색상을 만듭니다.


...
#sun {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: radial-gradient(#FFF89E, #FFDE45);
}
...


너비와 높이 속성의 길이가 같으면 생성 될 기본 모양은 정사각형입니다. border-radius 속성은 태양 모서리의 반경을 정의하고 이 속성을 50 %로 설정하면 완벽한 원이 만들어집니다. 그런 다음 background 속성에서 방사형 그래디언트 함수를 사용하여 태양의 색상을 결정할 수 있습니다.이 함수는 색상의 점진적인 전환을 만듭니다. 

처음 선언 된 색상 (연한 노란색)은 태양의 중심에 있는 색상이 됩니다. , 두 번째 색상 (더 밝은 따뜻한 노란색)은 태양 가장자리의 색상입니다.


그런 다음 다음 속성을 추가하여 태양의 위치를 ​​결정합니다.


...
#sun {
    ...
    position: absolute;
    left: 350px;
    bottom: 75px;
}
...



Mini City의 다른 요소와 마찬가지로 태양의 위치 속성에 절대 값을 선언하여 요소가 웹 페이지의 문서 본문과 함께 이동할 수 있도록 합니다. left 속성은 태양을 측면으로 더 밀어서 요소의 수평 위치에 영향을 미치고 bottom 속성은 태양을 위로 들어 올려 요소의 수직 위치에 영향을 줍니다.


이것이 우리의 미니 시티에서 태양이 보여야 하는 모습입니다.


Alt Text 


매일 밤 변경을 준비하기 위해 태양 요소와 동일한 코드 템플릿을 사용하여 달 요소를 만들 수도 있습니다.


...
#sun {
    ...
}

#moon {
    position: absolute;
    left: 350px;
    bottom: 75px;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: radial-gradient(#D3D3D3, #555AA6);
}
...


달의 경우 #moon이라는 새 선택기를 사용하고 방사형 그라데이션 기능의 색상을 변경합니다. 달 중앙의 색상은 연한 차가운 회색이 되고 가장자리의 색상은 어두운 회색이 됩니다. 제비꽃.


이 시점에서 우리는 HTML 코드에서 <div> 요소를 선언하지 않았기 때문에 moon 요소를 볼 수 없습니다. 이 두 선택자 사이에서 앞뒤로 만 전환되기 때문에 이것을 선언 할 필요가 없습니다. 나중에 JavaScript로 코딩 할 것입니다.


완성 된 #sun 및 #moon 요소는 다음과 같습니다.


...
#sun {
    position: absolute;
    left: 350px;
    bottom: 75px;
    background: radial-gradient(#FFF89E, #FFDE45);
    width: 115px;
    height: 115px;
    border-radius: 50%;
}

#moon {
    position: absolute;
    left: 350px;
    bottom: 75px;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: radial-gradient(#D3D3D3, #555AA6);
}
...


CSS 코드 : 낮과 밤 버튼 


버튼 속성 스타일 지정을 시작하기 위해 코드에 버튼 선택기를 추가합니다.


...
<style TYPE="text/css">
    ...
    button {

    }
</style>
...


이 선택기는 주간 및 야간 버튼 인 HTML 코드에 선언 된 모든 <button> 요소에 액세스합니다.


먼저 다음 속성을 사용하여 버튼의 색상과 위치를 조정합니다.


...
button {
    position: relative;
    top: -40px;
    right: -360px;
    background-color: #FFFFFF;
}
...



position 속성을 relative로 설정하면 상단 및 오른쪽 속성을 사용하여 웹 페이지의 중앙 인 "일반"위치에서 버튼의 위치를 ​​조정할 수 있습니다. 입력 한 값은 버튼을 우리 태양 아래 지역. background-color 속성을 사용하여 버튼의 색상을 흰색으로 설정합니다.


그런 다음 다음 속성을 추가하여 버튼에 테두리를 추가합니다.


...
button {
    ...
    border-style: solid;
    border-width: 2px;
    border-color: #FF8080;
    border-radius: 10px;
}
...



모든 테두리 속성이 표시 되려면 먼저 border-style 속성을 설정해야 합니다. 위에서 우리는 버튼의 테두리를 단색으로 설정하여 단색 테두리를 만듭니다. 이 CSS 테두리 스타일 목록에서 다양한 종류의 테두리를 자유롭게 실험 해보십시오. 추가 테두리 속성의 경우 border-width 및 border-color는 각각 테두리의 두께와 색상을 조정하고 border-radius는 테두리 모서리의 원형 률을 조정합니다.이 특정 속성은 최대 4 개의 값을 허용하며 각 값은 각 모서리에 액세스합니다. 요소의.


마지막으로 다음 두 속성을 사용하여 버튼의 텍스트 글꼴을 변경합니다.


...
button {
    ...
    font-size: 15px;
    font-family: "Consolas";
}
...


font-size 속성은 버튼 글꼴의 크기를 조정합니다. 또한 이 CSS 글꼴 목록에서 글꼴을 테스트하고 font-family 속성으로 설정하여 버튼의 글꼴을 자유롭게 사용자 정의 할 수 있습니다. 또한 글꼴 스타일 및 글꼴 두께와 같은 추가 속성을 추가하여 버튼 스타일을 더욱 강화할 수 있습니다.


완성 된 버튼 요소는 다음과 같습니다.


...
button {
    position: relative;
    top: -40px;
    right: -360px;
    background-color: #FFFFFF;

    border-style: solid;
    border-width: 2px;
    border-color: #FF8080;
    border-radius: 10px;

    font-size: 15px;
    font-family: "Consolas";
}
...


지금까지 Mini City가 좋아해야 하는 것은 다음과 같습니다.


Alt Text 


JavaScript로 상호 작용 추가 


JavaScript Code 


HTML 파일에서 JavaScript로 코딩 할 수 있도록 위에 추가 한 코드 아래에 있는 HTML 코드의 body 요소에 <script> </ script> 태그 세트를 삽입합니다.


...
<!--HTML-->
  <body>
      <button>day</button>
      <button>night</button>

      <div id = "sun"></div>   
      <body id = "body"></body> 

      <script>
      </script>
...


태양 / 달 요소와 배경의 색상을 조작하려면 해당 ID를 호출하여 각각 태양 및 신체 요소를 검색해야 합니다.


이를 위해 우리는 var 또는 변수 (태양 요소의 경우 circle, body 요소의 하늘)를 선언 한 다음 문서 메서드 getElementById()를 사용하여 각 요소에 액세스합니다.


...
<script>
    var circle = document.getElementById("sun");
    var sky = document.getElementById("body");
</script>
...


계획된 색상 팔레트 변경을 위해 이미 달 요소를 설정 했으므로 밤하늘에 원하는 색상도 선택해야 합니다.


이를 위해 낮 하늘과 밤 하늘의 색을 포함 할 colors라는 배열을 만듭니다.


...
<script>
    var circle = document.getElementById("sun");
    var sky = document.getElementById("body");
    var colors = ["#D5F3FE","#343F8A"];
</script>
...


배열의 첫 번째 색상은 기본 주간 색상으로, 현재 설정 한 연한 파란색이고 두 번째 색상은 야간 색상 팔레트 용으로 짙은 시원한 파란색입니다.


이제 낮과 밤 색상 팔레트를 설정하기 위해 낮과 밤이라는 두 가지 기능을 설정합니다.


...
<script>
    ...
    function day() {

      }
    function night() {

      }
</script>
...


각 기능에 대해 두 가지 변경 사항을 설정해야 합니다. 하나는 태양-달 스위치에 대한 것이고 다른 하나는 낮-밤 색상 변경에 대한 것입니다.


낮에는 태양을, 밤에는 달을 표시하기 위해 circle 변수에 setAttribute() 메서드를 사용하여 #sun 및 #moon 요소에서 정보를 검색합니다. 두 개의 필수 매개 변수에 대해 이 변수의 id를 낮과 밤 색상 팔레트의 태양 및 달 요소로 각각 설정합니다.


...
function day() {
    circle.setAttribute("id", "sun");
}
function night() {
    circle.setAttribute("id", "moon");
}
...


낮과 밤에 하늘색을 설정하려면 이 변수의 CSS 속성을 검색하고 조작하기 위해 .style.backgroundColor를 추가하여 sky 변수를 통해 body 요소의 backgroundColor 속성에 액세스합니다. 그런 다음 색상 배열에 있는 낮과 밤 색상 팔레트의 각 색상과 동일하게 설정합니다 (배열의 색인은 항상 숫자 0부터 시작하므로 colors [0]은 주간 색상을 참조하고 colors [1 ]는 야간 색상을 나타냄) :


...
function day() {
    circle.setAttribute("id", "sun");
    sky.style.backgroundColor = colors[0];
}
function night() {
    circle.setAttribute("id", "moon");
    sky.style.backgroundColor = colors[1];
}
...


완성 된 JavaScript 코드는 다음과 같습니다.


...
<script>
    var circle = document.getElementById("sun");
    var sky = document.getElementById("body");
    var colors = ["#D5F3FE","#343F8A"];

    function day() {
        circle.setAttribute("id", "sun");
        sky.style.backgroundColor = colors[0];
      }
      function night() {
        circle.setAttribute("id", "moon");
        sky.style.backgroundColor = colors[1];
      }
</script>
...


모든 것을 하나로 묶으려면 각 버튼에 onclick 이벤트를 추가하여 day()와 night() 함수를 낮과 밤 버튼에 각각 연결하는 HTML 코드로 돌아 가야 합니다.


...
<!--HTML-->
  <body>
    <button onclick = "day()">day</button>
    <button onclick = "night()">night</button>
...


이제 버튼을 클릭하여 시간을 변경하여 미니 시티와 상호 작용할 수 있습니다.


Alt Text 


결론 


Mini City에 대화 형 색상 구성 요소를 추가 한 것을 축하합니다!


이 튜토리얼에서 우리는 JavaScript로 버튼을 디자인하고 HTML과 CSS에서 이러한 요소를 스타일화하고 연결하는 방법을 배웠습니다.


버튼에 더 많은 장식 기능을 추가하거나 낮과 밤 기능 아래에 더 많은 작업을 구현하여 하루 중 변화하는 시간 사이에 더 뚜렷한 전환을 만들 수 있습니다. 이 블로그 시리즈는 이러한 프로그래밍 도구에 대한 매우 간단한 소개로만 제공 될 수 있지만,이 프로젝트가 웹 개발 및 디자인에 대한 관심을 불러 일으켰거나 자신감을 키웠으면 합니다.