728x90
CSS 폰트 문자 색상 설정하기
1. style 속성을 활용한 HTML 태그 직접 변경
기본 형태
//태그내 style속성을 통한 폰트 색상 설정
<태그명 style="color:#ffffff;">이것은 폰트입니다.</태그명>샘플 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Color Example</title>
</head>
<body>
<p style="color : #be0000;">빨강색</p>
<p style="color : #e2703a;">주황색</p>
<p style="color : #f7ea00;">노랑색</p>
<p style="color : #3a6351;">초록색</p>
<p style="color : #046582;">파랑색</p>
</body>
</html>출력 결과
2. css 파일을 통한 폰트 색상 변경
기본 형태
적용원하는 태그/클래스/아이디 명 {
color : #ffffff;
}샘플예제 : HTML 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Color Example</title>
</head>
<body>
<p class="red">빨강색</p>
<p class="orange">주황색</p>
<p class="yellow">노랑색</p>
<p class="green">초록색</p>
<p class="blue">파랑색</p>
</body>
</html>
CSS 파일
.red {
color : #be0000;
}
.orange {
color : #e2703a;
}
.yellow {
color : #f7ea00;
}
.green {
color : #3a6351;
}
.blue {
color : #046582;
}출력결과
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] 모서리 모양 변경하기 border-radius (0) | 2021.04.03 |
|---|---|
| [CSS] 배경 색상 변경하기 background color (4) | 2021.04.03 |
| [CSS] 엘리먼트 투명도 조절 opacity (0) | 2021.03.20 |
| [CSS] 가로 세로 가운데 정렬 (0) | 2021.03.20 |
| [CSS] 마우스 오버 이벤트 hover (0) | 2021.03.20 |
댓글