FE가 되고싶니? 나도✨

▶for과 id는 이름이 같아야 한다. NAME에 for과 id랑 똑같이 들어가도 되지만 연결된것은 아님. 백엔드 개발자들이 열어보지 않아도 확인 할 수 있게 해주는 것. 

▶라벨은 항목들을 하나로 묶어주는 역할도 한다. ex) 취미 항목에서 스포츠, 독서, 음악감상의 name을 hobby로 통일시킴

▶취미에 라벨태그가 붙지 않는 건 여러가지 중에 선택 할 수 있기 때문이다.

▶name : 백엔드 개발자에게 알려주는 이름(라벨)

▶id : label의 for과 같은 이름을 부여해주어야함.

▶value : 컴퓨터에게 진짜 값을 알려주는것.

→스포츠가 스포츠인걸 인식시켜줌.

▶radio : 여러 개 중에 하나 선택 할 수 있음.

<form> : 서식

▶웹 페이지에서 사용자가 키보드로 데이터를 입력하거나 마우스로 선택할 수 있는 서식을 폼(form)양식이라고 한다.

▶<input> : 입력요소 / type : 입력방식

▶form : get

→<form action="회원가입 완료 후 보여줄 페이지로 보내줌" method="get"></form>

→ex)회원가입 완료창, 로그인창, 메인창 등

▶form : post

→get, post는 백엔드 개발자가 정해줌. 프론트엔드 개발자에겐 권한이 없다.

▶<fieldset> : 폼 태그를 감싸는 또 하나의 태그

→회원가입을 페이지 한 줄로 할 땐 별로 의미 없지만 간혹 두, 세 개를 가로 페이지로 나눠져서 회원가입을 할 때가 있음. 그 땐 폼을 두개 쓰는게 아니라 필드셋을 2개를 써주는 것이다.

▶<legend> : 필드셋의 제목 태그

→ex)회원가입 양식 폼 : 보통 미각적으로 예쁘지 않아서 사용자의 시각에 보이게 적진 않는다. But 접근성, 스크린 리더기가 읽어줄 때 무슨 내용에 관한것인지 알아야 하기 때문에 적긴 한다. 안보이게만 할 뿐.

<table> : 웹 페이지에 테이블을 삽입 할 때

▶<table border=“숫자"> ⇒ 요즘엔 회원가입 할 때만 거의 사용

▶테이블 태그에서 제목은 h1을 사용하지 않음, <caption>을 사용

▶<tr> : 테이블의 행(=가로, 줄, row)을 만드는데 사용

▶<th> : 각 열(=세로, 칸, column)의 제목을 만드는데 사용

▶<td> : 각각의 셀을 표현하는데 사용, 테이블의 설명

▶thead - 정보가 되는 테이블

▶tbody- 내용이 되는 테이블

<table> 태그 응용, 셀 합치기

▶테이블은 좌측 상단부터 우측으로 차례대로 숫자를 부여한다.

▶가로 테이블 합치기 :　합쳐서 지울 셀을 먼저 지우고, 앞에 있는 테이블은 놔둔다.

ex)7, 8 번의 테이블이라면 8번은 지우고 7을 놔둔다

→7번 의 태그 코드에 colspan 을 적고 합칠 줄의 갯수만큼 입력한다. 

<td colspan="2">7</td>

▶세로 테이블 합치기 : 합쳐서 지울 셀을 먼저 지우고 앞에 있는 테이블은 놔둔다.

ex)5, 10번의 테이블 합치기 : 5번을 놔두고 10번을 지운다

→5번의 태그 코드에 rowspan을 적고 합칠 행의 갯수만큼 입력한다.

<td rowspan="2">5</td>

→가로, 세로 다 합치기 : 14,15,19,20을 하나의 테이블로 합치려고 하면 15, 19, 20은 지우고 14에다가 태그 붙여준다.

<td colspan="2" rowspan="2">14</td>

※가로 = row 지만 세로 테이블을 합칠 때 rowspan을 사용, 세로 = column 이지만 가로 테이블을 합칠 때 colspan을 사용한다.