웹 브라우저는 사용자의 PC에 첫 번째 폰트가 있을 경우 해당 폰트를 사용하고, 없을 경우에는 두 번째 폰트를 찾는다. 마찬가지로 두 번째 폰트도 없다면 세 번째 폰트를 찾는다.
PC용 웹 사이트인 경우에는 Window운영체제를 기준으로 “굴림”,“돋움” 폰트를 많이 사용하지만, iPhone이나 Android폰에는 굴림체나 돋움체가 존재하지 않는다.
모바일 웹 페이지를 작성할 시에는 font-family속성의 값에 “Helvetica”(모바일용 돋움체)를 지정해 주어야 한다.
3) 글자 크기 지정
font-size: 12px | 0.8em;
“font-size”는 글자의 크기를 지정하는 수치로 PC용 웹 사이트에서는 일반적으로 “px”단위를 많이 사용하지만 모바일 웹 에서는 “em”단위를 많이 사용한다.
“px”단위는 절대 수치를 의미하고 “em”단위는 유동 단위를 의미한다. “px”수치는 해상도나 텍스트 확대,축소시에 변화가 없는 반면에, “em”단위는 브라우저 확대 시 font-size도 함께 커진다. 또한 px단위는 소수점으로 지정할 경우 브라우저가 반올림하여 적용하지만 em단위는 소수점에 대한 처리가 가능하다.
일반적으로 1em은 16px이다.이는 웹 페이지의 복잡도에 따라 달라지는 수치이지만, 일반적으로 다음과 같은 계산식을 적용할 수 있다.
ex) 사용하고자 하는 px 크기 / 기준크기px(16) = 적용할 em단위 값
12px / 16px = 0.75em
4) 기울임 지정
font-style: italic | normal(기본값);
font-style은 글자으 ㅣ기울임 여부를 지정할 수 있다.
“normal”값을 지정한 경우 글자가 기본형태로 표현되지만, “italic”이라 지정할 경우 기울어진 상태로 표시된다.
대부분의 태그요소는 “nomal”을 기본값으로 가지고 있지만 간혹 address태그와 같은 경우 “italic”이 기본값으로 되어 있기도 하다.
5) 굵기 지정
font-weight: bold | normal(기본값);
“font-weight”는 글자의 굵기를 지정한다.
“normal”일 경우 기본 형태로 표현되고, “bold”로 지정할 경우 굵게 표시된다.
그 밖에 “light”,“lighter”,“bolder”등의 값들도 있으며, 100~900사이의 숫자 값을 100단위로 지정하는 것도 가능하다.
현실적으로 글자의 굵기를 세밀하게 지원하는 폰트가 거의 없기 때문에 “normal”과 “bold”만이 가능하다고 할 수 있다.
수치 값으로 지정할 경우 대부분의 폰트가 100~400까지는 normal에 해당하며 이후의 값들은 bold에 해당한다
6) 줄 높이 지정 속성
line-height: 20px | 120%;
“line-height”속성은 한 줄에 대한 높이 값을 의미한다.
이 값을 지정하면 CSS는 해당 수치 값만큼 가상의 영역을 생성한 후, 글자를 그 영역 안에서 세로축의 중앙에 표시 한다.
<!DOCTYPE html>
<html lnag="ko">
<!-- 페이지 설정 부분 -->
<head>
<!--저장시에 사용된 인코딩(파일의 저장 형식) 값을 웹 브라우저에게 알려준다.- ANSI(euc-kr), UTF-8 -->
<meta charset="utf-8" />
<!--IE의 호환성 보기 모드 금지-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 스마트 장치에서의 해상도 균일화 처리-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--브라우저에 표시될 문서 제목-->
<title>CSS Example</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
<style type="text/css">
/* `*`은 모든 요소를 의미하는 특수 셀렉터 */
* {
font-family: 'Nanum Gothic', sans-serif;
}
div {
font-size: 30px;
color: #666666;
}
</style>
</head>
<!-- 브라우저에 보여질 부분 -->
<body>
<div>구글에서 내려받은 나눔고딕체를 사용하여 웹 페이지를 표시합니다.</div>
</body>
</html>
