HTML Fieldset 캡션

소개

HTML <legend> 태그는 HTML <fieldset> 태그 내의 자식 콘텐츠에 캡션 또는 제목을 제공하는 중요한 방법입니다. <legend> 태그는 fieldset 콘텐츠를 식별하고 페이지에 적절한 제목을 부여하는 데 사용됩니다. 이 랩에서는 <legend> 태그와 다양한 CSS 속성을 사용하는 방법을 배우겠습니다.

참고: index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

태그 추가

먼저, 코드 편집기를 열고 index.html이라는 새 파일을 만듭니다. html을 입력한 다음 tab 키를 눌러 파일에 기본 구조를 추가합니다.

HTML 문서에 <fieldset> 태그를 추가합니다.

<fieldset>
  <legend></legend>
</fieldset>

태그 내에

태그 추가

<fieldset> 태그 안에 <legend> 태그를 추가하여 헤더를 만듭니다.

<fieldset>
  <legend>Contact Information</legend>
</fieldset>

태그에 CSS 속성 사용

<legend> 태그에 몇 가지 CSS 속성을 추가하여 더 보기 좋게 만들어 보겠습니다.

<style>
  legend {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
</style>

파일을 저장하고 선호하는 웹 브라우저에서 index.html 파일을 엽니다.

요약

요약하면, HTML <legend> 태그는 HTML <fieldset> 태그 내의 자식 콘텐츠에 캡션 또는 제목을 제공하는 데 도움이 됩니다. 우리는 이를 더 보기 좋게 만들기 위해 다양한 CSS 속성을 사용했습니다. 이제 HTML 파일 내에서 <legend> 태그를 사용하여 헤더 또는 제목을 만들 수 있기를 바랍니다.