16 개의 랜덤한 색 만들기 - 16 gaeui laendeomhan saeg mandeulgi

8. 다음 브라우저 화면과 같이, document.write()를 이용하여 16개의 <div> 태그를 출력하고

<div> 태그에 출력하는 배경색을 랜덤한 색으로 칠하는 웹 페이지를 작성하라.

웹 페이지를 로드할때마다 색이 랜덤하게 바뀐다.

Html/Javascript

[Javascript] 랜덤 색상값(random color) 만들기

지난번에 어떤 자료를 검색하다가 javascript 로 랜덤 컬러를 만들기 위해서

굉장히 복잡한 방법으로 16진수 6자리를 조합하는 것을 본 적이 있어서

한번 블로그에 올려야겠다고 생각한 적이 있어서 오늘 올려봅니다.

난 이론 따위는 필요 없고, 그냥 어떻게 하는지만 알고 싶다. 하는 분을 위해서

우선 javascript 코드부터....

var colorCode = "#" + Math.round( Math.random() * 0xFFFFFF ).toString(16);

alert( colorCode );

#FE0424 이런 형태의 컬러 색상값에 대해서 왜 저런 형태가 되느냐 하면...

색상값은 R, G, B 즉 레드, 그린, 블루 이렇게 3가지 값을 조합해서 이루어져 있습니다.

16진수(0 ~ F) 를 이용해서 0~255 값(256단계)을 처리합니다.

즉 16진수 FF 를 10진수로 나타내면 255 가 출력됩니다.

각각의 R, G, B 는 0~255 값을 가지게 되고 이것들을 16진수로 써서 6자리로 만든게

#FF0000형태의 컬러값이 되는겁니다.

#FF0000 이라는건 R 값은 255, G 는 0, B는 0 이므로 빨간색이 되는거죠.

#을 제외한 뒤에 6자리 숫자는 2자리씩만 연관이 있을뿐 6자리가 연결된 숫자는 아닙니다.

그러나 검정색 000000 과 흰색 FFFFFF 사이에 어떤 수도 색상코드로 표시될 수 있는 값들이 되는거죠.

10진수로 0 ~ 16777215 범위 내의 값을 16진수로 변환하면 16진수 000000 ~ FFFFFF 범위의 값이 됩니다.

javascript 에서 랜덤값을 가져올때 Math.random() 으로 가져올 수 있습니다.

0 ~ 1 사이의 랜덤한 수를 반환해주죠..

이 값에 16777215 를 곱해주면 0 ~ 16777215 중에 하나의 값을 얻을 수 있습니다.

참고로 javascript 에서 16진수는 0xFF 형태로 사용합니다.

따라서 Math.random() * 0xFFFFFF 로 0 ~ 16777215 중에 하나의 값을 얻은 다음

이 값에 Math.round 메서드로 반올림을 해 소수점 자리를 없애주고,

Number 의 toString 메서드를 이용해 10진수를 16진수로 나타낼 수 있습니다.

즉 EF04A3 같은 형태의 6자리 문자열을 얻을 수 있게 되는거죠.

여기에 #을 붙여서 사용하면 랜덤한 색상코드를 얻을 수 있게 됩니다.