 font-family
이 속성은 글꼴을 지정하는 속성입니다. [ , ]로 구별하여 여러 개의 글꼴 그룹 이름, 또는 키워드를 지정할 수 있습니다. 그 경우, 사용자 환경에서 이용할 수 있는 종류보다 먼저 지정된 것이 채택됩니다.
| serif | 명조체 | cursive | 고딕체 |
| cursive | 필기체 | fantasy | 장식체 |
| monospace | 등폭 글꼴 |
ps) 여기서 알아둘 것이 있습니다. 원도우를 사용하는 사용자라면 [time new romen] 라는 글꼴을 본적 있을 겁니다. 이 글꼴은 굵은 글꼴로 디자인된 [time new romen bodl], 이탤릭체로 디자인된 [time new roman lialic] 굵은 이탤릭체로 디자인된 [time new roman bold lialic] 이라고 하는 별도의 글꼴이 준비되어 있습니다. 글꼴은 계산에 따라 결정되지만 미리 전용으로 디자인한 폰트를 갖춤으로써 보다 아름다운 표시나 인쇄가 가능합니다. 이렇게 같은 종류이면서 미리 다른 스타일로 디자인되어 있는 글꼴을 "글꼴 그룹"이라고 하는데 글꼴 그룹에 공백이 들어가는 경우에는 이름 전체를 인용부호 ["] 로 둘러싸야 합니다. font-size
말 그대로 글자의 크기를 지정하는 속성입니다.
xx-small, x-small, small, medium, large, x-large, xx-large
어디서 많이 본것 같지요. ^^; 옷 사이즈를 나타낼때 쓰는 거랑 같잖아요. 글꼴크기를 7단계의 키워드로 지정하며 medium 이 표준 크기입니다. 가장 작은 크기(xx-small)서 부터 가장 큰 크기(xx-large) 까지 약 1.2씩 커지게되며 실제 표시되는 크기는 브라우저나 글꼴의 종류에 따라 달라질 수 있습니다.
smaller, larger
상위 글꼴 크기에 대해서 각각 1단계 작은 글자, 큰 글자를 지정합니다. 예를 들어, 상위 요소의 글꼴 크기가 medium 일 때, smaller 를 지정하면 글꼴 크기는 small 가 됩니다. 상위 요소의 글꼴 크기가 앞에서 설명한 7단계 크기 이외인 경우의 결과는 브라우저에 따라서 달라집니다.
실수값+단위,%
숫자에 단위를 붙여 글꼴 크기를 지정할 수 있으며, 상위요소의 글꼴크기에 대한 비율로 나타낼 수도 있습니다. |
font-weight
글꼴의 굵기를 설정하는 속성입니다.
100, 200, 300, 400, 500, 600, 700, 800, 900
글꼴 그룹 중 어떤 굵기의 글꼴을 사용할 것인지를 지정합니다. 표준 굵기는 400으로써 갋이 작을수록 가는 글꼴, 클수록 굵은 글꼴이 선택됩니다 일반적인 글꼴 그룹은 9종류의 굵기가 다른 글꼴이 준비되어 있지 않은 경우가 많기 때문에 다른 수치를 지정하여도 굵기가 변하지 않는 경우가 있습니다.
normal
표준 굵기의 글꼴을 지정하며 400을 지정한 것과 같은 결과의 글꼴이 표시됩니다.
bold
일반적인 굵기의 굵은 글꼴을 지정하며 700을 지정한 것과 같습니다.
lighter, bolder
상대적인 값으로서 100 ~ 900 사이의 값중에서 현재 굵기보다 한 단계 가는 글꼴을 나타낼때는 lighter, 한 단계 굵은 글꼴을 나타낼때는 bolder 을 지정합니다.
|
font-style
요소 내 글꼴의 스타일을 설정하는 부분으로 표준, 이탤릭, 기울림 글꼴이 있습니다.
normal
표준 글꼴을 지정합니다..
italic
이탤릭 글꼴을 지정합니다. 이탤릭 글꼴이란 단순한 글꼴이 아니라 연결되는 느낌이 드는 이탤릭체 전용으로 디자인된 글꼴을 가리킵니다.
oblique
글꼴 그룹중 기울림 글꼴을 지정합니다. 여기에서 기울림 글꼴이란 특히 고딕 계열 글꼴에서 볼 수 있는 비교적 심플하게 글자를 기울인 느낌으로 디자인된 글꼴을 가리킵니다.
|
|
[예제]
<html>
<head>
<style type="text/css"><!--
.u {font-family:impact,sans-serif}
#batang {font-family:"바탕",바탕체,serif}
#gulim {font-family:"굴림",굴림체,sans-serif}
#s {font-size:small}
#m {font-size:xx-large}
#b {font-weight:bold}
#bb {font-weight:500}
#c {font-style:italic}
#cc {font-style:oblique}
--></style>
</head>
<body background=../../image/background/bg13.gif>
<h4 class=u>font-family</h4>
<p id=batang>이 부분은 바탕체로 설정합니다. <p id=gulim>이 부분은 굴림체로 설정합니다.
<h4 class=u>font-size</h4>
<p id=s>이 부분은 small 이 적용 됩니다. <p id=m>이 부분은 x-large 가 적용 됩니다
<h4 class=u>font-weight</h4>
<p id=b>이 부분은 bold 가 적용됩니다. <p id=bb> 이 부분은 500 이 적용됩니다.
<h4 class=u>font-style</h4>
<p id=c>이 부분은 이탤릭체가 적용됩니다. <p id=cc>이 부분은 기울림 글꼴이 적용됩니다.
</body>
</html>
|
 글꼴 (2) |
font-variant
이 속성은 요소내의 글꼴로 small-caps 를 설정하는 속성입니다. small-caps 란 대문자를 소문자 크기로 작게 한 종류의 글꼴입니다.
| normal | 작은 대문자가 아닌 표준 글꼴을 지정합니다. |
| small-caps | small-capsd의 폰트를 지정합니다. small-caps 가 없는 경우에는 대문자를 축소하여 대신사용합니다. |
font-stretch
이 속성은 요소 내 글꼴의 글자폭을 설정하는 속성입니다.
| condensed | 글자폭이 좁다. |
| normal | 표준형이다. |
| expanded | 글자폭이 넓다. |
font
font 속성은 글꼴에 관련된 여러 개의 속성을 한 번에 설정할 수 있는 속성입니다. 설정할 수 있는 속성은 font-style, font-variant, font-weight, font-size, line-height, font-family 6가지 종류입니다. 값은 공백으로 구별하여 여러 개 지정할 수 있지만 배치하는 순서는 지정되어 있기 때문에 주의가 필요합니다. 또 각 속성의 값을 개별적으로 설정하는 것이 아니라 한 번의 지정으로 시스템이 사용하고 있는 것과 같은 환경으로 설정할 수도 있습니다. [주의] 1. 속성값중 필요한 값은 공백으로 구별한다.
2. font-fmily, font-size 속성은 생략할 수 없다.
3. 순서는 위에 쓴 순서대로 하여야 하지만, font-style, font-variant, font-weight 속성은 순서를 바꾸어도 된다.
4. line-height 속성의 값을 지정할 때는 값 앞부분에 [ / ] 를 붙여준다. [예]
<html>
<head>
body {color:red; background-color:blue; background-image:url("http://studyho.com/image/background/bg14.gif"); margin:0px }
h1,h2 {text-align:center; margin:0px }
h1 { font:italic 6em "times new roman",times,serif }
h2 { color:ffcc00; background-color:transparent; font:light 1.5em arial,sans-serif }
p { color:#006600; background-color:#ffffff; margin:2em; font:12pt/200% "바탕",바탕체,serif }
</head>
<body>
<h1>---font 연습---<h1>
<h2>[welcome to myhome]<h2>
<p>font 속성을 이용하면 글꼴과 관련된 여러 속성을 한 번에 지정할 수 있어 편히합니다.</p>
</body>
</html> |
|
|
|
|
댓글 없음:
댓글 쓰기