color라는 속성 자체는 어렵지 않지만, 원하는 컬러를 지정하는 부분이 조금 어렵습니다.
컬러를 지정하는 방법에는 크게 세가지 방식이 있습니다.
Color Name vs hex vs rgb
[ Color Name을 사용 할 경우 ]
<!DOCTYPE html>
<html>
<head>
<style>
#tomato {
color: tomato;
}
#powderblue {
color: powderblue;
}
</style>
</head>
<body>
<h1 id="tomato">Hello World</h1>
<h1 id="powderblue">Hello World</h1>
</body>
</html>
[ hex를 사용 할 경우 ]
아래와 같이 #색상코드 형태로 사용 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #ffc747;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
[ rgb를 사용 할 경우 ]
아래와 같이 red의 r, green의 g, blue의 b를 합친 rgb() 형태로 색상 코드가 나옵니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: rgb(244, 83, 116);
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>CSS RGB and RGBA Colors
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] 타이포그래피 - font (0) | 2022.01.24 |
|---|---|
| [생활코딩] 타이포그래피 - text-align (0) | 2022.01.24 |
| [생활코딩] 속성을 공부하는 방법 (0) | 2022.01.22 |
| [생활코딩] 다양한 선택자들 (0) | 2022.01.21 |
| [생활코딩] 가상 클래스 선택자 (0) | 2022.01.21 |
댓글