**** 0602ex01.htm ****
<html>
<head>
<style type="text/css">
/*실습1*/
h3
{
font-size:40;color:blue;
}
p
{
font-size:15;color:silver;font-weight:bold;
}
</style>
<link rel="stylesheet" type="text/css" href="0602ex01.css">
</head>
<body>
<h1>실습1</h1>
Embedded Style로 p태그와 h3태그를 선택자로 하여 글자크기와 글자색을 정의 하여 작성.
<h3>CSS의 Embedded Style</h3>
<p>선택자로 h3 사용</p>
<hr><br><br>
<h1>실습2</h1>
div태그에 inlineStyle을 적용, 글씨체, 글자크기, 글자색 정의 출력.
<div style="font-size:20;color:red;font-family:궁서">InlineStyle로 지정하여 처리</div>
<hr><br><br>
<h1>실습3</h1>
외부파일로 다음과 같이 출력(0602ex01.css참조)<br>
u를 선택자로 배경색과 글자크기 글자색 정의하여 다음과 같이 출력<br>
<u>언더라인이 적용된 외부파일 이용</u><br>
이것은 아무것도 적용되지 않는 부분.
</body>
</html>
**** 0602ex01.css ****
u{background-color:green;font-size:25;color:white;}
**** 0602ex02.htm ****
<html>
<head>
<style type="text/css">
/*실습4*/
h2,p
{
font-size:30;font-family:궁서;
}
i,h3
{
font-size:35;font-family:굴림;
}
div span,p u
{
color:blue;background-color:yellow;font-family:굴림;
}
/*실습5*/
.hi
{
color:yellow;background-color:green;
}
/*실습6*/
a:link,a:active,a:visited
{
text-decoration:none;
}
a:hover
{
background-color:green;color:white;
}
/*실습7*/
#bodyid
{
background-color:silver;color:blue;
}
</style>
</head>
<body id="bodyid">
<h1>실습4</h1>
p태그와 h2태그에 같은 글자체, 글자크기 정의<br>
i태그와 h3태그에 같은 글자체, 글자크기 정의<br>
<p>p태그와 h2태그에 같은 글자체, 글자크기 정의</p>
<h2>p태그와 h2태그에 같은 글자체, 글자크기 정의</h2>
<i>i태그와 h3태그에 같은 글자체, 글자크기 정의</i>
<h3>i태그와 h3태그에 같은 글자체, 글자크기 정의</h3>
<hr><br><br>
<h1>실습5</h1>
p태그 안에 u태그가 있을때 적용(배경색:노랑, 글자색:파랑)<br>
div태그안에 span이 있을때 적용<br>
<p>여기는 문단을 표시하는 p태그 <u>여기는 언더라인 u태그</u> 입니다.</p>
<div>하위태그에 <span>스타일이 적용</span>되는 예문입니다.</div>
<hr><br><br>
<h1>실습6</h1>
class에 배경색 지정<br>
링크에 밑줄이 나오지 않도록 지정하고 링크위에 마우스가 올라가면 배경색이 변하게 지정<br>
(2라인, naver 링크 지정)<br>
<p class="hi">안녕하세요</p>
<table>
<tr><td><a href="#">1라인입니다.</a></td></tr>
<tr><td><a href="#">2라인입니다.</a></td></tr>
<tr><td>3라인입니다.</td></tr>
<tr><td>4라인입니다.</td></tr>
</table>
<a href="#">naver</a>
<hr><br><br>
<h1>실습7</h1>
body 태그에 id 지정하여 글자색(blue)과 배경색(silver)을 지정.<br>
,여기는 몸체입니다.<br>
</body>
</html>
