font-family 속성(글꼴 지정)
- 글꼴(폰트)을 정의하는 속성
선택자 {
font-family: “맑은 고딕”, 돋움;
}- 웹 문서의 글꼴은 사용자 OS의 글꼴을 이용해 웹 브라우저에 표시합니다.
- 웹문서에 설정한 글꼴이 없는 경우 다른 글꼴로 표시됩니다.
- 글꼴이름은 여러 개 지정하여 넣을 수 있다. font-family: “맑은 고딕”, 돋움;
- font-family 속성은 상속된다.
- 에 정의된 속성은 문서전체에 적용되고 문서안의 자식요소에 같은 글꼴로
한글 글꼴
- 윈도우 환경 ( 굴림체, 돋움체, 바탕체, 궁서체)
- 맑은 고딕 ( 윈도우 비스타 이후 버전 또는 오피스 2007 )
영문 글꼴
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- "Courier New", Courier, monospace
- Arial, Helvetica, sans-serif
- Tahoma, Geneva, sans-serif
- "Trebuchet MS", Arial, Helvetica, sans-serif 등
font-size 속성(글꼴 사이즈 지정)
- 글꼴 크기를 정의하는 속성
선택자 {
font-size: 사이즈값;
}
- 글꼴 사이즈를 나타내는 단위
px(픽셀), %(백분율), em(엠), rem(알엠), pica(피카), in(인치), cm(센치미터), mm(밀리미터)
px: 절대값으로 사용되는 단위
em: 상위요소 크기의 몇 배인지로 정해지는 단위(상위요소 글자 M기준)
rem: 문서의 최상위 요소 html의 몇 배인지로 정해지는 단위 (r root)
최상위 요소의 값 == 1rem
예) 기본웹 브라우저 글자크기 16px
16px == 1rem 17px == 1.063rem > 계산 복잡
html { font-size:10px; } 기본값 10px == 1rem
10px == 1rem 17px == 1.7rem font-weight 속성(글꼴 굵기 지정하기)
- 글꼴 굵기를 정의하는 속성
선택자 {
font-weight: bold;
}
font-style 속성(글꼴 스타일 지정하기)
•글꼴 스타일을 정의하는 속성(이탤릭체)
선택자 {
font-style: italic;
}
