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

10 * 3 = 30, 미션 3/5 달성!

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

어느새 미션의 3/5를 달성했네요. 이번 주까지는 HTML 파트를 들어야 할 예정이지만요.

분명 거의 매일 최소 3개 이상의 클립을 들었는데 아직 HTML 파트라니... HTML 내용이 많다는 걸 몸소 느낍니다.

제 생각엔 50일까지 CSS 파트를 다 듣는 걸 목표로 해도 될 것 같아요.

미션 완료까지 3주 정도 남았는데, CSS 파트도 중요하고 알찬 내용이 가득한 것 같아서, CSS까지 마스터하는 걸로!

 

공부 메모 내용 + 실습 내용

오늘은 13~15. 양식 - FIELDSET, LEGEND / SELECT, DATALIST, OPTGROUP, OPTION / PROGRESS 를 공부했습니다.

---

<Today I Learned>

<fieldset>

🔶 같은 목적의 양식을 그룹화

🔶 속성 : form, disabled, name

<legend>

🔶 fieldset 그룹의 제목 지정

 

- 예시

<form>
  <fieldset>
    <legend>Legend Title</legend>
    <label>
      <input type="radio" name="opt-group" value="opt1" />
      opt1
    </label>
    <label>
      <input type="radio" name="opt-group" value="opt2" />
      opt2
    </label>
    <label>
      <input type="radio" name="opt-group" value="opt3" />
      opt3
    </label>
  </fieldset>
</form>

결과 화면

 

<select>

🔶 옵션 선택하는 메뉴 생성

🔶 속성 : autocomplete, disabled, form, multiple, name

🔶 속성 size : 한 번에 볼 수 있는 행의 개수, 기본값=0 (1일 때와 같음, 행 1개를 기본으로 보여줌)

 

<optgroup>

🔶 <option>이 많을 때 그룹화하는 역할

🔶 필수 속성 label : 표시되는 옵션 그룹의 이름

🔶 속성 disabled : 옵션 그룹 비활성화

 

<option>

🔶 선택 메뉴(<select>) 또는 자동완성(<datalist>)에서 사용될 옵션

🔶 선택적 빈 태그로 사용 가능 ⬅ 내용을 label, value 속성에 모두 써야하므로 추천하지 않음

🔶 속성 : disabled, selected (옵션이 선택되었음을 표시), label (생략되면 포함된 텍스트를 표시), value (생략되면 포함된 텍스트를 값으로 사용)

    ➡ <option>텍스트</option> 의 텍스트가 label, value 역할 수행 가능

 

<datalist>

🔶 <input>에 미리 정의된 옵션을 지정하여 자동 완성 목록 생성

🔷 <input>의 list 속성 값과 아래 <datalist>의 id 값이 같음

 

- 예시

 

<progress>

🔶 작업의 완료 진행률 표시 (=로딩바)

🔶 속성: max (작업 총량), value (작업의 진행량, max 값이 정해지지 않으면 0~1 사이 숫자 설정)

 

---

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

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

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