Theme Maker

최종 업데이트
2019-01-30 (수)

DOWNLOAD

아이폰 잠금화면 테마 템플릿 메이커 Build ver. 1.2.0

POINT

_

기능을 체크하여
HTML코드를 복사 후
문서에 붙여넣기

[2019.01] 현재 야후 날씨 API 문제로 날씨 정보가 출력되지 않습니다.

본 코드를 적용하기 위한 추천 사이트.

Brackets
무료 에디터(윈도우,맥,우분투 사용 가능, 기능제한 없음)
ColorPicker
Hex, HSB, RGB 지원 색상코드

사용방법.

아래의 [WEATHER] , [TIME/DATE] , [SNOW] , [EVENT] 항목에서 원하시는 기능을 클릭하여 체크합니다.
※ 체크된 항목을 다시 클릭하시면 체크해제 됩니다.
해당 항목을 클릭 후 변경된 검정 박스 안의 내용을 드래그하여 복사합니다.
Noeul_LS_Template_v1.2.7z 파일의 압축을 해제 후 LockBackground.html 문서를 Brackets 프로그램을 이용하셔서 열어줍니다.
LockBackground.html 내용을 모두 지우시고 2번에서 복사한 코드를 붙여넣기(Ctrl + A > Ctrl + V) 하신 뒤 문서를 저장(Ctrl + S)합니다.
Brackets 프로그램에서 단축키 Alt + Ctrl + P 또는 LockBackground.html문서를 더블클릭하여 원하는 기능이 출력되는지 확인합니다.

WEATHER TIME/DATE SNOW EVENT

<!DOCTYPE html>
<html lang="ko">
<head>
<title>Theme Name</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="plugin/css/base.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />

<script type="text/javascript" src="plugin/js/jquery.min.js"></script>
<script type="text/javascript">
/* Config.js [Theme Setting] */
</script>
</head>

<body>
</body>
</html>

Noeul LS Template v1 구조

Noeul_LS_Template_v1.2.7z 파일의 압축 해제 후 트리구조를 설명한다.
※ 붉은색으로 표시된 내용은 사용자가 직접 수정할 수 있는 문서임.

LockBackground.html
위의 검정박스 안에 내용을 복사 후 붙여넣기하는 문서입니다.
css/layout.css
테마의 모양을 잡을 때 사용되는 스타일 문서. 이 문서를 활용하여 테마의 글자 색상, 글자 크기, 위치 조정 등을 하시면 됩니다.

날씨의 또 다른 정보 사용

위에 적용된 날씨 정보 CITY, WEATHER, WEATHERICON, TEMPUNIT 이외의 추가 정보 가져오기.

사용방법

<div class="weather-area"> 아랫줄에 아래의 <div id="~"></div>를 복사 후 붙여넣기 하면 됨.
예시 : 최고온도와 최저온도 나타내기.
<div class="weather-area">
<div id="hightemp"></div>
<div id="lowtemp"></div>
</div>

지역정보

국가명 [예 : 한국]
<div id="country"></div>
지역명 [예 : 경기도, 강원도 등등]
<div id="region"></div>

오늘정보

일출시각
<div id="sunrise"></div>
일몰시각
<div id="sunset"></div>
최고온도
<div id="hightemp"></div>
최저온도
<div id="lowtemp"></div>

일기예보

요일[1일차]
<div id="day1"></div>
날짜[1일차]
<div id="date1"></div>
날씨[1일차]
<div id="weather1"></div>
날씨아이콘[1일차]
<div id="weathericon1"></div>
최고온도[1일차]
<div id="lowtemp1"></div>
최저온도[1일차]
<div id="hightemp1"></div>
요일[2일차]
<div id="day2"></div>
날짜[2일차]
<div id="date2"></div>
날씨[2일차]
<div id="weather2"></div>
날씨아이콘[2일차]
<div id="weathericon2"></div>
최고온도[2일차]
<div id="lowtemp2"></div>
최저온도[2일차]
<div id="hightemp2"></div>
요일[3일차]
<div id="day3"></div>
날짜[3일차]
<div id="date3"></div>
날씨[3일차]
<div id="weather3"></div>
날씨아이콘[3일차]
<div id="weathericon3"></div>
최고온도[3일차]
<div id="lowtemp3"></div>
최저온도[3일차]
<div id="hightemp3"></div>
요일[4일차]
<div id="day4"></div>
날짜[4일차]
<div id="date4"></div>
날씨[4일차]
<div id="weather4"></div>
날씨아이콘[4일차]
<div id="weathericon4"></div>
최고온도[4일차]
<div id="lowtemp4"></div>
최저온도[4일차]
<div id="hightemp4"></div>
요일[5일차]
<div id="day5"></div>
날짜[5일차]
<div id="date5"></div>
날씨[5일차]
<div id="weather5"></div>
날씨아이콘[5일차]
<div id="weathericon5"></div>
최고온도[5일차]
<div id="lowtemp5"></div>
최저온도[5일차]
<div id="hightemp5"></div>
요일[6일차]
<div id="day6"></div>
날짜[6일차]
<div id="date6"></div>
날씨[6일차]
<div id="weather6"></div>
날씨아이콘[6일차]
<div id="weathericon6"></div>
최고온도[6일차]
<div id="lowtemp6"></div>
최저온도[6일차]
<div id="hightemp6"></div>
요일[7일차]
<div id="day7"></div>
날짜[7일차]
<div id="date7"></div>
날씨[7일차]
<div id="weather7"></div>
날씨아이콘[7일차]
<div id="weathericon7"></div>
최고온도[7일차]
<div id="lowtemp7"></div>
최저온도[7일차]
<div id="hightemp7"></div>

1차 업데이트

빌드 업데이트 v1.1로 기능추가 및 코드 변경
(기존의 v1이신 분들은 새로 다운받으셔야 함)

DATE. 2016. 05. 18

EVENT(D-DAY) 항목 추가. (본 문서에서 EVENT를 선택할 수 있음)
기본 스타일(plugin/css/base.css)에 가로 그리드 코드 추가
Weather의 설정 중 useKorean값이 true일 경우 일기예보에 관련된 날씨 정보 역시 한글로 번역되어 출력.
Weather의 날씨아이콘을 사용자가 '폰트아이콘' 또는 '이미지아이콘' 중에서 선택할 수 있도록 변경.
Weather의 일기예보를 7일까지 사용할 수 있도록 변경.
css/layout.css에 기본으로 사용되던 position: absolute와 width, top, left등의 [속성:값]을 삭제함.

그리드 코드 사용 방법 안내

※ 부모의 클레스값은 'row'이며, 자식의 클레스는 'colspan[가로의 칸 수]'을 사용한다.
※ 가로의 칸 수는 2~7까지 사용할 수 있다.

가로2칸의 경우 = div 박스 2개에 'colspan2'의 클레스를 사용.

가로3칸의 경우 = div 박스 3개에 'colspan3'의 클레스를 사용.

가로4칸의 경우 = div 박스 4개에 'colspan4'의 클레스를 사용.

가로5칸의 경우 = div 박스 5개에 'colspan5'의 클레스를 사용.

가로6칸의 경우 = div 박스 6개에 'colspan6'의 클레스를 사용.

가로7칸의 경우 = div 박스 7개에 'colspan7'의 클레스를 사용.

2차 업데이트

빌드 업데이트 v1.2로 날씨 지역코드 한글 추가
(기존의 v1 또는 v1.1이신 분들은 새로 다운받으셔야 합니다.)

DATE. 2017. 12. 23

weather.js 구문 변경
이제 config 부분의 지역코드를 한글로 입력할 수 있습니다.

WEATHER SETTING의 첫번째 항목인 local 항목에 자신의 지역을 설정합니다. 본래 이 값은 이전의 경우 7~8자릿수의 숫자로 이루어져 있었으나 지역의 한글화를 진해하면서 지역설정역시 한글로 가능하게끔 변경하였습니다. 고로 이전처럼 자신의 지역의 숫자코드를 기억하지 않으셔도 됩니다. 각 지역들은 서울과 광역시, 제주도를 제외하고 모두 지역명+도시명으로 이루어져 있습니다. 아래를 항목들을 참고하세요.

지역코드는 아래와 같습니다.

특별/광역/제주
광주, 대구, 대전, 부산, 서울, 울산, 인천, 제주, 서귀포

강원도
강원강릉, 강원고성, 강원동해, 강원삼척, 강원속초, 강원양구, 강원양양, 강원영월, 강원원주, 강원인제, 강원정선, 강원철원, 강원춘천, 강원태백, 강원평창, 강원홍천, 강원화천, 강원횡성

경기도
경기가평, 경기고양, 경기과천, 경기광명, 경기광주, 경기구리, 경기군포, 경기김포, 경기남양주, 경기동두천, 경기부천, 경기성남, 경기수원, 경기시흥, 경기안산, 경기안성, 경기안양, 경기양주, 경기양평, 경기여주, 경기연천, 경기오산, 경기용인, 경기의왕, 경기의정부, 경기이천, 경기파주, 경기평택, 경기포천, 경기하남, 경기화성

경상남도
경남거제, 경남거창, 경남고성, 경남김해, 경남남해, 경남밀양, 경남사천, 경남산청, 경남양산, 경남의령, 경남진주, 경남창녕, 경남창원, 경남통영, 경남하동, 경남함안, 경남함양, 경남합천

경상북도
경북경산, 경북경주, 경북고령, 경북구미, 경북군위, 경북김천, 경북문경, 경북봉화, 경북상주, 경북성주, 경북안동, 경북영덕, 경북영양, 경북영주, 경북영천, 경북예천, 경북울릉, 경북울진, 경북의성, 경북청도, 경북청송, 경북칠곡, 경북포항

전라남도
전남강진, 전남고흥, 전남곡성, 전남광양, 전남구례, 전남나주, 전남담양, 전남목포, 전남무안, 전남보성, 전남순천, 전남신안, 전남여수, 전남영광, 전남영암, 전남완도, 전남장성, 전남장흥, 전남진도, 전남함평, 전남해남, 전남화순

전라북도
전북고창, 전북군산, 전북김제, 전북남원, 전북무주, 전북부안, 전북순창, 전북완주, 전북익산, 전북임실, 전북장수, 전북전주, 전북정읍, 전북진안

충청남도
충남계룡, 충남공주, 충남금산, 충남논산, 충남당진, 충남보령, 충남부여, 충남서산, 충남서천, 충남아산, 충남예산, 충남천안, 충남청양, 충남태안, 충남홍성

충청북도
충북괴산, 충북단양, 충북보은, 충북영동, 충북옥천, 충북음성, 충북제천, 충북증평, 충북진천, 충북청주, 충북충주

만약 해외에 거주중이시라면 이전과 같이 weoid를 사용하셔도 무방합니다. 단, 숫자코드로 변경하신다 해도 큰 따옴표는 지우면 안됩니다.

예시) var local = "56204173"; // (O) 예시) var local = 56204173; // (X)
[2019.01] 현재 야후 날씨 API 코드가 변경되어 날씨정보가 출력되지 않습니다.

문서 정보 및 저작권

본 문서는 최초 2016. 05. 13(금)에 작성됨.
제작자에 의하여 본문의 내용이 추가될 수 있으며, 내용 추가시 해당 문서의 상단에 최종수정일을 기재함.