font-family Property페이지 목차font-family Propertyfont-family Property는 웹 페이지에서 사용하는 글꼴을 다루는 Property 입니다. HTML 의 Font Element 부분에서 설명한 바와 같이 웹 페이지 작성자가 사용한 font가 사용자(작성자가 만든 웹 페이지를 보는 사람)컴퓨터에 없으면 system 기본 글꼴로 나타납니다. 자세한 내용은 관련링크 참조. [표 보는 방법]
family-name family-name 은 Windows Fonts 폴더에 설치된 글꼴 이름을 말합니다. 기본 한글 글꼴인 굴림, 바탕, 돋움, 궁서 4가지의 글꼴이고, 이외에 추가적으로 설치해서 사용하는 글꼴의 이름 입니다. 영문의 경우도 마찬 가지로 글꼴 이름을 그대로 써주면 됩니다. family-name을 지정하지 않으면 System 기본 글꼴입니다. HTML 의 Font element와는 달리 family-name 이나 generic-name을 comma ( , )로 구분하여 여러개 줄 수 있는데, 그 이유는 처음 지정한 글꼴이 사용자 system 에 없을 경우 두 번째 지정한 글꼴을 그 것도 없으면 다음 다음... 이런 식으로 지정하고 지정한 글꼴이 모두 없으면 System 기본 글꼴을 사용합니다. 영문의 경우 한 단어가 아닌 2 단어 이상의 이름을 가진 글꼴이 많은데 이 때는 따옴표속에 넣어 줍니다. 예를 들어 입력
{ font-family : 굴림, "Comic Sans MS", Tahoma, Verdana; }
이런 식으로 지정합니다. 단, 여러 단어로 된 글꼴 이름을 Inline style 로 지정할 경우는 단순 따옴표를 사용합니다. 예를 들어 입력
<P style="font-family : 굴림, 'Comic Sans MS', Tahoma, Verdana;">
위와 같습니다. 영문 글꼴의 경우 사용할 수 없는 글꼴이 있는데 Tahoma Bold 이나 Arial Italic 등과 같은 글꼴이 되겠습니다. 그 이유는 Bold 나 Italic 같은 단어는 CSS 의 font-weight Property 의 Keyword 이기 때문 입니다. 아예 안 나오지는 않고, Tahama Bold 같은 경우 원래 워드 프로세서 같은 응용 프로그램에서는 굵게 나타나지만 웹 페이지에서는 보통 굵기의 글자로 나타납니다. 그러니까 사용해도 전혀 효과가 없다는 뜻이 되겠져? 그런데 문제는 한글과 같이 사용했을 경우인데, 아래 표 중에 Verdana, Tahoma 의 경우 별 무리없이 같이 쓸 수 있는 것 같습니다. 아래는 윈도우 기본 Family-name 들입니다.
Generic-family Generic-family 는 비슷한 형식의 글꼴들을 종류별로 분류하여 부르는 이름이 되겠습니다. 즉, 글꼴 이름이 아닌 영문 글꼴의 형태적인 분류에 의한 지정인테 한글에서는 별로 해당이 없는 것 같군요. 각 국가별로 Generic font family 가 있고 한글도 있지만, W3C에 가 보니 왜인들 글꼴은 분류해 놓았는데, 한글 글꼴은 없군요. 국력을 키워야 되겠습니다. 아래는 Generic-family 별로 분류해 놓은 표인데 serif 하고 fantasy 가 똑 같은 모양으로 보이져? fantasy 는 IE 에서 안 나타납니다.
font 관련 DHTML Mouse event를 사용하여 처음에는 sans-serif 상태에 있던 글자가 Mouse 를 올리면 cursive 로 글꼴이 바뀌었다가 Mouse 가 빠져나오는 동작에서 다시 sans-serif 로 복귀하고, 색상도 최초 red - blue - red 로 복귀하는 DHTML 을 한 번 만들어 봅시다. 1. Class로 지정하는 방법
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
.red {font-family:sans-serif; color:red;}
.blue {font-family:cursive; color:blue;}
-->
</STYLE>
</HEAD>
<BODY>
<P class="red" onmouseover="this.className='blue';" onmouseout="this.className='red';">
font-family
</P>
</BODY>
</HTML>
출력결과
font-family 2. CSS Scripting을 사용하는 방법
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<P style="font-family:sans-serif; color:red;"
onmouseover="this.style.fontFamily='cursive';this.style.color='blue';"
onmouseout="this.style.fontFamily='sans-serif';this.style.color='red';">
font-family
</P>
</BODY>
</HTML>
출력결과
font-family 두 가지 방법 모두 같은 결과가 나옵니다. 두 가지 방법 중 어떤 방법이 좋을지 다시 한 번 생각해 보시져... 이런 가정을 해 봅시다. 예제 에서는 P Element 1개만 사용 했지만 그 이상의 작업을 했다고 치져, 많이도 말고 한 10개 정도... 그렇다면 두 가지 방법 중 어느 방법이 수정이 용이한지 답이 딱 나오지 않습니까? 예를 들어 글꼴은 cursive - sans-serif - cursive, 글자색은 blue - red - blue 로 반대로 변화한다고 치면
그렇다면 CSS Scripting은 왜 할까요? 그건 뒤에 나오는 JavaScript 에서 여러 property 들을 class 처럼 함수로 만드어 쓸때 편리하기 때문이고, 그 때가 되면 class 보다 더 편리하게 쓸 수 있습니다. 이 문서의 저작권은 www.cadvance.org 에 있습니다.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||