HTML 글꼴 색상을 변경하는 방법

게시 됨: 2021-11-29

사이트를 사용자 정의할 때 글꼴 색상은 종종 간과됩니다. 대부분의 경우 웹 사이트 소유자는 검정색과 같은 기본 글꼴 색상이나 본문 및 제목 텍스트 색상에 대해 정의한 테마 스타일을 그대로 둡니다.

그러나 여러 가지 이유로 웹사이트에서 HTML 글꼴 색상을 변경하는 것이 좋습니다. HTML 글꼴 색상을 변경하는 것이 어려울 수 있지만 매우 간단합니다. 웹사이트에서 글꼴 색상을 변경하는 방법에는 여러 가지가 있습니다.

이 게시물에서는 웹사이트 글꼴의 색상을 변경하는 다양한 방법을 보여주고 처음부터 변경하려는 이유에 대해 설명합니다.

HTML 글꼴 색상을 변경하는 이유는 무엇입니까?

글꼴 색상을 변경하면 웹 사이트의 가독성과 접근성을 개선하는 데 도움이 될 수 있으므로 변경하고 싶을 것입니다. 예를 들어 사이트에서 더 어두운 색 구성표를 사용하는 경우 글꼴 색을 검정색으로 유지하면 웹사이트의 텍스트를 읽기가 어렵습니다.

글꼴 색상 변경을 고려해야 하는 또 다른 이유는 브랜드 색상 팔레트에서 더 어두운 색상을 사용하려는 경우입니다. 이것은 브랜드를 강화할 수 있는 또 다른 기회입니다. 브랜드 일관성을 구축하고 모든 마케팅 채널의 텍스트가 동일하게 보이도록 합니다.

그런 다음 HTML 글꼴 색상을 정의하고 변경하는 방법을 살펴보겠습니다.

사이트를 사용자 정의할 때 글꼴 색상이 간과되는 경우가 많습니다... 하지만 간단한 편집으로 많은 개성을 추가할 수 있습니다! 트윗하려면 클릭

색상을 정의하는 방법

이름, RGB 값, 16진수 코드 및 HSL 값을 포함하여 웹 디자인에서 색상을 정의하는 몇 가지 방법이 있습니다. 작동 방식을 살펴보겠습니다.

색상 이름

색상 이름은 CSS 스타일에서 색상을 정의하는 가장 쉬운 방법입니다. 색상 이름은 HTML 색상의 특정 이름을 나타냅니다. 현재 140개의 색상 이름이 지원되며 이러한 색상을 스타일에 사용할 수 있습니다. 예를 들어 "파란색"을 사용하여 개별 요소의 색상을 파란색으로 설정할 수 있습니다.

그러나 이 접근 방식의 단점은 모든 색상 이름이 지원되지 않는다는 것입니다. 즉, 지원되는 색상 목록에 없는 색상을 사용하면 해당 색상 이름으로 디자인에 사용할 수 없습니다.

RGB 및 RGBA 값

다음으로 RGB 및 RGBA 값이 있습니다. RGB는 Red, Green, Blue를 의미합니다. 실제 팔레트에서 색상을 혼합하는 것과 유사하게 빨간색, 녹색 및 파란색 값을 혼합하여 색상을 정의합니다.

RGB 값은 RGB(153,0,255)와 같습니다. 첫 번째 숫자는 빨간색 입력을 지정하고 두 번째 숫자는 녹색 입력을 지정하며 세 번째 숫자는 파란색을 지정합니다.

각 색상 입력 값의 범위는 0에서 255 사이입니다. 여기서 0은 색상이 전혀 존재하지 않음을 의미하고 255는 특정 색상이 최대 강도에 있음을 의미합니다.

RGBA 값은 믹스에 값을 하나 더 추가하며 이것이 불투명도를 나타내는 알파 값입니다. 범위는 0(투명하지 않음)에서 1(완전히 투명)까지입니다.

16진수 값

16진수 색상 코드는 RGB 코드와 유사하게 작동합니다. 0에서 9까지의 숫자와 A에서 F까지의 문자로 구성됩니다. 16진수 코드는 #800080과 같습니다. 처음 두 문자는 빨간색의 강도를 지정하고 중간 두 개의 숫자는 녹색의 강도를 지정하며 마지막 두 문자는 파란색의 강도를 지정합니다.

HSL 및 HSLA 값

HTML에서 색상을 정의하는 또 다른 방법은 HSL 값을 사용하는 것입니다. HSL은 색조, 채도 및 밝기를 나타냅니다.

색조는 0에서 360까지의 각도를 사용합니다. 표준 색상환에서 빨간색은 약 0/360, 녹색은 120, 파란색은 240입니다.

채도는 백분율을 사용하여 색상의 채도를 정의합니다. 0은 흑백을 나타내고 100은 풀 컬러를 나타냅니다.

마지막으로 밝기는 채도와 유사하게 백분율을 사용합니다. 이 경우 0%는 검은색을 나타내고 100%는 흰색을 나타냅니다.

예를 들어, 이 기사 전체에서 사용한 보라색은 HSL에서 다음과 같습니다. hsl(276, 100%, 50%) .

HSL은 RGB와 마찬가지로 불투명도를 지원합니다. 이 경우 A가 알파를 나타내고 0에서 1 사이의 숫자로 정의되는 HSLA 값을 사용합니다. 보라색 예제의 불투명도를 낮추려면 hsl(276, 100%, 50%, .85) .

이제 색상을 정의하는 방법을 알았으므로 HTML 글꼴 색상을 변경하는 다양한 방법을 살펴보겠습니다.

이전: `<font>` 태그

HTML5가 도입되어 코딩 표준으로 설정되기 전에는 글꼴 태그를 사용하여 글꼴 색상을 변경할 수 있었습니다. 더 구체적으로 말하면 color 속성과 함께 font 태그를 사용하여 텍스트 색상을 설정합니다. color 은 이름이나 16진수 코드로 지정되었습니다.

다음은 이 코드가 16진수 색상 코드로 어떻게 보이는지 보여주는 예입니다.

 <font color="#800080">This text is purple.</font>

그리고 이것은 색상 이름을 사용하여 텍스트 색상을 보라색으로 설정하는 방법입니다.

 <font color="purple">This text is purple.</font>

그러나 <font> 태그는 HTML5에서 더 이상 사용되지 않으며 더 이상 사용되지 않습니다. 글꼴 색상을 변경하는 것은 디자인 결정이며 디자인은 HTML의 주요 목적이 아닙니다. 따라서 <font> 태그는 HTML5에서 더 이상 지원되지 않습니다.

따라서 <font> 태그가 더 이상 지원되지 않는 경우 HTML 글꼴 색상을 어떻게 변경합니까? 답은 Cascading Style Sheets 또는 CSS에 있습니다.

새로운 기능: CSS 스타일

CSS로 HTML 글꼴 색상을 변경하려면 적절한 선택기와 쌍을 이루는 CSS 색상 속성을 사용합니다. CSS를 사용하면 색상 이름, RGB, 16진수 및 HSL 값을 사용하여 색상을 지정할 수 있습니다. CSS를 사용하여 글꼴 색상을 변경하는 세 가지 방법이 있습니다.

인라인 CSS

인라인 CSS는 HTML 파일에 직접 추가됩니다. <p>와 같은 HTML 태그를 사용한 다음 다음과 같이 CSS 색상 속성으로 스타일을 지정합니다.

 <p>This is a purple paragraph.</p>

16진수 값을 사용하려는 경우 코드는 다음과 같습니다.

 <p>This is a purple paragraph.</p>

RGB 값을 사용하려는 경우 다음과 같이 작성합니다.

 <p>This is a purple paragraph.</p>

마지막으로 HSL 값을 사용하여 다음 코드를 사용합니다.

 <p>This is a purple paragraph.</p>

위의 예는 웹사이트에서 단락의 색상을 변경하는 방법을 보여줍니다. 그러나 단락에만 국한되지 않습니다. 제목과 링크의 글꼴 색상을 변경할 수 있습니다.

예를 들어 위의 <p> 태그를 <h2> 로 바꾸면 해당 제목 텍스트의 색상이 변경되고 <a> 태그로 교체하면 해당 링크의 색상이 변경됩니다. <span> 요소를 사용하여 원하는 양의 텍스트에 색상을 지정할 수도 있습니다.

전체 단락이나 제목의 배경색을 변경하려는 경우 글꼴 색상을 변경하는 방법과 매우 유사합니다. 대신 background-color 속성을 사용하고 색상 이름, 16진수, RGB 또는 HSL 값을 사용하여 색상을 설정해야 합니다. 다음은 예입니다.

<p>

임베디드 CSS

포함된 CSS는 <style> 태그 내에 있으며 HTML 문서의 head 태그 사이에 배치됩니다.

색상 이름을 사용하려는 경우 코드는 다음과 같습니다.

 <!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

위의 코드는 페이지의 모든 단락의 색상을 보라색으로 변경합니다. 인라인 CSS 방법과 유사하게 다른 선택기를 사용하여 제목과 링크의 글꼴 색상을 변경할 수 있습니다.

16진수 코드를 사용하려는 경우 코드가 다음과 같이 표시됩니다.

 <!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

아래 예는 RBGA 값을 사용하므로 불투명도를 설정하는 예를 볼 수 있습니다.

 <!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>

HSL 코드는 다음과 같습니다.

 <!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

외부 CSS

마지막으로 외부 CSS를 사용하여 웹사이트의 글꼴 색상을 변경할 수 있습니다. 외부 CSS는 일반적으로 style.css 또는 stylesheet.css라고 하는 별도의 스타일시트 파일에 배치된 CSS입니다.

이 스타일시트는 사이트의 모든 스타일을 담당하며 글꼴 색상과 글꼴 크기, 여백, 패딩, 글꼴 패밀리, 배경색 등을 지정합니다. 간단히 말해서 스타일시트는 사이트가 시각적으로 어떻게 보이는지 결정합니다.

외부 CSS로 글꼴 색상을 변경하려면 선택기를 사용하여 원하는 HTML 부분의 스타일을 지정합니다. 예를 들어 다음 코드는 사이트의 모든 본문을 변경합니다.

 body {color: purple;}

색상 이름뿐만 아니라 RGB, 16진수 및 HSL 값을 사용하여 글꼴 색상을 변경할 수 있음을 기억하십시오. 스타일시트를 편집하려면 코드 편집기에서 편집하는 것이 좋습니다.

WordPress 사이트를 위한 빠르고 안정적이며 완전히 안전한 호스팅이 필요하십니까? Kinsta는 이 모든 것과 WordPress 전문가로부터 연중무휴 24시간 세계적 수준의 지원을 제공합니다. 우리의 계획을 확인하십시오.

인라인, 임베디드 또는 외부?

이제 CSS를 사용하여 글꼴 색상을 변경하는 방법을 알게 되었습니다. 하지만 어떤 방법을 사용해야 할까요?

인라인 CSS 코드를 사용하는 경우 HTML 파일에 직접 추가합니다. 일반적으로 이 방법은 빠른 수정에 적합합니다. 한 페이지의 특정 단락이나 제목의 색상을 변경하려는 경우 이 방법이 가장 빠르고 가장 복잡한 방법입니다.

그러나 인라인 스타일은 HTML 파일의 크기를 더 크게 만들 수 있습니다. HTML 파일이 클수록 웹 페이지를 로드하는 데 더 오래 걸립니다. 게다가 인라인 CSS는 HTML을 지저분하게 만들 수 있습니다. 따라서 CSS를 사용하여 HTML 글꼴 색상을 변경하는 인라인 방법은 일반적으로 권장되지 않습니다.

포함된 CSS는 <head> 태그 사이와 <style> 태그 내에 배치됩니다. 인라인 CSS와 마찬가지로 외부 스타일시트에 지정된 스타일을 빠르게 수정하고 재정의하는 데 유용합니다.

인라인 스타일과 포함 스타일 사이의 주목할만한 차이점 중 하나는 헤드 태그가 로드되는 모든 페이지에 적용되는 반면 인라인 스타일은 태그가 있는 특정 페이지(일반적으로 해당 페이지에서 대상으로 지정하는 요소)에만 적용된다는 것입니다.

마지막 방법인 외부 CSS는 전용 스타일시트를 사용하여 시각적 스타일을 정의합니다. 일반적으로 외부 스타일시트를 사용하여 모든 스타일을 편집하기 쉬운 한 곳에 보관하는 것이 가장 좋습니다. 이것은 또한 프리젠테이션과 디자인을 분리하므로 코드를 쉽게 관리하고 유지 관리할 수 있습니다.

인라인 및 포함된 스타일은 외부 스타일시트에 설정된 스타일을 재정의할 수 있습니다.

글꼴 태그 또는 CSS 스타일: 장단점

HTML 글꼴 색상을 변경하는 두 가지 기본 방법은 글꼴 태그 또는 CSS 스타일을 사용하는 것입니다. 이 두 가지 방법 모두 장단점이 있습니다.

HTML 글꼴 태그 장단점

HTML 글꼴 태그는 사용하기 쉽기 때문에 유리합니다. 일반적으로 CSS는 <font color="purple"> 을 입력하는 것보다 더 복잡하고 배우는 데 더 오래 걸립니다. HTML5를 사용하지 않는 이전 웹사이트가 있는 경우 글꼴 태그는 글꼴 색상을 변경하는 실행 가능한 방법입니다.

글꼴 태그는 사용하기 쉽지만 웹사이트에서 HTML을 사용하는 경우에는 사용해서는 안 됩니다. 앞서 언급했듯이 글꼴 태그는 HTML5에서 더 이상 사용되지 않습니다. 브라우저가 언제든지 지원을 중단할 수 있으므로 더 이상 사용되지 않는 코드를 사용하는 것은 피해야 합니다. 이로 인해 웹사이트가 깨져 제대로 작동하지 않거나 더 악화되어 방문자에게 전혀 표시되지 않을 수 있습니다.

CSS 장단점

CSS는 font 태그와 마찬가지로 장단점이 있습니다. CSS 사용의 가장 중요한 이점은 글꼴 색상을 변경하고 웹사이트에 대한 다른 모든 스타일을 지정하는 적절한 방법이라는 것입니다.

앞서 언급했듯이 프레젠테이션을 디자인과 분리하여 코드를 더 쉽게 관리하고 유지 관리할 수 있습니다.

단점은 CSS와 HTML5는 코드를 작성하는 이전 방식에 비해 제대로 배우고 작성하는 데 시간이 걸릴 수 있다는 것입니다.

CSS를 사용하면 글꼴 색상을 변경하는 다양한 방법이 있으며 앞서 설명한 것처럼 각 방법에는 고유한 장단점이 있습니다.

HTML 글꼴 색상 변경 팁

이제 HTML 글꼴 색상을 변경하는 방법을 알았으므로 여기에 도움이 될 몇 가지 팁이 있습니다.

색상 선택기 사용

색상을 무작위로 선택하는 대신 색상 선택기를 사용하여 올바른 색상을 선택하십시오. 색상 선택기의 이점은 색상 이름과 코드에서 사용해야 하는 올바른 16진수, RGB 및 HSL 값을 제공한다는 것입니다.

대비 확인

대비 검사기를 사용하여 다양한 텍스트 대 배경 색상 대비 비율을 테스트합니다.

어두운 배경의 어두운 텍스트와 밝은 배경의 밝은 텍스트는 잘 어울리지 않습니다. 그들은 사이트의 텍스트를 읽기 어렵게 만듭니다. 그러나 대비 검사기를 사용하여 사이트의 색상에 액세스할 수 있고 텍스트를 읽기 쉽게 할 수 있습니다.

검사 방법을 사용하여 색상 찾기

웹사이트에서 마음에 드는 색상을 찾으면 코드를 검사하여 색상의 16진수, RGB 또는 HSL 값을 얻을 수 있습니다. Chrome에서 검사할 웹 페이지 부분에 커서를 놓고 마우스 오른쪽 버튼을 클릭한 다음 검사 를 선택하기만 하면 됩니다. 그러면 웹사이트의 HTML 코드와 해당 스타일을 볼 수 있는 코드 검사 패널이 열립니다.

사이트의 글꼴 색상을 변경하고 싶으십니까? 간단 해! 이 가이드는 시작하는 데 도움이 될 것입니다 ️ 트윗하려면 클릭하세요

요약

HTML 글꼴 색상을 변경하면 웹사이트의 가독성과 접근성을 향상시킬 수 있습니다. 또한 웹 사이트 스타일에서 브랜드 일관성을 확립하는 데 도움이 될 수 있습니다.

이 가이드에서는 HTML 글꼴 색상을 변경하는 네 가지 방법(색상 이름, 16진수 코드, RGB 및 HSL 값 포함)에 대해 배웠습니다.

또한 인라인, 내장 및 외부 CSS를 사용하여 글꼴 색상을 변경하고 글꼴 태그와 각 방법의 장단점을 사용하는 방법에 대해서도 다루었습니다. 지금쯤이면 HTML 글꼴 색상을 변경하는 데 사용해야 하는 방법을 충분히 이해했을 것이므로 이제 할 일은 사이트에 이러한 팁을 구현하는 것뿐입니다.

CSS와 글꼴 태그로 글꼴 색상을 변경하는 것에 대해 어떻게 생각하십니까? 의견 섹션에서 알려주십시오!