HTML / progress - 진행 정도 나타내는 바 만드는 태그

progress

  • progress는 진행 정도 나타내는 바를 만드는 태그입니다.
  • HTML5에서 추가되었습니다.
  • IE는 버전 10부터 지원합니다.
  • 주요 속성은 max, value입니다. max를 전체로 보았을 때 value에 해당하는 정도를 나타냅니다.

예제 1

  • 첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다.
  • 웹브라우저마다 표현 방식이 다릅니다.
<!doctype html>
<html lang="ko">
	<head>
	<meta charset="utf-8">
		<title>HTML</title>
	</head>
	<body>
		<div>
			<progress value="20" max="100"></progress>
		</div>
		<div>
			<progress value="20" max="200"></progress>
		</div>
	</body>
</html>

IE Edge

Chrome

예제 2

  • CSS로 크기를 바꾸고, 스크립트로 동적인 효과를 준 예제입니다.
  • 버튼을 클릭하면 value를 20에서 80으로 바꿉니다.
<!doctype html>
<html lang="ko">
	<head>
	<meta charset="utf-8">
		<title>HTML</title>
		<style>
			#jb {
				width: 100%;
				height: 50px;
			}
		</style>
		<script>
			function jbFunc() {
				document.getElementById( 'jb' ).value = '80';
			}
		</script>
	</head>
	<body>
		<div>
			<progress value="20" max="100" id="jb"></progress>
		</div>
		<button onclick="jbFunc()">Click</button>
	</body>
</html>

Related Posts

HTML / input / checkbox / 체크박스 만들기

HTML / input / checkbox / 체크박스 만들기

체크박스 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스입니다. 체크박스는 input 태그로 만듭니다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름입니다. value : 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Blue 또는 Red를 선택합니다. 둘 다 선택할 수 있습니다.(라디오 버튼은 하나만 선택할 수 있습니다.) 아무것도 선택되지 않은 상태에서 시작합니다. <!doctype html> <html lang="ko"> ...

HTML / figure, figcaption / 이미지 등을 감싸고 캡션 만드는 태그

HTML / figure, figcaption / 이미지 등을 감싸고 캡션 만드는 태그

figure figure는 사진, 이미지, 다이어그램 등을 감싸는 요소입니다. figcaption figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치시킵니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | figcaption</title> </head> <body> <p>Aenean nec mollis nulla. Phasellus lacinia ...

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

목록 목록에는 순서 있는 목록, 순서 없는 목록, 정의 목록 세가지가 있습니다. 순서 있는 목록 순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록입니다. 순서 있는 목록은 ol로, 목록의 내용은 li로 만듭니다. ​​​​<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> ...

HTML / label / 폼의 양식에 이름 붙이는 태그

HTML / label / 폼의 양식에 이름 붙이는 태그

label label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크를 하거나 체크를 해제합니다. 예제 input 요소에 label을 붙인 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p> <label for="jb-input-text">Input - Text</label> <input type="text" id="jb-input-text"> </p> <p> <label for="jb-input-checkbox">Input - Checkbox</label> <input type="checkbox" id="jb-input-checkbox"> </p> </body> </html> Tip input 등 양식을 label로 감싸면, id와 for가 ...

HTML / em, strong / 강조하는 텍스트, 중요한 텍스트

HTML / em, strong / 강조하는 텍스트, 중요한 텍스트

em, strong em 태그는 강조하는 텍스트에 사용합니다. 기본 모양은 기울임꼴입니다. strong 태그는 중요한 텍스트에 사용합니다. 기본 모양은 굵은 글자입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> body { font-size: 64px; } </style> </head> <body> <p>Lorem <em>Ipsum</em> <strong>Dolor</strong>.</p> </body> </html> TIP b 태그는 글자를 굵게 만듭니다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점입니다.

HTML / img / 이미지 삽입하는 태그

HTML / img / 이미지 삽입하는 태그

img img는 HTML 문서에 이미지를 삽입하는 태그입니다. 주요 속성은 src, alt, width, height, loading입니다. src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 예제 1 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나옵니다. 만약 지정한 경로에 이미지가 없다면 alt ...

HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기

HTML / table, thead, tbody, tfoot, th, tr, td / 표 만들기

표 만들 때 사용하는 태그 표는 table 태그로 만듭니다. 행은 tr 태그로 만듭니다. 열의 제목이 들어가는 셀은 th 태그로 만듭니다. 내용이 들어가는 셀은 td 태그로 만듭니다. 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분지을 수도 있습니다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성을 사용합니다. 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 사용합니다. 표 제목은 caption 태그로 만듭니다. 예제 위의 ...

HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단

HTML / h1, h2, h3, h4, h5, h6, p / 제목과 문단

제목 제목(heading)은 h1, h2, h3, h4, h5, h6 태그로 만듭니다. 문서의 구조와 밀접한 관련이 있으므로 순서에 맞게 사용하는 게 좋습니다. 문단 문단(paragraph)은 p 태그로 만듭니다. 문단과 문단 사이는 간격이 큽니다. 문단 내에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 예제 1 제목과 문단이 있는 간단한 문서입니다. 제목의 기본 모양은 굵은 글자이고, 레벨에 따라 크기가 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading ...

HTML / pre / 입력한 그대로 출력하는 태그

HTML / pre / 입력한 그대로 출력하는 태그

pre HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식합니다. 예를 들어 다음 문서의 내용은 한 줄로 나옵니다. <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. ...

HTML / placeholder / 양식에 안내 문구 추가하기

HTML / placeholder / 양식에 안내 문구 추가하기

value input 태그에 value를 이용해서 기본값을 만들 수 있습니다. 이 상태에서 버튼을 클릭하면 기본값이 전송됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; ...