css로 글자색을 변경하기 위해서는 color 속성을 사용해서 변경할 수 있습니다. color 속성에 입력할 수 있는 형식에는 6가지가 있습니다. 첫 번째는 키워드를 입력해서 사용하는 방법으로 직관적으로 알 수 있어서 좋습니다. 두 번째는 16진수로 입력하는 방법, 세 번째는 rgb로 색상을 조합해서 입력하는 방법, 네 번째는 rgba로 상 rga에 투명도까지 입력하는 방법, 다섯 번째는 hsl 색상, 채도, 명도를 조합해서 입력하는 방법, 여섯 번째는 hsl에 투명도까지 추가하는 방법입니다.
키워드 입력
<!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>Document</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
16진수 입력
<!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>Document</title>
<style>
h1 {
color: #0000ff;
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
rgb 입력
<!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>Document</title>
<style>
h1 {
color: rgb(0, 0, 255);
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>rgba 입력
<!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>Document</title>
<style>
h1 {
color: rgba(0, 0, 255, 1);
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
hsl 입력
<!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>Document</title>
<style>
h1 {
color: hsl(240, 100%, 50%);
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
hsla 입력
<!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>Document</title>
<style>
h1 {
color: hsla(240, 100%, 50%, 1);
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
'IT > css' 카테고리의 다른 글
| css id 선택자 (0) | 2023.03.14 |
|---|---|
| css 요소 선택자 (0) | 2023.03.14 |
| css 전체 선택자 (0) | 2023.03.14 |
| css 배경색 변경 (0) | 2023.03.06 |
| css 사용법 (0) | 2023.03.04 |
댓글