HTML - Fonts: A Beginner's Guide to Styling Text on the Web

안녕하세요, 웹 개발자 꿈나이들! 오늘 우리는 HTML 폰트의 흥미로운 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 교사로서 저는 여러분이 웹 텍스트를 훌륭하게 보이게 하는 방법을 안내해 드리겠습니다. 시작해 볼까요!

HTML - Fonts

HTML 폰트란 무엇인가요?

이제부터 구체적인 내용으로 들어가기 전에, HTML에서 "폰트"라는 말이 무엇을 의미하는지 이해해 보겠습니다. 간단히 말하면, 폰트는 웹 페이지에서 보이는 텍스트의 스타일입니다. 크기가 크거나 작거나, 굵게或是 이탤릭, 심지어 화려한 cursiv 스타일일 수도 있습니다. HTML은 우리가 텍스트의 모양을 제어할 수 있는 방법을 제공하여, 우리의 웹 페이지를 시각적으로 더 매력적이고 읽기 쉽게 만듭니다.

웹 안전 폰트

이제 "웹 안전 폰트"에 대해 이야기해 보겠습니다. 친구한테 편지를 쓰는 상상해 보세요. 친구가 읽을 수 있도록 하고 싶죠? 웹 안전 폰트는 대부분의 컴퓨터와 장치에 설치되어 있는 폰트입니다. 이를 사용하면 우리의 웹 페이지가 다양한 시스템에서 비슷하게 보이도록 할 수 있습니다.

다음은 일반적인 웹 안전 폰트의 표입니다:

폰트 이름	예시
Arial	This is Arial
Verdana	This is Verdana
Helvetica	This is Helvetica
Times New Roman	This is Times New Roman
Courier	This is Courier

HTML 폰트 예제

이제 코드로 손을 더러 만들어 보겠습니다! HTML에서 폰트를 사용하는 몇 가지 예제를 보여드리겠습니다.

예제 1: 기본 폰트 설정

<p style="font-family: Arial, sans-serif;">이 텍스트는 Arial 폰트로 되어 있습니다.</p>

이 예제에서 우리는 브라우저에게 텍스트를 Arial 폰트로 표시하도록 지시하고 있습니다. "sans-serif" 부분은 Arial 폰트가 사용자의 장치에 설치되어 있지 않은 경우의 대체 폰트입니다.

예제 2: 여러 폰트 사용

<p style="font-family: 'Times New Roman', Times, serif;">이 텍스트는 Times New Roman, Times, 또는 serif 폰트일 수 있습니다.</p>

여기서 우리는 여러 폰트 옵션을 제공하고 있습니다. 브라우저는 Times New Roman을 먼저 사용하려고 시도한 다음, 첫 번째가 없다면 Times를 사용하고, 두 번째도 없다면 임의의 serif 폰트를 사용합니다.

예제 3: 폰트 스타일 결합

<p style="font-family: Arial, sans-serif; font-size: 18px; font-weight: bold;">이 텍스트는 Arial 폰트로 되어 있으며, 크기가 크고 굵게 되어 있습니다.</p>

이 예제에서 우리는 단순히 폰트 가족을 설정하는 것만이 아니라, 크기와 무게도 설정하여 텍스트의 외관에 더 많은 제어를 합니다.

텍스트 색상 설정

이제 우리의 텍스트에 색상을 더해 보겠습니다... 음, 텍스트의 삶을 의미하는 것은 아니겠지만요!

예제 4: 텍스트 색상 변경

<p style="color: blue;">이 텍스트는 파랑색입니다!</p>

간단하죠? color 속성을 사용하여 텍스트 색상을 설정합니다.

예제 5: 16진수 색상 사용

<p style="color: #FF5733;">이 텍스트는 커스텀 색상을 가지고 있습니다.</p>

16진수 색상은 우리에게 색상에 대한 더 정확한 제어를 제공합니다. 이 경우, 특정 오렌지 색상을 사용하고 있습니다.

HTML 요소 (廃止됨)

이제 이야기 하나를 들려드리겠습니다. 예전에, <basefont>이라는 HTML 요소가 있었습니다. 이 요소는 전체 HTML 문서에 기본 폰트를 설정하는 데 사용되었습니다. 그러나 기술의 많은 것처럼, 이 요소도 오래되어 더 이상 HTML5에서 지원되지 않습니다.

대신 <basefont> 대신 우리는 CSS를 사용하여 문서 전체에 기본 폰트를 설정합니다. 다음은 그 방법입니다:

<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333333;
}
</style>

이 CSS 코드를 HTML 문서의 <head> 부분에 배치하면, <body>의 모든 텍스트에 기본 폰트(Arial), 크기(16 픽셀), 색상(다크 그레이)을 설정합니다.

결론

그렇게 되면, 친구들이! 우리는 HTML 폰트의 세상을 여행했고, 웹 안전 옵션에서 색상과 스타일 설정까지 경험했습니다. 폰트 마스터하기 위해서는 연습이 중요합니다. 다양한 조합을 시도해 보세요, 크기와 색상을 놀아보세요, 그리고 웹 페이지에서 가장 잘 보이는 것을 찾아보세요.

마무리하면서, 제가 가르치는 연간에 대한 작은 팁을 드리겠습니다: 실험에 두려워하지 마세요! 웹 개발의 아름다움은 언제든지 되돌릴 수 있고 다시 시도할 수 있다는 점입니다. 그러므로 용감하게 폰트를 사용하고, 행복하게 코딩하세요!

Credits: Image by storyset