텍스트와 색상

화면 대부분은 글자로 채워집니다. 글꼴, 크기, 줄 간격, 색을 적절히 다루면 같은 내용도 훨씬 읽기 쉬워집니다. 이 강의에서는 타이포그래피의 기본과 CSS의 단위·색상 표기법을 익힙니다.

학습 목표

• font-family, font-size, font-weight, line-height를 다룬다.
• 웹폰트를 불러와 적용한다.
• px, em, rem, % 단위의 차이를 이해한다.
• hex, rgb, hsl 색상 표기법을 사용한다.

폰트 기본 속성

글꼴 관련 속성은 텍스트의 인상을 결정합니다.

body {
  font-family: "Pretendard", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

h1 {
  font-size: 32px;
  font-weight: 700;
}

font-family는 여러 글꼴을 쉼표로 나열하며, 앞쪽 글꼴이 없으면 다음 글꼴로 넘어갑니다. 마지막에는 sans-serif 같은 일반 계열을 둡니다.

line-height는 단위 없이 숫자만 쓰면 글자 크기에 비례해 계산되므로 권장됩니다.

웹폰트

기기에 없는 글꼴은 웹폰트로 불러옵니다.

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: "MyFont", sans-serif;
}

💡 TIP — font-display: swap을 쓰면 웹폰트가 로딩되는 동안 기본 글꼴을 먼저 보여줘 글자가 사라져 보이는 현상을 막을 수 있습니다.

단위: px, em, rem, %

크기 단위는 상황에 따라 골라 씁니다.

단위	기준
px	절대 크기(픽셀)
em	현재 요소의 font-size
rem	루트(html)의 font-size
%	부모 요소의 해당 속성 값

html { font-size: 16px; }

.title {
  font-size: 2rem;   /* 16 × 2 = 32px */
  padding: 0.5em;    /* 32 × 0.5 = 16px (자기 글자 크기 기준) */
}

rem은 루트 하나만 기준으로 삼아 예측이 쉬워, 폰트 크기에 널리 쓰입니다. em은 자기 글자 크기에 비례해 버튼 안쪽 여백 등에 유용합니다.

색상 표기

색은 여러 방식으로 적을 수 있습니다.

.a { color: #4c8bf5; }                 /* hex */
.b { color: rgb(76, 139, 245); }       /* rgb */
.c { color: rgba(76, 139, 245, 0.5); } /* 투명도 포함 */
.d { color: hsl(217, 89%, 63%); }      /* 색조/채도/명도 */

표기	형식	특징
hex	#rrggbb	가장 흔함, 간결
rgb	rgb(r,g,b)	직관적, 투명도는 rgba
hsl	hsl(h,s%,l%)	명도/채도 조절이 쉬움

⚠️ 주의 — 텍스트와 배경의 명도 대비가 충분하지 않으면 가독성과 접근성이 떨어집니다. 본문 텍스트는 배경과 충분한 대비를 유지해야 합니다.

텍스트 정렬과 장식

.lead {
  text-align: center;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-transform: uppercase;
}

요약

• font-family는 대체 글꼴을 함께 나열하고, line-height는 단위 없는 숫자를 권장합니다.
• 웹폰트는 @font-face로 불러오고 font-display: swap을 곁들입니다.
• rem은 루트, em은 자기 글자, %는 부모를 기준으로 합니다.
• 색은 hex, rgb, hsl로 표기하며 충분한 대비를 유지합니다.

연습문제

1. 루트 font-size가 16px일 때 font-size: 1.5rem은 몇 px일까요?
2. 글꼴을 "Pretendard" 우선, 없으면 시스템 sans-serif로 지정하는 규칙을 작성하세요.
3. 빨강(255,0,0)을 50% 투명하게 만드는 색상값을 rgba로 작성하세요.
4. 줄 간격을 글자 크기의 1.6배로 주고 싶을 때 권장되는 line-height 값은?

힌트 — rem은 16 기준 곱하기, rgba의 마지막 값은 투명도, line-height는 단위 없는 숫자가 좋습니다.