반응형
폰트 관련 스타일에 대해 알아보겠습니다.
크게 글자 모양관련 3가지 속성으로는 색상, 크기, 글꼴 모양입니다.
예제를 통해 볼드체로 변경하도록 하겠습니다. 볼드체 변경으로 두가지 방법이 있습니다.
<b>와 <span>(클레스로 적용)
<head>
<title></title>
<style type="text/css">
body {color:Green; font-size:11pt;font-family:@맑은 고딕;}
.boldText{font-weight:bold;}
</style>
</head>
<body>
<b>볼드체</b><span class="boldText">볼드체</span><br />
</body>
</html>
| 1. <body>안에 있는 모든 폰트-색상 : 녹색; 폰트-크기 : 11px; 폰트-글꼴 : 맑은고딕 적용 2. 점클래스 선언. 속성은{ 폰트-굵기: bold; } 3. <body> 안에 <span Class속성으로=위에서 선언된 점클레스 호출> 하여 적용 - 추가 - 볼드체 변경 방법을 응용하여 #(아이디)값을 통해 이텔릭체로 적용 가능 (파일 첨부) |
이번에는 폰트에 밑줄, 취소선을 적용시켜 보도록 하겠습니다.
밑줄 적용방법 2가지 : <u> 와 <span style>
취소선 적용방법 3가지 : <s>와<strike>,<span style>
<head>
<title></title>
<style type="text/css">
body {color:Navy; font-size:9pt;font-family:@맑은 고딕;}
.strikeText{ text-decoration:line-through overline;}
</style>
</head>
<body>
<u>밑줄문자</u> <span style="text-decoration:underline;">밑줄문자</span><br />
<s>취소선1</s> <strike>취소선2</strike> <span class="strikeText">취소선3</span>
</body>
</html>
결과:
| 6줄-.strikeText{ text-decoration:line-through overline;} = 2가지 style정의 |
10.폰트관련스타일.htm반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| 12.CSS - 텍스트관련 (0) | 2009.07.29 |
|---|---|
| 11.CSS - 정렬관련스타일 (0) | 2009.07.28 |
| 09.CSS - 영역설정 (0) | 2009.07.28 |
| 08.CSS - 중첩태그 (0) | 2009.07.28 |
| 07.CSS - 중첩클래스 (0) | 2009.07.28 |
Comments