소개
HTML <figcaption> 태그는 <figure> 요소 내의 콘텐츠에 캡션을 제공하는 데 사용됩니다. 이 Lab 에서는 <figcaption> 태그를 사용하여 이미지에 캡션을 추가하는 방법을 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
이미지와 캡션 추가하기
선호하는 텍스트 편집기에서 index.html 파일을 열고 기본 HTML 구조를 작성합니다. <DOCTYPE> 선언, <html>, <head>, 그리고 <body> 태그를 추가합니다.
<body>태그 내부에 이미지 태그가 있는<figure>요소를 생성합니다. 원하는 이미지를 사용할 수 있습니다. 예를 들어:
<figure>
<img src="your-image-url-here" alt="Your image description" />
</figure>
- 이제
<img>태그 바로 뒤에<figcaption>태그를 추가하여 이미지에 대한 캡션을 제공합니다. 예를 들어:
<figure>
<img src="your-image-url-here" alt="Your image description" />
<figcaption>Image caption goes here</figcaption>
</figure>
- 변경 사항을
index.html파일에 저장하고 웹 브라우저에서 엽니다. 이제 이미지와 그 아래에 캡션이 표시되어야 합니다.
캡션 스타일 지정하기
기본적으로
<figcaption>태그는 부모 요소의 전체 너비를 차지하는 블록 레벨 요소입니다. CSS 를 사용하여 캡션의 위치, 글꼴, 색상 등을 조정하여 스타일을 지정할 수 있습니다.캡션의 글꼴, 글꼴 크기 및 색상을 변경하려면 다음 CSS 코드를
index.html파일의<head>섹션에 추가합니다.
figcaption {
font-family: Arial, sans-serif;
font-size: 18px;
color: #555;
}
- CSS 를 사용하여
<figcaption>태그의 margin 및 padding 속성을 조정하여 캡션의 위치를 변경할 수도 있습니다. 예를 들어:
figcaption {
margin-top: 10px;
padding: 5px;
}
여러 이미지 및 캡션 추가
이전 단계를 반복하여 단일 웹 페이지에 여러 이미지와 캡션을 추가할 수 있습니다. 각 이미지에 대해
<img>태그와<figcaption>태그가 있는 새로운<figure>요소를 생성하기만 하면 됩니다.변경 사항을
index.html파일에 저장하고 웹 페이지를 새로 고칩니다. 이제 모든 이미지와 그 아래에 캡션이 표시되어야 합니다.
요약
HTML <figcaption> 태그는 웹 페이지에서 이미지 캡션을 제공하기 위한 강력한 도구입니다. 이 태그를 사용하면 이미지를 청중에게 더 접근 가능하고 사용자 친화적으로 만들 수 있습니다. CSS 를 사용하여 캡션의 스타일을 지정하여 멋지게 보이도록 하는 것도 잊지 마세요!
