[Jquery] 랜덤으로 배경 색상 바꾸기

한가지 배경색이나 한가지 콘텐츠의 색이 지루하다고 느껴질때

또는 콘텐츠의 내용을 랜덤으로 바꾸고자 할때 사용하는 스크립트를 작성해 보겠다

이 기능은 이 블로그의 상단 제목에 적용된 스크립트다.

HTML 작성

<div id="wrap"> // 배경색으로 바꾸고자 하는 엘리먼트에 ID를 지정해 준다.
  <p>여기는 내용입니다.</p>
</div>

CSS 작성

* {
  margin:0;
  padding:0;
}

#wrap {
  width:100%;
  height:300px;
  text-align:center;
  vertical-align:middle;
} // 배경색은 JS가 작동안하는 브라우저에서 기본으로 나타날 속성을 지정해 놓는것이 좋다.

#wrap p {
  color:white;
  font-size:60px;
  line-height:300px;
}

JS 작성

var color = '#';
var letters = ['f6c9cc', 'a8c0c0', 'FEBF36', 'FF7238', '6475A0', 'acc7bf', '5e5f67', 'c37070', 'eae160', 'bf7aa3', 'd7d967'];
// 원하는 색상을 'letters'에 지정한다. 변소는 맘데로 변경해도 무관하다.
color += letters[Math.floor(Math.random() * letters.length)]; // 컬러는 상기 변수들을 조립하는데 랜덤으로 조립한다.
document.getElementById('wrap').style.background = color; // 조립한 컬러를 프론트엔드에서 지정한 ID에 적용한다.

매우 간단하지만 이 스크립트를 활용해서 사용할 곳이 정말 많다.

See the Pen 랜덤으로 배경색 바꾸기 by biggerbig (@biggerbig) on CodePen.