이미지 아래에 캡션을 작성하는 방법? – CSS

이 게시물은 이미지 아래에 캡션을 작성하는 방법에 대해 설명합니다.

이미지 아래에 캡션을 작성하는 방법?

이미지 아래에 캡션을 작성하기 위해 아래에 언급된 다양한 방법을 제공합니다.

• 방법 1: HTML을 사용하여 이미지 캡션을 추가하는 방법 ' <무화과> ' 요소?
• 방법 2: '를 사용하여 이미지 캡션을 추가하는 방법 <사업부> ' 요소?

방법 1: HTML '

이미지 캡션을 추가하려면 다음 지침을 따르십시오.

• 먼저 '를 추가합니다. <그림> ” 요소는 잠재적으로 선택적 캡션과 함께 자체 포함 콘텐츠를 나타내는 데 사용됩니다.
• 다음으로 '를 삽입합니다. ” 문단 안의 태그 “

  ” 태그. '를 활용하여 이미지를 추가하십시오. 소스 ' 기인하다. “ 모든 것 ” 속성은 어떠한 이유로 이미지가 표시되지 않을 경우 추가된 내용을 보여줍니다.

• 이미지 너비를 ' 200픽셀 '.
• 그런 다음 ' <무화과> ” 태그는 이미지에 대한 캡션을 추가하는 데 사용됩니다. 또한 '

지정된 캡션이 있는 이미지가 표시된 것을 볼 수 있습니다.

이제 CSS를 사용하여 캡션을 추가하는 두 번째 방법으로 이동합니다.

방법 2: '

' 요소를 사용하여 이미지 캡션을 추가하는 방법은 무엇입니까?

'를 사용하여 이미지 캡션을 추가하려면 <사업부> ” 요소에 대해 다음 지침을 따르십시오.

• 생성' <사업부> ” 컨테이너에 추가하고 이름이 “인 클래스 속성을 추가합니다. 이미지 보유자 '.
• 제목 태그 추가 '

  ”를 사용하여 제목을 삽입하고 선택에 따라 제목 스타일을 지정합니다.

• 다른 '
  ' 요소를 추가하고 ' ” 태그와 함께 “ 소스 ”, “ 모든 것 ' 그리고 ' 너비 div 컨테이너 사이의 속성.
• 클래스 이름이 '인 세 번째 '
  '를 추가합니다. img 캡션 '. 그런 다음 '

  ' 태그 사이에 캡션을 제공합니다. 더욱이 “
  ” 요소는 한 줄 바꿈을 추가하는 데 사용됩니다.

= '색상:rgb(95, 31, 245)' > HTML 이미지 >

<사업부 >

= 'TSL.png' 모든 것 = 'TSL 콘텐츠 제작자' 너비 = '200' >

<사업부 클래스 = 'img 캡션' > > TSL 콘텐츠 제작자 >

>

>

이미지에 대한 캡션이 성공적으로 추가되었음을 확인할 수 있습니다.

이제 속성을 적용하기 위한 CSS 섹션으로 이동하겠습니다.

CSS의 스타일 '.image-holder'

먼저 ' <사업부> ' 클래스가 있는 요소 ' .이미지 홀더 '. 그런 다음 다음 CSS 속성을 적용합니다.

.이미지 홀더 {

위치 : 상대적인 ;

키 : 100픽셀 ;

너비 : 200픽셀 ;

여유 : 자동 ;

}

위 언급 속성의 세부 사항은 다음과 같습니다.

• “ 위치 ”는 “로 설정 상대적인 ” 정적 값과 마찬가지로 문서의 흐름에 남아 있는 요소의 원래 위치를 지정합니다.
• 그 다음에, ' 키 ”는 요소 높이를 정의하는 데 사용됩니다.
• “ 너비 ” 속성은 너비로 요소의 크기를 지정합니다.
• “ 여유 ”는 “로 설정 자동 ” 요소 주위에 자동으로 공간을 설정합니다.

CSS의 스타일 캡션

이 단계에서는 이름이 '인 두 클래스에 액세스합니다. 이미지 보유자 ' 그리고 ' img 캡션 '를 선택하고 다음 CSS 속성을 적용합니다.

.이미지 홀더 .img-캡션 {

위치 : 순수한 ;

텍스트 정렬 : 센터 ;

글꼴 두께 : 굵게 ;

너비 : 200픽셀 ;

키 : 50픽셀 ;

왼쪽 : 0px ;

색깔 : #f80909 ;

배경 : RGB ( 140 , 166 , 253 ) ;

}

위에서 언급한 속성에 대한 설명은 다음과 같습니다.

• “ 텍스트 정렬 ” 속성이 “로 설정됩니다. 센터 ”를 사용하여 텍스트 위치를 중앙에 맞춥니다.
• 다음, ' 글꼴 두께 '는 '로 할당됩니다. 굵게 ” 이미지 캡션 글꼴을 설정합니다.
• 그런 다음 ' 색깔 ” 속성은 접근한 요소의 색상을 설정하는데 활용됩니다.
• “ 배경 ” 속성은 요소 배경색을 설정합니다.
• '를 포함한 기타 속성 위치 ”, “ 키 ', 그리고 ' 너비 ”는 각각의 기능을 적용하는 데에도 사용됩니다.

산출

이미지 아래에 캡션을 작성하는 방법에 대해 논의했습니다.

결론

이미지 아래에 캡션을 쓰려면 사용자는 ' <무화과> ” 요소 또는 간단한 “ <사업부> ” 컨테이너. '