728x90
반응형
CSS 03 : 글꼴 속성 정리 MDN
(예시)
글꼴 종류 지정
font-family: serif, monospace; => serif라는 글꼴을 적용하고 만약 안되면 monospace 글꼴을 적용함.(하나만 써도 됨)
글자 크기
font-size: 16px;
이텔릭체 여부 지정
font-style: italic;
글자 굵기 지정
font-weight: bold;
소문자를 작은 대문자로 바꿈
font-variant: small-caps;
단위
px : 픽셀 단위
rem : 루트 요소의 글꼴 크기(html). ex) 2rem은 html글꼴 크기의 2배
em : 요소의 글꼴 크기. 현재 자기 자신 폰트 사이즈의 몇배로 할것인가?
vw : viewport 너비의 1% viewport는 현재 보이는 화면 사이
vh : viewport 높이의 1%
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>good</title>
<style>
.test-rem {
font-size: 2rem;
}
.test-em {
font-size: 2em;
}
.chunk {
font-size: 15px;
}
.test-varient {
font-variant: small-caps;
}
.test-rectangle {
width: 10vw;
height: 10vh;
background-color: yellow;
}
</style>
</head>
<body>
<p class="test-rem">예시 문장1</p>
<div class="chunk">
<p class="test-em">예시 문장2</p>
</div>
<p class="test-varient">example sentence</p>
<h2>Rectangle Test</h2>
<div class="test-rectangle"></div>
</body>
</html>
예시문장1은 2rem의 크기로 적용된다. rem은 최상위 태그인 html의 속성을 상속받는다.
html내 스타일에서 글꼴 크기가 16px로 적용되었기 때문에 2rem은 32px와 같다.
예시문장2는 2em의 크기로 적용된다. em은 자기 요소 내의 글자 크기 속성값에 배수를 해준 것과 같으므로
2em은 15x2 = 30px이다.
따라서 예시문장1이 미세하게 더 크게 나오게 된 것이다.
728x90
반응형
'CSS' 카테고리의 다른 글
| CSS 06 : 네비게이션 바(상단바) 만들기 (0) | 2022.11.01 |
|---|---|
| CSS 05 : display 속성(none, block, inline, inline-block (0) | 2022.11.01 |
| CSS 04 : Box Model(content, padding, border, margin), Box Sizing (0) | 2022.11.01 |
| CSS 02 : 선택자 정리 (0) | 2022.10.30 |
| CSS 01 : 인라인, 내부, 외부 스타일 적용 방법 (0) | 2022.10.30 |
