HTML - table, image, list, form, input

table : 표 작성 태그. 하위 태그로 thead, tbody, tfoot, tr, td 이 존재.

thead : 표의 머리글 부분. 생략가능.

tbody : 표의 본문내용. 

tfoot : 표의 바닥글 내용.

위 3개 태그는 생략가능.

tr : 표의 행을 구분하는 태그.

td : 행의 각 요소를 표현하는 태그. 여기에 각 요소의 값이 작성되어야한다.

 

image

img : 이미지 삽입용 태그.

속성으로 경로, 높이, 너비, 이미지 누락시 경고, 주석 이 있음.

src, height, width, alt, title 

 

list : 리스트를 작성하기 위한 태그들.

ol : 정렬된 리스트 라는 의미로 순서가 있는 리스트를 의미. 숫자 자동생성됨.

ul : 정렬되지 않은 리스트

li : 리스트 요소를 의미. ol 이나 ul 안에서 사용.

 

form : input 태그 전체를 감싸는 태그로, 각 컨트롤 요소(텍스트입력, 버튼, 라디오, 체크박스등등)를 하나의 데이터로 묶는 역할.

속성값으로 name, action, method, autocomplete 가 있음.

name : 서버로 보낼 form의 이름. 

action : 전송될 서버의 URL 이나 html링크

method : 전송방법. get, post 가 있음. 

GET : 클라이언트에서 서버의 문서를 요청.

• URL에 정보가 담겨서 전송된다.
• 전송할 수 있는 정보의 길이가 제한되어 있다. - URL의 길이가 한정되어있기 때문.
• 퍼머링크로 사용될 수 있다.

퍼머링크(permalink) : 고유 주소, 영구 주소 - 특정 페이지에 영구적으로 할당된 URL 주소.

  

POST : 클라이언트가 서버에서 처리해야할 문서를 전송. ex)게시판에 글씀.

• header의 body에 담겨서 전송된다.
• URL 상에 전달한 정보가 표시되지 않는다.
• GET에 비해서 보안상 약간의 우위에 있다. (사실상 동일하다)
• 전송할 수 있는 데이터의 길이 제한이 없다.
• 퍼머링크로 사용할 수 없다.
• 서버 쪽에 어떤 작업을 명령할 때 사용한다.
  (데이터의 기록, 삭제, 수정 등)

 

autocomplete : 자동완성기능. on이면 사용 off면 안사용.

 

input : 각종 입력용 태그. 속성으로 type, name을 사용함.

type : text, password, button, submit, reset, radio, checkbox, file, hidden 

name : 입력의 이름. 서버로 전송할 변수명.

** file type의 경우 form태그의 method가 post 일때만 가능. -  파일을 URL로 보낼수 없기때문임.

단, form태그에 enctype 속성이 있어야하며 그 값에  multipart/form-data 가 붙어야함.

정리가 잘된 블로그가 있어 공유

 

velog.io/@choiiis/HTMLCSS-form-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

[HTML]

wikidocs.net/86914

위키독스