| 폰트표현 |
|
| 1 폰트체 조절 - [ font-family ] |
|
| 2 폰트크기 조절 - [ font-size ] |
|
| 3 폰트굵기 조절 - [ font-weight ] |
|
| 4 폰트스타일 조절 - [ font-style ] |
|
| 5 대소문자 변환 - [ text-transform ] |
|
| 6 줄긋기 표현 - [ text-decoration ] |
|
| 7 색상 - [ color ] |
|
| 8 예제 |
|
 |
안녕하세요^^ 여러분 드디어 스타일시트 본격적인 강좌가 시작되었습니다.
이번장에서 다룰 폰트속성은 배운대로 표현을하게되면 6가지의 속성으로 나누어 지게 되는데 다소 실전에서 그러한 방식대로 적용을 하지 않고 또한 처음부터 배우시는데 어려울듯 하여 통상적으로 사용하는 방법으로 강의를 하겠으며 예제는 되도록 Embedding방식과 Class을 응용한 방법으로 드리도록 하겠습니다.
천천히 따라해 보세요^^ |
|
| 1. 폰트체 조절 - [ font-family ] ... [ TOP ] |
|
포트체를 지정하는 속성으로 "font-family:글꼴이름" 와 같은 방법으로 표현합니다.
계략적인 형식은 전 강의에서 설명드렸으니 참고하시구요^^
HTML에서 배운 font태그에서 face속성과 같으나 조금 다른점은 여러개의 폰트를 지정할 수 있다는 점입니다.
인터넷은 여러사람이 전혀 다른 컴퓨터사양을 가지고 있기 때문에 홈피를 제작하는 사람의 주관적인 관점으로 좋은 폰트를 쓴다고 하여도 상태방 즉 클라이언트에서는 없는 폰트일 수 도 있거든요.
해서, "font-family:휴먼모닥체,휴먼편지체,돋음" 이런식으로 지정한 폰트가 없으면 다른 폰트로 대체한다. 뭐 이런뜻 입니다.
그러나 인터넷은 가독성을 위하여 대도록 보기좋은것 보다는 읽기편한 폰트체의 설정을 권합니다.^^
참고적인 설명이 너무 길어졌내요^^ 예제를 한번 볼까요^^
[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.font_test {font-family:궁서}
</style>
</head>
<body>
<font class='font_test'>재미있는 강의 인포카페 허걱^^</font>
</body>
</html>
|
|
| 2 폰트크기 조절 - [ font-size ] ... [ TOP ] |
|
역시 HTML에서 배웠던 size속성과 비슷합니다.
그러나 스타일시트의 장점은 계속 이어집니다.^^ HTML에서의 폰트 Size속성은 1~7까지의 크기를 지정했지만 스타일시트이 font-size속성은 무한대로 생각하시면 됩니다. 설만 그렇게 크게 지정하시는 분은 않게시겠죠^^ 자 그럼 예제를 볼까요^^*
[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.font_test{font-size:50}
</style>
</head>
<body>
<font class='font_test'>재미있는 인포카페^^</font>
</body>
</html>
|
|
| 3 폰트굵기 조절 - [ font-weight ] ... [ TOP ] |
|
HTML에서의 <b>속성과 같습니다. 글자의 크기를 굵게 표현하지요^^
[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.font_test{font-weight:bold}
</style>
</head>
<body>
<font class='font_test'>재미있는 인포카페^^</font>
</body>
</html>
|
|
| 4 폰트스타일 조절 - [ font-style ] ... [ TOP ] |
|
폰트의 스타일을 설정하는 부분으로 표준(normal), 이탤릭(italic)으로 사용하며 스타일이 italic로 적용된 예제를 보시면 HTML태그의 <i>속성과 같음을 아실수 있습니다. 참고로 많이 사용하지는 않죠^^
[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.font_test{font-style:italic}
</style>
</head>
<body>
<font class='font_test'>재미있는 인포카페^^</font>
</body>
</html>
|
|
| 5 대소문자 변환 - [ text-transform ] ... [ TOP ] |
|
대소문자를 변환하는 옵션으로 영문에만 적용되며 스타일속성의 값으로는 다음과 같이 적용됩니다.
uppercase : 모두 대문자로 변환
lowercase : 모두 소문자로 변환
capitalize : 띄어쓰기할때 첫 글자를 대문자로 변환
[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.font_test1 {text-transform:uppercase}
.font_test2 {text-transform:lowercase}
.font_test3 {text-transform:capitalize}
</style>
</head>
<body>
<font class='font_test1'>nice to meet you</font><br>
<font class='font_test2'>Nice to meet you</font><br>
<font class='font_test3'>nice to meet you</font>
</body>
</html>
|
|
| 6 줄긋기 표현 - [ text-decoration ] ... [ TOP ] |
|
텍스트에 줄을 긋는 기능으로 HTML에서의 <u>,<s>태그등과 비슷합니다.
underline : 밑줄긋기
overline : 윗줄긋기
line-through : 가운데 줄긋기
[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.font_test1 {text-decoration:underline}
.font_test2 {text-decoration:overline}
.font_test3 {text-decoration:line-through}
</style>
</head>
<body>
<font class='font_test1'>재미있는 인포카페^^</font><p>
<font class='font_test2'>재미있는 인포카페^^</font><p>
<font class='font_test3'>재미있는 인포카페^^</font>
</body>
</html>
|
|
| 7 색상 - [ color ] ... [ TOP ] |
|
Color속성에 대해서는 굳이 설명을 드리지 않아도 아시겠죠^^ 더 중요한 것은 Color의 값을 어떻게, 또는 보기좋은 색상을 넣을지가 더 관심사 인것 같습니다. 컬러체계에 대해서는 HTML강좌에 설명이 되어있으니 참조하세요^^*
[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.font_test {color:red}
</style>
</head>
<body>
<font class='font_test'>재미있는 인포카페^^</font>
</body>
</html>
|
|
| 8 예제 ... [ TOP ] |
|
자~~~ 폰트와 관련된 그리고 기타 속성들에 대해서도 알아보았습니다. 위 설명에서는 스타일속성을 하나씩만 설명을 드리기 위해서 적용을 했지만 지금 예제는 여러가지를 하나의 클래스로 만들어 적용시키는 예제를 만들어 보겠습니다. 조금 더 설명을 드리면 폰트와 관련된 스타일 속성은 꼭 font관련 태그에서만 적용되는것이 아니라 input, textarea, select등 광범위하게 사용이되니 꾸준히 노력해 보세요^^
[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.font_test1 {color:red;font-size:100;font-family:궁서;text-decoration:line-through;font-style:italic}
.font_test2 {color:blue;font-size:100;font-family:돋음;}
</style>
</head>
<body>
<font class='font_test1'>재미있는 이포카페^^</font><p>
<font class='font_test2'>재미있는 인포카페^^</font>
</body>
</html>
|
