I want to believe

★ 블로그에 웹폰트를 사용해봅시다.

웹폰트를 사용해 봅시다....
인터넷 익스플로어에서만 사용할 수 있습니다.

파폭으로는 웹폰트가 안보여지더군요///

=====

@font-face {font-family:아무이름;src:url(웹폰트의 주소);}

일단 css 스크립트 맨위에 위 태그를 넣어줍니다.

(font-family:아무이름이나 지정해 주어도 상관없습니다.;src:url(웹폰트를 올린 계정의 주소);}

웹폰트를 올릴 계정이 있어야겠지요..

그리고 웹폰트를 사용할 부분에 font-family:아무이름 식으로 넣어줍니다...

font 크기를 지정할때 px 대신에 pt 로 바꿔줍니다. 왜 그런지는 모르겠지만 px 로 지정할 경우

.. 제 경우에는 웹폰트가 먹히지 않았습니다. 이부분은 저도 잘 ^^;;;

아래에 css는 제 홈에 사용한 css 전문입니다.

빈약한 설명이지만 참고해서 잘 바꿔보세요 ^o^;;

웹폰트는 이쁘고 멋진 무료 웹폰트가 많으니깐 쉽게 찾으실 수 있을거에요.

저는 엔터님의 엔터-솔잎9 체를 사용했습니다.

*css 보기

@font-face {font-family:myhappy;src:url(http://삐리리/enter_solip9.ewf);}BODY { BACKGROUND : #FFFFFF; MARGIN : 0PX;PADDING : 0PX; background-image:url(http://md.egloos.com/skn/img/b/00/03/5/pic2_ttbg.jpg);scrollbar-face-color:#ffffff; scrollbar-shadow-color:#006600 ;scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #ffffff;scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #ffffff;scrollbar-arrow-color: #FF9933; background-color:transparent;}
BODY,TD,DIV,LI { font-family:myhappy;FONT : 9PT/150%; COLOR : #333; }

A:LINK { COLOR: #336633; TEXT-DECORATION: NONE; }
A:VISITED { COLOR: #336633; TEXT-DECORATION: NONE; }
A:ACTIVE { COLOR: #336633; TEXT-DECORATION: NONE; }
A:HOVER { COLOR: #cccccc; TEXT-DECORATION: UNDERLINE; }

DIV.HEADER { FONT : 30px/100% Arial Black,돋움,HY견고딕;}

DIV.HEADER A:LINK { COLOR: #99CCCC; TEXT-DECORATION: NONE; }
DIV.HEADER A:VISITED { COLOR: #99CCCC; TEXT-DECORATION: NONE; }
DIV.HEADER A:HOVER { COLOR: #009999; TEXT-DECORATION: NONE; }

DIV.ADMIN A:LINK { FONT: 8PT tahoma; COLOR:#FFFFFF; TEXT-DECORATION: NONE;}
DIV.ADMIN A:VISITED { FONT: 8PT tahoma; COLOR:#FFFFFF; TEXT-DECORATION: NONE;}
DIV.ADMIN A:HOVER { FONT: 8PT tahoma; COLOR:#cccccc; TEXT-DECORATION: NONE;}

DIV.URL A:LINK { FONT : 8PT/120%; color:#97825A; TEXT-DECORATION: NONE;}
DIV.URL A:VISITED { color:#97825A; TEXT-DECORATION: NONE; }
DIV.URL A:HOVER { color:#97825A; TEXT-DECORATION: UNDERLINE;}

DIV.USERMENU { MARGIN-TOP : 20PX; TEXT-ALIGN : RIGHT; }

DIV.PROFILE { WIDTH : 150PX; PADDING : 0PX 0PX 10PX; LINE-HEIGHT : 150%; OVERFLOW : HIDDEN; }
DIV.MNTTL {SOLID; PADDING : 2PX 0PX 0PX; MARGIN : 25PX 0PX 10PX; FONT:BOLD}

DIV.POST { MARGIN-BOTTOM : 50PX; }
DIV.POST_HEAD {MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; }
DIV.POST_SUBJECT { FONT:BOLD ; color:#864718;}
DIV.POST_BODY { WIDTH : 500PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }
DIV.POST_TAIL { font-family:myhappy;FONT : 9PT ;color:#99cccc; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; }

DIV.COMMENT { BORDER : 1PX #D3D3D3 SOLID; BACKGROUND : #F7F7F7;background-image : url(http://pds.egloos.com/pds/1/200506/08/25/PanTa.gif);background-repeat : no-repeat;background-position : bottom right;
PADDING : 15PX; MARGIN : 20PX 0PX; }
DIV.COMMENT_BODY { MARGIN-BOTTOM : 20PX; }
DIV.COMMENT_TAIL { MARGIN : 8PX 0PX 5PX; font-family:myhappy;FONT :9PT/120% ; COLOR : #777; }
DIV.COMMENT_INPUT { MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; }
DIV.COMMENT_LINE { BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 10PX 0PX 15PX; }

/* 여기서 부터는 시스템에관한 클래스 이므로 변경하지 않으시는 것이 좋습니다. */

DIV.TRACK_TOP { LINE-HEIGHT : 170%; }
DIV.ARCHIVE_HEAD { FONT-WEIGHT : BOLD; MARGIN-BOTTOM : 10PX; }
DIV.ARCHIVE_BODY { font : 9pt; MARGIN : 20PX 0PX; LINE-HEIGHT : 160%; PADDING-BOTTOM : 100PX; }

IMG.IMAGE_TOP { MARGIN-BOTTOM : 15PX; }
IMG.IMAGE_LEFT { MARGIN-RIGHT : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.IMAGE_MID { MARGIN-TOP : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.BOOKMK { MARGIN : 10PX; BORDER : 0PX; }
IMG.USERMENU { MARGIN-LEFT : 8PX; }
IMG.LOGO { MARGIN-BOTTOM : 10PX; }

DIV.BANNER { MARGIN-TOP : 30PX; }

.SMALL { font-family:myhappy;FONT : 9PT; }
.DATE { FONT : BOLD 9PT/150% VERDANA, TAHOMA, 돋움; }
.TIME { FONT : 8PT/150% VERDANA, TAHOMA, 돋움; TEXT-ALIGN : LEFT; }
.AUTHOR { Font-family:myhappy;FONT : 9PT; }
.TXTFLD { FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; }

/* 여기서 부터는 달력 및 XML에 관련된 클래스입니다. */

DIV.CAL_TOP { }
DIV.CAL { MARGIN : 20PX 0PX 20PX; WIDTH : 150PX; TEXT-ALIGN : CENTER;}
DIV.CAL_HEAD { WIDTH : 150PX; FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; PADDING : 4PX 0PX; MARGIN-BOTTOM : 10PX;}
DIV.CAL_BODY { WIDTH : 150PX; TEXT-ALIGN : CENTER;}
DIV.CAL_BOTTOM { }

.CAL { FONT : 7PT/170% VERDANA, 돋움; TEXT-ALIGN : CENTER; }
.CAL_DAY { FONT : BOLD 7PT/170% VERDANA, 돋움; TEXT-ALIGN : CENTER; }
.CAL_SUN { FONT : BOLD 7PT/170% VERDANA, 돋움; COLOR : #D36654; TEXT-ALIGN : CENTER; }
.CAL_SAT { FONT : BOLD 7PT/170% VERDANA, 돋움; COLOR : #3572A1; TEXT-ALIGN : CENTER; }
.CAL_TODAY { FONT : BOLD 7PT/170% VERDANA, 돋움; BACKGROUND :URL("http://pds.egloos.com/pds/1/200506/06/25/cal_bg.gif") ; COLOR : #FFCC00; TEXT-ALIGN : CENTER; }
.CAL_TR { }

DIV.XML { FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; }

# by 마이해피엔딩 | 2005/06/10 00:01 | about skin | 트랙백(3) | 핑백(1) | 덧글(13)

★검색창 이미지로 바꾸다 _-_;;;

무려 벡터로 만들었다 ..

이미지 만드는데 2분도 안걸렸다...

근데 인풋폼 맞추는데 자꾸 어긋나서 이미지 3번이나 다시 만들었다...

바보같이 ㅠ.ㅠ 셀페딩을 조절해주면 될 것을....

html도 너무 오랜만에 만져보니까 다 까먹었다....

늙었나?... ㅡ,.ㅡ

소스 & 이미지

<br><b>★ Google 검색</b><br>
<TABLE background=http://pds.egloos.com/pds/1/200506/07/25/search_bg.jpg WIDTH=145 height=31 BORDER=0 CELLSPACING=0 CELLPADDING=4 ALIGN=CENTER><TR><TD width=30 height=31>
<FORM method=GET action="http://www.google.co.kr/search" target="_blank">
<input type=hidden name=ie value=euc-kr>
<input type=hidden name=oe value=euc-kr>
<input type=hidden name=hl value=ko>
</td></TD><TD WIDTH=103 height=31 ALIGN=bottom>
<INPUT TYPE=TEXT NAME=q SIZE=10 STYLE="font-family:myhappy;WIDTH:100;HEIGHT:20;border-width:0;" CLASS=TXTFLD></td><td width=12>
</TD></TR>
</TABLE><font color=787878>
<input type=hidden name=domains value="http://browndewy.egloos.com/"><input type=radio name=sitesearch value=""> 전체웹<input type=radio name=sitesearch value="http://browndewy.egloos.com/" checked> 여기에서</font></form>

# by 마이해피엔딩 | 2005/06/07 17:30 | about skin | 트랙백 | 덧글(6)