HTML, 글자에 관한 태그_font의 기본속성 알기

☆º━Design Tutorial/HTML/CSS 2009/11/24 10:41

html 강좌 입니다. 이전 시간에 무엇을 배웠나요?(그새 잊으신건 아니죠?) 10원주고 까먹으셨다면 얼릉 복습하시고 이단락 공부 하시기 바래요.

복습이 확실히 되지 않으면 각 단락이 넘어 갈때마다 점점 어려워지고 뒤죽박죽 됩니다.(이전 단계를 안보고도 쓸 수 있을 만큼 복습하시고 다음 장으로 넘어 오세요. 꼭!!)

이번 시간에는 본문의 글자 속성에 관한 태그입니다. 글자를 나타내는 태그는 내용를 씁니다. 글자를 나타내는 태그에는 글자의 크기 지정, 글꼴 지정, 색 지정등 크게 세가지로 나눌 수 있습니다. 지금부터 속성별로 하나씩 알아보겠습니다.

※ 지난 시간 복습하기

˚ 제목 크기 지정하기 : <hn> 제목 쓰기 </hn> (n=1~6까지 숫자)

˚ 제목 위치 정렬하기 : <hn align="위치"> 제목 </hn> (n=1~6까지 숫자)

˚ 위치를 나타내는 태그 : right(오른쪽), center(중앙), left(왼쪽)

˚ 위치를 지정하는 태그 : align="위치"

● HTML, 본문의 글자에 관한 속성 태그들.

HTML, 문서 본문에 해당하는 글자 기본 태그는  본문 내용입니다. 란 태그는 글자를 지칭하는 태그이며, <font>안에 글자 속성을 나타내는 태그를 지정 할 수 있습니다. 오늘 배울 글자의 크기를 지정, 글자의 색을 지정, 글꼴을 지정할 수 있습니다.

글자의 크기를 지정하는 태그 : 본문 내용
글자의 색을 지정하는 태그 : 본문 내용
글자의 글꼴을 지정하는 태그 : 본문 내용

● HTML, 본문의 글자 크기를 지정하는 태그

기본 공식은  본문 내용입니다. 이전 시간에 제목을 나타내는 태그와 조금 차이가 있습니다. 제목을 나타내는 태그는 <h>자체에 크기에 관한 속성이 포함되어 있습니다.(대제목, 소제목 이렇게 말할 수있겠죠) 즉 다시 말해 <h>태그는 제목이란 뜻으로 제목의 크기를 1~6까지의 크기를 사용 합니다. 하지만 본문 글자의 크기를 지정 하는 태그는 size="크기"로 따로 지정 해주어야 합니다.

크기에 해당하는 수치는 3가지로 표시 할 수 있습니다.

size="n" (n=1~7까지의 숫자로 지정 1이 제일 작고,7이 제일 큼)
size="npt" (n=1~ 임의로 숫자를 지정 pt=포인트로 표시되는 단위)
size="npx" (n=1~ 임의로 숫자를 지정 px=픽셀로 표시되는 단위)

보통 문서를 작성할때 pt단위를 많이 사용하며, px단위는 css나 스크립트에서 많이 사용합니다.

에디터에서 보면 8pt부터 크게 36pt까지 자동 지정할 수 있도록 하였습니다. html로 보시면, 위의 태그 속성이 자동 지정되어 나타나 있습니다.

에디터에 나온 기본 크기외의 크기로 지정 하고 싶을 경우

예) 20pt로 정해서 쓰고 싶다.(18pt는 조금 작고, 24pt는 너무 큼) 이런 경우에 html 편집기를 선택하고 해당하는 부분에 위의 사이즈 공식을 대입해서 20으로 지정해 주면 20의 크기로 글자 크기가 정해 지게 됩니다.

태그 실행 예제(메모장에 직접 작성하며 연습하세요)

<html>
<head>
 <title>본문 글자 크기</title>
 </head>
 <body>
 <h2> 제목 크기 h2 </h2>
 1~7까지 지정 해서 쓸 수있다. 
 1부터~n까지 pt단위로 쓸 수있다. 
 1부터~n까지 px단위로 쓸 수있다. 
 </body>
</html>

● HTML, 본문 글자의 색을 지정하는 태그

글자의 색을 지정하는 태그는  본문 내용  입니다. 색상에 들어가는 색상값은 보통3가지로 표기가 되는데, html 문서는 6자리 코드값으로 표시합니다.

색명으로 표기 할 경우 색명이 색 표준 이름이 아니거나, 인터넷 브러우저에 따라 한글 명령어를 수행하지 못하므로 되도록 위의 6자리 코드값으로 사용하셔야 합니다.

색 코드 값은 #뒤에 6개의 영어와 숫자로 조합된 코드를 입력하여 쓰는데, 웹상에서 쓰는 코드를 웹컬러라고 명칭 합니다. 다시 말해 검정색으로 지정할 때 color="검정" or color="black"에 해당하는 color="#000000" 으로 표기하시면 됩니다.

웹컬러는 RGB를 기본으로 16진법을 이용해 추출하는데 색상의 가짓수가 너무 많아, 웹 안전색상이라 하여 216개의 색을 웹 표준 색으로 지정해 놓았습니다. 그외의 색상은 호환성이 떨어질 우려가 있어 되도록 웹에서 쓰는 색상은 216색범위 안에서 사용하는 것이 좋습니다.

태그 실행 예제(메모장에 직접 작성하며 연습하세요)

<html>
<head>
 <title>본문 글자 색상</title>
 </head>
 <body>
 한글색명으로 색 지정하기 
 영어 표기법으로 색 지정하기 
 코드로 색 지정하기 
 </body>
</html>

아래의 표는 한국 표준 기본 16색을 차트로 만들어 놓은 것입니다. 색명에 해당하는 16색의 기본 코드를 html 태그에 적용하시면 됩니다.

16가지 기본 컬러 코드표

영어 표기	한글 표기	코드 표기	색상
black	검정	#000000
gray	회색	#808080
silver	은색	#c0c0c0
white	하양	#ffffff
yellow	노랑	#ffff00
lime	라임	#00ff00
olive	올리브색	#808000
green	초록	#008000
teal	틸	#008080
aqua	아쿠아	#00ffff
blue	파랑	#0000ff
navy	네이비	#000080
purple	보라	#800080
fuchsia	자홍색	#ff00ff
red	빨강	#ff0000
maroon	밤색	#800000	;

● HTML, 본문의 글꼴을 지정하는 태그

본문의 글꼴을 지정하는 태그는  본문 내용 입니다. 이제 글꼴에 관한 태그가 무엇인지 아시겠지요? 네, 바로 face를 글꼴로 정해서 씁니다. 글꼴안에 들어갈 내용은 폰트이름을 넣어 주시면 됩니다.

face=돋움, face=굴림 이렇게 지정해 주시면 되는데, 영어 폰트명도 상관 없습니다. 단, 인터넷 무료폰트가 아니면 서버상태에 따라 폰트가 제대로 작동되지 않을 수 있습니다.(무료 기본 글꼴을 쓰는것이 좋습니다)

태그 실행 예제(메모장에 직접 작성하며 연습하세요)

html 태그강좌는 제 글을 보시고 공부 하시는 분들 확실하게 복습하시라고 2~3일을 터울로 글을 발행 하고 있습니다. html 태그강좌는 알라딘 창작 블로그 "웹디자인과 블로그팁"에 연재중입니다. 강의료라 생각하시고 추천과 믹시 듬뿍 주시면 힘내서 더 좋은 글로 보답 하겠습니다.

이 글이 링크되어 있는 곳:

블코채널[blogkorea]: 웹디자인과 블로그팁에 링크되어 있습니다.
레뷰 아이템[revu]: 웹디자인& 블로그 Tip에 링크되어 있습니다.

'Design Tutorial > HTML/CSS' 카테고리의 다른 글

HTML, 문서의 기본 구조 복습과 테스트 (25)	2009/12/12
HTML, 문서 단락 태그에 대해 배워보자. (34)	2009/12/01
HTML, 글자에 관한 태그_font의 기본속성 알기 (10)	2009/11/24
HTML문서의 제목과 관련한 태그를 배우자. (26)	2009/11/22
html문서의 기본 구조와 메모장 쓰기. (10)	2009/11/20
HTML, 태그(Tag)와 html에 대해 알아 보자. (26)	2009/11/17