JavaScript 입문 : 로또 추첨기 - 마무리

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

사실 이번 장은 그리 내용이 많지 않습니다만 지난번 강좌에 대하여 스스로 복습하는 개념으로 다가가고자 합니다. 어느 분야이든 꾸준하게 공부하고 이어가야 하는데 개발자도 아니고 개발과 관련된 직업이 아닌 취미로 공부하고 있으니 약간의 외부 요인이 생기면 블로그를 포함하여 정리할 수 있는 시간을 가질수 없는게 현실입니다. 

 

특히, 이렇게 생소한 분야인 컴퓨터 코딩분야는 한 2주간 공부를 하지 않으면 아예 다 잊어버린것만 같은 느낌이 듭니다. 게다가 한창 머리 회전이 빠른 젊은 시절이 아닌 은퇴를 앞둔 시점이라 더욱 머리 회전이 되지 않네요. 누가 나이를 숫자라 그랬던가 기억력과 이해력의 한계를 느끼는 순간입니다. 

 

▒ 로또추첨기 마무리

 

지난 시간까지 자바스크립트로 되어진 코딩을 2주 넘게 지난 시점에서 다시 꺼내보니 기억이 나지 않는 부분이 많습니다만, 꾸역꾸역 진도를 나가보고자 합니다. 웹상에서만 당첨번호를 확인해 보았는데 조금은 화면에 CSS를 활용한 결과값을 도출하고자 합니다. 

 

1. 화면 꾸미기 

 

다음과 같은 최종 화면을 나타내고자 합니다. 

 

대부분의 개발자들에게는 간단한 문제지만 저같은 완전 초보는 고민해서 만든 부분입니다. 구동되는 자바스크립트는 기존에서 변화가 없고 HTML과 CSS 부분을 꾸며 보도록 하겠습니다. 

 

① HTML 

 

전체적으로 <div>태그를 4개 이용하면 되겠습니다. 전부 id를 사용하여 CSS에 링크를 시키도록 하겠습니다. 이 id는 JS에서 태그선택에 사용이 되는 것은 기억해 내야 합니다. 

 

② CSS

 

글씨 크기와 각각의 Position 그리고 Box1과 Box2에 대한 꾸미기를 하면 됩니다.

 

③ JS

 

HTML과 CSS를 수정하였으니 마지막으로 JS코드를 같이 캡쳐하도록 하겠습니다.

 

JS코드처럼 긴 코드를 한꺼번에 캡쳐하기 위해서는 VS Code에서 CodeSnap을 확장 설치해야 합니다. 이 부분은 다음시간에 간단히 안내하도록 하겠습니다.

 

CodeSnap을 통해 저장된 파일은 다음과 같습니다. 

 

 

2. 로또 번호 예상해 보기 

 

이제는 로또번호를 예상해 보도록 하겠습니다. 원래 실력이 출중하면 현재까지 나온 1등 번호를 제외하고 나오게 만들어야 하는데 아직까지는 방법을 모르겠습니다. 

 

따라서 로또 홈페이지인 '동행복권' 사이트에서 현재까지 당첨된 1등 번호를 엑셀로 받아서 추첨기에서 나온 번호가 중복이 되면 제외하는 방식으로 예상을 해 보면 재미 있을 것 같습니다. 

 

다음과 같이 엑셀로 현재까지 당첨된 번호를 확인할 수 있습니다. 

 

 

여러분들도 한번 재미로 해 보는 것도 좋을 것 같네요..