HTML / Reference / progress
개요
- 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>
개요 blockquote는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다. 문법 <blockquote cite="xxx">...</blockquote> 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. 예제 blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> ...
HTML / Reference / input type="number"
개요 type이 number인 input은 숫자를 입력받는 양식입니다. 숫자 이외의 값을 입력하면 경고 메시지를 출력합니다. 문법 <input type="number" step="xxx"> 예제 - 기본 input 태그의 type을 number로 하면 숫자만 입력할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { ...
개요 select는 선택할 수 있는 목록을 만들 때 사용합니다. 목록의 내용은 option 태그로 만듭니다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰집니다. disabled : 화면에는 보이지만 사용할 수 없도록 만듭니다. multiple : 여러 값을 선택할 수 있도록 합니다. name : 이름을 ...
개요 abbr은 약자(abbreviation)임을 나타냅니다. 문법 <abbr title="Xxx Yyy Zzz">XYZ</abbr> title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | abbr</title> </head> <body> <p> <abbr title="World ...
개요 label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다. 예제 1 input 요소에 label을 붙인 간단한 예제입니다. label을 클릭하면 input의 type에 맞게 처리합니다. 즉, type이 text이면 텍스트를 입력할 수 있게 커서를 위치시킵니다. type이 checkbox이면 체크박스에 ...
개요 q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다. 문법 <q cite="xxx">...</q> 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. 예제 q 요소의 기본 모양은 인용 문구를 큰 따옴표로 감싸는 것입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> ...
HTML / Reference / input type="radio"
개요 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란 버튼을 라디오 버튼이라고 합니다. 라디오 버튼은 input 태그로 만듭니다. 문법 <input type="radio" name="xxx" value="yyy" checked> name : name의 값이 같은 것 중에서 하나를 선택합니다. value : 선택했을 때 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 1 Apple 또는 Banana 중 하나만 선택합니다. 아무것도 선택되지 않은 상태에서 시작합니다. <!doctype html> <html lang="ko"> ...
HTML / Reference / input type="date"
개요 type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜입니다. max : 선택 항목으로, 입력 가능한 가장 늦은 날짜입니다. 예제 - 기본 양식 날짜를 입력 받는, 선택 항목이 없는 가장 ...
개요 form은 데이터를 입력 받고 전송할 때 사용하는 태그입니다. 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다. <form>과 </form> 사이에 input, select, textarea 등 양식이 들어갑니다. 문법 <form method="xxx" action="yyy"> ... </form> method : 값을 전송하는 방법으로 get 또는 post를 입력합니다. action : 값을 전달할 페이지를 입력합니다. 입력하지 않으면 현재 페이지로 전송합니다. form 안에 form을 넣으면 제대로 작동하지 않습니다. 예제 ...
HTML / Reference / input type="range"
개요 type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다. 문법 <input type="range" min="x" max="x" step="x" value="x"> min : 최솟값으로, 기본값은 0입니다. max : 최댓값으로, 기본값은 100입니다. step : 숫자들 사이의 간격으로, 기본값은 1입니다. value : 초깃값으로, min과 max의 평균입니다. 예제 Submit을 클릭하면 URL에서 값을 확인할 수 있습니다. 아래 상태 그대로 전송하면 URL 뒤에 ...