자바스크립트로 OX 퀴즈 페이지 만들기(HTML, CSS, JS) 1

0

 안녕하세요 느종입니다.

요즘은 챗gpt가 있어서 코드를 작성할 때도 정말 많은 도움을 받고 있습니다. 자신이 만들고자 하는 기능에 대해 설명만 해주면 다양한 언어로 코드를 작성해서 알려주니 정말 신기하죠. 예전에는 모르는 내용이 나오거나 코드를 작성하다가 막히면 하나하나 Stack Overflow, 구글링을 해가면서 했었는데 진짜 많이 편해진 것 같아요. 근데 또 한편으로는 직접 코드를 작성하지 않다 보니 언어에 대한 감각도 잊어버리고 머리도 멍청해져감을 느끼는 것 같아요 ㅠㅠ

그래서 함께 공부하는 마음으로 프로그램을 하나씩 작성하면서 블로그에 써보려고 해요. 처음에는 간단하게 OX퀴즈를 맞추는 웹페이지를 작성해볼까 합니다. 처음부터 너무 장황한 프로그램을 작성할 수는 없으니깐요. 자바스크립트 혹은 웹페이지를 만드시는 것을 처음해보시는 초보자분들도 쉽게 따라하실 수 있도록 작성하려고 합니다. 언어는 바닐라 자바스크립트를 사용하고, Visual Studio Code를 이용해서 코드를 작성할거에요. 그럼 시작해보도록 할게요. 함께 공부해요!


설계

OX 퀴즈1

위 사진과 같이 시작 화면 - 메인 화면 - 결과 화면 이렇게 총 3단계에 걸쳐서 만들어볼까합니다. 진짜 간단한 페이지를 만들더라도 내가 무엇을 하고자 하는지, 어떤 페이지를 만들고 싶은지에 대해 큰 청사진을 그리고 시작하면 좋은 것 같아요. 

  • 시작 화면
    • 퀴즈를 시작한다는 내용을 텍스트로 보여주고 시작 버튼을 만들거에요.
  • 메인 화면
    • 각 번호에 맞는 퀴즈 내용을 텍스트로 보여주고 O버튼과 X버튼을 만들거에요.
  • 결과 화면
    • 내가 퀴즈를 몇개를 맞추었는지에 대한 결과를 텍스트로 보여주고 다시하기 버튼을 만들거에요.

각각 페이지를 따로 만들어도 괜찮지만 간단한 OX퀴즈 맞추기이니깐 하나의 페이지에서 보여지도록 작성해볼까합니다.


폴더 및 파일

OX 퀴즈7

웹페이지 만들 때 자주 사용하는 폴더 및 파일 정렬이에요. css폴더에는 style.css파일이 들어있고, images 폴더에는 웹페이지에 사용하는 이미지들을 모아 놓습니다. js 폴더에는 자바스크립트 파일이 들어 있어요. 굳이 이렇게 안하셔도 상관은 없습니다. 간단한 웹페이지 같은 경우에는 그냥 한폴더에 index.html과 style.css파일을 만드셔서 코드를 작성하셔도 무방합니다.


시작 화면 페이지

OX 퀴즈2

제가 만들고자 하는 시작화면 페이지 예시입니다. 그럼 코드를 작성해볼까요!

OX 퀴즈9

[ index.html ]

OX 퀴즈6

[ style.css ]

index.html파일 안 <body> 태그 사이에 위와 같이 코드를 작성해주시면 됩니다. 처음에 설계한대로 퀴즈 번호, 퀴즈, OX 버튼 순으로 작성하시면 됩니다. 시작 화면에서는 퀴즈 번호에 "OX 퀴즈"문구가 나오고, 퀴즈 부분에 "퀴즈를 시작해 볼까요?"라는 문구가 나와야 되는데 그러질 않죠. 하나의 페이지에 만들고자 했기 때문에 그 부분들은 자바스크립트 코드로 각 페이지에 맞게 내용을 변경해줘야 합니다. 그 내용은 아래에서 다루도록 하겠습니다. 자바스크립트 파일은 js폴더에 넣어주시고 위와 같이 코드로 연결해주시면 됩니다.

style.css도 위와 같이 작성해주시면 됩니다. 저는 예시처럼 만들고자해서 저렇게 작성을 하였는데 자신의 입맛에 맞게 가로, 세로, 위치 등등 자유롭게 작성하시면 됩니다.


자바스크립트 코드

OX 퀴즈8

[ scripts.js ]

한 줄씩 살펴볼게요.

1. quizNumber : index.html에서 id가 quizNumber인 태그를 담는 변수

2. quiz : index.html에서 id가 quiz인 태그를 담는 변수

3. startBtn : index.html에서 id가 startBtn인 태그를 담는 변수

4. function init() { } : 초기화 함수에요. 추후에 변수를 초기화 할 때도 이 함수안에다가 넣을거에요.

5. quizNumber.innerHTML = "OX 퀴즈" : id가 quizNumber인 태그(여기에서는 <span></span>)안에 "OX 퀴즈" 텍스트를 넣는 코드

6. quiz.innerHTML = "퀴즈를 시작해 볼까요?" : id가 quizNumber인 태그(여기에서는 <span></span>)안에 "퀴즈를 시작해 볼까요?" 텍스트를 넣는 코드

7. init() : 위에서 함수를 작성해 주었으니 선언을 해줘야 함수가 실행이 되겠죠.

8. startBtn.addEventListener('click', () => { } : <button> 태그에 클릭 이벤트를 붙이는 방법은 다양하게 있습니다. <button> 태그 안에 onClick ="함수" 이렇게 작성을 해도 상관은 없지만, 저는 자바스크립트 코드상에서 작성을 하였습니다. 시작하기 버튼을 눌렀을 때 실행이 되어질 내용을 넣는 부분입니다.

자바스크립트 파일 scripts.js파일은 js폴더에 메모장 파일 하나 새로 만드셔서 파일명이 포함된 이름을 scripts.js로 바꾸시면 됩니다. 그리고 그 파일을 Visual Studio Code로 불러오셔서 위의 코드대로 작성하시면 됩니다.

오늘은 간단한 OX 퀴즈 웹페이지 만들기에서 시작 화면을 만들어보았습니다. 간단한 내용인데도 자세히 쓰다 보니 글이 길어 졌네요. 그럼 다음에는 퀴즈 화면과 결과 화면을 이어서 만들어보도록 하겠습니다. 

Tags

추천 포스팅

댓글 쓰기

다음 이전