HTML(5)

이현주·2023년 8월 21일
html5

web-frontend

목록 보기
1/26

주석

<!--HTML 주석-->

01 basic

HTML

  1. HyperText Markup Language
  2. 하이퍼텍스트(링크)
  3. 태그(Tag) 로 구성된다.
    1) 기능이 정해져 있는 약속된 태그만 사용할 수 있다.
    2) 시작 태그 </tag>와 종료 태그</tag>로 구성된다.
    3) 나 홀로 태그(단독 태그)도 있다. </tag> 또는 <tag/>
    4) 모두 소문자로 작성한다.
    5) 계층 구조(부모-자식)를 가진다
  4. 태그 형식
    1) <태그이름 속성="값" 속성="값" 속성="값"></태그이름>
    2) <태그이름 속성="값" 속성="값" 속성="값"/>
  5. 태그요소
    1) 태그가 적용되는 범위를 의미한다.
    2) 블록 요소 : 해당 요소의 블록(라인 전체)에 적용되는 태그 ,자동으로 줄바꿈 된다.
    3) 인라인 요소 : 해당 요소의 인라인(요소 자체)에 적용되는 태그

HTML 기본구조

  1. 선언부 :<!DOCTYPE html> 또는 <!doctype html>
  2. <html> 태그 : 문서의 모든 내용을 포함하는 최상위 태그
  3. <head> 태그 : 각종 헤더값을 설정하는 태그
  4. <body> 태그 : 문서의 본문 내용을 포함하는 태그 
 <!DOCTYPE html>
 <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!--(과거 :인터넷 익스플로러 → 현재:엣지 ) 인터넷 익스플로러를 엣지로 바꿔서 열어라.-->
    <meta name ="viewport" content="width=device-width,initial-scale=1.0"> <!--장치에 맞춰서 너비 설정 (반응형 웹에서 필요)-->
    <title> 환영합니다</title>
  </head>
  <body>
  </body>
</html>

줄 바꿈

1)<br> 또는 <br/>
2)원하는만큼 사용할 수 있다.

수평선

1) <hr> 또는 <hr/>
2) 화면의 너비만큼 수평선을 만든다.

엔티티 코드

1) HTML 문서에서 사용하는 특수문자
2) &로 시작하고 ; 으로 끝난다.

    작다(less than)  &lt;
    크다(greater than)  &gt;
    작거나 같다(less than equal)  &le;
    크거나 같다(greater than equal)  &ge;
    앰퍼센드  &amp;
    공백  &nbsp;

제목 태그(heading tag)

   1) 블록 요소
   2) 제목을 만드는 태그이다.
   3) 글자 크기를 조정하고 글자를 굴게 표시한다.
   4) <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

첫번째로 큰 제목(32px)

<h1>첫번째로 큰 제목(32px)</h1>

두번째로 큰 제목

<h2>두번째로 큰 제목</h2>

세번째로 큰 제목

 <h3>세번째로 큰 제목</h3>

네번째로 큰 제목(16px)

 <h4>네번째로 큰 제목(16px)</h4>
다섯번째로 큰 제목
<h5>다섯번째로 큰 제목</h5>
여섯번째로 큰 제목(10px)
<h6>여섯번째로 큰 제목(10px)</h6>

문단 태그(paragraph tag)

1) 블록 요소
2) 문단을 만드는 태그이다.
 <p>여기는 <p>태그입니다.</p>

형식을 갖춘 문단 태그(pre-formatted paragraph tag)

1) 블록요소
2) 문단에 입력된 모든 요소가 그대로 나타난다.
3) 공백 문자 (스페이스 ,줄 바꿈) 을 그대로 나타낼 때 주로 사용한다.
 <pre>여기는 <pre> 태그 입니다. </pre>

ex)

여기는 <pre> 
 		태그입니다.

list

Emmet

  1. 줄여서 입력하면 원래 내용이 완성되는 기능이다.
  2. 줄임말 예시
    1) html:5
    2)ul>li\*5
    3)tr>td\*3

순서가 없는 목록 태그(un-ordered-list tag)

1) 블록 요소
2) 글머리기호를 이요해서 각 목록을 만든다.
3) 형식 

     (1)<ul>태그 : 모든 목록을 포함하는 태그
     (2) <li>태그 : 목록을 구성하는 개별 항목을 나타내는 태그, <ul>태그의 자식태그

4) 글머리기호 종류

     (1)<ul type="disc"> ●
     (2)<ul type="circle"> ○
     (3)<ul type="squre"> ■

예시

 <h1>점심메뉴</h1>
   <ul type="disc">
    <li>짬뽕</li>
    <li>제육덮밥</li>
    <li>우육탕면</li>
    <li>순대국</li>
    </ul>

순서가 있는 목록 태그(ordered list tag)

1) 블록 요소
2) 번호를 이용해서 각 목록을 만든다.
3) 형식

    (1) <ol> 태그 : 모든 목록을 포함하는 태그
    (2) <li> 태그 : 목록을 구성하는 개별 항목을 나타내는 태그 , <ol>태그의 자식태그

4) 번호 종류

      (1) <ol type="1"> :1,2,3,....(디폴트,type 속성 생략 가능)
      (2) <ol type="A"> :A,B,C,....
      (3) <ol type="a"> :a,b,c,....
      (4) <ol type="I"> :I,II,III,....
      (5) <ol type="i"> :i,ii,iii,....

예시

 <h1>다음 중 SELECT문은 어느 언어에 속하는가?</h1>
<ol>
<li>DDL</li>
<li>DML</li>
<li>DQL</li>
<li>DCL</li>
<li>TCL</li>
</ol>
<p>정답:(3)DQL</p>

개요 목록 (description list tag)

1) 블록 요소
2) 항목 이름과 항목 설명을 하나의 목록으로 나타내는 태그이다.
3) 형식

   (1)<dl> 태그 : 모든 목록을 포함하는 태그
   (2)<dt> 태그 : 목록을 구성하는 개별 항목의 이름을 나타내는 태그,<dl> 태그의 자식 태그
   (3)<dd> 태그 : 목록을 구성하는 개별 항목의 설명을 나타내는 태그 ,<dl>태그의 자식 태그

예시

    <h1>영화 밀수</h1>
   <dl>
     <dt>한글명</dt>
     <dd>밀수</dd>
     <dt>영문명</dt>
     <dd>Smugglers</dd>
     <dt>개봉</dt>
     <dd>2023.07.26</dd>
     <dt>상영시간</dt>
     <dd>129분 </dd>
   </dl>

03 text_effect

텍스트 효과 지정하기

  1. 인라인 요소
  2. 블록 전체가 아니라 지정된 인라인 영역에만 적용된다.
  3. 종류
       1) 굵게
     (1)<b></b>          :bold
     (2)<strong></strong>:추천 (strong, 강하게)
   2) 기울임
     (1)<i></i>          : italic
     (2) <em></em>       : 추천(emphasis , 강조)
   3) 밑줄 
     1) <u></u>          : underline
     2)<ins></ins>       : 추천(insert, 삽입된 텍스트)
   4) 취소
     (1) <s></s>         :strikeline
     (2) <del></del>     : 추천 (delete , 삭제된 텍스트)
   5) 기타
     (1) <mark></mark>   :형광펜
     (2) <sup></sup>     :위첨자 (super)
     (3) <sub></sub>     :아래첨자

예시

의미 없는 태그

 
   <p>
    <b>열길 물속은 알아도 한길 사람 속은 모른다!</b>평화롭던 바닷가 망르 군천에 화학 공장이 들어<br>
    오면서 <i>하루 아침에 일자리를 잃은 해녀들.</i> 먹고 살기 위한 방법을 찾던 승부사 <u>'춘자' (김혜수)</u><br>
    는 바다 속에 던진 물건을 건져 올리기만 하면 <s>큰 돈을 벌 수 있다</s>는 밀수의 세계를 
   </p>

의미 있는 태그

   <h4>의미 있는 태그</h4>
   <p>
    <strong>열길 물속은 알아도 한길 사람 속은 모른다!</strong>평화롭던 바닷가 망르 군천에 화학 공장이 들어<br>
    오면서 <em>하루 아침에 일자리를 잃은 해녀들.</em> 먹고 살기 위한 방법을 찾던 승부사 <ins>'춘자' (김혜수)</ins><br>
    는 바다 속에 던진 물건을 건져 올리기만 하면 <del>큰 돈을 벌 수 있다</del>는 밀수의 세계를 
   </p>

출력 결과>>>>

열길 물속은 알아도 한길 사람 속은 모른다!평화롭던 바닷가 망르 군천에 화학 공장이 들어
오면서 하루 아침에 일자리를 잃은 해녀들. 먹고 살기 위한 방법을 찾던 승부사 '춘자' (김혜수)
는 바다 속에 던진 물건을 건져 올리기만 하면 큰 돈을 벌 수 있다는 밀수의 세계를

04 multimedia

이미지

1.인라인 요소
2.형식 

     <img>또는<img/>
  1. 주요속성
    1) alt : 이미지가 없는 경우에 대신 나타나는 텍스트 정보
    2) src : 이미지의 경로를 작성
    (1) 절대경로 : 사용 불가 (주의!)
    (2) 상대경로 : 사용 가능
    1 . 현재 디렉터리 : .
    2. 상위 디렉터리 : ..
    3) width : 이미지 너비 지정 (너비를 조정하면 높이도 자동 조정된다.)
    4) height: 이미지 높이 지정 (높이를 조정하면 너비도 자동 조정된다.)

절대 경로

<img alt="절대경로는 원래 안나옵니다" src="D:\GDJ69\assets\Images\404.jpg"alt="">

상대 경로

D:\GDJ69\webstudy\01_HTML/04_multimedia.html 에서
D:\GDJ69\assets\images\animal1.jpg 이미지 포함하기

D:
  GDJ69              : 상위  상위 디렉터리(../..)
    assets           : 에셋   디렉터리(../../assets)
      image          : 이미지 디렉터리(../../image)
          webstudy   : 상위 디렉터리 (..)
              01_HTML: 현재 디렉터리

이미지 불러오기 예시

 <img alt="여우" src="../../assets/image/animal1.jpg" width="200px">

오디오

  1. 인라인 요소
  2. 형식
      <audio>
        <source src="오디오경로">
      </audio>
  1. audio 태그 주요 속성
    속성명 | 속성값 | 의미
    1) controls | controls | 오디오 컨트롤 패널 생성(재생, 중지, 소리조절 등)
    2) autoplay | autoplay | 오디오 자동 재생
    3) loop | loop | 오디오 반복 재생
    4) muted | muted | 음소거
  2. audio 미디어 타입(MIME)
    1) MP3 : audio/mp3
    2) WAV : audio/wav
    3) OGG : audio/ogg

오디오 파일 불러오기 예시

    <audio controls type="audio/mp3" autoplay>
      <source src="../../assets/audio/t-rex-roar.mp3">
      브라우저가 &lt;audio&gt;태그를 지원하지 않는다면 이 텍스트가 보입니다.
    </audio>

비디오

  1. 인라인 요소
  2. 형식
      <video>
        <source src="비디오경로">
      </video>
  1. video 태그 주요 속성
    속성명 | 속성값 | 의미
    1) controls | controls | 비디오 컨트롤 패널 생성(재생, 중지, 소리조절 등)
    2) autoplay | autoplay | 비디오 자동 재생
    3) loop | loop | 비디오 반복 재생
    4) muted | muted | 음소거
    5) width | 픽셀값 | 비디오 너비
  2. video 미디어 타입(MIME)
    1) MP4 : video/mp4
    2) WEBM : video/webm
    3) OGG : video/ogg
    비디오 파일 불러오기 예시
 <video controls type="video/webm">
    <source src="../../assets/video/flower.webm">
    브라우저가 &lt;video&gt;태그를 지원하지 않는다면 이 텍스트가 보입니다.

05 anchor

링크

  1. 인라인 요소
  2. 형식
 <a href="이동경로"></a>
  1. 주요 속성
    1) href : 이동할 경로를 작성 (특정 파일, 특정 위치, URL 경로 등)
    2) title : 풍선 도움말 (마우스를 가져다대면 나타나는 메시지)
    3) target : 어떤 창으로 이동하는지 작성
    (1) _self : 현재 창으로 이동 (디폴트, target 속성 생략 가능)
    (2) _blank : 새 창으로 이동

이동이 없는 링크 만들기

<p>
 <a href="#">비어 있는 링크</a>
 <br>
 <a href="javascript:void(0)">비어 있는 링크</a>
</p>

특정 파일로 이동하는 링크 만들기

<p>
 <ul>
   <li><a href="./01_basic.html">01_basic.html</a></li>
   <li><a href="../../assets/image/animal1.jpg">animal1.jpg</a></li>
 </ul>
</p>

URL 경로로 이동하는 링크 만들기

<p>
 <ol>
   <li><a href="https://www.google.com/">구글</a></li>
   <li><a href="https://www.naver.com/">네이버</a></li>
 </ol>
</p>

<p>
 <dl>
   <dt>구글</dt>
   <dd>
     <a href="https://www.google.com/">
       <img src="../../assets/image/google.png" width="200px">
     </a>
   </dd>
   <dt>네이버</dt>
   <dd>
     <a href="https://www.naver.com/">
       <img src="../../assets/image/naver.png" width="200px">
     </a>
   </dd>
 </dl>
</p>

특정 위치(id)로 이동하는 링크 만들기

id 속성 : HTML 구성요소를 식별하기 위한 전역 속성으로 같은 문서 내에서는 중복이 없어야 한다.

 <p>
    <ul>
      <li><a href="#title">제목으로 이동</a></li>
      <li><a href="#content">내용으로 이동</a></li>
      <li><a href="#image">이미지로 이동</a></li>
    </ul>
    <h1 id="title">여름</h1>
    <p id="content">
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
      여름은 더워요<br>
    </p>
    <p id="image">
      <img src="../../assets/image/nature2.jpg" width="192px">
    </p>
  </p>

이미지 맵

  1. 이미지의 일부 영역에 링크를 생성할 수 있다.
  2. <img> 태그와 <map> 태그를 이용한다.
  3. 사용 방법
       1) 형식
     <img src="이미지경로" usemap="#맵이름">
     <map name="맵이름">
       <area href="이동할경로" shape="링크모양" coords="링크좌표">
     </map>
   2) shape 속성과 coord 속성
     (1) 사각형 링크 : shape="rect"   coords="시작x, 시작y, 종료x, 종료y"
     (2) 원형 링크   : shape="circle" coords="중심x, 중심y, 반지름"

이미지 맵 활용하기

  <p>
    <img src="../../assets/image/domino.jpg" usemap="#domino_map">
    <map name="domino_map">
      <area href="https://www.dominos.co.kr/" shape="rect" coords="304, 7309, 902, 7429">
      <area href="https://www.instagram.com/" shape="circle" coords="857, 5709, 120">
    </map>
  </p>

06 table

테이블

  1. 블록 요소
  2. 표를 만든다.
  3. 형식
      <table>
      </table>

테이블 구역

  1. 표를 구성하는 3개 구역이 있다.
  2. 모든 구역은 생략할 수 있다. 생략하더라도 <tbody> 태그는 자동으로 사용된다.
  3. 형식
      <table>
      <thead></thead>
      <tbody></tbody> 
      <tfoot></tfoot>
      </table>

행

  1. 테이블의 행을 만든다.
  2. 테이블의 구역마다 행을 만든다.
  3. 형식
        <table>
          <thead>
            <tr></tr>
          </thead>
          <tbody>
            <tr></tr>
            <tr></tr>
            <tr></tr>
          </tbody>
          <tfoot>
            <tr></tr>
          </tfoot>
        </table>

열

1.테이블의 열을 만든다
2. 행을 구성하는 열을 만든다.
3. 형식

       <table>
           <thead>
             <tr>
               <td></td>
               <td></td>
             </tr>
           </thead>
           <tbody>
             <tr>
               <td></td>
               <td></td>
             </tr>
           </tbody>
           <tfoot>
             <tr>
               <td></td>
               <td></td>    
             </tr>
           </tfoot>
       </table>

예시

      <table border="1">
        <thead>
          <tr>
            <td>제품명</td>
            <td>입고</td>
            <td>출고</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>새우깡</td>
            <td>100</td>
            <td>50</td>
          </tr>
          <tr>
            <td>신짱구</td>
            <td>100</td>
            <td>50</td>
          </tr>
          <tr>
            <td>양파링</td>
            <td>100</td>
            <td>50</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>총합계</td>
            <td>300</td>
            <td>150</td>
          </tr>
        </tfoot>
      </table>

셀 병합

  1. <td> 태그에 병합 속성을 추가한다.
  2. 병합 속성
    1) colspan : 열 병합, 좌우 셀을 병합
    2) rowspan : 행 병합 ,상하 셀을 병합

열 병합 : 좌우 셀을 병합

<table border="1">
        <tbody>
          <tr>
            <td>1열</td>
            <td>2열</td>
            <td>3열</td>
          </tr>
          <tr>
            <td>1열</td>
            <td colspan="2">2열</td>
          </tr>
          <tr>
            <td colspan="3">1열</td>
          </tr>
        </tbody>
       </table>

행 병합 : 상하 셀을 병합

<table border="1">
        <tbody>
          <tr>
            <td>1행</td>
            <td>1행</td>
            <td rowspan="3">1행</td>
          </tr>
          <tr>
            <td>2행</td>
            <td rowspan="2">2행</td>  
          </tr>
          <tr>
            <td>3행</td> 
          </tr>
        </tbody>
       </table>
       
       
       <table>
        <tbody>
          <tr>
            <td><img src="../../assets/images/fruit1.jpg" width="214px" alt="베리"></td>
            <td><img src="../../assets/images/fruit2.jpg" width="214px" alt="아보카도"></td>
            <td><img src="../../assets/images/fruit3.jpg" width="214px" alt="바나나"></td>
          </tr>
        <tr>
          <td>1000원</td>
          <td>2000원</td>
          <td>3000원</td>
        </tr>
        <tr>
          <td>베리</td>
          <td>아보카도</td>
          <td>바나나</td>
        </tr>
        </tbody>
       </table>

추가사항

<th>태그
th 태그는 td 태그의 일종으로 [굵게 + 가운데 정렬]이 자동으로 적용된다.

<caption>태그
caption 태그는 테이블의 제목을 만든다.

07 form

입력 상자

  1. 인라인 요소
  2. 형식 
      <input type="종류">
  1. 종류
    1) text : 일반 텍스트(디폴트, type 속성 생략 가능)
    2) password: 비밀번호
    3) number : 숫자
    4) email : 이메일
    5) file : 파일 첨부
    1. 주요속성
      Name | Value | Describe
      1) type | text | 입력 상자의 종류를 작성
      2) size | 정수 | 입력 상자의 크기를 작성
      3) value | | 입력 상자에 입력된 데이터(사용자가 입력한 데이터가 저장되는 속성)
      4) maxlength | 정수 | 입력 상자에 입력할 수 있는 최대 글자 수
      5) readonly | readonly | 읽기 전용
      6) required | required | 필수 입력
      7) disabled | disabled | 사용 금지
      8) placeholder| | 입력 안내 메시지
      9) multiple | multiple | 다중 첨부
      10)name | | 입력 상자의 이름을 작성(Back단에서 인식) 
   <p>
      <input type="text"><br>
      <input type="text" size="20"><br><!-- 기본크기 20 -->
      <input type="text" value="지우지마시오!"readonly="readonly"><br>
      <input type="text" maxlength="5"placeholder="우편번호"><br>     
   </p>
   <p>
    <input type="password"placeholder="비밀번호" maxlength="16"><br>
    <input type="number"min="0",max="100"><br>
    <input type="file" multiple="multiple">
   </p>

다중 행 입력상자

  1. 인라인 요소
  2. 형식
    <textarea> </textarea>
  3. 주요 속성
    Name | Value | Describe
    1)rows | 정수 | 입력 가능한 최대 행의 개수
    2)cols | 정수 | 입력 가능한 최대 열의 개수
<textarea cols="50" rows="5"></textarea>

textarea는 꼭 닫아주는 태그가 있어야함! 생략 불가능

목록 상자

  1. 인라인 요소
  2. 형식
        <select>
          <option>항목1</option>
          <option>항목2</option>
          <option>항목3</option>
        </select>
  1. 주요 속성
    Name | Value | Describe
    1)name | | 입력 상자의 이름을 작성(Back단에서 인식) ,<select> 태그의 속성
    2)value | | 각 항목의 값을 작성(Back단에서 인식) ,<option> 태그의 속성
    3)selected | selected | 기본 선택 항목
     <p>
      <select name="direction" >
        <option value="">방향선택</option>
        <option value="east">동</option>
        <option value="west"selected="selected">서</option>
        <option value="south">남</option>
        <option value="north">북</option>
      </select> 
     </p>

입력 상자 + 목록 상자

1.<input> 태그 +<datalist> 태그
2. 형식

      <input type="text" list="datalist아이디">
       <datalist id="아이디">
          <option>
          <option>
          <option>
       </datalist>
     <p>
        <input type="text" list="domain" placeholder="직접입력 또는 선택">
        <datalist id ="domain">
            <option value="kakao.com"/>
            <option value="gmail.com"></option>
            <option value="naver.com"></option>
        </datalist>
      </p>

단일 선택

  1. 인라인 요소
  2. 여러 항목 중에서 하나만 선택 할 수 있다.
  3. 형식 
    <input type="radio">
  4. 주요 속성
    Name | Value | Describe
    1)name | | 라디오 버튼의 이름을 작성 (Back단에서 인식),모든 라디오 버튼은 동일한 name을 사용해야한다.
    2)value | | 선택한 라디오 버튼의 값을 작성(Back단에서 인식)
    3)checked | checked | 기본 선택 라디오 버튼
   <p>
            <input type="radio"name="gender" value="" checked>선택 안함
            <input type="radio"name="gender" value="male">남자
            <input type="radio"name="gender" value="female">여자
    </p>

다중 선택

  1. 인라인 요소

  2. 여러 항목 중에서 여러 항목을 선택 할 수 있다.

  3. 형식 

    <input type="checkbox">
       4. 주요 속성
         Name        |  Value   | Describe
       1)name        |          | 체크박스의 이름을 작성 (Back단에서 인식),일반적으로 모든 체크박스는 동일한 name을 사용한다.
       2)value       |          | 선택한  체크박스의 값을 작성(Back단에서 인식)
       3)checked     | checked  | 기본 선택 체크박스

	```
<p>
   <input type="checkbox"name="hobbies" value="fitness">운동
   <input type="checkbox"name="hobbies" value="travel">여행
   <input type="checkbox"name="hobbies" value="sns">SNS
 </p>
	```

라벨

  1. 인라인 요소
  2. 라벨을 선택하면 라벨과 연결된 입력 요소(input, textarea, select 등)가 선택된다.
  3. 형식
 <label for="입력요소id">라벨내용</label>
<input type="text" id="아이디">

예시

     <p>
        <input type="radio" name="gender" value="" id="gender_none">
        <label for="gender_none">선택안함</label>
        <input type="radio"name="gender"value="male"id=gender_male>
        <label for="gender_male">남자</label>
        <input type="radio"name="gender"value="female"id=gender_female>
        <label for="gender_female">여자</label>
       </p>
       <hr>
       <p>
        <input type="checkbox"name="hobbies"value="fitness" id="fitness">
        <label for="fitness">운동</label>
        <input type="checkbox"name="hobbies"value="travel" id="travel">
        <label for="travel">여행</label>
        <input type="checkbox"name="hobbies"value="sns" id="sns">
        <label for="sns">SNS</label>
       </p>

폼

  1. 입력 요소(input,textarea,select 등)들을 서버측으로 보내기 위해서 사용한다.
  2. <form> 태그 내부에 서버측으로 보낼 입력 요소들을 배치한다.
  3. <from>태그 내부의 모든 입력 요소들을 서버측으로 보내는 것을 "서브밋(submit)이라고 한다."
  4. 형식
    <form>
    <input>
    <textarea></textarea>
    <select></select>
    <button></button>
    </form>
    5.주요 속성
    Name | Value | Describe
    1)action | | 입력 요소들의 값을 보낼 서버의 경로를 작성
    2)method | GET/POST | 요청 메소드

6. 요청 메소드

1)GET
(1) 디폴트, method 속성 생략 가능
(2) 입력 요소들의 이름(name)과 값(value)을 주소(URL)의 파라미터로 변환하여 전송하는 방식
(3) 처리가 빠르고 보안에 취약하다.
2)POST
(1)입력 요소들을 요청 본문에 포함시켜서 전송하는 방식
(2)처리가 느리고 보안이 우수하다.

버튼 종류

  1. 서브밋
    1) <button type= "submit"> 텍스트 </button>
    2)<input type="submit" value="텍스트">
  2. 일반
    <input type="button" value="텍스트">
    3.초기화
    <input type="reset" value="텍스트">
     <p>
        <form action=" https://www.google.com/search"method="get">
        <input type="hidden" name="sca_esv"value="559020407">
        <input type="text"name="q"placeholder="검색어를 입력하세요">
        <button type="submit">검색</button>
          </form>
    </p>

보충

파일 첨부가 포함됨 form은 method + enctype 필수 작성 

    <form method="post" enctype="multipart/form-data">
profile
이현주
졸려요
다음 포스트

CSS(3버전)

0개의 댓글