멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

📝 양식(form)

• 사용자에게 입력받은 데이터를 제출, 전송하기 위해 사용하는 태그

method 속성

• 입력받은 데이터를 서버에 전달할 방식(HTTP 메서드)

POST

• HTTP 요청 본문 내부에 양식 데이터 전송 (URL에 표시 안 됨)
• 데이터의 길이 제한이 없으며, GET보다 보안성이 높음
• 브라우저에 의해 캐시되지 않고, 브라우저 히스토리에도 남지 않음

GET

• 양식 데이터를 action URL과 ?구분자 뒤에 이어 붙여 전송
• 브라우저에 의해 캐시되어 저장
• URL 길이의 제한이 있음(브라우저마다 다름. 약 3000자)
• 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식 사용

	POST	GET
전송	양식 데이터를 요청 본문으로 전송	https://example.com?name=홍길동&age=20
캐시	X	O
길이제한	X	O
보안	GET 방식보다 높음	취약

name/value

• 이름/값(name/value)의 짝으로 양식과 함께 전송

action 속성

• 양식 데이터를 처리할 프로그램의 목적지 URL 지정

autocomplete 속성

• 이전에 해당 양식의 입력된 값이 있을 경우 자동완성 지정
  • 브라우저에 기록이 남아있을 경우 나타남

input

• 다양한 form에서 사용자가 입력한 정보를 받을 때 사용
• input type=" ">

공통 속성

type: input 양식 컨트롤 유형(button, text, email..)
name: input 양식 컨트롤의 이름
value: input 양식 컨트롤의 값
autocomplete: on/off 양식 자동완성 기능에 대한 힌트
placeholder: 양식 컨트롤이 비어있을 때 나타나는 내용(입력 힌트 제공)
required: 양식 전송을 위해 필수로 입력해야하는 값
disabled: 비활성화
readonly: 수정불가(읽기전용)

button, reset, submit

• <button type=" ">태그와 동일한 기능 수행

text / password / url / search / tel

• maxlength: 문자수 최대 길이
• minlength: 문자수 최소 길이

checkbox / radio

• checkbox: 2개 이상 항목 선택 가능
• radio: 1개 항목만 선택 가능
• checked: 체크 여부

file

• 파일 지정
• accept: 허용하는 파일 유형 지정
• multiple: 사용자가 여러 개의 파일을 선택할 수 있음

number

• 숫자 입력 (화살표 컨트롤 제공)
• max: 최대값
• min: 최소값
• step: 증가값

label

• 입력란 가까이에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트
• input태그와 같은 form요소에 레이블을 붙일 때 사용
  • input과 함께 사용해야 서로 연결되었다는 것을 웹브라우저가 알게 됨
  • 스크린 리더기에서 입력해야하는 내용이 무엇인지 사용자가 쉽게 이해할 수 있음

for-id를 이용한 연결

<label for="user-id">아이디</label>
<input id="user-id" type="text">

label 안에 input 중첩하여 연결

<label>
	아이디
	<input type="text">
</label>

select

• 옵션 메뉴 제공
• multiple: 여러개의 항목을 동시에 선택
• size: 한번에 노출되는 항목의 수 조절
• required: 선택 필수
• disabled: 선택 불가

option

• 메뉴의 각 옵션 정의
• 모든 option은 자신이 선택되었을 때 값으로 사용할 value 속성이 필요
  • 지정하지 않으면 option 내 텍스트 값을 사용함
• selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옴

optgroup

• option요소를 optgroup요소 안에 배치하면 드롭다운 내에서 옵션그룹 생성

fieldset

• form 관련 요소들을 묶을 때 사용
• disabled를 사용하면 모든 자손 컨트롤을 비활성화

legend

• 그룹의 제목 제공

datalist

• 사용자가 고를 수 있거나, 혹은 추천하는 선택지를 나타내는 option요소를 담음
• input과 select 기능을 합친 개념
• 사용자에게 기본적으로 선택할 수 있는 옵션을 제공하고, 원하는 값이 없을 경우 다른 값을 입력할 수 있도록 함
  
  

textarea

• 여러 줄의 text를 입력받을 수 있음

text 속성

• cols: 입력창의 너비. 문자의 평균적인 넓이를 기준
• rows: 기본적으로 보여줄 입력 줄 수
• maxlength: 사용자가 입력할 수 있는 문자 최대 길이
• minlength: 사용자가 입력해야 할 문자 최소 길이
• placeholder: 컨트롤에 무엇을 입력해야하는지 알려주는 힌트

📝 form 동적 가상 선택자

:enabled, :disabled

• 활성화 / 비활성화 상태

:read-only, :read-write

• 사용자가 편집할 수 없는/있는 상태

:checked

• input checkbox, radio 유형일 때 선택된 상태를 나타냄

:required

• 필수 입력값일 경우

::placeholder (가상 요소)

• 입력에 대한 추가 정보가 있을 경우

📱 미디어쿼리 @media

• 반응형 작업 할 때 사용
• PC, 스마트폰, 태블릿PC 등 다양한 디바이스에 따라 viewport크기가 다르기 때문에 여러 디바이스에 대응하기 위해 사용

미디어 유형

• all: 모든 장치 대상(기본값)
• print: 인쇄 결과물 및 출력 미리보기 화면에 표시
• screen: 모니터나 스크린이 있는 디바이스
• speech: 음성 합성장치 대상

미디어 특성

• width: 스크롤바를 포함한 뷰포트의 너비

  • min-width, max-width 최소 최대 너비

• height: 뷰포트의 높이

  • min-height, max-height 최소 최대 높이

• orientation: 뷰포트의 방향

  • portrait:세로 landscape:가로

• aspect-ratio: 뷰포트의 가로세로 비율

• resolution: 출력 장치의 픽셀 밀도 - 단위 dppx(Device pixel ratio)