HTML5 - 190602 Basic Study 7

1. HTML5 신규 그림 캡션

<figure>
   <img src="img/1.png" width="200" height="200" alt="대체텍스트" title="풍선도움말">
   <img src="img/2.png" width="200" height="200" alt="대체텍스트" title="풍선도움말">
   <img src="img/3.png" width="200" height="200" alt="대체텍스트" title="풍선도움말">
    <figcaption>그림에 대한 캡션</figcaption>
</figure>

2. HTML5 신규 요약 정보

<details>
   <summary>아이폰으로 용돈벌기</summary>
      <ul>
         <li>출판사 : 아이콕스</li>
         <li>저자 : 정창훈</li>
         <li>가격 : 25,000원</li>
         <li>출간일 : <time datetime="2012-05-25">2012년 5월 25일</time></li>
      </ul>        
</details>

3. HTML5 신규 진행 표시줄(움직임)

<p>다운로드 진행 : <progress max=“100”><span>0</span>%</progress></p>

4. HTML5 신규 진행 표시줄(고정)

<p>현재 투표 진행상황: <meter min="0" max="100" value="20" low="30" high="65" title="percent">20%</meter></p>
<p>현재 투표 진행상황: <meter min="0" max="100" value="60" low="30" high="65" title="percent">60%</meter></p>
<p>현재 투표 진행상황: <meter min="0" max="100" value="70" low="30" high="65" title="percent">70%</meter></p>

5. range 입력

<form onClick="결과.value=입력.value">
    <input type="range" name="입력">
    <output name="결과"></output>점
</form>

6. 그림 그리는 태그

<svg height="250" width="500">
  <polygon points="220,10 300,210 170, 250 123,234" style="fill:lime;stroke:purple;strole-width:1"/>
</svg>

<svg width="7000" height="300">
   <rect width="700" height="300" fill="red"></rect>
   <circle cx="350" cy="150" r="100" fill="orange"></circle>
</svg>

7. 자동 들여쓰기 / 인용 구문

<blockquote>
글자가 자동 들여쓰기 된다.
</blockquote>
<q> 인용구문 </q>

8. 이미지에서 특정 구역 누를시 이동 태그

<img src="img/4.png" width="500" height="500" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="190,62,396,151" href="http://www.naver.com">
  <area shape="rect" coords="135,225,422,340" href="http://www.daum.net">
</map>

9. box 와 span 차이

<div style="width:100px;height:100px;background:red;margin:5px">박스1</div>
<div style="width:100px;height:100px;background:red;margin:5px">박스2</div>
<div style="width:100px;height:100px;background:red;margin:5px">박스3</div>
<span style="background:blue;margin:5px">글자1</span>
<span style="background:blue;margin:5px">글자2</span>
<span style="background:blue;margin:5px">글자3</span>