[230822] 링크, 테이블, 입력 상자, 목록 상자, 선택, 라벨, 폼 (DAY 35)

MJ·2023년 8월 22일
html

수업 TIL🐣💚

목록 보기
35/68

링크

  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/image/animal1.jpg">animal1.jpg</a></li>
    </ul>
  </p>

  <hr>

  <!-- 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 속성 : 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/image/nature2.jpg" width="192px">
    </p>
  </p>

<!-- 5. 이미지 맵 활용하기 -->
  <!--
    이미지 맵
    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>


이미지 맵 활용해서 주문하러가기 부분 누르면 주문 창으로 이동하게 구현

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

value와 표시할 데이터 똑같으면 데이터 생략 가능

        <option value="kakao.com"/>
        <option value="gmail.com"/>
        <option value="naver.com"/>

표시 데이트 없으면 닫는 태그없이 사용가능

테이블

  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>
          <tr>
            <td></td>
            <td></td>
          </tr>
          <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>

입력 상자

  1. 인라인 요소
  2. 형식
    <input type="종류">
  3. 종류
    1) text : 일반 텍스트 (디폴트, type 속성 생략 가능)
    2) password : 비밀번호
    3) number : 숫자
    4) email : 이메일
    5) file : 파일 첨부
  4. 주요 속성

다중 행 입력 상자

  1. 인라인 요소
  2. 형식
    <textarea></textarea>
  3. 주요 속성

목록 상자

  1. 인라인 요소
  2. 형식
      <select>
        <option>항목1</option>
        <option>항목2</option>
        <option>항목3</option>
      </select>
  1. 주요 속성

입력 상자 + 목록 상자

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

단일 선택

  1. 인라인요소
  2. 여러 항목 중에서 하나만 선택할 수 있음
  3. 형식
        <input type="radio">
  1. 주요 속성

다중 선택

  1. 인라인 요소
  2. 여러 항목 중에서 여러 항목을 선택할 수 있다.
  3. 형식
      <input type="checkbox">
  1. 주요 속성

라벨

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

글씨 선택해도 라벨 선택창 체크되는 거

        <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>

선택안함, 남자, 여자라는 글씨 선택해도 체크됨

폼

  1. 입력 요소(input, textarea, select 등)들을 서버측으로 보내기 위해서 사용한다.
  2. <form> 태그 내부에 서버측으로 보낼 입력 요소들을 배치한다.
  3. <form> 태그 내부의 모든 입력 요소들을 서버측으로 보내는 것을 "서브밋(submit)"이라고 한다.
  4. 형식
          <form action="서브밋경로" method="GET">
            <input>
            <textarea></textarea>
            <select></select>
            <button></button>
          </form>
  1. 주요 속성
  2. 요청 메소드
    1) GET
    (1) 디폴트, method 속성 생략 가능
    (2) 입력 요소들의 이름(name)과 값(value)을 주소(URL)의 파라미터로 변환하여 전송하는 방식
    (3) 처리가 빠르고 보안에 취약
    2) POST
    (1) 입력 요소들을 요청 본문에 포함시켜서 전송
    (2) 처리가 느리고 보안에 우수

버튼

  1. 서브밋
    1) <button type="submit">텍스트</button>
    2) <input type="submit" value="텍스트"> (1과 2는 서로 동일한 것)
  2. 일반 (이걸 누르면 이 일(JS로 만듦)을 할꺼야 라고 할 일 직접 지정할 때 사용 = 서브밋 이외의 용도에는 모두 일반 버튼 사용)
    <input type="button" value="텍스트">
  3. 초기화
    <input type="reset" value="텍스트">
profile
MJ
이전 포스트

[230821] HTML 구조, 태그, 텍스트 효과, 멀티미디어(DAY 34)

다음 포스트

[230823] CSS 개요, 텍스트 효과, 블록 인라인 요소, 벤더 프리픽스, 구글 폰트, font awesome, id와 클래스, 선택자, 의사요소 (DAY36)

0개의 댓글