관련된 지난 포스팅이 궁금하시면 아래 링크를 클릭해주세요.
어떤 게임을 만드는지 궁금하신 분들은 여기로!
html의 기초문법이 궁금하신 분들은 여기로!
필수적으로 채워야할 태그가 궁금하신 분들은 여기로!
오늘 포스팅에서는 html문서를 다 완성시켜보도록 하겠습니다. 위의 과정들을 다 따라오셨다면 현재는 "tic-tac-toe gazua"라는 제목만 출력되어 있는 상태입니다.
제목 밑에는 여러가지 메세지를 전달해주는 창을 만들어야 합니다. 누구의 차례이고, 누가 이겼고, 게임이 끝났다 라는 등의 메시지들을 전달하죠.
<h1>tic tae toe Gazua</h1>
<div id="message">메시지는 여기에서 가즈아!</div>
메시지 창은 div태그로 구현했습니다. 자바스크립트를 통해서 태그들을 제어할 수 있는데, 후에 상황에 맞는 메시지로 계속 바꿔줄 예정입니다.
그 밑에는 이제 표를 만들어서 넣기만 하면 됩니다.
<table>
<tr>
<td class="Square" id="s1">1</td>
<td class="Square" id="s2">1</td>
<td class="Square" id="s3">1</td>
</tr>
<tr>
<td class="Square" id="s4">2</td>
<td class="Square" id="s5">2</td>
<td class="Square" id="s6">2</td>
</tr>
<tr>
<td class="Square" id="s7">3</td>
<td class="Square" id="s8">3</td>
<td class="Square" id="s9">3</td>
</tr>
</table>
표를 만들땐 table 태그로 감싸주고 tr태그와 td태그를 쓰면 됩니다. tr은 table row의 줄임말입니다. 각 행을 나타내고, td는 table data의 줄임말로 그 안에 각 데이터를 표시한 것입니다.
| 1 | 1 | 1 |
|---|---|---|
| 2 | 2 | 2 |
| 3 | 3 | 3 |
저장하고 새로고침해서 표를 보시면 위와 같은 형태로 되어 있을겁니다. 꾸미는 것들은 다 css를 통해서 합니다. 지금은 모양이 다 투박해도 패스하시면 됩니다.
마지막으로는 "다시하기" 버튼을 만들어보도록 하겠습니다.
<button id="restart">다시하기</button>
테이블 밑에 해당 태그를 복사해서 붙여넣으시면 버튼이 생깁니다.
지금까지 잘 따라오셨다면 이런 상태가 되어있겠지요?
마지막으로는 태그의 속성과 class, id를 설명하도록 하겠습니다.
태그에는 부가적인 설명이 필요한 것들이 있습니다. 이미지 태그의 경우 이미지가 있는 주소가 있어야 하죠. 이러한 설명들은 속성으로 나타냅니다.
<태그 속성="속성값" 속성2="속성2 값"></태그>의 형태로 나타납니다.
태그에 따라 공통적으로 가지는 속성이 있고, 특수하게 몇몇 태그만 가지는 속성이 있습니다. 이미지 링크가 필요없는 태그들은 그런 속성을 가질 필요가 없는 것처럼요. id와 class는 태그들이 공통적으로 가지는 속성입니다. 그 태그들에게 새로운 닉네임을 부여하는 것이라고 할 수 있습니다. 하지만 id는 그 페이지에서 하나만 가져야하는 것이고, class는 여러 태그가 똑같은 이름을 가져도 됩니다.
td태그를 보시면 square라는 class를 다 같이 갖고 있으면서, id는 s+숫자로 개별적으로 가지고 있습니다. 이렇게 부여한 이유는 편해지기 때문입니다. 만약 표를 꾸며야하는 상황이 오면 다 똑같은 표기 때문에 "class 값이 square인 태그를 모두 이렇게 꾸미세요"라는 명령이 가능하고, 다 적용한 뒤 개별적으로 "id가 00인 것은 이렇게 꾸미세요"라고 한다면 똑같은 값을 하나하나씩 붙여넣는 것보다 훨씬 편해지게 되죠.
설명이 좀 길어졌습니다 ㅎㅎ 다음 포스팅에서는 좀 꾸며서 투박한 디자인을 벗어나도록 해보겠습니다.