웹마스터 팁
[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
감사합니다. 다음에도 유용하게 읽어주세요.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 깔끔한 홈페이지를 만들고 싶다면 꼭 알아야 할 것(1) [5] | 키르(SP) | 2002.08.15 |
| [HTML 초보자] HTML 물리적태그와 논리적태그(글자진하게 등등) [5] | ZipShin | 2002.08.14 |
| 사용자의 윈도 화면배색을 쓰자.. [4] | 엔카일 | 2002.08.13 |
| [Siren]소스보기 금지된 페이지 저장하기! (강좌가 아닌가..;;) [15] | 세이렌 | 2002.08.12 |
| [HTML 초보자] HTML 폰트 태그 [2] | ZipShin | 2002.08.12 |
| 레이어에 스크롤바 달기(예제보기 제거) [13] | TheMics | 2002.08.09 |
| [HTML 초보자] HTML 홈페이지의 태그 기본구조2. [13] | ZipShin | 2002.08.09 |
| HTML에서 태그 베끼기 [4] | 미키 | 2002.08.09 |
| 중간 점 찍기 [12] | 오픈소스 | 2002.08.08 |
| [HTML 초보자] HTML 홈페이지의 태그 기본구조. [4] | ZipShin | 2002.08.07 |
| [Siren]투명 이미지 [14] | 세이렌 | 2002.08.04 |
| [HTML 초보자] 태그(Tag)의 역사 [6] | ZipShin | 2002.08.03 |
| [Siren]하나도 안귀엽게 -ㅅ-;; 문서 정렬하기 [5] | 세이렌 | 2002.08.01 |
| [스타일시트] 페이지 여백 없애기2 ^^ ↓ 아래글을 보충합니다. [8] | ZipShin | 2002.07.31 |
| [Siren]페이지 여백 없애기 [8] | 세이렌 | 2002.07.31 |
| 웹페이지 소스보기. [4] | ZipShin | 2002.07.31 |
| 이미지에 border="0"값 않넣고 하는방법 [14] | ZipShin | 2002.07.30 |
| [Siren]이미지 주변에 점선 테두리 생기게 하기 ^_^ [6] | 세이렌 | 2002.07.30 |
| [Siren]글자(문자,폰트) 링크 커서 제어하기 [8] | 세이렌 | 2002.07.30 |
| 이미지 클릭했을때 주변에 생기는 점선 없애는 이벤트. [7] | 김승진 | 2002.07.30 |