웹마스터 팁
[HTML 초보자] HTML 폰트 태그
2002.08.12 10:55
저번에는 제가 HTML 홈페이지 기본태그와, 그리고 홈페이지의 기본태그 구조에 관한 설명을 했습니다.
오늘은 아주 쉽게 할수 있는 HTML 폰트 태그를 하도록 합시다..^^
폰트태그는, 글자의 글꼴,모양,색상을 변경할수 있는 태그입니다.
1. <font>폰트</font>의 태그를 사용합니다.
2. 1번에 걸쳐 여러가지의 기능이 삽입되지요..^^
3. color,size,face를 지정할수 있습니다.
첫번째, 간단한 폰트 태그 맛보기
간단한 폰트 태그를 맛보기 위해서는 이러한 태그를 사용합니다.
<font>폰트태그입니다.</font>
이때, html문서로 실행시키면, 아무런 변화가 없습니다. 왜냐하면, 아무런 기능을 넣지 않았기때문입니다.
두번째, 색깔 넣기
일단 색깔을 글자에 넣는다는것은 어렵게 생각합니다만, 영어단어 color을 생각하면 됩니다.
색깔은, 16진수 RGB를 사용하구요(핵사코드), 일반 색명 red,blue,green도 사용합니다.
사용법) <font color="칼라코드 또는 칼라명">칼라</font>
<font color="red">빨강색</font> (일반 색명)
<font color="#ff0000">빨강색</font> (RGB 핵사코드)
<font color="blue">파란색</font> (일반 색명)
<font color="#0000ff">파란색</font> (RGB 핵사코드)
<font color="green">녹색</font> (일반 색명)
<font color="#00ff00">녹색</font> (RGB 핵사코드)
<font color="yellow">노란색</font> (일반 색명)
<font color="#fff000">노란색</font> (RGB 핵사코드)
<font color="black">검정색</font> (일반 색명)
<font color="#000000">검정색</font> (RGB 핵사코드)
<font color="white">흰색</font> (일반 색명)
<font color="#ffffff">흰색</font> (RGB 핵사코드)
대부분 이러한 색이 기본으로 사용합니다. 더 많은 색을 사용할려면 http://netmask.co.kr/~zipshin/color.htm 을 참고하시면 됩니다.
특히 핵사코드는 #(샾)기호와 함께 숫자와 영어로 사용됩니다. #000000은 검정색이고요, #ffffff은 흰색입니다.
http://netmask.co.kr/~zipshin/color.htm 에 가면 색상이 많이 나오는데; 마음에 드는 색상을 선택합니다.
ffe066 <--이런식으로 되어있습니다. color="#ffe066" 을 하면 되요..^^
세번째, 글자 크기 변경
일단, 폰트 태그에서는 글자의 크기를 마음대로 변경할수 있습니다.
글자의 크기 제한은 숫자 1부터 7까지 사용할수 있으며, 절대값과 상대값을 사용할수 있는데 대부분, 숫자의 정수값을 사용합니다. (죄송합니다, 절대값과 상대값에 대한것은 아직도 햇갈리는군요..^^)
사용법) <font size="3">글자 사이즈는 기본값 3입니다.</font> 가 아주 기본값입니다.
제가 분명히 숫자 1부터 7까지 사용할수있다고 했었죠? 사용해보겠습니다.
<font size="1">글자 사이즈는 아주작은 1입니다.</font>
<font size="2">글자 사이즈는 그다음작은 2입니다.</font>
<font size="3">글자 사이즈는 기본값 3입니다.</font>
<font size="4">글자 사이즈는 3보다 커요</font>
<font size="5">글자 사이즈는 5입니다.</font>
<font size="6">글자 사이즈는 6입니다.</font>
<font size="7">글자 사이즈는 아주큰 7입니다.</font>
그리고 이렇게 사용할수도 있습니다. <font size="+2">글자 사이즈는 기본값 +2입니다.</font>
네번째, 글자 글꼴 변경
글자 글꼴의 기본값은 아마, 신명조이나, 명조, 바탕체 일것입니다. 이것을 태그를 사용하여 마음대로 변경할수 있습니다.
사용법) <font face="글꼴명">글꼴명</font>를 사용합니다.
<font face="돋움체">돋움체</font>
<font face="명조체">명조체</font>
<font face="굴림체">굴림체</font>
<font face="바탕체">바탕체</font>
<font face="신명조">신명조</font>
<font face="Arial">Arial</font>
<font face="wedding">Wedding</font>
대충 이렇게 사용합니다. 이 폰트는 내 컴퓨터 C:WindowsFonts 디렉토리에 있는 폰트입니다. 근데 유의 하실것은 내 컴퓨터에 새로운 폰트를 설치하면, 상대편에서 홈페이지 접속시에 그 폰트가 없으면, 깨진다는 사실입니다. 그래서 폰트 태그는 잘 사용하지 않고, 스타일 시트로, 웹정체를 사용하기도 하지요...^^
다섯번째, 폰트태그의 혼합하자!
지금까지 간단하게 폰트태그에 대해서 맛을 보았습니다. 이번에는 글자색이 빨강색이며, 글꼴은 바탕체, 글자사이즈는 5로 합시다.
결과값은? => <font color="#ff0000" face="바탕체" size="5">글자색이 빨강색이며, 글꼴은 바탕체, 글자사이즈는 5</font> 입니다.
여섯번째, 홈페이지에 삽입을 할려면?
<html>
<head>
<title>폰트 태그 맛보기</title>
</head>
<body>
<font color="#ff0000" face="바탕체" size="5">글자색이 빨강색이며, 글꼴은 바탕체, 글자사이즈는 5</font>
</body>
</html>
을 사용하면 되요.. 폰트 태그 아주 간단하죠? -_-; ZipShin의 간단한 강의 였습니다.
오늘은 아주 쉽게 할수 있는 HTML 폰트 태그를 하도록 합시다..^^
폰트태그는, 글자의 글꼴,모양,색상을 변경할수 있는 태그입니다.
1. <font>폰트</font>의 태그를 사용합니다.
2. 1번에 걸쳐 여러가지의 기능이 삽입되지요..^^
3. color,size,face를 지정할수 있습니다.
첫번째, 간단한 폰트 태그 맛보기
간단한 폰트 태그를 맛보기 위해서는 이러한 태그를 사용합니다.
<font>폰트태그입니다.</font>
이때, html문서로 실행시키면, 아무런 변화가 없습니다. 왜냐하면, 아무런 기능을 넣지 않았기때문입니다.
두번째, 색깔 넣기
일단 색깔을 글자에 넣는다는것은 어렵게 생각합니다만, 영어단어 color을 생각하면 됩니다.
색깔은, 16진수 RGB를 사용하구요(핵사코드), 일반 색명 red,blue,green도 사용합니다.
사용법) <font color="칼라코드 또는 칼라명">칼라</font>
<font color="red">빨강색</font> (일반 색명)
<font color="#ff0000">빨강색</font> (RGB 핵사코드)
<font color="blue">파란색</font> (일반 색명)
<font color="#0000ff">파란색</font> (RGB 핵사코드)
<font color="green">녹색</font> (일반 색명)
<font color="#00ff00">녹색</font> (RGB 핵사코드)
<font color="yellow">노란색</font> (일반 색명)
<font color="#fff000">노란색</font> (RGB 핵사코드)
<font color="black">검정색</font> (일반 색명)
<font color="#000000">검정색</font> (RGB 핵사코드)
<font color="white">흰색</font> (일반 색명)
<font color="#ffffff">흰색</font> (RGB 핵사코드)
대부분 이러한 색이 기본으로 사용합니다. 더 많은 색을 사용할려면 http://netmask.co.kr/~zipshin/color.htm 을 참고하시면 됩니다.
특히 핵사코드는 #(샾)기호와 함께 숫자와 영어로 사용됩니다. #000000은 검정색이고요, #ffffff은 흰색입니다.
http://netmask.co.kr/~zipshin/color.htm 에 가면 색상이 많이 나오는데; 마음에 드는 색상을 선택합니다.
ffe066 <--이런식으로 되어있습니다. color="#ffe066" 을 하면 되요..^^
세번째, 글자 크기 변경
일단, 폰트 태그에서는 글자의 크기를 마음대로 변경할수 있습니다.
글자의 크기 제한은 숫자 1부터 7까지 사용할수 있으며, 절대값과 상대값을 사용할수 있는데 대부분, 숫자의 정수값을 사용합니다. (죄송합니다, 절대값과 상대값에 대한것은 아직도 햇갈리는군요..^^)
사용법) <font size="3">글자 사이즈는 기본값 3입니다.</font> 가 아주 기본값입니다.
제가 분명히 숫자 1부터 7까지 사용할수있다고 했었죠? 사용해보겠습니다.
<font size="1">글자 사이즈는 아주작은 1입니다.</font>
<font size="2">글자 사이즈는 그다음작은 2입니다.</font>
<font size="3">글자 사이즈는 기본값 3입니다.</font>
<font size="4">글자 사이즈는 3보다 커요</font>
<font size="5">글자 사이즈는 5입니다.</font>
<font size="6">글자 사이즈는 6입니다.</font>
<font size="7">글자 사이즈는 아주큰 7입니다.</font>
그리고 이렇게 사용할수도 있습니다. <font size="+2">글자 사이즈는 기본값 +2입니다.</font>
네번째, 글자 글꼴 변경
글자 글꼴의 기본값은 아마, 신명조이나, 명조, 바탕체 일것입니다. 이것을 태그를 사용하여 마음대로 변경할수 있습니다.
사용법) <font face="글꼴명">글꼴명</font>를 사용합니다.
<font face="돋움체">돋움체</font>
<font face="명조체">명조체</font>
<font face="굴림체">굴림체</font>
<font face="바탕체">바탕체</font>
<font face="신명조">신명조</font>
<font face="Arial">Arial</font>
<font face="wedding">Wedding</font>
대충 이렇게 사용합니다. 이 폰트는 내 컴퓨터 C:WindowsFonts 디렉토리에 있는 폰트입니다. 근데 유의 하실것은 내 컴퓨터에 새로운 폰트를 설치하면, 상대편에서 홈페이지 접속시에 그 폰트가 없으면, 깨진다는 사실입니다. 그래서 폰트 태그는 잘 사용하지 않고, 스타일 시트로, 웹정체를 사용하기도 하지요...^^
다섯번째, 폰트태그의 혼합하자!
지금까지 간단하게 폰트태그에 대해서 맛을 보았습니다. 이번에는 글자색이 빨강색이며, 글꼴은 바탕체, 글자사이즈는 5로 합시다.
결과값은? => <font color="#ff0000" face="바탕체" size="5">글자색이 빨강색이며, 글꼴은 바탕체, 글자사이즈는 5</font> 입니다.
여섯번째, 홈페이지에 삽입을 할려면?
<html>
<head>
<title>폰트 태그 맛보기</title>
</head>
<body>
<font color="#ff0000" face="바탕체" size="5">글자색이 빨강색이며, 글꼴은 바탕체, 글자사이즈는 5</font>
</body>
</html>
을 사용하면 되요.. 폰트 태그 아주 간단하죠? -_-; ZipShin의 간단한 강의 였습니다.
댓글 2
-
eRic
2002.08.12 13:21
잘봤습니다^^땡큐... -
ZipShin
2002.08.12 18:49
감사합니다. 다음에도 유용하게 읽어주세요.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| Whois를 이용해서 접속자가 사용하는 ISP출력(한국통신,하나로,두루넷 등등) [6] | 김재경 | 2003.09.23 |
내 홈페이지의 방문자 어디서 접속했을까 알아봅시다
[21]
 | 버찌소년 | 2003.10.08 |
| 알기쉬운 웹용 MySQL 관리도구, phpMyAdmin 설치하기 [10] | 허창원 | 2003.10.11 |
| 공지사항|일기장 4강 - notice.php 간단한 글보이기 | 시루바 | 2003.10.16 |
| include, onload, <span id=...> 다계층메뉴 활용 강좌 [2] | 김병희 | 2003.10.25 |
|
홈페이지 관리자 모드 구축하기 (HTTP 인증, 중복 맞음)
[10]
| 9000㎒ | 2003.11.01 |
| 지금은 시스템 점검중 만들기... [8] | zentoo.com | 2003.11.11 |
|
회원 포인트 랭킹(중복 -_-a)
[4]
| weky | 2003.11.15 |
| 한꼬마의 제로보드 활용방법 (로그인 값 알아 보기) [3] | 한꼬마 | 2003.11.20 |
| 한꼬마의 제로보드 이용법 (sql로 테이블 호출) [2] | 한꼬마 | 2003.11.26 |
|
throttle-me를 이용한 계정 트래픽 나타내기
[39]
| 旻天 | 2003.11.27 |
| 랜덤 배경음악 만들기. [6] | 폭주나루 | 2003.12.01 |
| 세션을 이용한 관리자 모드 구축하기 1강(중복?) | 박정호 | 2003.12.09 |
| 세션을 이용한 관리자 모드 구축하기 2강 [6] | 박정호 | 2003.12.09 |
| 세션을 이용한 관리자 모드 구축하기 3강 [6] | 박정호 | 2003.12.09 |
| 카일레라 서버 페이지 만들기. [2] | teslaMINT | 2003.12.09 |
| 나도 @ 도메인 서비스를 해보자 [29] | 김병철 | 2003.12.19 |
| [팁&테크] 텍스트파일에서 디비 입력하기. [1] | 김영진 | 2004.01.09 |
| include에서 Failed opening 발생문제 [4] | 이경훈 | 2004.01.10 |
| unset / isset 를 알아보자. [2] | 씨파개 | 2004.01.12 |