form : 사용자가 웹 사이트로 정보를  보낼 수 있게 해준다.

예시) 사용자가 입력한 데이터를 폼을 통해 웹 서버로 전송하고 DB를 통해 결과를  웹 브라우저로 전송

method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정

• get : request가 일어날 시 필요한 데이터를 body에 담지 않고 쿼리스트링(주소의 ?다음부분)으로 요청을 한다, 보통 사이트의 정보를 가져올 때 사용
• post : 리소스를 변경/생성 하기위한 요청으로 데이터를 body에 담아서 전송한다.

<label> : <input>과 같이 옆에 레이블역할을 한다, <label for="name"> <input id="name">와 같이 연결을 해준다.

<form action="">
    <label for="name">이름</label>
    <input type="text" name="name" id="name">
    <label for="password">비밀번호</label>
    <input type="password" name="password" id="password">
    <button>클릭</button>
</form>

<input> : 사용자의 입력을 받기위한 태그, 여러가지 타입,속성이 있다.

• text : 한 줄짜리 텍스르를 입력
• password : 비밀번호 입력
• check : 주어진 항목에서 2개 이상 선택
• radio : 주어진 항목에서 하나만 선택
• sumit : form의 전송 버튼
• reset : form의 리셋 버튼
• name : 서버로 제출된 데이터를 참조, 자바스크립트에서 요소를 참조할 때 사용

value : 전송을 할 때 서버로 넘어가는 값

<form>
    <label ><input type="checkbox" value="s1">선택1</label>
    <label ><input type="checkbox" value="s2">선택2</label>
    <label ><input type="checkbox" value="s3">선택3</label>
    <br>
    <label><input type="radio" name="s4">선택4</label>
    <label><input type="radio" name="s4">선택5</label>
</form>

표(table)는 행(row)와 열(column) 그리고 cell로 구성되어 있다.

<table> : 테이블을 만든다

<caption> : 테이블의 제목을 표시한다

<tr>: 행을 구성한다

<td> , <th>  : 열을 구성한다, 보통 첫번째 <td> 데이터의 제목을 나타내서 굵게 표시해주는 <th>를 사용

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

<rowspan> : 행을 합쳐준다

<colspan> : 열을 합쳐준다

See the Pen Untitled by 현기원 (@wmqjxnua-the-scripter) on CodePen.

순서 있는 목록을 만드는 <ol>, <li> 태그

<ol> : ordered list의 줄임말로 <ol> 안에 <li>태그를 작성해서 목록을 만들 수 있다.

<ol>
    <li>목록1</li>
    <li>목록2</li>
    <li>목록3</li>
    <li>목록4</li>
</ol>

1. 목록1
2. 목록2
3. 목록3
4. 목록4

<ol> 태그은 기본적으로 1.2.3....이지만 type을 바꿔 변경 가능

<ol type="a">
    <li>목록1</li>
    <li>목록2</li>
    <li>목록3</li>
    <li>목록4</li>
</ol>

1. 목록1
2. 목록2
3. 목록3
4. 목록4

a/A : 영문 소/대문자, i/I : 로마 숫자 소/대문자

순서 없는 목록을 만드는 <ul>, <li> 태그

<ul> : unordered list의 줄임말로 <ol> 안에 <li>태그를 작성해서 목록을 만들 수 있다.

<ul>
    <li>목록1</li>
    <li>목록2</li>
    <li>목록3</li>
    <li>목록4</li>
</ul>

• 목록1
• 목록2
• 목록3
• 목록4

텍스트 입력하기

<hn> : 다른 텍스트보다 크고 진하게 표시해서 보통 제목으로 사용한다.

    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <h4>제목4</h4>
    <h5>제목5</h5>

제목1

제목2

제목3

제목4

제목5

<p> : 텍스트 단락을 만든다

<br> : 줄을 바꾼다.

<p>복습하면서 블로그에 코드를 작성중입니다.</p>
<p>HTML,CSS,JS는 기본적으로 다루자!!!!</p>

복습하면서 블로그에 코드를 작성중입니다.

HTML,CSS,JS는 기본적으로 다루자!!!!

<p>복습하면서 <br>블로그에 코드를 작성중입니다.</p>
<p>HTML,CSS,JS는 <br>기본적으로 다루자!!!!</p>

복습하면서
블로그에 코드를 작성중입니다.

HTML,CSS,JS는
기본적으로 다루자!!!!

<strong>, <b> : 특정 텍스트를 굵게 표시한다.

<p>이제 인터넷을 단순히 <b>정보만</b> 제공하는 매체나 쇼핑하는 <strong>공간</strong>으로 생각하는 시대는 지났다.</p>

이제 인터넷을 단순히 정보만 제공하는 매체나 쇼핑하는 공간으로 생각하는 시대는 지났다.

시멘틱 태그 :  그 이름만 봐도 의미를 알 수 있는 태그

시멘틱 태그를 사용하지 않더라도 웹 문서에 문제는 없지만 소스 코드만 보고도 이해하고 내용을 정확히 찾기위해 사용

<header> : 헤더영역을 나타내는 태그

<header>
        <div id="logo">
            <a href="#"><h1>Dream Jeju</h1></a>
        </div>
</header>

<nav> : 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크

             보통 헤더나 푸터, 사이드 바 안에 포함하거나 독립해서 사용한다.

<nav>
    <ul id="topmenu">
        <li><a href="#">단체 여행</a></li>
        <li><a href="#">맞춤 여행</a></li>
        <li><a href="#">갤러리</a></li>
        <li><a href="#">문의하기</a></li>
    </ul>
</nav>

<main> : 웹 문서에서 핵심이 되는 내용을 넣는다.

<article> : 신문이나 잡지의 기사처럼 웹에서 실제로 보여 주고 싶은 내용을 넣는다.

<section> : 웹 문서에서 콘텐츠 영역을 나타낸다.

<main class="contents">
    <section id="headling">
        <h2>section 구역입니다!!!!!</h2>
    </section>
    <section id="activity">
        <h2>section 구역입니다!!!!!!</h2>
    </section>
</main>

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

<footer> : 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다.

<footer>
    <div id="bottom">
        <ul>
            <hr>
            <li><a href="#">회사 소개</a></li>
            <li><a href="#">개인정보처리방침</a></li>
            <li><a href="#">여행약관</a></li>
            <li><a href="#">사이트맵</a></li>
        </ul>
    </div>
</footer>