2014. 2. 28. 21:38ㆍIT/Tistory Tips
티스토리의 날짜 표시 형식은 '년/월/일 시:분'이다. 매번 똑같은 날짜만 사용하면 좀 심심하지 않을까? JavaScript를 사용하면 사용자가 원하는 다양한 방식으로 게시물 날짜 형식을 바꿀 수 있다. 기본 개념은 티스토리 스킨에서 게시물 날짜를 표시하는 [##_article_rep_date_##] 치환자 대신 <script> 요소를 삽입하는 것이다. 그럼 몇 가지 방식의 JavaScript 예제를 살펴보자.
1. 년, 월, 일 순서 바꾸기 _ 한국식 날짜 표현
년, 월, 일 순서를 바꾸는 것은 가장 간단한 수정 방식이다. 먼저 년, 월, 일 세 가지 항목을 분리한 다음 원하는 방식으로 재구성한다. 예를 들어 '2014/02/26'을 '2014년 2월 26일' 같은 형식으로 바꿀 수 있다. 일단 아래의 코드를 살펴보자.
<script>
var d = '[##_article_rep_date_##]'.split(/[/| |:]/); // 날짜와 시간을 '/', 빈칸, ':' 기호를 기준으로 나눠서 배열화함
var year = Number(d[0]); // year란 이름의 변수에 'd' 배열의 첫 번째 숫자(년도)를 지정
var month = Number(d[1]); // month란 이름의 변수에 'd' 배열의 두 번째 숫자(월)를 지정
var day = Number(d[2]); // day란 이름의 변수에 'd' 배열의 세 번째 숫자(일)를 지정
document.write(year+"년 "+month+"월 "+day+"일"); // 괄호()안에 지정한 형식으로 날짜 표시
</script>
※ // 뒤의 내용은 주석 처리됨
코드 부분의 var는 변수를 지정하는 부분이다. 'd'라는 이름의 변수에 split으로 나눈 날짜와 시간의 배열을 할당한다는 의미다. split은 .split() 앞의 문자를 지정한 문자 기준으로 나눠서 배열로 만드는 메소드로, 괄호() 안의 '/[/ | |:]/' 부분이 바로 문자를 나눌 기준이다. 위 코드에서는 이 부분에 정규식을 사용했는데, 처음과 끝의 슬래쉬'/'로 정규식이라고 선언하고 그 사이 괄호[]에 기준들을 입력한다. 여기서는 슬래쉬'/'와 빈칸, 콜론':'을 기준으로 사용했고, 각 기준은 '|'(Shift + \)라는 구분자로 구분한다. 예를 들어 .split(/[2|9]/)라고 입력하면 2와 9가 기준이 된다. Number는 숫자화 하는 객체이고 document.write()는 ()의 내용을 화면에 표시하라는 명령이라 이해하면 된다.
일단 게시물의 작성일시가 '2014/02/14 15:30'이라고 가정하고 살펴보자. 첫줄 내용은 '/', 빈칸, ':' 기호를 기준으로 문자를 나누는 것이다. 이 결과값은 [2014, 02, 14, 15, 30]이라는 배열이 된다. 날짜(14)와 시간(15) 사이의 빈칸은 값이 없으므로 배열에서 무시된다.
2~4줄은 첫 줄의 결과값인 2014, 02, 14를 각각 year, month, day라는 변수로 지정한다. 마지막 document.write()는 year, month, day 변수를 사용해서 게시물 날짜를 'xxxx년 xx월 xx일' 형식으로 바꾼다. 결과적으로 위 스크립트의 최종값은 '2014년 2월 14일'이다.
<script>
var d = '[##_article_rep_date_##]'.split(/[/| |:]/); // 날짜와 시간을 '/', 빈칸, ':' 기호를 기준으로 나눠서 배열화함
var year = Number(d[0]); // year란 이름의 변수에 'd' 배열의 첫 번째 숫자(년도)를 지정
var month = Number(d[1]); // month란 이름의 변수에 'd' 배열의 두 번째 숫자(월)를 지정
var day = Number(d[2]); // day란 이름의 변수에 'd' 배열의 세 번째 숫자(일)를 지정
var time = Number(d[3]); // time이란 이름의 변수에 'd' 배열의 네 번째 숫자(시간)를 지정
var minute = Number(d[4]); // minute란 이름의 변수에 'd' 배열의 다섯 번째 숫자(분)를 지정
document.write(year+"년 "+month+"월 "+day+"일 "+time+"시 "+minute+"분"); // 괄호()안에 지정한 형식으로 날짜 및 시간 표시
</script>
※ // 뒤의 내용은 주석 처리됨
앞의 내용을 그대로 적용하면 시간도 같은 방식으로 수정할 수 있다. 'd' 배열의 4, 5번째 값인 시간과 분을 time, minute란 변수에 할당하고 이를 document.write()에 추가한다. 결과값은 '2014년 2월 14일 15시 30분'이다. 위 코드의 document.write()에서 문자로 입력한 "년", "월", "일" 부분을 한자 "年", "月", "日"로 바꾸는 등 다양하게 응용할 수 있다.
2. '월'을 문자로 바꾸기 _ 영어식 날짜 표현
이번에는 영어식으로 날짜를 바꿔보자. 영어식이라 이름 붙이긴 했지만, 실제로는 '월' 부분을 'February'나 'Feb' 같은 영어단어로 바꾸는 내용이다. 여기서는 'February 14, 2014'의 형식으로 바꿔보자.
<script>
var d = '[##_article_rep_date_##]'.split(/[/| |:]/); // 날짜와 시간을 '/', 빈칸, ':' 기호를 기준으로 나눠서 배열화함
var m = new Array("January","February","March","April","May","June","July","August", "September","October","November","December"); // 월 이름 배열 작성
var year = Number(d[0]); // year란 이름의 변수에 'd' 배열의 첫 번째 숫자(년도)를 지정
var month = Number(d[1]-1); // month란 이름의 변수에 'd' 배열의 두 번째 숫자(월)를 지정
var day = Number(d[2]); // day란 이름의 변수에 'd' 배열의 세 번째 숫자(일)를 지정
document.write(m[month]+" "+day+", "+year); // 괄호()안에 지정한 형식으로 날짜 및 시간 표시
</script>
※ // 뒤의 내용은 주석 처리됨
일단 가장 먼저 할 일은 앞에서 '월(숫자)'을 담은 변수 'month'를 숫자가 아닌 문자로 바꾸는 일이다. 두 번째 줄에서 1월부터 12월까지 순서대로 영어단어로 배열을 작성한다. 여기서 m[month]는 month 변수의 '월(숫자)'에 해당하는 m 변수(배열)의 '월(이름)'을 의미한다. 한가지 주의할 점은 배열에서 첫 번째는 '1'이 아닌 '0'이라는 점이다. 즉, 'January'가 '1'이 아닌 '0'에 해당하는 값이란 이야기다. 예를 들면 month의 값이 '2'라면 'March'가, 7이라면 'August'가 반환된다. 그래서 'var month = Number(d[1]-1)' 처럼 '월(숫자)'에서 1을 뺀 값을 month로 지정한다. 나머지는 1번의 내용과 같고, 위 스크립트의 최종 결과값은 'February 14, 2014'이다.
3. 요일 추가하기 _ getDay() 메소드
한국식, 영어식으로 날짜를 바꿨지만, 뭔가 하나 부족한 느낌이다. 그렇다. 요일이 빠졌다. 별것 아니지만, 왠지 하나 추가해두고 싶은 존재랄까? getDay()라는 메소드를 사용해서 요일을 추가해보자. 기본 골격은 2번 내용을 그대로 사용하고, 새로운 변수에 요일 영어단어 배열을 할당해서 getDay()의 결과값인 요일숫자(0~6)와 배열의 요일문자(Sunday, ..., Saturday)를 매칭시키면 끝이다.
<script>
var d = '[##_article_rep_date_##]'.split(/[/| |:]/); // 날짜와 시간을 '/', 빈칸, ':' 기호를 기준으로 나눠서 배열화함
var m = new Array("January","February","March","April","May","June","July","August", "September","October","November","December"); // 월 이름 배열 작성
var year = Number(d[0]); // year란 이름의 변수에 'd' 배열의 첫 번째 숫자(년도)를 지정
var month = Number(d[1]-1); // month란 이름의 변수에 'd' 배열의 두 번째 숫자(월)를 지정
var day = Number(d[2]); // day란 이름의 변수에 'd' 배열의 세 번째 숫자(일)를 지정
var w = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); // 요일 이름 배열 작성
var weekday = new Date(year,month,day); //요일 구하기 위해 날짜 재구성
document.write(w[weekday.getDay()]+", "+m[month]+" "+day+", "+year); // 괄호()안에 지정한 형식으로 요일 및 날짜 표시
</script>
※ // 뒤의 내용은 주석 처리됨
3번에서 새롭게 추가된 내용은 w라는 요일 영어단어 배열과 날짜 정의를 위한 weekday 변수 두 가지다. 2번과 마찬가지로 'weekday.getDay()' 로 '요일(숫자)'를 구하고 w['요일(숫자)']를 거치면서 '요일(문자)'를 반환한다. 배열에 지정된 순서대로 '요일(숫자)'가 '0'이면 'Sunday', '4'면 'Wednesday'를 반환한다. 여기서 변수 weekday는 단순히 게시물의 날짜를 정의하기 위한 것으로, 변수를 따로 작성하지 않고 document.write(w[new Date('[##_article_rep_date_##]').getDay()]) 와 같이 사용할 수도 있다. 위 스크립트의 최종 결과값은 'Friday, February 14, 2014'이다. 참고로, 1번처럼 한국식으로 날짜를 표기할 땐 '요일(문자)' 배열w를 ["일","월", ... ,"토"]나 ["日","月", ... ,"土"]로 바꿔서 사용할 수도 있다.
4. 시간에 오전/오후(am/pm) 구분 추가하기 _ 조건문
마지막으로 살펴볼 내용은 조건문(if, else if, else)을 사용해서 게시물 작성 시간을 24시간 기준이 아닌 12시간 기준으로 변경하고 '오전/오후' 또는 'am/pm'으로 구분하는 내용이다. 일단 JavaScript 조건문 구조를 살펴보자.
Case 1
if (조건)
{조건이 참일 때 실행할 코드}
Case 2
if (조건)
{조건이 참일 때 실행할 코드}
else
{조건이 거짓일 때 실행할 코드}
Case 3
if (조건1)
{조건1이 참일 때 실행할 코드}
else if (조건2)
{조건2가 참일 때 실행할 코드}
else
{조건1,2가 모두 거짓일 때 실행할 코드}
Case 1~3처럼 조건의 수에 따라서 서로 다른 방식으로 코드를 작성한다. 일단 'am/pm'을 나누려면 어떤 조건이 필요한지 생각해보자. 일단 '시'가 0~11일 때는 항상 am이다. 13~23일 때는 pm이며, '시(숫자)'는 원래 숫자에서 12만큼을 뺀 숫자다. 또 '시'가 12일 땐 pm이지만, '시(숫자)'에서 12를 빼지 않는다. 이 내용을 JavaScript 조건문으로 옮기면 아래와 같다.
<script>
var t = '[##_article_rep_date_##]'.substr(11,5).split(":"); // 날짜 시작에서 12번째 문자부터 5개 문자를 선택한 다음 ':' 기호를 기준으로 자름
var time = Number(t[0]); // time이란 이름의 변수에 't'에서 자른 첫 번째 숫자(시간)를 지정
var minute = t[1]; // minute란 이름의 변수에 't'에서 자른 두 번째 숫자(분)를 지정
if (time >= "13") // 조건 1 : time이 13보다 크거나 같다
{k = [time-12]+":"+minute+" pm"} // 값 1 : time에서 12를 뺀 수를 '시(숫자)'로 사용하고 pm으로 오후임을 표시
else if (time < "12") // 조건 2 : time이 12보다 작다
{k = time+":"+minute+" am"} // 값 2 - time을 그대로 사용하고 am으로 오전임을 표시
else // 조건 1,2가 모두 거짓일 때(time이 12일 때)
{k = time+":"+minute+" pm"} // 값 3 - time을 그대로 사용하고 pm으로 오후임을 표시
document.write(k); // 조건문 결과를 표시
</script>
※ // 뒤의 내용은 주석 처리됨
첫 줄의 substr() 메소드는 문자 일부를 자르는 역할을 한다. 앞에서처럼 'd' 변수를 그대로 사용해도 상관없다. minute 변수는 앞에서와 거의 같지만, Number 객체를 사용하지 않았다. Number 객체는 값이 숫자로 인식되기 때문에 '00분' 즉, 정각을 나타낼 때 '00'이 '0'으로 바뀐다. [3:0 pm] 이런 식이다. '오전/오후'나 'am/pm' 으로 구분하는 시간체계에선 보통 분(minute)을 2자리로 사용하므로 Number 객체 없이 그냥 사용한다. 그 아래로 조건문이 나온다. '시(숫자)'가 13보다 크거나 같을 땐 '시(숫자)'에서 12를 빼고 pm을 붙이고, 12보다 작을 땐 '시(숫자)'를 그대로 두고 am을 붙인다. 마지막으로, 13보다 크지도 않고 12보다 작지도 않은 수, 12일 땐 '시(숫자)'는 그대로 사용하지만, pm을 붙인다. 위 스크립트의 결과값은 '3:30 pm'이다. 앞에서 수정한 날짜와 합치면 아래와 같다.
<-------- 한국식 -------->
<script>
var d = '[##_article_rep_date_##]'.split(/[/| |:]/); // 날짜와 시간을 '/', 빈칸, ':' 기호를 기준으로 나눠서 배열화함
var year = Number(d[0]); // year란 이름의 변수에 'd' 배열의 첫 번째 숫자(년도)를 지정
var month = Number(d[1]); // month란 이름의 변수에 'd' 배열의 두 번째 숫자(월)를 지정
var day = Number(d[2]); // day란 이름의 변수에 'd' 배열의 세 번째 숫자(일)를 지정
var time = Number(d[3]); // time이란 이름의 변수에 'd' 배열의 네 번째 숫자(시간)를 지정
var minute = d[4]; // minute란 이름의 변수에 'd' 배열의 다섯 번째 숫자(분)를 지정
if (time >= "13") // 조건 1 : time이 13보다 크거나 같다
{k = "오후 "+[time-12]+":"+minute} // 값 1 : time에서 12를 뺀 수를 '시(숫자)'로 사용하고 pm으로 오후임을 표시
else if (time < "12") // 조건 2 : time이 12보다 작다
{k = "오전 "+time+":"+minute} // 값 2 - time을 그대로 사용하고 am으로 오전임을 표시
else // 조건 1,2가 모두 거짓일 때(time이 12일 때)
{k = "오후 "+time+":"+minute} // 값 3 - time을 그대로 사용하고 pm으로 오후임을 표시
document.write(year+"년 "+month+"월 "+day+"일 "+k); // 괄호()안에 지정한 형식으로 날짜 및 시간 표시
</script>
※ // 뒤의 내용은 주석 처리됨
결과값은 '2014년 2월 14일 오후 3:30'이다.
<-------- 미국식 -------->
<script>
var d = '[##_article_rep_date_##]'.split(/[/| |:]/); // 날짜와 시간을 '/', 빈칸, ':' 기호를 기준으로 나눠서 배열화함
var year = Number(d[0]); // year란 이름의 변수에 'd' 배열의 첫 번째 숫자(년도)를 지정
var month = Number(d[1]-1); // month란 이름의 변수에 'd' 배열의 두 번째 숫자(월)를 지정
var day = Number(d[2]); // day란 이름의 변수에 'd' 배열의 세 번째 숫자(일)를 지정
var time = Number(d[3]); // time이란 이름의 변수에 'd' 배열의 네 번째 숫자(시간)를 지정
var minute = d[4]; // minute란 이름의 변수에 'd' 배열의 다섯 번째 숫자(분)를 지정
if (time >= "13") // 조건 1 : time이 13보다 크거나 같다
{k = [time-12]+":"+minute+" pm"} // 값 1 : time에서 12를 뺀 수를 '시(숫자)'로 사용하고 pm으로 오후임을 표시
else if (time < "12") // 조건 2 : time이 12보다 작다
{k = time+":"+minute+" am"} // 값 2 - time을 그대로 사용하고 am으로 오전임을 표시
else // 조건 1,2가 모두 거짓일 때(time이 12일 때)
{k = time+":"+minute+" pm"} // 값 3 - time을 그대로 사용하고 pm으로 오후임을 표시
var m = new Array("January","February","March","April","May","June","July","August", "September","October","November","December"); // 월 이름 배열 작성
var w = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); // 요일 이름 배열 작성
var weekday = new Date(year,month,day); //요일 구하기 위해 날짜 재구성
document.write(w[weekday.getDay()]+", "+m[month]+" "+day+", "+year+" "+k); // 괄호()안에 지정한 형식으로 요일 및 날짜 표시
</script>
※ // 뒤의 내용은 주석 처리됨
결과값은 'Friday, February 14, 2014 3:30 pm'이다.