HTML - 폰트 참조

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 HTML 폰트의 fascinante 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 이 여정을 안내해드리는 것을 기쁘게 생각해요. 특별한 자리에 적절한 옷을 고르는 것처럼, 완벽한 폰트를 선택하면 여러분의 웹 페이지가 훨씬 더 아름다워질 거예요!

HTML - Fonts Reference

문법

먼저 기본적인 내용을 시작해보겠습니다. HTML에서는 <font> 태그를 사용하여 텍스트의 폰트 얼굴(face), 크기(size), 색상(color)을 지정합니다. 하지만 중요한 점은 이 태그가 HTML5에서는 더 이상 사용되지 않으며, 추천되지 않는다는 것입니다. 그러나 걱정 마세요! 우리는 역사적 맥락을 이해하고 현대적인 대안을 탐구해보겠습니다.

기본 문법은 다음과 같습니다:

<font face="font_family" size="size" color="color">텍스트는 여기에 들어갑니다</font>

HTML 폰트 태그

이제 <font> 태그의 속성을 하나씩 분해해보겠습니다:

face: 이는 폰트 가족을 지정합니다.
size: 이는 폰트의 크기를 설정합니다. 1(가장 작음)에서 7(가장 큼) 사이의 값을 가질 수 있습니다.
color: 이는 텍스트의 색상을 결정합니다.

다음은 예제입니다:

<font face="Arial" size="5" color="blue">Welcome to my website!</font>

이렇게 하면 "Welcome to my website!"가 Arial 폰트, 크기 5, 파란색으로 표시됩니다.

웹 안전 폰트

웹 안전 폰트는 다양한 운영 체제에서 흔히 사용되는 폰트입니다. 이러한 폰트를 사용하면 대부분의 사용자에게 텍스트가 원하는 대로 표시됩니다. 다음은 몇 가지 인기 있는 웹 안전 폰트의 표입니다:

폰트 이름	예제
Arial	The quick brown fox jumps over the lazy dog
Verdana	The quick brown fox jumps over the lazy dog
Helvetica	The quick brown fox jumps over the lazy dog
Times New Roman	The quick brown fox jumps over the lazy dog
Courier	The quick brown fox jumps over the lazy dog

HTML 폰트 예제

이제 우리의 지식을 실천해보겠습니다:

<html>
<head>
<title>My Favorite Fruits</title>
</head>
<body>
<h1><font face="Arial" color="red">My Favorite Fruits</font></h1>
<p><font face="Verdana" size="4" color="green">Apples are delicious!</font></p>
<p><font face="Courier" size="3" color="orange">Oranges are juicy!</font></p>
<p><font face="Times New Roman" size="5" color="purple">Grapes are sweet!</font></p>
</body>
</html>

이 예제에서 우리는 좋아하는 과일에 대한 페이지를 만들었습니다. 각 과일은 다른 폰트, 크기, 색상으로 설명됩니다. 이는 여러분의 웹 페이지에서 시각적 계층 구조와 강조를 만들기 위해 폰트를 사용하는 방법을 보여줍니다.

마이크로소프트 시스템의 폰트

마이크로소프트 시스템에는 다양한 사전 설치된 폰트가 있습니다. 다음은 몇 가지 인기 있는 폰트입니다:

Arial
Calibri
Cambria
Georgia
Tahoma
Times New Roman

맥인토시 시스템의 폰트

맥인토시 시스템에는 자신만의 기본 폰트 세트가 있습니다:

Helvetica
Arial
Times New Roman
Courier
Verdana
Georgia

유닉스 시스템의 폰트

유닉스 시스템(리눅스 배포판 포함)은 종종 다음 폰트를 포함합니다:

DejaVu Sans
Liberation Sans
FreeSans
Nimbus Sans L

이제 여러분이 생각하고 있을 것 같아요: "하지만 선생님, <font> 태그는 폐지됐다고 했잖아. 대신 무엇을 사용해야 하나요?" 멋진 질문이에요! 현대 웹 개발에서는 CSS(Cascading Style Sheets)를 사용하여 텍스트를 스타일링합니다. 다음은 빠른 예제입니다:

<html>
<head>
<title>Modern Font Styling</title>
<style>
h1 {
font-family: Arial, sans-serif;
color: red;
}
.green-text {
font-family: Verdana, sans-serif;
font-size: 18px;
color: green;
}
.orange-text {
font-family: 'Courier New', monospace;
font-size: 16px;
color: orange;
}
.purple-text {
font-family: 'Times New Roman', serif;
font-size: 20px;
color: purple;
}
</style>
</head>
<body>
<h1>My Favorite Fruits</h1>
<p class="green-text">Apples are delicious!</p>
<p class="orange-text">Oranges are juicy!</p>
<p class="purple-text">Grapes are sweet!</p>
</body>
</html>

이렇게 하면 이전 예제와 같은 결과를 얻을 수 있지만, 폐지된 <font> 태그 대신 현대적인 CSS 기법을 사용합니다.

기억해 두세요, 적절한 폰트를 선택하는 것은 요리에 적절한 향料를 추가하는 것과 같아요 - 여러분의 웹 페이지를 더욱 돋보이게 할 수 있습니다! 하지만 가독성을 우선적으로 고려하세요. 멋진 폰트는 보기 좋을 수 있지만, 사용자가 읽을 수 없다면 그 역할을 다하지 못합니다.

마무리하면서, 소소한 이야기를 나누고 싶습니다. 저는 처음 웹 개발을 시작할 때 폰트에 너무 흥분해서 페이지의 각段落마다 다른 폰트를 사용했습니다. 그 结果, 페이지가 납치 노트처럼 보였어요! 제 실수를 배워서 일관성을 유지하세요.

계속 연습하고, 호기심을 유지하고, 행복하게 코딩하세요!

Credits: Image by storyset