🌈
EPISODE 02
HEX/RGB/HSL · Google Fonts · CSS 변수
색상 & 폰트
CSS의 다양한 색상 표기(HEX/RGB/RGBA/HSL), 폰트 속성과 Google Fonts 연결, CSS 변수(:root)로 디자인 시스템을 구축하는 법을 익힙니다.
CSScolorfontCSS 변수
소요 시간
⏱ 30~60분
난이도
📊 초보
선수 조건
🎯 css-01
결과물
브랜드 색상 팔레트와 한국어 웹폰트가 적용된 페이지
이 강의에서 배우는 것
- 1색상 이름·HEX·RGB·RGBA·HSL을 상황에 맞게 사용한다
- 2Google Fonts로 한국어 웹폰트(Noto Sans KR)를 적용한다
- 3font-family/size/weight/line-height/letter-spacing을 자유롭게 다룬다
- 4:root와 var()로 디자인 토큰을 한 곳에서 관리한다
1. 색상 표현법
색상 이름
css
color: red;
color: blue;
color: tomato;
color: cornflowerblue;직관적이지만 종류가 제한적. 실무에서 거의 사용하지 않음.
HEX
css
color: #ff0000;
color: #333333;
color: #fff; /* 단축형 */#RRGGBB. 실무에서 가장 많이 사용.
RGB / RGBA
css
color: rgb(255, 0, 0);
color: rgba(0, 0, 0, 0.5); /* 투명도 0~1 */
background-color: rgba(52, 152, 219, 0.2);HSL
css
color: hsl(0, 100%, 50%); /* 빨강 */
color: hsl(210, 50%, 50%); /* 파랑 계열 */hsl(색조, 채도, 명도). 색상 조정이 직관적이라 디자이너가 선호.
2. Google Fonts
html
<!-- HTML <head>에 추가 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
rel="stylesheet">css
body {
font-family: 'Noto Sans KR', sans-serif;
}💡
Noto Sans KR은 한국어 웹폰트로 가장 널리 사용됩니다.
3. 폰트 속성
css
p {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
font-weight: 400; /* normal=400, bold=700 */
font-style: italic;
line-height: 1.6; /* 단위 없는 배수 권장 */
letter-spacing: 0.5px;
word-spacing: 2px;
}4. 텍스트 꾸미기
css
p {
text-decoration: underline; /* line-through, none */
text-transform: uppercase; /* lowercase, capitalize */
text-align: left; /* center, right, justify */
}5. CSS 변수 (Custom Properties)
css
:root {
--color-primary: #3498db;
--color-secondary: #2ecc71;
--color-background: #f5f5f5;
--font-size-base: 16px;
}
h1 {
color: var(--color-primary);
font-size: var(--font-size-base);
}
button {
background-color: var(--color-secondary);
}- 색상을 한 곳에서 관리 → 변경이 쉬워짐
- 브랜드 컬러·디자인 토큰을 체계적으로 관리