231217(사용자 입력)

Form(2) - input

본격적으로 form과 관련된 태그에 대해 공부해보겠다.

첫번째로 배울 태그는 input이다. 이는 사용자에게 입력을 받을 때 필드를 생성하기 위해 사용하는 기본적인 태그이다.(필드가 뭐지?)

입력할때 받는 입력창 자체를 input field라고도 한다.

이 태그를 사용할때 지켜야 하는 문법상의 주의는, type이라는 attribute를 꼭 지켜야 한다는 것임.

타입에는 종류가 많을 것이다. 이 인풋의 타입을 적절하게 설정해줘야, 그 타입에 맞는 인풋필드가 생성된다.

타입에는 text, email, password, number, tel, file…. etc 많다.

타입에서 가장 기본적인 형태는 type이 text이다. 한줄정도 되는 가장 기본적인 text는 모두 입력받을 수 있다.

실습해보자.

강의에서 제공하는 예제코드이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF=8">
        <title>Form- Input</title>
        <link href="<https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css>" rel="stylesheet" type="text/css">
        <link href="stylesheet" herf="./styles.css"
    </head>
    <body>
        
    </body>
</html>

이코드를 보면서 느낀건데… 내가 알기로 html은 사실 <!DOCTYPE html>부터 시작해야 한다고 함. 이후에 어떤 언어, 어떤 인코딩페이지 사용할 것인지도 명시해주는게 당연한듯. 브라우저가 똑똑해서 그냥 기본값들 알아서 넣어주고 있긴 하겠지만. 이 부분을 놓치지 않게 생각하자.

아무튼 위의 예제코드에서 <body>사이에 <input>태그를 넣어주자.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF=8">
        <title>Form - Input</title>
        <link href="<https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css>" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>

    <intput type = "text" />

    </body>
</html>

type은 text로 한다.

그리고 강의에서 css파일도 예제로 하나 줬다. 이건 지금 이해할 필요는 없을 듯 하다.

/* styles.css */

* {
  margin: 0;
  box-sizing: border-box;
    font-family: 'Spoqa Han Sans', sans-serif; 
}

html {
  font-size: 16px;
  font-family: 'Spoqa Han Sans', sans-serif; 
  letter-spacing: -.03em;
  color: #212529;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

h1 {
  width: 360px;
  font-weight: 100;
  font-size: 32px;
  line-height: 1.5;
  margin-bottom: 1em;
  color: #101010;
  letter-spacing: -.05em;
}

label {
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 16px;
}

input {
  display: block;
  width: 360px;
  height: 44px;
  padding: 0 12px;
  border-radius: 7px;
  margin-bottom: 12px;
  font-size: 16px;
  border: 1px solid #d3dce6;
  transition: border-color 200ms ease-in-out;
}

input:focus,
input:hover,
input:active {
  outline: none;
  box-shadow: none;
  border-color: #1fb6ff;
}

input[type="file"] {
  padding-top: 10px;
}