& lt; figure & gt; CSS의 요소?

html5<figure></figure> 요소 및 CSS 스타일 응용 프로그램에 대한 자세한 설명

웹 페이지를 작성할 때는 익숙하지 않은 HTML 요소 (예 :<figure></figure> . 이 기사는 설명 할 것입니다<figure></figure> 요소의 사용은 무엇이며 CSS를 사용하여 요소를 스타일링하는 방법.

<figure></figure> 그림, 차트, 사진, 코드 스 니펫 등과 같은 독립적 인 스트리밍 컨텐츠를 표시하기 위해 HTML5에 추가 된 새로운 요소입니다. 이러한 내용은 일반적으로 페이지의 주요 내용과 관련이 있지만 독립적으로 이해할 수 있습니다.<figure></figure> 포장하면 페이지 구조를 더 명확하게 만들 수 있습니다.

예를 들어, 이미지를 웹 페이지에 삽입하고 제목을 추가하려면 사용할 수 있습니다.<figure></figure> 그리고<figcaption></figcaption> 요소:

<figure>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174278751238156.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSS의 <Figure 요소는 무엇입니까?">
  <figcaption>이미지 제목 또는 설명</figcaption>
</figure>

이 예에서<figure></figure> 요소에는 a<img alt="& lt; figure & gt; CSS의 요소?" > 태그와 하나<figcaption></figcaption> 상표.<figcaption></figcaption> 이미지의 제목 또는 설명을 제공하여 내용의 의미를 향상시키는 데 사용됩니다.

사용<figure></figure> 요소의 장점은 다음과 같습니다.

• 페이지 구조의 선명도 향상 : 페이지 컨텐츠를 이해하고 유지 관리하기 쉽게 만듭니다.
• SEO 효과 향상 : 검색 엔진은 페이지 컨텐츠의 구조와 의미를보다 쉽게 ​​이해할 수 있습니다.
• 접근성 향상 : 스크린 리더는 콘텐츠를 더 잘 식별하고 해석하여 장애가있는 사람들이 쉽게 접근 할 수 있도록합니다.

CSS에서는 다른 HTML 요소와 동일하게 수행 할 수 있습니다.<figure></figure> 요소는 예를 들어 스타일입니다.

 수치 {
  마진 : 20px;
  국경 : 1px Solid #CCC;
  패딩 : 10px;
}

figcaption {
  텍스트 정렬 : 센터;
  글꼴 스타일 : 이탈리아;
}

위의 CSS 코드를 통해 제어 할 수 있습니다<figure></figure> 요소의 여백, 경계 및 내면의 여백,<figcaption></figcaption> 요소의 텍스트 정렬 및 글꼴 스타일.

이 기사가 당신이 그것을 더 잘 이해하고 사용하도록 도와 줄 수 있기를 바랍니다.<figure></figure> 웹 페이지 구조를 명확하고 쉽게 유지 관리하고 액세스 할 수있는 요소.

위 내용은 & lt; figure & gt; CSS의 요소?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!