[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alToNumGame</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#container {
width: 940px;
margin: 10px auto;
padding: 20px;
border: 1px solid #bcbcbc;
}
#header {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
}
#content {
width: 550px;
height: 350px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#sidebar {
width: 290px;
height: 350px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #bcbcbc;
}
#footer {
clear: both;
padding: 20px;
border: 1px solid #bcbcbc;
}
@media (max-width: 480px) {
#container {
width: auto;
}
#content {
float: none;
width: auto;
}
#sidebar {
float: none;
width: auto;
}
}
table {
border: 1px solid #444444;
border-collapse: collapse;
width: 100%;
text-align: center;
}
th, tr, td {
border: 1px solid #444444;
border-collapse: collapse;
padding: 10px;
}
th:nth-child(2n), td:nth-child(2n) {
background-color: #ffffff;
}
th:nth-child(2n-1), td:nth-child(2n-1) {
background-color: #e7e7e7;
}
#choose {
width: 940px;
margin: 0px auto;
padding: 20px;
border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>알파벳 순서 맞히기 게임</h1>
</div>
<div id="content">
<h2>알파벳-순서</h2>
<p>
<table>
<tr>
<td>1</td>
<td>A</td>
<td>6</td>
<td>F</td>
<td>11</td>
<td>K</td>
<td>16</td>
<td>P</td>
<td>21</td>
<td>U</td>
<td>26</td>
<td>Z</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
<td>7</td>
<td>G</td>
<td>12</td>
<td>L</td>
<td>17</td>
<td>Q</td>
<td>22</td>
<td>V</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>C</td>
<td>8</td>
<td>H</td>
<td>13</td>
<td>M</td>
<td>18</td>
<td>R</td>
<td>23</td>
<td>W</td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>D</td>
<td>9</td>
<td>I</td>
<td>14</td>
<td>N</td>
<td>19</td>
<td>S</td>
<td>24</td>
<td>X</td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>E</td>
<td>10</td>
<td>J</td>
<td>15</td>
<td>O</td>
<td>20</td>
<td>T</td>
<td>25</td>
<td>Y</td>
<td></td>
<td></td>
</tr>
</table>
</p>
</div>
<div id="sidebar">
<h2>게임시작</h2>
<ol type="1">
<li>
<a href="alToNum.html">알파벳 보고 순서 맞히기</a>
</li>
<li>
<a href="numToAl.html">순서 보고 알파벳 맞하기</a>
</li>
</ol>
</div>
<div id="footer">
<p>copyright</p>
</div>
</div>
</body>
</html>
[alToNum.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#container {
width: 940px;
margin: 10px auto;
padding: 20px;
border: 1px solid #bcbcbc;
}
#header {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
}
#content {
width: 550px;
height: 350px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#sidebar {
width: 290px;
height: 350px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #bcbcbc;
}
#footer {
clear: both;
padding: 20px;
border: 1px solid #bcbcbc;
}
@media (max-width: 480px) {
#container {
width: auto;
}
#content {
float: none;
width: auto;
}
#sidebar {
float: none;
width: auto;
}
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>알파벳 보고 순서 맞히기</h1>
</div>
<div id="content">
<h2>랜덤 알파벳</h2>
<p>
알파벳 나오는 곳<br>
알파벳 나오는 곳<br>
알파벳 나오는 곳
</p>
</div>
<div id="sidebar">
<h2>순서 맞히기</h2>
<input type="text" placeholder="숫자 입력" id="num" name="num">
<input type="submit" id="btnSubmit" value="제출">
</div>
<div id="footer">
<a href="numToAl.html">순서 보고 알파벳 맞히러 가기</a>
<a href="index.html">메인 페이지로 돌아가기</a>
</div>
</div>
</body>
</html>
[numToAl.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#container {
width: 940px;
margin: 10px auto;
padding: 20px;
border: 1px solid #bcbcbc;
}
#header {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
}
#content {
width: 550px;
height: 350px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#sidebar {
width: 290px;
height: 350px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #bcbcbc;
}
#footer {
clear: both;
padding: 20px;
border: 1px solid #bcbcbc;
}
@media (max-width: 480px) {
#container {
width: auto;
}
#content {
float: none;
width: auto;
}
#sidebar {
float: none;
width: auto;
}
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>순서 보고 알파벳 맞히기</h1>
</div>
<div id="content">
<h2>랜덤 숫자</h2>
<p>
알파벳 나오는 곳<br>
알파벳 나오는 곳<br>
알파벳 나오는 곳
</p>
</div>
<div id="sidebar">
<h2>알파벳 맞히기</h2>
<input type="text" placeholder="대문자 알파벳 입력" id="al" name="al">
<input type="submit" id="btnSubmit" value="제출">
</div>
<div id="footer">
<a href="numToAl.html">알파벳 보고 순서 맞히러 가기</a>
<a href="index.html">메인 페이지로 돌아가기</a>
</div>
</div>
</body>
</html>