오늘은 웹 페이지에서 글꼴을 변경하는 다양한 방법에 대해 알아보겠습니다.
특히 인라인 스타일을 사용하는 방법을 먼저 설명하겠습니다. CSS를 사용하면 글꼴을 자유롭게 조정할 수 있어 웹 페이지의 디자인을 한층 더 멋지게 만들 수 있습니다.
1. 인라인 스타일을 사용하여 글꼴 변경하기
인라인 스타일은 HTML 태그 안에 직접 스타일을 적용하는 방법입니다. 이 방법은 간단하게 특정 요소의 스타일을 변경할 수 있어 유용합니다. 인라인 스타일은 style 속성을 사용하여 적용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글꼴 변경 예제</title>
</head>
<body>
<h1 style="font-family: Arial, sans-serif; color: blue;">안녕하세요, CSS 글꼴 변경!</h1>
<p style="font-family: 'Courier New', monospace; font-size: 18px;">이 문장은 Courier New 글꼴로 작성되었습니다.</p>
</body>
</html>코드 설명
- h1 태그: font-family 속성을 사용하여 글꼴을 Arial로 설정하고, 색상을 파란색으로 변경했습니다.
- p 태그: font-family를 'Courier New'로 설정하고, 글자 크기를 18픽셀로 지정했습니다.
2. 내부 스타일 시트를 사용하여 글꼴 변경하기
인라인 스타일을 사용하지 않고, HTML 문서의 <head> 부분에 내부 스타일 시트를 작성할 수도 있습니다. 이 방법은 여러 요소에 동일한 스타일을 적용할 때 유용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글꼴 변경 예제</title>
<style>
h1 {
font-family: Arial, sans-serif;
color: blue;
}
p {
font-family: 'Courier New', monospace;
font-size: 18px;
}
</style>
</head>
<body>
<h1>안녕하세요, CSS 글꼴 변경!</h1>
<p>이 문장은 Courier New 글꼴로 작성되었습니다.</p>
</body>
</html>코드 설명
- <style> 태그: 내부 스타일 시트를 사용하여 h1과 p 태그에 대한 스타일을 정의했습니다.
3. 외부 스타일 시트를 사용하여 글꼴 변경하기
외부 스타일 시트를 사용하면 여러 HTML 파일에서 동일한 CSS 파일을 공유할 수 있습니다. 이 방법은 웹 사이트의 일관성을 유지하는 데 유리합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글꼴 변경 예제</title>
<link rel="stylesheet" href="styles.css"> <!-- 외부 CSS 파일 링크 -->
</head>
<body>
<h1>안녕하세요, CSS 글꼴 변경!</h1>
<p>이 문장은 Courier New 글꼴로 작성되었습니다.</p>
</body>
</html>예시 코드 (styles.css 파일)
h1 {
font-family: Arial, sans-serif;
color: blue;
}
p {
font-family: 'Courier New', monospace;
font-size: 18px;
}코드 설명
- <link> 태그: 외부 CSS 파일을 연결하여 스타일을 적용했습니다. styles.css라는 파일에 모든 스타일을 정의했습니다.
오늘은 CSS에서 글꼴을 변경하는 방법에 대해 알아보았습니다. 인라인 스타일을 사용하는 방법은 간단하지만, 코드가 길어지면 관리가 어려워질 수 있습니다.
따라서 내부 스타일 시트나 외부 스타일 시트를 사용하는 것이 더 효율적입니다.
이제 여러분도 CSS를 사용하여 멋진 웹 페이지를 만들어 보세요! 질문이 있다면 언제든지 댓글로 남겨주세요!
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > CSS' 카테고리의 다른 글
| CSS에서 크기 조절하기 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
|---|---|
| CSS에서 글 정렬 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS에서 글자 크기와 굵기 설정하기 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS로 글자색 쉽게 넣는 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS로 배경색 쉽게 넣는 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.25 |
