랜덤 #HEX값 구현하기, HEX Random Table Generate Script
그냥 개인적으로 구현해 보고 싶은 시스템이 하나 있었고, 그것을 만드는 중에 간단하게 아이디어가 하나 떠올라서 구현한 스크립트 입니다. 그렇게 제작된 랜덤 #HEX 구현, HEX Random Table Generate Script 입니다.
원래 의도하던 기능은 기본적인 스크립트로 ‘랜덤으로 지정된 표,테이블 갯수에 한해서 HEX 값을 만드는 것’이었는데, #HEX 값 컬러를 하나하나 찾아보기 어려우니.
여기에 추가로 즉각적으로 HEX 값 컬러를 바로 확인 할 수 있도록 만들어진 표, 테이블의 배경컬러를 지정하는 것 입니다.
정확하게 이 스크립트에는 1.랜덤으로 HEX 값을 만드는 스크립트, 2.지정된 테이블 갯수만큼 제작하는 스크립트, 3.표,테이블의 HEX 값을 시각화 하는 스크립트 를 하나로 합쳤다고 보면 되겠습니다. 여러가지 기능들이 섞여있다 보니 복잡해지는 면이 있어서 GPT-Ai 를 통해 깔끔하게 요청하여 완성 구현했습니다.
HEX Random Table Generate Script
// Generates a random #HEX color value
function getRandomHexColor() {
const hex = Math.floor(Math.random() * 16777215).toString(16);
return `#${hex.padStart(6, '0')}`; // Pads to ensure it's 6 characters long
}
// Function to create a table and apply random HEX values to its cells
function generateRandomColorTable() {
const table = document.createElement('table'); // Create a new table element
const rows = 5; // Create the specified number of rows
const cols = 3; // Create the specified number of columns
for (let i = 0; i < rows; i++) {
const row = table.insertRow(); // Insert a new row
for (let j = 0; j < cols; j++) {
const cell = row.insertCell(); // Insert a new cell
const randomColor = getRandomHexColor(); // Generate a random HEX value
cell.textContent = randomColor; // Display the HEX value as text in the cell
cell.style.backgroundColor = randomColor; // Set the background color of the cell
cell.style.color = '#fff'; // Set the text color to white
}
}
return table; // Return the generated table
}
// Function to refresh and update the content of the second compartment
function refreshContent() {
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = ''; // Clear any previous content
const newTable = generateRandomColorTable(); // Generate a new random color table
contentDiv.appendChild(newTable); // Add the new table to the contentDiv
}
Example Site
예시를 적용하면 다음과 같습니다.
- Refresh 버튼 을 누를 때마다 우측의 테이블에서 HEX 값이 바뀝니다.
- 동시에 랜덤으로 생성된 HEX값에 맞춰 배경색 으로 지정합니다.
HTML – HEX Random Table Generate Script
If CSS style is applied, it is as below.
The CSS style was automatically turned through GPT-Ai.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Compartment Page with Refresh and Random HEX Table</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
height: 100vh;
background-color: #f5f5f7;
color: #1d1d1f;
}
/* Container for both compartments */
.container {
display: flex;
width: 100%;
height: 100%;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}
/* Left and right compartment styles */
.compartment {
flex: 1;
padding: 40px;
box-sizing: border-box;
}
.compartment:nth-child(1) {
background-color: #f0f0f5;
border-right: 1px solid #e0e0e5;
}
.compartment:nth-child(2) {
background-color: #ffffff;
}
h2 {
font-weight: 600;
font-size: 24px;
margin-bottom: 20px;
}
p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}
button {
padding: 12px 30px;
font-size: 18px;
cursor: pointer;
background-color: #0071e3;
color: white;
border: none;
border-radius: 12px;
transition: background-color 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
button:hover {
background-color: #005bb5;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
/* Right cell content styling */
#content {
margin-top: 30px;
font-size: 18px;
}
table {
width: 100%;
border-collapse: collapse;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}
td {
padding: 15px;
text-align: center;
font-size: 18px;
font-weight: 500;
border-bottom: 1px solid #e0e0e5;
transition: background-color 0.3s ease, color 0.3s ease;
}
td:last-child {
border-right: none;
}
td:hover {
color: #1d1d1f;
background-color: #d1e0ff;
}
</style>
</head>
<body>
<div class="container">
<!-- Compartment 1: Button to refresh content -->
<div class="compartment">
<h2>Compartment 1: Refresh Section</h2>
<p>Click the button to refresh content in the second compartment:</p>
<button onclick="refreshContent()">Refresh</button>
</div>
<!-- Compartment 2: Content will be updated here -->
<div class="compartment">
<h2>Compartment 2: Random HEX Color Table</h2>
<div id="content">Click refresh to generate a random HEX color table!</div>
</div>
</div>
<script>
// Generates a random #HEX color value
function getRandomHexColor() {
const hex = Math.floor(Math.random() * 16777215).toString(16);
return `#${hex.padStart(6, '0')}`; // Pads to ensure it's 6 characters long
}
// Function to create a table and apply random HEX values to its cells
function generateRandomColorTable() {
const table = document.createElement('table'); // Create a new table element
const rows = 5; // Create the specified number of rows
const cols = 3; // Create the specified number of columns
for (let i = 0; i < rows; i++) {
const row = table.insertRow(); // Insert a new row
for (let j = 0; j < cols; j++) {
const cell = row.insertCell(); // Insert a new cell
const randomColor = getRandomHexColor(); // Generate a random HEX value
cell.textContent = randomColor; // Display the HEX value as text in the cell
cell.style.backgroundColor = randomColor; // Set the background color of the cell
cell.style.color = '#fff'; // Set the text color to white
}
}
return table; // Return the generated table
}
// Function to refresh and update the content of the second compartment
function refreshContent() {
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = ''; // Clear any previous content
const newTable = generateRandomColorTable(); // Generate a new random color table
contentDiv.appendChild(newTable); // Add the new table to the contentDiv
}
</script>
</body>
</html>
# Css 는 역시 애플이 최고
개인적으로 Css 같은 경우에는 직접 꾸미길 좋아하지만, 복잡해지거나 시간이 오래걸리는 경우가 있습니다. 혹은 다른 일을 해야하는데 내 시간을 빼앗기기 싫은 경우가 해당하죠. 그냥 Ai 를 통해서 애플처럼 웹사이트를 구현하는 디자인으로 만들어 달라고 하니 빠르고 보기에도 깔끔해서 자주 이용하는 편입니다
