본문 바로가기

Python_WEB/HTML

HTML5 - 190608 Basic Study 17(CSS Basic 2)

반응형

1. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 1일차</title>
<!--외부 스타일 방식-->
<link href="css/ex02.css" rel="stylesheet">
</head>

<body>
<p class="bbb" id="bbb">아리가또 감사합니다</p>
<p>CSS 속성 이해하기</p>
<div>
	<p id="abc">글자 관련 속성</p>
    <p id="abc1">welcome to my world</p>
    <p id="abc2">welcome to my world</p>
    <p id="abc3">welcome to my world</p>
	<p id="abc4">welcome to my world</p>
</div>

<div id="box">
	<h1>안녕하세요</h1>
</div>

<!--
<p>
	<h1>안되요</h1>
</p>

<h1>
	<p>안되요</p>
</h1>
-->

</body>
</html>

 

2. CSS Code

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
p.bbb{
	border:5px double red;
	}
p#bbb{
	text-align:center;
	}
p#bbb.bbb{
	font-style:italic;
	}
p.bbb#bbb{
	font-weight:bold;
	}
	
div>p{
	font-family:"궁서", sans-serif;
	}
p#abc1{
	font-family:sans-serif;
}
p#abc{
	font-size:1.5em;
	font-weight:bold;
}
#abc2{
	font-variant:small-caps;
	font-style:italic;
	line-height:2;
	background:pink;
}
div p#abc3{
	font:italic small-caps bold 12px/24px "돋움";	
}
div #abc4{
	font:normal 24px/30px "맑은 고딕";
}
div#box{
	width:200px;
	height:200px;
	background:cyan;
	line-height:200px;
}
div#box h1{
	text-align:center;
	border:1px solid red;
	margin-top:75px;
}

 

3. HTML / CSS 파일

ex02.html
0.00MB
ex02.css
0.00MB

 

4. HTML 미리보기

< CSS 1일차 >

반응형

태그