HTML5-CSS/Order-Result.html at master · ViGilanteAF/HTML5-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>주문서</title>
    <style>
      .container {
        width: 600px;
        margin: 0 auto;
      }
      ul {
        /*순서 없는 목록에 적용할 스타일*/
        list-style-type: none; /*불릿 없앰*/
      }
      label.title {
        /*class-title 인 label 에 적용할 스타일*/
        font-weight: bold; /*굵은 글자*/
        width: 80px; /*너비80px*/
        float: left; /*왼쪽부터 배치*/
      }
      div.centered {
        /*class=countered 인 div 에 적용할 스타일*/
        text-align: center; /*가운데 정렬*/
      }
      fieldset {
        /*필드셋에 젹용할 스타일*/
        margin: 15px 10px; /*상하 마진 15px 좌우 마진 10px*/
      }
      fieldset legend {
        /*필드셋의 제목*/
        font-weight: bold; /*굵은 글자*/
        font-size: 18px; /*글자크기18px*/
        color: purple; /*자주 색 글자*/
      }
      ul li {
        /*목록의 각 항목*/
        margin-bottom: 10px; /*아래 마진 10px*/
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>상품 주문서</h1>
      <fieldset>
        <legend>개인정보</legend>
        <ul>
          <li>
            <label for="uname" class="title">이름</label>
            <input
              type="text"
              name="uname"
              placeholder="여백없이 입력"
              required
            />
          </li>
          <li>
            <label for="tel1" class="title">연락처</label>
            <input type="tel" id="tel1" placeholder="연락가능한 번호" />
          </li>
        </ul>
      </fieldset>
      <fieldset>
        <legend>배송지 정보</legend>
        <ul>
          <li>
            <label for="addr" class="title">주소</label>
            <input type="text" size="40" id="addr" required />
          </li>
          <li>
            <label for="tel2" class="title">전화번호</label>
            <input type="tel" id="tel2" required />
          </li>
          <li>
            <label for="memo" class="title">메모</label>
            <textarea id="memo" cols="40" rows="3"></textarea>
          </li>
        </ul>
      </fieldset>
      <fieldset>
        <legend>주문정보</legend>
        <ul>
          <li>
            <label> <input type="checkbox" />과테말라 안티구아 (100g) </label>
            <label> <input type="number" value="0" min="0" max="5" />개 </label>
          </li>
          <li>
            <label><input type="checkbox" />인도네시아 만델링 (100g) </label>
            <label><input type="number" value="0" min="0" max="5" />개 </label>
          </li>
          <li>
            <label><input type="checkbox" />탐라는도다(블렌딩) (100g) </label>
            <label><input type="number" value="0" min="0" max="5" />개 </label>
          </li>
        </ul>
      </fieldset>
      <div class="centered">
      <input type="submit" value="주문하기" />
      <input type="reset" value="다시작성" />
    </div>
  </body>
</html>