반응형
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
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190701 Basic Study 67(그리드 시스템) (0) | 2019.07.01 |
|---|---|
| HTML5 - 190701 Basic Study 66(반응형 웹 기초 구성) (0) | 2019.07.01 |
| HTML5 - 190623 Basic Study 64(에릭마이어 reset.css) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 63(아코디언 네비게이션 바) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 62(드롭다운 네비게이션 바) (0) | 2019.06.23 |
