이미지가있는 웹 캡션 추가

9 단계의 쉬운 단계에서 웹 이미지에 HTML 캡션 추가

이미지는 웹 페이지에 생명을 불어 넣고 시청자의 관심을 유도합니다. 캡션은 웹 이미지에 대한 추가 정보를 제공하지만 고급 HTML 및 CSS 기술 없이는 웹 페이지에 추가하기가 어려울 수 있습니다. 다음은 웹 페이지에서 이미지를 움직일 때마다 이미지와 함께 유지되는 단순하지만 매력적인 캡션을 추가하는 신뢰할 수있는 방법입니다.

HTML 이미지 캡션에 대한 9 단계

이미지에 캡션을 추가하고 원하는 위치에 함께 캡션을 이동하십시오.

1. 웹 페이지에 이미지 를 추가하십시오 .
2. 웹 페이지의 HTML에서 이미지 주위에 div 태그를 추가하십시오.
3. div 태그에 스타일 속성을 추가합니다.
   style = "" >
4. width 스타일 속성 을 사용하여 div의 너비를 이미지와 동일한 너비로 설정합니다.
   width : image width px; ">
5. 주변 텍스트보다 약간 작은 캡션의 경우 div 스타일에 font-size 속성 을 추가하십시오.
   font-size : 80 %; ">
6. 캡션은 이미지 아래에 가운데에 있으면 가장 잘 보이므로 스타일 속성에 text-align 속성 을 추가하십시오.
   text-align : center; "> img src = "URL"alt = "대체 텍스트"width = "width"height = "height"/>
7. 마지막으로 이미지와 자막 사이에 약간의 여백을 추가하십시오. 이미지에 여백 - 아래 스타일 속성이있는 스타일 속성을 추가하십시오 :
   style ="패딩 하단 : 0.5em; />

1. 그런 다음 텍스트 캡션을 이미지 바로 아래에 추가하십시오.
   내 캡션입니다.

웹 페이지를 서버에 업로드하고 브라우저에서 테스트하십시오.

자막 팁

• 너비 : CSS 치수는 다양한 측정 값이 될 수 있으므로 일반적으로 측정 유형을 포함해야합니다. 예 : width : 100 px ; 그러나 HTML 이미지 크기는 항상 픽셀 단위이므로 측정 값은 그대로 두십시오. 너비 = "100"
• div의 너비를 이미지 너비보다 넓게 설정하면 캡션이 이미지 옆에 나타날 수 있습니다. 이것이 원하는 경우
  태그를 캡션 바로 앞에 추가하고 이미지 태그 다음에 추가하십시오.