legend element - by. UXKM

2025-05-16

요약 설명
<legend> 요소는 <fieldset> 요소 내부에서 사용되며, 해당 필드셋에 대한 제목이나 설명을 제공하는 시맨틱 태그입니다.
<fieldset>으로 그룹화된 입력 요소들의 의미나 목적을 간결하게 전달해주며, 브라우저는 기본적으로 <fieldset>의 테두리 상단에 <legend>를 배치해 시각적으로 그룹의 레이블 역할을 하게 합니다. 접근성 면에서도 중요한 역할을 하며, 스크린 리더는 <legend>를 통해 그룹화된 폼 요소의 주제를 먼저 안내합니다. 복잡한 폼에서 사용자 이해를 돕고 구조적 명확성을 높이는 데 효과적입니다.

주요 역할 및 특징

<fieldset> 요소의 제목 역할
- <legend> 요소는 반드시 <fieldset> 요소 내부에서 사용되어야 하며, 단독으로 사용할 수 없습니다.
- 해당 <fieldset> 그룹이 어떤 내용을 포함하는지를 간결하게 설명하는 라벨 역할을 합니다.
자동으로 <fieldset> 내부의 상단에 배치됨
- <legend> 요소는 가능한 한 <fieldset>의 첫 번째 자식 요소로 배치하는 것이 좋습니다.
  하지만 다른 위치에 있어도 기본적으로 <fieldset>의 상단에 표시되며, 기본 스타일에서는 좌측 정렬됩니다.
- CSS로 스타일을 변경할 수 있습니다.
접근성을 크게 향상시킴
스크린 리더가 <legend> 내용을 읽어줌으로써 장애가 있는 사용자도 그룹의 의미를 쉽게 파악할 수 있습니다.
모든 브라우저에서 지원됨
<legend> 요소는 HTML5에서도 여전히 유효하며, 모든 주요 브라우저에서 정상적으로 작동합니다.

CSS 기본 값

<legend> 요소는 기본적으로 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							legend {
								display: block;
								padding: 0 2px;
							}

기본 문법

							<fieldset>
								<legend>fieldset 그룹의 제목</legend> <!-- legend 요소 -->
								<!-- form 요소(input, textarea, select, button 등) -->
							</fieldset>

속성

<legend> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

<legend> 요소는 단독으로 사용하면 의미가 없습니다. <legend> 요소는 반드시 <fieldset> 내부에 사용되어, 해당 <fieldset> 그룹이 어떤 내용을 포함하는지를 간결하게 설명하는 라벨 역할을 합니다.
이전 섹션(fieldset element)에서 <legend> 요소의 사용 예제를 확인할 수 있습니다.

fieldset element 예제 비로가기

주의사항

<legend> 요소는 반드시 <fieldset> 요소 내부에서 사용되어야 합니다. 그룹화된 입력 필드의 목적을 설명하는 라벨 역할을 합니다.
가능하면 <fieldset>의 첫 번째 자식 요소로 배치해주시는 것이 좋습니다. 일부 브라우저나 스크린 리더는 <legend>가 가장 처음에 위치해야 올바르게 인식합니다.
의미 있는 제목을 간결하게 제공해주시는 것이 좋습니다. 너무 길거나 모호한 제목은 접근성에 좋지 않으며, 스크린 리더 사용자에게 혼란을 줄 수 있습니다.
예: "개인정보" 또는 "결제 정보" 등
시각적 위치와 실제 의미가 일치하도록 하는 것이 좋습니다.
CSS로 위치만 이동시키는 경우 시각적 의미와 코드 구조가 달라질 수 있으므로 주의해주셔야 합니다.
브라우저 스타일이 다를 수 있으므로, 일관된 디자인이 필요할 경우 CSS로 명시적으로 설정해주시기 바랍니다.