728x90
반응형
CSS의 컬러 다루기
1) 색상 이름으로 표현하기
[문법]
선택자 {color: 색상이름;}
[예시]
<style>
.color_class{
color: darksalmon;
}
#color_id{
color: deeppink;
}
p {
color: yellowgreen;
}
</style><body>
<h2>Color</h2>
<p class="color_class">클래스</p>
<p id="color_id">아이디</p>
<p>p태그</p>
</body>
[결과]
2) RGB 색상값으로 표현
[문법]
선택자{color: rgb(0~255정수,0~255정수,0~255정수);}
선택자{color: rgba(0~255정수,0~255정수,0~255정수,0~1 소수);} /*alpha:투명도*/
[예시]
<style>
.color_class{
color: rgb(0, 0, 255);
}
#color_id{
color: rgb(255, 0, 255);
}
p {
color:rgba(0, 0, 255, 0.2);
}
</style><body>
<h2>Color</h2>
<p class="color_class">클래스</p>
<p id="color_id">아이디</p>
<p>p태그</p>
</body>
[결과]
3) 16진수 색상값으로 표현
[문법]
/*rgb색상값을 16진수로 0 ~ FF까지 범위를 가짐*/
선택자 {color: #0000FF;}
잘모르겠다면, 네이버에 rgb 색상표라고 검색하면 원하는 색상의 값을 알 수 있다 :)
[예시]
<style>
.color_class{
color: #FF0000;
}
#color_id{
color: #FF00DD;
}
p {
color: #1DDB16;
}
</style><body>
<h2>Color</h2>
<p class="color_class">클래스</p>
<p id="color_id">아이디</p>
<p>p태그</p>
</body>
[결과]
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
728x90
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| 07 CSS 글자 크기 및 폰트 설정 (0) | 2021.04.27 |
|---|---|
| 06 CSS의 텍스트 다루기 (0) | 2021.04.27 |
| 04 CSS 선택자 - 2 (0) | 2021.04.25 |
| 03 CSS 선택자 - 1 (0) | 2021.04.25 |
댓글