목차
- color 예제 - 글자 색상 변경
- color 정의
- 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>