Web/100일 코딩 챌린지 - Web Development

섹션 14: 마일스톤 프로젝트: 틱택토 게임 만들기 [40일차]

hy30nq 2024. 1. 23. 12:37
728x90

 

 

오늘 작성한 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic Tac Toe</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/styles/styles.css" />
  </head>
  <body>
    <header id="main-header">
      <h1>Play Tic, Tac, Toe</h1>
      <p>Built with HTML, CSS, JavaScript and - of course - lots 0f love!</p>
    </header>
    <main>
      <aside>
        <h2>Choose your name</h2>

        <form action="">
          <div>
            <label for="playername">Player name</label>
            <input type="text" name="username" id="playername" />
          </div>
          <div>
            <button type="button" class="btn btn-alt">Cancel</button>
            <button type="submit" class="btn">Confirm</button>
          </div>
        </form>
      </aside>
      <section id="game-configuration">
        <ol>
          <li>
            <article>
              <h2>Player 1</h2>
              <h3>PLAYER NAME</h3>
              <p>X</p>
              <button class="btn btn-alt">Edit</button>
            </article>
          </li>
          <li>
            <article>
              <h2>Player 2</h2>
              <h3>PLAYER NAME</h3>
              <p>O</p>
              <button class="btn btn-alt">Edit</button>
            </article>
          </li>
        </ol>
        <button class="btn">Start New Game</button>
      </section>

      <section id="active-game">
        <article>
          <h3>You won, <span id="winner-name">PLAYER NAME</span>!</h3>
          <p>Click "start new Game" above, to sstart a new game!</p>
        </article>

        <p>It's yout turn <span id="active-player-name">PLAYER NAME</span>!</p>
        <ol>
          <li></li>
          <li></li>
          <li></li>

          <li></li>
          <li></li>
          <li></li>

          <li></li>
          <li></li>
          <li></li>
        </ol>
      </section>
    </main>
  </body>
</html>

 

body {
  margin: 0;
  font-family: "Open-Sans", sans-serif;
  color: rgb(44, 41, 44);
  background-color: rgb(247, 239, 247);
}

#main-header {
  background-color: rgb(140, 0, 255);
  color: white;
  padding: 2rem 5%;
  text-align: center;
}

.btn {
  font: inherit;
  padding: 0.5rem 1.5rem;
  background-color: rgb(140, 0, 255);
  border: 1px solid rgb(140, 0, 255);
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.btn-alt {
  background-color: transparent;
  border-color: transparent;
  color: rgb(140, 0, 255);
}

.btn:hover {
  background-color: rgb(79, 10, 190);
  border-color: rgb(79, 10, 190);
}

.btn-alt:hover {
  background-color: rgb(230, 201, 252);
  border-color: transparent;
}

 

 

 

 

728x90