[HTML+CSS] 09_폰트관련속성

chocbi 2020. 5. 9. 18:11

폰트 관련 속성

#01. 글자 관련 속성

1) 글자 관련 속성의 종류

속성이름	설명	적용값 예시
font-family	글꼴 이름을 지정한다.	“굴림”, “돋움”, “궁서”
font-size	글자 사이즈를 지정한다.	12px, 12pt, 0.8em, 120% 등
font-style	글자의 기울임을 지정한다.	italic, normal
font-weight	글자의 굵기를 지정한다.	normal, bold, 100~900까지의 100단위 값 등
line-height	한 줄의 높이를 지정한다.	30px, 120% 등
color	글자 색상을 지정한다.	#ff6600, orange 등

2) 글꼴 지정 속성

font-family: "돋움", "굴림", "바탕";

“font-family”는 콤마(,)로 구분하여 여러 개의 글꼴 이름을 지정할 수 있다.
웹 브라우저는 사용자의 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는 해당 수치 값만큼 가상의 영역을 생성한 후, 글자를 그 영역 안에서 세로축의 중앙에 표시 한다.
수치 지정시 %단위일 경우 font-size를 기준으로 한다.

7) 글자 관련 속성 일괄 지정하기

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

font-weight와 font-style은 생략 가능하며, 서로 순서가 변경되어도 무관하다.
- 생략시 두 속성은 기본값인 “normal”값으로 지정된다.
line-height속성은 필요한 경우 font-size값 뒤에 슬래시(/)를 붙이고 표기한다.
font-size속성과 font-family속성은 생략하거나 위치가 변경될 수 없다.

8) 글자 관련 속성 일괄 지정의 예

font: bold italic 50px/100px "Helvetica";
font: italic 50px/100px "Helvetica";
font: italic bold 50px/100px "Helvetica";
font: bold 50px/100px "Helvetica";
50px/100px "Helvetica";
50px "Helvetica";

01-폰트관련속성.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /* 기본 글자 크기
           -> 특정 요소에 적용된 CSS는 자식 요소에게도 상속된다. 그러므로 body태그에 적용된 폰트속성은 페이지 내의 모든 요소에게 동일하게 적용된다.*/
    body {
        font-size: 40px
    }

    /* 글꼴 지정 */
    div.font1 {
        font-family: "궁서", "굴림";
        font-size: 0.8em;
    }

    /* 글자 기울임 */
    div.font2 {
        font-style: italic;
    }

    /* 글자 굵기 */
    div.font3 {
        font-weight: bold;
    }

    /* 줄간격 */
    div.font4 {
        line-height: 80px
    }

    /* 일괄지정 */
    div.font5 {
        font: bold italic 50px/100px "궁서";
    }
    </style>
</head>

<body>
    <div class="font1">폰트관련 속성(1)</div>
    <hr />
    <div class="font2">폰트관련 속성(2)</div>
    <hr />
    <div class="font3">폰트관련 속성(3)</div>
    <hr />
    <div class="font4">폰트관련 속성(4)</div>
    <hr />
    <div class="font5">폰트관련 속성(5)</div>
    <hr />
</body>

</html>

출력결과

#02. 웹폰트 사용하기

1) 웹 폰트

폰트 파일을 웹 서버에 업로드해 두고 사용자의 PC에 해당 글꼴이 설치되어 있지 않은 경우 웹 서버에서 내려받아 사용하는 규격.
CSS2에서는 IE에서만 적용하던 비 표준 규격이였다.
CSS3에서는 정식 표준으로 채택되었다.

2) 브라우저별 웹 폰트 규격

브라우저	설명
IE	eot 형식의 글꼴 사용
IE외의 브라웢	PC에 설치되는 일반 TTF형식의 글꼴 사용

3) TTF 폰트의 EOT변환

https://www.kirsle.net/wizards/ttf2eot.cgi
TTF를 업로드하면 변환된 파일을 다운로드 받을 수 있다.(무료)
단 유료 폰트에 대한 저작권은 주의해야 한다.

4) 웹 폰트 사용하기 ->웹 폰트의 이름 선언

여기에서 선언된 웹 폰트 이름이 일반 CSS블록에서 폰트 이름으로 사용된다.
src는 IE용과 그외의 브라우저용을 기술한다.
local 항목에는 사용자의 컴퓨터에 설치되어 있을 폰트 이름을 명시한다.
url 항목은 local에 해당 폰트가 설치되어 있지 않을 경우 대신 사용할 폰트 파일의 온라인 주소이다.

@font-face {
    font-family: 웹폰트이름;
    src:local('시스템글꼴이름'),url('IE용 폰트파일 주소'); 
    src:local('시스템글꼴이름'),url('기타 브라우저용 폰트파일 주소') format('truetype');
}

5) 웹 폰트 사용하기(2) -> 선언된 웹 폰트 사용하기

@font-face에서 선언된 폰트의 이름은 일반 CSS에서 font-family 속성을 통하여 사용할 수 있다.

셀렉터 {
    font-family: 웹폰트이름
}

02-font.html

CSS의 일반 폰트 속성은 현재 페이지에 접속한 사용자에게 해당 폰트가 설치되어 있지 않으면 적용되지 않는다.
웹 폰트는 사용자 PC에 폰트가 없을 경우 온라인에서 다운로드 받아 표시하기 때문에 모든 사용자에게 동일하게 표시된다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    @font-face {
        font-family: Nbrush;
        src: local('NanumBrush'), url('font/NanumBrush.eot');
        src: local('NanumBrush'), url('font/NanumBrush.ttf') format('truetype');
    }

    .normal_text {
        color: #900;
    }

    .text1 {
        font-family: Nbrush;
        color: #006;
    }
    </style>
</head>

<body>
    <div class="normal_text">이 부분은 일반폰트로 나타납니다.</div>
    <div class="text1">이 부분은 웹 폰트로 나타납니다.</div>
</body>

</html>

출력결과

#03. 구글 웹 폰트 사용하기

1) 구글 웹 폰트 제공 사이트

https://fonts.google.com
원하는 폰트를 무료로 사용할 수 있다.

선택 내역이 등록된 박스를 클릭한다.

제시되는 코드를 활용하여 웹 폰트를 사용할 수 있다.

03-nanumfont.html

<!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>

출력결과