|
 |
|
|
홈 > 게시판 > 공지사항 |
 |
|  스타일시트(CSS)의 적용예제 | |
| |
 님이 2003년 02월 27일 12:13:36 에 작성한 글입니다. (read:7650, vote:1072) 추천하기 |
|
|
<HTML>
<HEAD>
<style type="text/css">
<!--
body,td {font-size:9pt; color:black; line-height:1.4;}
a {font-size:9pt; color:darkblue; text-decoration:none;}
a:hover {font-size:9pt; color:red; text-decoration:underline;}
.myfont {font-family:궁서; font-size:11pt; color:#888888;}
-->
</style>
</HEAD>
<BODY>
<br><br><br>
<center>
스타일 시트에 대한 소개를 합니다.<br>
<table cellpadding=3 cellspacing=1 bgcolor=#C7CBEF>
<tr><td width=400 bgcolor=#E7EBFF align=center valign=middle>
폰트피아 홈페이지
</td></tr>
<tr><td bgcolor=#F2F8F8 width=400 class="myfont">
지금은 홈페이지 리녈중입니다.<br>
빠른 시일내에 완성시키겠습니다.
</td></tr>
</table>
<br>
<a href="http://www.fontpia.co.kr" target="font">폰트피아 홈페이지</a><br>
<font style="color:red;">font 태그를 이용하여 색상만 바꿉니다.</font>
</BODY>
</HTML>
body,td {font-size:9pt; color:black; line-height:1.4;}
위 스타일지정은, 아래처럼 body,td를 따로따로 지정한 효과와 같습니다.
body {font-size:9pt; color:black; line-height:1.4;}
td {font-size:9pt; color:black; line-height:1.4;}
이처럼 똑같은 내용의 스타일을 지정할때는 ','를 이용하여 한꺼번에 써주셔도 됩니다.
body,td를 9포인트, 검정색, 줄간격 140%(1.4는 140%를 의미함)로 지정하였기 때문에,
<body> 와 </body>안에 쓰여진 문장이나 <td>와 </td>안에 쓰여진 문장은 기본적으로
9포인트, 검정색, 줄간격 140%로 보여집니다.
물론, <font>태그를 이용하여 따로 지정하게 되면 <font>태그에 지정한 속성을 따라가게 됩니다.
가장 아래에 있는 "font 태그를 이용하여 색상만 바꿉니다." 라는 문장은 기본적으로 <body> 와 </body>안에
쓰여진 문장이기 때문에 9포인트, 검정색, 줄간격 140%로 보여져야 하지만, 따로 color:red;라고 속성을
주었기 때문에 색상만 빨간색으로 변화한 것입니다. 나머지 속성인 9포인트 140%의 줄간격은 유지됩니다.
a {font-size:9pt; color:darkblue; text-decoration:none;}
a:hover {font-size:9pt; color:red; text-decoration:underline;}
링크문장은 <a href="주소">링크문장</a> 과 같은 태그로 사용합니다.
따라서 위 스타일처럼 a를 지정해주면 따로 font태그를 이용하여 지정을 해주지 않는 이상,
문서내의 모든 링크문장은 9포인트,어두운파란색,밑줄없음으로 보여지게 됩니다.
예제 실행해보기를 눌러 링크문장인 "폰트피아 홈페이지" 위에 마우스를 가져가 보시기 바랍니다.
"폰트피아 홈페이지"문장이 빨간색이고 밑줄이 쳐지는 것을 발견할 수 있습니다.
그 이유는 바로 a:hover라는 스타일 지정을 해주었기 때문입니다.
.myfont {font-family:궁서; font-size:11pt; color:#888888;}
예제에서 가장 주목할 만한 스타일지정입니다. 다른 스타일지정은 body,td,a처럼 태그에 대한
지정을 한 반면에 여기서는 myfont라는 태그에도 없는 스타일을 지정하였습니다.
이런 스타일을 사용자정의 스타일이라고 합니다. 지정방법은 반드시 '.'을 앞에 붙여서 하고,
사용할때는 예제처럼 class="myfont"와 같이 '.'을 빼고 사용합니다.
이런 사용자정의 스타일은 여러번 반복되는 폰트스타일을 미지 지정해놓고 class="myfont"와 같이
간단히 하기 위해 사용되어 집니다.
"지금은 홈페이지 리녈중입니다. ....." 의 문장은 <td>와 </td>안에 있기 때문에
9포인트, 검정색, 줄간격 140%으로 보여져야 원칙이지만, class="myfont"로 따로 지정을 하였기 때문에
궁서체,11포인트,#888888 색상으로 보여지게 되는 것입니다.
|
| Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0) |
|
|
|
 |
|
|
라이센스 확인
