반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>글꼴 관련 스타일</title>
<style>
/*
글꼴을 지정하는 font-family 속성
기본형 - font-family:<글꼴 이름> | <글꼴 이름>, <글꼴 이름>
*/
body { font-family: "맑은 고딕", 돋움, 굴림; }
/*
글자 크기를 지정하는 font-size 속성
기본형 - font-size:<절대 크기> | <상대 크기> | <크기> | <백분율>
절대 크기 - 브라우저에서 지정한 글자 크기
상대 크기 - 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
크기 - 브라우저와 상관없이 글자 크기를 직접 지정
백분율 - 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시
키워드를 사용하여 글자 크기 지정
- xx-small < x-small < small < medium < large < x-large < xx-large
단위를 사용하여 글자 크기를 지정
- em, rem, ex, px, pt
- lem = 16px, 12pt
*/
body {
font-size: 150%;
}
/*
이탤릭체 글자 표시 font-style 속성
기본형 - font-style: normal | italic | oblique
*/
.italic {
font-style: italic;
}
/*
글자 굵기를 지정하는 font-weight 속성
기본형 - font-weight: normal | bold | bolder | lighter | 100~900
normal - 기본값, 보통 굵기
bold - 굵게
bolder - 원래보다 더 굵게
lighter - 원래보다 더 가늘게
100 ~ 900 - 100은 가장 가늘게, 900은 가장 굵게
*/
.accent {
font-size: 150%;
font-weight: bolder;
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 2일차 position (0) | 2023.05.11 |
|---|---|
| CSS - 2일차 padding, margin (0) | 2023.05.11 |
| CSS - 1일차 list-style (0) | 2023.05.10 |
| CSS - 1일차 폰트(텍스트꾸미기, 대소문자변환, 글간격) (0) | 2023.05.10 |
| CSS - 1일차 폰트(글자색, 텍스트정렬, 줄간격) (0) | 2023.05.10 |