35.HTML(2)

LINK

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

### 1. 이동이 없는 링크 만들기
  <p>
    <a href="#">비어 있는 링크</a>     <!-- #은 나중에 넣을 내용. 링크 등 -->
    <br>
    <a href="javascript:void(0)"> 비어 있는 링크</a>
  </p>

  <hr>

### 2. 특정 파일로 이동하는 링크 만들기 
  <P>
    <ul>
      <li><a href="./01_basic.html">01_basic.html</a></li>
      <li><a href="../../assets/images/animal1.jpg">animal1.jpg</a></li>
    </ul>
  </P>
  
###  3. URL 경로로 이동하는 링크 만들기 
  <P>
    <ol>
       <li><a href="https://www.google.com/">구글</a></li> 
       <li><a href="https://www.naver.com/">네이버</a></li>
    </ol>
  </P>
  
### 4. 특정 위치(id)로 이동하는 링크 만들기(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>
    </p>
    <p id="image">
      <img src="../../assets/images/nature2.jpg" width="192px">
    </p>  
  </p>
  
### 5. 이미지 맵 활용하기 

    이미지 맵
    1. 이미지의 일부 영역에 링크를 생성할 수 있다. 
    2. <img> 태그와 <map> 태그를 이용한다. 
    3. 사용 방식
      1) 형식
        <img scr="이미지 경로" usemap="">
        <map name="맵이름">
          <area href="이동할 경로" shape="링크모양" coord="링크좌표">
        </map>  
      2) shape 속성과 coord 속성
        (1) 사각형 링크 : shape="rect" coords="시작x, 시작y, 종료x, 종료y"
        (2) 원형 링크   : shape="circle" coords="중심x, 중심y, 반지름"   
   
  <p>
    <img src="../../assets/images/domino.jpg" usemap="#domino_map"> 
    <map name="domino_map">
      <area href="https://www.dominos.co.kr/" shape="rect" coords="303,7310,903,7430">
      <area href="https://www.instagram.com/iu_leejieun516/" shape="circle" coords="853,5740,118">
    </map>

  </p>

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>
    </tbody>
    <tfoot>
     <tr></tr>
    </tfoot>  
   </table>  

열

1. 테이블의 열을 만든다. 
2. 행을 구성하는 열을 만든다. 
3. 형식
   <table>
    <thead>
     <tr>
      <td></td>   
     </tr>
    </thead>  
    <tbody>
      <tr>
       <td></td>
	  </tr>
      <tr>
        <td></td> 
      </tr>            
     </tbody>  
     <tfoot>
       <tr>
         <td></td>               
       </tr>
     </tfoot>  

셀 병합

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

FORM

입력상자

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

다중 행 입력 상자

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

목록 상자

  1. 인라인요소
  2. 형식
  <select>
    <option>항목1</option>
    <option>항목2</option>
    <option>항목3</option>
  </select>
  3. 주요 속성  
      Name     | Value    | Describe
   1) name     |          | 목록 상자의 이름을 작성 (Back 단에서 인식)  <select> 태그의 속성
   2) value    |          | 각 항목의 값을 작성(Back 단에서 인식), <option> 태그의 속성
   3) selected | selected | 기본 선택 항목

입력 상자 + 목록 상자

 1. <input> 태그 + <datalist 태그>
  2. 형식
    <input type="text" list="datalist아이디">
    <datalist id="아이디">
      <option>
      <option>
      <option>
    </datalist> 

단일 선택

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

다중 선택

1. 인라인 요소 
2. 여러 항목 중에서 여러 항목을 선택할 수 있다.
3. 형식
  <input type="checkbox">
4. 주요 속성
     Name     | Value    | Describe
  1) name     |          | 체크박스의 이름을 작성 (back단 에서 인식), 모든 체크박스는 동일한 name을 사용한다.  
  2) value    |          | 선택한 체크박스의 값을 작성 (back단 에서 인식)
  3) checked  | checked  | 기본 선택 체크박스

라벨

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

폼

    1. 입력 요소(input, textarea, select 등) 들을 서버측으로 보내기 위해서 사용한다. 
    2. <form> 태그 내부에 서버측으로 보낼 입력 요소들을 배치한다. 
    3. <form> 태그 내부의 모든 입력 요소들을 서버측으로 보내는 것을 "서브밋(submit)"이라고 한다. 
    4. 형식
      <form action="서브밋경로" method="GET">
        <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>

<p>

 <form action="https://search.naver.com/search.naver" method="get">
   <input type="hidden" name="ie" value="UTF-8">
   <input type="text" name="query" placeholder="검색어를 입력하세요(naver)">
   <button type="submit">검색</button>
   
 <form action="https://www.google.com/search" method="get">
   <input type="hidden" name="sca_esv" value="559020407">
   <input type="text" name="q" placeholder="검색어를 입력하세요(google)">
   <button type="submit">검색</button>
 </form>

 </form>
</p>

네이버&구글 검색창 만들기

Document

검색 검색