CSS에서 사진의 캡션으로 텍스트를 표시하는 방법

웹 마스터는 CSS (Cascading Style Sheet)를 사용하여 웹 페이지에 텍스트를 표시하고 스타일을 지정할 수 있습니다. 텍스트를 사진의 캡션으로 표시하려면 캡션 텍스트에 대한 CSS 코드 클래스를 만든 다음 각 캡션에 클래스 식별자를 태그하여 텍스트를 캡션 스타일로 자동 포맷합니다.

1.

일반적인 웹 디자인 프로그램, HTML 편집기 응용 프로그램 또는 Microsoft 메모장 일반 텍스트 도구를 시작하십시오. 서식을 지정할 캡션이 포함 된 웹 페이지를 엽니 다.

2.

페이지 상단의 머리글 섹션으로 스크롤하십시오. 헤더 섹션은 ""태그로 시작하여 ""태그로 끝납니다.

삼.

다음 코드 스 니펫을 ''태그 바로 앞에 입력하거나 붙여 넣으십시오.

4.

중괄호 사이의 각 속성을 강조 표시하고 편집하여 캡션 텍스트의 스타일을 지정하고 서식을 지정하십시오. 예를 들어, "font-size"요소를 원하는 캡션 텍스트 크기로 변경하십시오. "font-family"를 원하는 글꼴로 편집하십시오. 웹 페이지의 나머지 텍스트보다 두드러 지거나 페이지의 다른 부분에서 사용되는 글꼴과 일치하는 글꼴을 선택하고 싶을 수 있습니다. "# 000000"- 표준 검정색 텍스트에서 원하는 색상 코드로 변경하십시오. 캡션을 굵게 표시하려면 "font-weight"에서 속성을 "normal"에서 "bold"로 변경하십시오.

5.

""태그와 ""태그 사이의 웹 페이지 본문 섹션에서 스타일을 적용 할 각 사진 캡션의 위치로 스크롤하십시오.

6.

캡션 텍스트 바로 앞에 ""을 붙여 넣거나 입력하십시오. 캡션 텍스트 뒤에 ""을 삽입하십시오. 코드는 다음과 같아야합니다.

이미지의 내용을 설명하는 캡션 텍스트 예제입니다.

7.

웹 페이지를 저장하고 호스트의 콘텐츠 관리 시스템의 제어판이나 파일 전송 프로토콜 응용 프로그램을 통해 일반적인 방식으로 웹 사이트의 호스트 서버에 업로드하십시오.

  • 온라인 색 선택 도구를 사용하여 4 단계에서 원하는 캡션 글꼴 색에 맞는 16 진수 색 코드를 찾습니다.
  • CSS 캡션 텍스트 스타일을 적용 할 각 웹 페이지에 대해이 절차를 반복하십시오.

인기 게시물