topic★★★★★난이도 · 약 20분

색과 타이포그래피

색상(이름, hex, rgb), font-family, font-size, line-height로 텍스트의 첫인상을 결정한다.

#color#font#HEX#RGB#타이포그래피
왜 배우는가

똑같은 내용의 문서도 서체와 색상에 따라 전문적으로 보이기도, 장난스럽게 보이기도 한다.

CSS에서 색을 표현하는 방법은 여러 가지입니다

css
/* 1. 이름 */
color: navy;
color: tomato;

/* 2. HEX 코드 (#RRGGBB) */
color: #1A1A2E;
color: #4ECDC4;

/* 3. RGB 함수 */
color: rgb(26, 26, 46);
color: rgba(78, 205, 196, 0.5); /* 투명도 포함 */

이름, HEX 코드, RGB 함수 세 가지 방식으로 색상을 표현할 수 있다.

속성설명
color글자 색상
background-color배경 색상
border-color테두리 색상

글꼴과 텍스트 스타일로 가독성을 높입니다

css
body {
  /* 글꼴: 앞에서부터 시도, 없으면 다음으로 */
  font-family: 'Pretendard', sans-serif;
  font-size: 16px;       /* 기본 글자 크기 */
  line-height: 1.6;      /* 줄 간격 (1.6배) */
}

h1 {
  font-weight: 700;      /* 굵기 (400=보통, 700=굵게) */
  text-align: center;    /* 가운데 정렬 */
}

a {
  text-decoration: none; /* 밑줄 제거 */
  color: #4ECDC4;
}

font-family, font-size, line-height, font-weight, text-align 등 텍스트 관련 속성.

font-size 단위: px(고정), rem(상대 — 루트 기준), em(상대 — 부모 기준) line-height: 1.5~1.8이 읽기 편함 font-weight: 100(얇음) ~ 900(매우 굵음)

색상과 글꼴을 적용하여 홈페이지를 변신시켜봅시다

css
body {
  background-color: #FFF8F0;
  font-family: sans-serif;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

h1 {
  color: #1A1A2E;
  text-align: center;
}

.section-title {
  color: #4ECDC4;
  border-bottom: 2px solid #4ECDC4;
  padding-bottom: 4px;
}

a {
  color: #4ECDC4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

배경색, 글꼴, 링크 색상, hover 효과까지 적용한 CSS.

방법설명
키워드이름으로 지정 — red, navy, tomato
HEX#으로 시작하는 6자리 — #FF5733, #333333
RGBrgb(R, G, B) — rgb(255, 87, 51)
속성설명
font-family글꼴 종류 지정 (sans-serif, serif 등)
font-size글자 크기 — px, rem, em 단위 사용
font-weight글자 굵기 — normal, bold, 100~900
line-height줄 간격 — 1.5~1.8이 가독성 최적

색상은 HEX 코드가 가장 널리 쓰이고, 글꼴 크기는 rem 단위를 권장합니다.

실기 드릴 3문항
edit실기 드릴 · 단답형

#4ECDC4는 어떤 색상 표현 방식인가?

check_circle실기 드릴 · OX

line-height: 1.6은 글자 크기의 1.6배 줄 간격을 의미한다.

edit실기 드릴 · 단답형

다음 중 Box Model의 구성 요소가 아닌 것은? (float, margin, padding, border)