[CSS] CSS 속성 - 글꼴, 문자
CSS 속성 - 글꼴, 문자
글꼴
font
글자 관련 속성들을 지정, 단축 속성을 갖고 있음.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
font-style | 글자 기울기 지정 | normal |
font-weight | 글자 두께 지정 | normal |
font-size | 글자 크기 지정 | medium(16px) |
line-height | 줄 높이(줄 간격) 지정 | normal(Reset.css 적용시 1) |
font-family | 글꼴(서체) 지정 | 운영체제(브라우저)에 따라 달라짐 |
사용법
font: 기울기 두께 크기 / 줄높이 글꼴;
.box {
font: italic bold 20px / 1.5 "Arial", sans-serif;
}
.box {
font: 20px / 1.5; /* ERROR */
font: bold; /* ERROR */
font: 30px / 1.5 sans-serif; /* ERROR */
font: bold 30px sans-serif;
font: italic 30px / 1.5 "Arial", sans-serif;
}
단축 속성을 사용하려면
font-size와font-family를 필수로 입력해야 합니다.
font 개별 속성
font-style
글자 스타일(기울기)을 지정, 개별 속성을 가짐.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
normal | 스타일 없음 | normal |
italic | 이텔릭체(활자) | |
oblique | 기울어진 글자 |
font-weight
글자의 두께(가중치)를 지정, 개별 속성을 가짐.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
normal | 기본 글자 두께, 400 과 동일 | normal (400) |
bold | 글자 두껍게, 700 과 동일 | |
bolder | 부모(상위) 요소보다 더 두껍게( bold 보다 두껍다는 개념이 아님) | |
lighter | 부모(상위) 요소보다 더 얇게 | |
| 숫자 | 100 부터 900 까지의 100단위의 숫자 9개,normal 과 bold 이외의 두께를 제공하는 글꼴(서체)을 위한 설정 |
일반적인 두께의 이름
font-weight 의 각 값은 일반적으로 다음과 같은 글꼴의 이름으로 표현됨
| 값 | 의미 |
|---|---|
100 | Thin (Hairline) |
200 | Extra Light (Ultra Light) |
300 | Light |
400 | Normal |
500 | Medium |
600 | Semi Bold (Demi Bold) |
700 | Bold |
800 | Extra Bold (Ultra Bold) |
900 | Black (Heavy) |
상대적 두께
bolder 나 lighter 를 사용할 경우 부모(상위) 요소에게 상속받은 값에서 다음과 같이 계산됨
| 상속 값 | bolder | lighter |
|---|---|---|
100 | 400 | 100 |
200 | 400 | 100 |
300 | 400 | 100 |
400 | 700 | 100 |
500 | 700 | 100 |
600 | 900 | 400 |
700 | 900 | 400 |
800 | 900 | 700 |
900 | 900 | 700 |
숫자 값과 두께의 불일치
글꼴(서체)의 정확한 두께를 숫자로 표현할 수 없는 경우에만 ..
400이 주어지면500을 사용하고,500이 불가하면500미만의 다른 두께 사용500이 주어지면400을 사용하고,400이 불가하면400미만의 다른 두께 사용400미만 값이 주어지면, 가장 가까운 숫자의 얇은 두께 사용500초과 값이 주어지면, 가장 가까운 숫자의 두꺼운 두께 사용
예를 들면
normal과bold만 지원하는 글꼴일 경우,
100 ~ 500 은normal을 의미하고 600 ~ 900 은bold를 의미합니다.
font-size
글자의 크기를 지정, 개별 속성을 가짐.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 단위 | px, em, cm 등 단위로 지정 | 16px |
% | 부모(상위) 요소의 비율로 지정 | |
xx-small | 가장 작은 크기 | |
x-small | 더 작은 크기 | |
small | 작은 크기 | |
medium | 중간 크기 | medium |
large | 큰 크기 | |
x-large | 더 큰 크기 | |
xx-large | 가장 큰 크기 | |
smaller | 부모(상위) 요소보다 작은 크기 | |
larger | 부모(상위) 요소보다 큰 크기 |
line-height
줄 높이(줄 간격) 지정, 개별 속성을 가짐.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
normal | 브라우저의 기본 정의를 사용(1 ~ 1.4) | normal |
| 숫자 | 요소 자체 글꼴 크기의 배수로 지정(1.4 ~ 1.7 배수가 보기 좋다) | |
| 단위 | px, em, cm 등 단위로 지정 | |
% | 요소 자체 글꼴 크기의 비율로 지정 |
font-family
글꼴(서체) 지정, 개별 속성을 가짐.
속성 값
| 값 | 의미 | 글꼴 계열 의미 |
|---|---|---|
| 글꼴이름 | 글꼴(서체) 후보 목록을 지정 | |
serif | 글꼴 계열 이름을 지정 | 바탕체 계열 |
sans-serif | 고딕체 계열 | |
monospace | 고정너비(가로폭이 동등한) 글꼴 계열 | |
cursive | 필기체 계열 | |
fantasy | 장식(재미있는 문자 표현을 포함하는) 글꼴 계열 |
사용법
font-family: [글꼴후보1, 글꼴후보2, ...], 글꼴계열;
.box {
font-family: Arial, "Open Sans", "돋움", dotum, sans-serif;
}
글꼴 계열은 필수로 입력해야 합니다.
문자
color
문자의 색상을 지정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 색상 | 문자의 색상을 지정 | rgb(0, 0, 0) |
색상 표현
| 표현 | 의미 | 예시 |
|---|---|---|
| 색상이름 | 브라우저에서 제공하는 색상의 이름 | red, blue |
| Hex 색상코드 | 16 진수 색상 | #000000 |
| RGB | 빛의 삼원색 | rgb(255, 255, 255) |
| RGBA | 빛의 삼원색, 투명도 | rgba(255, 0, 0, .5) |
| HSL | 색상, 채도, 명도 | hsl(120, 100%, 50%) |
| HSLA | 색상, 채도, 명도, 투명도 | hsla(120, 100%, 50%, .3) |
위 표는 색상을 이용하는 모든 속성의 값으로 사용할 수 있습니다.
RGBA: Red, Green, Bule, Alpha channel
HSLA: Hue, Saturation, Lightness, Alpha channel
text-align
문자 정렬 방식을 지정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| left | 왼쪽 정렬 | |
| right | 오른쪽 정렬 | |
| center | 가운데 정렬 | |
| justify | 양쪽 맞춤(2줄 이상에만 적용) |
direction속성(텍스트 방향 및 쓰기 방향 지정 /ltr,rtl)의 값에 의해서text-align속성의 ‘기본 값’이 변경될 수 있습니다. 일반적으로left가 기본 값으로 사용됩니다.
text-decoration
문자의 장식(line)을 설정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
none | 선 없음 | none |
underline | 밑줄을 지정 | |
overline | 윗줄을 지정 | |
line-through | 증앙 선(가로지르는)을 지정 |
text-indent
(첫번째 줄의) 들여쓰기를 지정
음수 값을 사용할 수 있습니다.
음수 값을 사용하면 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기) 됩니다.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 단위 | px, em, cm 등 단위로 지정음수 값도 사용 가능 | 0 |
letter-spacing
문자의 자간(글자 사이 간격)을 설정, 음수 값도 사용 가능
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
normal | 단어 사이의 일반 간격 | normal 또는 0 |
| 단위 | px, em, cm 등 단위로 지정 |
word-spacing
단어 사이(띄어쓰기)의 간격을 설정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
normal | 단어 사이의 일반 간격 | normal 또는 0 |
| 단위 | px, em, cm 등 단위로 지정 |
참고
패스트캠퍼스(박영웅 강사님) : 올인원 패키지 : 프론트엔드 개발 with React.js
개발자님들 덕분에 많이 배울 수 있었습니다. 감사의 말씀 드립니다.
