이 과제에서는 HTML, CSS, JavaScript를 사용하여 간단한 로또 번호 생성기를 만드는 법을 배웁니다. 특히, 로또 번호를 생성하는 로직도 직접 한번 생성을 해보면서 함수 생성에 대한 연습을 해볼게요.
1단계: 프로젝트 파일 구조 설정
먼저, 프로젝트를 시작하기 위해 기본 파일 구조를 설정합니다.
1.
새 폴더 생성: 컴퓨터의 원하는 위치에 'lotto-generator'라는 폴더를 만듭니다.
2.
파일 생성: 아래와 같은 파일들을 폴더 안에 생성하세요.
•
index.html
•
styles.css
•
script.js
2단계: HTML 파일 만들기
이제 index.html 파일을 열고, 아래의 코드를 입력합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로또 번호 생성기</title>
<!-- 여기에 styles.css 파일을 불러오는 링크를 추가하세요 -->
</head>
<body>
<div class="container">
<h1>로또 번호 생성기</h1>
<button id="generateButton">행운의 넘버!</button>
<div id="numbers"></div>
</div>
<!-- 여기에 script.js 파일을 불러오는 스크립트를 추가하세요 -->
</body>
</html>
HTML
복사
과제: HTML 파일 완성하기
•
<head> 태그 안에 styles.css 파일을 불러오는 <link> 태그를 추가하세요.
•
<body> 태그 끝 부분에 script.js 파일을 불러오는 <script> 태그를 추가하세요.
이 파일들을 불러오지 않으면 스타일과 기능이 적용되지 않습니다.
3단계: CSS 파일 만들기
•
이제 styles.css 파일을 열고, 아래의 기본적인 스타일을 적용합니다.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* 여기에 container 클래스에 대한 스타일을 추가하세요 */
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
/* 여기에 numbers ID에 대한 스타일을 추가하세요 */
CSS
복사
과제: CSS 파일 완성하기
•
제가 기본적인 css 만 했으니, 여러분들이 나머지는 완성시켜주세요!
•
.container 클래스에 대한 스타일을 추가하세요. (배경색, 패딩, 그림자 등을 지정해 보세요.)
•
#numbers ID에 대한 스타일을 추가하세요. (폰트 크기나 텍스트 정렬 등을 지정해 보세요.)
4단계: JavaScript 파일 만들기
마지막으로, script.js 파일을 열고, 아래의 코드를 입력합니다.
// 버튼이 눌렸을 때, 이벤트가 작동되도록 이벤트리스너를 넣어준 코드입니다.
document.getElementById('generateButton').addEventListener('click', function() {
let numbers = generateLottoNumbers(); // 버튼이 눌리면 이 함수가 실행이 될 거에요.
document.getElementById('numbers').textContent = numbers.join(', ');
});
function generateLottoNumbers() {
/* 여기에 generateLottoNumbers 함수를 완성해주세요. */
}
JavaScript
복사
과제: generateLottoNumbers 함수 완성하기
generateLottoNumbers 함수는 로또 번호를 생성하는 역할을 합니다. 다음 힌트를 참고하여 함수를 작성하세요:
1.
빈 배열 만들기: 로또 번호를 저장할 빈 배열을 만듭니다.
2.
반복문 사용: 배열에 6개의 번호가 들어갈 때까지 반복문을 사용하세요.
3.
랜덤 번호 생성: 1부터 45 사이의 랜덤 번호를 생성합니다. 이때, Math.random()과 Math.floor() 함수를 사용하면 유용합니다.
4.
중복 검사: 배열에 이미 같은 번호가 들어있지 않은지 확인한 후, 배열에 추가하세요. 배열의 includes() 메서드를 사용하면 중복 검사가 가능합니다.
5.
배열 반환: 6개의 번호가 모두 배열에 추가되면, 배열을 반환합니다.
힌트를 참고하여, generateLottoNumbers 함수를 직접 작성해보세요!
5단계: 프로젝트 실행
모든 파일을 저장한 후, index.html 파일을 브라우저에서 열어보세요. HTML, CSS, JavaScript 파일을 올바르게 작성하고 링크했다면, "Generate Numbers" 버튼을 클릭했을 때 1부터 45까지의 로또 번호가 화면에 표시될 것입니다.
추가 과제 (Optional)
기본 기능을 완성했다면, 아래의 추가 과제를 시도해 보세요:
•
번호를 오름차순으로 정렬해서 출력하기
•
이전 결과를 저장하고, 새 결과와 비교하기
•
결과를 더 멋지게 스타일링하기