[hello world] 게임의 html 문서를 완성해봅시다.

관련된 지난 포스팅이 궁금하시면 아래 링크를 클릭해주세요.

어떤 게임을 만드는지 궁금하신 분들은 여기로!
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인 것은 이렇게 꾸미세요"라고 한다면 똑같은 값을 하나하나씩 붙여넣는 것보다 훨씬 편해지게 되죠.

설명이 좀 길어졌습니다 ㅎㅎ 다음 포스팅에서는 좀 꾸며서 투박한 디자인을 벗어나도록 해보겠습니다.