Colors/Applying color

김동현·2026년 3월 18일

mdn 학습 번역 - CSS

목록 보기

56/190

CSS로 HTML 요소에 색상 적용하기 (Applying color to HTML elements using CSS)

안녕하세요! 프론트엔드 개발의 세계에 오신 것을 환영합니다. 웹 페이지를 흑백으로만 만든다면 너무 심심하겠죠? 오늘 저와 함께 살펴볼 내용은 여러분이 그리는 디자인을 웹 화면에 그대로 구현해 줄 색상(Color)에 대한 이야기입니다.

CSS를 사용하면 HTML 요소(elements)에 내가 원하는 느낌의 색상을 입힐 수 있는 정말 다양한 방법들이 존재합니다. 이 가이드는 CSS를 통해 HTML 요소에 색상을 입히는 방법에 대한 첫걸음(primer)입니다. 값으로 '색상'을 가지는 CSS 속성 리스트들을 살펴보고, 스타일시트 내에서 또는 다른 방식들로 어떻게 색상을 사용하는지 차근차근 알아볼 거예요.

💡 참고 (접근성 팁): 색상을 현명하게 사용하는 것은 정말 중요합니다. 항상 글씨가 잘 보일 수 있도록 텍스트와 배경 사이의 대비(contrast)가 충분한지 확인하는 등 적절한 색상을 선택해야 합니다. 또한 다양한 시각적 능력을 가진 사람들의 불편함을 덜어줄 수 있도록 배려하는 마음을 항상 잊지 마세요!

데이터 타입으로서의 'CSS 색상'에 대해 더 깊이 공부하고 싶으시다면, CSS <color> 데이터 타입 레퍼런스와 CSS 색상 값 가이드(CSS color values guide)를 꼭 확인해 보세요.

색상을 가질 수 있는 속성들 (Properties that can have color)

요소 레벨에서 볼 때, HTML의 모든 요소에는 색상을 입힐 수 있습니다. 텍스트, 테두리 등 웹 페이지에 렌더링되는 다양한 항목들을 살펴보면서, 각 항목에 색상을 적용하는 CSS 속성들을 소개해 드릴게요.

가장 기본적으로, color 속성은 HTML 요소 안의 '전경색(foreground color, 즉 글자색)'을 정의하고, background-color 속성은 요소의 '배경색(background color)'을 정의합니다. 이 두 가지는 거의 모든 요소에 기본적으로 사용할 수 있답니다!

텍스트 (Text)

텍스트(글자)가 화면에 그려질 때, 그 글자의 색상, 텍스트의 배경색, 그리고 글자를 꾸며주는 장식 선 등의 색상을 결정하는 속성들입니다.

color
글자 자체를 그릴 때 사용할 색상과, 밑줄이나 취소선 같은 텍스트 장식(text decorations)에 기본으로 쓰일 색상을 지정합니다.
background-color
글자가 놓이는 텍스트 뒤쪽의 배경색을 지정합니다. (형광펜으로 칠한 것 같은 효과를 줄 수 있어요!)
text-shadow
텍스트에 그림자 효과를 줍니다. 여러 옵션 중 하나로 이 그림자의 '기본 색상'을 지정할 수 있습니다. (설정된 색상은 다른 수치들에 의해 흐려지거나 바탕과 자연스럽게 섞입니다.) 자세한 내용은 텍스트 그림자(Text drop shadows)를 참고하세요.
text-decoration-color
기본적으로 텍스트 장식(밑줄, 취소선 등)의 색상은 currentColor라는 키워드 값을 따릅니다. 이는 현재 color 속성에 지정된 글자색을 그대로 따라간다는 뜻이에요. 하지만 이 text-decoration-color 속성을 쓰면 글자색과는 다른, 나만의 튀는 색상으로 밑줄을 그을 수도 있습니다!
text-emphasis-color
글자의 각 문자 위나 아래에 강조 표시(강조점 등)를 렌더링할 때 사용하는 색상입니다. 동아시아 언어(한국어, 일본어, 중국어 등)에서 텍스트를 강조할 때 주로 사용됩니다.
caret-color
요소 안에서 깜빡이는 캐럿(caret)(텍스트 입력 커서)을 그릴 때 사용할 색상입니다. 이 속성은 <input>이나 <textarea>처럼 사용자가 글씨를 입력할 수 있는 요소이거나, HTML contenteditable 속성이 true로 설정된 요소에서만 유용합니다.

💡 강사님의 꿀팁: 인풋 창의 커서 색깔(caret-color)만 브랜드 컬러로 슬쩍 바꿔줘도, 사용자는 "오, 이 사이트 디자인 좀 신경 썼네!" 하고 느낀답니다. 아주 작지만 강력한 디테일이죠!

박스 (Boxes)

모든 HTML 요소는 어떤 콘텐츠를 담고 있는 하나의 '상자(box)'입니다. 그리고 이 상자는 그 안의 내용물 외에도 배경과 테두리를 가질 수 있습니다.

테두리 (Borders)
상자의 테두리 색상을 설정하는 CSS 속성들의 전체 리스트는 바로 아래 테두리 (Borders) 섹션을 참고해 주세요.
background-color
요소에서 전경 콘텐츠(글자나 이미지 등)가 없는 텅 빈 영역에 칠할 배경색입니다.
box-shadow
박스에 안쪽 그림자(inset)나 바깥쪽 그림자(drop shadow) 효과를 설정합니다. 그림자의 색상도 지정할 수 있습니다.
column-rule-color
CSS 다단 레이아웃(CSS multi-column layout)을 사용하여 텍스트를 여러 단으로 나눴을 때, 단과 단 사이를 가르는 구분선(rule)의 색상을 설정합니다. 마치 신문이나 잡지처럼요!
outline-color
요소의 바깥쪽 가장자리를 빙 둘러서 그리는 윤곽선(outline)의 색상을 설정합니다. 윤곽선은 테두리(border)와 비슷해 보이지만, 문서의 레이아웃 공간(크기)을 차지하지 않는다는 결정적인 차이가 있습니다. 즉, 박스 모델(box model)의 계산에 포함되지 않아서 다른 콘텐츠 위에 겹쳐서(overlap) 그려집니다. 보통은 사용자가 키보드(Tab 키 등)로 이동할 때 현재 어느 요소에 포커스가 있는지 알려주기 위해 사용됩니다.

테두리 (Borders)

어떤 요소든 그 주위에 테두리를 그릴 수 있습니다. 가장 기본적인 테두리는 요소의 콘텐츠 가장자리를 따라 긋는 선입니다. 요소와 테두리 사이의 관계가 궁금하다면 박스 모델(The box model) 문서를, 테두리를 예쁘게 꾸미는 방법은 CSS로 테두리 스타일링하기(Styling borders using CSS) 문서를 참고하세요.

단축 속성인 border를 사용하면 테두리의 색상뿐만 아니라 두께(width), 스타일(style)(실선, 점선 등)까지 단 한 번에 아주 쉽게 설정할 수 있습니다.

border-color (단축 속성)
요소의 상하좌우 모든 테두리에 사용할 단일 색상을 지정합니다.
border-left-color, border-right-color, border-top-color, 그리고 border-bottom-color
왼쪽, 오른쪽, 위, 아래 테두리의 색상을 각각 따로따로 디테일하게 설정할 수 있습니다.
border-block-start-color 및 border-block-end-color
테두리가 둘러싸고 있는 블록(block)의 '시작(start)'과 '끝(end)'에 가장 가까운 테두리 색상을 설정합니다. 영어처럼 왼쪽에서 오른쪽으로, 위에서 아래로 쓰는 쓰기 모드(left-to-right writing mode)에서는 블록의 시작이 맨 윗변(top edge)이 되고, 블록의 끝이 아랫변(bottom edge)이 됩니다.
border-inline-start-color 및 border-inline-end-color
박스 안에서 텍스트 줄이 '시작'하는 곳과 '끝'나는 곳에 가장 가까운 테두리 색상을 설정합니다. 이 방향이 정확히 어디가 될지는 주로 언어에 따라 텍스트 방향을 조정하는 데 쓰이는 writing-mode, direction, text-orientation 속성에 따라 달라집니다. 예를 들어, 아랍어처럼 우측에서 좌측으로 읽는 텍스트(right-to-left)라면, border-inline-start-color는 테두리의 '오른쪽' 면에 적용되겠죠!

💡 강사님의 꿀팁: border-block-*이나 border-inline-* 같은 속성들은 다국어 사이트(특히 아랍어 같은 RTL 언어를 지원하는 사이트)를 만들 때 정말 중요합니다. 언어가 바뀔 때마다 테두리 위치를 새로 계산해서 바꿔줄 필요 없이, 브라우저가 방향에 맞춰서 똑똑하게 색상을 칠해주기 때문이죠!

스타일시트에서 색상값을 지정하는 방법 (Specifying colors as values in stylesheets)

자, 이제 요소에 색상을 적용하는 CSS 속성들이 무엇인지 알았으니, 본격적으로 여러분의 웹사이트에 다채로운 색을 더해볼 차례입니다. 스타일시트(stylesheet) 안에서 색상을 어떻게 쓰는지 예제를 통해 살펴볼게요. 이 예제에서는 앞서 언급한 여러 속성을 골고루 사용하지만, 어떤 속성을 쓰든 CSS에 색상을 적용하는 기본 개념은 모두 똑같습니다.

코드를 보기 전에 먼저 우리가 어떤 결과를 만들지 확인해 보죠:

MDN Playground에서 이 예제 실행해보기 (Run example in MDN Playground)

HTML

위의 결과를 만들어낸 HTML 구조는 이렇습니다:

<div class="wrapper">
  <div class="boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="boxRight">
    <p>This is the second box.</p>
  </div>
</div>

여기서 우리는 래퍼(wrapper) 역할을 하는 큰 <div> 안에, 각각 하나의 문단(<p>)을 자식으로 가진 두 개의 작은 <div>를 만들었습니다. 그리고 이 두 개의 콘텐츠 <div>에 서로 다른 시각적 느낌을 줄 거예요.

CSS

그럼 이제 이 화면을 완성한 마법의 CSS 코드를 하나씩 뜯어볼까요?

참고: 이 예제에서는 여러분께 CSS 색상의 다양성을 보여드리기 위해 의도적으로 서로 다른 여러 가지 CSS 색상 값 표기법을 섞어서 사용했습니다. 하지만 실제 프로젝트 코드(production code)를 작성할 때는 이렇게 중구난방으로 쓰시면 안 돼요! 여러분과 팀원들이 가장 직관적으로 이해하기 편한 하나의 표기법(예: hex 코드나 hsl 등)을 정해서 일관되게 쓰는 것이 훨씬 낫습니다.

.wrapper {
  height: 110px;
  padding: 10px;
  display: flex;
  gap: 10px;
  text-align: center;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  border: 6px solid mediumturquoise;
}

div {
  flex: 1;
}

먼 거, .wrapper 클래스는 모든 내용물을 감싸는 부모 <div>의 스타일을 잡습니다.
height로 높이를 잡아주고, 이 블록 레벨 요소의 너비는 부모의 100%를 차지하도록 자연스럽게 내버려 뒀어요. 가장 중요한 건 display: flex와 gap: 10px을 주어서, 자식 요소들이 나란히 가로로 정렬되면서 그 사이에 10px의 간격이 생기는 '플렉스 컨테이너'를 만들었다는 점입니다. 그리고 내부의 자식 래퍼인 div들에 flex: 1을 주어서 플렉스 컨테이너 안의 빈 공간을 꽉 채우도록 쭉쭉 늘어나게(grow) 만들었죠. (이 속성은 자식에게만 영향을 주고 플렉스 컨테이너 자신에겐 영향을 안 준답니다.)

지금 우리의 주제에 맞춰 집중해서 봐야 할 곳은 바로 border 속성입니다. 이 속성을 써서 바깥쪽을 빙 두르는 6픽셀짜리 실선(solid) 테두리를 그렸는데요, 그 색상을 mediumturquoise라는 이름이 있는 색상(named color)으로 지정했습니다.

이제 래퍼 안에 있는 왼쪽 박스와 오른쪽 박스를 볼까요.

.boxLeft {
  background-color: rgb(245 130 130);
  outline: 2px solid darkred;
}

왼쪽 박스를 꾸미는 .boxLeft 클래스에서는 배경색과 윤곽선(outline)의 색상을 설정합니다:

박스의 배경색은 CSS background-color 속성을 통해, rgb() 함수 표기법을 사용해 rgb(245 130 130)로 설정했습니다.
박스의 테두리에는 outline을 정의했습니다. 흔히 쓰는 border와 달리, outline은 요소의 레이아웃(공간)을 차지하지 않습니다. border처럼 다른 요소들을 밀어내고 자리를 잡는 게 아니라, 요소 바깥에 있는 그 어떤 것의 위에든 그냥 덧그려질 뿐이죠. 이 윤곽선은 2픽셀 두께의 실선이며, 색상 지정 시 darkred라는 키워드를 사용했습니다.
자, 그런데 여기 텍스트 색상(color)에 대한 설정은 없죠? 명시적으로 텍스트 색상을 설정하지 않았기 때문에, color 값은 글씨색이 정의된 가장 가까운 부모 요소를 찾아 그 색상을 물려받게(inherit) 됩니다. 기본적으로는 브라우저 기본값인 '검은색(black)'이 됩니다.

.boxRight {
  background-color: hwb(270deg 63% 13%);
  outline: 4px dashed #6e1478;
  color: hsl(0deg 95% 95%);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #8f8;
  text-decoration: underline wavy #8f8;
  text-shadow: 2px 2px 3px black;
}

참고: Safari 구버전 브라우저에서는 text-decoration을 단축 속성으로 완벽히 지원하지 않기 때문에, 안전하게 적용되도록 text-decoration-* 개별 속성들을 일일이 풀어서 써주었습니다. (크로스 브라우징을 위한 팁이죠!)

마지막으로, .boxRight 클래스는 오른쪽 박스에 스타일을 줍니다. 여기서는 총 다섯 가지의 서로 다른 색상 값(color values) 표기법을 사용해 색상을 설정했습니다:

background-color는 hwb() 함수 표기법을 사용해 hwb(270deg 63% 13%)로 설정했습니다. 아주 예쁜 중간 톤의 보라색(medium purple)이 나옵니다.
박스의 outline은 4픽셀 두께의 파선(dashed)으로 설정했고, 색상은 6자리 <hex-color>(16진수 색상)인 #6e1478을 사용해 조금 더 짙은 보라색을 냈습니다.
전경색(즉, 글자색)은 color 속성에 hsl() 함수를 사용하여 hsl(0deg 95% 95%)로 주었습니다. 이 색상은 아주 옅은 분홍빛을 띱니다.
텍스트 아래에는 초록색 물결무늬 밑줄(wavy line)을 그었습니다. 앞서 말했듯 브라우저 호환성을 위해 개별 컴포넌트들을 먼저 쓴 뒤에, 마지막에 단축 속성인 text-decoration을 적어주었죠. 여기서는 3자리 <hex-color>인 #8f8을 사용했는데, 이건 #88ff88을 줄여 쓴 것과 완전히 똑같습니다.
마지막으로, text-shadow를 사용해서 텍스트에 그림자를 살짝 더했습니다. 그림자의 color 파라미터는 <named-color> 값인 black으로 설정했어요.

무엇이 가능한지 보여드리기 위해 무려 다섯 가지 색상 문법을 섞어 썼지만, 실제 현장에서는 개발팀의 취향과 약속에 맞춰 딱 하나만 깔끔하게 골라 쓰시면 됩니다!

색상을 사용하는 다른 방법들 (Other ways to use color)

사실 웹에서 색상을 지원하는 기술이 CSS 하나만 있는 건 아닙니다. 다음과 같은 멋진 방법들도 있죠:

HTML 캔버스 API (Canvas API)

<canvas> 요소 안에 자바스크립트로 2D 비트맵 그래픽을 마음대로 그릴 수 있게 해주는 마법 같은 도구입니다. 더 알고 싶다면 Canvas 튜토리얼을 확인해 보세요.

SVG (Scalable Vector Graphics, 확장 가능한 벡터 그래픽)

특정한 도형, 패턴, 선을 그리는 명령어를 사용해, 아무리 크게 확대해도 깨지지 않는 선명한 이미지를 만들 수 있습니다. SVG 명령어는 XML 형식으로 작성되며, 웹 페이지의 HTML 코드 안에 직접 콱 박아 넣거나(embed), 다른 일반 이미지들처럼 <img> 태그를 이용해 불러올 수도 있습니다.

WebGL

웹 그래픽 라이브러리(Web Graphics Library)는 웹상에서 고성능의 2D 및 3D 그래픽을 쌩쌩하게 그리기 위한 OpenGL ES 기반의 API입니다. 멋진 3D 세상을 만들고 싶다면 WebGL 튜토리얼을 살펴보세요. 또한 최신 GPU의 성능을 영혼까지 끌어다 쓰는 WebGL의 후계자, WebGPU도 꼭 체크해 볼 만합니다.

참고: 예전 아주 먼 옛날 HTML에는 bgcolor나 vlink처럼 색상을 값으로 받는 속성(attributes)들이 있었습니다. 하지만 이 속성들은 이제는 쓰이지 않는 '구식(obsolete)'이 되었으니 무시하셔도 됩니다! (그 시절에는 <named-color>와 3자리 또는 6자리 <hex-color> 값만 쓸 수 있었죠.)