예제 4-12. CSS3 폰트 활용
WEB/CSS3-CONCEPT 2017. 11. 4. 18:52 |1 2 3 4 5 6 7 8 9 10 11 12 | CSS 표준 단위 단위 - 의미 ex) 사용 예시 em - 배수. ex) font-size : 3em; /* 현재 폰트의 3배크기 */ % - 퍼센트. ex) font-size : 500%; /* 현재 폰트의 500% 크기 */ px - 픽셀 수. ex) font-size : 10px; /* 10픽셀 크기 */ cm - 센티미터. ex) margin-left : 5cm; /* 왼쪽 여백 5cm */ mm - 밀리리터. ex) margin-left : 10mm; /* 왼쪽 여백 10mm*/ in - 인치. 1in = 2.54cm = 96px. ex) margin-left : 2in; /* 왼쪽 여백 2인치 */ pt - 포인터. 1pt = 1in의 1/72 크기. ex) margin-left : 20pt; /* 왼쪽 여백 20포인트 */ pc - 피카소(picas). 1pc = 12pt. ex) font-size : 1pc; /* 1pc 크기의 폰트 */ deg - 각도 transform : rotate(20deg); /* 시계 방향으로 20도 회전 */ | cs |
- 폰트 패밀리, font-family
* 폰트가 브라우저에서 지원되지 않을 경우를 대비하여 여러개의 폰트지정, 앞에서부터 순서대로 폰트를 선택한다.
* 공백이 낀 경우 : " "로 묶어서 표현한다.
font-family : Arial, "Times New Roman", Serif;
- 폰트 크기, font-size
font-size : 40px;
font-size : medium;
font-size : 1.6em; /* 현재 폰트의 1.6배 크기 */
- 폰트 스타일, font-style
font-style : italic;
- 폰트 굵기, font-weight
font-weight : 300; /* 100~900의 범위에서, 300 정도 굵기*/
font-weight : normal(400) | bold(700) | bolder | lighter;
- 단축 프로퍼티, font
font : font-style(선택), font-weight(선택), font-size(필수), font-famliy(필수)
font : italic bold(font-style), 20px(font-weight), consolas(font-size), sans-serif(font-famliy);
font : 20px(font-weight) consolas, sans-serif(font-famliy)
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>폰트</title> <style> body { font-family: "Times New Roman", Serif; font-size: large; } h3 { font: italic bold 40px consolas, sans-serif; } </style> </head> <body> <h3>Consolas font</h3> <hr> <p style="font-weight:900">font-weight 900</p> <p style="font-weight:100">font-weight 100</p> <p style="font-style:italic">Italic Style</p> <p style="font-style:oblique">Oblique Style</p> <p>현재 크기의 <span style="font-size:1.5em">1.5배</span> 크기로 </p> </body> </html> | cs |
'WEB > CSS3-CONCEPT' 카테고리의 다른 글
| 예제 4-16. 다양한 둥근 모서리 테두리. (0) | 2017.11.04 |
|---|---|
| 예제 4-13. <div>의 박스 모델 보이기. 예제 4-14. 박스 모델 활용. 예제 4-15. 다양한 테두리선 스타일. (0) | 2017.11.04 |
| 예제 4-11. 텍스트 꾸미기 (0) | 2017.11.04 |
| 예제 4-10. 색 활용 (0) | 2017.11.04 |
| 예제 4-9. 셀렉터 활용. 3. 셀렉터. (0) | 2017.11.04 |