지난 color flipper만들기 내용보다 조금 더 심화 버전의 내용이 있다.
hex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color Flipper || Hex</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav>
<div class="nav-center">
<h4>color flipper</h4>
<ul class="nav-links">
<li><a href="index.html">simple</a></li>
<li><a href="hex.html">hex</a></li>
</ul>
</div>
</nav>
<main>
<div class="container">
<h2>background color : <span class="color">#f1f5f8</span></h2>
<button class="btn btn-hero" id="btn">click me</button>
</div>
</main>
<!-- javascript -->
<script src="hex.js"></script>
</body>
</html>html파일의 내용은 hex인것만 빼고는 딱히 달라진건 없다.
이전의 내용에서는 color라는 배열 안에서 random으로 색을 지정 했었다.
이번에는 16진수로 색을 표현하는 방식을 hex 색지정 방식인데 이를 통해서 더 다양한 색을 랜덤으로 구현해 볼 수 있다.
전체적인 코드는 아까와 거의 비슷하고 hex라는 랜덤배열과 이벤트리스너에서 함수가 작동하는 방식이 달라졌다.
1. 배열설정
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];- 16진수를 이루는 16자리의 문자를 hex에 담아준다.
2. 이벤트 리스너 설정
btn.addEventListener("click", function () {
let hexColor = "#";
for (let i = 0; i < 6; i++) {
hexColor += hex[getRandomNumber()];
}- hexColor라는 변수를 선언하고 초깃값으로 "# "으로 설정한다.
- 모든 16진수의 색상값은 '#'으로 시작하며 이 변수를 기반으로 색상코드를 생성할 것이다.
for (let i = 0; i < 6; i++) {
hexColor += hex[getRandomNumber()];
}
- 자바스크립트의 반복문을 사용한다.
- for 루프는 조건에 의하여 6번 반복된다. 이는 16진수의 색상코드가 6자리로 이루어져 있기 때문이다. 예를 들어 #ff5733, #12ab9c.
- 각 반복마다 getRandomNumber를 호출하여 0부터 hex길이 미만에 해당하는 숫자를 생성한다.
- hexColor += hex[getRandomRandomNumber()]는 hexColor에 무작위로 선택된 16진수의 문자를 추가하여 랜덤 색상을 만들어낸다.
이후의 과정은 이전의 내용과 동일하다.
'개발 > javascript' 카테고리의 다른 글
| [JS] Review Carousel 리뷰캐러셀 (1) | 2024.06.08 |
|---|---|
| [JS] Counter 만들기 (1) | 2024.06.08 |
| [JS] Color Flipper만들기 (0) | 2024.06.07 |
| [JS] 시작 (1) | 2024.06.07 |
| 자료구조와 자료형 (0) | 2024.04.14 |
