(주)모리스디자인
 
라이센스 확인 장바구니 사이트맵

홈 > 게시판 > 공지사항
구매관련(19)  설치관련(4)  변경관련(5)  사용법(14)  게시판(14)  카페/클럽(0)  이상증상(3)  기타(4)  
   스타일시트(CSS)의 적용예제
  님이 2003년 02월 27일 12:13:36 에 작성한 글입니다. (read:7596, vote:1043) 추천하기

<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)   
No 분류 제목 이름 등록일 조회수
- 갑자기 웹폰트로 보여지지 않고 기본서체로 보여집니다.   03/02/27 2661
- 글꼴폴더에는 설치가 되어 있는데, 포토샵,나모,워드에서는 보이지 않...   03/02/27 9141
- 웹폰트를 사용한 후 페이지가 한번에 로딩되지 않습니다.   03/02/27 5688
- 웹폰트 다운로드에서 사용까지..   03/02/27 11083
- 폰트 구매 라이센스 안내 운영자  22541
- 저작권법에 걸려서 법원에서 연락이 왔습니다, 어떻게 해야합니까? 운영자  23408
71 사용법 포토샵에서 글자가 갑자기 크게 나와요.   04/01/06 9468
68 사용법 [별자리와 12지신], [군것질]은 어떻게 사용합니까?   04/01/06 8757
62 사용법 포토샵에서 글꼴 목록이 영문으로 나올때는..   04/01/06 4474
61 사용법 Windows Server 2003 사용자분들 참고하십시요.   03/12/08 4383
39 사용법 프레임마다 스타일을 지정해줘야 하나요?   03/02/27 5064
38 사용법 두개이상의 웹폰트를 한페이지에 사용하기   03/02/27 6029
37 사용법 스타일시트(CSS)로 지정할 수 있는 폰트속성   03/02/27 6444
36 사용법 스타일시트(CSS)의 적용예제   03/02/27 7596
35 사용법 스타일시트(CSS)에 대한 도움말   03/02/27 5962
34 사용법 나모등의 웹에디터를 이용하여 사용하기   03/02/27 6773
  [1][2]
copyright 2002-2003 Ultraboard