▶ 알고계셨습니까?
인터넷 홈페이지에 기본글꼴이 아닌 글꼴을 사용하여도 방문자에게는 기본글꼴로 보여집니다.
이런 문제로 인해 이미지로 처리할 수 밖에 없었던 폰트디자인... 하지만,웹폰트 '티티체'를 이용하면 가능합니다.
▶ 인터넷 전용서체란?
인터넷 홈페이지를 다양한 글꼴을 이용하여 디자인 할수 있게하는 서체를 말합니다.
홈페이지에 방문하는 방문자의 컴퓨터에 해당 폰트가 설치되어 있지 않아도 디자인된 폰트로 보여지게 됩니다.
인터넷 전용서체의 제품중 웹전용 폰트는 아웃라인이 작은사이즈에서 뭉게지는 현상때문에 지정된 사이즈에서 최적화를 목적으로 제작한 서체입니다.
▶ 웹전용 서체의 장점
1. 화면용을 목적으로 해당 사이즈에서 최적의 퀄리티를 자랑합니다.
2. 한글,영문,심볼문자를 포함해도 사이즈가 적기 때문에 모든글자를 웹폰트로 볼 수 있습니다.
게시판, 웹페이지등에서 웹폰트 티티체를 자유롭게 쓸 수 있습니다,
▶ 티티체 사용시 주의점
1. 티티체는 9pt 에서 최적의 퀄리티를 냅니다.
다른 사이즈를 적용하면 상황에 따라서 문제가 될 수 있습니다.
[티티체 사용시에 고려할 상황]
◆ 홈페이지가 2개 이상의 주소로 구성되어 있는 경우에는 모두 적어 주시기 바랍니다.
◆ 티티체 설치법 티티체를 다운받아서 압축을 풀면 3개의 파일이 있습니다.
TTche.eot : 티티체 (웹폰트)
→ FTP 프로그램을 이용해서 자신의 계정에(홈페이지) 업로드합니다.
TTche.ttf : 투루타입폰트
→ 윈도우의 폰트 디렉토리에 복사합니다. (c:\Windows\Fonts , 혹은 c:\WINNT\Fonts)
(※ 한글, MS Word 등에서 사용하실수 있고 현제는 포토샵에서는 지원이 안됩니다.
TTche.htm : 티티체에서 지원되는 문자를 모두 보실수 있습니다.
◆ 티티체 에는 한자가 포함되어 있지 않습니다.
한자를 사용하면 공백으로 나오게 되니 한자부분은 기본서체로 태그지정을 해주셔야 합니다.
월화수목금토일 (月火水木金土日) 과 같이 보이려면 ... 월화수목금토일 (<font face="굴림">月火水木金土日</font>)<br>
◆ 티티체의 적용범위
티티체는 대부분의 무료,유료계정에서 사용이 가능합니다. 예외적으로, 라이코스 계정에는 웹폰트를 업로드 할수 없으며 웹폰트가 적용되지도 않으니 다른 계정을 이용하시기 바랍니다. 또한, 주소가 없는 홈페이지(다음카페,클럽)에는
직접 사용할 수가 없습니다. 다음카페에서 사용하시길 원하시는 분은, 다른 계정을 얻으셔서 그 계정주소를 등록해 주시면 됩니다. 그 후에, 등록한 계정에 HTML문서를 만들어서 올려놓은후, 다음카페에서는 프레임(<frame>)태그나,
iframe 태그를 이용하여 링크로 사용하시면 됩니다.
티티보드 에는 물론 적용이 가능하고 다른 게시판에도 적용이 가능하지만 자신의 계정 밑에 소스를 두고 사용할 수 있고, 폰트를 변경할 수 있는 성격의 게시판이라야 적용이 가능합니다. 폰트변경은 가능하여도,
링크형식으로 제공된 게시판을 사용할때는 적용할 수 없습니다.
티티보드 무료 ASP 게시판 및 유료 ASP 게시판에서는 작동 가능합니다.
[스타일시트(CSS:Cascading Style Sheet)]
◆ 스타일시트(CSS)란 무엇인가?
HTML문서는 일반적으로 텍스트와 그림으로 이루어져 있습니다. 스타일시트(Style Sheet)가 나오기 전까지는 HTML문서는 정보를 전달하는 것에 치중하였었지만, 이 스타일시트가 나오면서 부터는 HTML로도
디자인을 고려한 문서를 표현하게 되었습니다. 스타일시트는 아직 완전하게 지원되고 있지는 않지만, 단순한 HTML만으로는 표현할 수 없었던 많은 표현들을 가능하게 함으로서, 많은 사람들이 HTML을 사용하게
만들었습니다. 이 강좌에서 말하는 스타일시트는 CSS(Cascading Style Sheet)라고 불리우는 것으로서 현재 주로 사용되는 문법만을 설명할 것입니다.
CSS의 기본적인 형식은 다음과 같습니다. <style type="text/css">
<!--
TYPE {속성:값; 속성:값; ...}
-->
</style>
style을 지정하는 위치는 주로 <HEAD>와 </HEAD>사이나, <BODY>위에 삽입하고, <style type="text/css">와 </style>안에
입력합니다. type="text/css"라는 속성은 이 스타일시트의 형식을 알려주는 것입니다. 현재의 스타일시트의 형식은 모두 text/css 이므로 항상 이렇게 써주시면 됩니다. 무의미한 속성이기 때문에
<style>로만 사용하셔도 무방합니다.
HTML의 주석문인 <!--와 -->로 스타일을 감싸주는 이유는 스타일시트를 인식하지 않는 브라우져를 위한 방법입니다. 인터넷 익스플로러는 스타일시트를 인식하기 때문에 주석으로 감싸주지 않아도 되지만,
스타일시트가 여러개 중첩되거나 스타일시트를 링크시킬경우에 가끔 에러가 나는경우가 발생하므로, 항상 주석문으로 감싸주시기 바랍니다. TYPE은 어느곳에 이 스타일을 적용하는 것인지를 알려주는 것입니다.
몇가지 예제를 통하여 이해하시기 바랍니다.
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 색상으로 보여지게 되는 것입니다.
◆ 스타일시트(CSS)로 지정할 수 있는 폰트속성 font-family:웹정; 폰트이름은 font-family:로 지정합니다. font-size:10pt; 폰트크기는 font-size:로 지정합니다. pt와,px 둘다 가능합니다. color:#CFCFCF; 색상지정 방법입니다. line-height:150%; 줄간격을 지정합니다. text-decoration:none; 밑줄(underline), 밑줄없슴(none)
링크문장은 기본적으로 밑줄이 생기기 때문에 밑줄을 없애기 위해서는 반드시 none으로 지정해줘야 합니다.
일단 기본적인 스타일시트 문법을 살펴보았습니다. 폰트 이외에도 스타일시트로 적용할 수 있는 것은 매우 많습니다. 다른 적용방법은 다음 강좌를 통해 설명해 드리겠습니다.
여기까지 다 이해하셨으면 저희 홈페이지 대부분이 웹폰트로 적용하였으니 소스보기를 통하여 공부하시기 바랍니다.
[웹폰트 사용예제]
◆ 웹폰트를 사용할때 참고할 사항
티티체같은 웹폰트는 지정된 사이즈에서 최적의 퀄리티를 가지는 폰트 입니다.
따라서 웹폰트를 사용할때는 반드시 사이즈를 정확히 지정해 주어야 합니다. 티티체의 사이즈는 9pt 입니다.
<html>
<style type="text/css">
<!--
@font-face {font-family:티티체; src:url(http://티티체설치한 도메인/TTche.eot);}
body {font-family:티티체;font-size:9pt;line-height:160%;}
td {font-family:티티체;font-size:9pt;line-height:160%;}
a {font-family:티티체;color:darkblue;font-size:9pt;text-decoration:none;}
a:hover {font-family:티티체;color:red;font-size:9pt;text-decoration:none;}
-->
</style>
<center>
<br><br>
웹폰트 테스트 페이지
<br><br>
<table cellpadding=3 cellspacing=1 bgcolor=#C7CBEF>
<tr>
<td width=100% bgcolor=#E7EBFF align=center valign=middle>
저의 홈페이지에 방문해주셔서 감사합니다.
</td></tr>
<tr>
<td bgcolor=#F2F8F8 width=100%>
지금은 홈페이지 리녈중입니다.<br>
빠른 시일내에 완성시키겠습니다.
</td>
</tr>
</table>
<br><br>
<a href="http://ttboard.com">티티보드 홈페이지</a>
<br><br>
<font style="font-family:티티체;font-size:9pt;color:#888888;">
만든날 : 2002년
</font>
</center>
</html>
위의 예제에서 주목해야 할 부분은
@font-face {font-family:티티체; src:url(http://티티체설치한 도메인/TTche.eot);} <-- 이 태그입니다.
웹폰트 태그인 @font-face를 이용하여 방문자의 컴퓨터에 임시적으로 폰트를 설치하게 됩니다.
예제는 티티체 9포인트를 사용하였습니다. 따라서 모두 font-size:9pt로 지정된 것입니다.
스타일시트(CSS)와 <font> 태그를 모두 이용한 예제이니 어떤 원리로 티티체 9포인트로 적용되는지는 이전 강좌를 참조해 주시기 바랍니다.
[게시판에 웹폰트 적용하기 - 스타일시트 파일이 없는경우]
◆ 게시판에 적용하기 위해서는...
제로보드,이지보드,화이트보드처럼 자신의 계정 밑에 소스를 두고 사용할 수 있고, 폰트를 변경할 수 있는 성격의 게시판이라야 적용이 가능합니다. 폰트변경은 가능하여도, 링크형식으로 제공된 게시판을 사용할때는
적용할 수 없습니다.
◆ 스타일시트파일이 따로 존재하지 않는 경우에는...
보통, 소스에 스타일시트(CSS)가 포함되어 있습니다. 주로, *.cgi나 *.pl 등의 확장자를 가지는 게시판들이 이런경우가 있기 때문에 이번강좌에서는 CGI문법과 웹폰트적용방법을 설명하겠습니다.
위의 예제에서 눈여겨 볼 부분은
print "\@font-face {font-family:티티체;src:url(폰트파일위치);}\n" <-- 이 부분입니다.
@문자는 CGI에서 그냥사용하면 에러가 나기 때문에 반드시 앞에 \문자를 붙여줘야 합니다.
이 점만 주의하면 아주 간단히 적용할 수 있을 것입니다.
결론적으로 웹폰트를 게시판등에 적용하는 것도 HTML문서를 작성하는 것과 크게 다를게 없습니다.
제일윗부분에 @font-face를 이용하여 폰트파일을 지정해 주고,
그 다음부터는 지정한 폰트이름과 사이즈를 고려하여 스타일을 지정해 주기만 하면 됩니다.
[게시판에 웹폰트 적용하기 - 스타일시트 파일이 존재하는 경우]
◆ 게시판에 적용하기 위해서는...
제로보드, 화이트보드처럼 자신의 계정 밑에 소스를 두고 사용할 수 있고, 폰트를 변경할 수 있는 성격의 게시판이라야 적용이 가능합니다. 폰트변경은 가능하여도, 링크형식으로 제공된 게시판을 사용할때는 적용할
수 없습니다.
◆ style.css등의 스타일시트 파일로 지원되는 게시판에의 적용
제로보드는 기본적으로, 각 스킨마다 style.css 이름으로 스타일시트가 존재합니다. 이지보드나 화이트보드등의 다른 보드들도 style.css같은 이름으로 스타일시트 파일을 따로 둔 경우도 있고, 별도의
스타일시트 파일 없이 직접 소스에서 조절해주는 것이 있습니다. 이 강좌는 style.css등의 이름으로 별도의 스타일시트 파일이 존재하는 경우에 대하여 설명합니다.
이 강좌를 보기 전에, 이전강좌인 스타일시트(CSS)에 대한 강좌를 살펴보시기 바랍니다.
간단히 설명드린다면, 제일 윗부분에 @font-face로 시작하는 웹폰트지정을 해준다음,
모든 스타일들에 font-family:티티체;font-size:9pt; 를 붙여주기만 하면 됩니다.
font-family:에 쓰는 이름은 @font-face {font-family:여기에 지정한 이름을 사용해야 합니다.
font-size: 는 티티체의 사이즈인 9pt를 지정해 주시면 됩니다.
◆ 이지보드에서 적용법.
이지보드에서는 해당 게시판 환경설정으로 들어가서 상단의 환경메뉴에 게시판 글꼴/색상 항목중 글꼴 항목을 티티체로 지정해주고, 상단의 HTML설정 메뉴의 Html Head 부분에
<style type="text/css">
<!--
@font-face {font-family:티티체; src:url(http://티티체 설치한 도메인/TTche.eot);}
-->
</style>
를 입력해줍니다.
[티티체를 이용하여 홈페이지 만들기 - 웹에디터 사용자]
◆ 나모에디터
나모에서 티티체를 사용하기 위해서는 나모 편집창을 아래 그림처럼 HTML 모드로 전환합니다.
그런후 <head> 와 </head> 태그 사이의 스타일시트안에 @font-face 태그를 이용하여 티티체가 있는곳을 지정해 줘야 합니다.
위치는 반드시 메타테그 보다 아래(<meta name="generator".... 로 시작하는 테그)에 넣어주어야 합니다.
스타일 시트가 없으면 아래의 파란색 부분의 테그만 그대로 복사해서 붙어놓고 티티체 경로만 수정해주면 됩니다.
◆ <head> 와 </head> 태그 사이에 넣어줄 태그
웹폰트를 사용하기 위해서는 스타일시트안에 @font-face 태그를 이용하여 지정해 줘야 합니다.
<style type="text/css">
<!--
@font-face {font-family:티티체;src:url(http://티티체 설치한 도메인/TTche.eot);}
-->
</style>
@font-face 로 지정한 폰트는 임시적으로 방문자의 컴퓨터에 폰트가 설치되어 있는 것과 같은 효과를 지닙니다. font-family:폰트이름 --> 임시적으로 사용할 폰트이름을 정해주면 됩니다. src:url(폰트파일주소) --> 자신의 계정에 업로드한 폰트파일의 위치를 적어주시면 됩니다.
2개 이상의 웹폰트를 사용하려면 각각의 폰트를 @font-face를 이용해서 적어주면 됩니다.
◆ 본문에 실제 사용예제 <font face="돋움" size=1>돋움체, 10포인트로 사용하기 위한 태그</font>
<font face="바탕" size=2>바탕체, 12포인트로 사용하기 위한 태그</font>
<font style="font-family:궁서; font-size:9pt;">궁서체 9포인트로 사용하기 위한 태그</font>
<font style="font-family:티티체; font-size:9pt">티티체 9포인트로 사용하기 위한 태그</font>
티티체는 폰트 크기를 꼭 9pt로 지정하셔야합니다.
폰트 사이즈 지정은 font-size:9pt 처럼 font-size:를 이용합니다.
이때, 9pt,12px 처럼, pt와 px가 이용되는데, pt는 포인트의 약자이며 px는 픽셀의 약자입니다.
흔히 폰트는 몇포인트처럼 포인트개념을 많이 쓰고, 이미지에서는 픽셀단위를 주로 사용합니다.
픽셀이란 화면에서의 최소단위(한점)을 가르키는데, 모니터의 해상도가 1024*768이라면 가로 1024개의 픽셀, 세로 768개의 픽셀로 화면이 구성되어 있다는 것을 의미합니다.
실제로 폰트에서 사용하는 포인트개념은 픽셀의 3/4가 되어,
9포인트 = 12픽셀, 10포인트 = 13픽셀, 12포인트 = 16픽셀과 같습니다.
[제공된 트루타입폰트를 개인 PC 에서 사용하기]
기존의 아웃라인 트루타입만 사용하던 분들께서는 비트맵 트루타입폰트의 사용에 익숙치 않을 것입니다.
1. 함께 제공된 TTche.ttf 폰트를 윈도우의 폰트 디렉토리에 복사합니다.
(c:\Windows\Fonts , 혹은 c:\WINNT\Fonts)
2. MS Word 등에서 폰트는 TTche 사이즈는 9 로 설정하시면 이상적인 모양의 티티체를 보실 수 있습니다.
3. 안타깝게도 티티체는 아웃라인은 지원되지 않는 비트맵폰트입니다.
따라서 포토샵등의 그래픽 프로그램에서는 사용하실 수가 없습니다.
포토샵등에서 디자인 작업에 쓰시려면 워드에서 작성하신 후 클립보드에 복사(Ctrl+C) 하셔서 포토샵에서 붙여넣기 하시면 그래픽 파일로 붙여넣어 집니다.
[포토샵에서 사용하기]
티티체는 아웃라인은 지원되지 않는 비트맵폰트로 포토샵등의 그래픽 프로그램과 플래시에서는 사용하실 수가 없습니다.
포토샵등에서 디자인 작업에 쓰시려면 워드에서 작성하신 후 클립보드에 복사(Ctrl+C) 하셔서 포토샵에서 붙여넣기를해서 사용하는 방법이 있습니다.
먼저 MS워드에서 글꼴을 TTche, 글꼴크기를 9로 선택해서 글을 작성합니다.
작성한글을 마우스로 드래그해서 선택한후, 마우스 오른쪽 버튼을 클릭해서 복사를 선택합니다.
포토샵에서 작업창에 붙여넣기(Ctrl+V)를 합니다.
이때 그림처럼 글자는 이미지처리되기 때문에 수정을 할수 없습니다.
배경 색상이있는 곳에서 사용하려면 글자 주위의 흰색 배경을 지워줘야하는데 Magic Wand Tool을 이용해서 흰색 부분을 선택합니다.
Select메뉴의 Similar 메뉴를 선택한후 키보드의 Delete키를 누르면 배경색상이 지워집니다.
Ctrl+D키를 누르면 선택이 해제됩니다.
그러면 아래 그림처럼 글자 주위의 배경이 지워집니다.
[폰트가 제대로 안나오는 경우]
트루타입 폰트가 제대로 안보이는경우 폰트 캐시의 문제일수 있습니다.
이런 경우 ttfcache 파일을 지워주면 되는데,
윈도우 98을 사용하는 경우.
시작 - 시스템종료 - 도스모드(MS-DOS)로 부팅을 합니다.
반드시 도스모드로 부팅하여야 하며, 단순히 윈도우안의 도스창을 열어서 하면 해결되지 않습니다.
도스모드로 부팅이 완료되면, 아래의 방법으로 캐쉬파일을 삭제합니다.
C:\windows>attrib -h ttfcache [엔터]
C:\windows>del ttfcache [엔터]
도스 모드로 부팅했는데 C:\> 라고 나오면,
C:\>cd windows [엔터]를 해서 windows폴더로 들어가서 하면 됩니다.
[티티보드에 웹폰트 적용하기]
◆ 티티보드에 적용하기 위해서는...
설치버전의 경우 티티체를 다운받아 티티체가 설치된 계정에 업로드 후에 사용하시면 됩니다.
무료 ASP의 경우나 유료 ASP의 경우 각각의 서버에 티티체를 설치해 두었습니다.
자신의 게시판이 설치된 서버위치를 확인하고 해당 서버에 위치한 티티체를 사용해주세요
게시판 주소가 http://free2.ttboard.com/xxxxxx/ttboard/.... 로 시작하면 free2 서버입니다.
무료 ASP free1 서버의 경우 : @font-face {font-family:티티체;src:url(http://free1.ttboard.com/TTche.eot);} free2 서버의 경우 : @font-face {font-family:티티체;src:url(http://free2.ttboard.com/TTche.eot);} free3 서버의 경우 : @font-face {font-family:티티체;src:url(http://free3.ttboard.com/TTche.eot);}
유료 ASP @font-face {font-family:티티체;src:url(http://user1.ttboard.com/TTche.eot);}
◆ 게시판 최상단(공통-html_head) 의 스타일시트 수정
티티보드의 관리자모드 - 게시판의 '설정'버튼 클릭 - '스킨관련' 탭 클릭 - '스킨편집/삭제'버튼을 클릭하시면 스킨에디터 화면이 나옵니다. 왼쪽 상단의 창에서 스킨을 선택하시고 왼쪽 아래 창에서 게시판
최상단(공통-html_head) 를 더블클릭 하시면 오른쪽 창에 다음과 같은 소스가 나옵니다.
간단히 설명드린다면, 제일 윗부분에 @font-face로 시작하는 티티체 지정을 해준다음,
모든 스타일들에 [BOARD_FONT] 를 티티체 로 , [BOARD_FONTSIZE] 를 9pt 로 고쳐주시면 됩니다.
font-family:에 쓰는 이름은 @font-face {font-family:여기에 지정한 이름을 사용해야 합니다.
font-size: 는 티티체의 경우 9pt 입니다.
◆ 반드시 메타테그를 스타일시트 태그 위로 올려주세요
티티체(웹폰트)를 적용후 프레임(아이프레임 포함)으로 이루어진 홈페이지에서 메타테그가 스타일시트 태그 아래에 있을경우 게시판이 바로 나타나지 않고 새로고침을 해야 나오는 증상이 있습니다.
반드시 스킨편집화면에서 게시판 최상단 부분에 메타테그를 스타일시트 테그 위로 올려주세요.
메타테그란 <meta http-equiv=....... 로 시작하는 테그입니다.
