개발조각

[JavaScript 간단한 날씨 웹 만들기] skycons 사용하기 본문

엘리스 AI 트랙🐇/토이 프로젝트🚗

[JavaScript 간단한 날씨 웹 만들기] skycons 사용하기

개발조각 2022. 7. 26. 22:59
728x90
반응형

이번 날씨 웹을 만들 때 skycons을 사용해보려고 합니다.

스카이콘이 이뻐서 사용해보고 싶더라고요.

그렇지만 설명이 묘하게 불친절해서 사용방법을 헤매다가 드디어 해결했습니다.

스카이콘 링크

Skycons (darkskyapp.github.io)

 

Skycons

Skycons Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag. They’re easy to use, and pretty lightweight, so they shouldn’t rain on your parade: var skycons = new Skycons({"color": "pink"});

darkskyapp.github.io

방법만 알면 사용방법은 단순합니다.

 

1. cdn설치하기

skycons - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

skycons - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

A public domain library of animated weather icons rendered using javascript - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each

cdnjs.com

 

2. canvas생성(js에서 불러줘야 됨으로 id 아니면 class값 넣기

<canvas id="mainIcon" width="72" height="72">

 

3. script 작성하기

const mainIcon = document.querySelector('#mainIcon');
let icons = new Skycons({'color':'#2B323C'});
icons.set(mainIcon, "clear-day");
icons.play();

눈치껏 알겠지만

  • 색상을 추가 가능
  • set(canvas id, "적용할 아이콘")
  • icons.play(); : 애니메이션

 

  <body>
    <figure class="icons">
      <canvas id="clear-day" width="64" height="64"></canvas>

      <canvas id="clear-night" width="64" height="64"></canvas>

      <canvas id="partly-cloudy-day" width="64" height="64"></canvas>

      <canvas id="partly-cloudy-night" width="64" height="64"></canvas>

      <canvas id="cloudy" width="64" height="64"></canvas>

      <canvas id="rain" width="64" height="64"></canvas>

      <canvas id="sleet" width="64" height="64"></canvas>

      <canvas id="snow" width="64" height="64"></canvas>

      <canvas id="wind" width="64" height="64"></canvas>

      <canvas id="fog" width="64" height="64"></canvas>
    </figure>

    <script>
      let icons = new Skycons({'color':'green'});
      let list  = [
        "clear-day", "clear-night", "partly-cloudy-day",
        "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
        "fog"
      ];
      for(i = 0; i<list.length;  i++) icons.set(list[i], list[i]);
      icons.play();
    </script>
  </body>

이렇게도 가능하고

종류는 총 10가지가 있습니다.

"clear-day", "clear-night", "partly-cloudy-day", "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind", "fog"

이제 스카이콘 사용방법을 알았으니

날씨와 일출, 일몰시간을 가지고 때에 맞게 적용해야겠다.

728x90
반응형

'엘리스 AI 트랙🐇 > 토이 프로젝트🚗' 카테고리의 다른 글

[JavaScript 간단한 날씨 웹 만들기] 최종  (0) 2022.08.03
[JavaScript 간단한 날씨 웹 만들기] 일출, 일몰 데이터를 가지고 밤낮구현  (0) 2022.08.02
[JavaScript 간단한 날씨 웹 만들기] 현재 위치 날씨 데이터 async/await로 바꾸기  (0) 2022.07.26
[JavaScript 간단한 날씨 웹 만들기] 현재 위치 날씨 데이터 가지고 오기  (0) 2022.07.21
[JavaScript 간단한 날씨 웹 만들기] 시계 구현하기  (0) 2022.07.19
'엘리스 AI 트랙🐇/토이 프로젝트🚗' Related Articles more
Comments