이미지는 웹 페이지에 생명을 불어 넣고 시청자의 주목을 끌게됩니다. 캡션은 웹 이미지에 대한 추가 정보를 제공하지만 고급 HTML 및 CSS 기술 없이는 웹 페이지에 추가하기가 어려울 수 있습니다. 다음은 웹 페이지에서 이미지를 움직일 때마다 이미지와 함께 유지되는 단순하지만 매력적인 캡션을 추가하는 신뢰할 수있는 방법입니다.
HTML 이미지 캡션에 대한 단계
-
웹 페이지에 이미지를 추가하십시오.
-
웹 페이지의 HTML에서 이미지 주위에 div 태그를 추가하십시오.
-
div 태그에 스타일 속성을 추가합니다.
style = ""> -
width 스타일 속성을 사용하여 div의 너비를 이미지와 동일한 너비로 설정합니다.
-
주변 텍스트보다 약간 작은 캡션의 경우 div 스타일에 font-size 속성을 추가하십시오.
-
캡션은 이미지 아래에 가운데에 있으면 가장 잘 보이므로 text-align 속성을 style 속성에 추가하십시오.
-
마지막으로 이미지와 자막 사이에 약간의 여백을 추가하려면 패딩 하단 스타일 속성을 사용하여 이미지에 스타일 속성을 추가하십시오.
style = "padding-bottom : 0.5em;" />
-
그런 다음 이미지 바로 아래에 텍스트 캡션을 추가하십시오.
웹 페이지를 서버에 업로드하고 브라우저에서 테스트하십시오.
자막 팁
- CSS 크기는 다양한 측정 값이 될 수 있으므로 일반적으로 측정 유형을 포함해야합니다. 예 :
너비 : 100픽셀; 그러나 HTML 이미지 크기는 항상 픽셀 단위이므로 측정 값은 그대로 두십시오.
너비 = "100"
- div의 너비를 이미지 너비보다 넓게 설정하면 캡션이 이미지 옆에 나타날 수 있습니다. 이것이 원하는 경우 다음을 추가하십시오.
태그를 캡션 바로 앞에 추가하고 이미지 태그 다음에 추가하십시오.
