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가 없이도 같은 결과를 얻을 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <p>
      <label>Input - Text
      <input type="text">
      </label>
    </p>
    <p>
      <label>Input - Checkbox
      <input type="checkbox">
      </label>
    </p>
  </body>
</html>

HTML

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

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

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 / noscript

noscript noscript 태그 안의 내용은 스크립트를 지원하는 않는 웹브라우저나 스크립트를 실행하지 않도록 설정한 웹브라우저에서만 출력됩니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Tag | noscript</title> </head> <body> <script> document.write( '<h1>Your browser supports JavaScript</h1>'); ...

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

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

HTML / form / 데이터를 전달하는 양식 만들기

form form은 데이터를 입력 받고 전송할 때 사용하는 태그입니다. 문법 <form method="xxx" action="yyy"> ... </form> method : 값을 전송하는 방법입니다. get 또는 post를 입력합니다. action : 값을 전달할 페이지를 입력합니다. 예제 1 get 방식으로 값을 전달하는 간단한 양식입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * ...

HTML / br / 줄바꿈하는 태그

HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 다음은 br 태그를 이용해서 줄바꿈을 한 예제입니다. 첫 번째 문단은 코드 상에서 줄바꿈을 했지만 웹브라우저에서는 띄어쓰기로 표현되고, ...

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 / video / 동영상 삽입하는 태그

video video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML 5에서 추가된 것이므로, HTML 5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다. 문법 <video autoplay controls loop muted poster="aaa" preload="bbb"> <source src="xxx" type="yyy"> zzz </video> autoplay : 동영상을 자동으로 재생합니다. controls : 재생, 정지 등 조작 메뉴를 보여줍니다. loop : 동영상을 반복 재생합니다. poster : 동영상 ...

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> 예제 ...

HTML / caption / 표(table)에 캡션 붙이는 태그

caption 표(table)에 캡션 붙일 때 caption 태그를 사용합니다. 기본 위치는 표 위 가운데입니다. 캡션 위치는 CSS의 caption-side로 정합니다. 예제 캡션의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> table { width: 100%; } th, td { border: 1px solid #dadada; } </style> </head> <body> <table> <caption>Table Caption</caption> <tr> <th>Lorem</th><th>Ipsum</th> </tr> <tr> <td>Dolor</td><td>Amet</td> </tr> </table> </body> </html>

CODING FACTORY