본문 바로가기

Python_WEB/HTML

HTML5 - 190701 Basic Study 65(프린터, 모니터 CSS)

1. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>9일차</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<link rel="stylesheet" href="css/ex01-mo.css" media="screen">
<link rel="stylesheet" href="css/ex01-pr.css" media="print">
<style media="print">
/* @import url("css/ex01-pr1.css"); */
h2{
	color:red;
}

</style>
</head>

<body>
<h1> 안녕하세요 welcom to </h1>
<h2> welcome to world 감사합니다 </h2>
</body>
</html>

 

2. 모니터용 CSS

@charset "utf-8";
/* ex01-mo.css - 모니터용 스타일시트 */
/* CSS Document */

h1{
	background:red;
}

@font-face {
            font-family: '나눔고딕';
            src: local('NanumGothic'),
                 url('NanumGothic.eot'),
                 url('NanumGothic.ttf'),
                 url('NanumGothic.woff');
        }

<style>
@import‎‎ url('https://fonts.googleapis.com/css?family=Roboto');
</style>

h1{
	font-family:'나눔고딕'
}

 

3. 프린터용 1 CSS

@charset "utf-8";
/* ex01-pr.css - 프린터용 스타일시트 */
/* CSS Document */
@import url("css/ex01-pr1.css") print;
h1{
	color:blue;
	border:3px solid red;
}

 

4. 프린터용 2 CSS

@charset "utf-8";
/* ex01-pr1.css - 프린터용 스타일시트 */
/* CSS Document */

h1{
	box-shadow:5px 5px 1px black;
}

 

5. HTML / CSS 파일

ex01.html
0.00MB
ex01-mo.css
0.00MB
ex01-pr.css
0.00MB
ex01-pr1.css
0.00MB