색상·타이포그래피

1. 색상 표기법 4가지

/* 1. HEX (16진수) — 가장 많이 사용 */
color: #ff0000;       /* 빨강 */
color: #333333;       /* 어두운 회색 */
color: #333;          /* 단축형 (같은 두 자리 반복 시) */
color: #6366f1;       /* 보라색 계열 */

/* 2. RGB */
color: rgb(255, 0, 0);       /* 빨강 */
color: rgb(99, 102, 241);    /* 보라색 */

/* 3. RGBA — 투명도 포함 (0=완전 투명, 1=불투명) */
color: rgba(0, 0, 0, 0.5);         /* 50% 투명 검정 */
background: rgba(255, 255, 255, 0.9); /* 90% 불투명 흰색 (반투명 효과) */

/* 4. HSL — 색상(Hue) 채도(Saturation) 명도(Lightness) */
color: hsl(240, 80%, 60%);    /* 파랑 계열 */
color: hsl(0, 0%, 20%);       /* 어두운 회색 */

/* 현대에는 OKLCH도 많이 사용 */
color: oklch(0.6 0.15 250);   /* 지각적으로 균일한 색상 공간 */

속성	역할
color	글자 색상
background-color	배경 색상
background	배경 색상 + 이미지 + 그라디언트 통합
opacity	요소 전체 투명도 (0~1)

2. 그라디언트 배경

/* 선형 그라디언트 */
background: linear-gradient(to right, #6366f1, #ec4899);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* 방사형 그라디언트 */
background: radial-gradient(circle, #f59e0b, #ef4444);

/* 텍스트에 그라디언트 적용 */
h1 {
  background: linear-gradient(90deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

3. Google Fonts 연결

<!-- 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;500;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">

/* CSS에서 사용 */
body {
  font-family: 'Noto Sans KR', 'Inter', sans-serif;
}

/* 폴백(Fallback) 폰트 순서 — 앞에서부터 없으면 다음 것 사용 */
font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

4. 폰트 크기와 단위

/* px — 고정 픽셀 (접근성 설정 무시) */
font-size: 16px;

/* rem — 루트(html) 기준 배수 (접근성 친화적, 권장) */
html { font-size: 16px; }  /* 기본값 */
h1   { font-size: 2rem; }  /* 32px */
p    { font-size: 1rem; }  /* 16px */
small { font-size: 0.875rem; } /* 14px */

/* em — 부모 기준 배수 (중첩 시 복잡해짐) */
.parent { font-size: 20px; }
.child  { font-size: 0.8em; } /* 20 * 0.8 = 16px */

/* clamp() — 유동형 폰트 크기 */
font-size: clamp(1rem, 2.5vw, 2rem); /* 최소 16px ~ 최대 32px */

5. 타이포그래피 핵심 속성

p {
  font-size: 1rem;          /* 16px */
  font-weight: 400;         /* 100~900 (400=normal, 700=bold) */
  line-height: 1.7;         /* 줄 간격 (단위 없는 숫자 권장) */
  letter-spacing: -0.01em;  /* 글자 간격 */
  word-break: keep-all;     /* 한글 단어 단위 줄바꿈 */
  color: #374151;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;          /* 제목은 줄 간격 좁게 */
  letter-spacing: -0.02em;   /* 큰 글자는 약간 좁게 */
}

/* 텍스트 정렬 */
text-align: left;    /* 기본값 */
text-align: center;
text-align: right;
text-align: justify; /* 양쪽 정렬 (한글에는 비권장) */

/* 텍스트 꾸미기 */
text-decoration: none;         /* 링크 밑줄 제거 */
text-decoration: underline;
text-decoration: line-through; /* 취소선 */

/* 텍스트 변환 */
text-transform: uppercase;  /* 대문자 변환 */
text-transform: capitalize; /* 첫 글자 대문자 */

6. 웹 가독성 황금 규칙

항목	권장값	이유
본문 폰트 크기	16px 이상	모바일 확대 없이 읽기 가능
줄 간격	1.5~1.8	글자 사이 공간 확보
본문 최대 너비	60~75ch	한 줄 45~75글자가 적정
배경-글자 대비	대비비 4.5:1 이상	WCAG AA 접근성 기준
링크 밑줄	본문 내 링크는 밑줄	색맹 사용자도 링크 인식 가능

관련 검색어  ·  CSS색상HEX, rgba투명도, GoogleFonts연결, CSS폰트크기rem, line-height가독성, CSS그라디언트, 웹타이포그래피