HTML 이미지에 캡션 추가
-
<figcaption>및<figure>태그 사용 - 이미지 상단에 캡션 추가
-
<figure>및<figcaption>태그를 사용하여 여러 이미지에 캡션 추가 -
<div>태그를 사용하여 여러 이미지에 캡션 추가 - 결론
이 문서에서는 HTML 및 CSS 속성을 사용하여 웹 페이지의 이미지 아래 또는 위에 캡션을 작성하는 다양한 접근 방식에 대해 설명합니다.
<figcaption> 및 <figure> 태그 사용
HTML에는 이미지에 캡션을 삽입하는 데 사용되는 특정 태그가 있습니다. <figcaption>은 HTML에서 <figure> 요소의 첫 번째 또는 마지막 자식으로 배치될 수 있는 <figure> 요소에 대한 캡션을 나타냅니다.
<figure> 및 <figcaption>은 HTML5에서 태그로 도입된 두 가지 새로운 요소입니다. 여기서 <figure> 태그는 이미지와 그래픽을 표시하는 데 가장 적합하며 <figcaption>은 시청자에게 무엇을 보고 있는지 알려줍니다.
<figcaption> 태그는 HTML의 전역 속성 및 이벤트 속성도 지원합니다.
다음 예제에서는 <figure> 요소를 사용하여 웹 페이지 또는 문서의 이미지를 마크업하고 <figcaption> 요소를 사용하여 이미지의 캡션을 정의합니다.
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>DelftStack Logo</figcaption>
</figure>
</body>
</html>
여기에서 HTML에서 <img> 태그의 style 속성을 사용하여 이미지의 해상도(높이 및 너비)를 조정할 수 있습니다.
여기에서 이미지의 해상도는 원래 크기로 설정됩니다.
<figure> 및 <figcaption>은 새로운 HTML5 태그이기 때문에 이전 버전의 브라우저는 이 두 태그의 프로세스를 이해할 수 없습니다. 따라서 이러한 태그는 웹 페이지에서 인라인 태그로 렌더링됩니다. 즉, 해당 태그는 이미지와 나란히 설정되는 그림 캡션에 대해 자동 줄 바꿈이 적용되지 않습니다.
따라서 해결책으로 CSS 속성을 사용하여 다음 예와 같이 <figure> 및 <figcaption>의 스타일을 지정할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 5px #4257f5 solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color:grey;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo" style="width:100%">
<figcaption>DelftStack Logo</figcaption>
</figure>
</body>
</html>
여기서 <figcaption> 및 <figure> 태그는 CSS의 다른 속성과 값을 사용하여 필요에 따라 편집할 수 있습니다.
이미지 상단에 캡션 추가
반대되는 CSS 지침이 없으면 <figcaption> 요소가 그림 내부의 첫 번째 요소인지 마지막 요소인지에 따라 캡션이 그림의 상단 또는 하단에 나타납니다.
이 예에서는 이미지 상단에 다음과 같이 캡션을 설정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 5px #4257f5 solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color:grey;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<figcaption>Fig.2 - DelftStack Logo</figcaption>
<img src="/img/DelftStack/logo.png" alt="logo" style="width:100%">
</figure>
</body>
</html>
<figure> 및 <figcaption> 태그를 사용하여 여러 이미지에 캡션 추가
<figcaption>을 사용하여 여러 이미지에 캡션을 추가할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>DelftStack Logo</figcaption>
</figure>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>Fig.2 - DelftStack Logo</figcaption>
</figure>
</body>
</html>
CSS 속성을 사용하여 텍스트에 다른 스타일이나 색상을 추가하여 이미지 캡션의 형식을 지정할 수 있습니다.
<div> 태그를 사용하여 여러 이미지에 캡션 추가
<div> 태그와 CSS 속성을 사용하여 동시에 여러 이미지에 캡션을 추가할 수 있습니다. 아래 예에서는 두 개의 이미지에 캡션을 추가하고 선택적으로 이미지를 클릭하면 다른 웹 페이지나 웹 사이트로 연결되는 링크를 추가할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#pictures{
text-align:center;
margin:50px auto;
}
#pictures a{
margin:0px 50px;
display:inline-block;
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<div id="pictures">
<a href="">
<img src="/img/DelftStack/logo.png" width="480px" height="90px">
<div class="caption">Fig 1 - DelftStack Logo</div>
</a>
<a href="">
<img src="/img/DelftStack/logo.png" width="480px" height="90px">
<div class="caption">Fig 2 - DelftStack Logo</div>
</a>
</div>
</body>
</html>
이 방법을 사용할 때 추가 구현을 통해 상단에 이미지 캡션을 추가할 수 있습니다.
결론
위에서 언급한 것처럼 CSS 속성과 함께 HTML을 사용하여 이미지를 캡션하는 데 다양한 접근 방식을 사용할 수 있습니다. 그러나 표 형식으로 이미지 또는 이미지와 해당 캡션을 추가하는 것과 같은 일부 방법은 현재 적합하지 않습니다.
HTML5의 <figure> 및 <figcaption>과 같은 새로운 태그를 사용하면 이미지 캡션 작업이 더 쉬워집니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.