CSS · 타이포그래피, 색, 배경

HTML^? 이 글과 박스를 "내용"으로 만든다면, CSS^? 는 그 위에 글꼴·색·배경이라는 옷을 입힙니다. 이 장에서는 글자를 다루는 타이포그래피, 색을 적는 여러 표기법, 요소 뒤를 채우는 배경과 그라데이션을 봅니다.

글(텍스트)이 "배우"라면, 타이포그래피는 배우의 옷차림과 자세, 색은 조명, 배경은 무대 세트예요. 같은 글이라도 어떤 옷·조명·무대를 주느냐에 따라 전혀 다른 느낌이 됩니다.

똑같은 문구인데 왼쪽은 기본 글꼴 그대로라 위계가 없고, 오른쪽은 크기·굵기·줄높이·자간·색으로 읽기 좋게 정돈했어요. 글자에 스타일을 주는 것만으로 인상이 달라집니다.

아래 라이브 데모 사용법

각 데모는 왼쪽이 편집기, 오른쪽이 실행 결과입니다. 안의 <style> 값을 직접 고치고 실행을 누르면 바로 결과가 바뀌어요. 색 코드(#4f46e5 같은 것)나 숫자를 바꿔 보며 눈으로 익히는 게 가장 빠릅니다. 단위(px·rem·%)와 반응형은 단위 · 반응형 장에서 따로 다룹니다.

1. 타이포그래피 — 글자 다루기

무엇: 글꼴·크기·굵기·줄 간격·정렬·꾸밈 등 글자의 모양과 배치를 정하는 속성 묶음입니다. 하나씩 표로 정리하고, 아래에서 직접 만져 봅니다.

속성	뜻	자주 쓰는 값
`font-family`	글꼴(폰트) 지정	글꼴 이름들을 쉼표로 나열(폴백 스택)
`font-size`	글자 크기	`16px`, `1rem`, `1.2em` (→ 단위 장)
`font-weight`	굵기	`normal`(400), `bold`(700), `100`~`900`
`font-style`	기울임 여부	`normal`, `italic`, `oblique`
`line-height`	줄 높이(줄 간격)	`1.5`(배수·권장), `24px`
`letter-spacing`	글자 사이 간격	`0.05em`, `1px`, `normal`
`text-align`	가로 정렬	`left`, `right`, `center`, `justify`
`text-decoration`	밑줄·취소선 등	`none`, `underline`, `line-through`
`text-transform`	대소문자 변환	`none`, `uppercase`, `lowercase`, `capitalize`
`white-space`	공백·줄바꿈 처리	`normal`, `nowrap`, `pre`, `pre-wrap`
`word-break`	긴 단어 줄바꿈 방식	`normal`, `break-all`, `keep-all`
`text-overflow`	넘친 글자 표시	`clip`, `ellipsis`(…)

font-family — 폴백 스택

무엇: 쓰고 싶은 글꼴을 여러 개 쉼표로 나열합니다. 앞 글꼴이 없으면 다음 글꼴로 넘어가요. 그래서 "폴백(대체) 스택"이라 부릅니다. 맨 끝에는 항상 serif·sans-serif·monospace 같은 일반 계열 이름을 둬 안전망을 만듭니다.

/* 앞부터 차례로 시도 → 없으면 다음 → 마지막은 일반 계열 */
body {
  font-family: "Noto Sans KR", -apple-system, "Segoe UI", sans-serif;
}

/* 이름에 공백이 있으면 따옴표로 감싼다: "Noto Sans KR" */
code {
  font-family: "D2Coding", Consolas, monospace;
}

왜 스택으로 적나요?

사용자 컴퓨터마다 설치된 글꼴이 다릅니다. 첫 글꼴이 없을 때를 대비해 비슷한 글꼴을 차례로 적고, 마지막엔 OS가 무조건 가진 일반 계열(sans-serif 등)을 둬서 최소한의 모양은 보장합니다.

라이브 데모 — 제목/본문 스타일링

제목과 본문에 서로 다른 타이포 속성을 입혔습니다. 굵기·줄 간격·자간을 바꿔 보세요.

라이브 데모 — 한 줄 말줄임(text-overflow: ellipsis)

중요: 말줄임(…)은 text-overflow 하나만으로는 안 됩니다. 세 속성을 함께 써야 해요(MDN 기준).

속성	값	역할
`white-space`	`nowrap`	줄바꿈을 막아 한 줄로 유지
`overflow`	`hidden`	칸을 넘친 글자를 숨김
`text-overflow`	`ellipsis`	숨긴 자리에 … 를 표시

2. 색 표기법

무엇: 같은 색을 적는 방법이 여러 가지입니다. 어떤 표기든 결과는 같은 색일 수 있어요. 대표 표기를 정리합니다.

표기	예	설명
색 이름	`red`, `tomato`, `rebeccapurple`	미리 정해진 이름. 외우기 쉽지만 종류가 한정적.
HEX(16진수)	`#ff0000` = `#f00`	`#RRGGBB`. 각 두 자리가 같으면 `#RGB` 3자리로 줄일 수 있음.
HEX + 투명도	`#ff000080`	`#RRGGBBAA`. 뒤 두 자리(`AA`)가 알파(투명도).
`rgb()`	`rgb(255 0 0)`	빨강·초록·파랑을 0~255로. 현대 표기는 쉼표 없이 공백 구분도 가능.
`rgba()` / 알파	`rgba(255, 0, 0, 0.5)`	마지막 값이 알파(0=투명 ~ 1=불투명). `rgb(255 0 0 / 50%)` 로도 씀.
`hsl()`	`hsl(0 100% 50%)`	색상(0~360°)·채도(%)·명도(%). 색을 직관적으로 조절하기 좋음.
`hsla()`	`hsla(0, 100%, 50%, 0.5)`	HSL + 알파. `hsl(0 100% 50% / 50%)` 로도 씀.

opacity 와 알파(alpha)는 다릅니다

opacity 는 요소 전체(글자·테두리·배경·자식까지)를 통째로 투명하게 만듭니다. 반면 색의 알파(rgba의 마지막 값, #RRGGBBAA)는 그 색 하나만 투명하게 합니다. 예를 들어 "배경만 반투명하고 글자는 또렷하게" 하려면 opacity 가 아니라 background: rgba(...) 를 써야 해요.

라이브 데모 — 같은 색, 여러 표기 + opacity vs 알파

위 네 칸은 모두 똑같은 빨강입니다(표기만 다름). 아래 두 칸은 opacity 와 배경 알파의 차이를 보여줘요.

3. 배경(background)

무엇: 요소의 내용 뒤를 색·이미지로 채우는 속성들입니다. 색만 칠할 수도, 이미지를 깔 수도, 둘을 겹칠 수도 있어요.

속성	뜻	자주 쓰는 값
`background-color`	배경 색	색 표기 전부(`#fff`, `rgb(...)` …)
`background-image`	배경 이미지	`url("그림.png")`, 그라데이션 함수
`background-size`	이미지 크기	`auto`, `cover`, `contain`, `100px 80px`
`background-position`	이미지 위치	`center`, `top right`, `50% 50%`
`background-repeat`	반복 방식	`repeat`, `no-repeat`, `repeat-x`
`background`	위 속성들의 단축	`#fff url(...) no-repeat center / cover`

cover — 칸을 꽉 채우되 비율 유지(넘치는 부분은 잘림). 배너·히어로 이미지에 주로 사용.
contain — 이미지 전체가 보이게 비율 유지(칸에 여백이 생길 수 있음). 로고처럼 다 보여야 할 때.
단축 background 에서 position / size 는 슬래시(/)로 구분합니다: center / cover.

라이브 데모 — 배경 색·크기·위치

이미지 대신 그라데이션을 배경으로 깔아 background-size 와 background-repeat 효과를 봅니다.

4. 그라데이션(gradient)

무엇: 색이 부드럽게 이어지는 배경입니다. 실제로는 background-image 에 들어가는 함수예요(이미지의 한 종류). 세 가지가 핵심입니다.

함수	모양	방향/중심 지정
`linear-gradient()`	직선으로 번짐	각도(`90deg`)나 방향(`to right`)
`radial-gradient()`	가운데서 원형으로 번짐	`circle`/`ellipse`, `at center`
`conic-gradient()`	중심을 축으로 빙 돌며 번짐	`from 각도`, `at 위치`

색 정지점(color stop): 색 뒤에 위치를 적어 "여기서 이 색"이라고 못 박을 수 있습니다. 위치는 %나 각도로 줘요.

/* 방향 + 두 색 */
linear-gradient(to right, #4f46e5, #06b6d4)

/* 각도 + 정지점(0%에서 보라, 60%까지 보라, 그 뒤 청록) */
linear-gradient(135deg, #4f46e5 0%, #4f46e5 60%, #06b6d4 100%)

/* 원형: 중심에서 바깥으로 */
radial-gradient(circle at center, #fde68a, #f59e0b)

/* 원뿔형: 12시 방향(0deg)에서 시계방향으로 색이 돌아감 */
conic-gradient(from 0deg, red, orange, yellow, green, blue, red)

라이브 데모 — 버튼·배너 그라데이션

버튼·배너에 자주 쓰는 그라데이션 모음입니다. 각도(135deg)·색·정지점(%)을 바꿔 보세요.

5. 글꼴 가독성과 웹폰트

가독성 기본: 본문은 line-height 1.5~1.8, 한 줄 길이는 너무 길지 않게(글자 수 기준 한글 35~45자 안팎), 본문과 배경의 대비를 충분히. 자간(letter-spacing)은 본문에선 거의 건드리지 않고, 큰 제목에서만 살짝 조절합니다.

웹폰트: 방문자 컴퓨터에 없는 글꼴을 서버에서 내려받아 쓰는 방법입니다. 두 가지 길이 있어요.

/* (가) @font-face — 내 서버의 폰트 파일을 직접 등록 */
@font-face {
  font-family: "MyFont";              /* 이 이름으로 부른다 */
  src: url("/fonts/myfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;                 /* 폰트 로딩 중엔 기본 글꼴로 먼저 보여줌 */
}
body { font-family: "MyFont", sans-serif; }

/* (나) 구글 폰트 — 링크 한 줄로 불러오기 (HTML <head> 안) */
/* <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet"> */
body { font-family: "Noto Sans KR", sans-serif; }

font-display: swap 을 권장

웹폰트는 내려받는 데 시간이 걸립니다. swap 을 주면 그동안 기본 글꼴로 글을 먼저 보여 주고, 폰트가 도착하면 바꿔 끼웁니다. 글이 한동안 안 보이는 현상을 막아 줘요. 한글 폰트는 용량이 크니 꼭 woff2 형식과 swap 을 함께 쓰세요.

한눈에 — 텍스트/색/배경 카탈로그

분류	속성/표기	대표 값
타이포	`font-family`	폴백 스택, 끝에 일반 계열
	`font-size` / `font-weight`	`16px`/`1rem` · `400`~`900`
	`font-style` / `line-height`	`italic` · `1.6`
	`letter-spacing` / `text-align`	`0.05em` · `center`
	`text-decoration` / `text-transform`	`underline` · `uppercase`
	`white-space` / `word-break` / `text-overflow`	`nowrap` · `break-all` · `ellipsis`
색	이름 / HEX	`red` · `#ff0000`=`#f00`
	`rgb()` / `rgba()`	`rgb(255 0 0)` · `rgba(255,0,0,0.5)`
	`hsl()` / `hsla()`	`hsl(0 100% 50%)`
	`opacity` vs 알파	요소 전체 vs 그 색만
배경	`background-color` / `-image`	색 · `url(...)` · 그라데이션
배경	`background-size` / `-position` / `-repeat`	`cover`/`contain` · `center` · `no-repeat`
그라데이션	`linear-gradient()`	`to right` / `135deg` + 정지점
	`radial-gradient()`	`circle at center`
	`conic-gradient()`	`from 0deg at center`

실무 메모 — 대비와 가독성

화면 글은 읽혀야 의미가 있습니다. 본문과 배경의 명도 대비를 충분히 주세요(연한 회색 글자에 흰 배경은 피합니다). 웹 접근성 기준(WCAG)에서는 본문 텍스트 대비 4.5:1 이상을 권합니다. opacity 로 글자를 흐리게 하면 대비가 무너지니, 색은 알파가 아닌 또렷한 색으로 정하고 흐림은 배경에만 쓰는 편이 안전해요. 또 줄 간격(line-height)이 너무 좁으면 글이 답답해 보입니다. 의심스러우면 조금 더 넉넉하게 주는 쪽이 대체로 낫습니다.

다음 단계

테두리·둥근 모서리·그림자·전환(transition)·애니메이션으로 꾸미기 → CSS · 테두리 · 그림자 · 애니메이션
크기 단위(px·rem·%·vw)와 반응형은 → CSS · 단위 · 반응형