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">
체크박스 삽입. 동시에 여러 개를 선택할 때 주로 사용한다.
'부트캠프 준비' 카테고리의 다른 글
| Interactive card detail 1차 솔루션 (0) | 2023.02.06 |
|---|---|
| 자바스크립트 사용해서 피보나치 수열 만들기 (0) | 2023.01.28 |
| fizzbuzz 게임 Javascript로 구현하기(while문, for문 활용) (0) | 2023.01.27 |
| 유데미 안젤라 my page 만들기 (0) | 2023.01.20 |
| 서베이 폼 예제(프리 코드 캠프 Free Code Camp) (0) | 2023.01.18 |
