21.Dec.18 HTML & CSS // form& input& label + CSS 고수는 CSS 재활용을 한다.

<Form><input> 폼 상자 만들고 싶을때 사용!

*폼상자: 검색창에 우리가 입력하고자 하는 그 글자를 넣는 공간.

---

Backend 내용:

(1)<form action="경로~~"> : 작성한 내용이 어떤 서버 경로로 전달 될 지

(2)<form method=""> : 작성한 내용이 어떤 방식으로 서버에 전달 될 지.

(3)<input name="인풋이름"> : 이 인풋에 입력된 값들은 "인풋 이름"으로 서버에 전달 된다.ex. 인풋이름이 age일 경우, 이 인풋 상자에 입력된 값은 age로 서버에 전달된다.

---

<input type= 백만가지의 인풋이 있다.

"text": 일반 글자 입력 할 때

"password": 패스워드 입력할 때

"email": 이메일 입력할 때

"date": 날짜 입력할때

"checkbox": 체크박스 생성

"radio": 라디오 버튼 소환

---

<input value="미리 채우고 싶은 값">

→ 처음 시작할 때 미리 글자를 채운 상태로 폼이 떠있다.

<input placeholder ="미리 채우고 싶은 값>

→ 처음 시작할때 미리 글자가 채워져 있지만, 회색처럼 연하게 나와서, 배경 글자처럼 디스플레이 된다.

---

<input>박스 하윗단에 사용되는 함수들

<select>

<option>

→ 옵션 박스를 만들게 됨.

 

<textarea>: 인풋박스의 크기를 조정할 수 있게 됨.

---

input 의 스타일링

.text-input{ padding: 10px; font-size: 20px; border: 2px solid red; }

이런식으로 인풋에 들어가는 텍스트의 스타일링을 할 수 있다. 글자 크기가 커지면 폼 상자의 크기도같이 커진다.

🌟CSS고수는.. Class 를 재활용한다. 그러므로 어떻게 class를 짜야 재사용 가능할지 고민해야한다.

재사용 했는데 추가적인 것이 더 필요하면, 그때가서 class 사용하면 되는 것이다.

<Label> 라벨의 텍스트를누르면, 그것이 종속된 태그도 같이 효과가 적용됨.

ex.

<input id="sub" type="checkbox"> <label for="sub">구독</label>

✔️구독이란 텍스트를 눌러도, 체크박스에 체크가 됨.

---

Select에 콤마 쓰면 여러개 동시 선택 가능