-linked style sheet 사용법-------------------
<link rel="stylesheet" type="text/css" href="파일명.css">
설명
스타일을 기술하는 파일(파일명.css)을 따로 만들어서 html 문서에<link>태그에 url을 지정하여 정의해줌.
지정한 스타일은 웹페이지 전체에 반영된다.
또한 단독 파일로 존재하므로 복수의 html 문서들이 정의한 스타일을 공유할수도 있다.
ex>
<html>
<head>
<title>linked sytle sheet</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h1>linked 스타일시트</h1>
</body>
</html>
main.css
h1{font-style:italic;}
-embeded style sheet 사용법-------------------
<style type="text/css">
<!--
tag1{스타일 옵션(property):값(value);}
-->
</style>
embedded 스타일 시트에서 <style>태그는 스타일을 정의하는 태그로 지금의 웹페이지에 스타일 옵션을 기술하여 적용시킨다는것을 알려줌.
<style>태그는 <head> 태그와 </head> 태그 사이에 삽입하여 웹 페이지 전체에 반영한다.
<style>태그를 인식 못하는 웹브라우저를 위해서 <!-- 와 -->사이에 스타일 옵션을 지정하면 주석으로 인식한다.
스타일 옵션을 지정할때는 스타일의 속성을 지정할 태그를 쓰고 {와}사이에 스타일 옵션(property)과 값(value)을 지정해 준다.
스타일 옵션을 지정한 후에는 꼭 </style>태그로 닫아주어야한다.
ex)
<html>
<head>
<title>embedded style sheet</title>
<style type='text/css'>
<!--
H1{font-size:20px;}
-->
</style>
</head>
<body>
<h1>embedded 스타일 시트 예제 이다.20픽셀로 보이니???</h1>
</body>
</html>
ex2)
<html>
<head>
<title>엠베디드 스타일 시트 예제_2</title>
<head>
<style type="text/css">
<!--
td{
border-color:#336699 #446655 skyblue pink;
border-width:0 0 2 5;
}
td.aaa{
border-color:green blue skyblue red;
border-width:2 3 5 5;
}
td.bbb{
border-color:rgb(246, 255, 128) rgb(246, 255, 128) rgb(246, 255, 128) rgb(255, 255, 169);
border-width:10 10 10 10;
}
-->
</style>
</head>
<body>
<table border="1" cellspacing="0" width="600" style="border-color: skyblue 000000 000000 000000; border-width: 3 0 0 0;">
<tr>
<td width="200" bgcolor="ivory" class="aaa" style="font-size:20px;">
넓이 200 픽셀 배경은 아이보리 컬러 스타일시트는 aaa 입니다.
글자 크기는 20픽셀이 맞죠??
</td>
<td width="400" bgcolor="olive" class="aaa">
넓이 400 픽셀 배경은 올리브 컬러 스타일시트는 aaa 입니다.
글자 크기는 노멀합니까??
</td>
</tr>
<tr>
<td width="200" bgcolor="ivory" class="bbb">
bbb 클라스가 적용된 부분입니다...
</td>
<td width="4000" bgcolor="red" class="bbb">
bbb 클라스가 적용된 부분입니다...
</td>
</tr>
<tr>
<td width="200" bgcolor="ivory" class="aaa">
</td>
<td width="400" bgcolor="ivory" class="aaa">
</td>
</tr>
<tr>
<td width="200" bgcolor="pink" class="bbb">
핑크 배경에 클라스는 bbb
</td>
<td width="400" bgcolor="yellow" class="bbb">
노랑 배경에 클라스는 bbb
</td>
</tr>
</table>
--inline 스타일 사용법------------------------
<tag sytle="스타일 옵션(property):값(value)"></tag>
inline 스타일은 일반 태그에 바로 스타일을 지정하여 일정한 범위 안에서만
스타일을 표현할수 있다.
태그 안에 스타일을 정의 한 후 스타일 옵션(property) 과 값(value)을 설정해 주면 종료 태그가 쓰이기 전까지 지정한 스타일로 표현합니다.
ex)
<html>
<head>
<title>inline style sheet 사용예제</title>
</head>
<body bgcolor="black">
<h1 style="font-style:italic"> 인라인 스타일 예제 입니다.바탕은 검정 글자체는 이탤릭체입니까//</h1>
</body>
</html>
사이트제작팁
매니져: 미정
패밀리 사이트 바로가기
