제3장 글꼴 사용하기
[학습목표]
다양한 글꼴의 사용법을 이해한다.
글자의 크기,색깔,서체 등을 지정하는 방법을 익힌다.
색깔이름, 16진수 RGB 코드를 살펴보고, 직접 사용해 본다.
지난강좌에서 처럼 한가지 글자체로만 웹 문서를 만든다면 단조롭고 너무 밋밋 하겠지요. 우리가 아래한글 같은 워드프로세서를 이용해서 다양한 글씨체로 문서를 작성하듯이 웹 문서를 작성할 수 있습니다.
1 글꼴 지정하기
윈도우 [제어판]에 [글꼴]을 더블클릭하면 자신의 PC에 설치 되어 있는 글꼴들을 볼 수가 있지요.
이 글꼴을 모두 사용할 수 가 있습니다만, 내 홈페이지를 방문한 사용자의 컴퓨터에 여기 지정된 글꼴이 설치되어 있지 않다면 기본 글꼴로 표시됩니다. 그래서, 보통 특수한 글꼴이 필요한 경우는 이미지로 만들어서 많이 이용하게 되지요.
<FONT> 태그
- 기능 : 글자의 크기, 색깔, 서체를 지정
- 속성 : size="n", color="#색상코드", face="글꼴체"
글자의 크기지정과 대표적인 몇가지 글꼴을 사용해 볼까요?
메모장에서 아래와 같이 입력해 보시지요.
<HTML>
<HEAD>
<TITLE> 글자크기와 글꼴지정하기 </TITLE>
</HEAD>
<BODY>
<FONT SIZE=1 FACE=바탕>안녕하세요</FONT><BR>
<FONT SIZE=2 FACE=바탕>안녕하세요</FONT><BR>
<FONT SIZE=3 FACE=돋움>안녕하세요</FONT><BR>
<FONT SIZE=5 FACE=굴림>안녕하세요</FONT><BR>
<FONT SIZE=7 FACE=궁서>안녕하세요</FONT>
</BODY>
</HTML>
이것을 실행하면 결과확인 처럼 나오게 됩니다.
참 FONT 는 SIZE=3 이 기본적입니다. 폰트 싸이즈를 지정하지 않은면 3 이 된다는 것이지요.
참고로 보통 웹문서에서 가장 무난하면서 많이 쓰는 size는 2 입니다.
2 글자 색깔 지정하기
이제 글자의 색깔을 여러 가지로 지정해 볼까요?
이것은 SIZE와 마찬가지로 FONT 태그 안에 COLOR를 쓰면 되지요.
색깔을 지정하지 않으면 디폴트로 검정색이 설정됩니다. 색깔이름을 바로 써주어도 되지만, 많은 색깔의 이름을 모두 알 수 없는데다 색깔을 전부 지원하지 않으므로 16진수 RGB코드를 사용합니다.
예를 들어 <FONT COLOR="RED">와 <FONT COLOR="#FF0000">은 동일한 색깔입니다.
☞ RGB 색상표를 참고해 보세요.
<HTML>
<HEAD>
<TITLE> 글자색깔 지정하기 </TITLE>
</HEAD>
<BODY>
<FONT SIZE=1 COLOR=RED>안녕하세요</FONT><BR>
<FONT SIZE=2 COLOR=BLUE>안녕하세요</FONT><BR>
<FONT SIZE=3 COLOR=#002F00>안녕하세요</FONT><BR>
<FONT SIZE=5 COLOR=#000000>안녕하세요</FONT><BR>
<FONT SIZE=7 COLOR=#800080>안녕하세요</FONT>
</BODY>
</HTML>
결과확인를 클릭해 보세요..지정된 글자색깔로 나타 나지요?
3 글자 강조하기
이제 글씨를 진하게 해볼까요?
FONT 태그 안에 <B></B>라는 태그를 삽입하세요.
<HTML>
<HEAD>
<TITLE> 글자 강조하기 </TITLE>
</HEAD>
<BODY>
<FONT SIZE=2 COLOR=RED>안녕하세요</FONT><BR>
<FONT SIZE=2 COLOR=RED><B>안녕하세요</B></FONT><BR>
<FONT SIZE=3 COLOR=BLUE>안녕하세요</FONT><BR>
<FONT SIZE=3 COLOR=BLUE><B>안녕하세요</B></FONT><BR>
<FONT SIZE=5 COLOR=#800080>안녕하세요</FONT>
</BODY>
</HTML>
결과확인를 클릭해 보세요..지정된 글자들은 굵게 진하게 나타 납니다.
폰트 색깔, 서체, 싸이즈, 진하게, 밑줄, 이탤릭체 지정을 동시에 해 볼까요?
<HTML>
<HEAD>
<TITLE> 글자 속성 동시 지정하기 </TITLE>
</HEAD>
<BODY >
<FONT COLOR=BLUE FACE="궁서체" SIZE= 4>
<B><U><I>태그의 순서</I></U></B>
</FONT>
</BODY>
</HTML>
위와 같이 글자속성을 복합하여 사용할 수가 있습니다만, 복합 태그를 사용할 때는 지켜야 할 사항이 있습니다.
시작 태그는 시작태그끼리 앞에 있어야 하고 끝 태그는 끝 태그끼리 뒤에 있어야 합니다. 글자를 사이에 두고 앞의 시작 태그와 뒤의 끝 태그는 항상 가운데를 중심으로 쌍으로 일치되게 있어야 한다는 뜻 이지요.무슨 말이냐구요?
예를 들어 <B><U><I> </B></U></I>가 아니라 위와 같이 <B><U><I> </I></U></B>와 같은 순서로 나열을 해야한다는 것 이지요.
자! 그러면 결과확인을 클릭해 보실까요?
어떠세요? 워드문서를 작성하듯이 홈페이지도 여러 가지 글자모양을 만들 수가 있다는 것을 알 게 되었을 것 입니다.
4 줄 바꾸기
아! 깜빡하고 그냥 지날번 했네요. 이번 강좌 처음부터 나오는 태그가 있었는 데...뭐 냐구요? <BR>이란 태그 보셨지요? 우리가 아래한글 워드 문서를 작성할 때는 줄 바꿀 때 Enter키를 치지요. 그러나 웹 문서에서는 줄 바꿀 끝 위치에 <BR>태그를 삽입해야 합니다.
줄을 바꿀려고 아무리 Enter키를 쳐봐야 소용이 없다는 얘기지요. <BR>태그가 바로 Enter를 누른 것과 같은 효과를 나타낸다는 뜻 입니다.
그리고 문단을 구분해 줄때는 <P>를 씁니다. 이때 문단 사이에는 한 줄의 여백이 생깁니다.
<HTML>
<HEAD>
<TITLE> 줄 바꾸기 </TITLE>
</HEAD>
<BODY >
그냥 줄을 바꾸면
이렇게 서로 붙어 버리지요.<P>
BR 태그를 사용하면<BR>
이렇게 다음 줄에 글이 나타납니다.<P>
그리고 P 태그를 사용하면 <P>
이렇게 다음 다음 줄에 글이 나타납니다.
</BODY>
</HTML>
결과확인를 클릭해서 어떻게 나타나는지 확인 해 보세요.
지금까지 글자모양과 관련된 폰트태그들을 공부해 보았습니다. 이제 HTML 문서를 작성하는데 조금씩 자신감이 생기지요?
그럼, 다음강좌에서는 반드시 알아야 할 기본태그를 정리해 보도록 하지요. 더욱 분발해 보세요~~
잠깐 커피 한 잔 드시고 다음강좌에서 만나요!!
댓글 없음:
댓글 쓰기