웹 개발을 하다 보면 버튼 클릭 시 배경색이 무작위로 바뀌는 기능처럼 랜덤 색상 생성 기능이 필요할 때가 있습니다. JavaScript에서는 16진수 색상 코드(#RRGGBB)를 조합하는 간단한 함수를 통해 손쉽게 구현할 수 있습니다.
기본 문법
JavaScript에서 랜덤 색상을 생성하고 적용하는 기본 문법은 다음과 같습니다.
$("#yourIdName").css("background-color", yourCustomFunctionNameToGetRandomColor());전체 예제 코드
아래는 jQuery와 함께 사용하는 완전한 HTML 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="chooseColor" style="width:100px;height:100px;background-color:#FF0"></div>
<button onclick="pickRandomColor()">Click the button to get random color</button>
</body>
<script>
// getColorCode() 함수는 호출될 때마다 새로운 색상 코드를 반환합니다.
function getColorCode() {
var makeColorCode = '0123456789ABCDEF';
var code = '#';
for (var count = 0; count < 6; count++) {
code = code + makeColorCode[Math.floor(Math.random() * 16)];
}
return code;
}
// 버튼 클릭 시 호출되는 함수.
function pickRandomColor() {
$("#chooseColor").css("background-color", getColorCode());
}
</script>
</html>코드 동작 원리
핵심 로직은 getColorCode() 함수에 있습니다. 동작 과정을 살펴보면 다음과 같습니다.
먼저 16진수에서 사용되는 문자인 0123456789ABCDEF를 변수에 담아둡니다. 그다음 #으로 시작하는 빈 문자열을 준비하고, 반복문을 통해 총 6번에 걸쳐 Math.random()과 Math.floor()를 이용해 16개의 문자 중 하나를 무작위로 선택하여 붙여줍니다. 최종적으로 #A3F2B9 형태의 유효한 HEX 색상 코드가 완성됩니다.
버튼을 클릭하면 pickRandomColor() 함수가 실행되어, 생성된 색상 코드가 jQuery의 .css() 메서드를 통해 해당 div 요소의 배경색으로 적용됩니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 index.html 등으로 저장한 후, VS Code 편집기에서 파일을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server 옵션을 선택하면 됩니다.
실행 결과
페이지를 처음 열면 기본적으로 노란색(#FF0)이 표시됩니다. 이후 버튼을 클릭할 때마다 무작위 색상이 화면에 나타납니다.
버튼 Click the button to get random color을 클릭한 후의 출력 결과는 다음과 같습니다.
이처럼 몇 줄의 간단한 코드만으로도 JavaScript에서 랜덤 색상을 성공적으로 생성하고 적용할 수 있습니다. 응용하면 버튼 색상, 텍스트 색상, 그라데이션 배경 등 다양한 UI 요소에 활용할 수 있습니다.