동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

동영상 강좌보기

CSS에서 제공하는 글꼴 속성은 글꼴 모음, 굵기, 크기 및 텍스트 스타일을 지정합니다.

CSS Font Families (글꼴 모음)

CSS에는 두 가지 유형의 글꼴 패밀리 이름이 있습니다.

generic family - 비슷한 모양을 가진 글꼴 패밀리 그룹 ( 예: "Serif" 또는 "Monospace")
font family - 특정 글꼴 모음 (예 : "돋음" 또는 "Arial")

Generic Family	Font Family	설 명
Serif	Times New Roman	Serif형 글자는 글자의 끝모양이 삐침이 있는 형태입니다.
Sans-serif	Arial Verdana	"Sans"라는 의미는 없다라는 것입니다. 곧 글자모양의 끝에 삐침이 없는 형태입니다.
Monospace	Courier New Lucida Console	모든 글자의 너비가 동일한 글자체입니다.

** 컴퓨터 화면에서 sans-serif글꼴은 serif글꼴보다 읽기가 쉽다고 간주됩니다.

Font Family(글꼴 모음)

font-family속성은 텍스트의 글꼴 모음을 정의합니다.

"font-family'속성은 '대체시스템'으로 여러 글꼴을 포함해야 합니다. 브라우저가 첫번째 글꼴을 지원하지 않으면 다음 글꼴을 시도하는 식으로 진행됩니다.

다른 글꼴을 사용할 수 없는 경우 브라우저에서 일반 글꼴로 비슷한 글꼴을 선택하도록 원하는 글꼴로 시작하고 일반 글꼴로 끝납니다.

** 글꼴 패밀리의 이름이 두 단어 이상인 경우 "Times New Roman"과 같이 따옴표로 묶어야 합니다.

하나 이상의 글꼴 패밀리는 쉼표로 구분된 목록으로 지정됩니다.

p {
    font-family: "Times New Roman", Times, serif;
}

Font Style(폰트 스타일)

font-style속성은 기울임꼴 텍스트를 지정하는데 주로 사용됩니다.

이 속성에는 세 가지 값이 있습니다.

normal - 텍스트가 정상적으로 표시됩니다.
italic - 텍스트는 기울임 꼴로 표시됩니다.
oblique - 텍스트가 기울임꼴로 표시됩니다. (비스듬한 기울임 꼴과 유사하지만 지원하는 브라우저가 적습니다.)

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Font Size(폰트 크기)

font-size속성은 텍스트의 크기를 설정합니다.

font-size값은 절대 크기 또는 상대 크기일 수 있습니다.

절대 크기 :

텍스트를 지정된 크기로 설정합니다.
사용자가 모든 브라우저에서 텍스트 크기를 변경할 수 없도록 합니다. (접근성에 부족)
절대 크기는 출력의 물리적 크기가 알려진 경우 유용합니다.

상대 크기 :

주변 요소를 기준으로 크기를 설정합니다.
사용자가 브라우저에서 텍스트 크기를 변경할 수 있습니다.

** 글꼴 크기를 지정하지 않으면 단락과 같은 일반 텍스트의 기본 크기는 16px(16px = 1em)입니다.

Set Font Size With Pixels (픽셀로 글꼴크기 설정)

픽셀로 텍스트 크기를 설정하면 텍스트 크기를 완벽하게 제어할 수 있습니다.

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

** 픽셀을 사용하는 경우 확대/축소 도구를 사용하여 전체 페이지의 크기를 조정할 수 있습니다.

Set Font Size With Em(Em로 글꼴 크기 설정)

사용자가 브라우저 메뉴에서 텍스트의 크기를 조정할 수 있도록 많은 개발자가 픽셀 대신에 em을 사용합니다.

W3C는 em크기 단위를 권장합니다.

1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16px입니다. 따라서 1em의 기본 크기는 16px입니다.

크기는 다음 수식을 사용하여 픽셀에서 em까지 계산할 수 있습니다. pixels/16 = em

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

위의 예제에서 em의 텍스트 크기는 이전 예와 픽셀 단위로 동일합니다. 그러나 em크기를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.

Use a Combination of Percent and Em (백분율과 Em의 조합 사용)

모든 브라우저에서 작동하는 솔루션은 <body>요소의 기본 글꼴 크기를 백분율로 설정하는 것입니다.

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

위 코드는 훌륭하게 작동합니다. 모든 브라우저에서 동일한 텍스트 크기를 보여주며, 모든 브라우저가 텍스트를 확대하거나 크기를 조정할 수 있습니다.

Font Weight(글꼴 무게)

font-weight속성은 글꼴의 무게를 지정합니다.

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

Font Variant(글꼴 변형)

font-variant속성은 텍스트를 작은 대문자 글꼴로 표시할 지 여부를 지정합니다.

작은 대문자 글꼴에서는 모든 소문자가 대문자로 변환됩니다. 그러나 변환된 대문자는 텍스트의 원래 대문자보다 작은 글꼴 크기로 나타납니다.

p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

CSS 글꼴(Font) > css강좌

CSS 글꼴(Font)

페이지 정보

댓글목록 0

웹학교

메인메뉴

고객센터

회원영역

회사정보