이미지 선택 로그인

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <style>
    :root {
      --theme-color: blue;
    }
    .wrap * {
      margin: 0;
      padding: 0;
    }
    .wrap .choice {
      display: flex;
      justify-content: space-evenly;
      height: 10em;
    }
    .wrap .choice a {
      text-decoration: none;
      background-color: var(--theme-color);
      border: 1px double var(--theme-color);
      border-radius: 0.4em;
      width: 6em;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .wrap .choice a span {
      font-size: 3em;
    }
    .wrap ul {
      list-style-type: none;
    }
    .wrap .frm {
      text-align: center;
      margin-top: 4em;
    }
    .wrap .frm form {
      border: 0.4em solid var(--theme-color);
      padding: 0.2em;
      display: inline-block;
    }
    .wrap .frm input {
      padding: 0.5em;
      margin: 0.1em;
    }
    .wrap .frm input[type="text"],
    .wrap .frm input[type="password"] {
      border: 0.2em solid var(--theme-color);
    }
    .wrap .frm input[type="submit"] {
      background-color: var(--theme-color);
      color: white;
      border: 0 none;
      border-radius: 0.4em;
      display: block;
      width: 100%;
    }

    .wrap .frm #chosen_text {
      color: var(--theme-color);
      height: 1em;
      margin: 1em;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(function () {
      $('.choice_card').click(function () {
        var text = $(this).data('text');
        var value = $(this).data('value');
        $('#chosen_text').text(text + ' 선택 하였습니다.');
        $('input[name="id"]').val(value);
      });
    });
    </script>
  </head>
  <body>
    <div class="wrap">
      <div class="choice">
        <a href="#" class="choice_card heart" data-value="heart" data-text="하트"><span>&#128151;</span></a>
        <a href="#" class="choice_card moon"  data-value="moon" data-text="달"><span>&#127769;</span></a>
        <a href="#" class="choice_card star"  data-value="star" data-text="별"><span>&#11088;</span></a>
      </div>
      <div class="frm">
        <h3 id="chosen_text"></h3>
        <form>
          <ul>
            <li><input type="text" name="id" placeholder="아이디" /></li>
            <li><input type="password" name="pw" placeholder="비밀번호" /></li>
            <li><input type="submit" value="로그인" /></li>
          </ul>
        </form>
      </div>
    </div>
  </body>
</html>