반응형
SMALL
📌 개요
HTML, CSS, JavaScript를 활용하여 클릭할 때마다 랜덤한 얼굴(이모지, 아이콘, SVG 등)을 생성하는 기능을 구현합니다.
이 기능을 통해 랜덤한 표정, 얼굴형, 액세서리 등을 조합하여 다양한 얼굴을 생성할 수 있습니다.
여기서는 Math.floor(Math.random()) 함수가 핵심입니다.
아래 MDN을 한번 보세요!
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random
Math.random() - JavaScript | MDN
Math.random() 정적 메서드는 0보다 크거나 1보다 작은 부동 소수점 의사 난수를 반환하며, 해당 범위에서 거의 균일한 분포를 가지므로 원하는 범위로 확장할 수 있습니다. 구현체는 난수 생성 알고
developer.mozilla.org
📌 구현 기능
- 버튼을 클릭하면 랜덤한 얼굴(이모지) 생성
- 랜덤한 표정, 액세서리, 얼굴형 조합
- 사용자가 원하는 스타일을 적용할 수 있도록 CSS 스타일링
- JavaScript의 Math.random()을 활용하여 랜덤 요소 선택
📌 HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜덤 얼굴 생성기</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
background-color: #f4f4f4;
}
.face-container {
font-size: 50px;
margin: 20px auto;
padding: 20px;
display: inline-block;
background: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 15px;
font-size: 16px;
border: none;
background: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<h2>🎭 랜덤 얼굴 생성기</h2>
<div class="face-container" id="faceContainer">😀</div>
<br>
<button id="generateFace">랜덤 얼굴 생성</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
const faceContainer = document.getElementById("faceContainer");
const generateButton = document.getElementById("generateFace");
// 얼굴 요소 배열
const faces = ["😀", "😁", "😂", "😃", "😄", "😆", "😅", "😇", "😎", "😍", "😜", "😡", "😱", "😴", "🤔", "😷", "🤠", "👻", "👽", "🤖"];
// 랜덤 얼굴 생성 함수
function generateRandomFace() {
const randomIndex = Math.floor(Math.random() * faces.length);
faceContainer.textContent = faces[randomIndex];
}
// 버튼 클릭 이벤트
generateButton.addEventListener("click", generateRandomFace);
});
</script>
</body>
</html>📌 코드 설명
✅ 1. HTML & CSS 구성
- face-container: 현재 표시되는 얼굴 이모지를 보여주는 영역
- button: 클릭 시 새로운 랜덤 얼굴을 생성하는 버튼
- CSS를 활용하여 버튼 스타일링 및 얼굴 표시 컨테이너 스타일링 적용
✅ 2. JavaScript 기능
- faces[] 배열을 생성하여 여러 얼굴 이모지를 저장
- Math.random()을 이용해 랜덤한 얼굴을 선택
- textContent를 이용해 선택된 이모지를 face-container에 표시
- addEventListener()를 사용하여 버튼 클릭 시 랜덤 얼굴을 변경
📌 마무리 🎯
- Math.random()을 활용하여 랜덤 얼굴 선택
- textContent를 이용해 동적 UI 변경
- 간단한 HTML, CSS, JavaScript만으로 인터랙티브한 기능 구현
- 기능 확장 가능: 랜덤 얼굴 스타일 조합 추가 가능
배열에 실제 사진 이미지를 넣어서 게임을 만들어도 재미있을 것 같네요!
반응형
LIST
'Javascript' 카테고리의 다른 글
| [Dseok의 코딩스터디] JavaScript slice() 한방에 끝내기 | 개념 & 실전 예제 10가지 (0) | 2025.03.05 |
|---|---|
| [Dseok의 코딩스터디] JavaScript로 인터렉티브 타이머 효과 만들기 (0) | 2025.03.03 |
| [Dseok의 코딩스터디] JavaScript로 간단한 채팅봇 만들기 (1) | 2025.03.02 |
| [Dseok의 코딩스터디] JavaScript map() 한방에 끝내기 | 개념 & 실용 예제 10가지 (0) | 2025.03.01 |
| [Dseok의 코딩스터디] JavaScript forEach() 한방에 끝내기 | 개념 & 실무 예제 10가지 | API 데이터 가져오기 (0) | 2025.03.01 |