1. 글꼴 font-family 속성
글꼴이 없을 경우를 대비하여 2,3번째 글꼴까지 함께 지정한다.
body {font-family:"맑은 고딕", 돋움, 굴림;}
/*두 단어 이상의 글꼴이름은 큰 따옴표로 묶음*/
2. 글자 크기 font-size 속성
글자 크기 단위는 px, pt, em, rem, 백분율 등이 있다. (1em = 16px, 12pt)
body {font-size:3em;}
3. 글자 굵기 font-weight 속성
굵기는 normal, bold 등의 예약어나 숫자값(100~900)을 사용한다.
body {font-weight:bolder;}
4. 이탤릭체 font-style 속성
글자를 이탤릭체로 표시할 때 사용하는 속성이다.
body {font-style:italic;}
위 4가지 글꼴 관련 스타일을 종합하면
<head>
<meta charset="UTF-8">
<title>글꼴 관련 스타일 사용하기</title>
<style>
body {font-size:20px;}
h1 {font-family: 바탕; font-size:3em;}
.accent {font-size:150%; font-weight:800;}
.italic {font-style:italic;}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
더보기
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.
'CSS' 카테고리의 다른 글
| 목록 스타일 (0) | 2022.11.12 |
|---|---|
| 텍스트 관련 스타일 (0) | 2022.11.12 |
| 구글 폰트 사용하기 (0) | 2022.11.11 |
| CSS 기본 선택자 (2) | 2022.11.10 |
| 스타일과 스타일 시트 (0) | 2022.11.10 |