[text] CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = color속성, 상속O)

목차

1. color 예제 - 글자 색상 변경
2. color 정의
3. color 구문

color 예제 - 글자 색상 변경

[방법1]

 

<style>
h1 {color: red;}
</style>

 

<h1>홈짱닷컴 (homzzang.com)</h1>

 

결과보기

---

[방법2]

 

아래처럼, 줄 바꿔 표현해도 됨. 

대개, 여러 속성을 함께 사용할 땐 이렇게 줄을 바꾸는 방식으로 표현.

이렇게 줄을 바꿔 적을 때에도 반드시 속성값 뒤에 ; (세미콜론) 붙여야 함.

단, 속성이 하나 뿐이거나, 맨 마지막에 온 속성일 경우엔 적지 않아도 됨.

 

<style>
h1 {

     color: red;

}
</style>

<h1>홈짱닷컴 (homzzang.com)</h1>

결과보기

---

[방법3] 

 

태그 요소 안에서 글자 색깔 지정하려면 아래처럼 하면 됨. (인라인 스타일)

<h1 style="color: red;">홈짱닷컴 (homzzang.com)</h1>

 

결과보기

color 정의

 

특정 태그 요소의 글자 색깔 지정.

 

---

 

1.

• 가독성을 위해서 텍스트색상과 대비되는 배경색도 함께 지정 권장.
• 주의: text-color 이런 속성은 존재 X.
• transition: color 0.3s ease; 추가 시, 은은하게 색깔 변경.

 

2.

• 기본값 : 미지정
• 상속여부 : O
• 애니효과 : O
• CSS버전 : CSS1
• JS구문 : object .style.color = "#0000FF"

 

3.

모든 브라우저 지원.

 

4. 공식 매뉴얼

https://developer.mozilla.org/en-US/docs/Web/CSS/color

 

color 구문

 

selector{color: 속성값;}

 

---

[속성값]

 

속성값으로 올 수 있는 것들은 여러 종류지만, 주로 아래 방식 중 하나 사용.

  

1-1. 

색상명 입력 방식 : red (빨강)

 

1-2. 

Hexadecimal color입력 방식 : #FF0000 (빨강)      색상코드 표 보기

 

1-3. 

RGB 입력 방식 : rgb(255,0,0) (빨강)

https://homzzang.com/b/css-275

 

1-4.  

부모 요소의 색상값 상속 경우 안 적어도 되나, inherit 적어 명시 가능.

 

<style>

div {color: red;}
h1 {color: inherit;}
</style>

 

<div>

   <h1>홈짱닷컴 (homzzang.com)</h1>

</div>

  

결과보기