[ <div> = 구획 나누기 ]
* <div class="">와 같이 태그 붙여서 사용
* 순수 컨테이너 - 스스로는 아무것도 표현하지 않음
* 다른 요소들을 묶거나, 문서의 구획을 나누는 데 사용
[한계] 코드로는 용도를 추론할 수 없는 단순 컨테이너[ Semantics - 의미가 부여된 태그 ]
* 각 구획의 용도와 내용의 의미를 태그로써 알 수 있도록 함
* <div> 를 대체해서 사용
<header> = 페이지의 최상단에 위치(제목,로고 등)
<footer> = 페이지의 최하단에 위치(작성자,저작권정보 등)
<section> = 컨텐츠 내 큰 단위의 독립적인 구획
<nav> = 링크들(현재 페이지 내 구획 또른 다른 페이지로의)을 포함
<aside> = 문서의 주 내용과 간접적으로 연관된 부분(주로 사이드바 등에 사용)
<main> = <body>의 주요 컨텐츠(메인 컨텐츠)
<article> = 독립적으로 재사용되거나 반복적으로 나타나는 구획
(게시판이나 뉴스, 갤러리의 목록상 각 항목)
[ HTML 폼 ]
<form> = 문서구획(내부 입력 양식들의 부모, 컨테이너 역할)
- 폼 요소
<label> = 각 입력 양식의 레이블을 표시
★ 입력 양식의 클릭 가능 영역 확장에 필요
<label for="#"> & <input id="#"> 을 통해 라벨과 인풋을 연결할 수 있다
<input> = 입력창, 속성들과 같이 써야 모양이 달라짐
(속성)
id : 고유값, label과 연결
autocomplete : 자동완성
autofocus : 페이지로 들어올 때 커서가 위치(페이지에서 하나만 사용되어야 함)
disabled : 수정 불가, 값이 전송되지 않음
readonly : 수정 불가, 입력된 값은 전송됨
name : 서버로 전송될 항목명
<input type="text"> = 일반 텍스트 입력
<input type="password"> = 패스워드 입력 (••• 등으로 표시)
<input type="tel"> = 전화번호 입력 (모바일 등에서 전화번포 키패드 표시)
(속성)
placeholder : 입력값이 공백일 시 보여질 텍스트
maxlength : 최대 글자 수
<input type="number"> = 숫자값 입력
(속성)
max : 최대 입력값
min : 최소 입력값
step : 입력 가능한 값의 간격 (2: 0, 2, 4, 8)
<input type="checkbox"> = 체크박스
checked : 초기 체크 되어있는 상태로
<input type="radio"> = 라디오(택일)
checked : 초기 체크 되어있는 상태로
name="" : 같은 이름으로 지정된 목록들 끼리 구분 범위 설정(이중 하나만 선택되도록)
<input type="file"> = 파일 첨부
multiple : 여러 파일 가능 여부
<select> = 선택지
id : 고유값, label과 연결
name : 서버로 전송될 항목명
<option> = 선택항목
value : 서버로 전송될 값 따로 지정
selected : 선택 여부(<select>당 하나의 <option>에만 가능)
<button> = 버튼
type : 버튼의 역할. summit 등 여러가지 쓸 수 있으나
거의 <button type="button">만 씀
disabled : 비활성화
Front-End 개발자