본문 바로가기

Python_WEB/HTML

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>


반응형

'Python_WEB > HTML' 카테고리의 다른 글

HTML5 - 190603 Basic Study 9(Fieldset Page)  (0) 2019.06.03
HTML5 - 190602 Basic Study 8(Note)  (0) 2019.06.02
HTML5 - 190602 Basic Study 7  (0) 2019.06.02
HTML5 - 190602 Basic Study 6(Membership page)  (0) 2019.06.02
HTML5 - 190602 Basic Study 5  (0) 2019.06.02
HTML5 - 190602 Basic Study 4  (0) 2019.06.02