HTML 강좌 - 글자의 크기, 색상, 글꼴을 바꾸어 주는 태그

글자의 크기뿐만아니라 글자의 색상, 글꼴까지도 변경하는 태그에 대해 알아보자~

1.  : Font

- : 글자의 속성을 다양하게 변경할 수 있다.
- : 글자의 크기를 바꿀 수 있다. 숫자가 작으면 글씨는 작게 보이고 숫자가 크면 글자의 크기도 크게 보인다. 혼동이 되겠지만 <H1> 태그와는 반대로 생각하여 한다.
- : 글자의 색상을 바꿀 수 있다. 색이름을 직접 써 넣어도 되고 수치로 입력하여도 된다. (예: GRAY, NAVY, BLACK, WHITE, RED, YELLOW, BLUE, #E7A5B2, #FFFFFF...)
- </FACE> : 글자의 서체를 바꾸어 준다. 영문 글씨체를 한글에 적용하였을 경우 제대로 된 결과를 볼 수 없지만 한글 글씨체의 경우에는 영문에 서체가 적용되는 것도 있다. 태그 연습시에는 일반적인 서체를 사용해야 결과를 잘 볼 수 있다.

2. 예제-1 (Font Size, Color, Face)

[Source]

<html>
<head>
<title>
글자의 크기, 색상, 글꼴 변경
</title>
</head>

<body>
크기가 1이면 제일 작게~ 
크기가 7이면 제일 크게~ 
크기가 2이면 기본 사이즈보다 약간 크게~ 
글자의 크기가 8이상이면 모두 7처럼 보인다. 
글자의 색상이 빨간색으로 바뀐다. 
글자의 색상이 파란색으로 바뀐다. 
글자의 색상이 노란색으로 바뀐다. 
글자의 색상이 보라색으로 바뀐다. 
글자의 색상이 내가 원하는 색으로 바뀐다. 
글자의 서체가 궁서체로 뿅~ 
Very easy HTML Tag~ 
글자 3종 옵션 모두 사용한 종합선물세트 
</body>
</html>

[Result]

크기가 1이면 제일 작게~
크기가 7이면 제일 크게~
크기가 2이면 기본 사이즈보다 약간 크게~
글자의 색상이 빨간색으로 바뀐다.
글자의 색상이 파란색으로 바뀐다.
글자의 색상이 하늘색으로 바뀐다.

글자의 색상이 보라색으로 바뀐다.

글자의 색상이 내가 원하는 색으로 바뀐다.

글자의 서체가 궁서체로 뿅~
Very easy HTML Tag~
글자 3종 옵션 모두 사용한 종합선물세트

3. 

- 여기서 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는 파랑인 셈이다.)
- : 글자색을 흰색으로 하라. RGB의 색을 모두 섞어서 가산혼합이 된것이다. 빛의 3원색인 빨강, 초록, 파랑이 모두 섞여서 흰색을 만들어낸다.
- : 글자색을 검정으로 하라. RGB의 색을 모두 하나도 넣지 않으므로 어두운 검정을 만들어낸다.

4. 예제-2 (Font Color의 색 조절 원리)

[Source]

<html>
<head>
<title>
Font Color의 색 조절 원리
</title>
</head>

<body>
글자 색을 흰색으로~ 
글자 색을 검정색으로~위의 흰 글자색은 영역을 잡으면 보인다. 
글자 색을 빨간색으로~ 
글자 색을 초록색으로~ 
글자 색을 파란색으로~ 
내맘대로 글자색 1 
내맘대로 글자색 2 
</body>
</html>

[Result]

글자 색을 흰색으로~

글자 색을 검정색으로~위의 흰 글자색은 영역을 잡으면 보인다.

글자 색을 빨간색으로~

글자 색을 초록색으로~

글자 색을 파란색으로~

내맘대로 글자색 1

내맘대로 글자색 2

▶

강조하고자하는 글자와 관련된 태그들의 종합예제를 보니 한층 이해가 더해질 것이다.

저작자표시

'기타 HTML 코드' 카테고리의 다른 글

페이지를 자동으로 새로고침 되게 하는 HTML소스 (0)	2017.09.26
아이프레임(iframe) Inline Frames / HTML 코드 (0)	2017.09.25
도메인 네임 시스템 (DNS)이란? (0)	2017.09.18
[워드프레스] 페이팔 기부 버튼을 사이트에 추가하기 (0)	2017.09.12
파비콘 만들기, 파비콘이란? (0)	2017.09.08