[패스트캠퍼스 수강후기] 프론트엔드 강의 8회차 미션

오늘은 표를 만드는 법에 대해서 배웠다

08. HTML / 요소 - 표 콘텐츠 & 양식

 

 

*

Table : 표

표 기본구조

 

화면에는 이렇게 구성된다

<th> : 머리글 칸

- abbr : 열의 간단한 설명

- headers : 관련된 하나 이상의 다른 머리글 칸 id 속성 값

- colspan : 확장하려는 열의 수

- rowspan : 확장하려는 행의 수

- scope : 누구의 ‘머리글 칸’인지

col: 자신의 열

colgroup: 모든 열

row: 자신의 행

rowgroup: 모든 행

<td> : 일반 칸

-headers : 관련된 하나 이상의 다른 머리글 칸 id 속성 값

-colspan : 확장하려는 열의 수

-rowspan : 확장하려는 행의 수

이렇게 쓰면

*

<caption>

- 표의 제목

- 열리는 TABLE 태그 바로 다음에 작성해야

- table 당 하나의 caption만 사용 가능.

 

*

<colgroup>,<col/>

표의 열들을 공통적으로 정의하는 컬럼과 집합

 

*

<thead> : 머리글

<thody> : 본문

<tfoot> : 바닥글

기본적으로 테이블의 레이아웃에 영향을 주지 않음

 

*

<form>

웹 서버에 정보를 제출하기위해

예 : 로그인 정보

form 이 다른 form을 자식 요소로 포함할 수 없음

- action : 전송한 정보를 처리할 웹페이지의 URL

- autocomplete :  사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부

 (아이디나 이메일 자동완성)

- method : 서버로 전송할 HTTP 방식

- name : 고유한 양식의 이름

- novalidate : 양식 데이터의 유효성을 검사하지 않도록

- target : 서버로 전송 후 응답받을 방식을 지정

 

*

<input/> : 사용자에게 입력받을 데이터 양식

-autocomplete : 자동완성

-autofocus : 페이지가 로드될 때 자동으로 포커스

-checked : 양식이 선택되었음을 표시

-disabled : 양식 비활성화

-form : id 속성 값, 해당 form 후손이 아닐 때

-list : 참조할 datalist의 id 속성 값

-max : 지정 가능한 최대 값(숫자)

-min : 최소값

-maxlength : 입력 가능한 최대 문자 수 (숫자)

-multiple : 둘 이상의 값을 입력 할 수 있는지 여부

(type 속성 값이 email, file일 경우만, email일 경우 ,나오면 에러)

-name : 양식의 이름

-placeholder : 사용자가 입력할 값의 힌트

(text, search, tel, url, email)

-readonly : 수정 불가한 읽기 전용

-step : 유효한 증감 숫자의 간격

-src : 이미지의 URL

-alt : 이미지의 대체 텍스트

-type : 입력 받을 데이터의 종류

-value : 양식의 초기 값

 

*

<label>

라벨 가능 요소의 제목

for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함.

라벨 가능 요소: <button>, <input>, <progress>, <select>, <textarea>

 

*

<button>

선택 가능한 버튼을 지정.

-autofocus : 페이지가 로드될 때 자동으로 포커스

- disabled : 버튼 비활성화

- form : id 속성 값, 후손이 아닐 경우만

- name : 폼 데이터와 함께 전송되는 버튼의 이름

- type : 버튼의 타입

 

*

<textarea> : 여러 줄의 일반 텍스트 양식

 

*

<fieldset>, <legend>

같은 목적의 양식을 그룹화fieldset하여 제목legend을 지정

 

 

*

<fieldset> : 같은 목적의 양식을 그룹화.

 

*

<select>, <datalist>, <optgroup>, <option>

옵션option optgroup의 선택 메뉴나 자동완성을 제공

 

*

<select> : 옵션을 선택하는 메뉴.

-autocomplete : 자동완성

-disabled : 선택 메뉴를 비활성화

-form : 선택 메뉴가 속할 하나 이상 form의 id 속성 값

-multiple : 다중 선택 여부

-name : 선택 메뉴의 이름

-size : 한 번에 볼 수 있는 행의 개수

 

*

<datalist> : input>에 미리 정의된 옵션을 지정하여 자동완성제공

input의 list 속성 바인딩.

option을 포함하여 정의된 옵션을 지정

 

*

<optgroup> : option을 그룹화.

-label : (필수)옵션 그룹의 이름

-disabled : 옵션 그룹을 비활성화

 

*

<option>

선택 메뉴나 자동완성에서 사용될 옵션

선택적 빈(Empty) 태그로 사용 가능

-disabled : 옵션을 비활성화

-label : 표시될 옵션의 제목, 생략되면 포함된 텍스트를 표시

- selected : 옵션이 선택되었음을 표시

- value : 양식으로 제출될 값,생략되면 포함된 텍스트를 값으로 사용

 

*

<progress> : 작업의 완료 진행률을 표시.

- max : 작업의 총량

- value : 작업의 진행량 (0~1)

 

 

 

표부분은 확실히 좀 복잡했고

예시는 간단했음에도 애를 먹었다

ㅋㅋㅋ

 

개인적으로 웹을 만들 때 가장 궁금했던 부분이 로그인 페이지 부분을 구성하는 거였는데

그 부분을 만들어보게 되서 신기했다.

 

https://bit.ly/3g7RJpi

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스