-HTML고급-

참고: 본문은 http://webberstudy.com  내용의 글을 정리한 것입니다

1. 메타요소 (meta태그)

charset 메타는 페이지의 문자셋을 지정함.

description과 keyword는 검색엔진에서 주로 사용.

author 메타로 작성자를 명시 가능

generator 메타는 프로그램에 의해 자동으로 제작된 소스에서만 사용, 실제 직접 코딩 시에는 사용할 수 없음.

refresh 메타로 주기적인 새로고침을 하거나, 지정 시간 후 페이지 우회를 할 수 있음. 하지만, 사용자의 접근성을 매우 떨어트리며 검색엔진에도 악영향을 미칠 수 있기 때문에 비 권장.

X-UA-Compatible 메타 정보를 통해서 IE의 하위버전 렌더링 모드로 표현 가능, 하지만 하위 렌더링에는 버그가 더 생길 수 있으므로, "IE=edge" 사용을 권장

viewport 메타로 모바일 기기에서 접속 시, 보여지는 너비를 정할 수 있음. 모바일용 페이지가 아니더라도, 지정하는 것을 권장

모바일 페이지의 경우, 레이아웃이 깨지지 않도록 확대/축소를 막을 수 있지만, 그럴 경우 글자 크기를 조절할 수 있도록 하는 등의 접근적 대안이 필요.

2 . Form요소 1 (form 태그와  input 태그)

form 요소는 폼 안에 입력된 데이터를 웹 서버로 전송하는 역할을 함.

서버에 데이터를 전송하는 방식으로 기본적으로 GET/POST 방식이 있음.

GET은 URL을 통해서 전송, 주로 조회나 검색 같은 서버에 직접적인 영향을 미치지 않는 형식에 사용. 접근성이 좋음

POST는 정보를 숨겨서 전송, 서버에 영향을 주며 수행하는 형식에 주로 사용. 보다 보안성이 높으나, URL 접근이 안 되는 관계로 검색엔진 등의 접근성은 떨어짐

input 요소는 폼 안에서 데이터를 입력하는 요소. type 속성으로 형태를 바꿀 수 있음.

type="submit"인 input 요소는 클릭 시 폼을 서버로 전송함.

label은 폼 입력 요소에 무엇을 입력하는 지 명시해 주는 요소. 주로 해당 입력 요소의 id를 연결.

label은 꼭 명시해 주는 것이 좋으며, label이 들어갈 공간이 없는 경우, 해당 입력 요소에 title 속성으로라도 명시

3 . Form요소 2 (textarea 와  input)

textarea 요소는 긴 내용의 텍스트 입력을 위한 입력 폼. cols와 rows은 필수 속성으로 기본 입력 영역을 지정

input 요소는 type 속성으로 다양한 형태의 입력 폼을 구현

input[type="text"]는 텍스트 타입

input[type="password"]는 암호 타입

input[type="radio"]는 라디오 버튼 타입. 열거된 값 중 하나를 필히 선택

input[type="checkbox"]는 체크박스 타입. 선택하거나 안 할 수 있음.

input[type="button"]은 기본 버튼 타입. 주로 자바스크립트 동작을 구현

input[type="file"]은 파일 업로드 타입.

input[type="submit"]은 폼에 입력된 값을 서버에 전송.

input[type="reset"]은 폼에 입력된 값을 모두 초기화

input[type="image"] "submit" 타입과 동일한 역할을 하나, 이미지 형태의 버튼. 이미지이기 때문에 src, alt 속성 필요.

input[type="hidden"]은 숨김 형태 인풋, 보이지 않게 값을 전송

input 요소의 type 외 속성

disabled 속성은 모든 폼 요소들이 쓸 수 있는 속성. 해당 폼 요소를 비활성화

readonly 속성 - input[type="text"]와 textarea 요소에 쓰이는 속성. 내용을 수정하지 못 함

size 속성 - input[type="text"]에만 쓰이는 속성. 글자수로 너비 지정

maxlength 속성 - input[type="text"]에만 쓰임. 최대 글자 수 제한

checked 속성 - input[type="checkbox"], input[type="radio"]에서 사용. 기본 값으로 선택 됨.

4 . Form요소 3 (button과 select, fieldset)

select 요소는 여러 option 요소들 중 사용자가 선택하도록 하는 폼

select 요소에 multiple 속성을 사용할 경우 여러 개 선택 가능

optgroup 요소를 option 요소들을 그룹화 할 수 있음

button 요소는 input의 버튼 형태 타입을 대체 가능하며, 내부에 인라인 요소들 사용 가능

fieldset 요소는 폼 요소들을 그룹화 해주며, legend 요소로 폼 그룹의 이름을 지정