프밍/CSS
DAY 8. 글꼴 관련 스타일(3): font-style, font-weight
태영(泰伶)
2022. 11. 1. 21:29
font-style: normal | italic | oblique
font-style: normal;
기울어지지 않은 보통의 글씨체
font-style: italic;
이탤릭체 (대부분 기울어진 글꼴이 따로 디자인되어 있음)
font-style: oblique;
이탤릭체(일반 글꼴을 그저 기울여 놓음)
* oblique: 비스듬한, 사선의
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-weight: normal;
보통 굵기. default값.
font-weight: bold;
굵게
font-weight: bolder;
원래보다 더 굵게
font-weight: lighter;
원래보다 더 가늘게
font-weight: 100;
가장 가는 굵기
font-weight: 200;
조금씩
font-weight: 300;
조~오금씩
font-weight: 400;
좀 더
font-weight: 500;
좀 더 많이
font-weight: 600;
더더
font-weight: 700;
많이 많이
font-weight: 800;
두꺼워집니다
font-weight: 900;
이게 제일 두꺼운 거
예제.
<!DOCTYPE html>
<html lang="ko">
<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>
</html>↓
