<style>
    @media screen
    {
    p.spTest {font-family:굴림; font-size:10px; font-weight:bold}
    }
     
    @media print
    {
    p.spTest {font-family:바탕; font-size:25px}
    }
    </style>

    <p class="spTest">화면에 나타나는 글꼴 속성과 인쇄시 글꼴 속성을 서로 다르게 나타낼 수 있습니다. 이 문서를 인쇄한 후 이 부분을 비교해 보세요!!</p>

    위의 소스 코드에서 가장 중요한 부분은 바로 @media 부분이다. CSS는 서로 다른 미디어 타입을 가질 수 있다. 대표적인 미디어로는 스크린(screen)과 프린트(print)가 있다. 위의 예에서 @media screen 부분은 화면에 표시될 부분에 대한 CSS 정의의고, @media print 부분은 프린트시 표시될 부분에 대한 CSS 정의이다. CSS에 대한 어느 정도의 지식이 있는 사람이라면 위의 사실을 통해 얼마든지 화면에서의 CSS와 인쇄에서의 CSS를 다르게 정의할 수 있을 것이다.



    Posted by 부니기