OX퀴즈 웹페이지 만들기 - 1. 마크업

오늘은 OX퀴즈 웹페이지를 만드는 과정을 단계별로 따라해 볼 수 있도록 준비했습니다. OX퀴즈 웹페이지는 사용자들에게 문제를 제시하고 O 또는 X로 답변할 수 있는 간단한 퀴즈로 진행이 되는데요. 이번 시간에는 마크업을 진행해 보겠습니다.

[OX퀴즈 프로젝트 관련 게시물]

https://ljj.kr/ox퀴즈-웹페이지-만들기-1-마크업
https://ljj.kr/ox퀴즈-웹페이지-만들기-2-스타일링
https://ljj.kr/ox퀴즈-웹페이지-만들기-3-동작-구현

웹페이지 요구사항

단일 퀴즈 페이지라 요구사항이 그리 많지 않은데요, 대략적인 요구사항은 다음과 같습니다.

첫페이지 > OX진행 > 결과창 순으로 진행이 됩니다.
간단한 상식으로 OX퀴즈이며 단계별 문제풀이 설명이 나옵니다.
마지막 문제의 문제풀이 화면에서 결과창을 보여줍니다.

1. HTML 기본 구조 설정

먼저, OX퀴즈 웹페이지의 기본 구조를 설정해야 합니다. 이를 위해 HTML을 사용하며, 아래와 같이 기본 구조를 작성합니다.
jQuery를 사용할 것이고 jQuery는 내부 스크립트로 개발해야 사용성이 좋기 때문에 개발 후에 외부 스크립트로 옮길려고 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OX퀴즈</title>
    <link href="ox.css" rel="stylesheet">
</head>
<body>
<!-- 여기에 퀴즈 내용을 작성할 예정 -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>

</script>
</body>
</html>

2. 퀴즈 질문과 문제풀이 작성

OX퀴즈 웹페이지에는 여러 개의 질문과 각 질문에 대한 O 또는 X로 답변할 수 있는 라디오 버튼이 필요합니다. 각 질문과 답변, 그리고 해설을 아래와 같이 작성하였습니다.

1. HTML은 프로그래밍 언어이다.
풀이) 큰 범주의 정의에서는 HTML도 프로그래밍 언어의 일종이라고 볼수 있겠으나 일반적으로 말하는 프로그래밍 언어가 아닌 마크업 언어라고 하는 것이 정확한 표현입니다.
2. CSS 선택자 중 ID 선택자가 가장 우선순위가 낮다.
풀이) CSS 선택자 중 ID 선택자는 가장 높은 우선순위를 가집니다. ID 선택자는 유일한 요소를 선택하는 데 사용되며, 다른 선택자보다 우선권이 높습니다..
3. JavaScript 함수를 선언할 때 반드시 `function` 키워드를 사용해야 한다.
풀이) function 키워드가 생략되는 익명함수, 콜백함수, 화살표함수 등이 있을수 있습니다.
4. HTTP 상태 코드 404은 '페이지를 찾을 수 없음'을 나타낸다.
풀이) HTTP 상태 코드 404는 '페이지를 찾을 수 없음'을 나타냅니다. 이 상태 코드는 요청한 페이지나 리소스가 서버에서 찾을 수 없을 때 반환됩니다.
5. 클라이언트 측 스크립트 언어로는 JavaScript를 주로 사용한다.
풀이) 클라이언트 측 스크립트 언어로는 주로 JavaScript를 사용합니다. JavaScript는 웹 브라우저에서 실행되며, 동적인 웹 페이지를 만드는 데 사용됩니다.
6. MVC 아키텍처는 모델, 뷰, 컨트롤러로 구성된다.
풀이) MVC 아키텍처는 모델(Model), 뷰(View), 컨트롤러(Controller)로 구성됩니다. 이 아키텍처는 소프트웨어 개발에서 사용되며, 각 부분의 역할을 분리하여 애플리케이션을 구조화합니다.
7. SQL은 데이터베이스에서 데이터를 검색하기 위한 언어이다.
풀이) SQL은 Structured Query Language의 약자로, 데이터베이스에서 데이터를 검색하고 조작하는 데 사용되는 언어입니다.
8. 정적 웹 페이지는 서버 측 스크립트를 사용한다.
풀이) 정적 웹 페이지는 서버 측 스크립트를 사용하지 않습니다. 서버 측 스크립트를 사용하는 것은 동적 웹 페이지의 특징입니다.
9. 웹 브라우저 캐싱은 웹 페이지 로딩 속도를 높이는데 도움이 된다.
풀이) 웹 브라우저 캐싱은 웹 페이지 로딩 속도를 높이는 데 도움이 됩니다. 이전에 로드한 리소스를 캐시에 저장하여, 다음에 같은 페이지를 방문할 때 더 빠르게 로딩됩니다.
10. 변수 이름에 공백을 포함해도 된다.
풀이) 변수 이름에 공백을 포함할 수 없습니다. 변수 이름은 일반적으로 영문자, 숫자, 밑줄(_)로만 구성되며, 공백은 사용할 수 없습니다.

이제 원고가 준비되었으니 문제부분의 마크업 형식을 정합니다.

<ol>
    <li>
        <p>(문제위치)</p>
	<label><input type="radio" name="q1">O</label>
	<label><input type="radio" name="q1" value="true">X</label>
	<p>(해설위치)</p>
    </li>
</ol>

리스트(li) 요소 한 개가 하나의 문제가 되도록 작성합니다.
정답인 항목의 라디오 버튼에 true 값을 지정해 놓습니다.

3. 결과화면과 진행버튼 작성

결과화면은 내용은 최대한 심플하게 작성하였습니다. 필요한 내용을 추가해서 사용하시면 됩니다.

<p id="ending">당신의 코딩 상식은 <strong>00</strong>점입니다.</p>
<button id="bt">시작하기</button>

4. 폼요소 추가와 마무리

이제 각 문제풀이 진행이 되도록 폼요소 형식을 갖추고 [제출]버튼도 달아줍니다.
보안이 필요한 페이지라면 페이지 문제풀이가 서버와 연동하여 진행되겠지만 여기서는 페이지 입장시 정답과 결과 페이지 정보가 같이 담긴 페이지입니다. 실제론 폼요소를 사용하지 않지만 추후 서버연동을 위해서 폼요소를 사용하였습니다.
다음은 최종 완성된 마크업입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>코딩 상식 OX 퀴즈</title>
    <link href="ox.css" rel="stylesheet">
</head>
<body>
<h1>코딩 상식 OX 퀴즈</h1>
<form id="quiz">
	<fieldset>
		<legend>OX 퀴즈</legend>
		<ol>
			<li>
				<p>HTML은 프로그래밍 언어이다.</p>
				<label><input type="radio" name="q1" value="false">O</label>
				<label><input type="radio" name="q1" value="true">X</label>
				<p>큰 범주의 정의에서는 HTML도 프로그래밍 언어의 일종이라고 볼수 있겠으나 일반적으로 말하는 프로그래밍 언어가 아닌 마크업 언어라고 하는 것이 정확한 표현입니다.</p>
			</li>
			<li>
				<p>CSS 선택자 중 ID 선택자가 가장 우선순위가 낮다.</p>
				<label><input type="radio" name="q2" value="false">O</label>
				<label><input type="radio" name="q2" value="true">X</label>
				<p>CSS 선택자 중 ID 선택자는 가장 높은 우선순위를 가집니다. ID 선택자는 유일한 요소를 선택하는 데 사용되며, 다른 선택자보다 우선권이 높습니다.</p>
			</li>
			<li>
				<p>JavaScript 함수를 선언할 때 반드시 `function` 키워드를 사용해야 한다.</p>
				<label><input type="radio" name="q3" value="false">O</label>
				<label><input type="radio" name="q3" value="true">X</label>
				<p>function 키워드가 생략되는 익명함수, 콜백함수, 화살표함수 등이 있을수 있습니다.</p>
			</li>
			<li>
				<p>HTTP 상태 코드 404은 '페이지를 찾을 수 없음'을 나타낸다.</p>
				<label><input type="radio" name="q4" value="true">O</label>
				<label><input type="radio" name="q4" value="false">X</label>
				<p>HTTP 상태 코드 404는 '페이지를 찾을 수 없음'을 나타냅니다. 이 상태 코드는 요청한 페이지나 리소스가 서버에서 찾을 수 없을 때 반환됩니다.</p>
			</li>
			<li>
				<p>클라이언트 측 스크립트 언어로는 JavaScript를 주로 사용한다.</p>
				<label><input type="radio" name="q5" value="true">O</label>
				<label><input type="radio" name="q5" value="false">X</label>
				<p>클라이언트 측 스크립트 언어로는 주로 JavaScript를 사용합니다. JavaScript는 웹 브라우저에서 실행되며, 동적인 웹 페이지를 만드는 데 사용됩니다.</p>
			</li>
			<li>
				<p>MVC 아키텍처는 모델, 뷰, 컨트롤러로 구성된다.</p>
				<label><input type="radio" name="q6" value="true">O</label>
				<label><input type="radio" name="q6" value="false">X</label>
				<p>MVC 아키텍처는 모델(Model), 뷰(View), 컨트롤러(Controller)로 구성됩니다. 이 아키텍처는 소프트웨어 개발에서 사용되며, 각 부분의 역할을 분리하여 애플리케이션을 구조화합니다.</p>
			</li>
			<li>
				<p>SQL은 데이터베이스에서 데이터를 검색하기 위한 언어이다.</p>
				<label><input type="radio" name="q7" value="true">O</label>
				<label><input type="radio" name="q7" value="false">X</label>
				<p>SQL은 Structured Query Language의 약자로, 데이터베이스에서 데이터를 검색하고 조작하는 데 사용되는 언어입니다.</p>
			</li>
			<li>
				<p>정적 웹 페이지는 서버 측 스크립트를 사용한다.</p>
				<label><input type="radio" name="q8" value="false">O</label>
				<label><input type="radio" name="q8" value="true">X</label>
				<p>정적 웹 페이지는 서버 측 스크립트를 사용하지 않습니다. 서버 측 스크립트를 사용하는 것은 동적 웹 페이지의 특징입니다.</p>
			</li>
			<li>
				<p>웹 브라우저 캐싱은 웹 페이지 로딩 속도를 높이는데 도움이 된다.</p>
				<label><input type="radio" name="q9" value="true">O</label>
				<label><input type="radio" name="q9" value="false">X</label>
				<p>웹 브라우저 캐싱은 웹 페이지 로딩 속도를 높이는 데 도움이 됩니다. 이전에 로드한 리소스를 캐시에 저장하여, 다음에 같은 페이지를 방문할 때 더 빠르게 로딩됩니다.</p>
			</li>
			<li>
				<p>변수 이름에 공백을 포함해도 된다.</p>
				<label><input type="radio" name="q10" value="false">O</label>
				<label><input type="radio" name="q10" value="true">X</label>
				<p>변수 이름에 공백을 포함할 수 없습니다. 변수 이름은 일반적으로 영문자, 숫자, 밑줄(_)로만 구성되며, 공백은 사용할 수 없습니다.</p>
			</li>
		</ol>
	</fieldset>
	<p id="ending">당신의 코딩 상식은 <strong>00</strong>점입니다.</p>
	<button id="bt">시작하기</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
    // 스크립트 작성
</script>
</body>
</html>

결론

이렇게 OX퀴즈 웹페이지의 마크업을 완료하였습니다.
추후 그누보드 연동성을 고려하여 폼요소를 넣고 심플한 마크업 구조를 유지하는것에 주안점을 두었습니다.
이제 마크업이 완료되었으니 스타일링(css)과 동작(jQuery) 부분이 남았네요. CSS 작업에서 뵙겠습니다.