코드 색상 범례:<style type="text/css>...</style>, 내용 텍스트, 사용에 관한 설명.
라인이란 쉽게 이해하려면 자동드로 줄바꿈이 안 되는 것을 말한다.
추가적인 설명: HTML 규격, HTML 해설, CSS 규격 font 특성 설명, CSS font 특성 해설(요약)
견본 10(sample10)
.sample10 { font-size:15pt; }
<span class=sample10>견본 10(sample10)</span>
폰트 크기 설명 참조: CSS2
견본 11(sample11)
.sample11 { font-size:15pt; font-family:궁서; }
<span class=sample11>견본 11(sample11)</span>
폰트 가족(family) 설명 참조: CSS2, font-family 목록
견본 12(sample12)
.sample12 { font-size:15pt; color:blue;}
<span class=sample12>견본 12(sample12)</span>
색상 설명 참조: CSS2, 색상 목록
견본 13(sample13)
.sample13 { font-size:15pt; font-weight:bold;}
<span class=sample13>견본 13(sample13)</span>
폰트 굵기(밝기) 설명 참조: CSS2
견본 20(sample20)
.sample20 { font-size:15pt; font-style:italic }
<span class=sample20>견본 20(sample20)</span>
폰트 스타일 설명 참조: CSS2
견본 21(sample21)
.sample21 { font-size:15pt; font-variant:small-caps; }
<span class=sample21>견본 21(sample21)</span>
폰트 변화 설명 참조: CSS2
견본 30(sample30)
.sample30 { font-size:15pt; text-decoration:overline;}
<span class=sample30>견본 30(sample30)</span>
폰트 장식(방향) 설명 참조: CSS2
견본 31(sample31)
.sample31 { font-size:15pt; letter-spacing:.5em;}
<span class=sample31>견본 31(sample31)</span>
폰트 글자 간격 설명 참조: CSS2
견본 32(sample32)
.sample32 { font-size:15pt; line-height:2em; }
<p style="border: solid thin green; border-width:1pt;">
<span class=sample32>견본 32(sample32)</span>
</p>
외부 틀은 블럭으로 줄 높이를 볼 수 있게 하기 위하여 설정하였슴.
2em은 글자 높이의 2배를 의미.
줄 높이 설명 참조: CSS2
견본 40(sample40)
.sample40 { font-size:15pt; text-transform:uppercase;}
<span class=sample40>견본 40(sample40)</span>
폰트 변환 설명 참조: CSS2
견본 50(sample50)
.sample50{ font: italic bold 15pt/18pt "바탕", serif; }
<span class=sample50>견본 50(sample50)</span>
폰트 약식 명령 설명 참조: CSS2
견본 51(sample51)
.sample51{ font: normal 15pt "areal narrow", serif; }
<span class=sample51>견본 51(sample51)</span>
이 색상은 코드와 관계없이 설명을 위해 삽입 한 색상임
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">
<html lang="ko">
<head>
<title>Trio 홈페이지 - 텍스트(라인) 스크립트 만들기 예제</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC-KR">
<style type="text/css">
.sample10 { font-size:15pt; }
.sample11 { font-size:15pt; font-family:궁서; }
.sample12 { font-size:15pt; color:blue;}
.sample13 { font-size:15pt; font-weight:bold;}
.sample14 { font-size:15pt; line-height:2em;}
.sample20 { font-size:15pt; font-style:italic }
.sample21 { font-size:15pt; font-variant:small-caps; }
.sample30 { font-size:15pt; text-decoration:overline;}
.sample31 { font-size:15pt; letter-spacing:.5em;}
.sample32 { font-size:15pt; line-height:2em; }
.sample40 { font-size:15pt; text-transform:uppercase;}
.sample50 { font: italic bold 15pt/18pt "바탕", serif; }
.sample51{ font: normal 15pt "areal narrow", serif; }
</style>
<style type="text/css">에서 </style>까지의 모든 내용을
별도 화일 file.css에 저장하고 전체 부분을
<link rel="stylesheet" href="file.css" type="text/css">
로 대체하여도 같은 결과를 갖는다.
화일 안에 <style type="text/css">와 </style>를 포함시키지 않아야 한다.
여러번 복사해야 하는 내용은 이렇게 하는 것이 편리하다.
</head>
<body>
내용 코드는 상기 설명에 각각 있으므로 생략한다.
</body>
</html>
|
제공