실행 가능한 CSS 문서: 글자 색

Q: HTML에서 글자 색은 어떻게 바꾸나요?

스타일시트나 style 속성에서 CSS color 속성을 써요. Blue text 옛 태그는 폐기됐어요.

Q: 단어 하나의 색은 어떻게 바꾸나요?

단어를 으로 감싸고 색을 주세요. This is red . 단어가 중요하거나 강조되는 것이라면 대신 이나 을 쓰세요.

Q: 부모에 color를 지정했는데 링크 색이 바뀌지 않는 이유는 무엇인가요?

링크는 브라우저 스타일시트에서 자기 색을 받아서 부모의 색을 상속받지 않아요. 링크 자체에 지정하거나(a { color: #2563eb; }) a { color: inherit; }로 부모를 따르게 하세요.

Q: CSS에서 font-color인가요, color인가요?

color예요. font-color나 text-color 속성은 없고, 브라우저는 무시해요.

HTML에서 글자 색 바꾸는 법

CSS color 속성을 쓰세요. 요소의 텍스트 색을 정하고, 안에 있는 모든 요소는 따로 정하지 않는 한 같은 색을 상속받아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

속성 이름은 font-color나 text-color가 아니라 color예요. 그런 이름은 CSS에 없어서 조용히 무시돼요.

font 태그를 쓰지 않는 이유

옛 튜토리얼에는 가 나와요. 이 태그는 몇 년 전에 HTML에서 빠졌어요. 검사기는 오류로 표시하고, 스타일이 마크업에 섞여서 색을 바꾸려면 모든 태그를 손으로 고쳐야 해요. 브라우저가 호환성 때문에 여전히 그려 주는 게 동작하는 것처럼 보이는 유일한 이유예요.

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

색을 쓰는 방법

color는 모든 CSS 색 형식을 받아요. 가장 흔한 네 가지예요.

형식	예시	설명
색 이름	`color: tomato;`	이름 있는 색 148개, 빠른 테스트에 편해요
Hex	`color: #2563eb;`	디자인 파일에서 가장 흔해요
rgb()	`color: rgb(37 99 235);`	빨강, 초록, 파랑을 0부터 255까지
hsl()	`color: hsl(221 83% 53%);`	색상, 채도, 명도: 밝게 또는 어둡게 만들기 쉬워요

Hex, rgb(), hsl()은 반투명 텍스트를 위해 알파 채널을 받을 수 있어요. #2563eb80나 rgb(37 99 235 / 50%)처럼요. 모든 형식은 CSS 색상 페이지에서 설명해요.

페이지 전체, 제목, 섹션에 색 입히기

body에 색을 한 번 정하고 나머지는 상속에 맡긴 다음, 필요한 곳만 덮어쓰세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

흰 배경에서는 순수한 #000000보다 #111827이나 #374151 같은 부드러운 검정에 가까운 색이 눈에 편하고, 그래도 검정으로 읽혀요.

링크 색

링크는 상속의 예외예요. 브라우저가 링크에 자기 파란색(방문하면 보라색)을 주기 때문에 부모의 색이 닿지 않아요. 링크에 색을 지정하거나, 링크가 상속받게 하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

:hover, :visited, :focus-visible로 상태마다 색을 바꿀 수 있어요. 이는 hover 페이지에서 다뤄요. 링크가 주변 텍스트와 같은 색이라면 밑줄을 남겨 두세요. 그래야 여전히 링크로 알아볼 수 있어요.

읽기 좋은 텍스트: 명도 대비

글자 색은 짝의 절반일 뿐이고, 나머지 절반은 배경이에요. WCAG는 일반 텍스트에 최소 4.5:1, 큰 텍스트(약 24px, 또는 굵은 19px)에 3:1의 명도 대비를 요구해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

가장 흔한 실패는 placeholder처럼 옅은 회색 텍스트예요. Chrome과 Firefox 개발자 도구는 텍스트 색을 검사하면 명도 대비를 보여 줘요.

currentColor: 글자 색 재사용하기

currentColor는 요소의 color와 같은 값의 키워드예요. 테두리, outline, 인라인 SVG 아이콘이 이걸 쓰면 color 하나만 바꿔도 텍스트와 장식의 색이 함께 바뀌어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

자주 하는 실수

font-color나 text-color 쓰기. 속성은 color예요.
 태그 쓰기. 폐기됐어요. CSS를 쓰세요.
링크가 상속받을 거라고 기대하기. a { color: ... }나 color: inherit를 지정하세요.
색만으로 신호 주기. "빨간색 필드는 필수예요"는 빨간색을 구분하지 못하는 독자에게 통하지 않아요. 텍스트나 아이콘을 추가하세요.
명도 대비가 낮은 회색 텍스트. 비율을 확인하세요. 본문 텍스트는 4.5:1 이상이에요.
텍스트를 옅게 하려고 opacity 쓰기. 배경과 자식을 포함한 요소 전체가 흐려져요. 대신 더 밝은 색이나 알파 색을 쓰세요.

자주 묻는 질문

HTML에서 글자 색은 어떻게 바꾸나요?

스타일시트나 style 속성에서 CSS color 속성을 써요. Blue text 옛  태그는 폐기됐어요.

태그는 아직 지원되나요?

아주 오래된 페이지가 계속 동작하도록 브라우저가 여전히 그려 주지만, HTML에서는 폐기되었고 검사기는 오류로 표시해요. 대신 CSS color를 쓰세요.

단어 하나의 색은 어떻게 바꾸나요?

단어를 으로 감싸고 색을 주세요. This is red. 단어가 중요하거나 강조되는 것이라면  대신 이나 을 쓰세요.

부모에 color를 지정했는데 링크 색이 바뀌지 않는 이유는 무엇인가요?

링크는 브라우저 스타일시트에서 자기 색을 받아서 부모의 색을 상속받지 않아요. 링크 자체에 지정하거나(a { color: #2563eb; }) a { color: inherit; }로 부모를 따르게 하세요.

CSS에서 font-color인가요, color인가요?

color예요. font-color나 text-color 속성은 없고, 브라우저는 무시해요.

HTML 글자 색 바꾸기: CSS color 속성 사용법