목차
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.
Hexa decimal 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>
주소 복사
랜덤 이동