html5 태그 정리

<!--

★텍스트 태그

<h1~6> 제목 태그 </h1~6>
 
<p>단락 태그 </p>

<br> 줄바꿈

<hr> 가로 줄 생김

<blockquote> 인용 문구 작게 삽입 </blockquote>

<q> "표로 단락안에 인용문구 표시 </q>

<pre> 입력한 그대로 화면 표시 </pre>

<strong> 굵게 강조할 텍스트 </strong>

<b> 굵게 표시할 텍스트 </b> strong 는 내용도 중요 b는 단순히 글자만 강조

<em> 이탤릭체로 강조할 텍스트 </em>

<i> 이탤릭체로 표시할 텍스트 </i>

<mark> 형광펜 효과 </mark>

<span> 단락안에서 영역 묶어 효과 </span>

<ruby> 글자 밑에 주석 달기 태그 <rt>주석</rt></ruby>

================================================================

★목록태그

  ●순서 없는 목록

<ul>

      <li>목록1</li>

      <li>목록2</li>

</ul>

  ●순서 있는 목록

<ol type="1,a,A,i,I">

       <li>1.목록</li>

       <li>2.목록</li>

</ol>

  ●설명 목록 만들기 

<dl>

     <dt>제목</dt>

     <dd>설명</dd>

</dl>

================================================================

★표만들기

<table border="1">

  <tr>행

    <th>굵게열</th>

    <td>열</td>

  </tr>

</table>

<td colspan="합칠 열의 개수">,<th conspan="합칠 열의 개수">

<td rowspan="합칠 행의 개수">,<th rowspan="합칠 행의 개수">

<caption> 표의 제목</caption> ; 가운데 제목이 위치

<figcaption> 표의 제목</figcaption> ; <table></table>의 앞뒤로 위치시킴

<col>,<colgroup> 여러 열 묶어 스타일 지정하기 </col>,</colgroup>

================================================================

★이미지 삽입

<img src="이미지주소" width="너비" height="높이" alt="이미지설명">

<figure> 설명글을 붙일 대상지정

<figcaption> 설명글 붙이기

ex)

<figure>
    <img src="주소" art="사진">
    <figcaption>사진에대한 설명</figcaption>
</figure>

================================================================

 

​

​★영상 삽입

<video width="너비" height="높이" controls >
<source src="동영상주소" >
<track kind="subtitle: src="자막주소" srclang="ko" label="korean" >

========================================================================

★링크 만들기

<a href="주소" target="?" , download ,rel , hreflang , type ,>

        download :링크한 내용을 다운로드
        rel           :현재문서와 링크한 문서와의 관계
        hreflang    :링크한문서의 언어지정
        type         :링크한 문서의 유형을 알려줍

target="_blank"   : 새창이나 새탭
          "_self"     : 링크가있는화면, 기본값 생략가능
          "_parent" : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시
          "_top"     : 프레임을 사용했을 때 링크 내용을 새탭의 전체화면에 표시

<태그 id="임의아이디">가나다라</태그>
<a href="#임의아이디">이동함</>            : 임의 아이디 위치로(가나다라) 이동함

  

●이미지 영역별 링크 걸기(예제)
 <img src="이미지파일주소" alt="이미지파일설명" usemap="#eventmap">
 <map name="eventmap">
    <area shape="circle" coords="230,295,40" href="http://www.woobi.org" alt="홈 페이지로 가기" target="_blank">          (원영역)
    <area shape="rect" coords="475,1524,704,1653" href="http://naver.woobi.org" alt="네이버 우비" target="_blank">       (사각영역)
    <area shape="rect" coords="475,1747,703,1882" href="http://tistory.woobi.org" alt="티스토리 우비" target="_blank">
 </map>

================================================================

★폼 만들기
<label 속성="속성값">레이블<input ....></label>
OR
<label for="id이름">
 <input id="id이름" 속성="속성값">
</label>

<fieldset>                                 : 하나의 폼안에 여러 구역을 나눠서 표시
    <legend>개인정보</legend>    : 태그로 묶은 그룹의 외곽선을 표시   
 <ul>
    <li>
     <label for="name">이름</label>    : 입력창옆에 쓰여진 텍스트(label사용시 텍스트를 클릭해도 체크박스에 체크됨)
     <input type="text" id="name">         : 입력항목을 만듬 (입력박스)
    </li>
    <legnd>로그인정보</legend>
           .............
           .............
 </fieldset>

●자동완성기능

<태그="속성" autocomplete="on"> autocomplete는 자동완성기능

●<input type="?(유형)">
?= text     : 텍스트필드                   

    datetime-local      : 사용자가 있는 지역을 기준으로 날짜와 시간
    password             : 비밀번호 입력필드       

    hidden                : 보이지 않지만 서버로 넘겨주는 값
    email                  : 이메일 주소 입력 필드     

    search                 : 검색상자
    tel                      : 전화번호                     

    url                      : URL주소를 입력할 수 있는
    radio                   : 여러 항목중 하나를 선택하는 버튼  

    datetime              : 국제표준시(UTC)기준으로 날짜와 시간
    checkbox             : 여러 항목 모두를 선택 할 수 있는 버튼 

    date                    : 사용자 기준으로 날짜
    submit                 : 서버 전송 버튼    

    time                    : 사용자 기준으로 시간
    number                : 숫자를 조절할 수 있는 화살표  

    range                   : 숫자를 조절할 수 있는 슬라이드 막대
    color                    : 생상표를 넣습니다.   

     file                     : 파일을 첨부할 수 있는 버튼
    image                  : submit버튼 대신 사용할 이미지를 넣음 

    botton                 : 버튼을 넣습니다.
    reset                    : 리셋 버튼

input 속성

   autofocus     : 입력 커서 표시
   placeholder  : 힌트표시 입력하면 없어짐
   readonly      : 읽기 전용 필드
   required      : 필수 입력 필드 지정
   step            : 숫자의 일정간격 변경
   minlength    : 최소입력 값
   maxlength    : 최대입력 값

●드롭다운 목록 <select>,<optgroup>,<option>

<label class="reg" for="class">선택목록</label>     multiple = 여러개 선택 가능하게
<select size="숫자" id="class" multiple>                숫자=드롭다운에 표시될 항목 개수
 <optgroup label="목록1">                                optgroup = 옵션끼리 묶기
  <option value="archi">목록2</option>              option = 나열될 항목
  <option value="indust">목록3</option>
     .
     .
     .
 </optgroup>
</select>

●예제선택 자동 입력 <datalist>

<input type="text" id="id" list="choices">
<datalist id="choices">
 <option value="입력되는단어1" label="라벨1"></option>
 <option value="입력되는단어2" label="라벨2"></option>
    .
    .
</datalist>

●텍스트영역만들기<textarea>

<textarea name="텍스트영역이름" cols="가로너비(표시될문자개수)" rows="세로표시될 줄수">

●버튼태그 <button>

<button type="?">내용</button>

?= submit : 폼을 서버로 전송

 = reset  : 폼의 내용을 초기화

 = button : 버튼의 형태만 있을뿐 자체 기능 없음

●계산태그 <output 속성="속성값">내용</output>

●진행상태 태그 <progress>

 <ul>
   <li>
    <label>10초남음</label>
    <progress value="50" max="60"><progress>  :60초중 50초 진행
   </li>
 <ul>

●값이 차지하는 크기 태그 <meter>

 <meter min="100" max="1000" low="200" high="800" value="900"></meter>

 = min, max : 최솟 값과 최댓값 정의하지 않으면 0과1로 간주
   low      : 이 정도면 낮다 라고 할 정도의 값을 지정
   high     : 이 정도면 높다 라고 할 정도의 값을 지정
   optimum  : 이 정도면 적당하다 라고 할 정도의 값
   value    : 차지하는 값을 지정

-->