HTML/CSS - 15. Input

사용자가 직접 텍스트를 입력할 수 있는 Input, Textarea 태그를 다뤄보도록 하겠다.

 

1. <input>, <textarea>

<input type="text" placeholder="ID"> 
<input type="password" placeholder="비밀번호"> 
<input type="number" placeholder="학번">

type, placeholder라는 attribute가 있다.

 

1. type="text"

text를 입력하는 속성이다. 대부분의 input type은 text이다. 어느 텍스트나 입력할 수 있다. 이름, id, 주소, 닉네임 등을 입력받을 때 사용한다.

 

2. type="password"

text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나온다. 만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것이다. 화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있다.

 

3. type="number"

숫자만 입력할 수 있다. 만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없다.

 

4. placeholder

placeholder는 도움말을 넣어주는 부분이다. 실제 input에 입력되어있는 텍스트가 아니다.

 

<textarea>소개:</textarea>

<textarea>는 input보다는 더 긴 텍스트를 입력받고 싶을 때 사용한다.

보통 짧은 방명록이나 댓글을 입력할 때 textarea 태그를 사용한다.

 

⚠️주의! 

- textarea에 "소개:"라고 보이는 것은 placeholder가 아니라 텍스트이다.

- input은 시작 태그, 끝 태그로 구성되지 않습니다. 하나의 태그가 하나의 요소이다.

- textarea처럼 input에도 미리 값을 세팅해놓고 싶을 때 value라는 attribute를 사용한다.

 

---

2. 디자인 변경 - inline element

input, textarea, button은 모두 inline element라서 한 줄에 이어서 나왔다.

실제 사이트를 개발할 때, <input>이나 <textarea>의 부모에 <div> 태그로 감싸 영역을 분리하곤 한다.

<div class="input-wrap">
  <input type="text">  
</div>

이렇게 해주면 각 input위에 block성질의 부모가 감싸고 있으니 서로 한 줄에 나오지 않을 것이다.

 

---

3. 디자인 변경 - input width

input과 textarea의 가로가 모두 제각각이라 통일을 시켜본다면 여러 방법들이 있다.

1. input, textarea에 같은 width 값을 부여한다.

2. 부모에 width를 주고 input, textarea의 width는 100%로 설정한다.

 

1번 방법도 쓰긴 하지만, 만약 디자이너가 마음이 바껴서 가로 값을 변경하자고 하면 css에서 모든 input과 textarea를 일일이 찾아서 변경해야 한다.

최대한 변경이 적을 수 있도록 2번 방법으로 진행해본다면, 일단 모든 요소를 하나로 묶는다.(div로 새로 감싼다.)

그 후에 div에 가로값을 주고 input과 textarea에도 100% 가로 값을 준다. div가 가운데로 올 수 있게 margin도 추가해준다.

 

---

4. input, textarea 스타일

 input 요소끼리 위아래로 붙어있는것을 조금 띄우고 글씨 크기도 조금 키우고 직각의 input의 테두리 반경을 둥글게 만들고 싶다면,

input, textarea {
  font-size: 13px;
  margin-bottom: 5px;
  border-radius: 5px;
}

이런 식으로 코드를 쓰면 된다. 하지만 input요소에 그림자 같은 게 생기는데 이것은, 3d처럼 표현하고 싶어 하는 브라우저가 input 태그에 

border-style: inset; 을 default로 추가해줬기 때문일 수 있다. 

input {
   border: 1px solid black;
}

두께를 1px로 변경.

input, textarea {
  padding: 7px 12px;
}

input 내부에 여백 추가.

textarea {
  resize: none;
}

브라우저의 원하지 않은 default 스타일 찾아서 none으로 제거.

 

---

5. placeholder, type 스타일

placeholder에 회색으로 default color가 입혀져있는데 이것도 변경이 가능하다.(placeholder는 attribute인 것을 잊지 말자.)

input::placeholder {
  color: #bbb;
}

콜론 두 개를 붙여서 selector를 만들어 줄 수 있다. 단! attribute를 표현한다고 모두 콜론을 쓰는 것은 아니다.

input 세 개 중에서 text타입인 input만 스타일을 입히고 싶다면, 아래와 같이 표현한다.

input[type="text"] {
}

input[type="text"]::placeholder {
  color: red;
}

 

---

6. button 스타일

버튼을 꾸밀 수도 있다.

- 글씨 크기

- 글씨 색

- 버튼 배경색

button {
  color: white;
  font-size: 15px;
  background-color: #4CAF50;
}

테두리 반경과 버튼 글씨 붙어있는 것들을 바꾸고 싶다면 아래 코드처럼 쓰면 된다.

button {
  padding: 5px 10px;
  border-radius: 5px;
}

그리고 버튼에 마우스를 올리면, cursor 모양으로 바뀌게 할 수도 있다.(아래 코드 참고)

button:hover {
    cursor: pointer;
}

여기서 hover라는 것은 마우스를 올렸다는 의미이다. 이렇게 상태에 따른 selector도 있다.

cursor 프로퍼티에 pointer라는 값을 주면 손가락 모양으로 변하게 된다. 그리고 버튼 위에 마우스를 올렸고, 누를 수 있는 상태라는 것을 명확히 해줄 수 있는데 그것은 아래 코드와 같다.

button:hover {
  opacity: 0.8;
}

이렇게 코드를 써주고 버튼에 마우스를 올리면 색깔이 연해진다. opacity는 해당 요소를 불투명하게 만들어준다. 0.8이라는 값은 백분율인데, 원래의 스타일에서 80% 만큼 흐리게 해 준다는 뜻이다.

만약 opacity에 0 값을 입력하면 해당 요소가 0%만큼 흐려져서 화면에서 아예 보이지 않게 된다.