Post

[HTML/CSS] 기초모듈(4)

[HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지] codingapple.com

Posted Updated
By Cheong seolmo
3 min read
[HTML/CSS] 기초모듈(4)

form & input

  • <form>, <input>: 사용자들이 입력할 수 있는 폼 만들 때 사용
    • <form action="">: 작성한 내용이 어떤 서버경로로 전달 될지
    • <input type="">: 입력받을 값의 타입 결정
    • <input value="">: 접속했을 때 미리 채워져있는 값
    • <input placeholder="">: 미리 채워져있는 배경글자 값
    • <input name="">: 인풋 이름 지정(서버 전달될 때 중요)
    • <select><option></option></select>: 옵션 인풋
    • <textarea></textarea>: 큰 인풋. 화면에서 마우스로 드래그하면 크기 조절 가능
    • <input type="submit">: 전송 버튼
    • layout3.html
      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

        <form>
      <input type="text">
      <input type="email" value="123@naver.com">
      <input type="date">
      <input type="passward" placeholder="1234">
      <input type="checkbox">
      <input type="radio">

      <select>
          <option>가위</option>
          <option>바위</option>
          <option>보</option>
      </select>

      <textarea> hey </textarea>

      <input type="submit">
      <button type="submit">전송</button>
  </form>

    • img

      1

    • 셀렉터 문법. 속성명과 속성값을 지정해 원하는 종류에만 스타일링 가능
      1
2
3
4

        input[type=text] {
      padding: 10px;
      font-size: 20px;
  }

contact us 레이아웃(숙제)

  • input-message 박스에 마진 적용이 안됨. clear: both; 를 써도 해결 X
    • 이름 박스와 메시지 박스 사이에 <div style="clear: both;"></div>를 넣음으로써 해결 (이름 박스 내에서나 메시지 박스에서는 적용 X)
  • layout4.html
    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

      <body>

      <div class="contact-container">
          <div class="subtact-container">
              <form>
                  <h2>contact us</h2>
                  <div class="input-mail">
                      <p>Your Email</p>
                      <input type=email placeholder="email@example.com">
                  </div>
                  <div class="input-name">
                      <div>
                          <p>First name</p>
                          <input type="text">
                      </div>
                      <div style="margin-left: 50px;">
                          <p>Last name</p>
                          <input type="text">
                      </div>
                  </div>
                  <div style="clear: both;"></div>
                  <div class="input-message">
                      <p>Message</p>
                      <input type="text">
                  </div>
                  <div class="check-box">
                      <input type="checkbox">Subscribe
                      <button type="submit">SEND</button>
                  </div>
              </form>
          </div>
      </div>

  </body>
  • main.css
    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

      .contact-container {
      width: 600px;
      height: 800px;
      background-color: rgb(62, 62, 62);
      padding: 50px;
  }

  .subtact-container {
      width: 500px;
      height: 600px;
      background-color: rgb(255, 255, 255);
      padding: 40px;
  }

  p {
      margin-bottom: 5px;
  }

  input {
      padding: 10px;
      border: 1px solid rgb(46, 46, 46);
      border-radius: 5px;
  }

  .input-mail input {
      width: 95%;
  }

  .input-name div{
      float: left;
  }

  .input-message {
      clear: both;
  }

  .input-message input {
      width: 95%;
      height: 120px;
      margin-bottom: 20px;
  }

  .check-box button {
      margin-left: 220px;
      width: 100px;
      height: 30px;
      color: white;
      background-color: rgb(255, 191, 0);
      border: none;
      border-radius: 5px;
  }

  • img

    2

form & input 숙제: Contact Us 섹션 만들기

  • input에서 실제 width 100% + 20px 정도 되어 삐져나감. ⟶ border-box로 해결
    • selector에서 콤마쓰면 중복 선택 가능
      1
2
3

        div, input, textarea {
      box-sizing: border-box;
  }
  • input 옆 글씨를 쓸 땐 <span> 태그를 활용
    • 혹은 <label> 태그를 활용하면 input을 누른 것과 같은 것으로 간주
      1
2

        <input id="sub" type="checkbox">
  <label for="sub">Subscribe</label>
  • 재사용 가능한 class 만들 것
Web, HTML/CSS
lecture
This post is licensed under CC BY 4.0 by the author.