2020. 12. 29. 01:19ㆍFRONT-END/HTML
META
http-equiv
이속석은 속성의 이름(http-equiv(alent))에서 알 수 있듯이, HTTP 헤더의 이름을 값으로 가질 수 있다.
이 속성의 값으로 서버나 사용자 에이전트의 작동방식을 변경할 수 있는 지시를 정의할 수 있다.
name
author
description
generator
<meta name="viewport" content="width=device-width, initial-scale=1.0">
반응형 웹에 최적화 되게 하는 코드
<base>
<base href="./폴더/">
이런식으로 기본적으로 경로 루트를 모두 작성 할 필요 없이
<a>
다른 url로 연결할 수 있는 하이퍼링크를 설정하는 태그
Anchor의 약자로,외부로 내보내기 라는 뜻을 가진다.
href 속성은 필수 속성 이었으나 HTML5 이후 부터는 생략 가능.
target 속성은 브라우저 탭의 위치를 지정한다.
<form>
웹 서버에 정보를 제출하기 위한 양식 범위를 정의.
- <form> 태그 내부에 자식으로 또 다른 <form>태그를 포함할 수 없다.
| 속성 | 의미 | 값 | 기본값 |
| action | 전송한 정보를 처리할 웹페이지의 URL | URL | - |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on |
| method | 서버로 전송할 HTTP 방식 | GET,POST | GET |
| name | 고유한 양식의 이름 | - | - |
| novalidate | 서버로 전송시 약식 데이터의 유효성을 검사하지 않도록 지정 | - | - |
| target | 서버로 전송 후 응답 받을 방식을 지정 | _self, _blank | _self |
GET 방식 ,POST 방식
쉽게 예를 들자면 GET방식으로 로그인 한다면 URL주소에 담겨져 전송이 되어 노출이된다.
하지만 POST방식으로 로그인 한다면 URL주소에 보여지지 않게 전송이 된다.
POST방식을 주로 사용하며, 기본적으로 비밀번호같은 중요한 데이터를 전송할 시 SHA-256 과 같은 암호화 알고리즘을 이용하여 암호화 하여 전송한다.
<input/>
사용자에게 입력 받을 데이터 양식
| 속성 | 의미 | 값 | 기본값 | 특징 |
| autocomplete | 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 | on, off | on | - |
| autofocus | 페이지가 로드될 때 자동으로 포커스 | 불린(Boolean) | 문서 내 고유해야 함 | - |
| checked | 양식이 선택되었음을 표시 | 불린(Boolean) | type 속성 값이 radio, checkbox일 경우만 | - |
| disabled | 양식을 비활성화 | 불린(Boolean) | - | - |
| form | <form>의 id 속성 값 | 해당 <form>의 후손이 아닐 경우만 | - | - |
| list | 참조할 <datalist>의 id 속성 값 | - | - | - |
| max | 지정 가능한 최대 값 | 숫자(Number) | type 속성 값이 number일 경우만, min속성보다 큰 값만 허용 |
- |
| min | 지정 가능한 최소 값 | 숫자(Number) | type 속성 값이 number일 경우만, max속성보다 작은 값만 허용 |
- |
| maxlength | 입력 가능한 최대 문자 수 | 숫자(Number) | 524288 | type 속성 값이 text, email, password, tel, url일 경우만 |
| multiple | 둘 이상의 값을 입력 할 수 있는지 여부 | 불린(Boolean) | type 속성 값이 email, file일 경우만, email일 경우 ,로 구분 |
- |
| name | 양식의 이름 | - | - | - |
| placeholder | 사용자가 입력할 값의 힌트 | type 속성 값이 text, search, tel, url, email일 경우만 | - | - |
| readonly | 수정 불가한 읽기 전용 | 불린(Boolean) | - | - |
| step | 유효한 증감 숫자의 간격 | 숫자(Number) | 1 | type 속성 값이 number, range일 경우만 |
| src | 이미지의 URL | URL | type 속성 값이 image일 경우만 | - |
| alt | 이미지의 대체 텍스트 | type 속성 값이 image일 경우만 | - | - |
| type | 입력 받을 데이터의 종류 | 별도 정리 | text | - |
| value | 양식의 초기 값 | - | - | - |
type 속성
값데이터 종류특징
| 값 | 데이터 종류 | 특징 |
| button | 일반 버튼 | <button>처럼 사용 |
| checkbox | 체크박스 | - |
| color | 색상 | IE 지원 불가 |
| 이메일 | - | |
| file | 파일 | - |
| hidden | 보이지 않지만 전송할 양식 | value 속성으로 값을 지정 |
| image | 이미지 제출 버튼 | <img />처럼 사용 |
| number | 숫자 | - |
| password | 비밀 | 가려지는 양식 |
| radio | 라디오 버튼 | 같은 name 속성 그룹 내 하나만 선택 가능 |
| range | 범위 컨트롤 | min, max, step, value(기본값) 속성 사용 |
| reset | 초기화 | 해당 <form> 범위 내 모든 양식 |
| search | 검색 | - |
| submit | 제출 버튼 | 해당 <form> 범위 내 고유한 양식 |
| tel | 전화번호 | - |
| text | 일반 텍스트 | - |
| url | 절대 URL | - |
<button>
선택 가능한 버튼을 지정
| 속성 | 의미 | 값 | 특징 |
| autofocus | 페이지가 로드될 때 자동으로 포커스 | 불린(Boolean) | 문서 내 고유해야 함 |
| disabled | 버튼을 비활성화 | 불린(Boolean) | - |
| form | <form>의 id 속성 값 | 해당 <form>의 후손이 아닐 경우만 | - |
| name | 폼 데이터와 함께 전송되는 버튼의 이름 | - | - |
| type | 버튼의 타입 | button, reset, submit | - |
전역속성(Global Attributes)
모든 HTML 요소에서 공통적으로 사용 가능한 속성
class 와 id
class
공백으로 구분된 요소의 별칭을 지정
CSS 혹은 JavaScripts의 요소 선택기
CSS선택자, GetElementsByClass,QuerySelectorAll 같은것을 통해서 요소를 선택하거나 접근한다.
id
문서에서 고유한 식별자(Identifier,ID)를 정의
CSS혹은 JavaScripts의 요소 선택기
CSS선택자,GetElementsById,QuerySelectorAll 같은것을 통해서 요소를 선택하거나 접근한다.