<여섯번째> 문자의 크기 및 형태

<xhtml> <head> <title>문자의 크기 및 형태</title> 문자의 크기 및 형태 </td> <td align=right> </td> </tr> <tr> <td colspan=2> <UL type=square> <LI> <a href="#encording">Encording</a> <LI><a href="#fontsize">문자의 크기</a> <LI> <a href="#fontface">문자의 형태</a> <LI><a href="#fontcolor">문자의 Color</a> </UL> </td> </tr> </table> <table width=550> <tr> <td> <a name="encording"> Encording 먼저 폰트 문자의 형태를 이야기 하기 앞서서 Encording에 관한 것을 한번 짚고 넘어가야 할 듯하다.Encording은 해석 그대로 '부호화'한다는 의미로 작성된 HTML문서를 어떻게 부호화하여 읽은것인가 하는 것에 대한 문제이다. 모든 문서가 영어로만 이루어져 있다면 이런 논의가 불 필요하겠지만 많은 다른 언어를 표현하기 위해 Encording이란 과정이 반드시 필요하다.같은 문서라할지라도 해석하는 바에 의하여 눈으로 보여지는 것은 많은 차이를 가져오게 된다.본 페이지에서는 한국사람을 위하여 작성된 페이지라는 점에 고려하여 Encording을 Netscape와 Internet Explore에서 한국어를 선택했을때를 기준으로 작성했다.영문버전을 가지고 본 페이지를 본다면 한글버전과는 다른 모습으로 보이게 될것이다.Encording을 선택은 브라우저의 사용자의 선택에 따라 달라지지만 많은 사용자들이 Defaulf(초기값)의 설정을 가진다고 가정할때,(실제로 그렇고)이 초기의 설정값을 기준으로 하는 것이 가장 타당하고 보편성이 있을것으로 판단된다. 영어권에서는 Western(ISO-8859-1) 이 Default 값이고 한국어에서는 Korean(EUC-kr) 이 Default의 값으로 현재까지는 인정된다. Western(ISO-8859-1)로 Encording된 브라우저에서 Korean(EUC-kr)로 Encording하기 위해서는 아래의 문구를 <HEAD>와</HEAD>에 넣어주면 된다. <table bgcolor="eeeeee" cellpading=6 cellspacing=6 width=100%> <tr> <td> <META HTTP-EQUIV="Content-type" CONTENT="ext/html; charset=EUC-KR"> </td> </tr> </table> <a name="fontsize"> 문자의 크기 이단원 부터 Default 라는 용어가 자주 등장한다. <table bgcolor="ffffe2" cellpading=6 cellspacing=6> <tr> <td>  문자크기의 Default? Default라는 말의 뜻은 '처음에 설정해 놓은 초기값의 상태' 를 말하는 것으로 사용자가 옵션사항으로 변경할수 있는 부분들에 대해 프로그램의 제공자가 기본적으로 설정해 놓은 상태를 말한다. Browser에서 사용자가 특별한 옵션을 지정하지 않았을때는 Default의 값으로 해석한다. 예를 들자면 웹문서에서 특별한 언급이 없는한 문자의 크기의 Default의 값은 font size=3 이다. font size=3은 truetype font :11에 해당된다. </td> </tr> </table> HTML문서에서 font의 크기를 조정하는 방법은 문서전체에서 폰트크기를 조정하는것과,특정부분에 부분적으로 조정하는 방법으로 나뉘어진다. <table bgcolor="eeeeee" cellpading=6 cellspacing=6 width=100%> <tr> <td> <dl> <dt>1.문서전체에 font 크기를 지정 <dd> 문서전체에 font 크기를 지정하고 부분적으로 폰트크기를 변화시키는 방법으로 가장 권장할 만한 방법이다. <BASEFONT SIZE="지정할 폰트의 크기">를 <HEAD>와</HEAD>에 넣어주면 된다. </dd> <dt>2.문서에 부분적으로 font 크기를 지정 <dd> 문서에 부분적으로 폰트크기를 변화시키는 방법으로 가장 권장할 만한 방법은와를 바꾸고 싶은 범위로 지정하면 된다. </dd> <dt>3.StyleSheet 를 이용하는 방법 <dd> BASEFONT와 같은 기능을 하는 것으로 해당페이지의 전체적인 font의 크기를 미리 정해줄수 있다. 아래의 내용은 해당 문서를 배경색은 흰색,font의 색상은 검정(black),글꼴은 돋움체,글꼴의 크기는 10pt으로 표현하라는 StyleSheet이다. <style> body { background : white ; color : black ; text-align : justify ; font-family : 돋움,arial,helvetica; font-size : 10pt ; } </style> </dd> <dt>4.<BIG></BIG>,</SMALL&gt태그의 사용 <dd> 잘 사용되는 방법은 아니지만 문자의 크기를 정해주는 태그<BIG></BIG>,</SMALL&gt를 이용하여 지정된 범위내에서 font의 변화를 줄수 있습니다. <ul type=square> <li><BIG>BIG</BIG>:<big>BIG</big> <li>일반적인크기:일반적인크기 <li>SMALL:SMALL </ul> </dd> </dl> </td> </tr> </table> 문자의 크기는 위에서 설명한 바와 같이 , 를 사용합니다.. 보통 화면에 나타나는 FONT SIZE는 3(default값)이고. 1이 가장작고 7이 가장 큽니다. 한번 예와 결과를 보도록 하겠습니다. <table bgcolor="eeeeee" cellpading=6 cellspacing=6 width=100%> <tr> <td> <ul type=square> <li>FONT SIZE=1 <li>FONT SIZE=2 <li>FONT SIZE=3 <li>FONT SIZE=4 <li>FONT SIZE=5 <li>FONT SIZE=6 <li>FONT SIZE=7 </ul> </td> </tr> </table> 문자의 크기는 위와 같이 숫자로 직접나타내는 방법과 상대적인 숫자로 나타낼수도 있습니다. BASEFONT나 StyleSheet로 문서전체에 지정된 폰트가 없다고 할때 브라우저는 글자의 크기를 3으로 나타냅니다.이와 상대적인 글자의 크기로 나타낼때는 -2,-1,+1,+2 이런식으로 적어주면 됩니다. 예를 들자면 는 로도 나타낼수 있는것입니다. BASEFONT나 StyleSheet로 문서전체에 지정된 폰트가 있을때는 그 지정된 폰트와 상대적인 값을 찾아 나타나게 되는 것을 주의하기 바랍니다. <table bgcolor="eeeeee" cellpading=6 cellspacing=6 width=100%> <tr> <td> <ul type=square> <li>FONT SIZE=-2 <li>FONT SIZE=-1 <li>FONT SIZE=+0 <li>FONT SIZE=+1 <li>FONT SIZE=+2 <li>FONT SIZE=+3 <li>FONT SIZE=+4 </ul> </td> </tr> </table> <a name="fontface"> 문자의 형태 브라우저에서 나타나는 문자의 형태(폰트)는 접속을 하는 사람의 컴퓨터환경에 영향을 받습니다. 브라우저도 프로그램이고 윈도우상의 대부분의 프로그램은 운영체제에서 폰트를 지원받게 되어있고.(물론 한글과 같이 자체 라이브러리를 사용하는 경우도 있지만)Netscape나 IE와 같은 브라우저 또한 그렇습니다. 사용자들의 환경은 개인용PC,MAC에서 부터 Unix,기타 등등 수많은 종류의 것이 있고 저마다 사용하는 OS가 다르기 때문에 가장 범용적인 폰트를 사용하는 것이 중요합니다.한글을 나타내는 기준으로 본다면 MS의 윈도우95,98 한글판에서는 바탕체,굴림체,돋움체,궁서체를 기본적으로 지원합니다.다른 OS에서는 어떤지 잘 모르지만 궁서체는 약간 무리가 있는듯하고 바탕체,굴림체,돋움체 중에서 하나를 선택하는 것이 무난하다고 여겨 집니다. <table bgcolor="ffffe2" cellpading=6 cellspacing=6> <tr> <td>  Truetype font WIndow95/98 에서는 Windows/Fonts 폴더안에 현재 사용될수 있는 폰트들이 있습니다. 윈도우상의 프로그램에서 새로운 폰트를 사용하기 위해서는 이 폴더안에 새로운 폰트를 넣어주면 됩니다.위에서 언급한 일반적인 폰트를 제외한 다른 폰트는 대개 그래픽 프로그램에서 폰트를 집어넣을때 응용될수 있습니다. </td> </tr> </table> <table bgcolor="eeeeee" cellpading=6 cellspacing=6 width=100%> <tr> <td> <dl> <dt>1. <dd> 로 바꾸고 싶은 범위로 지정 하면 된다. 한글 폰트의 사용할때는 폰트이름을 지정한 예 입니다. <ul type=square> <li>바탕체:   바탕체 <li>굴림:   굴림 <li>돋움:   돋움 <li>궁서:   궁서 </ul> 여기서 바탕체만 바탕이라 쓰지 않고 '체'자를 붙인것은 Netscape에서는 '체'자를 붙여 주어야만 바탕체로 표현이 됩니다.IE에서는 바탕이라고만 써도 표현이 됩니다. </dd> <dt>2.StyleSheet 를 이용하는 방법 <dd> 해당페이지의 전체적인 font의 형태를 미리 정해줄수 있다. 아래의 내용은 해당 문서를 배경색은 흰색,font의 색상은 검정(black),글꼴은 돋움체,글꼴의 크기는 10pt으로 표현하라는 StyleSheet이다. 여기서 눈여겨 볼 것은 돋움,굴림,바탕,arial 이렇게 여러가지를 나열했는데 이것은 앞에서 부터 순서대로 돋움체를 지원하지 않으면 굴림체로 굴림체를 지원하지 않으면 바탕체로 바탕체를 지원하지 않으면 arial로 표현하라는 의미 입니다. <style> body { background : white ; color : black ; text-align : justify ; font-family : 돋움,굴림,바탕,arial; font-size : 10pt ; } </style> </dd> </td></tr></table> <a name="fontcolor"> 문자의 색상 웹문서에서 색상을 표현하는 기본은 16진수<a href="xxjavascript:question()">HexaColor</a>로 표현하는 것 입니다. <table bgcolor="eeeeee" cellpading=6 cellspacing=6 width=100%> <tr> <td> <dl> <dt>1. <dd> 로 바꾸고 싶은 범위로 지정 하면 된다. <ul type=square> <li>000066:   000066 <li>ffd700:   ffd700 <li>a52a2a:   a52a2a <li>RED:   RED </ul> 16진수의 형태의 Hexa Color 대신에 고유의 이름 넣어도 된다.white,black,red,green,blue,yellow.....하지만 이런 방법은 좀더 세밀한 표현을 하지 못하므로 Hexa Color을 쓰는것이 바람직 하다. </dd> </dl> </td></tr></table>