CSS를 사용하여 글꼴 색상을 변경하는 방법

CSS를 사용하여 웹 디자인에 색상을 추가하여 텍스트를 밝게 만드세요.

다양한 글꼴 색상으로 웹사이트를 멋지게 꾸미고 싶으신가요? CSS를 사용하여 이 작업을 수행할 수 있습니다. CSS는 Cascading Style Sheets의 약자이며 모든 웹사이트의 스타일을 생성하고 관리하는 데 사용되는 기본 언어입니다.

HTML 문서에 CSS를 적용하는 방법에는 세 가지가 있습니다. 인라인 CSS, 내부/임베디드 CSS, 외부 CSS가 있습니다.

방법 1: 인라인 CSS

CSS에서 글꼴 색상을 변경하려면 색상 속성 값을 설정하는 CSS 규칙을 만들어야 합니다.

인라인 메서드는 거의 모든 요소에 적용할 수 있는 스타일 속성을 사용합니다. 다음은 HTML 단락의 글꼴 색상을 빨간색으로 설정하는 예입니다.

<p style="color: red;">Paragraph of text</p>

내부/임베디드 CSS 또는 외부 CSS를 사용하여 동일한 효과를 얻을 수 있습니다.

방법 2: 내부/내장 CSS

HTML 요소의 둘 이상의 인스턴스에 영향을 주지만 단일 페이지에만 영향을 미치는 CSS 규칙을 생성하려는 경우 이 방법을 사용할 수 있습니다. CSS 규칙은 스타일 요소를 사용하여 HTML 페이지의 헤드에 기록됩니다.

<head>
    <style>
    p { color: blue }
    </style>
</head>

방법 3: 외부 CSS

동일한 효과를 얻는 세 번째 방법은 외부 CSS 스타일시트를 사용하는 것입니다. 텍스트 편집기를 사용하여 확장자가 ".css"인 파일을 만듭니다. 일반적인 관행은 이 파일을 stylesheet.css와 같은 이름으로 부르는 것이지만 ".css" 확장자를 유지하는 한 어떤 이름이든 지정할 수 있습니다.

예를 들어 외부 스타일시트를 사용하여 본문 텍스트를 녹색으로 지정하려면 다음과 같이 CSS 규칙을 붙여넣으면 됩니다.

p { color: blue }

HTML 문서에서는 HTML 헤드 요소 내에 스타일시트에 대한 링크를 포함해야 합니다.

<html>
<head>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <p>Paragraph of text</p>
</body>
</html>

CSS를 적용하지 않고 HTML에서 글꼴 색상 변경

가장 좋은 방법은 CSS를 사용하는 것이지만 HTML만 사용하여 글꼴 색상을 변경하는 방법은 다음과 같습니다.

<p><font color="red">Paragraph of text</font></p>

색상 속성과 함께 글꼴 요소는 더 이상 사용되지 않습니다. 이는 구조적 요소라기보다는 표현적 요소이기 때문입니다. 최신 HTML은 구조적 요소로만 구성되어야 합니다.

CSS에서 글꼴 색상을 변경하는 것은 비교적 간단합니다.

CSS에서 글꼴 색상을 변경하는 세 가지 방법을 보여 드렸습니다. 또한 HTML 글꼴 태그를 사용하여 이전 방식으로 이 작업을 수행하는 방법도 보여 주었습니다. 시험해보고 어떤 것이 당신에게 가장 적합한지 알아보세요!