웹 위젯 (일반적으로 '위젯'이라고도 함)은 웹 사이트, 블로그 에 쉽게 넣을 수있는 작은 프로그램입니다.
일반적으로 HTML 웹 내부에 간단하게 삽입이 되는데, 스마트메이커의 웹문서삽입 아톰을 이용해 간단하게 넣어 볼수 있도록 하겠습니다.
일단 무료 웹위젯 제공 싸이트를 검색해 보면 여러군데가 있지만,
제가 찾은 위젯 제공 싸이트는 날씨 위젯 제공 업체입니다.
https://weather.tomorrow.io/ko/widget/
Tomorrow.io의 날씨 위젯 | Tomorrow.io
Tomorrow.io의 날씨 위젯이 귀하의 웹사이트에 최신 기상 조건과 예보를 제공합니다!
weather.tomorrow.io
날씨, 대기질 등 다양한 디자인 형태로 제공을 하고 있습니다.
좌우 크기조정 및 지역 옵션 등을 통해 윈쪽에 생성된 HTML 코드를 활용하게 됩니다.
스마트메이커 웹문서삽입 아톰에 사용될 수 있도록 빈 HTML 파일을 만듭니다.
HTML 파일은 주로 사용하시는 텍스트 편집기를 이용해 작업하시면 됩니다.
싸이트에서 생성된 날씨코드복사를 통해 클립보드에 저장될수 있도록 합니다.
클립보드에 저장된 HTML 코드를 이 위치에 붙여넣기 하여 widget.html 파일로 저장할 수 있도록 합니다.
파일저장 위치는 기준경로에 복사될수 있도록 합니다. 앱 패킹시 같이 HTML 파일을 패킹하기 위함입니다.
스마트메이커 웹문서삽입 아톰의 URL 경로에 HTML 파일을 설정할 수 있도록 합니다.
실행모드 전환시, 쉽게 동작되는것을 확인 할 수 있게 됩니다.
위에서 제공되는 웹위젯은 반응형 웹 방식이기 때문에 스마트폰 해상도에 따라 크기 및 배치가 달라질 수 있습니다.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
</body>
</html>
HTML 태그에 viewport 를 삽입하면 스마트폰해상도에 맞게 자동으로 크기조정이 됩니다.
'셈플자료실' 카테고리의 다른 글
| 스마트메이커 OpenAPI 기능을 이용하여 ChatGPT 사용하기 (0) | 2025.01.23 |
|---|---|
| 스마트메이커로 문자인식(OCR) 기능 처리하기 (1) | 2025.01.22 |
| 스마트메이커 버튼아톰의 갤러리 기능 활용하기 (0) | 2025.01.20 |
| 스마트메이커 콤보박스 기본값없음 속성 활용하기 (0) | 2025.01.17 |
| 스마트메이커로 ChatGPT 사용하기 (1) | 2025.01.15 |