728x90
๋ฐ์ํ
CSS _์ปฌ๋ฌ_color
color๋ ์์ ์ง์ ํ๋ ์์ฑ์ผ๋ก 3๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ์์ฑ๊ฐ์ ์ค ์ ์์ต๋๋ค.
โป์์์ ์ด๋ฆ์ด๋ ๊ฐ์ ์ธ์ธ ํ์์์ด ๊ทธ๋ ํ์ํ ์ปฌ๋ฌ๋ ๊ฒ์์ ํตํ๊ฑฐ๋
ํฌํ ์ต์์ ์ปฌ๋ฌ๋ช
์ ๋ณต์ฌํด์ ๋ถ์ฌ๋ฃ์ผ์๋ฉด ๋ฉ๋๋ค!
↓↓↓
[ CSS - font ๋ฌธ๋ฒ ]
<style>
์ ํ์ { color : ์์๊ฐ; }
</style>
โถ color์ ์์ฑ๊ฐ์ ์์ฑํ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ!
1) ์์๋ช
: ์์์ ๋ถ๋ฅด๋ ๊ณ ์ ๋ช
์ผ๋ก ์์ฑ
2) #000000 : ์์์ 16์ง์๋ก ์์ฑ
3) rgb (0, 0, 0) : ์์์ rgb๊ฐ์ผ๋ก ํ๊ธฐ
โป ํฌ๋ช
๋๋ฅผ ์กฐ์ ํ๊ณ ์ถ์ ๋๋ color : rgba (0, 0, 0, ํฌ๋ช
๋)
โถ 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>color</title>
<!-- css ์ปฌ๋ฌ ์ ์ฉ ๋ถ๋ถ -->
<style>
p:first-child {
color: red;
}
p:nth-child(2) {
color: #ca00c0;
}
p:nth-child(3) {
color: rgb(20, 240, 30);
}
p:nth-child(4) {
color: rgb(240, 137, 20, 0.5);
}
</style>
</head>
<body>
<h2>color : ์์ฑ๊ฐ</h2>
<div>
<p>์์๋ช
์ผ๋ก ์ปฌ๋ฌ ๋ฐ๊พธ๊ธฐ</p>
<p>16์ง์๋ก ์ปฌ๋ฌ ๋ฐ๊พธ๊ธฐ</p>
<p>rgb๊ฐ์ผ๋ก ์ปฌ๋ฌ ๋ฐ๊พธ๊ธฐ</p>
<p>ํฌ๋ช
๋ ์กฐ์ ํ๊ธฐ</p>
</div>
</body>
</html>
[ ์คํ ํ๋ฉด์ ๋ณํ ]
↓ css style ์ ์ฉ ์ ํ๋ฉด
↓ css style ์ ์ฉ ํ๋ฉด
728x90
๋ฐ์ํ
'๐ปCoding > ๐ CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [css] CSS ์คํ์ผ ์ ๊ฑฐ : reset CSS (๊ธฐ๋ณธ ์คํ์ผ ์ง์ฐ๊ธฐ) (0) | 2022.08.28 |
|---|---|
| [CSS] html aํ๊ทธ ์คํ์ผ ์์ ๊ธฐ : css ์คํ์ผ ์ง์ฐ๊ธฐ (0) | 2022.08.21 |
| CSS _ํฐํธ(font)_font-weight (0) | 2021.11.22 |
| CSS _ํฐํธ(font)_font-family (0) | 2021.11.22 |
| CSS _์ ํ์_์์ฑ ์ ํ์(attribute selectors) (0) | 2021.11.19 |