CSS - 웹 폰트: 초보자 가이드

안녕하세요, 미래의 웹 디자이너 여러분! CSS 웹 폰트의 흥미로운 여정을 안내해 드리게 되어 기쁩니다. 컴퓨터 과학을 오랫동안 가르쳐온 경험을 바탕으로 말씀드리면, 폰트를 이해하는 것은 새로운 언어를 배우는 것과 같아요.처음에는 어려울 수 있지만, 한 번 익숙해지면 웹 페이지가 어떻게 변화되는지 놀라게 될 거예요!

CSS - Web safe fonts

웹 폰트는 무엇인가요?

자, 기본적인 내용부터 시작해보겠습니다. 웹 폰트는 사용자의 컴퓨터에 설치되어 있지 않아도 웹 사이트에서 사용할 수 있는 커스텀 폰트입니다. 웹 사이트에 독특한 목소리를 부여하는 것과 같아요!

웹 폰트가 왜 중요한가요?

전 세계의 모든 책이 동일한 폰트를 사용한다면 어떨까요? 지루하지 않을까요? 웹 폰트는 웹 사이트의 개성을 표현하고 가독성을 높이는 데 도움이 됩니다. 웹 사이트를 돋보이게 만드는 비밀 조미료입니다!

CSS 웹 폰트 - 폰트 포맷 유형

이제 폰트 포맷의 다양한 유형에 대해 이야기해보겠습니다. 이는 다양한 아이스크림 맛을 선택하는 것과 같아요 - 각각이 고유한 특성을 가지고 있습니다!

포맷	설명	브라우저 지원
TTF/OTF	TrueType Font / OpenType Font	모든 현대 브라우저
WOFF	Web Open Font Format	모든 현대 브라우저
WOFF2	Web Open Font Format 2	대부분의 현대 브라우저
EOT	Embedded OpenType	인터넷 익스플로러
SVG	Scalable Vector Graphics	구형 iOS 버전

이제는 알파벳 스튜드이 것 같지만, 차근차근 설명해 나갈 테니 걱정 마세요!

CSS 웹 폰트 - 중요 포인트

코드를 다루기 전에 몇 가지 중요한 포인트를 다루겠습니다:

웹 폰트는 웹 사이트에서 커스텀 폰트를 사용할 수 있게 합니다.
서버에서 로드되며, 사용자의 컴퓨터에서는 로드되지 않습니다.
구글 폰트와 같은 서비스를 사용하거나 폰트를 직접 호스팅할 수 있습니다.
브라우저 호환성을 위해 다양한 폰트 포맷이 있습니다.
@font-face 규칙을 사용하여 CSS에 커스텀 폰트를 정의합니다.

CSS 웹 폰트 - @font-face 어트룰

이제 코드로 들어가보겠습니다! @font-face 규칙은 새로운 폰트를 웹 페이지에 소개하는 것과 같아요. 다음과 같이 보입니다:

@font-face {
font-family: 'MyAwesomeFont';
src: url('path/to/my-awesome-font.woff2') format('woff2'),
url('path/to/my-awesome-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}

이를 각각 설명해보겠습니다:

font-family: 폰트의 이름을 지정합니다. 나중에 이 이름을 사용하여 요소에 폰트를 적용합니다.
src: 폰트 파일을 찾을 위치와 포맷을 지정합니다.
font-weight과 font-style: 폰트의 특성을 정의합니다.

폰트를 정의한 후, 다음과 같이 사용할 수 있습니다:

body {
font-family: 'MyAwesomeFont', sans-serif;
}

이는 브라우저에게 "MyAwesomeFont를 사용하되,找不到的话, sans-serif 폰트로 대체하라"고 알립니다.

CSS 웹 폰트 - @font-face / font-stretch

font-stretch 속성은 폰트에 요가 수업을 시키는 것과 같아요. 폰트를 늘리거나 줄일 수 있습니다. 다음과 같이 사용할 수 있습니다:

@font-face {
font-family: 'StretchyFont';
src: url('path/to/stretchy-font.woff2') format('woff2');
font-stretch: ultra-expanded;
}

.stretched-text {
font-family: 'StretchyFont';
font-stretch: 150%;
}

이렇게 하면 텍스트가 체육관에 갔다가 살이 쪄나간 것처럼 보입니다!

CSS 웹 폰트 - 온라인 폰트 서비스

온라인 폰트 서비스를 사용하는 것은 배달 음식을 주문하는 것과 같아요 - 편리하고 다양한 선택지가 있습니다. 구글 폰트는 인기 있는 선택지입니다. 다음과 같이 사용할 수 있습니다:

구글 폰트에 가서 원하는 폰트를 선택합니다.
제공된 링크 태그를 복사하고 HTML <head>에 붙여넣습니다:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

CSS에서 폰트를 사용합니다:

body {
font-family: 'Roboto', sans-serif;
}

이제 구글 폰트를 사용하고 있습니다!

CSS 웹 폰트 - 폰트 가져오기

다른 방법으로 웹 폰트를 포함하는 것은 @import 규칙을 사용하는 것입니다. 이는 폰트를 CSS 파티에 초대하는 것과 같아요. 다음과 같이 작동합니다:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
font-family: 'Roboto', sans-serif;
}

이 방법은 모든 폰트 선언을 CSS 파일에 유지하는 데 유용합니다.

결론

축하합니다! CSS 웹 폰트의 fascinling한 세계로 첫 걸음을 뗐습니다. 어떤 새로운 기술을 배우는 것처럼, 연습이 완벽을 만듭니다. 다양한 폰트를 실험해 보고 웹 페이지의 외관과 느낌이 어떻게 변하는지 확인해 보세요.

마무리하며, 제 교육 경험에서 이야기 하나를 전해드리겠습니다: 한 번에 학생이 웹 디자인에 어려움을 겪고 있었습니다. 그녀는 사이트가 왜 그렇게 지루해 보이는지 이해할 수 없었습니다. 그런데 웹 폰트를 배우고 나서, 그녀의 사이트가 지루한 것에서 아름다운 것으로 변화되었습니다. 웹 폰트의 힘입니다!

그러므로 폰트를 실험하고, 웹 페이지가 어떻게 살아나는지 지켜보세요. 행복하게 코딩하세요, 그리고 웹 디자인의 세계에서 상상력이 유일한 제한이 되다는 것을 기억하세요!

Credits: Image by storyset