3일차(HTML마무리)-24.11.18

form(양식)이란?

사용자로부터 입력받은 정보를 모아서 서버로 보내 원하는 처리를 할 수 있게해주는 중요한 요소
입력양식을 만들어주는 폼 태그는 사용자가 입력한 데이터를 서버로 보내는것을 목적으로 하는 태그,
따라서 서버에 대한 이해가 반드시 필요하다.

입력양식이 사용된 페이지의 예
• 로그인 페이지
• 회원가입페이지
• 검색어입력페이지

서버

예를 들어로그인을 하려면 아이디와 비밀번호라는 정보요소가 필요하다.
요소를 입력을 하면 인터넷을 통하여 서버에 전달되고 정보를 제공해준다.
서버란 입력한 정보를 받아서 처리해줄 수 있는 프로그램, 그 프로그램이 설치되어있는 컴퓨터까지를 서버라고한다.
간단히 말해서 서버란 정보를 처리하고 제공하는 호스트

form

입력요소들을 감싸고, 입력 값을 서버측으로 제출(submit)하는 역할을 하는 태그
안에 다양한 입력태그들을 포함시키면 해당 입력요소들은 양식의 개별 항목으로써 역할을 수행한다.

단순히 폼 요소안에 입력요소를 포함한 것만으로는 서버에 입력 값을 전송할 수 없다.
역할을 수행하기 위해서는 아래의 속성을 사용해야한다.

• action:입력값을 전송할 서버의 주소(url)
• method:클라이언트(사용자)가 입력한 데이터를 어떤 방식으로 전송할지(GET or POST)

method

GET과 POST 둘중에서 어떤 방식으로 서버에 요청을 보낼지 고르는 것

• GET:서버에 요청을 보내서 응답을 받아낸다.
  서버로부터 정보를 '가져온다'라는 성격의 요청
• POST:서버에 요청을 보내어 작업을 수행한다.
  서버에 있는 데이터를 추가,수정,삭제한 후에 응답을 받아낸다.
  서버의 정보를 '조작한다'라는 성격의 요청

이름을 반드시 지어줘야함

폼요소안에 필요한 만큼 입력요소를 포함하여 다양한 형태의 양식을 만들 수 있다.
폼요소안에 포함되어있는 각 입력요소에는 이름(name)속성을 추가해 각각 입력 항목의 역할을 구별해줄 수 있다.
name은 들어있는 입력요소의 역할을 구별해주는 식별자

화면상 입력요소의 모양은 바뀌는 게 없으나 추후 실제로 서버에 데이터를 전송하는 작업을 하였을때에 상당히 중요하다.
서버가 정보를 받으면 name속성으로 항목을 구별하기 때문

시맨틱(의미론적인) 코드

다른점개발자와 브라우저에게 의미를 제공한다.
컨테이너코드와 역할이 거의 같지만 태그의 이름이 요소의 목적이나 역할을 강조하는 의미로 지어져있다라는 차이점이있다.
검색엔진에 좋은 단서가된다.

시멘틱태그의 장점

대부분은 컨테이너 태그(span/div)와 같이 특별한 스타일을 제공하지 않지만 아래와 같은 이점이 있다.

• 검색 엔진은 시멘틱 태그를 웹페이지를 검색하는데에 있어서 중요한 단서로 본다
• 적극적으로 사용하게되면 시각장애가있는 사용자가 화면판독기,음성인식기로 페이지를 탐색할때 참조가된다.
• 중요한 내용을 조금더 강조하는 효과가 있다. 웹 접근성을 향상 시킬 수 있다
• 코드의 가독성이 좋아진다.
  이름으로 역할을 강조하기때문에 코드를 볼때 조금더 빠르게 코드를 캐치할 수 있다.
• 컨테이너의 남용을 방지할 수 있어 코드쓰기가 편하다.
  • 컨테이너의 남용? 웹컨텐츠를 많이 페이지에 채우게되면 스타일이나 div가 많아짐
    많아지게되면 코드를 작성하기에도 불편해짐

시멘틱코드의 종류

• <articcle>-독립적인 컨텐츠
• <aside>-별도의 컨텐츠
• <details>-추가적인 상세정보
• <figcaption>-figure의 자막
• <figure>-설명이 붙는 독립컨텐츠
• <footer>-맺음말
• <header>-머릿말
• <main>-주된 (메인) 컨텐츠
• <nav>-네비게이션링크
• <section>-컨텐츠의 한 섹션(절)
• <summary>-detail의 헤더
• <time>-강조할 시간

meta

HTML문서에 대한 메타데이터를 정의한다.

메타데이터란 데이터에 대한 데이터, '정보'를 의미한다. meta태그는 항상 head 태그의 안에 들어가며, 문자세트, 페이지설명,키워드,문서의 작성자 및 뷰포트 설정을 지정하는데 사용된다.
없어도 페이지는 잘만들어지지만 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고, 검색결과에도 반영할 수 있다.
실무에 들어가게되면 페이지를 만드는 것뿐만 아닌 실제로 사용자들이 사용을 하는 웹을 만들어야하니 반드시 필요한 사항이다.

메타데이터의 유형과 속성

• charset:문자세트
  문자인코딩에 대한 요약정보를 기입하는 속성
  문자인코딩이란 한글을 표시하기위해 문자세트를 지정하는 작업으로 영문과 한글을 모두 사용하기위해 utf-8방식을 사용하는 것이 좋다.
  
  인코딩을 명확히 기입하지않으면 웹븡라우저 설정상황에 따라 자동으로 인코딩을 추정해서 처리한다.
  문자가 깨질 가능성이 생긴다.


• http-equiv:컨텐츠 속성정보에 대한 http 헤더
  HTTP란 인터넷에서 데이터를 주고받을 수 있는 프로토콜(약속)이다.
  정보를 송수신할때 사용하는 기술적인 방법.
  해당속성에 http관련정보를 지정하면,'content'라는 속성에 그에 대한 정보(값)을 지정한다.
  지정되어있는 값이 해당정보의 역할을 수행하게 된다.


• name: 문서정보
  form 에서는 입력요소간의 구분을 위해 사용이 된다.
  meta에서는 속성을 이름으로 content속성을 값으로 하여 문서정보를 이름+값 쌍의 형태로 제공할 때 사용할 수 있다.
  검색최적화에 도움이 되는 작업이다.


• content:메타데이터 내용