HTML / Reference / progress
개요
- progress는 HTML5에서 제공하는 태그로, 작업의 진행 상태를 나타내기 위해 사용됩니다. 주로 파일 업로드, 다운로드, 로딩 진행 상황 등을 시각적으로 보여줄 때 유용합니다.
- progress 태그는 기본적으로 게이지 형태로 표시되며, 사용자가 커스텀 스타일을 적용할 수도 있습니다.
문법
<progress value="xx" max="yy">
- 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>
예제 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>
form은 HTML에서 사용자 입력을 서버로 전송하는 양식을 정의할 때 사용됩니다. 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다. form 태그 안에 input, select, textarea 등 양식이 들어갑니다.
blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.
HTML / Reference / input type="checkbox"
checkbox는 여러 선택지를 제공하고, 사용자가 하나 또는 여러 개의 선택을 할 수 있게 하는 폼 요소입니다. input 태그의 type="checkbox" 속성을 사용하여 체크박스를 생성합니다.
label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다.
HTML / Reference / input type="hidden"
양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 접속한 IP 등 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다.
noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.
video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.
HTML / Reference / input type="number"
type이 number인 input은 숫자를 입력받는 양식입니다. 숫자 이외의 값을 입력하면 경고 메시지를 출력합니다. 숫자 범위, 값의 증감 단위 등을 설정할 수 있는 다양한 속성을 제공합니다. 이 입력 필드는 나이, 수량, 가격 등의 숫자 데이터를 입력받을 때 유용합니다.
select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다. 드롭다운 목록의 내용은 option 태그로 만듭니다.
caption은 표에 제목을 붙일 때 사용합니다. caption 태그는 반드시 table 태그 내부에 있어야 하며, thead, tbody, tr 등의 다른 테이블 요소들보다 먼저 위치해야 합니다. 기본 위치는 표 위 가운데입니다. 위치는 CSS의 caption-side로 정합니다.