HTML TAG

K00·2022년 8월 25일

html

🔍주석

head
text
Table
form
- text password textarea
- cheked
- buttons
- select

🧢head

<html lang="ko">
<meta name="discription" content="페이지 설명">
<meta="keywords" content="hrml, css, js, xml>
<title>페이지 타이틀</title>

💬text Tag

h1~h6
b - bold
strong - bold style + semantic
i - italic
em - italic + semantic
small - small size text
mark - highlihted text
del - ~~삭제줄~~
ins - added underline
sub/sup - subscripted supscripted
pre
q - 짧은 인용문(quotation)
blockquote - 긴 인용문 write block
abbr - 약어
<abbr title="text"><abbr>
dfn - 단어 정의 나타냄
<dfn title="text"><dfn>
ruby + rt - 글자 위 글자 배치 家和萬事成 가화만사성
<ruby>家和萬事成 <rt>가화만사성</rt></ruby>
hr - 수평줄

🧇table

1. 🥩접근성을 고려한 테이블 구성요소

<table>
    <!-- 테이블 제목 -->
    <caption>
      태블릿 pc와 스마트폰 판매 현황
    </caption>
    <!-- 열 제목을 묶어주기 위해서 
      <colgroup>과 주제 수 만큼<col>사용 -->
    <colgroup> 
      <col />
      <col />
      <col />
    </colgroup>
    <!-- thead안에 열 제목을 넣고 scope속성안에 col 추가  -->
    <thead>
      <tr>
        <th scope="col">구분</th>
        <th scope="col">태블릿</th>
        <th scope="col">스마트폰</th>
      </tr>
    </thead>
    <!-- table 내용 행에 목록 제목이 있다면 th안에 scope row 넣기 -->
    <tbody>
      <tr>
        <th scope="row">상반기 판매수</th>
        <td>2만</td>
        <td>5만</td>
      </tr>
      <tr>
        <th scope="row">하반기 판매수</th>
        <td>3만</td>
        <td>11만</td>
      </tr>
    </tbody>
    <!--통계가 결과가 표에 있다면 사용 꼭사용X -->
    <tfoot>
      <tr>
        <th scope="row">총판매수</th>
        <td>5만</td>
        <td>16만</td>
      </tr>
    </tfoot>
  </table>

2. 🍖테이블_셀 병합 접근성(colgroup , headers)

 <h1>접근서을 높이기 위한 표만들기 (병합성)</h1>
  <h2>colgroup</h2>
  <table>
    <caption>
      상품에 따른 월별 판매 현황1
    </caption>
    <thead>
      <tr>
        <th rowspan="2" scope="col">구분</th>
        <th colspan="3" scope="colgroup">상품종류</th>
      </tr>
      <tr>
        <th scope="col">스마트폰</th>
        <th scope="col">태블릿</th>
        <th scope="col">데스크탑</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1월</th>
        <td>5만대</td>
        <td>3만대</td>
        <td>1만대</td>
      </tr>
    </tbody>
  </table>
===================================================
  <h2>id, headers</h2>
  <table>
    <caption>
      상품에 따른 월별 판매 현황1
    </caption>
    <thead>
      <tr>
        <th rowspan="2" id="division">구분</th>
        <th colspan="3" id="product">상품종류</th>
      </tr>
      <tr>
        <th headers="product" id="smartphone">스마트폰</th>
        <th headers="product" id="tabletpc">태블릿</th>
        <th headers="product" id="pc">데스크탑</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th headers="division" id="month">1월</th>
        <td headers="product smartphone">5만대</td>
        <td headers="product tabletpc">3만대</td>
        <td headers="product pc">1만대</td>
      </tr>
    </tbody>
</table>

💦form

📌form 관련 태그

1. form✍

attribute
- action : url
- method : get/post
- name : 변수명 (form Action에 해당하는 url로 전송하는 param사용 중복 가능)**
- autocomplate : on/off
fildset
- <form>안에 여러 요소들을 그룹화 할때 사용
- 그룹 제목으로 <legend> 포함

2. label✍

사용이유 : 접근성높은 온라인 서식을 만들 수 있다.

사용 방법 :

//1.
<label for="Aname">이름</label>
<input type="text" id="Aname">
====================================
//2.
<label>이름<input type="text"></label>

3. ID와 tag의 연결 정리✍

(tag)ID 💨 a(href="#id")
(table 부모th)ID 💨 headers(자식 td,th = table접근성)
(input)ID 💨 for(label)
(datalist)ID 💨 list(input)

📌input tag

1. text , password✍

attribute
- name :
- value :
- size : num
- maxlength : length
- placehorder : text

1-1. textarea✍

attribute
- name :
- cols : num
- rows : num
- placehorder : text

2. checked (radio , checked)✍

attribute
- name** : radio(같은 주제끼리 같은값으로) checkbox(같은주제도 다른 값으로)
- value (radio만) : 전송할 값을 지정(eng) checbox(value속성X)
- checked

radio // checkbox 차이점**

같은 카테고리 끼리 위 태그를 만들때
radio : 같은 name="" 속성 으로 선언 // value속성이 있음
checkbox: 다른 name="" 속성 으로 선언 // value속성이 없음(자체 내장)

   <lable><input type="radio" name="job" value="student" checked />학생</lable>
   <lable><input type="radio" name="job" value="professor" />교사</lable>
   <lable><input type="radio" name="job" value="job" />공무원</lable>

   <h2>checkbox</h2>
   <lable><input type="checkbox" name="d" checked />강아지</lable>
   <lable><input type="checkbox" name="f" />관상어</lable>
   <lable><input type="checkbox" name="c" />고양이</lable>

3. file(첨부상자)✍

4. buttons(submit , reset , button, image)✍

attribute

value : 버튼위에 text

    <h2>submit reset</h2>
  <input type="submit" value="전송" />
  <input type="reset" value="초기화" />
  <input type="button" value="확인" />
  <input type="image" src="./images/search.jpg" alt="cbtn" />

5. select✍

attribute
- size : num
- name
- multiple : 다중선택이 가능해짐

5-1 optgroup✍

a. 목록이많을경우 관련있는 것들끼리 묶어줌 그룹이름은 목록 펼치면 가장상단에 제목으로 지정됨

attribute
- lablel : 그룹이름

5-2 option✍