🐧meter
📌meter 태그 : 값을 제공받아 백분율로 변환한 이미지로 출력하기 위한 태그
🌠value 속성 : 태그의 저장값을 속성값으로 설정
🌠max 속성 : 태그의 최대값을 속성값으로 설정
<p>1번 후보 : <meter value="60" max="100" style="width: 300px;"></meter>
📃12_meter.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>meter 태그</h1> <hr> <h3>투표 결과</h3> <p>1번 후보 : 전체 100명 중 60명 선택</p> <p>2번 후보 : 전체 100명 중 10명 선택</p> <p>3번 후보 : 전체 100명 중 30명 선택</p> <hr> <!-- meter 태그 : 값을 제공받아 백분율로 변환한 이미지로 출력하기 위한 태그 --> <!-- value 속성 : 태그의 저장값을 속성값으로 설정 --> <!-- max 속성 : 태그의 최대값을 속성값으로 설정 --> <p>1번 후보 : <meter value="60" max="100" style="width: 300px;"></meter> <p>2번 후보 : <meter value="10" max="100" style="width: 300px;"></meter> <p>3번 후보 : <meter value="30" max="100" style="width: 300px;"></meter> </body> </html>
🐧progress
📌progress 태그 : 진행 상황을 이미지로 출력하기 위한 태그
<p>남은 시간 : 10초 <progress value="50" max="60"></progress></p> <p>진행률 : 30% <progress value="30" max="100"></progress></p>
📌button 태그 : 버튼을 출력하기 위한 태그
🌠type 속성 : button(일반버튼), submit(제출버튼 - 기본), reset(초기화버튼) 중 하나를 속성값으로 설정
🌠onclick 속성 : 클릭 이벤트 발생시 실행될 이벤트 처리 명령(JavaScript)을 속성값으로 설정
→ onXXX속성 : 태그의 이벤트 속성으로 이벤트가 발생될 때 실행될 명령을 속성값으로 설정
<button type="button" onclick="download();">다운로드</button>
📌script 태그 : 스크립트 프로그램을 작성하는 영역을 제공하는 태그
🌠type 속성 : 스크립트 프로그램 작성을 위한 파일형식(mimeType)을 속성값으로 설정
<script type="text/javascript">
📃13_progress.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>progress 태그</h1> <hr> <!-- progress 태그 : 진행 상황을 이미지로 출력하기 위한 태그 --> <p>남은 시간 : 10초 <progress value="50" max="60"></progress></p> <p>진행률 : 30% <progress value="30" max="100"></progress></p> <hr> <!-- button 태그 : 버튼을 출력하기 위한 태그 --> <!-- type 속성 : button(일반버튼), submit(제출버튼 - 기본), reset(초기화버튼) 중 하나를 속성값으로 설정 --> <!-- onclick 속성 : 클릭 이벤트 발생시 실행될 이벤트 처리 명령(JavaScript)을 속성값으로 설정 --> <!-- → onXXX속성 : 태그의 이벤트 속성으로 이벤트가 발생될 때 실행될 명령을 속성값으로 설정 --> <button type="button" onclick="download();">다운로드</button> <progress id="bar" value="0" max="100" style="width: 200px"></progress> <span id="message"></span> <!-- script 태그 : 스크립트 프로그램을 작성하는 영역을 제공하는 태그 --> <!-- type 속성 : 스크립트 프로그램 작성을 위한 파일형식(mimeType)을 속성값으로 설정 --> <script type="text/javascript"> function download() { var bar=document.getElementById("bar"); var message=document.getElementById("message"); var loaded=0; var load=function() { loaded+=5; bar.value=loaded; message.innerHTML="진행률 = "+loaded+"%"; if(loaded==100) { clearInterval(dummyLoad); } } var dummyLoad=setInterval(function() { load(); },500); } </script> </body> </html>
🐧mark
📌mark 태그 : 형광색을 이용하여 문장을 강조하기 위한 태그
◈ 문장 강조 태그 : b, i, strong(굵게 출력 - 객관적인 강조), em(기울어져 출력 - 주관적인 강조)
<p><strong>2022년 11월 09일 수요일</strong>입니다. 오늘 최고 기온은 영상 <mark>16°C</mark>입니다. <em>오늘은 기분이 좋습니다.</em></p>
📃14_mark.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>mark 태그</h1> <hr> <!-- mark 태그 : 형광색을 이용하여 문장을 강조하기 위한 태그 --> <!-- 문장 강조 태그 : b, i, strong(굵게 출력 - 객관적인 강조), em(기울어져 출력 - 주관적인 강조) --> <p><strong>2022년 11월 09일 수요일</strong>입니다. 오늘 최고 기온은 영상 <mark>16°C</mark>입니다. <em>오늘은 기분이 좋습니다.</em></p> </body> </html>
🐧blockquote
📌blockquote 태그 : 인용문을 출력하기 위한 태그 - 블럭 레벨 태그
🌠cite 속성 : 인용문을 제공받은 웹문서의 URL 주소를 속성값으로 설정
<blockquote cite="https://100.daum.net/encyclopedia/view/24XXXXX74664">웹 문서를 만드는 데에 이용되는 문서 형식으로, 웹 문서에서 문자나 영상, 음향 등의 정보를 연결해 주는 하이퍼텍스트를 만들 수 있도록 해 준다.</blockquote>
📌q 태그 : 인용문을 출력하기 위한 태그 - 인라인 레벨 태그
<p>월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 <q cite="https://www.wah.or.kr:444/Accessibility/define.asp">웹이란'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며,웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야한다</q>고 하였다.</p>
📃15_blockquote
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>blockquote 태그</h1> <hr> <h3>HTML 이란?</h3> <p>웹 문서를 만드는 데에 이용되는 문서 형식으로, 웹 문서에서 문자나 영상, 음향 등의 정보를 연결해 주는 하이퍼텍스트를 만들 수 있도록 해 준다.</p> <hr> <h3>HTML 이란?</h3> <!-- blockquote 태그 : 인용문을 출력하기 위한 태그 - 블럭 레벨 태그 --> <!-- cite 속성 : 인용문을 제공받은 웹문서의 URL 주소를 속성값으로 설정 --> <blockquote cite="https://100.daum.net/encyclopedia/view/24XXXXX74664">웹 문서를 만드는 데에 이용되는 문서 형식으로, 웹 문서에서 문자나 영상, 음향 등의 정보를 연결해 주는 하이퍼텍스트를 만들 수 있도록 해 준다.</blockquote> <hr> <h3>웹 접근성 이란?</h3> <!-- q 태그 : 인용문을 출력하기 위한 태그 - 인라인 레벨 태그 --> <p>월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 <q cite="https://www.wah.or.kr:444/Accessibility/define.asp">웹이란'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며,웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야한다</q>고 하였다.</p> </body> </html>
