HTML / Reference / abbr
개요
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 Wide Web">WWW</abbr>
and
<abbr title="Hyper Text Markup Language">HTML</abbr>
</p>
</body>
</html>
개요 progress는 진행 정도 나타내는 바를 만드는 태그입니다. 문법 <progress value="xx" max="yy"> max를 전체로 보았을 때 value에 해당하는 정도를 나타냅니다. 예제 1 첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다. 웹브라우저에 따라, 웹브라우저의 버전에 따라 표현 방식이 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
HTML / Reference / input type="hidden"
개요 양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 사용자가 접속한 IP 로그인한 상태에서의 계정 정보 게시물의 답글인 경우 게시물의 ID 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정합니다. 문법 <input type="hidden" name="xxx" value="yyy"> 예제 다음은 size의 값을 big으로 정하고 넘기는 ...
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 뒤에 ...
개요 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> ...
개요 select는 선택할 수 있는 목록을 만들 때 사용합니다. 목록의 내용은 option 태그로 만듭니다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰집니다. disabled : 화면에는 보이지만 사용할 수 없도록 만듭니다. multiple : 여러 값을 선택할 수 있도록 합니다. name : 이름을 ...
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> * { ...
개요 form은 데이터를 입력 받고 전송할 때 사용하는 태그입니다. 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다. <form>과 </form> 사이에 input, select, textarea 등 양식이 들어갑니다. 문법 <form method="xxx" action="yyy"> ... </form> method : 값을 전송하는 방법으로 get 또는 post를 입력합니다. action : 값을 전달할 페이지를 입력합니다. 입력하지 않으면 현재 페이지로 전송합니다. form 안에 form을 넣으면 제대로 작동하지 않습니다. 예제 ...
개요 video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다. 문법 <video autoplay controls loop muted poster="aaa" preload="bbb"> <source src="xxx" type="yyy"> zzz </video> autoplay : 동영상을 자동으로 재생합니다. controls : 재생, 정지 등 조작 메뉴를 보여줍니다. loop : 동영상을 반복 재생합니다. poster : 동영상 재생 전에 ...
HTML / Reference / input type="date"
개요 type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜입니다. max : 선택 항목으로, 입력 가능한 가장 늦은 날짜입니다. 예제 - 기본 양식 날짜를 입력 받는, 선택 항목이 없는 가장 ...
HTML / Reference / input type="checkbox"
개요 체크박스는 클릭하면 선택되고, 다시 클릭하면 선택이 해제되는 사각형 모양의 박스입니다. 체크박스는 input 태그로 만듭니다. 문법 <input type="checkbox" name="xxx" value="yyy" checked> name : 전달할 값의 이름입니다. value : 전달될 값입니다. checked : 선택된 상태로 만듭니다. 예제 - 기본 Blue 또는 Red를 선택합니다. 둘 다 선택할 수 있습니다.(라디오 버튼은 하나만 선택할 수 있습니다.) 아무것도 선택되지 않은 상태에서 시작합니다. <!doctype html> <html lang="ko"> ...