[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 05 입력 양식 작성하기(2)

DAY 7

🔖 오늘 읽은 범위 :

🔥01/13(화) 진도표 알림
👉🏻공부 내용: 05 입력 양식 작성하기(2)
👉🏻쪽수: 152~167쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

Input 태그 주요 속성

• autofocus : 입력 커서를 자동으로 갖다 놓기
• placeholder : 힌트 표시

<label for="user-name">이름 </label>
<input type="text" id="user-name" autofocus>

<label for="phone">연락처</label>
<input type="tel" id="phone" placeholder="전화번호 숫자만 입력해라">

• readonly : 읽기 전용 필드.
• required : 필수 입력 필드 지정.

Input 태그 이외 폼 태그들

• textarea : 멀티 라인 입력 텍스트 영역.

  종류	설명
  cols	텍스트 영역 가로 너비. 문자 단위.
  rows	텍스트 영역 세로 길이. 줄 단위. 넘치면 스크롤 막대 생김.

    <label for="memo">Memo</label>
    <textarea id="memo" cols="40" rows="4"></textarea>

• select, option : 드롭다운 목록

  • select 속성

    종류	설명
    size	화면에 표시할 드롭다운 항목 개수 지정.
    multiple	드롭다운 목록에서 둘 이상 항목 선택 할 때 사용.

  • option

    종류	설명
    value	서버로 넘겨 줄 값 지정.
    selected	기본 선택 항목 지정.

• button : 버튼

  종류	설명
  submit	서버로 전송. <input type="submit"> 와 동일함.
  reset	입력 내용 초기화. <input type="reset"> 와 동일함.
  button	버튼 형태만 만듬. 자체 기능 없음. <input type="button"> 와 동일함.

  • 화면 낭독기에서 <button> 태그를 만나면, 정확히 버튼이 있음을 전달함.
    • 아이콘 추가, CSS 이용한 형태 구성을 할 수 있음.

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 폼 관련 태그가 좀 많구나. 활용도가 높아서 그러겠지..
• 비슷한 것들이 있어서 기억하기 쉽지만, 헷갈리기도 쉽다.
• 연습 많이 해야 기억에 남겠다.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

---

🤟소감 3줄 요약

• 이번이 좀 고비였음… 내용 밀리면 안돼…
• 태그는 종류가 많고 속성도 많아서 VS Code 에 의존할 수 밖에…
• 대략 어떤 요소들로 구성할지는 대충 머릿속에서 그려져야 할 듯.