사용자가 웹 페이지를 인쇄할 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?
5742 단어 css
사용자가 페이지를 인쇄하려고 할 때 웹 페이지의 CSS 스타일을 변경하려면
@media 의 미디어 쿼리 구문과 키워드 print 를 사용할 수 있습니다. 이 경우 키워드print는 미디어 유형입니다.TL; DR
<html>
<body>
<p>Hello World</p>
</body>
<!-- CSS styles for the body and the paragrapgh tags -->
<!--
Using the `@media` syntax and the defining
a type of `print` to change the styles when
users want to print the webpage.
-->
<style>
body {
background-color: white;
}
p {
color: red;
}
@media print {
body {
background-color: black;
}
p {
color: white;
}
}
</style>
</html>
예를 들어 다음과 같은
Hello World 단락을 보여주는 간단한 HTML이 있다고 가정해 보겠습니다.<html>
<body>
<p>Hello World</p>
</body>
</html>
이제
body 태그를 사용하여 white의 배경색을 paragraph로, red 요소의 색을 style 색으로 변경해 보겠습니다. 외부 스타일시트도 사용할 수 있습니다).<html>
<body>
<p>Hello World</p>
</body>
<!-- CSS styles for the body and the paragraph tags -->
<style>
body {
background-color: white;
}
p {
color: red;
}
</style>
</html>
이제 위 HTML 코드의 출력은 다음과 같습니다.
사용자가 웹페이지를 인쇄하고자 할 때
style 태그의 배경색을 body로, black 태그의 배경색을 paragraph로 변경하는 것을 목표로 합니다.이를 위해
white의 미디어 쿼리 구문과 키워드 @media를 사용하여 미디어 유형을 설정할 수 있습니다.다음과 같이 할 수 있습니다.
<html>
<body>
<p>Hello World</p>
</body>
<!-- CSS styles for the body and the paragrapgh tags -->
<!--
Using the `@media` syntax and the defining
a type of `print` to change the styles when
users want to print the webpage.
-->
<style>
body {
background-color: white;
}
p {
color: red;
}
@media print {
body {
background-color: black;
}
p {
color: white;
}
}
</style>
</html>
이제 사용자가 웹 페이지 인쇄를 선택하면 본문은 검은색이 되고 단락 텍스트는 흰색이 됩니다.
codesandbox에 있는 위의 코드를 참조하십시오.
그게 다야 😃!
이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.
Reference
이 문제에 관하여(사용자가 웹 페이지를 인쇄할 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/melvin2016/how-to-change-the-webpage-css-styles-when-the-user-prints-the-webpage-28jf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
