📖Today I Learned

✅<section> vs <article>

<section>

• 주제가 명확하게 있을 때
• 안에 heading 태그 권장 -> seo 에도 좋음

<article>

• 전혀 다른 사이트내의 페이지에서도 적용가능할 수 있는 것 (미니 html)
• 위젯 같은 것들

✅<button> vs <a>

<button>

• 다른 페이지로의 이동이 없을 때

<a>

• 다른 페이지로의 이동이 있을 때

✅<small> vs <cite>

<small>

• copyright에서 주로 사용

<cite>

• 출처에서 주로 사용

✅get vs post

<form method = "get">

• 소리 질러서 내 정보를 말하여 모든 사람이 정보를 알 수 있고, 많은 정보를 전달하기에 한계가 있음!

<form method = "post">

• 포스트잇에 내 정보를 적어서 줘서 정보를 숨길 수 있고, 많은 정보를 전달하기에 용이함!

✔<input>에서 name은 서버로 보낼 때 데이터로 사용 -> 꼭 필요
name: 서버전송할 때 사용자가 입력한 값을 명명
value: 서버전송할 때 사용자가 입력한 값 (미리 설정해줌)
name: value

✔<label> : 이름표 -> 거의 반드시 input 태그에 넣어주기 (img 태그에 alt 같은 느낌)

• label의 for, input의 id값이 같아야함!

✔<select> : 드롭다운 리스트 박스 생성

• 아이템 만들 때 <option> 태그 사용
• <option>태그의 value값은 post로 전달할 값
• selected 속성은 기본으로 선택되는 옵션을 나타낼 때 사용

✔<fieldset> : 폼 컨트롤을 그룹화 (내용을 구획화)
✔<legend> : <fieldset>태그 바로 뒤에 위치, 폼 그룹의 목적을 나타내는 제목을 의미 ( fieldset의 제목)

✅<input> vs <button>

• 서버로 양식 데이터를 제출

<input type= "button">

• 닫는 태그가 없어서 텍스트 값만 지정 가능

<button type= "submit">

• 다양한 style을 적용할 수 있음
• 닫는 태그가 있어서 img같은 태그 넣기 가능

✔<datalist> : <select>와 <input> 섞어서 사용 가능

• input의 list속성과 datalist의 id속성 연결하여 사용
• 사용자가 원하는 임의의 값 입력 받을 수 있음
  ex) 이메일 직접입력

⭐자주 사용되는 속성

• checked : 체크상태 표시
• required : 필수값
• min : 최솟값
• max : 최댓값
• value : 입력된 값
• placeholder : 입력값 힌트
• minlength : 최소 길이
• maxlength : 최대 길이

2022.04.04