HTML ( FORM 태그, 시맨틱 태그)

*form 태그

폼(form)은 HTML에서 사용자와 상호작용해서 정보를 입력 받고 서버로 전송하기위한 양식을 의미

action과 method 속성을 함께 사용

<form action="처리할페이지주소" method="get|post"></form>

action 속성

폼 요소에서 사용자와 상호작용으로 입력 받은 값들을 전송할 서버의 URL 주소를 적는다.

 

method 속성

입력 받은 값을 서버에 전송 할 때 송신 방식을 적는다.

속성값으로 get 또는 post를 사용

 

GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식

데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적

검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용

 

POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식

데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없다.

보안성 및 활용성이 GET 방식보다 좋다.

 

 

input 태그

로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때는 input 태그를 사용

<input type="종류" name="이름" value="초기값">

 

type 속성

type 속성은 입력된 값에 따라 상호작용 요소의 종류를 결정

 

 

fieldset과 legend 태그

form 태그 안에 사용된 다양한 상호작용 요소도 fieldset 태그를 사용 해 그룹을 지을 수 있다.

fieldset 태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생긴다.

 

textarea 태그

여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그를 사용

웹 사이트에서 글을 작성할 때 사용하는 입력 요소는 대부분 textsrea 태그로 생성

 

select, option, optgroup 태그

콤보 박스를 생성

콤보 박스에 항목 하나를 추가할 때는 option 태그를 사용하고, 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용

option 태그는 서버에 전송할 값을 value속성으로 지정 할 수 있는데, 속성을 생략하면 option 태그의 컨텐츠로 적은 텍스트가 값으로 전송

optgroup 태그로 항목들을 그룹 지을 때 반드시 label 속성으로 그룹명을 지정해야 한다.

 

button 태그

input a태그에서 type 속성값을 submit, reset, button으로 지정해 생성

별도의 button 태그로 생성

<button type=”종류">버튼 내용</button>

 

 

 

 

폼 관련 태그에서 사용할 수 있는 추가 속성

 

disable 속성

상호작용 요소를 비활성화

input, text, area, select, button 태그에서 사용

태그가 비활성화되면 입력 요소는 텍스트를 입력 할 수 없고, 목록 상자는 항목을 선택할 수 없으며, 버튼 요소는 버튼 클릭 못함

 

readonly 속성

상호작용 요소를 읽기 전용으로 변경

 

maxlength 속성

입력할 수 있는 글자 수를 제한

 

checked 속성

요소를 선택된 상태로 표시

선택 요소가 있어야 하므로 input 태그의 type 속성값이 checkbox나 radio인 요소에만 사용할 수 있다.

 

required 속성

내용을 폼에 입력 한 후 submit 버튼을 클릭하면 폼을 서버로 전송 하는데 이 때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 한다.

 

 

 

 

*시맨틱 태그

-Semantic은 '의미의', '의미론적인'이라는 뜻

-따라서 시맨틱 태그란 의미가 있는 태그를 말한다.

-div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, 

form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의

-우리가 흔히 사용하는 웹 사이트의 디자인은 서로 달라 보여도 구조가 비슷하다.

헤더에는 사이트 제목이나 로고가 있고, 본문 영역과 그 외의 내용을 나타내는 사이드 바, 푸터 영역 등이 있다.

 

 

시맨틱 태그가 필요한 이유?

웹 문서는 시맨틱 태그를 사용하지 않더라도 만들 수 있다.

 

-웹브라우저가 HTML의 소스 코드만 보고도 제목과 본문 등을 쉽게 구분

-시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.

-시맨틱 태그를 사용한 코드 블록을 찾는 것은 끝없는 div(div > div > div ...)를 탐색하는 것보다 훨씬 쉽다.

-의미가 있는 요소는 개발자 모두에게 명확한 의미를 전달

 

header

페이지의 제목과 같은 소개 내용을 포함

일반적으로 heading 태그나 로고 또는 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등을 포함

 

nav

보통 메뉴, 목차 등에 사용

웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는데 사용

 

section

웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용

보통 section 태그는 내용의 제목을 나타내는 hn 태그 중 하나를 포함

 

article

웹 페이지에서 독립적인 영역을 구분할 때 사용

*article 태그를 section 태그와 혼동하기도 하는데, section 태그는 웹 페이지 안에서 관련 있는 내용을 구분하고, article 태그는 어떤 웹 페이지든 독립적으로 사용할 수 있는 영역을 구분한다는 점에서 차이가 있다

 

aside

본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다.

보통 웹 사이트에서 사이드바는 필수 요소가 아니므로 필요할 경우에만 사용

 

main

웹 페이지의 주요 내용을 지정할 때 사용하는 태그

main 태그에는 문서에서 반복해서 등작하는 요소를 포함해서는 안된다.

그리고 main 태그를 article, aside, footer, header, nav 태그의 하위에 포함 할 수 없다.

 

footer

일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 포함

 

 

 

태그 종류에 상관없이 사용하는 글로벌 속성

HTML 언어에서 태그는 각 태그에서 사용할 수 있는 속성이 정해져 있다.

예외적으로 태그 종류에 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성이 있는데, 이것이 바로 글로벌 속성이다.