• HTML 버전이 업그레이드되면서 태그가 추가되기도 삭제되기도 함
• 현재 태그 갯수는 대략 100여개 넘음
• 대부분의 웹페이지들은 실제 20~30여개의 태그만 사용한다

참조할 태그 레퍼런스들

https://developer.mozila.org/en-US/docs/Web/HTML/Element
http://html5doctor.com/element-index/
https://www.w3schools.com/tags/default.asp

---

제목

제목(HEADING) 태그
문서내의 제목을 표현할 때 사용하는 태그

<h1>Hello</h1>

• 제목의 레벨에 따라 <h1>~<h6> 태그까지 존재
• 숫자가 낮을수록 더 큰 단위의 제목을 사용.
• <h1>태그는 보통 해당페이지를 대표하는 큰제목으로 사용되는 경우가 많다.

---

단락요소

단락과 개행 (paragraph, linebreak)
<p> 태그: 글의 단락을 나타낸다
<br> 태그 : 글자를 개행

• <p> 태그를 넣으면 단락별로 자연스럽게 개행됨
• <p> 태그 내부에서 임의로 개행을 하려면 <br> 태그 사용
• <p> 태그를 이용하면 태그 자체에서 자연스럽게 개행을 해주지만, <p> 태그 내부에서 강제로 개행을 하기 위해서는 <br> 태그를 이용해야 한다.

---

텍스트를 꾸며주는 요소

<b> 태그 : 글자를 굵게 표현한다. bold
<i> 태그 : 글자를 기울여서 표현. 이탤릭체
<u> 태그 : 글자에 밑줄을 표현. underline
<s> 태그 : 글자의 중간선을 표현

<p>
    <b>Lorem</b> <i>ipsum</i> dolor sit amet<br>
    <u>Lorem</u> <s>ipsum</s> dolor sit amet
</p>

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

참고

---

앵커 요소 Anchor

HTML의 HT : 하이퍼 텍스트 : 링크를 뜻함

<a> 태그 : 링크를 생성하는 태그
a 태그, 앵커 태그, 링크 태그등으로 불림

<a href="http://www.naver.com/" target="_blank">네이버</a>

네이버

href 속성

• 링크를 만들기 위해서 앵커는 반드시 href 속성을 가져야한다.
  • 하이퍼 레퍼런스
  • 속성값으로 링크의 목적지가 되는 url이 들어가게 됨

target 속성

• 링크된 리소스를 어디에 표시할지 나타낸다
• 속성값 : self, blank, parent, top
  • parent, top : 프레임이라는 특정 조건에서만 동작. 프레임 기술은 현재 잘 쓰이지 않음
  • self : 우리가 보고있던 화면 자체를 외부 링크 페이지로 이동한다. default값
  • blank: 새로운창, 빈 창에 외부페이지가 나타나게끔 한다.

내부 링크

• 앵커태그는 꼭 외부페이지로 이동하는것 아님
  페이지 내부의 특정 요소로 초점을 이동시킬 수 있음 = 내부 링크
  ex) 페이지 맨 밑에서 맨 위로 올라가고자 할때
  그때는 href 속성값으로 #를 쓰고 뒤에 이동시키고자 하는 요소의 id

<a href=#요소id></a>

---

의미가 없는 컨테이너 요소

태그에는 아무런 의미도 없는 태그들 존재.

태그 자체에는 아무런 의미도 가지지 않고, 순전히 무언가를 담기 위한 또는 어떤 요소들을 묶기 위한 용도로만 사용되는 태그들

• 실무에서 스타일을 주기 위해서나, 서버에서 보내는 데이터를 담기 위한 목적으로 이런 의미없는 요소들 자주 사용됨
• 이런 의미 없는 태그들의 사용빈도가 매우 높다

<div> 태그 : 블록레벨 태그
<span> 태그 : 인라인 레벨 태그

<div>
    <span>Lorem</span> ipsum dolor sit.
</div>

• 블록레벨 요소가 표현이 되면 모니터의 한 라인 하나를 다 채워서 표현됨
• 인라인 레벨 요소들은 블록레벨 요소의 안에 들어감
• <p>가 블록레벨요소, <b>, <i>, <u>, <s> 들이 인라인 레벨 태그

---

리스트 요소

리스트 : 일련된 항목들이 나열된 것들

실시간 검색어, 뉴스, 쇼핑 상품들이 전부 리스트로 이루어짐
콘텐츠가 많은 사이트일수록 분야나 항목으로 나뉘는것이 많기 때문에 리스트로 표현될만한 요소들이 많다

순서가 없는 리스트 unordered list
나열된 항목들이 순서와 상관이 없을때 쓰는 리스트

<ul> 
    <li> 콩나물</li> 
    <li> 파</li> 
    <li> 국  간장</li> 
    ... 
</ul> 

• 콩나물
• 파
• 국 간장
...

<ul>태그 입력 후 각각의 항목들을 <li>태그로 입력한다

순서가 있는 리스트 ordered list
나열된 항목들이 순서와 관련이 있을때 사용하는 리스트

<ol>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
    ...
</ol>

1. 냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.
2. 콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.
3. 뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.
...

<dl> 리스트
definition list (정의), description list(설명을 기술)
용어와 그에 대한 정의를 나타낸다

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

리플리 증후군 허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어 피그말리온 효과 타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상 언더독 효과 사람들이 약자라고 믿는 주체를 응원하게 되는 현상

• <ul>, <ol>리스트와 구조가 다르다. <ul>, <ol> 리스트는 항목들을 단순히 나열하는것
• <dl> 리스트는 용어와 설명이 하나의 세트를 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조.
  • <li>태그가 아닌 <dt>와 <dd>태그를 이용해서 항목 나타냄
  • <dt>에는 용어, <dd>에는 그에 대한 정의 또는 설명이 들어감
  • 용어 하나에 여러개의 정의가 들어갈 수 있다.

리스트 태그도 중첩이 가능하다.

<h1>월드컵 조 편성</h1>
<ol>
  <li>
    A조
    <ul>
      <li>러시아</li>
      <li>우루과이</li> 
      <li>이집트</li>
    </ul>
  </li>
  <li>
    B조
    <ul>
      <li>이란</li>
      <li>스페인</li> 
      <li>포르투갈</li>
    </ul>
  </li>
  <li>
    C조
    <ul>
      <li>크로아티아</li>
      <li>아르헨티나</li> 
      <li>아이슬란드</li>
    </ul>
  </li>
<ol>

월드컵 조 편성

1. A조
   • 러시아
   • 우루과이
   • 이집트
2. B조
   • 이란
   • 스페인
   • 포르투갈
3. C조
   • 크로아티아
   • 아르헨티나
   • 아이슬란드

• <ol>태그의 자식으로는 <li>태그만 올 수 있음. <div>, <p> 태그 등 불가능
• <li>태그는 <ol>태그나 <ul>태그만을 부모로 가질 수 있음
• <li>태그의 자식으로는 다른 요소들이 들어올 수 있다.
• 리스트를 중첩할때 <ol>이나 <ul> 리스트 밑의 자식으로 <li>태그만 올 수 있다.
• 중첩을 할때에는 <li>태그안에 요소들을 삽입해야 한다.

---

이미지 요소

<img> 태그
문서의 이미지를 삽입하는 태그

닫는태그가 없는 빈 태그

<img src="./images/pizza.png" alt="피자">

src 속성
이미지 경로를 지정하기 위한 필수 속성

경로에는 상대경로와 절대경로 두가지 존재

상대경로 : 현재 웹 문서의 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로
절대 경로 : 실제 그 이미지가 위치해 있는 곳의 전체 경로

• 상대경로는 같은 이미지를 삽입하더라도 불러오는 페이지의 위치에 따라서 이미지의 주소가 달라질 수 있다
• 절대경로는 어느 페이지에서 불러오더라도 항상 같은 주소를 가지게 된다

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

상대경로를 쓸때는 .을 이용
./ : 현재 페이지가 있는 폴더를 나타낸다. 생략도 가능함
../ : 상위 폴더로 한번 이동하는 명령
../../ : 상위폴더로 두번 이동
현재폴더에서 하위 폴더로 갈때는 폴더명만 적으면 됨 folder명/이미지 파일

절대경로는 이미지의 전체 경로를 다 적어야 한다

alt 속성
이미지의 대체 텍스트를 입력한다

• 대체 텍스트 : 이미지를 설명하는 글.
• 일반적인 상황에서는 노출 되지 않고 웹 접근성 측면에서 중요한 속성.
  • 시각장애인은 스크린 리더기를 이용해서 컴퓨터를 이용하는데, 눈으로 콘텐츠 확인이 되지 않기 때문에 이미지에 대한 정보를 알 수 없다.
  • 그때 스크린 리더기와 같은 보조 기기가 이미지를 대신해서 대체 텍스트의 속성을 읽어준다.
  • 또한 서버에서 이미지를 못 가져오는경우 뜨는 엑박 표시 옆에 대체텍스트가 노출되기도 함
• alt 속성 역시 필수로 넣어주는것이 좋다.
• alt속성에 너무 디테일한 이미지의 설명이 들어가는것보다 전달해야 하는 정보만 넣어주는게 좋음
  ex) 피자 (O) / 소세지가 6개 올라간 피자 (X)

width속성, height 속성
이미지의 가로, 세로 크기 지정하는 속성

• 이미지의 크기는 보통 화면크기에 따라 같이 커지거나 작아지는 등 유동적으로 변하는 경우가 많음. 즉 항상 고정적인 크기를 유지하지 않기 때문에 보통 css로 크기를 제어한다.
• 만약 이미지의 크기가 고정적이라면 width,height 속성을 쓰는게 성능적인 측면에서 더 좋음.

• width, height 속성에 단위를 쓰지 않으면 자동적으로 픽셀로 인식해서 동작함
• width나 height 둘 중 하나에만 값을 주게 되면 다른 하나는 알아서 원본 이미지의 비율을 유지한 상태로 같이 줄어든다.

이미지 확장자 포맷

• gif
  : 색이 제한적이지만 용량이 작다. 애니메이션과 투명 이미지를 지원
  움짤들이 다 gif포맷으로 되어있음. 움짤은 해상도가 낮은데 색이 256색으로 제한되어 있기 때문

• jpg
  : 전통적으로 웹에서 가장 많이 사용되는 포맷. 자연스러운 색상 표현이 가능, 압축률이 높아서 용량도 적절. 사진이나 일반적인 그림에 다 사용됨. 투명 지원하지 않음

• png
  : jpg와 비교했을때 이미지 손실이 없음. 가장 높은 퀄리티의 이미지를 표현가능. 용량도 조금 더 높음. 반투명까지 지원. 웹에서 요새 가장 핫하고 유용한 파일 포맷

---

테이블 요소

<table> 태그
데이터 표를 나타내는 태그

• 표는 한칸 한칸의 셀로 이루어져 있다
• 가로방향 : 행 row
• 세로방향 : 열 column

• 셀을 표현해주는 태그 : <td>, <th>
• 셀들을 감싸주는, 하나의 행을 표현하는 태그 : <tr> table-row
• 이들 전부를 감싸주는 table태그

• 표는 가로로 그린다고 생각
• 4x4 표
  : 행 하나에 셀 4개
  -> <td>태그 4개가 들어감 = 하나의 행
  하나의 행을 표현하는 <tr> 태그로 <td> 태그감싸줌
  4행 -> 4번 반복

<table>
  <tr>
  	<td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
</table>

-> 테두리가 없는 테이블. 브라우저에서 제공하는 테이블의 기본 스타일에는 테두리가 없다

• 테이블은 복잡한 데이터를 시각적으로 보기 편하게 보여준다는 장점
• 조그만 표를 작성하는데도 많은 태그가 들어가는 단점
  • 행과 열의 2차원 데이터를 표현해야 하기 때문이다.
  • 코드도 읽기 어렵지만 기계(스크린 리더기등의 보조기기)도 해석하기 어렵다.

따라서 표를 구조적으로 파악하기 위해 도움이 되는 몇개의 태그가 더 존재
표를 그릴때에는 이런 구조 관련 태그들을 잘 이용해서 만들어야 한다.

표 구조 관련 태그
<caption> 태그 : 표의 제목을 나타냄
<table>태그의 자식으로 가장 위에 선언이 되어야한다
<thead> : 제목 행을 그룹화
<tfoot> : 바닥행을 그룹화
<tbody> : 테이블 본문 행을 그룹화

<table>
    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
</table>

Monthly Savings

Month	Savings
January	$100
February	$80
Sum	$180

• <tr> 태그들이 <thead>, <tfoot>, <tbody> 태그로 감싸져 있다. 모두 테이블의 구조를 나타내는 태그들
• 제목행을 나타낼때에는 <td>대신 <th>태그를 사용
• 제목행은 좀 더 굵은 글씨로 표현된다
• <tfoot>은 <tbody> 뒤에 위치해야 한다. <tfoot>의 위치가 <tbody> 앞에 나올 경우 웹 접근성의 키보드의 초점 이동 순서 항목에 문제가 있기 때문

셀 병합 속성
colspan : 셀을 가로방향으로 병합
rowspan : 세로방향으로 병합
속성값 : 병합할 셀의 갯수

셀 갯수 계산방법

• 병합되지 않은 행의 원래 셀 갯수를 세고 모든 행이 이 셀 갯수만큼 셀 태그를 갖고 있는다고 생각. ex) 2개
• 특정셀에 colspan이 들어가게 되면 이 셀은 colspan의 속성값만큼 셀을 갖고있다고 생각. 실제로 <td>태그가 하나이지만 속성값만큼, 즉 2개만큼의 갯수가 있다고 생각하고 계산해야함.
• rowspan이 들어간 셀은 그 다음행, 그 다음 <tr>태그에서 셀 갯수를 셀때 1을 더한 상태로 시작하기

<table>
    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td rowspan="2">$80</td> <!--1+1-->
        </tr>
        <tr>
          <td>March</td>
         </tr>
    </tbody>
    <tfoot>
        <tr>
          <td colspan="2">Sum</td> <!--1-->
        </tr>
    </tfoot>
</table>

Monthly Savings

Month	Savings
January	$100
February	$80
March
Sum

<table>
  <caption>Specification values</caption>
  <thead>
  <tr>
    <th rowspan="2">Grade.</th>
    <th rowspan="2">Point.</th>
    <th colspan="2">Strength.</th>
    <th rowspan="2">Percent.</th>
  </tr>
  <tr>
    <th>kg/mm</th>
    <th>lb/in</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Hard</td>
    <td>0.45</td>
    <td>56.2</td>
    <td>80,000</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Medium</td>
    <td>0.45</td>
    <td>49.2</td>
    <td>70,000</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Soft</td>
    <td>0.45</td>
    <td>42.2</td>
    <td>60,000</td>
    <td>30</td>
  </tr>
  </tbody>
</table>

Specification values

Grade.	Point.	Strength.	Percent.
kg/mm	lb/in
Hard	0.45	56.2	80,000	20
Medium	0.45	49.2	70,000	25
Soft	0.45	42.2	60,000	30

테이블 관련 기타 태그 및 속성

colgroup, col 태그
scope, headers속성은 잘 사용된다.

---

폼 요소

인터넷을 하다보면 어떤 요소의 텍스트를 직접 입력, 어떤 요소들 중 하나를 선택, 어떤 요소를 클릭해서 어떤 동작을 실행시키는 등
사용자가 직접 액션을 취하고 그 값을 서버에 전달하는 경우 존재
ex) 회원가입, 개인 정보 선택 등

폼 요소 : 서버에 데이터를 전달하기 위한 요소

input 요소

• 내용이 없는 빈 요소
• 인라인 레벨 요소
• type 속성의 값에 따라서 여러 종류의 입력 양식으로 나타난다.

type="text"

• id, 이름, 주소, 전화번호 처럼 직접 텍스트를 입력하는 경우에 사용
• placeholder 속성 존재.
  • 사용자가 값을 입력하기 전에 미리 placeholder의 속성값 내용이 노출된다
  • 사용자가 입력하면 사라지게끔 만들어서 마치 양식 가이드처럼 활용할 수 있다

아이디: <input type="text" placeholder="영문으로만 써주세요">

type="password"

• 암호를 입력받는 용도
• 화면에는 type="text"와 동일해 보이지만 값을 입력할때 노출이 되지 않음.
• 서버에 전달할때만 입력한 값이 넘어감

<input type="password">

type="radio"

• 하나만 선택가능한 선택지.
• 다른 하나를 선택하면 다른 하나는 자동으로 취소되는 상호배타적인 항목들 사이에 쓰는 타입
• name 속성
  • 같은 성격의 radio 버튼임을 명시해야함
  • radio가 여러개 나올 수 있으므로 name으로 명시하지 않으면 브라우저는 서로 상호배타적인 관계임을 확인할 수 없다

<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자

type="checkbox"

• 중복으로 선택가능함
• radio와 마찬가지로 name속성을 이용해서 값을 묶어줘야 실제 값이 전달될 때 잘 구분돼서 전달된다

<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby" checked> 운동

• radio, checkbox는 checked라는 속성 존재
• 값이 없는 형태이다. boolean 속성
• 속성이 존재하면 그것만으로 true, 참이되고 속성이 없으면 거짓, false가 되는 동작
• 해당 속성이 존재하면 사용자가 체크를 하거나 선택하지 않더라도 미리 기본값으로 체크된 상태로 나오게끔 하는 속성

type="file"

• 내 컴퓨터에 있는 파일들을 서버에 올릴때 사용하는 타입
• 본인 프로필 이미지 등록, 게시물의 첨부파일을 올릴때 사용

<input type="file">

---

image, submit, reset, button 모두 클릭이 가능한 버튼을 만들어주는 타입

type="submit"

• 값을 제출, 전송하는 버튼
• 값이 서버로 전송됨

type="reset"

• 값을 초기화하는 버튼
• 값을 초기상태로 변경하는 동작. 값을 전달하거나 하지 않음

type="button"

• 아무런 기본동작도 주어지지 않는 버튼
• 개발자가 직접 커스텀해서 기능을 추가해주어야할때 사용하는 타입

submit, reset, button type모두 value 속성으로 버튼 이름 변경 가능

type="image"

• submit 버튼과 동일하게 값을 전송하는 동작
• 버튼의 모양에 이미지를 삽입할 수 있다
• src 속성과 alt 속성이 반드시 필요. width, height속성도 가능

<form action="./test.html">
    메시지: <input type="text" name="message"><br>
    <input type="submit" value="전송">
    <input type="reset" value="취소">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="버튼">
</form>

---

select 요소

• 선택목록상자, 콤보 박스
• 몇개의 선택지를 노출시키고 그중 하나를 선택하게끔 하는 요소

<select>
    <option>서울</option>
    <option>경기</option>
    <option>강원</option>
    ...
</select>

• <select>태그의 자식으로 <option>태그가 들어감
• <option>태그에 각 항목을 넣으면 된다
• <option> 태그 속성 : selected
  radio, checkbox의 checked와 동일한 기능

---

TEXTAREA 요소
사용자에게 여러줄의 텍스트를 입력받고자 할때 사용되는 태그

type="text"는 한줄만 입력가능했음

<textarea rows="5" cols="30" placeholder="자기소개는 짧게 해주세요">
    ...
</textarea>

• 박스의 크기를 조절하는 속성 -> cols, rows 속성
  • cols 속성값
    : 한줄에 표현되는 글자수. 영문기준이기 때문에 한글로는 정확하지 않을 수 있다
  • rows 속성값
    : 한번에 보일 글자의 라인 수
• placeholder 속성 가능

---

BUTTON 요소
사용자가 클릭가능한 버튼을 만들어줌

• type속성 값으로 submit, reset, button 3가지 존재
• button과 input type의 요소들은 모두 각각 같은 역할을 하는 type들이다.
• 차이점
  • input type들은 다 빈태그였지만 button은 아님
  • button태그는 안에 내용을 직접 넣을 수 있기 때문에 스타일적인 측면에서 좀 더 자유로운 표현이가능함.
    (input type="image" 대신 button요소에 image 요소를 넣으면 됨)

<button type="submit|reset|button">버튼이름</button>

---

지금까지 폼 요소들은 사용자가 값을 입력하는 폼 요소들
이제부터는 외적인 폼 관련 요소들

LABEL 요소
폼 요소와 연결해주기 위함으로 사용됨

웹 접근성 향상에 도움이 되므로 필수적으로 선언해야함

• 연결해주고자 하는 폼 요소의 id 속성값과 해당 label요소의 for속성의 값을 동일하게 적어야함.
• label요소를 사용하면, 요소의 이름부분 즉 label을 클릭하면 해당 폼 요소를 클릭한것처럼 동작함.

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

이름:

이름:

이름:

'이름'을 클릭하면 폼 요소를 클릭한것처럼 입력 필드에 초점이 간다.

radio, checkbox에서는 label요소를 항목마다 주어야함

성별: <label for="male">남자</label><input type="radio" name="gender" id="male" checked>,<label for="female">여자</label><input type="radio" name="gender" id="female"> 

성별: 남자,여자

---

FIELDSET, LEGEND요소
폼 요소들을 구조화하기 위해 필요한 태그들

<fieldset> 태그 : 폼 요소를 그룹화해주는 태그
<legend> 태그 : fieldset 태그로 묶인 그룹의 이름을 지정해주는 태그

• <legend> 태그를 쓸때에는 fieldset 요소에 가장 먼저 자식으로 선언이 되어야한다.
• <fieldset> 태그로 폼을 그룹화할때에는 보통 폼의 성격에 따라서 구분함.
  • 회원가입을 할때 필수로 입력받는 부분/부가적으로 입력받는 부분
  • 이벤트 페이지 에서 이벤트를 응모하는 부분/개인정보를 입력하는 부분

<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>
<fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
</fieldset>

---

<form>태그
폼 요소들을 가장 크게 감싸주는 태그

fieldset 요소까지 다 감싼다.
form 요소들의 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 중요한 태그

데이터를 묶는다
: 어떤 페이지의 좌측에는 어떤 게시글을 입력할 수 있는 부분, 우측에는 이벤트 페이지가 있다고 할때, 게시글을 입력하고 전송버튼을 눌렀을때 이벤트 입력 양식까지 값이 서버로 전송되면 안됨.
이벤트 폼 요소에 제대로 값이 입력되지 않았기 때문에 오류가 발생할 수 있고, 값들이 처리되는 개발 로직이 다르기 때문에 값을 보내야하는 위치도 완전히 다르다.
원하는 폼들의 값만 서버로 전송을 해야하는데, 이때 form태그를 이용해서 두 영역을 구분지어주면 원하는 폼 요소들의 값만 서버로 전송을 할 수 있다.

action 속성

폼 데이터를 처리하기 위한 서버의 주소가 들어감
값이 전송되면 action 속성에 적혀있는 위치로 값을 던져주게 된다.

method 속성

값을 전송할때 어떤 방식으로 전송할지를 지정해주는 속성. get/post두가지 방법 존재

• get
  보낸 값들이 url에 붙어서 전송이 됨
  민감한 정보를 다루는 포맷에는 사용하면 안됨. 회원가입, 로그인 정보 등
• post
  url에 표시되지 않음

<form action="/result.html" method="get">
    <fieldset>
        <legend>기본 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
    <fieldset>
        <legend>부가 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
</form>

<form> 태그는 값, 데이터를 다루는 부분이므로 서버개발자가 제어하는 경우가 훨씬 많다.