II. 텍스트 - 1. 글꼴 관련 스타일

Hush 2022. 6. 1. 21:34

font-family : 글꼴을 지정

웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다.

이 속성은 <body> 태그를 비롯해 <p>태그나 <hn> 태그처럼 텍스트를 사용하는 요소에서 주로 사용한다.

font-family : <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용헤 화면에 표시된다.

이때 만약 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시된다.

따라서 웹 문서에서 글꼴을 지정할 떄는 한 가지 글꼴만 선택하기도 하지만 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 생각해야 한다.

글꼴 이름을 두개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표를 넣어 구분합니다.

또한 만약에 글꼴 이름에 띄어쓰기가 있을 경우 한 덩어리라는 것을 알 수 있도록 큰따옴표로 묶어야 합니다.

body { font-family: "맑은 고딕", 돋움, 굴림 }

font-size : 글자 크기를 지정

font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>

절대 크기 : 브라우저에서 지정한 글자 크기

상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정

크기 : 브라우저와 상관없이 글자 크기를 직접 지정

백분율 : 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시

구체적인 값들을 알아보자.

키워드를 사용해서 글자 크기를 지정할 수 있다. 작은순서대로 나열하면 다음과 같다.

xx-small

x-small

small

medium

large

x-large

xx-large

단위를 사용해서 글자 크기를 지정할 수도 있다. 단위들은 다음과 같다.

종류	설명
em	부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정한다.
rem	문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정한다.
ex	해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정한다.
px	모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정한다.
pt	포인트라고 하며, 일반 문서에서 많이 사용한다.

예전에는 절대 크기 단위인 px이나 pt를 많이 사용했지만, 모바일 기기까지 고려해야 하는 요즘에는 상대 크기 단위인 em이나 rem을 많이 사용한다.

1em은 16px, 12pt와 같다.

백분율을 사용할 수도 있다. 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방법이다.

단, 백분율로 계산하려면 부모 요소의 글꼴 크기가 font-size : 16px처럼 단위로 표현되어 있어야 한다.

font-style : 이탤릭체

이탤릭체로 바꾸는 속성값은 italic과 oblique가 있는데, 웹에서는 주로 italic을 사용한다.

font-style: normal | italic | oblique

font-weight : 글자 굵기

미리 만들어진 예약어나 숫자값을 사용해 굵기를 지정한다.

normal은 400, bold는 700에 해당한다.

font-weight : normal | bold | bolder | lighter | 100 | ... | 900

다음 예제는 지금까지 살펴본 4가지 스타일을 모두 사용해 글자를 꾸민 웹 문서이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            body{
                font-size: 20px;
            }
            h1{
                font-family: 바탕;
                font-size: 3em;
            }
            .accent{
                font-size: 150%;
                font-weight: 811;
            }
            .italic{
                font-style : italic;
            }
        </style>
    </head>
    <body>
        <h1>레드향</h1>
        <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
        <p>레드향은 한라봉과 귤을 교배한 것으로</p>
        <p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </body>
</html>

저작자표시 (새창열림)