1. font의 정의
font란 글의 형태를 의미하는데, 글자의 서체를 말합니다.
2. font family
일반적인 사용으론 webpage에 폰트를 포함할수 없습니다. 그러하기에 webpage에 설정된 폰트를 사용자가
보기위해선 사용자의 디바이스에도 해당되는폰트가 포함되어야 합니다.
그래서 css에선 font family라는 형식이 있는데. 폰트에 우선순위를 정하여 여러가지를 지정하면 그중에서
사용할 수 있는 폰트를 상용하게 됩니다. 예제를 들어 하단의 구문은 사용자 컴퓨터의 arial black 폰트가 있다면
적용하고 없으면 Arial 폰트를 상용합니다.
p{font-family:"arial black",Arial, serif;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8 >
<style type="text/css">
a{
font-family:'굴림',gulim, new gulim,dotum,sans-serif
}
</style>
</head>
<body>
<a href="http://dungx2.tistory.com">둥둥이블로그</a>
</body>
</html>
3. 고정,가변폭이란
통상적으로 폰트를 디자인 할때 문자의 폭을 문자의 모양에 따라 각 다른 넓이를 가지게 됩니다. 예를들어 숫자8과 문자
p의 폭을 같게 디자인하게 되면 어색하게 느껴질수 있습니다. 이런 방식을 가변폭이라고 합니다.
반대로 데이터 분석이나 코딩과 같은 일을 하는데에 미려함 보단 정확성을 더 중요시하기에 글자의 폭을 같게 디자인
하는데에는 이러한 방식을 고정폭이라고 합니다. 통상적으로 고정폭 폰트는 굴림체와 같이 폰트의 이름뒤에 "체"를
붙입니다. 아래쪽에 NHN에서 무료로 나눠주는 폰트인 "나눔고딕","나눔고딕코딩"의 글자간의 넓이를 비교한 부분입니다.
4. sans-serif 와 serif의 비교
serif란? 문자의 디자인이 포함된 장식적인 요소로 아래와 같이 붉은색에 해당됩니다. 가장 대표적인 글꼴로 바탕체,
궁서체,time new roman이 있습니다.
sans-serif란? 세리프와 달리 장식적인 요소가 없는 디자인으로서 굴림체,돋음체,arial, verdana가 가장 많이 사용됩
니다. font-family에 serif 또는 sans-serif를 사용하면 운영체제 내부적인 룰에 따라서 적절한 폰트가 사용됩니다.
5. font size의 정의
폰트의 크기를 설정할 때는 font-size태그를 사용합니다. font-size태그를 사용할때 자주 사용되는 단위는 px과 em이
있습니다. W3C에선 em 사용을 추천하고 있습니다. em은 상대적 크기인데, 폰트의 대문 M의 폭을 16PX로 계산하기
때문에 1em은 기본적으로 16px과 같다고 보시면 됩니다. 하지만 em은 현재 엘리먼트가 상속하고 있는 폰트의 크기를
기준에 상대적으로 결정됩니다.
<body>
<div id="font_p">
40px
<div class="em05">
0.5em=25px;
</div>
<div class="em2">
2em=100px;
<div class="em05">
0.5em=50px;
</div>
</div>
</div>
</body>
6.font weight
폰트의 두께를 사용할때는 font-weight를 활용합니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
#normal {
font-weight: normal;
}
#bold {
font-weight: bold;
}
#bolder {
font-weight: bolder;
}
#lighter {
font-weight: lighter;
}
#lighter {
font-weight: lighter
}
#w1 {
font-weight: 100;
}
#w2 {
font-weight: 200;
}
#w3 {
font-weight: 300;
}
</style>
</head>
<body>
<div id="normal">
normal
</div>
<div id="bold">
bold
</div>
<div id="bolder">
bolder
</div>
<div id="lighter">
lighter
</div>
<div id="w1">
size100
</div>
<div id="w2">
size200
</div>
<div id="w3">
size300
</div>
</body>
</html>
'IT > CSS' 카테고리의 다른 글
| 배경 설정하기 (0) | 2015.03.12 |
|---|---|
| 링크와 표를 꾸미기 (0) | 2015.03.11 |
| css로 텍스트 꾸미기 (2) | 2015.03.09 |
| css 선택자의 조합 (1) | 2015.03.09 |
| css의 선택자의 사용 (0) | 2015.03.09 |