728x90
๋ฐ์ํ
CSS _ํฐํธ(font)
font๋ ํฐํธ ์คํ์ผ์ ๋ฐ๊พธ๊ธฐ ์ํ ์์ฑ๋ช
์ผ๋ก font-()๋ค์ ๋ด์ฉ์ ๋ฐ๋ผ
ํฐํธ์ ์คํ์ผ์ ๋ณํ๋ฅผ ์ค ์ ์์!
↓↓↓
[ CSS - font ๋ฌธ๋ฒ ]
<style>
์ ํ์ { font-์์ฑ: ์์ฑ๊ฐ; }
</style>
โถ CSS์์ ์์ฃผ ์ฌ์ฉํ๋ font์ ์์ฑ์ ๋๋ค.
โถ font-weight
ใด ํฐํธ์ ๊ตต๊ธฐ๋ฅผ ๋ณ๊ฒฝํ๋ ์์ฑ
ใด ์์ฑ๊ฐ์ด๋ ์ซ์๋ก ๊ตต๊ธฐ๋ก ๋ณ๊ฒฝํ ์ ์์
[์ฌ์ฉํ๋ ์์ฑ๊ฐ]
- normal : ๊ธฐ๋ณธ๊ฐ
- bold : ํฐํธ ๊ตต๊ฒ
- 100~900 : ์ซ์๋ณ๋ก ๊ธ๊ผด ๊ตต๊ธฐ๋ฅผ ์ง์ ๊ฐ๋ฅ
โป ์ซ์๊ฐ ํด์๋ก ๋๊บผ์์ง๋๋ค! (normal์ด 400, bold๊ฐ 700์)
โถ font-weight ์ฌ์ฉ ๋ฐฉ๋ฒ
<style>
์ ํ์ { font-weight: ๊ตต๊ธฐ์ค์ ๊ฐ; }
</style>
โถ font-weight ์ค์ ์์
[ html - css ์์ฑ ์ฝ๋ ]
<!DOCTYPE html>
<html lang="ko">
<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-weight</title>
<style>
.weight1 {
font-weight: normal;
/* ๊ธฐ๋ณธ๊ฐ์ด๋ผ ๋ณํ๊ฐ ์์ */
}
.weight2 {
font-weight: bold;
}
.weight3 {
font-weight: 100;
}
.weight4 {
font-weight: 900;
}
</style>
</head>
<body>
<h1>font-weight</h1>
<h3>font-weight : ํฐํธ์ ๊ตต๊ธฐ๋ฅผ ์ค์ ํ๋ ์์ฑ</h3>
<p class="weight1">normal : ๊ธฐ๋ณธ๊ฐ</p>
<P class="weight2">bold : ํฐํธ ๊ตต๊ฒ</P>
<P class="weight3">์ซ์๋ก ์ค์ ์ 400๋ณด๋ค ์์ผ๋ฉด ์์์ง๊ณ </P>
<P class="weight4">400๋ณด๋ค ํฌ๋ฉด ๋๊บผ์์ง๋๋ค.</P>
</body>
</html>
[ ์คํ ํ๋ฉด์ ๋ณํ ]
↓ css style ์ ์ฉ ์ ํ๋ฉด
↓ css style ์ ์ฉ ํ๋ฉด
728x90
๋ฐ์ํ
'๐ปCoding > ๐ CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] html aํ๊ทธ ์คํ์ผ ์์ ๊ธฐ : css ์คํ์ผ ์ง์ฐ๊ธฐ (0) | 2022.08.21 |
|---|---|
| CSS _์ปฌ๋ฌ_color (0) | 2021.11.23 |
| CSS _ํฐํธ(font)_font-family (0) | 2021.11.22 |
| CSS _์ ํ์_์์ฑ ์ ํ์(attribute selectors) (0) | 2021.11.19 |
| CSS _hover (0) | 2021.10.26 |