HTML <legend> 태그

정의와 사용법

<legend> 레이블 정의 <fieldset> 요소 의 제목(caption).

또는 참조:

HTML DOM 참조 매뉴얼:레전드 객체

예제

예제 1

양식에서 관련 요소를 그룹화합니다:

<form action="/action_page.php">
  <fieldset>
    <legend>개인정보:</legend>
    <label for="fname">이름:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">성:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">생일:</label>
    


    <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="제출">
</fieldset>

직접 시험해보세요

예제 2

필드셋 제목을 오른쪽으로 부모하게 설정합니다 (CSS 사용):

<form action="/action_page.php">
  <fieldset>
    <legend style="float:right">개인정보:</legend>
    <label for="fname">이름:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">성:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">생일:</label>
    


    <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="제출">
</fieldset>

직접 시험해보세요

예제 3

CSS를 사용하여 설정 <fieldset> 및 <legend> 의 스타일:

<html>
<head>
<style>
fieldset {
  background-color: #eeeeee;
}
legend {
  background-color: gray;
  color: white;
  padding: 5px 10px;
}
input {
  margin: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
  <fieldset>
    <legend>개인정보:</legend>
    <label for="fname">이름:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">성:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">생일:</label>
    


    <input type="date" id="birthday" name="birthday"><br><br>
  <input type="submit" value="제출">
</fieldset>
</form>
</body>

직접 시험해보세요

</html>

<legend> 태그는 다음과 같은 이벤트 속성을 지원합니다 전역 속성.

HTML에서의 전역 속성

<legend> 태그는 다음과 같은 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성.

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시됩니다 <legend> 요소:

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

직접 시험해보세요

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원