HTML <legend> 태그 – 올바른 이해와 사용 방법

`<legend>` 태그의 정의 및 사용법

<legend> 태그는
오직 부모 요소인 <fieldset> 태그로 그룹화해서 세트로 묶은 요소들에 대한 캡션(간단한 제목이나 설명)을 나타내기 위해 사용하는 태그입니다.
선택적으로 사용할 수 있지만, 사용할 경우 <fieldset> 태그의 첫 번째 자식요소로만 사용되어야 합니다.

<legend> 태그를 이해하기 위해서는 사전 지식으로 <fieldset> 태그에 대해 알고 있어야 합니다.

<fieldset> 태그는
웹 양식 관련 컨트롤과 레이블(<label> 태그로 만든 이름표)을 그룹화해서 묶은 세트를 나타냅니다.
이 태그를 사용하면 양식의 구성을 명확하게 하고, 컨트롤 항목들을 시각적으로 구분하기 쉽게 만듭니다.

웹 양식 관련 컨트롤이란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>, <textarea>, <select>, <button> 등 사용자가 데이터를 입력하고, 선택하고, 제출하는 등의 작업을 할 수 있는 요소들이 해당됩니다.

<fieldset> 태그에는 선택적으로 캡션을 포함할 수 있습니다.
이 캡션은 <fieldset> 태그의 첫 번째 자식요소인 <legend> 태그로 나타내며, 이 그룹 안에 포함된 다른 요소들은 그룹을 구성합니다.

<legend> 태그는 그룹의 캡션 역할(간단한 제목이나 설명)을 하며, 스크린 리더 사용자에게 그룹의 내용을 알려주는 중요한 요소입니다. <fieldset> 태그 내에서 <legend> 태그는 필수 요소가 아닙니다. 하지만, <legend> 태그는 <fieldset> 태그 내에서 사용할 때 매우 중요한 역할을 하며, 웹 접근성을 고려할 때 반드시 사용할 것을 권장합니다.

다음의 예제는 <legend> 태그의 사용 방법에 대해 잘 보여주고 있습니다.

HTML

<form>
    <fieldset>
        <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
        <div>
           <input type="radio" id="html" name="interest" value="html">
           <label for="html">HTML</label>
        </div>
        <div>
           <input type="radio" id="css" name="interest" value="interest">
           <label for="css">CSS</label>
        </div>
        <div>
           <input type="radio" id="js" name="interest" value="interest">
           <label for="js">JavaScript</label>
        </div>
        <button type="submit">제출</button>
    </fieldset>
</form>

HTML <input type="radio">

CSS 스타일링

<fieldset>과 <legend>에 CSS 스타일을 추가하면 그룹해서 묶은 양식의 구성을 더욱 명확히 하고 컨트롤 항목들을 시각적으로 구분하기 쉽게 만듭니다.

이 글은 HTML을 다루고 있으므로 <fieldset>이나 <legend> 태그에 대한 CSS를 자세히 다루지는 않습니다.

CSS

fieldset {
    padding: 1em;
    background-color: #f1f9eb;
    border: 1px solid yellowgreen;
    border-radius: 10px;
    min-width: 0;
}
fieldset + fieldset {
    margin-top: 1em;
}
legend {
    background-color: yellowgreen;
    padding: 0.2em 1em;
    border-radius: 5px;
}
input {
    display: block;
    width: 100%;
}

HTML

<form>
    <fieldset>
        <legend>Legend One</legend>
        <label for="input-one">Input One</label>
        <input type="text" id="input-one">
    </fieldset>
    <fieldset>
        <legend>Legend Two</legend>
        <label for="input-two">Input Two</label>
        <input type="text" id="input-two">
    </fieldset>
    <fieldset>
        <legend>Legend Three</legend>
        <label for="input-three">Input Three</label>
        <input type="text" id="input-three">
    </fieldset>
</form>