HTML5 - [5] 색상 및 글꼴

HTML5 - [5] 색상 및 글꼴

정리하기

(1) 색 모델과 색상 지정 방법

RGB 색 모델 → #rrggbb (또는 #rgb), rgb(), rgba() (여기서, a(alpha)는 투명도 0.0~1.0)

HSL 색 모델 → hsl(), hsla() (여기서, a(alpha)는 투명도 0.0~1.0)

기타 색상 지정 방법 → 영문 색상 키워드 사용, 브라우저에서 정의된 시스템 색상 키워드 사용

(2) color 속성과 opacity 속성

color 속성 → HTML 요소의 텍스트 등의 색상 지정

opacity 속성 → 투명도 지정

(3) 그라데이션 효과 지정

선형 그라데이션 → linear-gradient(), repeating-linear-gradient()

원형 그라데이션 → radial-gradient(), repeating-linear-gradient()

(4) 기본 글꼴 스타일(CSS1/CSS2)

기본 글꼴 스타일(CSS1/CSS2)

속성	설명
font-family (글꼴 종류)	family-name → 굴림체, 궁서체, ‘Times New Roman’, … generic-family → serif, sans-serif, cursive, fantasy, monospace
font-size (글자 크기)	절대 단위(pt, pc, cm, mm, in), 상대 단위(px, em, ex, %) xx-small, x-small, small, medium, large, x-large, xx-large smaller, larger
font-style (글자 기울어짐)	normal, italic, oblique
font-variant (작은 대문자로 변환)	normal, small-caps
font-weight (글자 굵기)	100, 200, …, 400, …, 800, 900, normal(=400), bold(=700) bolder, lighter
font (스타일의 일괄 지정)	지정 형식: [ font-style || font-variant || font-weight ]? font-size [/line-height]? font-family

(5) CSS3에서 추가된 글꼴 스타일

CSS3에서 추가된 글꼴 스타일

속성	설명
@font-face (사용자 글꼴)	외부 글꼴 지정 font-family, src, font-stretch, font-style, font-weight, unicode-range
font-size-adjust (글꼴 크기 조정)	글꼴의 기본 크기 조정 none, <number>, inherit
font-stretch (글꼴 늘림)	텍스트의 글꼴 늘림(가로 폭) 지정 wider, narrower, normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
font-synthesis (글꼴 합성)	텍스트의 굵은 글꼴이나 기울어진 글꼴의 합성 여부 지정 none, weight, style

(6) CSS3에서 확장된 글꼴 기능 관련 속성

font-kerning, font-feature-setting, font-language-override

다양한 font-variant의 하위 속성 → font-variant-ligatures, font-variant-position, font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-east-asian