웹 프로그래밍 5/19 - CSS3 media

CSS3 media 

종합예제

CSS3 media

<style>
        @media screen and (max-width: 499px) {
            body { background: red; }
        }

        @media screen and (min-width: 500px) and (max-width: 799px) {
            body { background: green; }
        }

        @media screen and (min-width: 800px) {
            body { background: blue; }
        }
</style>

media type

• all
• print
• screen
• speech

<link rel="stylesheet" media="print and (max-width: 499px)" href="print.css">

실습

인쇄할 때만 Confidential 워터마크를 출력하기.
워터마크는 HTML 본문에는
<div id="watermark">
<h1>Confidential</h1>
</div>
CSS는
#watermark {
display: block;
color: red;
position: absolute;
left: 50%;
top: 50%;
width: 300px;
margin-left: -150px;
border: 2px red solid;
text-align: center;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}