앞서 살펴본 글자 강조 태그들은 단순히 글자를 강조할 뿐 글자의 색상이나 글자체는 바꿀 수는 없다. 글자의 크기뿐만아니라 글자의 색상, 글꼴까지도 변경하는 태그에 대해 알아보자~ |
1. <Font> : Font
- <FONT> </FONT> : 글자의 속성을 다양하게 변경할 수 있다. - <FONT SIZE> </FONT> : 글자의 크기를 바꿀 수 있다. 숫자가 작으면 글씨는 작게 보이고 숫자가 크면 글자의 크기도 크게 보인다. 혼동이 되겠지만 <H1> 태그와는 반대로 생각하여 한다. - <FONT COLOR> </FONT> : 글자의 색상을 바꿀 수 있다. 색이름을 직접 써 넣어도 되고 수치로 입력하여도 된다. (예: GRAY, NAVY, BLACK, WHITE, RED, YELLOW, BLUE, #E7A5B2, #FFFFFF...) -<FONT FACE> </FACE> : 글자의 서체를 바꾸어 준다. 영문 글씨체를 한글에 적용하였을 경우 제대로 된 결과를 볼 수 없지만 한글 글씨체의 경우에는 영문에 서체가 적용되는 것도 있다. 태그 연습시에는 일반적인 서체를 사용해야 결과를 잘 볼 수 있다.
|
2. 예제-1 (Font Size, Color, Face)
[Source] |
<html> <head> <title> 글자의 크기, 색상, 글꼴 변경 </title> </head>
<body> <font size="1">크기가 1이면 제일 작게~</font><br> <font size="7">크기가 7이면 제일 크게~</font><br> <font size="2">크기가 2이면 기본 사이즈보다 약간 크게~</font><br> <font size="8">글자의 크기가 8이상이면 모두 7처럼 보인다.</font><br> <font color="red">글자의 색상이 빨간색으로 바뀐다. </font><br> <font color="blue">글자의 색상이 파란색으로 바뀐다. </font><br> <font color="yellow">글자의 색상이 노란색으로 바뀐다. </font><br> <font color="purple">글자의 색상이 보라색으로 바뀐다. </font><br> <font color="#0EA2F1">글자의 색상이 내가 원하는 색으로 바뀐다. </font><br> <font face="궁서체">글자의 서체가 궁서체로 뿅~</font><br> <font face="Arial Black">Very easy HTML Tag~</font><br> <font size="4" color="#FD8704" face="바탕체">글자 3종 옵션 모두 사용한 종합선물세트</font><br> </body> </html> |
[Result] |
크기가 1이면 제일 작게~ 크기가 7이면 제일 크게~ 크기가 2이면 기본 사이즈보다 약간 크게~ 글자의 색상이 빨간색으로 바뀐다. 글자의 색상이 파란색으로 바뀐다. 글자의 색상이 하늘색으로 바뀐다. 글자의 색상이 보라색으로 바뀐다. 글자의 색상이 내가 원하는 색으로 바뀐다. 글자의 서체가 궁서체로 뿅~ Very easy HTML Tag~ 글자 3종 옵션 모두 사용한 종합선물세트
|
3. <Font Color="#FFFFFF", Color="#000000">
- 여기서 FFFFFF는 16진수로 FF와 FF와 FF로 나누어서 살펴볼 수 있다. - FF는 F는 15를 나타낸다. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F로 0~F까지는 모두 16개이므로 16가지 색상을 나타낼 수 있음이다. 그러므로 FF하면 16 × 16 = 256가지 색상을 나타낼 수 있다는 뜻이며 빨강을 256가지로 나누어 놓았음이다. - #FF/FF/FF는 #Red/Green/Blue로 표현하는데 첫번째 FF는 순수한 빨강이라고 할 수 있겠다. 반대로 00이면 빨강이 하나도 섞이지 않은 것이다. (예컨데 #FF0000은 빨강, #00FF00은 초록, #0000FF는 파랑인 셈이다.) - <FONT COLOR="#FFFFFF"> : 글자색을 흰색으로 하라. RGB의 색을 모두 섞어서 가산혼합이 된것이다. 빛의 3원색인 빨강, 초록, 파랑이 모두 섞여서 흰색을 만들어낸다. - <FONT COLOR="#0000000"> : 글자색을 검정으로 하라. RGB의 색을 모두 하나도 넣지 않으므로 어두운 검정을 만들어낸다.
|
4. 예제-2 (Font Color의 색 조절 원리)
[Source] |
<html> <head> <title> Font Color의 색 조절 원리 </title> </head>
<body> <font color="#FFFFFF">글자 색을 흰색으로~</font><br> <font color="#000000">글자 색을 검정색으로~위의 흰 글자색은 영역을 잡으면 보인다.</font><br> <font color="#FF0000">글자 색을 빨간색으로~</font><br> <font color="#00FF00">글자 색을 초록색으로~</font><br> <font color="#0000FF">글자 색을 파란색으로~</font><br> <font color="#A7B32A">내맘대로 글자색 1</font><br> <font color="#38BAEB">내맘대로 글자색 2</font><br> </body> </html> |
[Result] |
글자 색을 흰색으로~ 글자 색을 검정색으로~위의 흰 글자색은 영역을 잡으면 보인다. 글자 색을 빨간색으로~ 글자 색을 초록색으로~ 글자 색을 파란색으로~ 내맘대로 글자색 1 내맘대로 글자색 2
|
▶ 강조하고자하는 글자와 관련된 태그들의 종합예제를 보니 한층 이해가 더해질 것이다.
작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이 |