Study Record

CSS 글꼴 관련 스타일 본문

웹/HTML + CSS

CSS 글꼴 관련 스타일

초코초코초코 2025. 2. 13. 00:56
728x90

 

 

글꼴 관련 스타일

텍스트 스타일 중 글자의 모양새 즉, 크기와 굵기와 이텔릭체 여부 등 글꼴 속성을 알아본다.

 

 

 font-family 속성 - 글꼴 지정하기

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

p {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

이미 설치된 글꼴이 아닌 경우, 브라우저의 기본 값이 나타나 각각 다른 글꼴로 표시된다. 따라서 웹 문서에서 글꼴을 지정할 때는 한가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우를 위해 두번째, 세번째 글꼴까지 지정해야 한다. 두 개 이상의 글꼴 이름을 지정할 때는 글꼴 이름과 이름 사이의 쉼표(,)로 구분한다.

 

시스템에 설치되어 있어서 웬만하면 표시되는 글꼴을 기본 글꼴(web-safe font)라고 한다. 예를 들어, sans-serif 체와 굴림, 궁서 ,돋음 등이 있다. 

 

font-family 는 상속되기 때문에 <body> 태그 스타일에서 정의하면 문서 전체에 적용되어 문서 안의 모든 자식 요소에 같은 글꼴이 사용된다. 

 

 

 웹 폰트 사용하기

웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운시키는 방식이다. 따라서 사용자 시스템에 없는 글꼴이라도 사용자 컴퓨터에 다운로드한 후 표시하기 때문에 의도한 대로 글꼴을 나타낼 수 있다.

 

+ 무료 글꼴 사이트 (구글 웹 폰트)

https://fonts.google.com/

 

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

예시 ) - Nanum Pen Script 글꼴 적용하기(https://fonts.google.com/selection)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

        .nanum-pen-regular {
            font-family: "Nanum Pen Script", serif;
            font-weight: 400;
            font-style: normal;
        }
    </style>
</head>

<body>
    <h1>나라 이름</h1>
    <p class="nanum-pen-regular">아시아 나라 이름 종류에는 대한민국, 중국, 일본 등이 있습니다.</p>
</body>

</html>

 

 

 직접 웹 폰트 업로드하여 사용하기 - @font-face 속성

컴퓨터에서 사용하는 글꼴은 트루타입(True Type) 유형이며 파일 확장자는 *.ttf 이다. 트루타입 형식은 파일 크기가 너무 크기 때문에 eot(Embedded Open Type)와 woff(Web Open Font Format) 파일 형식이 나왔다. ttf 형식을 eot나 woff 형식으로 변환할 수 있다. 

 

@font-face 속성을 이용하면 다운받은 글꼴을 적용할 수 있다.

@font-face {
    font-family: 글꼴 이름;
    src:url(글꼴 파일 경로) format(파일유형);
}

 

예시) 글꼴 파일 경로가 font/NanumPenScript-Regular.ttf 일 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'Nanum';
            src: url('font/NanumPenScript-Regular.ttf') format('truetype');
        }

        .p_content {
            font-family: 'Nanum', monospace;
        }
    </style>
</head>
<body>
    <h1>나라 이름</h1>
    <p class="p_content">아시아 나라 이름 종류에는 대한민국, 중국, 일본 등이 있습니다.</p>
</body>
</html>

 

 

 font-size 속성으로 글자 크기 조절하기

font-size 속성으로 글자 크기를 조절할 수 있다. 픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할 수 있다.

/* 기본형 */
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

/* 속성 값과 설명 */
<절대 크기> : 브라우저에서 지정한 글자 크기로 xx-small, x-small, small, medium, large,
             x-large, xx-large 값만 사용할 수 있다.
<상대 크기> : 부모 요소의 글자 크기를 기준으로 더 크게 표시하거나 더 작게 표시한다.
             larger, smaller 값만 사용할 수 있다.
<크기> : 브라우저와 상관없이 글자 크기를 직접 사용한다.
<백분율> : 부모 요소의 글자 크기를 기준으로 해당하는 %를 계산하여 표시한다.

 

+ <크기> 값을 직접 지정하는 방법

/* 단위와 해당 설명 */
em : 해당 글꼴의 대문자 M 의 너비를 기준으로 크기를 조절한다.
ex : x-height 로 해당 글꼴의 소문자 x 의 높이를 기준으로 크기를 조절한다.
px : 픽셀. 모니터에 따라 상대적 크기가 결정된다.
pt : 포인트. 일반 문서에서 많이 사용하는 단위이다.

 

주로 px 단위를 많이 사용하지만 폰트 크기가 고정되기 때문에 창 크기가 작은 모바일 기기로 볼 때도 같은 크기로 화면에 표시된다. 결국 작은 화면 안에 작은 글시로 표시된다. 따라서 모바일 기기에 접속할 경우까지 고려한다면 px 단위보다 ex 단위를 사용하는 것이 좋다.

 

크기를 따로 지정하지 않으면 텍스트 문단의 크기는 16px 로 표시된다.

 

em 단위는 글꼴의 대문자 M을 기준으로 하므로 그 발음을 따 em이라는 단위를 사용한다. 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 놓고 상대적 값을 계산해 다른 요소들의 글자 크기를 조절한다. 만약 지정한 크기가 없다면 <body> 요소의 크기 16px 이 기본값 1em으로 지정된다.

h1 {
    font-size: 3em;
}

 

 

 글자 굵기 수정하기 - font-weight 속성

글자 굵기를 수정할 수 있는 속성은 font-weight 속성이다.

/* 속성 값과 설명 */
normal : 일반적인 형태로 기본값이다.
bold | lighter | bolder : 굵게, 더 가늘게, 더 굵게 나타낸다.
100~900 : 400은 noraml 이며 700 은 bold 에 해당하며 숫자 값을 조절해 세밀하게 조정한다.
          (100, 200, 300, 400, 500, 600, 700, 800, 900)

 

사용 예시)

<style>
    .p_content { font-weight: lighter; }
    h1 { font-weight: 500; }
</style>

 

 

 작은 대문자로 표시하기 - font-variant 속성 

영어 글꼴에서 '작은 대문자' 라는 독특한 설정을 줄 수도 있다. 소문자를 작은 대문자로 표시해주는데 단순히 대문자로 바꿔주는 것이 아니라 사이즈는 소문자인데 글자는 대문자로 표시된다. 속성값은 normal 과 small-caps 두 가지가 있다. noraml 은 일반적인 형태로 표시하고 small-caps 는 작은 대문자로 표시한다.

<style>
    .accent {
        font-variant: small-caps;
    }
</style>

...

<p class="accent">대한민국(Korea), 중국(China), 일본(Japan)</p>

 

 

 글자 스타일 지정하기 - font-style 속성

글자를 이탤릭체로도 표시할 수 있다. 속성값은 다음과 같다.

  • normal : 일반적인 형태로 표시한다.
  • ltalic : 이탤릭체로 표시한다. 기울어진 글꼴이 처음부터 디자인되어있다.
  • oblique : 이탤릭체로 표시한다. 글꼴을 단지 기울어지게 표시한다.

 

예시)

.accent {
    font-style: italic;
}

 

 

 글꼴 속성을 한꺼번에 묶어 표현하기 - font  속성

속성을 하나하나 소스 줄에 넣으면 소스가 길어질 우려가 있다. font 속성은 font-style, font-weight, font-size/line-height, font-family 속성을 하나로 묶어 약식으로 표현할 수 있다.

/* 기본 형태 */
font: <font-style><font-variant><font-weight><font-size/line-height><font-family>

/* 특정 키워드 사용 */
font: caption      /* 캡션에 어울리는 글꼴 스타일로 표시한다. */
font: icon         /* 아이콘에 어울리는 글꼴 스타일로 표시한다. */
font: menu         /* 드롭다운 메뉴에 어울리는 글꼴 스타일로 표시한다. */
font: message-box    /* 대화상자에 어울리는 글꼴 스타일로 표시한다. */
font: small-caption  /* 작은 캡션에 어울리는 글꼴 스타일로 표시한다. */
font: status-bar     /* 상태 표시줄에 어울리는 글꼴 스타일로 표시한다. */

 

예시)

p { font: 16px/25px "맑은 고딕" }
p { font: bold italic 12pt }
p { font: 120%/120% bold }
p { font: menu }

 

728x90

'웹 > HTML + CSS' 카테고리의 다른 글

CSS 개념과 기초  (0) 2025.02.09
HTML 기타 폼 요소들(button, progress, meter)  (0) 2025.02.08
HTML 여러 데이터 나열해 보여 주기  (0) 2025.02.08
HTML input 태그  (0) 2025.02.05
HTML 폼 관련 태그들  (0) 2025.02.04
'웹/HTML + CSS' Related Articles more