“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
설명:
자동으로 복권 번호를 생성해 주는 코드를 짜려고 하는데, 번호가 중복되면 안되므로 set 을 이용하고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출하는 코드를 짜봤습니다.
code
<style>
@font-face {
font-family: 'KotraGothic';
font-weight: normal;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/kotra/KotraGothic.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/kotra/KotraGothic.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kotra/KotraGothic.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kotra/KotraGothic.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/kotra/KotraGothic.ttf') format("truetype");
font-display: swap;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #7ebebe;
margin-top: 200px;
text-align: center;
font-family: 'KotraGothic';
font-weight: bold;
font-size: 30px;
color: #fff;
}
h2 {
margin-bottom: 30px;
}
button {
margin: 0 auto;
border: 1px solid #a99bf0;
background-color: #a99bf0;
color: #fff;
border-radius: 10px;
width: 60px;
height: 30px;
font-size: 18px;
box-sizing: boder-box;
margin-bottom: 30px;
}
</style>
</head>
<body>
<h2>로또 번호 생성기</h2>
<button onclick="generateLottoNumbers()">click</button>
<p id="lottoNumbers"></p>
<script>
// 1부터 45까지의 숫자 중 6개를 무작위로 선택하는 함수
function generateLottoNumbers() {
const lottoNumbers = new Set();
while (lottoNumbers.size < 6) {
lottoNumbers.add(Math.floor(Math.random() * 45) + 1);
}
document.getElementById("lottoNumbers").textContent = [...lottoNumbers].join(", ");
}
</script>
</body>🥖style
font-family 로 가져온 글씨체를 적용하고, 글씨의 크기와 위치를 설정했습니다.
배경색과 글씨색도 설정하고, 클릭 버튼의 크기와 위치도 설정했습니다.
박스 안에 들어있는 글자의 세로 위치를 정하고 싶을 때에는 몇 가지의 방법이 있습니다.
1줄 텍스트 : 박스 높이와 line-height 의 줄 높이를 같게 설정하기
3줄 텍스트 : padding-top 을 설정하고 그 값만큼 박스의 높이를 빼서 재설정하기
3줄 텍스트 : box-sizing 를 이용하기
- content-box(기본값) : 지정한 크기가 padding, border, margin 을 제외하고 요소만큼의 크기를 갖는다.
- boder-box : 지정한 크기가 요소 + padding + border 의 크기가 된다.
box-sizing: boder-box; 를 이용하면 padding 값을 빼지 않아도 자동으로 크기가 맞춰집니다.
🥯body
button 태그를 이용하여 번호 생성하기 버튼을 만들고, onclick 속성을 이용하여 버튼을 클릭하면 generateLottoNumbers() 함수가 실행되도록 합니다.
HTML에서 button 태그는 클릭 가능한 버튼을 만드는 데 사용됩니다.
버튼에는 텍스트나 이미지를 포함시킬 수 있으며, 클릭 이벤트를 처리하는 자바스크립트 함수를 호출할 수 있습니다.
button 태그는 type 속성을 이용하여 버튼의 타입을 지정할 수 있습니다.
기본값은 type="submit"이며, 이 경우 버튼을 클릭하면 폼(form)을 제출합니다.
그 외의 타입으로는 type="button"이 있으며, 이 경우 클릭 이벤트만 처리합니다.
button 태그는 onclick 속성을 이용하여 클릭 이벤트를 처리하는 자바스크립트 함수를 호출할 수 있습니다.
button 태그는 텍스트나 이미지를 포함할 수 있습니다. 텍스트는 <button> 태그와 </button> 태그 사이에 작성하며,
이미지는 src 속성과 alt 속성을 이용하여 지정합니다.
🥨script
함수는 1부터 45까지의 범위에서 중복되지 않는 6개의 무작위 숫자를 선택하여 Set으로 반환하고, document.getElementById("lottoNumbers").textContent를 이용하여 해당 결과를 HTML 문서 내의 p 태그에 출력합니다.
Set은 ES6부터 추가된 데이터 타입 중 하나로, 중복되지 않은 값을 저장하는 컬렉션입니다.
Set 객체에 추가된 값은 자동으로 중복 제거가 되며, 순서를 유지합니다.
Set 객체는 size 속성을 이용하여 저장된 값의 개수를 반환하며, has() 메소드를 이용하여 특정 값이 포함되어 있는지 확인할 수 있습니다. 또한, forEach() 메소드를 이용하여 저장된 값들에 대해 반복 작업을 수행할 수 있습니다.
참고로, textContent는 해당 엘리먼트 내의 모든 텍스트를 변경하며, innerHTML은 해당 엘리먼트 내의 HTML 코드를 변경합니다. 출력하는 내용이 텍스트라면 textContent를 사용하는 것이 보안상 안전합니다.
getElementById는 Document 객체의 메서드 중 하나로, HTML 문서 내에서 id 속성 값으로 엘리먼트를 선택하는 데 사용됩니다. 해당 메서드는 선택한 엘리먼트를 반환합니다.
getElementById를 이용하여 선택한 엘리먼트는 해당 id 값이 있는 문서 내에서 유일해야 합니다.
즉, 동일한 id 값이 여러 개 있는 경우, 해당 메서드로 선택한 결과는 첫 번째로 매칭되는 엘리먼트가 반환됩니다.
주의할 점은 자바스크립트에서 Math.random() 메서드는 0 이상 1 미만의 값을 반환하기 때문에 1부터 45까지의 범위를 생성하려면 Math.floor(Math.random() * 45) + 1과 같이 연산해야 합니다.
Math.random()은 자바스크립트에서 제공하는 내장 함수 중 하나로, 0 이상 1 미만의 구간에서 근사적으로 균일한 분포를 갖는 난수를 반환합니다.
아래는 Math.random()을 이용하여 1부터 45 사이의 무작위 수를 생성하는 예시입니다.
const min = 1; // 최소값 const max = 45; // 최대값 const num = 6; // 생성할 수의 개수 const set = new Set(); while (set.size < num) { // min 이상 max 이하의 무작위 정수 생성 const randomNum = Math.floor(Math.random() * (max - min + 1)) + min; // 중복되지 않는 값을 Set에 추가 set.add(randomNum); } console.log(set); // Set { 1, 7, 10, 22, 33, 44 }위 코드에서는 Math.random() 함수를 이용하여 1 이상 45 이하의 무작위 정수를 생성합니다.
이때 Math.random() 함수는 0 이상 1 미만의 값을 반환하므로, 이를 활용하여 1 이상 45 이하의 값으로 변환하기 위해 max - min + 1을 곱하고, 이에 최소값인 min을 더해줍니다.
이렇게 생성된 값을 Set 객체에 추가하면 중복되지 않는 값만 저장되게 됩니다.
while 루프를 이용하여 Set 객체에 원하는 개수의 값을 저장할 때까지 무작위 수를 생성하도록 하였습니다.
만약 중복된 값을 저장하면 Set 객체의 크기는 원하는 개수보다 작아질 것이므로, 중복을 허용하지 않는 특징을 활용하여 중복된 값을 제거하였습니다.
Math.floor()는 주어진 숫자보다 작거나 같은 가장 큰 정수를 반환하는 메소드입니다.
예를 들어, Math.floor(3.9)를 호출하면 3을 반환합니다. 이는 3.9보다 작은 가장 큰 정수인 3을 반환하기 때문입니다.
아래는 Math.floor() 함수를 이용하여 1부터 45 사이의 무작위 정수를 생성하는 예시입니다.
const min = 1; // 최소값 const max = 45; // 최대값 // min 이상 max 이하의 무작위 정수 생성 const randomNum = Math.floor(Math.random() * (max - min + 1)) + min; console.log(randomNum); // 1부터 45까지의 무작위 정수 중 하나위 코드에서는 Math.random() 함수를 이용하여 0 이상 1 미만의 값을 생성하고, 이를 max - min + 1을 곱하여 0 이상 44 이하의 값을 얻습니다. 이후 Math.floor() 함수를 이용하여 이 값을 0 이상 44 이하의 정수로 변환합니다. 마지막으로 이 값을 최소값인 min에 더하여 1부터 45 사이의 정수로 변환합니다.
이렇게 구한 1부터 45 사이의 무작위 정수를 활용하여 복권 번호 생성 등의 작업을 수행할 수 있습니다.
참고로, textContent는 해당 엘리먼트 내의 모든 텍스트를 변경하며, innerHTML은 해당 엘리먼트 내의 HTML 코드를 변경합니다. 출력하는 내용이 텍스트라면 textContent를 사용하는 것이 보안상 안전합니다.
textContent는 DOM 엘리먼트의 속성 중 하나로, 해당 엘리먼트의 텍스트 콘텐츠를 나타냅니다.
이 속성은 읽기와 쓰기 모두가 가능합니다.textContent를 이용하여 텍스트를 변경할 때, 태그 내부의 HTML 코드는 인식하지 않습니다.
즉, 모든 태그는 그대로 텍스트로 표시됩니다.
만약 HTML 코드를 포함한 텍스트를 표시하고자 한다면, innerHTML 속성을 이용하여 변경해야 합니다.
innerHTML은 DOM 엘리먼트의 속성 중 하나로, 해당 엘리먼트 내의 HTML 마크업을 포함한 전체 콘텐츠를 나타냅니다. 이 속성은 읽기와 쓰기 모두가 가능합니다.
innerHTML을 이용하여 HTML 마크업을 변경할 때, 해당 엘리먼트 내부의 모든 콘텐츠가 변경됩니다.
따라서 기존에 포함되어 있던 콘텐츠가 모두 사라지고, 지정한 HTML 마크업이 새롭게 삽입됩니다.
만약 일부 콘텐츠를 유지한 채, 일부분만 변경하고자 한다면, 해당 콘텐츠를 다른 엘리먼트로 감싸거나, 다른 방법을 이용하여 변경해야 합니다.