HTML 모르는 부분 정리

오늘은 HTML 헷깔리는 부분이나 모르는 부분 정리해보자!

• <section>과 <article>의 차이

<section> : 맥락에 따라 주제별로 컨텐츠를 묶을 때 사용 (보통 제목 요소(h1~h6)을 자식 요소로 포함)
<article> : 독립된 내용의 실제 컨텐츠 내용들을 넣을 때 사용
<article>은 실제 내용들이 들어가고 <section>은 header와 section, footer와 구분하기 위한 기능으로 사용

폼(Form)

HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다.
폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수 도 있다.

Tip!
form 요소를 사용할 때 주의할 사항으로는
<form></form> 태그 사이에는 다른 <form> 태그가 삽입이 안되며
<form>의 이름 속성은 한 페이지에서 중복하여 사용하면 안 됩니다!
또, 나중에 CSS를 통해 폰트를 적용할 때 <form> 태그는 폰트가 적용되지 않으므로
따로 font를 적용해줘야 합니다.

<form> 태그

: 입력 양식 전체를 감싸는 태그

form은 컨트롤 요소(control element)로 구성된다.

• Form 태그의 속성

method
전송 방식 선택
1) get : 256~4096 byte까지만 전송 가능

• url끝에 데이터를 붙여보내는 GET방식은 데이터가 외부에 노출되어 보안에 취약합니다.
  2) post : 입력 내용의 길이에 제한 X
• 데이터가 개인정보나 보안을 해야 하는 경우는 POST방식을 사용해야 합니다.

name
form의 이름, 서버로 보내질 때 이름의 값으로 데이터 전송

action
form을 전송할 서버 쪽의 script 파일을 지정
전송되는 서버 url 또는 html 링크

target
action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정

autocomplete
자동 완성. on으로 하면 form 전체에 자동 완성 허용 (<form autocomplete="on|off">)

폼을 구성하는 다양한 엘리먼트

<fieldset>태그는 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용합니다.
그리고 <fieldset> 태그 하위에 <legend>태그를 사용하여 그룹화한 폼 엘리먼트들을 목적에 맞게 이름을 지정합니다.

 <form
        action="#"
        accept-charset="utf-8"
        name="person_info"
        method="get"
        autocomplete="off"
      >
        <fieldset style="width: 150px">
          <legend>개인 정보 입력</legend>
          이름 : <input type="text" name="name" /><br /><br />
          나이 : <input type="text" name="age" /><br /><br />
        </fieldset>
        <br />
        <fieldset style="width: 150px">
          <legend>여가 활동</legend>
          취미 : <input type="text" name="hobby" /><br /><br />
          특기 : <input type="text" name="specialty" /><br /><br />
        </fieldset>
      </form>