소영

스터디 내용작성

• 1주차

회원가입 UI 퍼블리싱

-정보를 입력하는 폼으로 구성
-아이디, 비밀번호, 이름, 성별, 나이 다양한 입력 필드

아이디, 비밀번호

<input type="text" placeholder="아이디를 입력해주세요." />

문자열을 입력하는 곳이기 때문에 기본적인 입력 타입인 type="text" 사용
placeholder 입력창 안에 안내 문구 표시

 <input type="password" placeholder="비밀번호를 입력해주세요." />

type="password" 를 사용해 입력된 글자가 그대로 표시 되지 않고 ***로 표시되도록 함

라디오 버튼

<div className={styles.radio}>
  <label><input type="radio" name="gender" value="male" /> 남성</label>
  <label><input type="radio" name="gender" value="female" /> 여성</label>
  <label><input type="radio" name="gender" value="private" /> 비공개</label>
</div>

name="gender" 속성을 다 갖게 주어서 세 버튼은 같은 그룹으로
인식되어 하나 선택 시 다른 하나는 자동으로 헤제 됨

셀렉트 버튼

<select className={styles.select} defaultValue="">
  <option value="" disabled>태어난 년도를 선택해주세요.</option>
  <option value="2006">2006년</option>
  <option value="2005">2005년</option>
  <option value="2004">2004년</option>
</select>

여러 옵션들을 선택 해야 하기 때문에 셀렉트 박스로 구현 처음 화면에 아무 것도 선택되지 않은 상태로 두기 위해 ** defaultValue="" ** 사용