웹마스터 팁
[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
감사합니다. 다음에도 유용하게 읽어주세요.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| xe1.4.5.10 에서 xe1.5의 xe_solid_enterprise 레이아웃 사용하기 | 양파농부 | 2012.01.31 |
xpresseditor 사용시 첨부파일 본문삽입 중복되는 문제 수정.
[13]
 | misol | 2012.01.31 |
| HTML 편집모드에서 파일 첨부 본문 삽입시 자바스크립트 오류가 뜨는 문제 수정 팁 [1] | misol | 2012.02.01 |
|
xe 1.4.5.10 에서 board 1.4.2 (1.5용 게시판) 사용하기
| 양파농부 | 2012.02.01 |
| 여러도메인으로 접속시 무조건 하나의 도메인으로 이동시키기 | squarehacker | 2012.02.02 |
| 확장변수이용시 숫자 일경우 정렬하기 팁 | 푸하라 | 2012.02.02 |
| XE 1.5 이상으로 DB 이전시 일부 DB가 빠질 경우 - 내용추가(0203) [7] | sejin7940 | 2012.02.02 |
|
묻고 답하기 게시물 옮기는 法
[2]
| CMD | 2012.02.05 |
|
부운영자
[26]
| 송동우 | 2012.02.05 |
| XE 포인트 파일캐쉬대신 memcache 사용하기 [4] | 최기훈. | 2012.02.06 |
|
스마트폰에서 xe 구축
[3]
| 최태진814 | 2012.02.06 |
|
v1.5를 위한 팝업 모듈과 팝업 오프너 애드온
[55]
| 우진홈 | 2012.02.06 |
| php 피카사 연동 프로그래밍 [1] | 강아지60 | 2012.02.06 |
| [XE1.4.5.10]게시판 파일첨부 버튼이 먹통일 때.. | 카리브 | 2012.02.08 |
| make install 로 설치한 파일 제거 방법 [2] | StyleRoot | 2012.02.08 |
| 댓글을 역순으로 출력하는 팁 (최근댓글이 가장 위에) [8] | sejin7940 | 2012.02.10 |
| 1.5.1 최근 글 위젯에서 특수문자가 나가는 현상 [7] | Crom | 2012.02.12 |
| 업데이트 후 사이트 통함검색이 안되시는 분 보십시오^^ | RGM | 2012.02.12 |
|
v1.5를 위한 제어판 테마 애드온 정식
[4]
| 우진홈 | 2012.02.13 |
| XE에서 메일기능이 작동하지 않을때 | 애호가 | 2012.02.16 |