CSS Fonts
CSS Fonts: 웹 페이지에서 폰트 스타일링하는 방법
CSS 폰트(Font) 속성은 HTML 요소의 텍스트에 사용될 글꼴과 스타일을 정의하는 데 사용됩니다. 텍스트의 글꼴 종류, 크기, 두께, 스타일을 제어하여 웹 페이지의 가독성을 높이고, 디자인에 맞는 분위기를 설정할 수 있습니다. 이 자료에서는 CSS 폰트 속성을 사용하여 폰트를 스타일링하는 방법을 다룹니다.
1. CSS 폰트 속성 (Font Properties)
CSS에서는 폰트를 제어하는 다양한 속성을 제공합니다. 이를 통해 웹 페이지에서 텍스트가 표시되는 방식과 텍스트의 시각적 스타일을 지정할 수 있습니다.
주요 CSS 폰트 속성은 다음과 같습니다:
font-family: 텍스트에 사용할 글꼴을 지정합니다.font-size: 텍스트의 크기를 지정합니다.font-style: 텍스트의 기울임꼴(이탤릭체)을 설정합니다.font-weight: 텍스트의 두께(굵기)를 설정합니다.font-variant: 텍스트를 작은 대문자 형식으로 변환합니다.line-height: 텍스트의 줄 간격을 지정합니다.font: 여러 폰트 속성을 한 줄로 설정할 수 있는 단축 속성입니다.
2. font-family 속성
font-family 속성은 HTML 요소에 사용할 글꼴 패밀리를 지정합니다. 글꼴 패밀리는 특정 글꼴 이름이나 글꼴 그룹(예: serif,
sans-serif)을 지정할 수 있으며, 여러 글꼴을 지정할 경우, 대체 글꼴이 지정된 순서대로 적용됩니다.
예시:
p {
font-family: "Arial", "Helvetica", sans-serif;
}위 코드는 텍스트에 Arial 폰트를 우선 적용하고, 해당 글꼴이 없는 경우 Helvetica, 마지막으로 sans-serif 기본 글꼴을 적용합니다.
글꼴 패밀리의 종류:
- Serif: 꼬리 모양이 있는 글꼴 (예: Times New Roman)
- Sans-serif: 꼬리가 없는 깔끔한 글꼴 (예: Arial, Helvetica)
- Monospace: 모든 글자가 동일한 너비를 가지는 글꼴 (예: Courier)
3. font-size 속성
font-size 속성은 텍스트의 크기를 설정하는 속성입니다. 텍스트의 크기는 픽셀(px),
퍼센트(%), em, rem 단위로 설정할 수 있습니다.
예시:
h1 {
font-size: 32px;
}위 코드는 <h1> 요소의 폰트 크기를 32px로 설정합니다.
자주 사용되는 단위:
- px(픽셀): 고정된 크기
- em: 부모 요소의 글꼴 크기를 기준으로 설정 (상대 크기)
- rem: 루트 요소의 글꼴 크기를 기준으로 설정 (상대 크기)
- %: 부모 요소의 글꼴 크기에 대한 백분율
상대 크기 설정 예시:
p {
font-size: 1.2em;
}위 코드는 텍스트 크기를 부모 요소의 글꼴 크기의 1.2배로 설정합니다.
4. font-style 속성
font-style 속성은 텍스트를 **기울임꼴(이탤릭체)**로 설정하는 속성입니다. 주로 강조할 텍스트에 사용됩니다.
예시:
em {
font-style: italic;
}위 코드는 <em> 요소의 텍스트를 **기울임꼴(italic)**로 설정합니다.
자주 사용되는 값:
normal: 기본 텍스트 스타일italic: 기울임꼴 (이탤릭체)oblique: 텍스트를 기울이지만, 이탤릭체와는 다른 스타일
5. font-weight 속성
font-weight 속성은 텍스트의 **두께(굵기)**를 설정하는 속성입니다. 텍스트의 굵기를 조절하여 강조하거나 구분할 수 있습니다.
예시:
strong {
font-weight: bold;
}위 코드는 <strong> 요소의 텍스트를 굵게(bold) 설정합니다.
자주 사용되는 값:
normal: 일반 굵기 (400)bold: 굵은 글꼴 (700)- 숫자 값: 100에서 900까지의 숫자로 설정 (예:
font-weight: 600;)
굵기 값 예시:
h2 {
font-weight: 600;
}위 코드는 <h2> 요소의 폰트 굵기를 600으로 설정하여, 기본 굵기보다 조금 더 굵게 만듭니다.
6. font-variant 속성
font-variant 속성은 텍스트를 **작은 대문자(small-caps)**로 변환하는 속성입니다. 이 속성은 대문자를 더 작게 표시하여, 특별한 텍스트 스타일을 만들 때 유용합니다.
예시:
p {
font-variant: small-caps;
}위 코드는 <p> 요소의 텍스트를 작은 대문자로 변환합니다.
7. line-height 속성
line-height 속성은 텍스트의 줄 간격을 설정하는 속성입니다. 줄 간격은 텍스트의 가독성에 큰 영향을 미치며, 이 속성을 사용해 적절한 줄 간격을
설정할 수 있습니다.
예시:
p {
line-height: 1.5;
}위 코드는 <p> 요소의 줄 간격을 1.5배로 설정합니다. 숫자로 설정한 값은 글꼴 크기에 비례한 줄 간격을 의미합니다.
8. font 단축 속성
font 속성은 여러 폰트 속성을 한 번에 설정할 수 있는 단축 속성입니다. 이 속성을 사용하면
font-style, font-weight,
font-size, **font-family**를 한 줄로 지정할 수 있습니다.
예시:
h1 {
font: italic bold 24px "Arial", sans-serif;
}위 코드는 기울임꼴, 굵은 글꼴, 24px 크기의 Arial 폰트를 설정합니다.
구문:
font: [font-style] [font-weight] [font-size] [font-family];9. 웹폰트 사용하기 (Google Fonts)
- *웹폰트(Web Font)**는 사용자의 장치에 설치되지 않은 글꼴을 웹 페이지에서 사용할 수 있게 해줍니다. 대표적으로 Google Fonts를 사용하여 무료 웹폰트를 불러올 수 있습니다.
웹폰트 사용 예시:
- Google Fonts에서 원하는 폰트를 선택한 후, 제공된
<link>태그를 HTML<head>에 추가합니다:
<link rel="stylesheet" href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>">- CSS에서 해당 폰트를
font-family속성으로 설정합니다:
body {
font-family: "Roboto", sans-serif;
}위 코드는 Roboto 폰트를 적용하며, 이 글꼴이 없을 경우 sans-serif 대체 글꼴을 사용합니다.
10. 자주 사용되는 폰트 예제
기본 글꼴 설정:
body {
font-family: "Arial", sans-serif;
font-size: 16px;
line-height: 1.5;
}굵은 텍스트 설정:
h1 {
font-weight: bold;
}작은 대문자 변환:
p {
font-variant: small-caps;
}웹폰트 적용:
h2 {
font-family: "Roboto", sans-serif;
font-weight: 700;
}이 자료는 CSS에서 **폰트(Font)**를 설정하고 활용하는 다양한 방법을 설명합니다. 폰트 스타일링은 웹 페이지의 텍스트 가독성을 높이고, 디자인의 일관성을 유지하는 데 중요한 역할을 합니다. 웹폰트를 포함한 다양한 폰트 속성을 활용하여, 더 세련되고 유연한 텍스트 스타일링을 구현할 수 있습니다.
11. 자주 사용하는 웹 폰트 스타일
다양한 웹 폰트를 사용하면 페이지의 텍스트를 더 독특하고 매력적인 디자인으로 만들 수 있습니다. 이때 Google Fonts는 사용하기 쉬운 무료 웹폰트를 제공하는 대표적인 서비스입니다. 다음은 자주 사용되는 웹 폰트와 그 적용 방법입니다:
Roboto (Sans-Serif)
Roboto는 가장 많이 사용되는 Sans-Serif 계열의 글꼴로, 깔끔하고 현대적인 디자인을 제공합니다. 텍스트 크기나 두께에 따라 다양한 스타일을 설정할 수 있습니다.
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">body {
font-family: 'Roboto', sans-serif;
font-weight: 400; /* 기본 굵기 */
}
h1 {
font-weight: 700; /* 굵은 텍스트 */
}Open Sans (Sans-Serif)
Open Sans는 또 다른 Sans-Serif 글꼴로, 깔끔하고 가독성이 좋아 웹 사이트에서 자주 사용됩니다.
<link href="<https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap>" rel="stylesheet">body {
font-family: 'Open Sans', sans-serif;
}Lora (Serif)
Lora는 Serif 계열의 글꼴로, 전통적인 디자인과 현대적인 감각을 결합한 독특한 스타일을 제공합니다.
<link href="<https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap>" rel="stylesheet">body {
font-family: 'Lora', serif;
}Montserrat (Sans-Serif)
Montserrat는 부드럽고 현대적인 Sans-Serif 글꼴로, 큰 제목이나 강조된 텍스트에 자주 사용됩니다.
<link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap>" rel="stylesheet">h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}12. @font-face를 사용한 사용자 정의 폰트
CSS의 @font-face 규칙을 사용하면 웹 폰트를 직접 정의하여, 사용자의 시스템에 없는 폰트를 웹 페이지에 포함시킬 수 있습니다. 이를 통해 웹
사이트의 폰트를 더욱 유연하게 제어할 수 있습니다.
@font-face 사용 예시:
- 서버에 폰트 파일을 업로드하고, 해당 파일 경로를 CSS에 연결합니다.
@font-face {
font-family: 'CustomFont';
src: url('fonts/CustomFont.woff2') format('woff2'),
url('fonts/CustomFont.woff') format('woff');
}- 지정된 폰트를 웹 페이지에서 사용합니다:
h1 {
font-family: 'CustomFont', sans-serif;
}위 코드는 **CustomFont**라는 사용자 정의 폰트를 woff2 및 woff 파일 형식으로 불러와 사용합니다.
13. 폰트에 대한 접근성 고려
웹 디자인에서 **접근성(Accessibility)**을 고려하는 것은 매우 중요합니다. 특히 폰트와 관련하여 텍스트가 읽기 쉽고 명확한지를 보장하는 것이 사용자 경험을 향상시키는 데 큰 도움이 됩니다.
접근성을 위한 폰트 선택 가이드:
- 글꼴 크기: 너무 작은 글꼴은 사용자가 읽기 어렵습니다. 기본적으로 16px 이상의 글꼴 크기를 유지하는 것이 좋습니다.
- 줄 간격: 적절한 **줄 간격(line-height)**을 설정하여 텍스트를 더 읽기 쉽게 만듭니다. 보통 1.5배 정도의 줄 간격이 적당합니다.
- 대비: 텍스트와 배경색 간의 대비가 충분히 높아야 합니다. 색상이 너무 비슷하면 가독성이 떨어집니다.
- 기본 글꼴 패밀리 사용: 대체 글꼴을 고려하여 항상 기본 글꼴 패밀리를 함께 지정하는 것이 좋습니다. 예를 들어,
font-family: 'Roboto', sans-serif;처럼 대체 글꼴을 설정하여, 폰트가 로드되지 않을 경우 기본 글꼴이 적용되도록 합니다.
14. 브라우저 지원 고려
CSS 폰트 속성은 대부분의 최신 브라우저에서 지원되지만, 사용자 정의 웹폰트는 인터넷 연결 상태나 브라우저 호환성에 영향을 받을 수 있습니다. 폰트를 적용할 때 폰트 로딩 시간을 고려하고, 폰트가 로드되지 않았을 때의 대체 글꼴을 항상 지정하는 것이 중요합니다.
브라우저 지원 예시:
body {
font-family: 'Open Sans', 'Helvetica', sans-serif;
}위 코드는 **Open Sans**가 로드되지 않으면 Helvetica, 그마저도 불가능할 경우 기본
sans-serif 글꼴을 사용하게 됩니다.
폰트 스타일링은 웹 디자인에서 가독성, 디자인 일관성, 접근성을 모두 고려해야 하며, 웹폰트와 사용자 정의 폰트를 통해 더욱 풍부한 사용자 경험을 제공할 수 있습니다.
폰트 속성을 적절히 사용하여 웹 페이지의 텍스트를 세련되고 명확하게 만들고, 웹 페이지 디자인의 브랜드 아이덴티티를 강화할 수 있습니다.