티스토리 뷰
CSS 폰트(Font) 글꼴속성
CSS 중 폰트과 관련된 속성들을 알아보고 사용법을 숙지하도록 해보자.
1 font-family
font-family 는 글꼴 종류를 설정하기 위해서 사용됩니다.
사용예) font-family: 굴림체;
font-family: 굴림체, 돋움체; 등으로 콤마(,)를 이용하여 글꼴을 연속적으로 설정할 수 있습니다. 왼쪽 글꼴 기준으로 설정되며, 왼쪽 글꼴
이 없으면 그 다음 글꼴이 적용됩니다.
2 color 속성
color 속성은 모든 테그에 사용할 수 있는 속성으로 문자 색을 설정합니다. color 속성은 색상 상수나 색상값을 이용하여 설정할 수
있습니다.
사용예) color: #00FF88; , color: blue
3 font-size 속성
글꼴 관련 속성으로 글꼴의 크기를 설정하기 위해서 사용된다
smaller, larger, xx-small, x-small, small, medium, large, x-large, xx-large 등의 상수로 크기를 조정할 수 있다
위 상수들로 표현된 글자의 크기를 아래에서 확인할 수 있습니다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>font-size 테스트</title> <style type="text/css"> .smaller { font-size:smaller; } .larger { font-size:larger; } .xx-small { font-size:xx-small; } .x-small { font-size:x-small; } .small { font-size:small; } .medium { font-size:medium; } .large { font-size:large; } .x-large { font-size:x-large; } .xx-large { font-size:xx-large; } </style> </head> <body> <p class="smaller" align="center">CSS는 쉬워요!</p> <p class="larger" align="center">CSS는 쉬워요!</p> <p class="xx-small" align="center">CSS는 쉬워요!</p> <p class="x-small" align="center">CSS는 쉬워요!</p> <p class="small" align="center">CSS는 쉬워요!</p> <p class="medium" align="center">CSS는 쉬워요!</p> <p class="large" align="center">CSS는 쉬워요!</p> <p class="x-large" align="center">CSS는 쉬워요!</p> <p class="xx-large" align="center">CSS는 쉬워요!</p> </body> </html> | cs |
font-size 속성을 '실수값+단위' 의 형식으로 설정할 수 있습니다.
기준 |
기준 |
약어 |
사용예 |
절대적 |
points(1포인트=1/72인치) |
pt |
font-size:10pt; |
|
inch(1인치=2.54cm) |
in |
font-size:2in; |
|
cm(1cm=10mm) |
cm |
font-size:10cm; |
|
mm(1mm=1/10cm) |
mm |
font-size:20mm; |
|
picas(1피이키=12포인트) |
pc |
font-size:24pc; |
상대적 |
pixels |
px |
font-size:24px; |
|
ems(영문글꼴 높이를1) |
em |
font-size:13em; |
|
exs(소문자 x높이를1) |
ex |
font-size:15ex |
|
% |
% |
font-size:70% |
% 는 상위글꼴 크기를 기준으로 이용하는 글꼴의 크기를 설정한다.
4 font-weight 속성
상수 |
설명 |
100~900 |
100~900 으로 글꼴의 굵기를 설정 할 수 있다. |
normal |
표준글꼴의 설정으로 400 으로 설정한 것과 동일 |
bold |
굵은글꼴의 설정으로 700 으로 설정한 것과 동일 |
lighter |
100~900 사이의 굵기 범위에서 한단계 가는 글꼴로 설정 |
bolder |
100~900 사이의 굵기 범위에서 한단계 굵은 글꼴로 설정 |
5 font 속성
font 속성은 글꼴에 관련된 여러 개의 속성을 한번에 설정하기 위해서 사용됩니다.
속성종류 |
생략유무 |
설명 |
font-family |
불가능 |
글꼴 종류를 설정 |
font-size |
불가능 |
글꼴의 크기를 설정 |
font-style |
가능 |
글꼴 스타일을 설정 |
font-variant |
가능 |
작은 대문자로 만들지를 설정 |
font-weight |
가능 |
글꼴의 굵기를 설정 |
font-height |
가능 |
줄 간격을 설정 |
이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^
'DEVELOPE > CSS' 카테고리의 다른 글
CSS 외부파일 불러오기 (0) | 2017.10.27 |
---|---|
CSS DIV 속성 position (0) | 2017.10.27 |
CSS hover 사용법 (0) | 2017.10.26 |
CSS margin / padding (0) | 2017.10.25 |
모바일웹 이미지맵 CSS 설정 (0) | 2017.01.31 |
- Total
- Today
- Yesterday
- 트위터 공유소스
- mariadb 백업
- 우분투 다운로드
- APM 설치
- crontab
- 에디트플러스
- 카카오스토리 url 공유
- CentOS 설치
- 트위터 공유방법 및 소스
- mysql 백업
- 미디어쿼리
- SQL 정렬
- 반응형 웹
- MYSQL 명령어
- 부트스트랩
- ubuntu
- 우분투
- 트위터 url 공유
- 우분투 usb 설치
- SQL 함수
- 카카오스토리 sns 공유
- 페이스북 공유소스
- CentOS
- centos 7
- yum
- 리눅스 명령어
- MySQL
- 카카오스토리 공유소스
- 트위터 sns 공유
- Q6600
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |