label

1 개요
2 예제 1
3 예제 2

개요

label은 폼의 양식에 이름 붙이는 태그입니다.
주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다.
label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다.

예제 1

input 요소에 label을 붙인 간단한 예제입니다.
label을 클릭하면 input의 type에 맞게 처리합니다. 즉, type이 text이면 텍스트를 입력할 수 있게 커서를 위치시킵니다. type이 checkbox이면 체크박스에 체크하거나 체크를 해제합니다.

<!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>

예제 2

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 / Reference / input type="number"

type이 number인 input은 숫자를 입력받는 양식입니다. 숫자 이외의 값을 입력하면 경고 메시지를 출력합니다. 숫자 범위, 값의 증감 단위 등을 설정할 수 있는 다양한 속성을 제공합니다. 이 입력 필드는 나이, 수량, 가격 등의 숫자 데이터를 입력받을 때 유용합니다.

HTML / Reference / label

label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다.

HTML / Reference / input type="checkbox"

checkbox는 여러 선택지를 제공하고, 사용자가 하나 또는 여러 개의 선택을 할 수 있게 하는 폼 요소입니다. input 태그의 type="checkbox" 속성을 사용하여 체크박스를 생성합니다.

HTML / Reference / figure, figcaption

figure는 사진, 이미지, 다이어그램 등을 감싸는 테그입니다. figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치합니다.

HTML / Reference / input type="date"

type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.

HTML / Reference / input type="hidden"

양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 접속한 IP 등 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다.

HTML / Reference / img

img는 HTML에서 이미지를 삽입할 때 사용하는 태그입니다. 이 태그는 자체 종료 태그(self-closing)이며, 이미지 파일을 웹 페이지에 표시하는 데 사용됩니다.

HTML / Reference / br

HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.

HTML / Reference / input type="radio"

radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.

HTML / Reference / pre

pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.