[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 29회차 미션

 

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 29일차입니다!

오늘은 8번째 커리큘럼의 'HTML/요소- 양식' 중, <input>과 <label> 태그에 대하여 공부하였습니다.

(08~10. 양식 - INPUT (1), (2) / LABEL)

<input>의 type 종류는 정말 많은데, 실무나 토이 프로젝트를 할 때,

필요한 기능을 그때그때 찾아쓰다보니 한정적으로만 사용하고 있었는데요.

이번 기회에 그 종류가 얼마나 많고, 어떻게 쓰이는지 몇 가지를 실습해볼 수 있었습니다.

 

공부한 내용과 실습 내용!

 

<input>과 <label> 태그 실습 자료는 아래 JSFiddle 에디터에서 확인할 수 있습니다.

---

<Today I Learned>

<input>

🔶 display: inline-block

🔶 주요 속성 (1) autocomplete : 자동 완성 기능 / 기본값="on" / 값으로 on, off 를 가짐

🔶 주요 속성 (2) autofocus : 페이지를 열 때 자동으로 focus되는 값 / 문서 내 고유함 / Boolean 값

🔶 주요 속성 (3) checked: radio, checkbox 타입일 때 사용가능함 / 체크표시 ⭕

🔶 주요 속성 (4) form : <form>의 외부에 있는 input과 <form>을 <form>의 id 값으로 연결함

🔶 주요 속성 (5) name : <input>이 다수 존재할 때, 구분용 이름

🔶 주요 속성 (6) ⭐type : 기본값="text" / button, checkox, email, file, password, submit(<form>내 고유함) 등

 

🔷 type="image" 일 때 : 이미지를 클릭하면 <form>의 action 속성의 값인 제출 URL로 이동함

🔷 type="radio" 일 때 : 다수 radio를 한 묶음으로 묶기 위해서는 그 name을 모두 같게 해줌

🔷 type="reset" 일 때 : 같은 <form> 부모를 둔 양식 데이터는 초기화 가능하나, 그 밖의 양식 데이터는 초기화할 수 없음

 

🔶 <input> 값을 수정할 수 없게 하는 속성: readonly (<input> 영역이 focus 됨), disabled (영역 focus 안 됨)

🔶 예시 설명, 힌트 주는 속성: placeholder

 

 

<label>

🔶 display: inline

🔶 라벨링 가능 요소

🔶 속성 for : 참조할 라벨 기능 요소 (ex-<input>)의 id 값

🔷 체크박스를 직접 체크하지 않고 그 내용을 눌러서 제어할 수 있게 함

 

⬇ 아래 두 예제는 같은 뜻이다.

<input type="checkbox" id="check-box" />
<label for="check-box">체크박스 글자를 눌러보세요 (1)</label>

<label><input type="checkbox" />체크박스 글자를 눌러보세요 (2)</label>

---

- 예제 실습

 

---

학습 내용 출처 : https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

강의 링크: https://bit.ly/3m0t8GM