프론트엔드/CSS

[CSS] 폰트 (문자) 색상 설정 하기 font color set

jinwanseo 2021. 4. 2. 21:26
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