Ch.3 CSS 첫걸음 — 색과 글꼴

색과 타이포그래피

CSS 색상 표현 방법(이름, hex, rgb)을 사용할 수 있다font-family, font-size, line-height 등 텍스트 속성을 다룬다text-align, text-decoration으로 텍스트를 꾸밀 수 있다

색과 글꼴만 바꿔도 페이지 분위기가 완전히 달라진다

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

CSS에서 색과 글꼴은 어떻게 지정할까?

color, font-family, font-size — 텍스트의 첫인상을 결정하는 속성들입니다.

article

핵심 내용

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); /* 투명도 포함 */

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

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

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

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

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

다음 중 Box Model의 구성 요소가 아닌 것은?

색과 타이포그래피 마스터!

key

핵심 용어

🔤

color

글자 색상

🎨

background-color

배경 색상

🔲

border-color

테두리 색상

edit_note

정리 노트

색과 타이포그래피

색상 표현 방법

키워드
이름으로 지정 — red, navy, tomato
HEX
#으로 시작하는 6자리 — #FF5733, #333333
RGB
rgb(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 단위를 권장합니다.

check_circle

핵심 정리

  • 1색상: 이름, #HEX, rgb() 세 가지 방식
  • 2font-family, font-size, line-height로 글꼴 설정
  • 3a:hover로 마우스 올릴 때 스타일 변경 가능

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작