form 만들기

HTML, CSS

by front-hyun 2024. 1. 21. 10:46

<!DOCTYPE html>
<html lang="en">
  <head>
    <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=Gamja+Flower&family=Nanum+Brush+Script&family=Noto+Sans+KR:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=vhs, initial-scale=1.0" />
    <title>Document</title>
    <link href="css/main.css" rel="stylesheet" />
  </head>
  <body>
    <form>
      이메일 <br />
      <input type="email" placeholder="email@example.com" />
      <div>
        성 이름 <br />
        <input type="text" /> <input type="text" />
      </div>

      메세지 <br />
      <textarea>
</textarea><br />
<div>
      <input type="checkbox"> 구독
      <input type="submit" value="전송" class="submit"></textarea
      >
      </div>
    </form>
  </body>
</html>

h3 {
  font-family: "Gamja Flower", sans-serif;
  font-weight: 800;
  font-style: normal;
  transform: rotate(0.04deg);
}

.profile {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 100px;
}

.title {
  font-size: 16px;
  text-align: center;
}

.box {
  width: 200px;
  background-color: violet;
  margin: 10px;
  padding: 40px;
  border: 2px solid black;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 28px;
  color: aqua;
  font-family: "Courier New", Courier, monospace;
  box-shadow: 5px 5px 2px 2px black;
}

.container {
  width: 800px;
}

.header {
  width: 100%;
  height: 100px;
  background: pink;
}
.left-menu {
  width: 20%;
  height: 400px;
  background: rebeccapurple;
  display: inline-block;
}
.right-menu {
  width: 80%;
  height: 400px;
  background: brown;
  display: inline-block;
}
.footer {
  width: 100%;
  height: 100px;
  background-color: blanchedalmond;
  clear: both;
}

.submit {
  border: none;
  background: orange;
  margin: 20px;
  padding: 5px;
  color: white;
  width: 80px;
  border-radius: 3px;
  float: right;
}

input,
textarea {
  border: 1px solid grey;
  margin: 10px;
  padding: 10px;
}

float: left 썼으므로 공중에 떠서 저런 화면이 보인다. 다음에 <div>를 만들고 clear: both를 주면 해결된다.

float 주면 당연히 어딘가에 clear : both 도 있어야겠군요

.form-background {
  background: black;
  padding: 30px;
}
.form-white {
  background-color: white;
  padding: 30px;
  width: 80%;
  max-width: 600px;
  margin: auto;
}
.form-input {
  padding: 10px;
  font-size: 20px;
  border: 1px solid black;
  border-radius: 5px;
  width: 100%;
}
div,
input,
textarea {
  box-sizing: border-box;
}
.w-50 {
  float: left;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <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=Gamja+Flower&family=Nanum+Brush+Script&family=Noto+Sans+KR:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=vhs, initial-scale=1.0" />
    <title>Document</title>
    <link href="css/main.css" rel="stylesheet" />
  </head>
  <body>
    <div class="form-background">
      <div class="form-white">
        <form>
          <div>
            <p>Email</p>
            <input
              class="form-input"
              type="email"
              placeholder="email@example.com"
            />
          </div>
          <div class="w-50">
            <p>First Name</p>
            <input type="text" />
          </div>
          <div class="w-50">
            <p>Last Name</p>
            <input type="text" />
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <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=Gamja+Flower&family=Nanum+Brush+Script&family=Noto+Sans+KR:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=vhs, initial-scale=1.0" />
    <title>Document</title>
    <link href="css/main.css" rel="stylesheet" />
  </head>
  <body>
    <div class="form-background">
      <div class="form-white">
        <form>
          <h1>Contact</h1>
          <div class="w-100">
            <p>Your Email</p>
            <input
              class="form-input"
              type="email"
              placeholder="email@example.com"
            />
          </div>
          <div class="w-50">
            <p>First Name</p>
            <input type="text" class="form-input" />
          </div>
          <div class="w-50">
            <p>Last Name</p>
            <input type="text" class="form-input" />
          </div>
          <div style="clear: both"></div>
          <div class="w-100">
            <p>Message</p>
            <textarea class="form-input"></textarea>
          </div>
          <div>
            <input id="sub" type="checkbox" />
            <label for="sub">Subscribe</label>
            <button class="pink-button">SEND</button>
          </div>
          <div></div>
        </form>
      </div>
    </div>
  </body>
</html>

.form-background {
  background: gray;
  padding: 30px;
}
.form-white {
  background-color: white;
  padding: 30px;
  width: 80%;
  max-width: 600px;
  margin: auto;
}
.form-input {
  padding: 10px;
  font-size: 20px;
  border: 1px solid black;
  border-radius: 5px;
  width: 100%;
}
div,
input,
textarea {
  box-sizing: border-box;
}
.w-50 {
  float: left;
  width: 50%;
  padding: 10px;
}
.w-100 {
  padding: 10px;
  width: 100%;
}
.pink-button {
  display: block;
  margin-left: auto;
  color: white;
  background: palevioletred;
  border: none;
  border-radius: 4px;
  padding: 6px;
  width: 80px;
}

셀렉터에 콤마 쓰면 여러개 동시 선택 가능

재사용가능하게 class 만들기

<label> 유용하다

.

'HTML, CSS' 카테고리의 다른 글

HTML 기본 태그로 글 작성해보기 (0)	2024.02.14
HTML 기초와 개발환경 셋팅 (0)	2024.02.14
블로그 페이지 만들기 (0)	2024.01.21
display: block, inline-block (0)	2024.01.21
이미지와 div 가운데 정렬, float: left로 <div> 가로 정렬 (1)	2024.01.15