Programming/HTML CSS
1. font 사용
<font color="red">붉은색</font>
2. font 속성

(1) size

1~7까지의 값을 사용, 각 숫자에 해당하는 글자 크기는 다음과 같습니다.

 1  8pt
 2  10pt
 3  12pt
 4  14pt
 5  18pt
 6  24pt
 7  36pt

(2) color

글자의 색상을 부여합니다. 색은 red 처럼 직접 색상이름을 지정하거나 #ffa500 처럼 16진수 RGB값을 사용합니다.

(3) face

"명조체" 처럼 글꼴를 지정합니다. 다만 해당 글꼴는 사용자(엄밀히 웹사이트 방문자)의 컴퓨터에 설치된 글꼴이어야 하며 해당 글꼴이 없으면 '굴림'체로 표시됩니다.

글꼴은

<font face="글꼴1, 글꼴2...">글자내용</font>

처럼 여러개 지정할 수 있으며 컴퓨터에 글꼴1이 존재하는 경우 글꼴1을 사용하고 글꼴1이 없으면 그 다음 글꼴2를 사용하는 식으로 작용합니다.

(4) title

title 속성에는 원하는 내용을 담을 수 있으며 title 속성이 사용된 해당 font 태그내용에 마우스를 가져다 대면 지정한 내용을 풍선도움말로 표시합니다.


3. FONT CSS
.css_font {
 font-family:굴림;
 font-size:xx-large;
}
▶css 정의
<span>일반글자</span><br />
<span class="css_font">css 적용</span>
▶적용 HTML

4. FONT CSS 속성

(1) font-family

글꼴 종류를 지정합니다. 해당 글꼴에는 font-family:폰트1, 폰트2, 폰트3... 처럼 연속해서 지정할 수 있으며 폰트1이 없는 경우 폰트2를.. 폰트2가 없는 경우 폰트3이 적용됩니다.

모든 웹사이트 방문자가 설정된 폰트를 가지고 있다고 장담할 수 없으므로 대부분의 경우 마지막에 Serif 나 Sans-serif 또는 Mono space를 지정합니다. 이러한 폰트지정한 앞에서 먼저 제시된 폰트를 표시할 수 없는 경우 사용자의 웹브라우저에 기본적으로 설정된 폰트를 대신 적용하도록 합니다.

폰트명을 지정할때 Tahoma 처럼 한 단어로 이루어진 경우는 별 문제가 안되지만 Arial Black 처럼 공백을 사이에 두고 두 단어로 이루어진 폰트명을 사용할때는
font-family: 'Arial Black';
처럼 따옴표를 붙여야 합니다.

(2) font-style

글꼴 모양을 지정합니다. 이 속성에는 normal(일반), italic(이탤릭체), oblique(기울임) 값을 지정할 수 있습니다.

(3) font-size

글꼴의 크기를 지정합니다. 크기는 숫자로 지정할 수 있으며 font-size:1pt 처럼 정수를 사용해 지정할 수도 있습니다. 정수를 사용하는 경우 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스) 단위를 사용하며 em(1당 기본글꼴 2배), ex(em대비 1/2크기), px(픽셀), %(%단위)등의 상대적 단위크기를 사용하기도 합니다.

정수가 아니면 xx-small, x-small, small, medium, large, x-large, xx-large 와 같이 문자로 지정할 수 있습니다. 이때는 xx-small부터 font-size 값을 1로 하여 1씩 늘어나는 크기와 같습니다.

(4) font-variant

normal, small-caps 값을 지정할 수 있습니다. small-caps값을 지정하는 경우 영문자를 사용할때 소문자를 대문자로 바꾸게 됩니다.

(5) font-weight

글꼴의 두께를 지정합니다. 숫자로 값을 지정하는 경우 100~900사이 값을 사용하며 normal, bold, bolder, lighter등의 문자값을 사용할 수도 있습니다.

(6) line-height

글자의 높이를 지정합니다. 이 속성을 사용하면 실제 글자가 세로로 커지는 것이 아니라 해당 글자가 세로로 차지하는 공간을 넓히게 됩니다.

(7) font

이미 설명드린 1 ~ 6 번까지의 속성을 한번에 지정할 수 있는 속성으로 다음과 같은 순서로 입력합니다.

font: [font-style] [font-weight] [font-size] / [line-height] [font-family];

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5 / CSS] ol, ul, li (목록)  (0) 2013.03.25
[HTML / HTML5] p (문단)  (0) 2013.03.22
[HTML / CSS] font  (0) 2013.03.21
[HTML / HTML5] h (제목)  (0) 2013.03.20
[HTML] 특수문자 코드표  (0) 2013.03.19
[HTML] HTML / CSS  (0) 2013.03.18
0 0