CSS 콘텐츠에 HTML 콘텐츠를 표시할 수 있나요?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 콘텐츠에 HTML 콘텐츠를 표시할 수 있나요?

Patricia Arquette

Oct 23, 2024 pm 09:32 PM

Can I Display HTML Content in CSS Content?

CSS 콘텐츠에서 .html 문서 또는 .html 부분을 표시할 수 있습니까?

CSS 콘텐츠 속성을 사용하면 다음을 지정할 수 있습니다. 요소 또는 의사 요소의 내용. 콘텐츠는 텍스트, 이미지 또는 URL일 수 있습니다. 콘텐츠가 URL인 경우 브라우저는 해당 URL에서 리소스를 가져와 요소 또는 의사 요소 내에 표시합니다.

.html 문서 또는 .html 조각을 CSS 콘텐츠 속성. 그러나 비슷한 효과를 얻기 위해 사용할 수 있는 몇 가지 해결 방법이 있습니다.

한 가지 해결 방법은 HTML 문서나 조각이 포함된 SVG 이미지를 사용하는 것입니다. 그런 다음 CSS 콘텐츠 속성에서 SVG 이미지를 참조할 수 있습니다. 이 방법은 모든 주요 브라우저에서 작동합니다.

또 다른 해결 방법은 데이터 URI를 사용하여 CSS 콘텐츠 속성에 HTML 문서 또는 조각을 포함하는 것입니다. 데이터 URI는 URL에서 임의의 데이터를 인코딩하는 방법입니다. 데이터 URI를 생성하려면 데이터 앞에 "data:" 문자열을 붙이고 그 뒤에 데이터의 MIME 유형과 쉼표를 붙입니다. 예를 들어 HTML 문서에 대한 데이터 URI를 생성하려면 다음 구문을 사용합니다.

data:text/html,<html><body><h1>Hello world!</h1></body></html>

로그인 후 복사

그런 다음 CSS 콘텐츠 속성에서 다음과 같이 데이터 URI를 사용할 수 있습니다.

content: url(data:text/html,<html><body><h1>Hello world!</h1></body></html>);

로그인 후 복사

이 방법은 대부분의 주요 브라우저에서 작동하지만 Internet Explorer에서는 지원되지 않습니다.

마지막으로 서버측 스크립트를 사용하여 CSS 콘텐츠를 생성할 수도 있습니다. 스크립트는 파일이나 데이터베이스에서 HTML 문서나 조각을 읽은 다음 CSS 콘텐츠 속성에서 사용할 수 있는 형식으로 콘텐츠를 출력할 수 있습니다. 이 방법은 다른 두 가지 방법보다 복잡하지만 표시되는 콘텐츠를 더 효과적으로 제어할 수 있습니다.

다음은 CSS 콘텐츠 속성을 사용하여 HTML 콘텐츠를 표시하는 방법에 대한 몇 가지 예입니다.

/* Display an image of an HTML document */
content: url(image.svg);

/* Display an HTML document fragment */
content: url(data:text/html,<html><body><h1>Hello world!</h1></body></html>);

/* Display the contents of an HTML file */
content: url(file.html);

/* Generate the CSS content using a server-side script */
content: url(/script.php);

로그인 후 복사

위 내용은 CSS 콘텐츠에 HTML 콘텐츠를 표시할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.