글자와 색만 바꿔도 달라지는 첫 스타일링

스타일링은 글자와 색에서 가장 먼저 티가 난다

지난 장에서는 CSS로 "무엇을 꾸밀지" 고르는 선택자를 배웠습니다. 이제는 고른 요소를 실제로 바꿔 볼 차례입니다.

웹페이지의 첫인상은 대부분 글자와 색에서 시작됩니다. 같은 문장이라도 글자가 너무 작으면 읽기 어렵고, 색이 너무 흐리면 중요한 내용이 눈에 들어오지 않습니다. 반대로 글자 크기, 굵기, 줄 간격, 색만 조금 정리해도 페이지가 훨씬 믿음직해 보입니다.

이번 장에서는 버튼, 안내 박스, 블로그 글, 회사 소개 문구처럼 자주 만나는 화면 요소를 기준으로 가장 많이 쓰는 CSS 속성을 다룹니다.

AI 생성 이미지

글자색과 배경색은 따로 바꾼다

CSS에서 글자색을 바꾸는 속성은 color입니다. 여기서 color는 글자에 묻히는 잉크 색이라고 생각하면 됩니다.

배경색을 바꾸는 속성은 background-color입니다. 이 속성은 글자 뒤에 깔리는 종이 색을 바꾸는 역할을 합니다.

.notice {
  color: #1f2937;
  background-color: #fef3c7;
}

이 코드는 notice라는 class가 붙은 안내 문구를 이렇게 바꿉니다.

• color: #1f2937; → 글자색을 진한 회색으로 바꾼다.

• background-color: #fef3c7; → 배경을 연한 노란색으로 바꾼다.

둘은 비슷해 보이지만 역할이 다릅니다. color는 글자 자체의 색이고, background-color는 글자 뒤 영역의 색입니다.

예를 들어 쇼핑몰 이벤트 문구를 만든다고 생각해 봅시다.

.sale-message {
  color: #b91c1c;
  background-color: #fee2e2;
}

이렇게 하면 글자는 진한 빨간색, 배경은 연한 빨간색이 됩니다. 같은 빨간 계열을 쓰더라도 글자는 진하게, 배경은 연하게 쓰면 경고나 할인 정보가 눈에 들어오면서도 부담스럽지 않습니다.

반대로 이런 조합은 피하는 것이 좋습니다.

.bad-message {
  color: #fca5a5;
  background-color: #fee2e2;
}

글자색과 배경색이 모두 연하면 서로 구분되지 않습니다. 디자인이 부드러워 보여도 읽기 어렵다면 좋은 스타일이 아닙니다.

글자 크기, 굵기, 줄 간격으로 읽기 편하게 만든다

글자를 다룰 때 자주 쓰는 속성은 세 가지입니다.

• font-size: 글자 크기

• font-weight: 글자 굵기

• line-height: 줄 간격

font-size는 글자의 몸집입니다. 안내문에 붙은 작은 글씨와 메인 제목의 큰 글씨를 구분할 때 사용합니다.

font-weight는 글자의 두께입니다. 형광펜을 칠하듯 중요한 부분을 더 굵게 보이게 합니다.

line-height는 줄과 줄 사이의 높이입니다. 공책의 줄 간격처럼 생각하면 쉽습니다. 줄 간격이 너무 좁으면 글이 답답해 보이고, 너무 넓으면 문장이 흩어져 보입니다.

블로그 글 제목과 본문을 예로 보겠습니다.

.article-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
}

.article-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

여기서 px는 화면에서 크기를 정하는 단위입니다. 처음 CSS를 배울 때는 "숫자가 커지면 더 커진다" 정도로 이해해도 충분합니다.

위 코드는 제목과 본문을 다르게 다룹니다.

• 제목은 32px로 크게 보인다.

• 제목은 font-weight: 700으로 굵게 보인다.

• 제목은 줄이 길게 이어지지 않으므로 line-height: 1.25처럼 조금 촘촘해도 괜찮다.

• 본문은 16px 정도로 읽기 편한 크기를 잡는다.

• 본문은 font-weight: 400으로 보통 굵기를 쓴다.

• 본문은 여러 줄을 읽어야 하므로 line-height: 1.7처럼 여유를 둔다.

처음에는 아래 기준으로 시작하면 안전합니다.

중요한 점은 숫자를 외우는 것이 아닙니다. 글자를 키우면 더 먼저 보이고, 굵게 하면 더 중요해 보이며, 줄 간격을 넓히면 더 편하게 읽힌다는 감각을 잡는 것입니다.

색상 표기법 세 가지: 이름, HEX, rgba

CSS에서 색을 적는 방법은 여러 가지입니다. 처음에는 세 가지만 알아도 충분합니다.

1. 색상 이름

가장 쉬운 방식은 색상 이름을 쓰는 것입니다.

.simple-button {
  color: white;
  background-color: blue;
}

white, black, red, blue처럼 영어 색상 이름을 그대로 적습니다. 장점은 읽기 쉽다는 것입니다. 단점은 원하는 미묘한 색을 고르기 어렵다는 것입니다. "조금 차분한 파랑", "브랜드에 맞는 진한 남색" 같은 색을 만들기에는 부족합니다.

2. HEX 코드

실무에서 가장 자주 보는 방식은 #2563eb처럼 적는 HEX 코드입니다. HEX 코드는 색상에 붙은 제품 번호처럼 생각하면 됩니다. 페인트 가게에서 "파랑 주세요"라고 말하는 대신 정확한 색상 번호를 말하는 것과 비슷합니다.

.primary-button {
  color: #ffffff;
  background-color: #2563eb;
}

여기서 #ffffff는 흰색, #2563eb는 선명한 파란색입니다. 디자인 도구, 브랜드 가이드, 웹 템플릿에서 색을 복사하면 이런 형태를 자주 만나게 됩니다.

HEX 코드는 처음부터 원리를 깊게 외울 필요는 없습니다. 우선 #으로 시작하는 여섯 자리 색상값이라고 기억하면 됩니다.

3. rgba

rgba는 색에 투명도를 함께 넣는 방식입니다. 색유리나 얇은 셀로판지를 올려놓는 느낌이라고 생각하면 됩니다.

.soft-banner {
  color: #1e3a8a;
  background-color: rgba(37, 99, 235, 0.12);
}

마지막 숫자 0.12는 투명도입니다.

• 0에 가까울수록 거의 보이지 않는다.

• 1에 가까울수록 진하게 보인다.

• 0.12, 0.2, 0.5처럼 중간값을 쓸 수 있다.

rgba는 배경을 아주 연하게 깔고 싶을 때 좋습니다. 예를 들어 공지 배너, 강조 박스, 카드의 은은한 배경에 자주 사용합니다.

브랜드 색상은 2~3개만 정해도 충분하다

페이지를 꾸밀 때 색을 많이 쓰면 화려해 보일 수 있습니다. 하지만 색이 많아질수록 사용자는 무엇이 중요한지 헷갈립니다.

처음에는 브랜드 색상을 2~3개만 정하는 것이 좋습니다.

예를 들어 작은 회사 소개 페이지를 만든다고 해 봅시다.

• 주요 색상: #2563eb 파랑

• 글자 색상: #111827 거의 검정에 가까운 진회색

• 연한 배경색: #eff6ff 아주 옅은 파랑

이 세 가지를 버튼, 링크, 강조 문구에 반복해서 쓰면 페이지가 정돈되어 보입니다.

.company-title {
  color: #111827;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
}

.company-link {
  color: #2563eb;
  font-weight: 600;
}

.cta-button {
  color: #ffffff;
  background-color: #2563eb;
  font-weight: 700;
}

.highlight-box {
  color: #1e3a8a;
  background-color: #eff6ff;
}

여기서 중요한 것은 같은 색을 반복해서 쓰는 것입니다.

링크는 파랑, 버튼도 파랑, 강조 박스는 연한 파랑으로 맞추면 사용자는 자연스럽게 "파랑은 중요한 행동이나 강조를 뜻하는구나"라고 받아들입니다.

색은 장식이 아니라 안내 신호입니다. 같은 의미에는 같은 색을 쓰는 것이 좋습니다.

가독성을 망치는 흔한 실수

글자와 색을 바꿀 때 가장 조심해야 할 것은 가독성입니다. 가독성은 글이 얼마나 잘 읽히는지를 뜻합니다. 예쁜 포스터라도 문장이 잘 안 보이면 안내 역할을 하기 어렵습니다.

실수 1. 글자가 너무 작다

.caption {
  font-size: 11px;
  color: #6b7280;
}

작은 설명 문구라도 11px은 많은 사용자에게 불편할 수 있습니다. 특히 모바일 화면에서는 더 작게 느껴집니다.

수정해 봅시다.

.caption {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
}

글자 크기를 조금 키우고 줄 간격을 주면 설명 문구가 훨씬 편하게 읽힙니다.

실수 2. 글자와 배경의 차이가 너무 약하다

.card-text {
  color: #d1d5db;
  background-color: #ffffff;
}

흰 배경 위에 아주 연한 회색 글자를 올리면 깔끔해 보일 수는 있지만, 실제로는 읽기 어렵습니다.

.card-text {
  color: #374151;
  background-color: #ffffff;
}

배경이 밝다면 글자는 충분히 진해야 합니다. 반대로 배경이 어두우면 글자는 밝아야 합니다.

실수 3. 중요한 색이 너무 많다

.event-card h3 {
  color: red;
}

.event-card a {
  color: green;
}

.event-card strong {
  color: purple;
}

.event-card button {
  background-color: orange;
}

이렇게 여러 색을 동시에 쓰면 모든 것이 중요해 보입니다. 결국 아무것도 눈에 띄지 않습니다.

수정해 봅시다.

.event-card h3 {
  color: #111827;
}

.event-card a,
.event-card strong {
  color: #2563eb;
}

.event-card button {
  color: #ffffff;
  background-color: #2563eb;
}

제목은 차분한 진회색, 링크와 강조 문구와 버튼은 같은 파랑으로 맞췄습니다. 색의 종류는 줄었지만 화면의 질서는 더 분명해집니다.

작은 실습: 밋밋한 홍보 카드를 정리하기

아래와 같은 홍보 카드가 있다고 생각해 봅시다.

<div class="promo-card">
  <p class="promo-label">NEW CLASS</p>
  <h2 class="promo-title">비개발자를 위한 CSS 입문</h2>
  <p class="promo-text">글자와 색부터 차근차근 바꾸며 웹페이지 감각을 익혀 봅니다.</p>
  <a class="promo-link" href="#">강의 자세히 보기</a>
</div>

처음 상태의 CSS가 이렇게 되어 있다고 해 봅시다.

.promo-card {
  color: #999999;
  background-color: #ffffff;
}

.promo-title {
  font-size: 18px;
  font-weight: 400;
}

이 상태에서는 제목이 본문처럼 약하게 보이고, 전체 글자가 흐려서 중요한 카드라는 느낌이 부족합니다.

이제 글자와 색만 바꿔 보겠습니다.

.promo-card {
  color: #374151;
  background-color: #eff6ff;
}

.promo-label {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
}

.promo-title {
  color: #111827;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}

.promo-text {
  font-size: 16px;
  line-height: 1.7;
}

.promo-link {
  color: #2563eb;
  font-weight: 700;
}

수정 후에는 이런 변화가 생깁니다.

• 카드 배경이 연한 파랑으로 바뀌어 영역이 구분된다.

• 작은 라벨은 파란색과 굵은 글씨로 보조 강조가 된다.

• 제목은 크고 굵어져 가장 먼저 읽힌다.

• 본문은 줄 간격이 생겨 편하게 읽힌다.

• 링크는 브랜드 파랑으로 표시되어 클릭할 수 있는 요소처럼 보인다.

이번 실습에서는 여백이나 테두리를 건드리지 않았습니다. 그런데도 화면의 인상은 꽤 달라집니다. 이것이 글자와 색의 힘입니다.

수정 전후를 볼 때 확인할 것

글자와 색을 바꾼 뒤에는 아래 항목을 확인해 보세요.

• 본문 글자가 너무 작지 않은가?

• 제목이 본문보다 먼저 눈에 들어오는가?

• 글자색과 배경색이 충분히 구분되는가?

• 링크와 버튼에 같은 주요 색상을 사용했는가?

• 강조 색을 너무 많이 쓰고 있지 않은가?

• 줄 간격이 너무 답답하거나 지나치게 넓지 않은가?

CSS를 잘한다는 것은 화려한 효과를 많이 넣는다는 뜻이 아닙니다. 사용자가 무엇을 먼저 읽고, 어디를 눌러야 하는지 편하게 알 수 있도록 정리하는 것입니다.

이번 장에서는 글자와 색만으로 화면을 바꾸는 방법을 배웠습니다. 다음 장에서는 여백을 다룹니다. 글자와 색이 페이지의 인상을 만든다면, 여백은 그 인상을 깔끔하게 정돈해 줍니다.