폰트 (font)
1. font-family : 글자체를 여러개 지정
- 지정하려는 폰트를 , 으로 나열
- 한글 폰트의 경우) 한글 이름과 영어 이름을 같이 사용
- 마지막은 기본형으로 지정
- "폰트명"
- 폰트 이름이 굴림, Arial 등 띄어쓰기가 없는 경우) "" 따옴표 생략가능
-serif : 유사한 값으로 설정
-https://fonts.google.com/ 무료제공폰트
예) p { font-family : "맑은 고딕", "malgan gothic", serif }
=> 맑은 고딕이 없다면 malgan gothic- > malgan gothic이 없다면 -> serif 설정
2. css3 표준 단위
em : 배수, 부모 값 기준배수 (부모의 상대적인 값)
1em : 부모와 동일한 값
2em : 부모의 값 2배
rem : 배수, 문서값(최상위값)을 기준으로 배수
% : 현재값을 기준으로 %
px : 고정된 픽셀값
pt : 포인터, 1pt = 1/72in
pc : 피카소, 1pc = 12pt
cm / mm /in : 센티미터 / 밀리미터 / 인치 (1 in =96 px)
deg : 각도
3. 폰트 사용
font-size : 크기 (단위는 px, pt 등)
font-style : 폰트(글자) 스타일
normal / italic / oblique
font-weight : 굵기 설정 100~900까지 설정 (100단위 지정)
: normal(400) / bold(700) / bolder / lighter
font : 폰트 속성을 한번에 지정
: style -> weight -> size -> family 순서 지정
(style, weight 생략가능)
font : font-style font-weight font-size font-family
4. 적용 예시
안녕하세요
<!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>font</title>
<style>
.font{
font-family: "맑은 고딕", 'Malgun Godic', serif;
font-size: 20px;
font-style: italic;
font-weight: 700;
/* font-weight: vold와 동일 */
font: italic bold 20px "맑은 고딕","Malgun Godic", serif;
}
</style>
</head>
<body>
<p class="font">안녕하세요</p>
</body>
</html>'HTML.CSS.JS > css' 카테고리의 다른 글
| [CSS] inline태그의 width, height, 중앙정렬 (0) | 2023.04.06 |
|---|---|
| [CSS] border 테두리 속성 (0) | 2023.04.06 |
| [CSS] 색상 사용 (0) | 2023.04.06 |
| [CSS] 속성선택자 예시 (0) | 2023.04.06 |
| [CSS] css 규칙 (0) | 2023.04.06 |