부트캠프 준비

Free Code Camp 프리코드캠프 Responsive web design: input tag

JeanneLee57 2023. 1. 17. 12:37

Free Code Camp

 

https://www.freecodecamp.org/

 

www.freecodecamp.org

 

무료로 코딩을 배울 수 있는 사이트라고 해서 방문해 보았다.

영어권에는 무료 또는 저렴한 가격에 코딩을 배울 수 있는 사이트가 많이 있는 것 같다.

부트캠프 준비 기간 동안 적극 활용할 계획이다.

 

Free Code Camp의 연습문제들 중 'Responsive web design'의 첫 세션을 연습해 봤다.

생활코딩의 html, CSS 강의를 이미 수강했기 때문에 새로운 것이 많지는 않았지만,

그중 input tag는 새로 익히게 된 것이라 정리를 해둔다.

 

input tag

웹 폼을 삽입해 데이터를 수집할 수 있다.

 

input 태그의 부모 태그

fieldset 하나의 필드를 묶는 데 사용.

label input 텍스트를 input 요소와 묶어 준다. 즉, input 요소 텍스트를 클릭해도 input 요소에 체크된다. label for="input id값"을 사용하면 input 텍스트의 부모 태그로만 사용해서 input 요소와 묶어 줄 수 있다.

 

input 태그의 요소

type 폼의 유형을 설정. 라디오 목록, 체크박스, 텍스트 등을 설정할 수 있다.

name 입력값을 서버로 보낼 때 필요한 속성. value 값과 어떻게 다른지 조금 헷갈림..

id 고유 식별자를 설정하는 속성. 중복해서 사용할 수 없다.

value 양식의 값을 설정한다.

 

그밖의 태그

legend 폼의 제목을 설정.

checked 디폴트로 체크가 돼 있게 설정.

placeholder 텍스트 입력란에서 기본 입력값을 설정.

 

input type들

<input type="text">

텍스트 형태로 입력하는 폼을 삽입. submit 버튼을 넣어 제출할 수 있게 한다.

 

<input type="radio">

라디오 목록을 삽입. 각 선택지에 name값을 동일하게 설정하면 하나의 라디오 폼에 name값을 동일하게 설정하면 하나를 select했을 때 다른 하나가 자동으로 deselect되게 할 수 있다고 설명하고 있다.

 

<input type="checkbox">

체크박스 삽입. 동시에 여러 개를 선택할 때 주로 사용한다.