JavaScript Date · 색상 완전 정리

 

 

Web Development · JavaScript

JavaScript Date · 색상

Date 조건 배경색, CSS 색 이름, 랜덤 RGB 색상 생성을 정리합니다.

시작 오늘 분석할 코드

이 장은 JavaScript의 기본 데이터 구조와 브라우저 출력 연습을 묶은 내용입니다. 객체를 만드는 방식, 배열을 순회하고 정렬하는 방식, Date와 색상 문자열을 화면에 반영하는 흐름을 구분합니다.

let current = new Date(); if (current.getHours() < 12) document.body.style.backgroundColor = "lightskyblue"; else document.body.style.backgroundColor = "orange"; let week = ["일", "월", "화", "수", "목", "금", "토"]; if (current.getDay() == 0) document.body.style.backgroundColor = "pink"; else document.body.style.backgroundColor = "gold"; function newColor() { let r = Math.floor(Math.random() * 256); let g = Math.floor(Math.random() * 256); let b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")"; }

Date현재 날짜와 시간을 다루는 객체입니다.

getHours현재 시를 0~23으로 반환합니다.

getDay요일을 0~6으로 반환합니다.

backgroundColor요소 배경색 CSS 속성입니다.

RGBred, green, blue 값으로 색을 표현합니다.

Math.random랜덤 색상 값을 만드는 데 사용합니다.

---

1 Date 객체

Date 객체는 현재 날짜와 시간을 담습니다. 원문은 현재 시간을 읽어 오전/오후에 따라 배경색을 바꾸고, 현재 요일을 읽어 일요일인지 판단합니다.

메서드	결과	예시
getHours()	0~23	오전/오후 판단
getMinutes()	0~59	분 출력
getSeconds()	0~59	초 출력
getDay()	0~6	요일 판단
getDate()	1~31	일 출력

---

2 시간에 따른 배경색

getHours() < 12이면 오전으로 보고 lightskyblue를, 아니면 오후로 보고 orange를 적용합니다.

오전

0시부터 11시까지 lightskyblue 배경입니다.

오후

12시부터 23시까지 orange 배경입니다.

---

3 요일에 따른 배경색

getDay()는 일요일을 0으로 반환합니다. 그래서 0이면 pink, 그 외 요일이면 gold 배경을 적용합니다.

값	요일	색상
0	일요일	pink
1	월요일	gold
2	화요일	gold
6	토요일	gold

---

 

반응형

 

4 CSS 색 이름 17개

CSS2 색 이름 예제는 colorNames 배열을 순회하면서 각 이름을 배경색으로 가진 div 문자열을 만듭니다.

색상 그룹	예시	출력 방식
빨강 계열	maroon, red	div background-color
노랑/초록	yellow, olive, green	div background-color
파랑 계열	navy, blue, aqua	div background-color
무채색	black, silver, gray	div background-color

---

5 문자열 생성 방식

색상 div를 만들 때 원본은 문자열 연결을 사용하고, 주석에서는 템플릿 리터럴과 DOM API 방식도 소개합니다.

문자열 연결

str += ... 방식으로 HTML 문자열을 만듭니다.

DOM API

createElement와 appendChild로 요소를 직접 만듭니다.

---

6 랜덤 색상

랜덤 색상 예제는 RGB 각 값을 0~255 범위의 정수로 만들고, rgb(r,g,b) 문자열을 반환합니다.

단계	코드	결과
난수	Math.random()	0 이상 1 미만
범위 확대	* 256	0 이상 256 미만
정수화	Math.floor	0~255
문자열	rgb(...)	CSS 색상값

---

7 랜덤색상 주의점

원문 리터럴 방식은 newColor()를 배경색과 표시 텍스트에서 각각 호출합니다. 그러면 실제 배경색과 표시된 rgb 문자열이 서로 다를 수 있습니다.

같은 색을 배경과 텍스트에 쓰려면 let color = newColor()로 한 번만 호출한 뒤 재사용해야 합니다.

방식	결과	권장
newColor() 두 번 호출	배경과 텍스트 불일치 가능	주의
color 변수 재사용	배경과 텍스트 일치	권장
DOM API 생성	구조적으로 안전	실무 권장
document.write	학습용으로 간단	로드 중에만 사용

---

8 자주 하는 실수

실수	증상	해결
getDay 값 혼동	요일 판단이 틀립니다.	일요일이 0임을 기억합니다.
12시 조건 오해	정오가 오전으로 처리된다고 착각합니다.	12시는 오후 조건입니다.
RGB 범위 오류	색상이 이상하게 적용됩니다.	0~255 정수로 만듭니다.
newColor 중복 호출	표시값과 배경색이 다릅니다.	변수에 저장 후 재사용합니다.
document.write 남용	문서가 덮일 수 있습니다.	DOM API 출력을 연습합니다.

---

9 복습 체크리스트

체크	통과 기준
Date	현재 시간 객체를 만들 수 있습니다.
getHours	오전/오후 조건을 작성합니다.
getDay	요일 배열 index와 연결합니다.
colorNames	색상 배열을 순회해 div를 만듭니다.
newColor	랜덤 RGB 문자열을 만듭니다.
template	템플릿 리터럴의 장점을 설명합니다.

---

10 디버깅 포인트

확인	콘솔 예시	의미
현재 시간	console.log(current)	Date 객체 확인
시간	console.log(current.getHours())	조건값 확인
요일	console.log(current.getDay())	요일 index 확인
색상	console.log(newColor())	RGB 문자열 확인
배경색	console.log(document.body.style.backgroundColor)	적용된 색상 확인

---

11 테스트 케이스

케이스	조건	예상
오전	12시 전	lightskyblue
오후	12시 이후	orange
일요일	getDay 0	pink
평일	getDay 1~5	gold
색상표	17개 색 배열	17개 div 출력
랜덤색	16번 반복	랜덤 색 div 출력

---

11 Date 개선 연습

Date 예제는 시간과 요일에 따라 화면을 바꾸는 조건문 연습입니다. 조건을 더 세분화하면 다양한 시간 기반 UI를 만들 수 있습니다.

A

아침/점심/저녁 구분getHours 값을 세 구간으로 나누어 배경색을 다르게 합니다.

B

주말 구분getDay가 0 또는 6이면 주말 색을 적용합니다.

C

현재 날짜 표시년, 월, 일을 함께 출력합니다.

D

실시간 갱신setInterval로 초를 계속 갱신합니다.

조건	예시	색상 아이디어
새벽	0~5시	navy
오전	6~11시	lightskyblue
오후	12~17시	orange
저녁	18~23시	purple
주말	0 또는 6	pink

---

12 색상 출력 개선

색상표와 랜덤 색상 예제는 document.write 대신 DOM API로 바꾸면 구조가 더 명확해집니다. div를 만들고 style.backgroundColor와 textContent를 따로 넣으면 됩니다.

방식	코드 흐름	장점
document.write	HTML 문자열 생성	예제가 짧습니다.
템플릿 리터럴	문자열 가독성 개선	변수 삽입이 쉽습니다.
createElement	요소 생성 후 속성 설정	구조가 안전합니다.
textContent	텍스트만 출력	HTML 해석 위험이 없습니다.
appendChild	문서에 추가	DOM 흐름과 잘 맞습니다.

const div = document.createElement("div"); const color = newColor(); div.style.backgroundColor = color; div.textContent = color; document.body.appendChild(div);

---

13 추가 테스트

테스트	확인 내용
시간 조건 강제	임시로 hour 변수를 만들어 오전/오후 색을 확인합니다.
요일 조건 강제	day 값을 0과 1로 바꿔 색 차이를 확인합니다.
색 이름 오타	잘못된 색 이름이 적용되지 않는지 확인합니다.
랜덤 색 재사용	배경과 표시 텍스트가 같은 rgb인지 봅니다.
DOM 출력	document.write 없이 div가 추가되는지 확인합니다.
새로고침	랜덤 색이 매번 바뀌는지 확인합니다.

마무리

핵심 기준Date는 조건값을 만들고, 색상 문자열은 CSS 속성값으로 적용됩니다.

---

핵심 한 줄 요약

Date시간과 요일 조건으로 배경색을 바꿀 수 있습니다.

colorCSS 색 이름이나 rgb 문자열을 backgroundColor에 넣습니다.

randomRGB 각 값을 난수로 만들면 랜덤 색상을 생성할 수 있습니다.

Tags

#JavaScript#Date#getHours#getDay#CSS#color#RGB#Math.random#backgroundColor#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, Date, getHours, getDay, CSS, color, RGB, Math.random, backgroundColor, 티스토리